From 5bc9a5f660da0ab0ce495a4fa83d6e7af51ea540 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Tue, 8 Feb 2022 16:49:34 +0000 Subject: [PATCH 01/30] :construction: Started working on sub-items --- src/components/LinkItems/Item.vue | 31 +- src/components/LinkItems/Section.vue | 55 +-- src/components/LinkItems/SubItem.vue | 494 +++++++++++++++++++++++++++ src/mixins/ItemMixin.js | 37 ++ src/views/Home.vue | 2 +- src/views/Minimal.vue | 2 +- 6 files changed, 565 insertions(+), 56 deletions(-) create mode 100644 src/components/LinkItems/SubItem.vue create mode 100644 src/mixins/ItemMixin.js diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index c242d1df..1b690572 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -63,17 +63,18 @@ import EditItem from '@/components/InteractiveEditor/EditItem'; import MoveItemTo from '@/components/InteractiveEditor/MoveItemTo'; import ContextMenu from '@/components/LinkItems/ItemContextMenu'; import StoreKeys from '@/utils/StoreMutations'; +import ItemMixin from '@/mixins/ItemMixin'; import { targetValidator } from '@/utils/ConfigHelpers'; import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg'; import { localStorageKeys, serviceEndpoints, modalNames, - openingMethod as defaultOpeningMethod, } from '@/utils/defaults'; export default { name: 'Item', + mixins: [ItemMixin], props: { id: String, // The unique ID of a tile (e.g. 001) title: String, // The main text of tile, required @@ -109,15 +110,6 @@ export default { EditModeIcon, }, computed: { - appConfig() { - return this.$store.getters.appConfig; - }, - isEditMode() { - return this.$store.state.editMode; - }, - accumulatedTarget() { - return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod; - }, /* Based on item props, adjust class names */ makeClassList() { const { @@ -126,25 +118,6 @@ export default { return `size-${itemSize} ${!icon ? 'short' : ''} ` + `${isAddNew ? 'add-new' : ''} ${isEditMode ? 'is-edit-mode' : ''}`; }, - /* Convert config target value, into HTML anchor target attribute */ - anchorTarget() { - if (this.isEditMode) return '_self'; - const target = this.accumulatedTarget; - switch (target) { - case 'sametab': return '_self'; - case 'newtab': return '_blank'; - case 'parent': return '_parent'; - case 'top': return '_top'; - default: return undefined; - } - }, - /* Get href for anchor, if not in edit mode, or opening in modal/ workspace */ - hyperLinkHref() { - const nothing = '#'; - if (this.isEditMode) return nothing; - const noAnchorNeeded = ['modal', 'workspace', 'clipboard']; - return noAnchorNeeded.includes(this.accumulatedTarget) ? nothing : this.url; - }, }, data() { return { diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue index 56d1f067..0ce11c79 100644 --- a/src/components/LinkItems/Section.vue +++ b/src/components/LinkItems/Section.vue @@ -21,31 +21,36 @@ :class="`there-are-items ${isGridLayout? 'item-group-grid': ''} inner-size-${itemSize}`" :style="gridStyle" :id="`section-${groupId}`" > - + +
+ + + + +
+ + + + + + + + diff --git a/src/mixins/ItemMixin.js b/src/mixins/ItemMixin.js new file mode 100644 index 00000000..0ad4f66e --- /dev/null +++ b/src/mixins/ItemMixin.js @@ -0,0 +1,37 @@ +/** Reusable mixin for items */ +import { openingMethod as defaultOpeningMethod } from '@/utils/defaults'; + +export default { + computed: { + appConfig() { + return this.$store.getters.appConfig; + }, + isEditMode() { + return this.$store.state.editMode; + }, + accumulatedTarget() { + return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod; + }, + /* Convert config target value, into HTML anchor target attribute */ + anchorTarget() { + if (this.isEditMode) return '_self'; + const target = this.accumulatedTarget; + switch (target) { + case 'sametab': return '_self'; + case 'newtab': return '_blank'; + case 'parent': return '_parent'; + case 'top': return '_top'; + default: return undefined; + } + }, + /* Get href for anchor, if not in edit mode, or opening in modal/ workspace */ + hyperLinkHref() { + const nothing = '#'; + const url = this.url || nothing; + if (this.isEditMode) return nothing; + const noAnchorNeeded = ['modal', 'workspace', 'clipboard']; + return noAnchorNeeded.includes(this.accumulatedTarget) ? nothing : url; + }, + }, + methods: {}, +}; diff --git a/src/views/Home.vue b/src/views/Home.vue index e7f097db..004b91e1 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -127,7 +127,7 @@ export default { methods: { /* Clears input field, once a searched item is opened */ finishedSearching() { - this.$refs.filterComp.clearFilterInput(); + if (this.$refs.filterComp) this.$refs.filterComp.clearFilterInput(); }, /* Returns optional section display preferences if available */ getDisplayData(section) { diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue index 6de1fcb9..fe16f701 100644 --- a/src/views/Minimal.vue +++ b/src/views/Minimal.vue @@ -99,7 +99,7 @@ export default { }, /* Clears input field, once a searched item is opened */ finishedSearching() { - this.$refs.filterComp.clearMinFilterInput(); + if (this.$refs.filterComp) this.$refs.filterComp.clearMinFilterInput(); }, /* Returns true if there is more than 1 sub-result visible during searching */ checkIfResults() { From 11c59504dc2f83e51fedcd9d89f590b3894a1bac Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Tue, 15 Feb 2022 11:11:40 +0000 Subject: [PATCH 02/30] :zap: Moves item reusable methods into mixin --- src/components/LinkItems/Item.vue | 180 +++++++----------------------- src/mixins/ItemMixin.js | 109 +++++++++++++++++- 2 files changed, 145 insertions(+), 144 deletions(-) diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index 1b690572..37bb3759 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -1,6 +1,6 @@ @@ -37,6 +36,12 @@ export default { return 2; }, }, + methods: { + /* Pass open modal emit event up */ + triggerModal(url) { + this.$emit('triggerModal', url); + }, + }, }; diff --git a/src/components/MinimalView/MinimalSection.vue b/src/components/MinimalView/MinimalSection.vue index 0cac4510..95a5c8a3 100644 --- a/src/components/MinimalView/MinimalSection.vue +++ b/src/components/MinimalView/MinimalSection.vue @@ -1,30 +1,27 @@