700 lines
20 KiB
Vue
700 lines
20 KiB
Vue
<template>
|
|
<div>
|
|
<gz-report-selector ref="reportSelector"></gz-report-selector>
|
|
<!-- {{ formState }} -->
|
|
<v-row justify="center">
|
|
<v-dialog v-model="replaceDialog" persistent max-width="600px">
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="text-h5">{{ $ay.t("FindAndReplace") }}</span>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-text-field
|
|
v-model="find"
|
|
:label="$ay.t('Find')"
|
|
required
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
v-model="replace"
|
|
:label="$ay.t('Replace')"
|
|
required
|
|
></v-text-field>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="blue darken-1" text @click="replaceDialog = false">{{
|
|
$ay.t("Cancel")
|
|
}}</v-btn>
|
|
<v-btn color="blue darken-1" text @click="doReplace()">{{
|
|
$ay.t("OK")
|
|
}}</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-row>
|
|
<v-row v-if="formState.ready">
|
|
<v-col>
|
|
<v-form ref="form">
|
|
<v-row>
|
|
<gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
|
|
<v-col cols="12" v-if="obj.stock && rights.change">
|
|
<span class="text-h4 warning--text mr-6">{{
|
|
$ay.t("ReadOnly")
|
|
}}</span>
|
|
<v-btn @click="duplicate()" :loading="duplicating">
|
|
<v-icon left>$ayiClone</v-icon> {{ $ay.t("Duplicate") }}
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
|
<v-text-field
|
|
v-model="obj.name"
|
|
:readonly="formState.readOnly"
|
|
:label="$ay.t('Name')"
|
|
:rules="[form().required(this, 'name')]"
|
|
:error-messages="form().serverErrors(this, 'name')"
|
|
ref="name"
|
|
data-cy="name"
|
|
@input="fieldValueChanged('name')"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
|
<v-checkbox
|
|
v-model="obj.cjkIndex"
|
|
:readonly="formState.readOnly"
|
|
:label="$ay.t('GlobalCJKIndex')"
|
|
:hint="$ay.t('GlobalCJKIndexDescription')"
|
|
:persistent-hint="true"
|
|
ref="cjkIndex"
|
|
:error-messages="form().serverErrors(this, 'cjkIndex')"
|
|
@change="fieldValueChanged('cjkIndex')"
|
|
></v-checkbox>
|
|
</v-col>
|
|
<!-- ----------------------- -->
|
|
<v-col cols="12">
|
|
<v-card>
|
|
<v-card-title>
|
|
<v-text-field
|
|
v-model="search"
|
|
append-icon="$ayiSearch"
|
|
:label="$ay.t('Search')"
|
|
single-line
|
|
hide-details
|
|
></v-text-field>
|
|
</v-card-title>
|
|
<v-data-table
|
|
:headers="[
|
|
{
|
|
text: $ay.t('TranslationKey'),
|
|
align: 'start',
|
|
value: 'key'
|
|
},
|
|
{ text: $ay.t('TranslationDisplayText'), value: 'display' }
|
|
]"
|
|
:items="obj.translationItems"
|
|
:footer-props="{
|
|
itemsPerPageOptions: [5, 10, 25, 50, 100],
|
|
itemsPerPageText: $ay.t('RowsPerPage'),
|
|
pageText: $ay.t('PageOfPageText')
|
|
}"
|
|
:header-props="{ sortByText: $ay.t('Sort') }"
|
|
:search="search"
|
|
:no-data-text="$ay.t('NoData')"
|
|
must-sort
|
|
>
|
|
<template
|
|
v-slot:[`item.display`]="props"
|
|
v-if="!formState.readOnly"
|
|
>
|
|
<v-edit-dialog
|
|
large
|
|
:return-value.sync="props.item.display"
|
|
:cancel-text="$ay.t('Cancel')"
|
|
:save-text="$ay.t('OK')"
|
|
@save="saveItem(props.item)"
|
|
>
|
|
{{ props.item.display }}
|
|
<template v-slot:input>
|
|
<v-text-field
|
|
v-model="props.item.display"
|
|
label="Edit"
|
|
single-line
|
|
></v-text-field>
|
|
</template>
|
|
</v-edit-dialog>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card>
|
|
</v-col>
|
|
<!-- ------------------- -->
|
|
</v-row>
|
|
</v-form>
|
|
</v-col>
|
|
</v-row>
|
|
<template v-if="!formState.ready">
|
|
<v-progress-circular
|
|
indeterminate
|
|
color="primary"
|
|
:size="60"
|
|
></v-progress-circular>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
/* Xeslint-disable */
|
|
//
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
//
|
|
const FORM_KEY = "translation-edit";
|
|
const API_BASE_URL = "translation/";
|
|
const FORM_CUSTOM_TEMPLATE_KEY = "Translation"; //<-- Should always be CoreBizObject AyaType name here where possible
|
|
|
|
export default {
|
|
async created() {
|
|
//created is called when the route is updated to show a new record even though we don't need to re-init again
|
|
let vm = this;
|
|
try {
|
|
await initForm(vm);
|
|
|
|
vm.rights = window.$gz.role.getRights(window.$gz.type.Translation);
|
|
vm.formState.readOnly = !vm.rights.change;
|
|
window.$gz.eventBus.$on("menu-click", clickHandler);
|
|
|
|
//id 0 means create or duplicate to new
|
|
if (vm.$route.params.recordid != 0) {
|
|
//is there already an obj from a prior operation?
|
|
if (this.$route.params.obj) {
|
|
//yes, no need to fetch it
|
|
this.obj = this.$route.params.obj;
|
|
vm.formState.loading = false; //here we handle it immediately
|
|
} else {
|
|
await vm.getDataFromApi(vm.$route.params.recordid); //let getdata handle loading
|
|
}
|
|
} else {
|
|
vm.formState.loading = false; //here we handle it immediately
|
|
}
|
|
//set initial form status
|
|
window.$gz.form.setFormState({
|
|
vm: vm,
|
|
dirty: false,
|
|
valid: true
|
|
});
|
|
|
|
generateMenu(vm);
|
|
} catch (error) {
|
|
window.$gz.errorHandler.handleFormError(error, vm);
|
|
} finally {
|
|
vm.formState.ready = true;
|
|
}
|
|
},
|
|
async beforeRouteLeave(to, from, next) {
|
|
if (!this.formState.dirty || JUST_DELETED) {
|
|
next();
|
|
return;
|
|
}
|
|
if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
|
|
next();
|
|
} else {
|
|
next(false);
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
window.$gz.eventBus.$off("menu-click", clickHandler);
|
|
},
|
|
components: {},
|
|
data() {
|
|
return {
|
|
formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
|
|
search: "",
|
|
find: "",
|
|
replace: "",
|
|
replaceDialog: false,
|
|
editingActiveTranslation: false,
|
|
duplicating: false,
|
|
obj: {},
|
|
formState: {
|
|
ready: false,
|
|
dirty: false,
|
|
valid: true,
|
|
readOnly: false,
|
|
loading: true,
|
|
errorBoxMessage: null,
|
|
appError: null,
|
|
serverError: {}
|
|
},
|
|
rights: window.$gz.role.defaultRightsObject(),
|
|
ayaType: window.$gz.type.Translation
|
|
};
|
|
},
|
|
//WATCHERS
|
|
watch: {
|
|
formState: {
|
|
handler: function(val) {
|
|
if (this.formState.loading) {
|
|
return;
|
|
}
|
|
|
|
//enable / disable save button
|
|
if (val.dirty && val.valid && !val.readOnly) {
|
|
window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
|
|
} else {
|
|
window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
|
|
}
|
|
|
|
//enable / disable duplicate / new button
|
|
if (!val.dirty && val.valid) {
|
|
window.$gz.eventBus.$emit(
|
|
"menu-enable-item",
|
|
FORM_KEY + ":duplicate"
|
|
);
|
|
window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
|
|
} else {
|
|
window.$gz.eventBus.$emit(
|
|
"menu-disable-item",
|
|
FORM_KEY + ":duplicate"
|
|
);
|
|
window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
computed: {
|
|
canSave: function() {
|
|
return this.formState.valid && this.formState.dirty;
|
|
}
|
|
},
|
|
methods: {
|
|
doReplace() {
|
|
let changesMade = false;
|
|
if (this.find && this.replace) {
|
|
for (let i = 0; i < this.obj.translationItems.length; i++) {
|
|
if (
|
|
!changesMade &&
|
|
this.obj.translationItems[i].display.includes(this.find)
|
|
) {
|
|
changesMade = true;
|
|
}
|
|
this.obj.translationItems[i].display = this.obj.translationItems[
|
|
i
|
|
].display
|
|
.split(this.find)
|
|
.join(this.replace);
|
|
}
|
|
|
|
if (changesMade == true) {
|
|
window.$gz.form.setFormState({
|
|
vm: this,
|
|
dirty: true
|
|
});
|
|
}
|
|
}
|
|
this.replaceDialog = false;
|
|
},
|
|
saveItem(updatedItem) {
|
|
//just called to flag as dirty
|
|
window.$gz.form.setFormState({
|
|
vm: this,
|
|
dirty: true
|
|
});
|
|
},
|
|
filteredItems() {
|
|
return this.obj.translationItems;
|
|
},
|
|
canDuplicate: function() {
|
|
return this.formState.valid && !this.formState.dirty && vm.rights.change;
|
|
},
|
|
ayaTypes: function() {
|
|
return window.$gz.type;
|
|
},
|
|
form() {
|
|
return window.$gz.form;
|
|
},
|
|
fieldValueChanged(ref) {
|
|
if (
|
|
this.formState.ready &&
|
|
!this.formState.loading &&
|
|
!this.formState.readOnly
|
|
) {
|
|
window.$gz.form.fieldValueChanged(this, ref);
|
|
}
|
|
},
|
|
async getDataFromApi(recordId) {
|
|
let vm = this;
|
|
vm.formState.loading = true;
|
|
|
|
if (!recordId) {
|
|
throw new Error(FORM_KEY + "::getDataFromApi -> Missing recordID!");
|
|
}
|
|
let url = API_BASE_URL + recordId;
|
|
try {
|
|
window.$gz.form.deleteAllErrorBoxErrors(vm);
|
|
let res = await window.$gz.api.get(url);
|
|
|
|
if (res.error) {
|
|
//Not found?
|
|
if (res.error.code == "2010") {
|
|
window.$gz.form.handleObjectNotFound(vm);
|
|
}
|
|
vm.formState.serverError = res.error;
|
|
window.$gz.form.setErrorBoxErrors(vm);
|
|
vm.formState.loading = false;
|
|
} else {
|
|
vm.obj = res.data;
|
|
//modify the menu as necessary
|
|
generateMenu(vm);
|
|
//Update the form status
|
|
window.$gz.form.setFormState({
|
|
vm: vm,
|
|
dirty: false,
|
|
valid: true,
|
|
loading: false,
|
|
readOnly: !vm.rights.change || res.data.stock == true
|
|
});
|
|
}
|
|
} catch (error) {
|
|
window.$gz.errorHandler.handleFormError(error, vm);
|
|
vm.formState.loading = false;
|
|
}
|
|
},
|
|
async submit() {
|
|
let vm = this;
|
|
if (vm.canSave == false) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
vm.formState.loading = true;
|
|
let url = API_BASE_URL;
|
|
//clear any errors vm might be around from previous submit
|
|
window.$gz.form.deleteAllErrorBoxErrors(vm);
|
|
|
|
let res = await window.$gz.api.upsert(url, vm.obj);
|
|
|
|
if (res.error) {
|
|
vm.formState.serverError = res.error;
|
|
window.$gz.form.setErrorBoxErrors(vm);
|
|
} else {
|
|
//Logic for detecting if a post or put: if id then it was a post, if no id then it was a put
|
|
if (res.data.id) {
|
|
//POST - whole new object returned
|
|
vm.obj = res.data;
|
|
//Change URL to new record
|
|
//NOTE: will not cause a page re-render, almost nothing does unless forced with a KEY property or using router.GO()
|
|
|
|
this.$router.push({
|
|
name: "adm-translation",
|
|
params: {
|
|
recordid: res.data.id,
|
|
obj: res.data //Pass data object to new form
|
|
}
|
|
});
|
|
} else {
|
|
//PUT - only concurrency token is returned (**warning, if server changes object other fields then this needs to act more like POST above but is more efficient this way**)
|
|
//Handle "put" of an existing record (UPDATE)
|
|
vm.obj.concurrency = res.data.concurrency;
|
|
|
|
//Update local copy of translations if that's the same one in use
|
|
if (vm.editingActiveTranslation) {
|
|
await window.$gz.translation.updateCache(vm.obj);
|
|
}
|
|
}
|
|
|
|
//Update the form status
|
|
window.$gz.form.setFormState({
|
|
vm: vm,
|
|
dirty: false,
|
|
valid: true
|
|
});
|
|
}
|
|
} catch (ex) {
|
|
window.$gz.errorHandler.handleFormError(ex, vm);
|
|
} finally {
|
|
vm.formState.loading = false;
|
|
}
|
|
},
|
|
async remove() {
|
|
let vm = this;
|
|
try {
|
|
let dialogResult = await window.$gz.dialog.confirmDelete();
|
|
if (dialogResult != true) {
|
|
return;
|
|
}
|
|
|
|
//do the delete
|
|
vm.formState.loading = true;
|
|
//No need to delete a new record, just abandon it...
|
|
if (vm.$route.params.recordid == 0) {
|
|
//this should not get offered for delete but to be safe and clear just in case:
|
|
JUST_DELETED = true;
|
|
// navigate backwards
|
|
vm.$router.go(-1);
|
|
} else {
|
|
let url = API_BASE_URL + vm.$route.params.recordid;
|
|
|
|
window.$gz.form.deleteAllErrorBoxErrors(vm);
|
|
let res = await window.$gz.api.remove(url);
|
|
if (res.error) {
|
|
vm.formState.serverError = res.error;
|
|
window.$gz.form.setErrorBoxErrors(vm);
|
|
} else {
|
|
//workaround to prevent warning about leaving dirty record
|
|
//For some reason I couldn't just reset isdirty in formstate
|
|
JUST_DELETED = true;
|
|
// navigate backwards
|
|
vm.$router.go(-1);
|
|
}
|
|
}
|
|
} catch (ex) {
|
|
window.$gz.errorHandler.handleFormError(ex, vm);
|
|
} finally {
|
|
vm.formState.loading = false;
|
|
}
|
|
},
|
|
async duplicate() {
|
|
let vm = this;
|
|
if (!vm.canDuplicate || vm.$route.params.recordid == 0) {
|
|
return;
|
|
}
|
|
vm.formState.loading = true;
|
|
let url = API_BASE_URL + "duplicate/" + vm.$route.params.recordid;
|
|
|
|
try {
|
|
window.$gz.form.deleteAllErrorBoxErrors(vm);
|
|
vm.duplicating = true;
|
|
let res = await window.$gz.api.upsert(url);
|
|
if (res.error) {
|
|
vm.formState.serverError = res.error;
|
|
window.$gz.form.setErrorBoxErrors(vm);
|
|
} else {
|
|
//Navigate to new record
|
|
this.$router.push({
|
|
name: "adm-translation",
|
|
params: {
|
|
recordid: res.data.id,
|
|
obj: res.data // pass data object to new form
|
|
}
|
|
});
|
|
}
|
|
} catch (ex) {
|
|
window.$gz.errorHandler.handleFormError(ex, vm);
|
|
} finally {
|
|
vm.formState.loading = false;
|
|
vm.duplicating = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/////////////////////////////
|
|
//
|
|
//
|
|
async function clickHandler(menuItem) {
|
|
if (!menuItem) {
|
|
return;
|
|
}
|
|
let m = window.$gz.menu.parseMenuItem(menuItem);
|
|
if (m.owner == FORM_KEY && !m.disabled) {
|
|
switch (m.key) {
|
|
case "save":
|
|
m.vm.submit();
|
|
break;
|
|
case "replace":
|
|
m.vm.replaceDialog = true;
|
|
break;
|
|
case "export":
|
|
//ignore download link let it go
|
|
break;
|
|
case "delete":
|
|
m.vm.remove();
|
|
break;
|
|
case "new":
|
|
m.vm.$router.push({
|
|
name: "adm-translation",
|
|
params: { recordid: 0 }
|
|
});
|
|
break;
|
|
case "duplicate":
|
|
m.vm.duplicate();
|
|
break;
|
|
case "report":
|
|
if (m.id != null) {
|
|
//last report selected
|
|
m.vm.$router.push({
|
|
name: "ay-report",
|
|
params: { recordid: m.id, ayatype: window.$gz.type.Translation }
|
|
});
|
|
} else {
|
|
//general report selector chosen
|
|
let res = await m.vm.$refs.reportSelector.open();
|
|
|
|
//if null for no selection
|
|
//just bail out
|
|
if (res == null) {
|
|
return;
|
|
}
|
|
//persist last report selected
|
|
window.$gz.form.setLastReport(FORM_KEY, res);
|
|
|
|
//Now open the report viewer...
|
|
m.vm.$router.push({
|
|
name: "ay-report",
|
|
params: { recordid: res.id, ayatype: window.$gz.type.Translation }
|
|
});
|
|
}
|
|
break;
|
|
default:
|
|
window.$gz.eventBus.$emit(
|
|
"notify-warning",
|
|
FORM_KEY + "::context click: [" + m.key + "]"
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
//////////////////////
|
|
//
|
|
//
|
|
function generateMenu(vm) {
|
|
let menuOptions = {
|
|
isMain: false,
|
|
readOnly: vm.formState.readOnly,
|
|
icon: "$ayiLanguage",
|
|
title: "Translation",
|
|
helpUrl: "adm-translation",
|
|
formData: {
|
|
ayaType: window.$gz.type.Translation,
|
|
recordId: vm.$route.params.recordid,
|
|
formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
|
|
recordName: vm.obj.name
|
|
},
|
|
menuItems: []
|
|
};
|
|
|
|
if (vm.rights.change && vm.obj.stock != true) {
|
|
menuOptions.menuItems.push({
|
|
title: "Save",
|
|
icon: "$ayiSave",
|
|
surface: true,
|
|
key: FORM_KEY + ":save",
|
|
vm: vm
|
|
});
|
|
}
|
|
|
|
if (
|
|
vm.rights.delete &&
|
|
vm.$route.params.recordid != 0 &&
|
|
vm.obj.stock != true
|
|
) {
|
|
menuOptions.menuItems.push({
|
|
title: "Delete",
|
|
icon: "$ayiTrashAlt",
|
|
surface: false,
|
|
key: FORM_KEY + ":delete",
|
|
vm: vm
|
|
});
|
|
}
|
|
|
|
//STUB REPORTS
|
|
//Report not Print, print is a further option
|
|
menuOptions.menuItems.push({
|
|
title: "Report",
|
|
icon: "$ayiFileAlt",
|
|
key: FORM_KEY + ":report",
|
|
vm: vm
|
|
});
|
|
|
|
//get last report selected
|
|
let lastReport = window.$gz.form.getLastReport(FORM_KEY);
|
|
if (lastReport != null) {
|
|
menuOptions.menuItems.push({
|
|
title: lastReport.name,
|
|
icon: "$ayiFileAlt",
|
|
key: FORM_KEY + ":report:" + lastReport.id,
|
|
vm: vm
|
|
});
|
|
}
|
|
|
|
if (vm.rights.change && vm.$route.params.recordid != 0) {
|
|
menuOptions.menuItems.push({
|
|
title: "Duplicate",
|
|
icon: "$ayiClone",
|
|
key: FORM_KEY + ":duplicate",
|
|
vm: vm
|
|
});
|
|
}
|
|
menuOptions.menuItems.push({ divider: true, inset: false });
|
|
|
|
if (vm.rights.change && vm.obj.stock != true) {
|
|
menuOptions.menuItems.push({
|
|
title: "FindAndReplace",
|
|
icon: null,
|
|
key: FORM_KEY + ":replace",
|
|
vm: vm
|
|
});
|
|
}
|
|
|
|
//EXPORT
|
|
if (vm.$route.params.recordid != 0) {
|
|
let href = window.$gz.api.genericDownloadUrl(
|
|
"translation/download/" + vm.$route.params.recordid
|
|
);
|
|
|
|
menuOptions.menuItems.push({
|
|
title: "Export",
|
|
icon: "$ayiFileDownload",
|
|
href: href,
|
|
target: "_blank",
|
|
key: FORM_KEY + ":export",
|
|
vm: vm
|
|
});
|
|
}
|
|
|
|
menuOptions.menuItems.push({ divider: true, inset: false });
|
|
|
|
window.$gz.eventBus.$emit("menu-change", menuOptions);
|
|
}
|
|
|
|
let JUST_DELETED = false;
|
|
|
|
/////////////////////////////////
|
|
//
|
|
//
|
|
async function initForm(vm) {
|
|
await fetchTranslatedText(vm);
|
|
//await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
|
|
await setEditingActiveTranslation(vm);
|
|
}
|
|
|
|
//////////////////////////////////////////////////////////
|
|
//
|
|
// Ensures UI translated text is available
|
|
//
|
|
async function fetchTranslatedText(vm) {
|
|
await window.$gz.translation.cacheTranslations([
|
|
"Translation",
|
|
"Name",
|
|
"TranslationKey",
|
|
"TranslationDisplayText",
|
|
"FindAndReplace",
|
|
"Find",
|
|
"Replace",
|
|
"GlobalCJKIndex",
|
|
"GlobalCJKIndexDescription"
|
|
]);
|
|
}
|
|
|
|
//////////////////////////////////////////////////////////
|
|
//
|
|
//
|
|
async function setEditingActiveTranslation(vm) {
|
|
if (vm.$route.params.recordid != 0) {
|
|
let res = await window.$gz.api.get("user-option/" + vm.$store.state.userId);
|
|
vm.editingActiveTranslation =
|
|
res.data.translationId == vm.$route.params.recordid;
|
|
}
|
|
}
|
|
</script>
|