About connected to backend

Dual-Ice · May 21, 2020 · 2a7401d · 2a7401d
1 parent 23c9f77
commit 2a7401d
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 113 deletions.
diff --git a/src/admin/components/About/About.vue b/src/admin/components/About/About.vue
@@ -8,23 +8,26 @@
             text="Добавить группу"
             size="small"
             type='button'
-            @click="showAddSkillGroup = true")
+            @click="showAddGroup = true")
     .about__content
       .container.about__content-container
         ul.skill-group__list
-          li.skill-group__item(v-if="showAddSkillGroup")
-            SkillGroup(:value="emptySkillGroup")
+          li.skill-group__item(v-if="showAddGroup")
+            SkillGroup(
+              :skillGroup="category"
+              @hide="hideAddGroup")
           li(
-            v-for="skillGroup in skillGroups"
-            :key="skillGroup.id"
+            v-for="category in categories"
+            :key="category.id"
           ).skill-group__item
             SkillGroup(
-              :value="skillGroup"
+              :skillGroup="category"
             )
 </template>
 <script>
-import AddBtn from "../AddBtn"
-import SkillGroup from "./SkillGroup"
+import SkillGroup from './SkillGroup'
+import AddBtn from '../partial/AddBtn'
+import { mapState, mapActions } from 'vuex'
 export default {
   components: {
     AddBtn,
@@ -33,69 +36,37 @@ export default {
 
   data () {
     return {
-      skillGroups: [
-        {
-          "id": 1,
-          "title": "Frontend",
-          "skills": [
-            {
-              "id": 1,
-              "title": "HTML5",
-              "percent": 100
-            },
-            {
-              "id": 2,
-              "title": "CSS3",
-              "percent": 50
-            },
-            {
-              "id": 3,
-              "title": "JavaScript",
-              "percent": 25
-            },
-            {
-              "id": 4,
-              "title": "VueJs",
-              "percent": 30
-            }
-          ]
-        },
-        {
-          "id": 2,
-          "title": "Workflow",
-          "skills": [
-            {
-              "id": 1,
-              "title": "GIT",
-              "percent": 45
-            },
-            {
-              "id": 2,
-              "title": "Terminal",
-              "percent": 60
-            },
-            {
-              "id": 3,
-              "title": "Gulp",
-              "percent": 30
-            },
-            {
-              "id": 4,
-              "title": "Webpack",
-              "percent": 75
-            }
-          ]
-        }
-      ],
-      emptySkillGroup: {
-        id: '',
-        title: '',
-        skills: []
+      category: {
+        category: ''
       },
-      showAddSkillGroup: false
+      showAddGroup: false
     }
-  }
+  },
+
+  computed: {
+    ...mapState('categories', ['categories']),
+    ...mapState('auth', ['user'])
+  },
   
+  beforeRouteLeave (to, from, next) {
+    this.showAddGroup = false
+    next()
+  },
+
+  created() {
+    this.loadCategories(this.user.id)
+  },
+
+  methods: {
+    ...mapActions('categories', ['loadCategories']),
+    
+    hideAddGroup () {
+      this.showAddGroup = false
+      this.category = {
+        category: ''
+      }
+    }
+  }
 }
 </script>
 <style lang="postcss" scoped>

diff --git a/src/admin/components/About/Skill.vue b/src/admin/components/About/Skill.vue
@@ -13,9 +13,12 @@
         CardBtn(
           icon="trash"
           type="button"
-          @click="delSkill"
+          @click="deleteSkill(skill)"
         ).skill__btn
-    form(@submit.prevent="saveSkill")(v-else)
+    form(
+      v-else 
+      @submit.prevent="saveSkill"
+    )
       .skill__data
         .skill__field 
           CustomInput(
@@ -41,8 +44,9 @@
           ).skill__btn
 </template>
 <script>
-import CardBtn from "../CardBtn"
-import CustomInput from "../CustomInput"
+import { mapActions } from 'vuex';
+import CardBtn from '../partial/CardBtn'
+import CustomInput from '../partial/CustomInput'
 import { required, minLength, numeric, maxValue } from 'vuelidate/lib/validators'
 
 export default {
@@ -52,7 +56,12 @@ export default {
   },
   
   props: {
-    skill: Object
+    skill: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
   },
 
   data () {
@@ -77,12 +86,18 @@ export default {
   },
 
   methods: {
+    ...mapActions(
+      'categories',
+      ['deleteSkill', 'updateSkill']
+    ),
+
     switchEdit () {
+      this.editMode = !this.editMode
+
       if (this.editMode) {
         this.tmpSkill = {...this.skill}
+        this.$v.tmpSkill.$reset()
       }
-      this.editMode = !this.editMode
-      this.$v.tmpSkill.$reset()
     },
 
     validationMessage (field) {
@@ -112,16 +127,12 @@ export default {
       }
     },
 
-    saveSkill () {
+    async saveSkill () {
       this.$v.tmpSkill.$touch()
       if (!this.$v.tmpSkill.$error) {
+        await this.updateSkill(this.tmpSkill);
         this.switchEdit()
-        console.log("All is ok: ", this.tmpSkill)
       }
-    },
-
-    delSkill () {
-
     }
   }
 }