From 14800f3ac943fa4e418121ce2d6e367cf5bb4569 Mon Sep 17 00:00:00 2001 From: avele Date: Thu, 31 Oct 2019 13:55:03 +0400 Subject: [PATCH] Category settings dialog refactor --- front/client/components/CategoryHeader.vue | 2 +- .../components/CategorySettingsDialog.vue | 126 +++++++++--------- front/client/service/Category.ts | 9 +- 3 files changed, 69 insertions(+), 68 deletions(-) diff --git a/front/client/components/CategoryHeader.vue b/front/client/components/CategoryHeader.vue index 1c1a491..f5d1269 100644 --- a/front/client/components/CategoryHeader.vue +++ b/front/client/components/CategoryHeader.vue @@ -105,7 +105,7 @@ diff --git a/front/client/components/CategorySettingsDialog.vue b/front/client/components/CategorySettingsDialog.vue index a87d786..daf7ddb 100644 --- a/front/client/components/CategorySettingsDialog.vue +++ b/front/client/components/CategorySettingsDialog.vue @@ -43,40 +43,22 @@ item-text="name" item-value="value" :menu-props="{ offsetY: true, closeOnClick: true }" - :items="categoryStatuses" + :items="$options.categoryStatuses" v-model="categoryStatus" label="Status" class="mb-2" /> - - @@ -110,15 +92,39 @@ import Component from 'vue-class-component' import { Prop, Watch } from 'vue-property-decorator' import _isEqual from 'lodash/isEqual' import _sortBy from 'lodash/sortBy' +import { CategoryStatus, CategorySection, ICategoryFull } from 'client/service/Category' -@Component +const categoryStatusNames = { + [CategoryStatus.finished]: 'Complete', + [CategoryStatus.inProgress]: 'Work in progress', + [CategoryStatus.toBeWritten]: 'Stub' +} + +const categorySectionNames = { + [CategorySection.prosCons]: 'Pros/cons section', + [CategorySection.ecosystem]: 'Ecosystem section', + [CategorySection.notes]: 'Notes section' +} + +const categoryStatuses = Object.entries(categoryStatusNames) + .map(([value, name]) => ({ value, name })) + +const categorySections = Object.entries(categorySectionNames) + .map(([value, name]) => ({ value, name })) + +@Component({ + // categoryStatuses, categorySections is here to use in template but without reactivity + categoryStatuses, + categorySections +}) export default class CategorySettingsDialog extends Vue { - @Prop(Boolean) value!: boolean + @Prop(Boolean) value: boolean + @Prop(Object) category: ICategoryFull - title: string = '' - group: string = '' - categoryStatus: object = {} - sections: any[] = [] + title: string = null + group: string = null + categoryStatus: CategoryStatus = null + sections: CategorySection[] = [] initialSettings = { title: null, group: null, @@ -126,44 +132,29 @@ export default class CategorySettingsDialog extends Vue { sections: null } isValid: boolean = false - - // TODO replace ItemProsConsSection and other to constants - sectionDisableWarningAgreed = { - ItemProsConsSection: false, - ItemEcosystemSection: false, - ItemNotesSection: false - } - - categoryStatuses = [ - { name: 'Complete', value: 'CategoryFinished' }, - { name: 'Work in progress', value: 'CategoryWIP' }, - { name: 'Stub', value: 'CategoryStub' } - ] - - inputValidationRules: Function[] = [ + isSectionDisableAgreed = this.isSetSectionDisableAgreedInit() + inputValidationRules: Array<(x: string) => boolean | string> = [ (x: string) => !!x || 'Input can not be empty' ] - get category () { - return this.$store.state.category.category - } - get hasChanges () { const properties = ['title', 'group', 'sections', 'categoryStatus'] + return properties .some(x => { const sortIfArray = (val) => Array.isArray(val) ? _sortBy(val) : val - return !_isEqual(sortIfArray(this[x]), sortIfArray(this.initialSettings[x])) + const current = sortIfArray(this[x]) + const initial = sortIfArray(this.initialSettings[x]) + return !_isEqual(current, initial) }) } @Watch('value') - onOpen () { - const { category } = this - if (!this.category) { - this.close() + onOpen (newVal) { + if (!newVal) { return } + const { category } = this this.title = category.title this.group = category.group this.sections = category.sections.slice() @@ -176,14 +167,16 @@ export default class CategorySettingsDialog extends Vue { sections: this.sections.slice() } - this.sectionDisableWarningAgreed = { - ItemProsConsSection: false, - ItemEcosystemSection: false, - ItemNotesSection: false - } + this.isSectionDisableAgreed = this.isSetSectionDisableAgreedInit() + } + + isSetSectionDisableAgreedInit () { + return Object.values(CategorySection).reduce((acc, cur) => { + acc[cur] = false + return acc + }, {}) } - // TODO refactor, rewrite simpler async updateSectionEnabling (sectionValue, sectionName) { const index = this.sections.indexOf(sectionValue) const isSectionDisabled = index !== -1 @@ -192,17 +185,18 @@ export default class CategorySettingsDialog extends Vue { return } - const isOriginallyEnabled = this.category.sections.includes(sectionValue) + const isOriginallyEnabled = this.initialSettings.sections.includes(sectionValue) const isSectionInEdit = this.$store.state.category.itemsSectionsInEdit[sectionValue].length - const wasAgreedOnce = this.sectionDisableWarningAgreed[sectionValue] - if (isOriginallyEnabled && isSectionInEdit && !wasAgreedOnce) { + const wasAgreedBefore = this.isSectionDisableAgreed[sectionValue] + if (isOriginallyEnabled && isSectionInEdit && !wasAgreedBefore) { + const confirmText = `You have unsaved changes in one of items ${sectionName}. If you disable this section, your changes will be lost.` const isConfirmed = await this._confirm({ - fullText: `You have unsaved changes in one of items’ ${sectionName} section. If you disable this section, your changes will be lost.` + fullText: confirmText }) if (!isConfirmed) { return } - this.sectionDisableWarningAgreed[sectionValue] = true + this.isSectionDisableAgreed[sectionValue] = true } this.sections.splice(index, 1) @@ -233,7 +227,7 @@ export default class CategorySettingsDialog extends Vue { margin-right: 12px; } - /* We using fontawesome icons which turned out to be bigger than vuetify default icons + /* We are using fontawesome icons which turned out to be bigger than vuetify default icons and checkbox icon gets some strange offset if overflow is visible */ svg { overflow: hidden; diff --git a/front/client/service/Category.ts b/front/client/service/Category.ts index 572a31a..d5bdd9b 100644 --- a/front/client/service/Category.ts +++ b/front/client/service/Category.ts @@ -49,6 +49,12 @@ export enum CategoryStatus { toBeWritten = 'CategoryStub' } +export enum CategorySection { + prosCons = 'ItemProsConsSection', + ecosystem = 'ItemEcosystemSection', + notes = 'ItemNotesSection' +} + export interface ICategoryInfo { id: string title: string @@ -62,7 +68,8 @@ export interface ICategoryFull { title: string group: string status: CategoryStatus - description: object + description: object, + sections: CategorySection[], items: ICategoryItem[] }