mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-23 05:35:07 +02:00
✨ Implements UI editor form for appConfig
This commit is contained in:
parent
e6f3cae63d
commit
89737ffa5d
134
src/components/InteractiveEditor/EditAppConfig.vue
Normal file
134
src/components/InteractiveEditor/EditAppConfig.vue
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
<template>
|
||||||
|
<modal
|
||||||
|
:name="modalName"
|
||||||
|
:resizable="true"
|
||||||
|
width="50%"
|
||||||
|
height="80%"
|
||||||
|
classes="dashy-modal edit-app-config"
|
||||||
|
@closed="modalClosed"
|
||||||
|
>
|
||||||
|
<div class="edit-app-config-inner">
|
||||||
|
<h3>{{ $t('interactive-editor.edit-app-config-btn') }}</h3>
|
||||||
|
<div class="app-config-intro">
|
||||||
|
<p class="use-caution">Proceed with Caution</p>
|
||||||
|
The following options are for advanded app configration.
|
||||||
|
If you are unsure about any of the fields, please reference the
|
||||||
|
<a href="https://dashy.to/docs/configuring#appconfig-optional">documentation</a>
|
||||||
|
to avoid unintended consequences.
|
||||||
|
</div>
|
||||||
|
<Button class="save-app-config-btn" :click="saveToState">
|
||||||
|
{{ $t('interactive-editor.save-stage-btn') }}
|
||||||
|
<SaveIcon />
|
||||||
|
</button>
|
||||||
|
<FormSchema
|
||||||
|
:schema="schema"
|
||||||
|
v-model="formData"
|
||||||
|
@submit.prevent="saveToState"
|
||||||
|
:search="true"
|
||||||
|
class="app-config-form"
|
||||||
|
name="appConfigForm"
|
||||||
|
></FormSchema>
|
||||||
|
<Button class="save-app-config-btn" :click="saveToState">
|
||||||
|
{{ $t('interactive-editor.save-stage-btn') }}
|
||||||
|
<SaveIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FormSchema from '@formschema/native';
|
||||||
|
import DashySchema from '@/utils/ConfigSchema';
|
||||||
|
import StoreKeys from '@/utils/StoreMutations';
|
||||||
|
import { modalNames } from '@/utils/defaults';
|
||||||
|
import Button from '@/components/FormElements/Button';
|
||||||
|
import SaveIcon from '@/assets/interface-icons/save-config.svg';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EditAppConfig',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: {},
|
||||||
|
schema: DashySchema.properties.appConfig,
|
||||||
|
modalName: modalNames.EDIT_APP_CONFIG,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
components: {
|
||||||
|
FormSchema,
|
||||||
|
Button,
|
||||||
|
SaveIcon,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.formData = this.appConfig;
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
appConfig() {
|
||||||
|
return this.$store.getters.appConfig;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/* When form submitteed, update VueX store with new appConfig, and close modal */
|
||||||
|
saveToState() {
|
||||||
|
const processedFormData = this.removeUndefinedValues(this.formData);
|
||||||
|
this.$store.commit(StoreKeys.UPDATE_APP_CONFIG, processedFormData);
|
||||||
|
this.$modal.hide(this.modalName);
|
||||||
|
this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
|
||||||
|
this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
|
||||||
|
},
|
||||||
|
/* Called when modal manually closed, updates state to allow searching again */
|
||||||
|
modalClosed() {
|
||||||
|
this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
|
||||||
|
},
|
||||||
|
/* Remove any attribute which has an undefined value before saving */
|
||||||
|
removeUndefinedValues(rawAppConfig) {
|
||||||
|
const raw = rawAppConfig;
|
||||||
|
const isEmpty = (value) => (value === undefined || value === {} || value === []);
|
||||||
|
Object.keys(raw).forEach(key => isEmpty(raw[key]) && delete raw[key]);
|
||||||
|
return raw;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '@/styles/style-helpers.scss';
|
||||||
|
@import '@/styles/media-queries.scss';
|
||||||
|
@import '@/styles/schema-editor.scss';
|
||||||
|
|
||||||
|
.edit-app-config-inner {
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--interactive-editor-background);
|
||||||
|
color: var(--interactive-editor-color);
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
@extend .scroll-bar;
|
||||||
|
h3 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
.app-config-form {
|
||||||
|
@extend .schema-form;
|
||||||
|
border-top: 1px dashed var(--interactive-editor-color);
|
||||||
|
}
|
||||||
|
.app-config-intro {
|
||||||
|
padding: 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--interactive-editor-color);
|
||||||
|
background: var(--interactive-editor-background-darker);
|
||||||
|
border-radius: var(--interactive-editor-color);
|
||||||
|
p.use-caution {
|
||||||
|
color: var(--warning);
|
||||||
|
margin: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--interactive-editor-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button.save-app-config-btn {
|
||||||
|
margin: 0.5rem auto 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
@ -55,6 +55,7 @@
|
|||||||
<PageInfoIcon />
|
<PageInfoIcon />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
|
:click="openEditAppConfig"
|
||||||
v-tooltip="tooltip($t('interactive-editor.edit-app-config-tooltip'))"
|
v-tooltip="tooltip($t('interactive-editor.edit-app-config-tooltip'))"
|
||||||
>
|
>
|
||||||
{{ $t('interactive-editor.edit-app-config-btn') }}
|
{{ $t('interactive-editor.edit-app-config-btn') }}
|
||||||
@ -63,6 +64,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Modals for editing appConfig + pageInfo -->
|
<!-- Modals for editing appConfig + pageInfo -->
|
||||||
<EditPageInfo />
|
<EditPageInfo />
|
||||||
|
<EditAppConfig />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -71,6 +73,7 @@ import Button from '@/components/FormElements/Button';
|
|||||||
import StoreKeys from '@/utils/StoreMutations';
|
import StoreKeys from '@/utils/StoreMutations';
|
||||||
import { modalNames } from '@/utils/defaults';
|
import { modalNames } from '@/utils/defaults';
|
||||||
import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
|
import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
|
||||||
|
import EditAppConfig from '@/components/InteractiveEditor/EditAppConfig';
|
||||||
|
|
||||||
import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
|
import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
|
||||||
import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
|
import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
|
||||||
@ -90,15 +93,13 @@ export default {
|
|||||||
CancelIcon,
|
CancelIcon,
|
||||||
AppConfigIcon,
|
AppConfigIcon,
|
||||||
PageInfoIcon,
|
PageInfoIcon,
|
||||||
|
EditAppConfig,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
reset() {
|
reset() {
|
||||||
this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
|
this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
|
||||||
this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
|
this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
|
||||||
},
|
},
|
||||||
tooltip(content) {
|
|
||||||
return { content, trigger: 'hover focus', delay: 250 };
|
|
||||||
},
|
|
||||||
openExportConfigMenu() {
|
openExportConfigMenu() {
|
||||||
this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
|
this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
|
||||||
this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
|
this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
|
||||||
@ -107,6 +108,13 @@ export default {
|
|||||||
this.$modal.show(modalNames.EDIT_PAGE_INFO);
|
this.$modal.show(modalNames.EDIT_PAGE_INFO);
|
||||||
this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
|
this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
|
||||||
},
|
},
|
||||||
|
openEditAppConfig() {
|
||||||
|
this.$modal.show(modalNames.EDIT_APP_CONFIG);
|
||||||
|
this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
|
||||||
|
},
|
||||||
|
tooltip(content) {
|
||||||
|
return { content, trigger: 'hover focus', delay: 250 };
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -56,7 +56,7 @@ export default {
|
|||||||
/* The ISO code for the users language, synced with VueX store */
|
/* The ISO code for the users language, synced with VueX store */
|
||||||
savedLanguage: {
|
savedLanguage: {
|
||||||
get() {
|
get() {
|
||||||
return this.getIsoFromLangObj(this.$store.state.lang);
|
return this.getIsoFromLangObj(this.$store.getters.appConfig.lang);
|
||||||
},
|
},
|
||||||
set(newLang) {
|
set(newLang) {
|
||||||
this.$store.commit(Keys.SET_LANGUAGE, newLang.code);
|
this.$store.commit(Keys.SET_LANGUAGE, newLang.code);
|
||||||
|
11
src/store.js
11
src/store.js
@ -16,12 +16,12 @@ const {
|
|||||||
UPDATE_ITEM,
|
UPDATE_ITEM,
|
||||||
SET_EDIT_MODE,
|
SET_EDIT_MODE,
|
||||||
UPDATE_PAGE_INFO,
|
UPDATE_PAGE_INFO,
|
||||||
|
UPDATE_APP_CONFIG,
|
||||||
} = Keys;
|
} = Keys;
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
config: {},
|
config: {},
|
||||||
lang: '', // The users language, auto-detected or read from local storage / config
|
|
||||||
editMode: false, // While true, the user can drag and edit items + sections
|
editMode: false, // While true, the user can drag and edit items + sections
|
||||||
modalOpen: false, // KB shortcut functionality will be disabled when modal is open
|
modalOpen: false, // KB shortcut functionality will be disabled when modal is open
|
||||||
},
|
},
|
||||||
@ -58,7 +58,9 @@ const store = new Vuex.Store({
|
|||||||
state.config = config;
|
state.config = config;
|
||||||
},
|
},
|
||||||
[SET_LANGUAGE](state, lang) {
|
[SET_LANGUAGE](state, lang) {
|
||||||
state.lang = lang;
|
const newConfig = state.config;
|
||||||
|
newConfig.appConfig.language = lang;
|
||||||
|
state.config = newConfig;
|
||||||
},
|
},
|
||||||
[SET_MODAL_OPEN](state, modalOpen) {
|
[SET_MODAL_OPEN](state, modalOpen) {
|
||||||
state.modalOpen = modalOpen;
|
state.modalOpen = modalOpen;
|
||||||
@ -83,6 +85,11 @@ const store = new Vuex.Store({
|
|||||||
newConfig.pageInfo = newPageInfo;
|
newConfig.pageInfo = newPageInfo;
|
||||||
state.config = newConfig;
|
state.config = newConfig;
|
||||||
},
|
},
|
||||||
|
[UPDATE_APP_CONFIG](state, newAppConfig) {
|
||||||
|
const newConfig = state.config;
|
||||||
|
newConfig.appConfig = newAppConfig;
|
||||||
|
state.config = newConfig;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
/* Called when app first loaded. Reads config and sets state */
|
/* Called when app first loaded. Reads config and sets state */
|
||||||
|
@ -7,6 +7,7 @@ const KEY_NAMES = [
|
|||||||
'SET_EDIT_MODE',
|
'SET_EDIT_MODE',
|
||||||
'UPDATE_ITEM',
|
'UPDATE_ITEM',
|
||||||
'UPDATE_PAGE_INFO',
|
'UPDATE_PAGE_INFO',
|
||||||
|
'UPDATE_APP_CONFIG',
|
||||||
];
|
];
|
||||||
|
|
||||||
// Convert array of key names into an object, and export
|
// Convert array of key names into an object, and export
|
||||||
|
Loading…
x
Reference in New Issue
Block a user