PMCORE-3113:UI - Import a custom Case list JSON

COrrection

resources/assets/js/admin/Modals/ModalDeleteCaseList.vue

@@ -10,7 +10,7 @@
             </template>
             <b-container fluid>
                 <p>
-                    {{ $t("ID_ARE_YOU_SURE_DELETE_CUSTOM_CASE_LIST") }}
+                    {{ $t("ID_ARE_YOU_SURE_DELETE_CUSTOM_CASE_LIST", {'CUSTOM_NAME': data.name})  }}
                 </p>
             </b-container>
             <div class="modal-footer">
@@ -40,7 +40,9 @@ export default {
     name: "ModalDeleteCaseList",
     data() {
         return {
-            data: null
+            data: {
+                name: null
+            }
         }
     },
     methods: {

resources/assets/js/admin/Modals/ModalImport.vue

@@ -0,0 +1,187 @@
+<template>
+    <div>
+        <b-modal
+            ref="modal-import"
+            hide-footer
+            size="md"
+        >
+            <template v-slot:modal-title>
+                {{ $t('ID_IMPORT_CUSTOM_CASE_LIST') }}
+            </template>
+            <b-container fluid>
+                <div v-if="!caseListDuplicate">
+                    {{ $t('ID_PLEASE_ADD_THE_CUSTOM_LIST_FILE_TO_BE_UPLOADED') }}
+                </div>
+                <div v-if="caseListDuplicate">
+                    {{ message }}
+                </div>
+                <div>
+                    <b-form-file
+                        v-model="fileCaseList"
+                        :state="validFile"
+                        ref="file-input"
+                        :disabled="caseListDuplicate"
+                    ></b-form-file>
+                </div>
+                <p>
+                </p>
+            </b-container>
+            <div class="modal-footer">
+                <div class="float-right">
+                    <b-button
+                        variant="danger"
+                        data-dismiss="modal"
+                        @click="hide"
+                    >
+                        {{ $t("ID_CANCEL") }}
+                    </b-button>
+                    <b-button 
+                        variant="success"
+                        v-if="!caseListDuplicate"
+                        @click="importCustomCaseList"
+                    >
+                        {{ $t("ID_SAVE") }}
+                    </b-button>
+                    <b-button 
+                        variant="info"
+                        v-if="caseListDuplicate"
+                        @click="continueImport()"
+                    >
+                        {{ $t("ID_CONTINUE") }}
+                    </b-button>
+                </div>
+            </div>
+        </b-modal>
+        <!-- pmTable does not exist in the workspace -->
+        <b-modal
+            size="md"
+            ok-only
+            :ok-title="$t('ID_CLOSE')"
+            ok-variant="danger"
+            v-model="pmTableNoExist"
+        >
+            <template v-slot:modal-title>
+                {{ $t('ID_IMPORT_CUSTOM_CASE_LIST') }}
+            </template>
+            <b-container fluid>
+                <div>
+                    {{ message }}
+                </div>
+            </b-container>
+        </b-modal>
+        <!-- pmTable incomplete columns for custom case list -->
+        <b-modal
+            hide-footer
+            size="md"
+            v-model="pmTableNoFields"
+        >
+            <template v-slot:modal-title>
+                {{ $t('ID_IMPORT_CUSTOM_CASE_LIST') }}
+            </template>
+            <b-container fluid>
+                <div>
+                    {{ message }}
+                </div>
+            </b-container>
+            <div class="modal-footer">
+                <div class="float-right">
+                    <b-button
+                        variant="danger"
+                        data-dismiss="modal"
+                        @click="close"
+                    >
+                        {{ $t("ID_CLOSE") }}
+                    </b-button>
+                    <b-button 
+                        variant="info"
+                        @click="continueImport"
+                    >
+                        {{ $t("ID_CONTINUE") }}
+                    </b-button>
+                </div>
+            </div>
+        </b-modal>
+    </div>
+</template>
+
+<script>
+import api from "./../settings/customCaseList/Api/CaseList";
+export default {
+    name: "ModalImport",
+    data() {
+        return {
+            data: [],
+            validFile: null,
+            fileCaseList: null,            
+            caseListDuplicate: false,
+            pmTableNoFields: false,
+            pmTableNoExist: false,
+            message: ''
+        }
+    },
+    methods: {
+        show() {
+            this.caseListDuplicate = false;
+            this.$refs["modal-import"].show();
+        },
+        close() {
+            this.pmTableNoFields = false;
+        },
+        hide() {
+            this.caseListDuplicate = false;
+            this.$refs["modal-import"].hide();
+        },
+        importCustomCaseList() {
+            let that = this;
+            this.data.file = this.fileCaseList;
+            api.importCaseList(this.data)
+            .then((response) => {
+                switch (response.data.status) {
+                    case 'tableNotExist': // pmTable does not exist
+                        that.pmTableNoExist = true;
+                        that.message = response.data.message
+                        that.$refs["modal-import"].hide();
+                        break;
+                    case 'duplicateName': // Custom Case List duplicate
+                        that.caseListDuplicate = true;
+                        that.message = response.data.message
+                        that.validFile = null;
+                        break;
+                    case 'invalidFields': // pmTable differentes columns
+                        that.pmTableNoFields = true;
+                        that.message = response.data.message
+                        that.$refs["modal-import"].hide();
+                        break;
+                    default: // import without error
+                        that.$refs["modal-import"].hide();
+                        that.$parent.$refs["table"].getData();
+                        break;
+                    }
+            })
+            .catch((e) => {
+                console.error(e);
+            });
+        },
+        continueImport() {
+            let that = this;
+            this.data.file = this.fileCaseList;
+            if (this.pmTableNoFields) {
+                this.data.continue = 'invalidFields';
+            } 
+            if (this.caseListDuplicate) {
+                this.data.continue = 'duplicateName';
+            }
+            api.importCaseList(this.data)
+            .then((response) => {
+                if (response.status === 200) {
+                    that.$refs["modal-import"].hide();
+                    that.$parent.$refs["table"].getData();
+                }
+            })
+            .catch((e) => {
+                console.error(e);
+            });
+        }
+    }
+}
+</script>

resources/assets/js/admin/settings/customCaseList/Api/CaseList.js

@@ -79,6 +79,20 @@ class caseListApi extends Api {
             data: data
         });
     }
