From 677f0eea4ef72c807f24a15271a045792e9402bd Mon Sep 17 00:00:00 2001 From: Alicia Sykes <sykes.alicia@gmail.com> Date: Sat, 16 Oct 2021 20:34:31 +0100 Subject: [PATCH] :construction: Able to display form data from schema --- src/components/InteractiveEditor/EditItem.vue | 65 +++++++++++++++++-- src/components/LinkItems/Item.vue | 8 ++- 2 files changed, 64 insertions(+), 9 deletions(-) diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue index 5849a1f4..a35b0ff9 100644 --- a/src/components/InteractiveEditor/EditItem.vue +++ b/src/components/InteractiveEditor/EditItem.vue @@ -2,18 +2,29 @@ <modal :name="modalName" :resizable="true" - width="55%" - height="80%" + width="50%" + height="50%" classes="dashy-modal edit-item" @closed="modalClosed" > - <span>Item Editor</span> - <input /> + <h3>Edit Item</h3> + <form> + <div class="row" v-for="row in formData" :key="row.name"> + <Input + :label="row.name" + :value="row.value" + :description="row.description" + layout="horizontal" + /> + </div> + </form> </modal> </template> <script> +import Input from '@/components/FormElements/Input'; import StoreKeys from '@/utils/StoreMutations'; +import DashySchema from '@/utils/ConfigSchema'; import { modalNames } from '@/utils/defaults'; export default { @@ -21,24 +32,64 @@ export default { data() { return { modalName: modalNames.EDIT_ITEM, + schema: DashySchema.properties.sections.items.properties.items.items.properties, + formData: [], + item: {}, }; }, - props: {}, + props: { + itemId: String, + }, computed: {}, - components: {}, + components: { + Input, + }, mounted() { + this.item = this.getItemFromState(this.itemId); + this.formData = this.makeInitialFormData(); this.$modal.show(modalNames.EDIT_ITEM); }, methods: { + makeInitialFormData() { + const formData = []; + Object.keys(this.schema).forEach((property) => { + if (this.item[property]) { + formData.push({ + name: property, + description: this.schema[property].description, + value: this.item[property] || '', + }); + } + }); + return formData; + }, + getItemFromState(id) { + return this.$store.getters.getItemById(id); + }, modalClosed() { this.$store.commit(StoreKeys.SET_MODAL_OPEN, false); + this.$emit('closeEditMenu'); }, }, }; </script> -<style scoped lang="scss"> +<style lang="scss"> @import '@/styles/style-helpers.scss'; @import '@/styles/media-queries.scss'; +.edit-item { + padding: 1rem; + background: var(--config-settings-background); + color: var(--config-settings-color); + height: 100%; + overflow-y: auto; + .row { + padding: 0.5rem 0.25rem; + &:not(:last-child) { + border-bottom: 1px dotted var(--config-settings-color); + } + } +} + </style> diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index d2c90309..e499ac49 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -40,7 +40,7 @@ @launchItem="launchItem" @openItemSettings="openItemSettings" /> - <EditItem v-if="editMenuOpen" /> + <EditItem v-if="editMenuOpen" :itemId="id" @closeEditMenu="closeEditMenu" /> </div> </template> @@ -226,6 +226,10 @@ export default { this.$modal.show(modalNames.EDIT_ITEM); this.$store.commit(StoreKeys.SET_MODAL_OPEN, true); }, + /* Ensure conditional is updated, once menu closed */ + closeEditMenu() { + this.editMenuOpen = false; + }, /* Used for smart-sort when sorting items by most used apps */ incrementMostUsedCount(itemId) { const mostUsed = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}'); @@ -298,7 +302,7 @@ export default { /* Text in tile */ .tile-title { white-space: nowrap; - overflow: hidden; + // overflow: hidden; text-overflow: ellipsis; min-width: 120px; height: 30px;