Merge pull request #13 from tomatoaiu/feat/four-lines-diary

Feat/four lines diary
tomatoaiu · May 12, 2018 · 9b5a5ad · 9b5a5ad
2 parents 443b90f + 92180ae
commit 9b5a5ad
Show file tree

Hide file tree

Showing 4 changed files with 351 additions and 0 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -92,6 +92,7 @@ export default {
         { icon: 'view_column', title: 'Boards', to: '/boards' },
         { icon: 'replay', title: 'KPT', to: '/kpt' },
         { icon: 'replay', title: 'YWT', to: '/ywt' },
+        { icon: 'replay', title: '4LinesDiary', to: '/fourLinesDiary' },
         { icon: 'replay', title: 'PDCA', to: '/pdca' },
         { icon: 'apps', title: 'Calendar', to: '/calendar' }
       ],

diff --git a/pages/fourLinesDiary.vue b/pages/fourLinesDiary.vue
@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <v-layout row wrap>
+      <v-flex xs12 sm5>
+        <v-menu
+          ref="menu"
+          lazy
+          :close-on-content-click="false"
+          v-model="menu"
+          transition="scale-transition"
+          offset-y
+          full-width
+          :nudge-right="40"
+          min-width="290px"
+          :return-value.sync="date"
+          :color="baseColor"
+        >
+          <v-text-field
+            :color="baseColor"
+            slot="activator"
+            label="Picker in menu"
+            v-model="date"
+            prepend-icon="event"
+            reaawarenessnly
+          ></v-text-field>
+          <v-date-picker
+            v-model="date"
+            no-title scrollable
+            :color="baseColor"
+            event-color="green"
+            :events="registerDates">
+            <v-spacer></v-spacer>
+            <v-btn flat :color="baseColor" @click="menu = false">Cancel</v-btn>
+            <v-btn flat :color="baseColor" @click="$refs.menu.save(date)">OK</v-btn>
+          </v-date-picker>
+        </v-menu>
+      </v-flex>
+      <v-spacer />
+      <v-flex xs3 sm3>
+        <v-btn flat icon :color="baseColor"
+         @click="toNextWeek">
+          <v-icon>keyboard_arrow_up</v-icon>
+        </v-btn>
+        <v-btn flat icon :color="baseColor"
+         @click="toLastWeek">
+          <v-icon>keyboard_arrow_down</v-icon>
+        </v-btn>
+        <v-btn flat icon :color="baseColor"
+         @click="toYesterday">
+          <v-icon>keyboard_arrow_left</v-icon>
+        </v-btn>
+        <v-btn flat icon :color="baseColor"
+          @click="toTomorrow">
+          <v-icon>keyboard_arrow_right</v-icon>
+        </v-btn>
+      </v-flex>
+    </v-layout>
+    <v-layout row wrap>
+      <v-flex xs12>
+        <p class="display-2">FACT</p>
+        <v-select
+          label="FACT"
+          chips
+          tags
+          solo
+          prepend-icon=""
+          append-icon=""
+          v-model="fourLinesDiaryPlan"
+        >
+          <template slot="selection" slot-scope="data">
+            <v-chip
+              close
+              @input="removeKeep(data.item)"
+              :selected="data.selected"
+              :color="fourLinesDiaryColor.fact"
+              text-color="white"
+            >
+              <v-avatar :color="fourLinesDiaryColor.factAvatar">F</v-avatar>
+              <strong>{{ data.item }}</strong>
+            </v-chip>
+          </template>
+        </v-select>
+      </v-flex>
+      <v-flex xs12>
+        <p class="display-2">AWARENESS</p>
+        <v-select
+          label="AWARENESS"
+          chips
+          tags
+          solo
+          prepend-icon=""
+          append-icon=""
+          v-model="fourLinesDiaryDo"
+        >
+          <template slot="selection" slot-scope="data">
+            <v-chip
+              close
+              @input="removeProblem(data.item)"
+              :selected="data.selected"
+              :color="fourLinesDiaryColor.awareness"
+              text-color="white"
+            >
+              <v-avatar :color="fourLinesDiaryColor.awarenessAvatar">A</v-avatar>
+              <strong>{{ data.item }}</strong>
+            </v-chip>
+          </template>
+        </v-select>
+      </v-flex>
+      <v-flex xs12>
+        <p class="display-2">LESSON</p>
+        <v-select
+          label="LESSON"
+          chips
+          tags
+          solo
+          prepend-icon=""
+          append-icon=""
+          v-model="fourLinesDiaryCheck"
+        >
+          <template slot="selection" slot-scope="data">
+            <v-chip
+              close
+              @input="removeTry(data.item)"
+              :selected="data.selected"
+              :color="fourLinesDiaryColor.lesson"
+              text-color="white"
+            >
+              <v-avatar :color="fourLinesDiaryColor.lessonAvatar">L</v-avatar>
+              <strong>{{ data.item }}</strong>
+            </v-chip>
+          </template>
+        </v-select>
+      </v-flex>
+      <v-flex xs12>
+        <p class="display-2">DECLARATION</p>
+        <v-select
+          label="DECLARATION"
+          chips
+          tags
+          solo
+          prepend-icon=""
+          append-icon=""
+          v-model="fourLinesDiaryAction"
+        >
+          <template slot="selection" slot-scope="data">
+            <v-chip
+              close
+              @input="removeTry(data.item)"
+              :selected="data.selected"
+              :color="fourLinesDiaryColor.declaration"
+              text-color="white"
+            >
+              <v-avatar :color="fourLinesDiaryColor.declarationAvatar">D</v-avatar>
+              <strong>{{ data.item }}</strong>
+            </v-chip>
+          </template>
+        </v-select>
+      </v-flex>
+    </v-layout>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data () {
+    return {
+      menu: false,
+      date: undefined,
+      registerDates: undefined
+    }
+  },
+  computed: {
+    ...mapGetters({
+      baseColor: 'color/baseColor',
+      fourLinesDiaryColor: 'color/fourLinesDiaryColor',
+      fourLinesDiary: 'fourLinesDiary/fourLinesDiary'
+    }),
+    fourLinesDiaryPlan: {
+      get () {
+        return this.getEachFourLinesDiary('fact')
+      },
+      set (list) {
+        this.setEaceFourLinesDiary('fourLinesDiary/setPlan', list)
+      }
+    },
+    fourLinesDiaryDo: {
+      get () {
+        return this.getEachFourLinesDiary('awareness')
+      },
+      set (list) {
+        this.setEaceFourLinesDiary('fourLinesDiary/setDo', list)
+      }
+    },
+    fourLinesDiaryCheck: {
+      get () {
+        return this.getEachFourLinesDiary('lesson')
+      },
+      set (list) {
+        this.setEaceFourLinesDiary('fourLinesDiary/setCheck', list)
+      }
+    },
+    fourLinesDiaryAction: {
+      get () {
+        return this.getEachFourLinesDiary('declaration')
+      },
+      set (list) {
+        this.setEaceFourLinesDiary('fourLinesDiary/setAction', list)
+      }
+    }
+  },
+  watch: {
+    date (next, prev) {
+      if (!this.hasDate(next)) {
+        this.setNewFourLinesDiary(next)
+      }
+    }
+  },
+  mounted () {
+    this.date = new Date().toJSON().slice(0, 10).replace(/-/g, '-')
+    this.setRegisterDates()
+  },
+  methods: {
+    removeEaceFourLinesDiary (fourLinesDiaryWord, item) {
+      this.$store.commit(fourLinesDiaryWord, { date: this.date, item })
+    },
+    removePlan (item) {
+      this.removeEaceFourLinesDiary('fourLinesDiary/removePlan', item)
+    },
+    removeDo (item) {
+      this.removeEaceFourLinesDiary('fourLinesDiary/removeDo', item)
+    },
+    removeCheck (item) {
+      this.removeEaceFourLinesDiary('fourLinesDiary/removeCheck', item)
+    },
+    removeAction (item) {
+      this.removeEaceFourLinesDiary('fourLinesDiary/removeAction', item)
+    },
+    hasDate (date) {
+      if (date in this.fourLinesDiary) {
+        return true
+      } else {
+        return false
+      }
+    },
+    getEachFourLinesDiary (fourLinesDiaryWord) {
+      if (this.hasDate(this.date)) {
+        return this.fourLinesDiary[this.date][fourLinesDiaryWord]
+      }
+    },
+    setEaceFourLinesDiary (mutationWord, list) {
+      if (this.hasDate(this.date)) {
+        this.$store.commit(mutationWord, { date: this.date, list })
+      } else {
+        this.setNewFourLinesDiary(this.date)
+        this.$store.commit(mutationWord, { date: this.date, list })
+      }
+    },
+    setNewFourLinesDiary (date) {
+      this.$store.commit('fourLinesDiary/setFourLinesDiary', {
+        date,
+        content: { fact: [], awareness: [], lesson: [], declaration: [] }
+      })
+      this.setRegisterDates()
+    },
+    setRegisterDates () {
+      this.registerDates = Object.keys(this.fourLinesDiary)
+    },
+    toTomorrow () {
+      this.toNextDay(1)
+    },
+    toYesterday () {
+      this.toNextDay(-1)
+    },
+    toNextWeek () {
+      this.toNextDay(7)
+    },
+    toLastWeek () {
+      this.toNextDay(-7)
+    },
+    toNextDay (direction) {
+      const date = new Date(this.date)
+      date.setDate(date.getDate() + direction)
+      this.date = date.toJSON().slice(0, 10).replace(/-/g, '-')
+    }
+  }
+}
+</script>
diff --git a/store/color.js b/store/color.js
@@ -17,6 +17,16 @@ export const state = () => ({
       tsuginiyarukoto: 'orange',
       tsuginiyarukotoAvatar: 'deep-orange'
     },
+    fourLinesDiary: {
+      fact: 'light-green',
+      factAvatar: 'green',
+      awareness: 'red darken-1',
+      awarenessAvatar: 'red darken-4',
+      lesson: 'orange',
+      lessonAvatar: 'deep-orange',
+      declaration: 'blue',
+      declarationAvatar: 'blue darken-4'
+    },
     pdca: {
       plan: 'light-green',
       planAvatar: 'green',
@@ -40,5 +50,6 @@ export const getters = {
   baseColor: state => state.color.base,
   kptColor: state => state.color.kpt,
   ywtColor: state => state.color.ywt,
+  fourLinesDiaryColor: state => state.color.fourLinesDiary,
   pdcaColor: state => state.color.pdca
 }
diff --git a/store/fourLinesDiary.js b/store/fourLinesDiary.js
@@ -0,0 +1,50 @@
+export const state = () => ({
+  fourLinesDiary: {
+    '2018-05-01': {
+      fact: ['everyday commit to github'],
+      awareness: ['diet'],
+      lesson: ['work for 10 minutes'],
+      declaration: ['work for 10 minutes']
+    },
+    '2018-05-03': {
+      fact: ['factda'],
+      awareness: ['awarenessda'],
+      lesson: ['lessonwosuruzo'],
+      declaration: ['declarationsimasita']
+    }
+  }
+})
+
+export const mutations = {
+  setFourLinesDiary (state, { date, content }) {
+    state.fourLinesDiary[date] = content
+  },
+  setFact (state, { date, list }) {
+    state.fourLinesDiary[date].fact = list
+  },
+  setAwareness (state, { date, list }) {
+    state.fourLinesDiary[date].awareness = list
+  },
+  setLesson (state, { date, list }) {
+    state.fourLinesDiary[date].lesson = list
+  },
+  setDeclaration (state, { date, list }) {
+    state.fourLinesDiary[date].declaration = list
+  },
+  removeFact (state, { date, item }) {
+    state.fourLinesDiary[date].fact.splice(state.fourLinesDiary[date].keep.indexOf(item), 1)
+  },
+  removeAwareness (state, { date, item }) {
+    state.fourLinesDiary[date].awareness.splice(state.fourLinesDiary[date].awareness.indexOf(item), 1)
+  },
+  removeLesson (state, { date, item }) {
+    state.fourLinesDiary[date].lesson.splice(state.fourLinesDiary[date].lesson.indexOf(item), 1)
+  },
+  removeDeclaration (state, { date, item }) {
+    state.fourLinesDiary[date].declaration.splice(state.fourLinesDiary[date].declaration.indexOf(item), 1)
+  }
+}
+
+export const getters = {
+  fourLinesDiary: state => state.fourLinesDiary
+}