+    importCaseList(data) {
+        let formData = new FormData();
+        formData.append('file_content', data.file);
+        if (data.continue) {
+            formData.append(data.continue, 'continue');
+        }
+        return this.post({
+            service: "IMPOR_CASE_LIST",
+            data: formData,
+            headers:{
+                'Content-Type': 'multipart/form-data'
+            },
+        })
+    }
 }
 let api = new caseListApi(Services);
 

resources/assets/js/admin/settings/customCaseList/Api/Services.js

@@ -6,5 +6,6 @@ export default {
     REPORT_TABLES: "/caseList/report-tables",
     CASE_LIST: "/caseList",
     DEFAULT_COLUMNS: "/caseList/{type}/default-columns",
-    PUT_CASE_LIST: "/caseList/{id}"
+    PUT_CASE_LIST: "/caseList/{id}",    
+    IMPOR_CASE_LIST: "/caseList/import"
 };

resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue

@@ -681,15 +681,16 @@ export default {
          */
         getDefaultColumns(type) {
             let that = this;
-            if (!this.params.columns) {
-                Api.getDefault(type)
-                .then((response) => {
+            Api.getDefault(type)
+            .then((response) => {
+                if (!that.params.columns) {
                     that.dataCaseList = response.data;
-                })
-                .catch((e) => {
-                    console.error(e);
-                })
-            }
+                }
+                that.defaultCaseList = response.data;
+            })
+            .catch((e) => {
+                console.error(e);
+            })
         }
     },
 };

resources/assets/js/admin/settings/customCaseList/Tables.vue

@@ -2,6 +2,7 @@
 <div id="people">
     <ModalDeleteCaseList ref="modal-delete-list"></ModalDeleteCaseList>
     <ModalPreview ref="modal-preview"></ModalPreview>
+    <ModalImport ref="modal-import"></ModalImport>
     <button-fleft :data="newList"></button-fleft>
     <button-fleft :data="importList"></button-fleft>
     <v-server-table 
@@ -29,6 +30,7 @@ import utils from "../../../utils/utils";
 import OwnerCell from "../../../components/vuetable/OwnerCell";
 import ModalDeleteCaseList from "./../../Modals/ModalDeleteCaseList.vue";
 import ModalPreview from "./../../Modals/ModalPreview.vue";
+import ModalImport from "./../../Modals/ModalImport.vue";
 import download from "downloadjs";
 
 export default {
@@ -40,6 +42,7 @@ export default {
         OwnerCell,
         ModalDeleteCaseList,
         ModalPreview,
+        ModalImport,
     },
     data() {
         return {
@@ -69,7 +72,7 @@ export default {
                 title: this.$i18n.t("Import List"),
                 class: "btn-success",   
                 onClick: () => {
-                    //TODO button
+                    this.importCustomCaseList();
                 }
             },
             columns: [
@@ -235,8 +238,32 @@ export default {
          */
         downloadCaseList(data) {
             var fileName = data.name,
-                typeMime = "text/plain";
-            download(JSON.stringify(data), fileName + ".json", typeMime);
+                typeMime = "text/plain",
+                dataExport = [];
+            dataExport = this.filterDataToExport(data);
+            download(JSON.stringify(dataExport), fileName + ".json", typeMime);
+        },
+        /**
+         * Filter the sensible information to export
+         * @param {Array} data
+         */
+        filterDataToExport(data) {
+            var dataExport = [];
+            dataExport.push({
+                type: data['type'],
+                name: data['name'],
+                description: data['description'],
+                tableUid: data['tableUid'],
+                tableName: data['tableName'],
+                columns: data['columns'],
+                userId: data['userId'],
+                iconList: data['iconList'],
+                iconColor: data['iconColor'],
+                iconColorScreen: data['iconColorScreen'],
+                createDate: data['createDate'],
+                updateDate: data['updateDate']
+            });
+            return dataExport;
         },
         /**
         * Show options in the ellipsis 
@@ -282,6 +309,14 @@ export default {
                 }
             }
         },
+        importCustomCaseList() {
+            this.$refs["modal-import"].show();
+        }
     }
 };
 </script>
+<style>
+.float-right {
+    padding-left: 1.5%;
+}
+</style>