From 50de512dfb1e3638edf138e7832eeec5cba93b3f Mon Sep 17 00:00:00 2001
From: fabio <fabio.guachalla@processmaker.com>
Date: Mon, 23 Aug 2021 20:17:07 -0400
Subject: [PATCH] PMCORE-3113:UI -  Import a custom Case list JSON

COrrection
---
 .../js/admin/Modals/ModalDeleteCaseList.vue   |   6 +-
 .../assets/js/admin/Modals/ModalImport.vue    | 187 ++++++++++++++++++
 .../settings/customCaseList/Api/CaseList.js   |  14 ++
 .../settings/customCaseList/Api/Services.js   |   3 +-
 .../customCaseList/CaseListSketch.vue         |  17 +-
 .../admin/settings/customCaseList/Tables.vue  |  43 +++-
 6 files changed, 255 insertions(+), 15 deletions(-)
 create mode 100644 resources/assets/js/admin/Modals/ModalImport.vue

diff --git a/resources/assets/js/admin/Modals/ModalDeleteCaseList.vue b/resources/assets/js/admin/Modals/ModalDeleteCaseList.vue
index 2448a41a6..48cda9943 100644
--- a/resources/assets/js/admin/Modals/ModalDeleteCaseList.vue
+++ b/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: {
diff --git a/resources/assets/js/admin/Modals/ModalImport.vue b/resources/assets/js/admin/Modals/ModalImport.vue
new file mode 100644
index 000000000..43bd57042
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/assets/js/admin/settings/customCaseList/Api/CaseList.js b/resources/assets/js/admin/settings/customCaseList/Api/CaseList.js
index c41382739..0fb69afad 100644
--- a/resources/assets/js/admin/settings/customCaseList/Api/CaseList.js
+++ b/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);
 
diff --git a/resources/assets/js/admin/settings/customCaseList/Api/Services.js b/resources/assets/js/admin/settings/customCaseList/Api/Services.js
index f21b65475..037782f8c 100644
--- a/resources/assets/js/admin/settings/customCaseList/Api/Services.js
+++ b/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"
 };
diff --git a/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue b/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
index 97bf78754..8ded71460 100644
--- a/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
+++ b/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);
+            })
         }
     },
 };
diff --git a/resources/assets/js/admin/settings/customCaseList/Tables.vue b/resources/assets/js/admin/settings/customCaseList/Tables.vue
index 1843f3d5a..50cc6fb31 100644
--- a/resources/assets/js/admin/settings/customCaseList/Tables.vue
+++ b/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>
\ No newline at end of file
+</script>
+<style>
+.float-right {
+    padding-left: 1.5%;
+}
+</style>
\ No newline at end of file