Fix bug and update

pages/admin/announcements/_item.vue

@@ -14,23 +14,28 @@
             <h6>متن اعلان:</h6>
             <el-divider></el-divider>
             <CForm>
-              <CInput
-                v-model="announcement.title"
-                label="عنوان"
-                horizontal
-                :class="validation.title && 'err'"
-                :disabled="!isNew"
-                :description="validation.title && validation.title.msg"
-              />
-              <CTextarea
-                v-model="announcement.caption"
-                label="متن"
-                horizontal
-                rows="5"
-                :class="validation.caption && 'err'"
-                :disabled="!isNew"
-                :description="validation.caption && validation.caption.msg"
-              />
+              <CInput v-model="announcement.title" label="عنوان" horizontal :class="validation.title && 'err'"
+                :disabled="!isNew" :description="validation.title && validation.title.msg" />
+              <CTextarea v-model="announcement.caption" label="متن" horizontal rows="5"
+                :class="validation.caption && 'err'" :disabled="!isNew"
+                :description="validation.caption && validation.caption.msg" />
+
+              <div class="row">
+                <div class="col-12">
+                  <label class="fl-r"> تصویر : </label>
+                  <label for="file" class="btn-upload">آپلود تصویر</label>
+                  <input id="file" ref="myFiles" style="display: none;" type="file" @change="setData" />
+                </div>
+                <div v-if="type === 'user'" class="col-12 mt-4 mr-3">
+                  <input  id="flexCheckDefault" v-model="announcement.publicx" class="form-check-input"  type="checkbox" />
+                  <label class="form-check-label" for="flexCheckDefault">
+                    عمومی
+                    </label>
+                   
+                </div>
+              </div>
+
+
             </CForm>
             <el-divider></el-divider>
             <h6>تاریخ منقضی شدن اعلان:</h6>
@@ -40,15 +45,8 @@
             <p v-if="type === 'agent'" class="mb-4" style="font-size: 12px; color: gray">
               *زمانی که اعلان منقضی شود از لیست حذف نخواهد شد و فقط در پنل نمایندگان قابل مشاهده نخواهد بود.
             </p>
-            <persian-date-picker
-              v-model="expireDate"
-              display-format="jYYYY/jMM/jDD"
-              :min="today"
-              format="x"
-              :disabled="!isNew"
-              placeholder="تاریخ را انتخاب کنید"
-              color="#065495"
-            />
+            <persian-date-picker v-model="expireDate" display-format="jYYYY/jMM/jDD" :min="today" format="x"
+              :disabled="!isNew" placeholder="تاریخ را انتخاب کنید" color="#065495" />
 
             <p v-if="validation.expireDate" style="color: red">{{ validation.expireDate.msg }}</p>
           </CCardBody>
@@ -61,12 +59,8 @@
             <h6>وضعیت بازدید اعلان:</h6>
             <el-divider></el-divider>
             <div class="progressBar">
-              <el-progress
-                :text-inside="true"
-                :stroke-width="26"
-                :color="customColors"
-                :percentage="seenPercentage"
-              ></el-progress>
+              <el-progress :text-inside="true" :stroke-width="26" :color="customColors"
+                :percentage="seenPercentage"></el-progress>
             </div>
           </CCardBody>
         </CCard>
@@ -76,9 +70,14 @@
 </template>
 
 <script>
+import axiosUploadProcess from '@/mixins/axiosUploadProcess'
+
 export default {
   name: 'AdminAnnouncementDetails',
+  mixins: [axiosUploadProcess],
+
   layout: 'admin',
+
   async asyncData({ $axios, params, query, error }) {
     try {
       if (params.item !== 'new') {
@@ -93,6 +92,8 @@ export default {
       } else {
         return {
           announcement: {
+            publicx: false,
+            image: '',
             title: '',
             caption: '',
             expireDate: '',
@@ -160,10 +161,22 @@ export default {
     }
   },
   methods: {
+    setData(event) {
+
+      this.announcement.image = this.$refs.myFiles.files[0];
+      console.log(event)
+    },
     post() {
       this.validation = {}
+      const data = new FormData()
+      data.append('title', this.announcement.title)
+      data.append('caption', this.announcement.caption)
+      data.append('isForAgents', this.announcement.isForAgents)
+      data.append('publicx', this.announcement.publicx)
+      data.append('expireDate', this.announcement.expireDate)
+      data.append('image', this.$refs.myFiles.files[0])
       this.$axios
-        .post('/api/admin/announcements', this.announcement)
+        .post('/api/admin/announcements', data, this.axiosConfig)
         .then(res => {
           this.$message({
             type: 'success',
@@ -223,4 +236,17 @@ export default {
     text-align: left;
   }
 }
+
+.btn-upload {
+  background-color: cornflowerblue;
+  padding: .5rem 1rem;
+  border-radius: .5rem;
+  cursor: pointer;
+  color: white;
+  float: left;
+}
+
+.space {
+  margin: 5rem;
+}
 </style>