This commit is contained in:
2020-05-22 13:30:25 +00:00
parent d55be643bf
commit bb9e2cd107
2 changed files with 65 additions and 148 deletions

View File

@@ -23,7 +23,9 @@ todo: OPS routes CLIENT UI
can update and save this is the editable content of the form can update and save this is the editable content of the form
todo: is client sending jwt with pre-login get server trial status route?
because I see a not authorized response when I go to login page from a previously logged in session
login page should clear jwt on entry

View File

@@ -1,102 +1,47 @@
<template> <template>
<v-row v-if="formState.ready"> <v-row v-if="formState.ready">
<v-col> <v-col>
<v-form ref="form"> <v-form ref="form">
<v-row> <v-row>
<gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error> <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
<v-col cols="12" sm="6" lg="4" xl="3"> <v-col cols="12" sm="6" lg="4" xl="3">
<v-select {{ obj.lastBackup }} {{ backupFileList }}
v-model="obj.translationId"
:items="selectLists.translations"
item-text="name"
item-value="id"
:readonly="formState.readOnly"
:label="$ay.t('Translation')"
ref="translationId"
:error-messages="form().serverErrors(this, 'translationId')"
@input="fieldValueChanged('translationId')"
></v-select>
</v-col> </v-col>
<v-col cols="12" sm="6" lg="4" xl="3"> <v-col cols="12" sm="6" lg="4" xl="3">
<v-text-field <gz-time-picker
v-model="obj.emailAddress" :label="$ay.t('BackupTime')"
:rules="[form().required(this, 'backupTime')]"
:error-messages="form().serverErrors(this, 'backupTime')"
v-model="obj.backupTime"
:readonly="formState.readOnly" :readonly="formState.readOnly"
:clearable="!formState.readOnly" ref="backupTime"
@click:clear="fieldValueChanged('emailAddress')" @input="fieldValueChanged('backupTime')"
:label="$ay.t('UserEmailAddress')" ></gz-time-picker>
:error-messages="form().serverErrors(this, 'emailAddress')"
ref="emailAddress"
@input="fieldValueChanged('emailAddress')"
></v-text-field>
</v-col> </v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
<v-text-field
v-model="obj.currencyName"
hint="e.g. USD, EUR, GBP, AUD, CAD etc"
:readonly="formState.readOnly"
:clearable="!formState.readOnly"
@click:clear="fieldValueChanged('currencyName')"
:label="$ay.t('CurrencyCode')"
:rules="[form().required(this, 'currencyName')]"
:error-messages="form().serverErrors(this, 'currencyName')"
ref="currencyName"
@input="fieldValueChanged('currencyName')"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3"> <v-col cols="12" sm="6" lg="4" xl="3">
<v-checkbox <v-checkbox
v-model="obj.hour12" v-model="obj.backupAttachments"
:readonly="formState.readOnly" :readonly="formState.readOnly"
:label="$ay.t('Hour12')" :label="$ay.t('BackupAttachments')"
ref="hour12" ref="backupAttachments"
:error-messages="form().serverErrors(this, 'hour12')" :error-messages="form().serverErrors(this, 'backupAttachments')"
@change="fieldValueChanged('hour12')" @change="fieldValueChanged('backupAttachments')"
></v-checkbox> ></v-checkbox>
</v-col> </v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
<!-- https://vuetifyjs.com/en/components/color-pickers -->
<span class="v-label v-label--active theme--light">
{{ $ay.t("UserColor") }}
</span>
<v-color-picker
v-model="obj.uiColor"
:readonly="formState.readOnly"
hide-mode-switch
mode="hexa"
:error-messages="form().serverErrors(this, 'uiColor')"
ref="uiColor"
@input="fieldValueChanged('uiColor')"
></v-color-picker>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3"> <v-col cols="12" sm="6" lg="4" xl="3">
<v-text-field <v-text-field
v-model="obj.languageOverride" v-model="obj.backupSetsToKeep"
:placeholder="locale().getBrowserFirstLanguage()"
:readonly="formState.readOnly" :readonly="formState.readOnly"
:clearable="!formState.readOnly" :label="$ay.t('BackupSetsToKeep')"
@click:clear="fieldValueChanged('languageOverride')" ref="backupSetsToKeep"
:label="$ay.t('LanguageCode')" :rules="[form().integerValid(this, 'backupSetsToKeep')]"
:error-messages="form().serverErrors(this, 'languageOverride')" :error-messages="form().serverErrors(this, 'backupSetsToKeep')"
ref="languageOverride" @input="fieldValueChanged('backupSetsToKeep')"
@input="fieldValueChanged('languageOverride')" type="number"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
<v-text-field
v-model="obj.timeZoneOverride"
:placeholder="locale().getBrowserTimeZoneName()"
:readonly="formState.readOnly"
:clearable="!formState.readOnly"
@click:clear="fieldValueChanged('timeZoneOverride')"
:label="$ay.t('TimeZone')"
:error-messages="form().serverErrors(this, 'timeZoneOverride')"
ref="timeZoneOverride"
@input="fieldValueChanged('timeZoneOverride')"
></v-text-field> ></v-text-field>
</v-col> </v-col>
</v-row> </v-row>
@@ -120,9 +65,8 @@ export default {
vm.rights = window.$gz.role.fullRightsObject(); vm.rights = window.$gz.role.fullRightsObject();
vm.formState.ready = true; vm.formState.ready = true;
window.$gz.eventBus.$on("menu-click", clickHandler); window.$gz.eventBus.$on("menu-click", clickHandler);
//This form record is PUT only and there is only ever one record and it's id is 1
vm.getDataFromApi(); vm.getDataFromApi();
vm.getBackupFileList();
}) })
.catch(err => { .catch(err => {
vm.formState.ready = true; vm.formState.ready = true;
@@ -148,10 +92,8 @@ export default {
components: {}, components: {},
data() { data() {
return { return {
formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY, formCustomTemplateKey: null,
selectLists: { backupFileList: [],
translations: []
},
obj: { obj: {
/*{ /*{
"id": 0, "id": 0,
@@ -181,16 +123,12 @@ export default {
rights: window.$gz.role.fullRightsObject() rights: window.$gz.role.fullRightsObject()
}; };
}, },
//WATCHERS
watch: { watch: {
formState: { formState: {
handler: function(val) { handler: function(val) {
//,oldval is available here too if necessary
if (this.formState.loading) { if (this.formState.loading) {
return; return;
} }
//enable / disable save button
let canSave = val.dirty && val.valid && !val.readOnly; let canSave = val.dirty && val.valid && !val.readOnly;
if (canSave) { if (canSave) {
window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save"); window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
@@ -221,23 +159,51 @@ export default {
window.$gz.form.fieldValueChanged(this, ref); window.$gz.form.fieldValueChanged(this, ref);
} }
}, },
getBackupFileList() {
let vm = this;
vm.formState.loading = true;
let url = "backup/list";
window.$gz.api
.get(url)
.then(res => {
if (res.error) {
if (res.error.code == "2010") {
window.$gz.eventBus.$emit(
"notify-error",
vm.$ay.t("ErrorAPI2010")
);
window.$gz._.delay(function() {
vm.$router.go(-1);
}, 2000);
}
vm.formState.serverError = res.error;
window.$gz.form.setErrorBoxErrors(vm);
} else {
vm.backupFileList = res.data;
}
})
.catch(function handleGetBackupFileListError(error) {
window.$gz.form.setFormState({
vm: vm,
loading: false
});
window.$gz.errorHandler.handleFormError(error, vm);
});
},
getDataFromApi() { getDataFromApi() {
let vm = this; let vm = this;
vm.formState.loading = true; vm.formState.loading = true;
let url = "global-ops-backup-setting"; let url = "global-ops-backup-setting";
window.$gz.form.deleteAllErrorBoxErrors(vm); window.$gz.form.deleteAllErrorBoxErrors(vm);
window.$gz.api window.$gz.api
.get(url) .get(url)
.then(res => { .then(res => {
if (res.error) { if (res.error) {
//Not found?
if (res.error.code == "2010") { if (res.error.code == "2010") {
//notify not found error then navigate backwards
window.$gz.eventBus.$emit( window.$gz.eventBus.$emit(
"notify-error", "notify-error",
vm.$ay.t("ErrorAPI2010") vm.$ay.t("ErrorAPI2010")
); );
// navigate backwards
window.$gz._.delay(function() { window.$gz._.delay(function() {
vm.$router.go(-1); vm.$router.go(-1);
}, 2000); }, 2000);
@@ -246,20 +212,16 @@ export default {
window.$gz.form.setErrorBoxErrors(vm); window.$gz.form.setErrorBoxErrors(vm);
} else { } else {
vm.obj = res.data; vm.obj = res.data;
//Update the form status
window.$gz.form.setFormState({ window.$gz.form.setFormState({
vm: vm, vm: vm,
dirty: false, dirty: false,
valid: true, valid: true,
loading: false loading: false
}); });
//modify the menu as necessary
generateMenu(vm); generateMenu(vm);
} }
}) })
.catch(function handleGetDataFromAPIError(error) { .catch(function handleGetDataFromAPIError(error) {
//Update the form status
window.$gz.form.setFormState({ window.$gz.form.setFormState({
vm: vm, vm: vm,
loading: false loading: false
@@ -271,11 +233,7 @@ export default {
let vm = this; let vm = this;
if (vm.canSave) { if (vm.canSave) {
vm.formState.loading = true; vm.formState.loading = true;
let url = "global-ops-backup-setting";
//always submit from this form for the current logged in user id
let url = API_BASE_URL + vm.$store.state.userId;
//clear any errors vm might be around from previous submit
window.$gz.form.deleteAllErrorBoxErrors(vm); window.$gz.form.deleteAllErrorBoxErrors(vm);
window.$gz.api window.$gz.api
.upsert(url, vm.obj) .upsert(url, vm.obj)
@@ -285,35 +243,11 @@ export default {
vm.formState.serverError = res.error; vm.formState.serverError = res.error;
window.$gz.form.setErrorBoxErrors(vm); window.$gz.form.setErrorBoxErrors(vm);
} else { } else {
//UserOptions is never a POST as it always exists and can't be deleted so always a PUT
//Handle "put" of an existing record (UPDATE)
vm.obj.concurrency = res.data.concurrency; vm.obj.concurrency = res.data.concurrency;
window.$gz.form.setFormState({ window.$gz.form.setFormState({
vm: vm, vm: vm,
dirty: false dirty: false
}); });
//Set values in store so they are updated immediately for user
let l = vm.$store.state.locale;
if (vm.obj.languageOverride) {
l.languageOverride = vm.obj.languageOverride;
}
if (vm.obj.timeZoneOverride) {
l.timeZoneOverride = vm.obj.timeZoneOverride;
}
if (vm.obj.currencyName) {
l.currencyName = vm.obj.currencyName;
}
if (vm.obj.hour12) {
l.hour12 = vm.obj.hour12;
}
window.$gz.store.commit("setLocale", l);
} }
}) })
.catch(function handleSubmitError(error) { .catch(function handleSubmitError(error) {
@@ -382,7 +316,6 @@ function initForm(vm) {
(async function() { (async function() {
try { try {
await fetchTranslatedText(vm); await fetchTranslatedText(vm);
await populateSelectionLists(vm);
} catch (err) { } catch (err) {
reject(err); reject(err);
} }
@@ -393,31 +326,13 @@ function initForm(vm) {
////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////
// //
// Ensures UI translated text is available
// //
function fetchTranslatedText(vm) { function fetchTranslatedText(vm) {
return window.$gz.translation.fetch([ return window.$gz.translation.fetch([
"CurrencyCode", "BackupTime",
"LanguageCode", "BackupLast",
"TimeZone", "BackupSetsToKeep",
"UserEmailAddress", "BackupAttachments"
"Hour12",
"UserColor",
"Translation"
]); ]);
} }
//////////////////////
//
//
function populateSelectionLists(vm) {
//http://localhost:7575/api/v8/translation/list
return window.$gz.api.get("translation/list").then(res => {
if (res.error) {
window.$gz.errorHandler.handleFormError(res.error, vm);
} else {
vm.selectLists.translations = res.data;
}
});
}
</script> </script>