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

COrrection
This commit is contained in:
fabio
2021-08-23 20:17:07 -04:00
parent f848c131b8
commit 50de512dfb
6 changed files with 255 additions and 15 deletions

View File

@@ -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: {

View File

@@ -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>

View File

@@ -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);

View File

@@ -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"
};

View File

@@ -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);
})
}
},
};

View File

@@ -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>
</script>
<style>
.float-right {
padding-left: 1.5%;
}
</style>