Works connected to backend

src/admin/components/Works/Work.vue

@@ -2,7 +2,7 @@
   .work.card
     .work__preview
       .work__image-wrap
-        img(:src="value.image").work__image
+        img(:src="workImage").work__image
       .work__tags
         ul.work__tags-list
           li.work__tag(
@@ -11,19 +11,33 @@
           )
             .tag {{tag}}
     .work__info
-      .work__title {{value.title}}
+      .work__title {{work.title}}
       .work__decs
-        p {{value.desc}}
-      a(:href="value.link").work__link http:{{value.link}}
+        p {{work.description}}
+      a(:href="work.link").work__link {{work.link}}
     .work__btns
-      CardBtn(title="Править" icon="edit")
-      CardBtn(title="Удалить" icon="delete")
+      CardBtn(
+        title="Править"
+        icon="edit"
+        @click="editWork"
+      )
+      CardBtn(
+        title="Удалить"
+        icon="delete"
+        @click="deleteWork(work.id)"
+      )
 </template>
 <script>
-import CardBtn from "../CardBtn"
+import CardBtn from '../CardBtn'
+import { mapActions } from 'vuex'
 export default {
   props: {
-    value: Object
+    work: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
   },
 
   components: {
@@ -32,8 +46,24 @@ export default {
 
   computed: {
     tags () {
-      if (!this.value) return []
-      return this.value.skills.split(", ");
+      if (!this.work) return []
+      return this.work.techs.split(",").map(tag =>tag.trim());
+    },
+
+    workImage () {
+      if (this.work) {
+        return  `https://webdev-api.loftschool.com/${this.work.photo}`;
+      }
+
+      return null
+    }
+  },
+
+  methods: {
+    ...mapActions('works', ['deleteWork']),
+
+    editWork () {
+      this.$emit('edit', this.work)
     }
   }
 }
@@ -58,6 +88,7 @@ export default {
     height: 100%;
     width: 100%;
     object-fit: cover;
+    object-position: center
   }
 
   .work__tags {

src/admin/components/Works/WorkEdit.vue

@@ -10,7 +10,7 @@
           .form__content-wrap
             .form__col
               .form__image(v-if="tmpWork.photo")
-                img(:src="tmpWork.photo").form__image-pic
+                img(:src="image").form__image-pic
                 .form__image-btn-wrap
                   button(
                     type="button"
@@ -72,19 +72,21 @@
                         iconName="cross"
                         className="tag__remove-icon"
                       )
-        .form__btns
-          button(type="reset").form__btn.form__btn--plain Отмена          
+        .form__btns(:class="{ 'blocked': isBlocked }")
           button(
-            type="submit"
+            type="reset"
             :disabled="isBlocked"
-            :class="{ 'blocked': isBlocked }"
-          ).form__btn.form__btn--big Загрузить          
+          ).form__btn.form__btn--plain Отмена          
+          button(
+            type="submit"
+            :disabled="isBlocked"            
+          ).form__btn.form__btn--big {{btnTitle}}          
 </template>
 <script>
-import Icon from "../Icon"
+import Icon from '../Icon'
 import { mapActions } from 'vuex'
-import CustomInput from "../CustomInput"
-import InputTooltip  from "../InputTooltip"
+import CustomInput from '../CustomInput'
+import InputTooltip  from '../InputTooltip'
 import { required, minLength, url } from 'vuelidate/lib/validators'
 export default {
   props: {
@@ -105,6 +107,7 @@ export default {
   data() {
     return {
       tags: [],
+      image: null,
       tmpWork: {
         link: "",
         title: "",
@@ -164,7 +167,7 @@ export default {
     Object.assign(this.tmpWork, this.work)
 
     if (this.tmpWork.photo) {
-      this.tmpWork.photo = `https://webdev-api.loftschool.com/${this.tmpWork.photo}`
+      this.image = `https://webdev-api.loftschool.com/${this.tmpWork.photo}`
     }
 
     if (this.tmpWork.techs.length > 0) {
@@ -179,19 +182,19 @@ export default {
       document.querySelector("#upload-pic").click()
     },
 
-    delTag(index) {
+    delTag (index) {
       this.tags.splice(index, 1)
       this.tmpWork.techs = this.tags.join(',')
     },
 
     appendFileAndRenderPhoto (e) {
-      const test = e.target.files[0]
+      this.tmpWork.photo = e.target.files[0]
       const reader = new FileReader()
 
       try {
-        reader.readAsDataURL(test)
+        reader.readAsDataURL(this.tmpWork.photo)
         reader.onload = () => {
-          this.tmpWork.photo = reader.result
+          this.image = reader.result
         }
       } catch (error) {
         console.log(error)
@@ -218,8 +221,6 @@ export default {
         } finally {
           this.isBlocked = false
         }
-
-        console.log("All is ok: ", this.tmpWork)
       }
     },
 

src/admin/components/Works/Works.vue

@@ -21,8 +21,8 @@
             :key="work.id"
           )
             work(
-            :value="work"
-            @edit="editWork")
+              :work="work"
+              @edit="editWork")
 </template>
 <script>
 import Work from './Work'
@@ -38,7 +38,6 @@ export default {
 
   created() {
     this.loadWorks(this.user.id)
-    // this.works = this.makeArrWithRequireImages(this.works)
   },
 
   data () {
@@ -51,32 +50,6 @@ export default {
         techs: '',
         photo: null
       }
-      // works: [
-      //   {
-      //     "id": 1,
-      //     "title": "Сайт об экстримальном отдыхе",
-      //     "skills": "Html, Css, JavaScript",
-      //     "image": "1.jpg",
-      //     "link": "//google.com",
-      //     "desc": "Этот парень проходил обучение веб-разработке не где-то, а в LoftSchool! 2 месяца только самых тяжелых испытаний и бессонных ночей!"
-      //   },
-      //   {
-      //     "id": 2,
-      //     "title": "Сайт небольшого города",
-      //     "skills": "Pug, PostCss, VueJS",
-      //     "image": "2.jpg",
-      //     "link": "//yandex.ru",
-      //     "desc": "Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности требует от нас анализа форм воздействия. "
-      //   },
-      //   {
-      //     "id": 3,
-      //     "title": "Сайт автомобильного журнала",
-      //     "skills": "Laravel, Saas, React",
-      //     "image": "3.jpg",
-      //     "link": "//rambler.ru",
-      //     "desc": "Дорогие друзья, повышение уровня гражданского сознания играет важную роль в формировании существующих финансовых и административных условий."
-      //   }
-      // ],
     }
   },
 
@@ -88,30 +61,21 @@ export default {
    methods: {
     ...mapActions('works', ['loadWorks']),
 
-    hideAddWork() {
+    hideAddWork () {
       this.showAddWork = false
-      Object.assign(
-        this.work,
-        {
-          title: '',
-          link: '',
-          description: '',
-          techs: '',
-          photo: null
-        }
-      )
+      this.work = {
+        title: '',
+        link: '',
+        description: '',
+        techs: '',
+        photo: null
+      }
     },
 
-    editWork(){
-
+    editWork (work) {
+      Object.assign(this.work, work)
+      this.showAddWork = true;
     }
-    // makeArrWithRequireImages(array) {
-    //   return array.map((item) => {
-    //     const requirePic = require(`../../../images/content/works/${item.image}`);
-    //     item.image = requirePic;
-    //     return item;
-    //   });
-    // }
   }
   
 }

src/admin/store/modules/works.js

@@ -14,7 +14,7 @@ export default {
     },
 
     addWork (state, work) {
-      state.works = [...works, work]
+      state.works = [...state.works, work]
     },
 
     setWork (state, work) {
@@ -47,12 +47,13 @@ export default {
         commit('addWork', data)
       } catch (error) {
         throw new Error(error)
+        console.log(error)
       }
     },
     async updateWork ({ commit }, payload) {
       try {
         const { data } = await axios.post(`/works/${payload.id}`, formData(payload), { headers: { 'Content-Type': 'multipart/form-data' } })
-        commit('setWork', data)
+        commit('setWork', data.work)
       } catch (error) {
         console.log(error)
       }