change data in store

README.md

@@ -1,4 +1,7 @@
 # Preparations
 
+### Оправдание
+Код не самый лучший. Делалось все на скорую руку
+
 ### Demo
 http://preparations.herokuapp.com

package.json

@@ -13,7 +13,8 @@
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuetify": "^1.5.14",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.1.1",

src/components/CheckCard.vue

@@ -1,10 +1,15 @@
 <template>
   <v-card 
     class="card"
-    :class="{hoverable: !isVisible}"
-    @click="checkMyself"
   >
     <v-card-title>
+      <div 
+        class="check-block"
+        :class="{hoverable: !isVisible}"
+        @click="checkMyself"
+      >
+
+      </div>
       <div class="title">
         <h3 class="headline">{{ preparation.name }}</h3>
 
@@ -28,6 +33,17 @@
         <p class="additional-info">???</p>
       </div>
     </v-card-title>
+
+    <v-card-actions v-if="isVisible">
+      <v-btn flat 
+        color="error"
+        @click="wrong"
+      >Я тупая</v-btn>
+      <v-btn flat 
+        color="green"
+        @click="success"
+      >Я самая умная и красивая</v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 
@@ -40,17 +56,18 @@ export default {
   methods: {
     checkMyself() {
       this.$emit('check-myself')
+    },
+    success() {
+      this.$emit('success')
+    },
+    wrong() {
+      this.$emit('wrong', this.preparation.id)
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.hoverable {
-  &:hover {
-    cursor: pointer;
-  }
-}
 .title{
   position: relative;
   min-height: 9rem;
@@ -74,8 +91,26 @@ export default {
     }
   }
 }
-
 .additional-info{
   font-size: 1.2rem;
 }
+
+/deep/ .v-card__title {
+  position: relative;
+  z-index: 1;
+}
+
+.check-block {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  top: 0;
+}
+.hoverable {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>

src/components/CustomCard.vue

@@ -14,17 +14,35 @@
         <p class="additional-info">{{ preparation.portion }}</p>
       </div>
     </v-card-title>
-    <!-- <v-card-actions>
-      <v-btn flat color="orange">Share</v-btn>
-      <v-btn flat color="orange">Explore</v-btn>
-    </v-card-actions> -->
+
+    <v-card-actions>
+      <v-btn flat 
+        color="green"
+        @click="addToForgotList"
+        v-if="type === 'common'"
+      >Повторить</v-btn>
+      <v-btn flat 
+        color="error"
+        @click="removeFromForgotList"
+        v-if="type === 'forgotList'"
+      >Удалить</v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 
 <script>
 export default {
   props: {
-    preparation: Object
+    preparation: Object,
+    type: String
+  },
+  methods: {
+    addToForgotList() {
+      this.$emit('push-preparation', this.preparation.id)
+    },
+    removeFromForgotList() {
+      this.$emit('remove-preparation', this.preparation.id)
+    }
   }
 }
 </script>

src/main.js

@@ -3,7 +3,7 @@ import Vuetify from 'vuetify'
 
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import store from './store/'
 
 import 'vuetify/dist/vuetify.min.css'
 

src/router.js

@@ -5,7 +5,7 @@ import Home from './views/Home.vue'
 Vue.use(Router)
 
 export default new Router({
-  mode: 'history',
+  // mode: 'history',
   base: process.env.BASE_URL,
   routes: [
     {

src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import createPersistedState from 'vuex-persistedstate'
+
+import preparationsStore from './preparations'
+
+Vue.use(Vuex);
+const store = new Vuex.Store({
+  plugins: [
+    createPersistedState()
+  ],
+  modules: {
+    preparationsStore,
+  }
+})
+
+export default store;

src/store/preparations.js

@@ -0,0 +1,37 @@
+const preparationsStore = {
+  namespaced: true,
+  state: {
+    preparationsIdToRepeat: []
+  },
+  mutations: {
+    pushPreparation(state, preparationId) {
+      state.preparationsIdToRepeat.push(preparationId)
+    },
+    removePreparaion(state, preparationId) {
+      const index = state.preparationsIdToRepeat.findIndex(el => {
+        return el === preparationId
+      })
+
+      state.preparationsIdToRepeat.splice(index, 1)
+    }
+  },
+  actions: {
+    pushPreparation({state, commit}, preparationId) {
+      state.preparationsIdToRepeat.find(id => {
+        return id == preparationId
+      })
+      ? null
+      : commit('pushPreparation', preparationId)
+    },
+    removePreparaion({state, commit}, preparationId) {
+      commit('removePreparaion', preparationId)
+    }
+  },
+  getters: {
+    preparationsIdToRepeat(state) {
+      return state.preparationsIdToRepeat
+    }
+  }
+};
+
+export default preparationsStore

src/views/Check.vue

@@ -1,29 +1,51 @@
 <template>
   <div class="home">
+    <h3 class="display-1 center">Тест</h3>
     <v-layout row wrap justify-center>
       <template v-if="preparations && preparations.length">
         <v-flex xs12 sm6 md4 lg3 grow pa-3>
           <check-card
             :preparation="preparations[this.randomItem]"
             :isVisible="isVisible"
             @check-myself="checkMyself"
+            @wrong="addToForgotList"
+            @success="success"
           />
-          <!-- <v-btn
-            @click="nextItem"
-          >Следующий</v-btn> -->
         </v-flex>
       </template>
     </v-layout>
+
+    <div 
+      class="to-repeat-block"
+      v-if="preparationsToRepeat && preparationsToRepeat.length"
+    >
+      <h3 class="display-1 center">Обязательно повторить</h3>
+      <v-layout row wrap justify-center>
+        <v-flex xs12 sm6 md4 lg3 grow pa-3
+          v-for="preparation in preparationsToRepeat"
+          :key="preparation.id"
+        >
+          <custom-card
+            :preparation="preparation"
+            :type="'forgotList'"
+            @remove-preparation="removeFromForgotList"
+          />
+        </v-flex>
+      </v-layout>
+    </div>
   </div>
 </template>
 
 <script>
 import preparations from '@/assets/preparations'
 import PreparationForm from '@/components/PreparationForm'
 import CheckCard from '@/components/CheckCard'
+import CustomCard from '@/components/CustomCard'
+
+import {mapActions, mapGetters} from 'vuex';
 
 export default {
-  name: 'home',
+  name: 'check',
   data() {
     return {
       preparations: [],
@@ -34,9 +56,30 @@ export default {
   },
   components: {
     CheckCard,
+    CustomCard,
     PreparationForm,
   },
+  computed: {
+    ...mapGetters('preparationsStore', [
+      'preparationsIdToRepeat'
+    ]),
+    preparationsToRepeat() {
+      return this.preparationsIdToRepeat
+        .map(id => {
+          return preparations.find(preparation => {
+            return preparation.id === id
+          })
+        })
+        .sort((a, b) => {
+          return +a.id - +b.id
+        })
+    }
+  },
   methods: {
+    ...mapActions('preparationsStore', [
+      'pushPreparation',
+      'removePreparaion'
+    ]),
     setRandomItem(){
       this.randomItem = Math.round(Math.random()*this.preparations.length)
     },
@@ -45,17 +88,17 @@ export default {
       this.isVisible = false
     },
     checkMyself() {
-      console.log(this.clicks)
-      if(this.clicks === 0) {
-        this.isVisible = true;
-        this.clicks = 1
-        return;
-      } 
-
-      if(this.clicks === 1) {
-        this.nextItem()
-        this.clicks = 0;
-      }
+      this.isVisible = true;
+    },
+    addToForgotList(preparationId) {
+      this.nextItem(),
+      this.pushPreparation(preparationId)
+    },
+    removeFromForgotList(preparationId) {
+      this.removePreparaion(preparationId)
+    },
+    success() {
+      this.nextItem()
     }
   },
   mounted() {
@@ -64,3 +107,13 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.center {
+  text-align: center;
+}
+
+.to-repeat-block{
+  margin-top: 10rem;
+}
+</style>