Add brands

pages/admin/brands/_item.vue

@@ -1,103 +1,112 @@
 <template>
-    <div>
+  <div>
-      <CustomSubHeader>
+    <CustomSubHeader>
-        <CBreadcrumb class="border-0 mb-0">برند ها</CBreadcrumb>
+      <CBreadcrumb class="border-0 mb-0">برند ها</CBreadcrumb>
-        <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-brands' }">برگشت به صفحه قبل</CButton>
+      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-brands' }">برگشت به صفحه قبل</CButton>
-        <CButton v-if="$route.params.item === 'new'" size="sm" color="success" style="margin-right: 10px" @click="post"
+      <CButton v-if="$route.params.item === 'new'" size="sm" color="success" style="margin-right: 10px" @click="post"
-          >افزودن</CButton
+        >افزودن</CButton
-        >
+      >
-        <CButton v-else size="sm" color="success" style="margin-right: 10px" @click="update">بروزرسانی</CButton>
+      <CButton v-else size="sm" color="success" style="margin-right: 10px" @click="update">بروزرسانی</CButton>
-      </CustomSubHeader>
+    </CustomSubHeader>
-      <CRow>
-        <CCol xl="6" lg="6" sm="12">
-          <CInput
-                v-model="brand.title"
-                label="نام"
-                horizontal
-                :description="validation.title ? validation.title.msg : null"
-                :class="validation.title ? 'err' : null"
-              />
-
-              <CInput
-                v-model="brand.link"
-                label="لینک"
-                horizontal
-                :description="validation.link ? validation.link.msg : null"
-                :class="validation.link ? 'err' : null"
-              />
-
-              <CTextarea
-                v-model="brand.description"
-                label="توضیح"
-                horizontal
-                rows="4"
-                :description="validation.description ? validation.description.msg : null"
-                :class="validation.description ? 'err' : null"
-              />
-        </CCol>
-       <CCol xl="6" lg="6" sm="12">
 
+    <CCard>
+      <CCardBody>
         <CRow>
+          <CCol xl="6" lg="6" sm="12">
+            <CInput
+              v-model="brand.title"
+              label="نام"
+              horizontal
+              :description="validation.title ? validation.title.msg : null"
+              :class="validation.title ? 'err' : null"
+            />
+
+            <CInput
+              v-model="brand.link"
+              label="لینک"
+              horizontal
+              :description="validation.link ? validation.link.msg : null"
+              :class="validation.link ? 'err' : null"
+            />
+
+            <CTextarea
+              v-model="brand.description"
+              label="توضیح"
+              horizontal
+              rows="4"
+              :description="validation.description ? validation.description.msg : null"
+              :class="validation.description ? 'err' : null"
+            />
+          </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">
                   {{ validation.logo.msg }}
                 </small>
               </CCol>
+            </CRow>
+          </CCol>
         </CRow>
+      </CCardBody>
+    </CCard>
+  </div>
+</template>
 
-       </CCol>
+<script>
-      </CRow>
+export default {
-    </div>
+  name: 'AddminBrandsItem',
-  </template>
+  layout: 'admin',
-  
+  async asyncData({ $axios, params, error }) {
-  <script>
+    try {
-  export default {
+      const data = {}
-    name: 'AddminBrandsItem',
+      if (params.item !== 'new') {
-    layout: 'admin',
+        const brand = await $axios.get(`/api/admin/brand/${params.item}`)
-    async asyncData({ $axios, params, error }) {
+        data.brand = brand.data
-      try {
+        data.brand.logo = '/uploads/images/brands/' + brand.data.logo
-        const data = {}
-        if (params.admin !== 'new') {
-          const brand = await $axios.get(`/api/admin/brand/${params.item}`)
-          data.brand = brand.data
-        }
-        return data
-      } catch (e) {
-        error({ status: 404, message: 'Page not found' })
       }
-    },
+      return data
-    data() {
+    } catch (e) {
-      return {
+      error({ status: 404, message: 'Page not found' })
-        brand: {
+    }
-          title:'',
+  },
-          link:'',
+  data() {
-          description:'',
+    return {
-          logo:''
+      brand: {
-        },
+        title: '',
-        validation: {},
+        link: '',
-
+        description: '',
-      }
+        logo: ''
-    },
+      },
-    head() {
+      validation: {}
-      return {
+    }
-        title: "برندها"
+  },
-      }
+  head() {
-    },
+    return {
-    methods: {
+      title: 'برندها'
-      imagePreview(event) {
+    }
+  },
+  computed: {
+    config() {
+      return this.$config
+    }
+  },
+  methods: {
+    imagePreview(event) {
       this.brand.logo = URL.createObjectURL(event.target.files[0])
     },
-    post(){
+
+    post() {
       this.validation = {}
       const data = new FormData()
       data.append('title', this.brand.title)
@@ -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>
+}
+</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) {
+        if (req.files?.logo) {
-            const image = req.files.image
+            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}`)
           }