bug fix in import commodities from excel

webUI/src/views/acc/component/importModal/commodity-import-excel.vue

@@ -1,103 +1,149 @@
 <script lang="ts">
-import axios from 'axios';
-import Swal from 'sweetalert2';
-import {defineComponent} from 'vue'
-import {ref} from 'vue'
+import { defineComponent, ref } from 'vue'
+import axios from 'axios'
+import Swal from 'sweetalert2'
+
 export default defineComponent({
-  name: "commodity-import-excel",
-  props:{
-    windowsState:Object
+  name: 'CommodityImportExcel',
+  props: {
+    windowsState: {
+      type: Object,
+      required: true
+    }
   },
-  data:()=>{return{
-    loading:ref(false),
-    file:null
-  }},
-  methods:{
-    addFile(e) {
-      this.file = e.target.files[0];
-    },
-    submit(){
-      if(this.file === null){
-        Swal.fire({
+  setup(props, { emit }) {
+    const loading = ref(false)
+    const file = ref<File | null>(null)
+    const fileInput = ref<HTMLInputElement | null>(null)
+    const dialog = ref(false)
+
+    const addFile = (e: Event) => {
+      const target = e.target as HTMLInputElement
+      if (target.files) {
+        file.value = target.files[0]
+      }
+    }
+
+    const submit = async () => {
+      if (!file.value) {
+        await Swal.fire({
           text: 'فایل انتخاب نشده است',
           icon: 'error',
           confirmButtonText: 'قبول'
-        });
+        })
+        return
       }
-      else{
-        //send excel file to server
-        let formData = new FormData();
-        formData.append('file', this.file);
-        axios.post( '/api/commodity/import/excel',formData,
-        {
+
+      loading.value = true
+      const formData = new FormData()
+      formData.append('file', file.value)
+
+      try {
+        await axios.post('/api/commodity/import/excel', formData, {
           headers: {
             'Content-Type': 'multipart/form-data'
           }
-        }).then(()=>{
-          Swal.fire({
+        })
+
+        const result = await Swal.fire({
           text: 'فایل با موفقیت ثبت شد.',
           icon: 'success',
           confirmButtonText: 'قبول'
-          }).then((resp)=>{
-            this.$refs.Close.click();
-            this.$props.windowsState.submited = true;
-          });
         })
-        .catch(()=>{
-          Swal.fire({
+
+        if (result.isConfirmed) {
+          props.windowsState.submited = true
+          dialog.value = false
+          file.value = null
+          if (fileInput.value) fileInput.value.value = ''
+        }
+      } catch (error) {
+        await Swal.fire({
           text: 'متاسفانه خطایی به وجود آمد.',
           icon: 'error',
           confirmButtonText: 'قبول'
-          });
-        });
+        })
+      } finally {
+        loading.value = false
       }
     }
+
+    return {
+      loading,
+      file,
+      fileInput,
+      dialog,
+      addFile,
+      submit
+    }
   }
 })
 </script>
 
 <template>
-  <v-tooltip :text="$t('dialog.import_excel')" location="bottom">
-    <template v-slot:activator="{ props }">
-      <v-btn v-bind="props" icon="mdi-table-arrow-left" color="primary" data-bs-toggle="modal"
-        data-bs-target="#importexcel">
-      </v-btn>
+  <div>
+    <v-tooltip bottom text="وارد کردن از اکسل">
+      <template #activator="{ props }">
+        <v-btn
+          v-bind="props"
+          icon="mdi-table-arrow-left"
+          color="primary"
+          @click="dialog = true"
+        />
       </template>
     </v-tooltip>
-  <!-- Modal -->
-  <div class="modal modal-lg fade" id="importexcel" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="importexcelLabel" aria-hidden="true">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header bg-primary-light text-white">
-          <h1 class="modal-title fs-5" id="importexcelLabel">وارد کردن از اکسل</h1>
-          <div class="block-options">
-            <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
-          </div>
-        </div>
-        <div class="modal-body">
-            <ul>
-                <li>برای وارد کردن لیست کالا و خدمات در اکسل ابتدا فایل نمونه را دریافت نمایید سپس مطابق الگو اطلاعات را تکمیل کنید در مرحله بعدی با انتخاب فایل نسبت به ورود از لیست اقدام کنید</li>
-                <li>
-                    <a :href="this.$filters.getApiUrl() + '/imports/commodities-import.xlsx'" target="_blank">دریافت فایل نمونه</a>
-                </li>
-            </ul>
-            <form @submit.prevent="submit()">
-              <div class="mb-3">
-                  <label for="formFileSm" class="form-label">انتخاب فایل</label>
-                  <input @change="addFile" class="custom-file-input form-control" id="formFileSm" type="file" accept="application/vnd.ms-excel,application/vnd.ms-excel.sheet.macroEnabled.12,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
-              </div>
-              <div class="mb-3">
-                  <button type="submit" class="btn btn-primary">
+
+    <v-dialog v-model="dialog" max-width="600" persistent>
+      <v-toolbar title="درون ریزی از اکسل">
+         <v-spacer />
+          <v-btn icon="mdi-close" variant="text" color="gray" @click="dialog = false" />
+      </v-toolbar>
+      <v-card rounded="0">
+        <v-card-text class="pt-4">
+          <v-list>
+            <v-list-item>
+              برای وارد کردن لیست کالا و خدمات در اکسل ابتدا فایل نمونه را دریافت نمایید سپس مطابق الگو اطلاعات را تکمیل کنید در مرحله بعدی با انتخاب فایل نسبت به ورود از لیست اقدام کنید
+            </v-list-item>
+            <v-list-item>
+              <a
+                :href="`${$filters.getApiUrl()}/imports/commodities-import.xlsx`"
+                target="_blank"
+                class="text-decoration-none"
+              >
+                دریافت فایل نمونه
+              </a>
+            </v-list-item>
+          </v-list>
+
+          <form @submit.prevent="submit">
+            <v-file-input
+              ref="fileInput"
+              label="انتخاب فایل"
+              accept=".xls,.xlsx,.xlsm"
+              @change="addFile"
+              variant="outlined"
+              class="mb-4"
+              :disabled="loading"
+            />
+
+            <v-btn
+              type="submit"
+              color="primary"
+              block
+              :loading="loading"
+              :disabled="loading"
+            >
               وارد کردن
-                  </button>
-              </div>
+            </v-btn>
           </form>
-        </div>
-      </div>
-    </div>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <style scoped>
-  
+.bg-primary {
+  background-color: #1976d2 !important;
+}
 </style>