Add brands

pages/admin/brands/_item.vue

@@ -8,6 +8,9 @@
       >
       <CButton v-else size="sm" color="success" style="margin-right: 10px" @click="update">بروزرسانی</CButton>
     </CustomSubHeader>
+
+    <CCard>
+      <CCardBody>
         <CRow>
           <CCol xl="6" lg="6" sm="12">
             <CInput
@@ -36,17 +39,16 @@
             />
           </CCol>
           <CCol xl="6" lg="6" sm="12">
-
             <CRow>
               <CCol col="12" class="mb-3">
-                <img :src="brand.logo" alt="" style="width: 100%; max-width: 500px" />
+                <img :src="brand.logo" alt="" style="width: 100%; max-width: 300px" />
               </CCol>
               <CCol col="1">
                 <span>کاور</span>
               </CCol>
               <CCol col="11">
                 <label for="file" class="btn-upload">آپلود تصویر</label>
-               <input id="file" ref="myFiles" style="display: none;" type="file" @change="imagePreview" />
+                <input id="file" ref="myFiles" style="display: none" type="file" @change="imagePreview" />
               </CCol>
               <CCol col="11" class="mr-auto mt-3">
                 <small v-if="validation.logo" class="form-text alert-danger w-100">
@@ -54,9 +56,10 @@
                 </small>
               </CCol>
             </CRow>
-
           </CCol>
         </CRow>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 
@@ -67,9 +70,10 @@
   async asyncData({ $axios, params, error }) {
     try {
       const data = {}
-        if (params.admin !== 'new') {
+      if (params.item !== 'new') {
         const brand = await $axios.get(`/api/admin/brand/${params.item}`)
         data.brand = brand.data
+        data.brand.logo = '/uploads/images/brands/' + brand.data.logo
       }
       return data
     } catch (e) {
@@ -84,19 +88,24 @@
         description: '',
         logo: ''
       },
-        validation: {},
-
+      validation: {}
     }
   },
   head() {
     return {
-        title: "برندها"
+      title: 'برندها'
+    }
+  },
+  computed: {
+    config() {
+      return this.$config
     }
   },
   methods: {
     imagePreview(event) {
       this.brand.logo = URL.createObjectURL(event.target.files[0])
     },
+
     post() {
       this.validation = {}
       const data = new FormData()
@@ -109,9 +118,9 @@
         .then(res => {
           this.$message({
             type: 'success',
-            message: 'پیام با موفقیت برای کاربران ارسال شد'
+            message: 'برند با موفقیت ثبت شد'
           })
-          this.$router.push({ name: 'admin-announcements', query: { ...this.$route.query } })
+          this.$router.push({ name: 'admin-brands' })
         })
         .catch(err => {
           if (err.response.status === 422) {
@@ -127,7 +136,53 @@
               message: 'دوباره وارد سیستم شوید'
             })
         })
+    },
+    update(){
+
+      this.validation = {}
+      const data = new FormData()
+      data.append('title', this.brand.title)
+      data.append('link', this.brand.link)
+      data.append('description', this.brand.description)
+      if(this.$refs.myFiles.files[0]){
+        data.append('logo', this.$refs.myFiles.files[0])
+      }
+
+      this.$axios
+        .put(`/api/admin/brand/${this.$route.params.item}`, data, this.axiosConfig)
+        .then(res => {
+          this.$message({
+            type: 'success',
+            message: 'برند با موفقیت ثبت شد'
+          })
+          this.$router.push({ name: 'admin-brands'})
+        })
+        .catch(err => {
+          if (err.response.status === 422) {
+            this.$message({
+              type: 'warning',
+              message: 'پارامتر ها رو بررسی کنید'
+            })
+            this.validation = err.response.data.validation
+          }
+          if (err.response.status === 401)
+            this.$message({
+              type: 'error',
+              message: 'دوباره وارد سیستم شوید'
+            })
+        })
+      
     }
   }
 }
 </script>
+<style lang="scss">
+.btn-upload {
+  background-color: cornflowerblue;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  color: white;
+  float: left;
+}
+</style>

pages/admin/brands/index.vue

@@ -20,7 +20,7 @@
 
             <el-table-column  width="80">
             <template slot-scope="scope">
-                <img width="60" :src="config.apiAsanMarket + scope.row.logo">
+                <img width="60" :src="'/uploads/images/brands/'+scope.row.logo">
               </template>
             </el-table-column>
           
@@ -30,13 +30,13 @@
   
             <el-table-column  label="توضیحات" width="">
               <template slot-scope="scope">
-                <span class="singleLineTxt" :title="scope.row.national"> {{ scope.row.description }} </span>
+                <span class="singleLineTxt" :title="scope.row.description"> {{ scope.row.description }} </span>
               </template>
             </el-table-column>
 
             <el-table-column  label="لینک" width="">
               <template slot-scope="scope">
-                <span class="singleLineTxt" :title="scope.row.national"> {{ scope.row.link }} </span>
+                <span class="singleLineTxt" :title="scope.row.link"> {{ scope.row.link }} </span>
               </template>
             </el-table-column>
   
@@ -91,7 +91,7 @@
     },
     beforeMount(){
   
-      this.$axios.get('/api/public//brand').then(res=>{
+      this.$axios.get('/api/public/brand').then(res=>{
         this.brands = res.data
         console.log(res.data)
   

server/controllers/brandController.js

@@ -2,6 +2,7 @@ const Brand = require("../models/Brand");
 const { checkValidations } = require("../plugins/controllersHelperFunctions")
 const { body, validationResult } = require('express-validator')
 const { _sr } = require("../plugins/serverResponses")
+const maxAttachmentSize = 2048
 
 
 //@desc Create a brand
@@ -93,8 +94,8 @@ const updatebrand = [
             title, link, description,
         }
 
-        if (req.files?.image) {
-            const image = req.files.image
+        if (req.files?.logo) {
+            const image = req.files.logo
             const fileName = 'brands' + Date.now() + '.' + image.name
             const acceptableFormats = ['png', 'jpg', 'jpeg', 'webp']
             if (!acceptableFormats.includes(image.mimetype.split('/')[1]))
@@ -103,7 +104,7 @@ const updatebrand = [
               return res
                 .status(422)
                 .json({ validation: { image: { msg: `حجم تصویر نباید بیشتر از ${maxAttachmentSize} KB باشد.` } } })
-            data.image = fileName
+            data.logo = fileName
             await image.mv(`./static/uploads/images/brands/${fileName}`)
           }