admin dashboard: upload excel template UI

huytran17 · Jun 6, 2024 · c0663cb · c0663cb
1 parent f9d643f
commit c0663cb
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 0 deletions.
diff --git a/core/admin-dashboard/components/system-configuration/widget/BaseUpdateClientData.vue b/core/admin-dashboard/components/system-configuration/widget/BaseUpdateClientData.vue
@@ -143,17 +143,147 @@
         </v-col>
       </v-row>
     </v-col>
+    <v-col cols="12">
+      <v-row>
+        <v-col cols="12" class="pb-0">
+          <div class="text-body-2">
+            <span class="app-body">
+              <span v-html="$t('Admin excel template')"></span>
+            </span>
+          </div>
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-dropzone
+            ref="admin_excel_template_dropzone"
+            id="admin_excel_template"
+            :options="
+              uploadExcelTemplateOptions({
+                id: system_configuration._id,
+                type: EXCEL_TEMPLATE_TYPE.ADMIN,
+              })
+            "
+            :destroyDropzone="true"
+            @vdropzone-success="
+              (file) =>
+                onUploadSuccsess({
+                  ref: 'admin_excel_template_dropzone',
+                  file,
+                })
+            "
+          ></v-dropzone>
+        </v-col>
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-row>
+        <v-col cols="12" class="pb-0">
+          <div class="text-body-2">
+            <span class="app-body">
+              <span v-html="$t('User excel template')"></span>
+            </span>
+          </div>
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-dropzone
+            ref="user_excel_template_dropzone"
+            id="user_excel_template"
+            :options="
+              uploadExcelTemplateOptions({
+                id: system_configuration._id,
+                type: EXCEL_TEMPLATE_TYPE.USER,
+              })
+            "
+            :destroyDropzone="true"
+            @vdropzone-success="
+              (file) =>
+                onUploadSuccsess({
+                  ref: 'user_excel_template_dropzone',
+                  file,
+                })
+            "
+          ></v-dropzone>
+        </v-col>
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-row>
+        <v-col cols="12" class="pb-0">
+          <div class="text-body-2">
+            <span class="app-body">
+              <span v-html="$t('Post excel template')"></span>
+            </span>
+          </div>
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-dropzone
+            ref="post_excel_template_dropzone"
+            id="post_excel_template"
+            :options="
+              uploadExcelTemplateOptions({
+                id: system_configuration._id,
+                type: EXCEL_TEMPLATE_TYPE.POST,
+              })
+            "
+            :destroyDropzone="true"
+            @vdropzone-success="
+              (file) =>
+                onUploadSuccsess({
+                  ref: 'post_excel_template_dropzone',
+                  file,
+                })
+            "
+          ></v-dropzone>
+        </v-col>
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-row>
+        <v-col cols="12" class="pb-0">
+          <div class="text-body-2">
+            <span class="app-body">
+              <span v-html="$t('Category excel template')"></span>
+            </span>
+          </div>
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-dropzone
+            ref="category_excel_template_dropzone"
+            id="category_excel_template"
+            :options="
+              uploadExcelTemplateOptions({
+                id: system_configuration._id,
+                type: EXCEL_TEMPLATE_TYPE.CATEGORY,
+              })
+            "
+            :destroyDropzone="true"
+            @vdropzone-success="
+              (file) =>
+                onUploadSuccsess({
+                  ref: 'category_excel_template_dropzone',
+                  file,
+                })
+            "
+          ></v-dropzone>
+        </v-col>
+      </v-row>
+    </v-col>
   </v-row>
 </template>
 
 <script>
 import { isEmpty, isNil } from "lodash";
 import systemConfigurationMixins from "@/mixins/system-configuration";
 import dropzoneMixins from "@/mixins/dropzone";
+import { EXCEL_TEMPLATE_TYPE } from "@/constants";
 
 export default {
   name: "BaseUpdateClientData",
   mixins: [systemConfigurationMixins, dropzoneMixins],
+  data() {
+    return {
+      EXCEL_TEMPLATE_TYPE,
+    };
+  },
   computed: {
     has_data() {
       return (

diff --git a/core/admin-dashboard/constants/index.ts b/core/admin-dashboard/constants/index.ts
@@ -27,12 +27,20 @@ enum SOCKETIO_EMIT_EVENT {
   ONLINE = "online",
 }
 
+const EXCEL_TEMPLATE_TYPE = {
+  ADMIN: "admin",
+  USER: "user",
+  POST: "post",
+  CATEGORY: "category",
+};
+
 export default Object.freeze({
   ADMIN_TYPES,
   HTTP_STATUS_CODE,
   LOGIN_FAILED,
   SOCKETIO_NSP,
   SOCKETIO_EMIT_EVENT,
+  EXCEL_TEMPLATE_TYPE,
 });
 
 export {
@@ -41,4 +49,5 @@ export {
   LOGIN_FAILED,
   SOCKETIO_NSP,
   SOCKETIO_EMIT_EVENT,
+  EXCEL_TEMPLATE_TYPE,
 };
diff --git a/core/admin-dashboard/mixins/dropzone.js b/core/admin-dashboard/mixins/dropzone.js
@@ -46,6 +46,16 @@ export default {
       });
     },
 
+    uploadExcelTemplateOptions({ id, type }) {
+      return this.getDropzoneOptions({
+        endpoint: `system-configuration-template/upload-excel-template/${type}/${id}`,
+        options: {
+          acceptedFiles:
+            "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        },
+      });
+    },
+
     getDropzoneOptions({ endpoint, options = {} }) {
       return {
         url: `${process.env.SERVER_URL}/admin/v2/${endpoint}`,