From fecd1c6493f0c5328ba6ee1d4779bfc9ddaad5b5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 13:26:49 +0100
Subject: [PATCH] :sparkles: Builds edit section form and functionality
---
.../InteractiveEditor/EditSection.vue | 112 ++++++++++++++++--
src/components/LinkItems/Collapsable.vue | 27 ++++-
src/components/LinkItems/Section.vue | 33 +++++-
3 files changed, 160 insertions(+), 12 deletions(-)
diff --git a/src/components/InteractiveEditor/EditSection.vue b/src/components/InteractiveEditor/EditSection.vue
index 30eeb917..9b461d82 100644
--- a/src/components/InteractiveEditor/EditSection.vue
+++ b/src/components/InteractiveEditor/EditSection.vue
@@ -1,23 +1,119 @@
<template>
- <span>Item Editor</span>
+ <modal
+ :name="modalName"
+ :resizable="true"
+ width="50%"
+ height="80%"
+ classes="dashy-modal edit-section"
+ @closed="modalClosed"
+ >
+ <div class="edit-section-inner">
+ <h3>Edit Section</h3>
+ <FormSchema
+ :schema="customSchema"
+ v-model="sectionData"
+ name="editSectionForm"
+ class="edit-section-form"
+ />
+ <!-- Save to state button -->
+ <Button class="edit-section-save-btn" :click="saveSection">Save</Button>
+ </div>
+ </modal>
</template>
<script>
+import FormSchema from '@formschema/native';
+import StoreKeys from '@/utils/StoreMutations';
+import DashySchema from '@/utils/ConfigSchema';
+import Button from '@/components/FormElements/Button';
+import { modalNames } from '@/utils/defaults';
export default {
name: 'EditSection',
- data() {
- return {};
+ props: {
+ sectionIndex: Number,
+ },
+ components: {
+ Button,
+ FormSchema,
+ },
+ data() {
+ return {
+ modalName: modalNames.EDIT_SECTION,
+ schema: DashySchema.properties.sections.items.properties,
+ sectionData: {},
+ };
+ },
+ computed: {
+ customSchema() {
+ const sectionSchema = this.schema;
+ const displayDataSchema = this.schema.displayData.properties;
+ return {
+ type: 'object',
+ properties: {
+ name: sectionSchema.name,
+ icon: sectionSchema.icon,
+ displayData: {
+ title: '',
+ description: '',
+ type: 'object',
+ properties: {
+ sortBy: displayDataSchema.sortBy,
+ rows: displayDataSchema.rows,
+ cols: displayDataSchema.cols,
+ collapsed: displayDataSchema.collapsed,
+ hideForGuests: displayDataSchema.hideForGuests,
+ },
+ },
+ },
+ };
+ },
+ },
+ mounted() {
+ this.sectionData = this.$store.getters.getSectionByIndex(this.sectionIndex);
+ this.$modal.show(modalNames.EDIT_SECTION);
+ },
+ methods: {
+ getSectionFromState(index) {
+ return this.$store.getters.getSectionByIndex(index);
+ },
+ /* Clean up work, triggered when modal closed */
+ modalClosed() {
+ this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+ this.$emit('closeEditSection');
+ },
+ saveSection() {
+ const { sectionIndex, sectionData } = this;
+ this.$store.commit(StoreKeys.UPDATE_SECTION, { sectionIndex, sectionData });
+ this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+ this.$emit('closeEditSection');
+ },
},
- props: {},
- computed: {},
- components: {},
- methods: {},
};
</script>
-<style scoped lang="scss">
+<style lang="scss">
@import '@/styles/style-helpers.scss';
@import '@/styles/media-queries.scss';
+@import '@/styles/schema-editor.scss';
+.edit-section-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;
+ }
+ .edit-section-form {
+ @extend .schema-form;
+ margin-bottom: 2.5rem;
+ }
+ .edit-section-save-btn {
+ margin-bottom: 2rem;
+ }
+}
</style>
diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index f0d08f43..7d8386f2 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/src/components/LinkItems/Collapsable.vue
@@ -4,16 +4,17 @@
:style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
>
<input
- :id="`collapsible-${uniqueKey}`"
+ :id="sectionKey"
class="toggle"
type="checkbox"
:checked="getCollapseState()"
@change="collapseChanged"
tabIndex="-1"
>
- <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="-1">
+ <label :for="sectionKey" class="lbl-toggle" tabindex="-1">
<Icon v-if="icon" :icon="icon" size="small" :url="title" class="section-icon" />
<h3>{{ title }}</h3>
+ <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openEditModal" />
</label>
<div class="collapsible-content">
<div class="content-inner">
@@ -27,6 +28,7 @@
import { localStorageKeys } from '@/utils/defaults';
import Icon from '@/components/LinkItems/ItemIcon.vue';
+import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
export default {
name: 'CollapsableContainer',
@@ -42,6 +44,16 @@ export default {
},
components: {
Icon,
+ EditModeIcon,
+ },
+ computed: {
+ isEditMode() {
+ return this.$store.state.editMode;
+ },
+ sectionKey() {
+ if (this.isEditMode) return undefined;
+ return `collapsible-${this.uniqueKey}`;
+ },
},
methods: {
/* Check that row & column span is valid, and not over the max */
@@ -95,6 +107,9 @@ export default {
this.setCollapseState(this.uniqueKey.toString(), whatChanged.srcElement.checked);
}
},
+ openEditModal() {
+ this.$emit('openEditSection');
+ },
},
};
</script>
@@ -207,5 +222,13 @@ export default {
.collapsible-content .content-inner {
padding: 0.5rem;
}
+
+ .edit-mode-item {
+ width: 1rem;
+ height: 1rem;
+ float: right;
+ right: 0.5rem;
+ top: 0.5rem;
+ }
}
</style>
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 1e2da135..e3d99bc9 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -8,6 +8,7 @@
:rows="displayData.rows"
:color="displayData.color"
:customStyles="displayData.customStyles"
+ @openEditSection="openEditSection"
>
<div v-if="!items || items.length < 1" class="no-items">
No Items to Show Yet
@@ -45,15 +46,22 @@
:name="`iframeModal-${groupId}`"
@closed="$emit('itemClicked')"
/>
+ <EditSection
+ v-if="editMenuOpen"
+ @closeEditSection="closeEditSection"
+ :sectionIndex="index"
+ />
</Collapsable>
</template>
<script>
-import { sortOrder as defaultSortOrder, localStorageKeys } from '@/utils/defaults';
-import ErrorHandler from '@/utils/ErrorHandler';
import Item from '@/components/LinkItems/Item.vue';
import Collapsable from '@/components/LinkItems/Collapsable.vue';
import IframeModal from '@/components/LinkItems/IframeModal.vue';
+import EditSection from '@/components/InteractiveEditor/EditSection.vue';
+import ErrorHandler from '@/utils/ErrorHandler';
+import StoreKeys from '@/utils/StoreMutations';
+import { sortOrder as defaultSortOrder, localStorageKeys, modalNames } from '@/utils/defaults';
export default {
name: 'Section',
@@ -64,11 +72,18 @@ export default {
displayData: Object,
items: Array,
itemSize: String,
+ index: Number,
},
components: {
Collapsable,
Item,
IframeModal,
+ EditSection,
+ },
+ data() {
+ return {
+ editMenuOpen: false,
+ };
},
computed: {
appConfig() {
@@ -113,6 +128,9 @@ export default {
}
return styles;
},
+ isEditMode() {
+ return this.$store.state.editMode;
+ },
},
methods: {
/* Opens the iframe modal */
@@ -157,6 +175,17 @@ export default {
.sort((a, b) => a.sort - b.sort)
.map(({ value }) => value);
},
+ /* Open the Section Edit Menu */
+ openEditSection() {
+ this.editMenuOpen = true;
+ this.$modal.show(modalNames.EDIT_SECTION);
+ this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+ },
+ closeEditSection() {
+ this.editMenuOpen = false;
+ this.$modal.hide(modalNames.EDIT_SECTION);
+ this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+ },
},
};
</script>