From 7884db5982b0bac86c794cfc7c71c87e42373dc1 Mon Sep 17 00:00:00 2001 From: sebastian-raubach Date: Mon, 18 Sep 2023 15:47:31 +0100 Subject: [PATCH] - CHG: When using enter on the last trait input in a single tab in the data input, the data will be validated and the dialog closed. - CHG: Moved guided walk interface into a separate page to maximize screen space and performance. - --- src/components/Tour.vue | 2 +- src/components/modals/DataInputModal.vue | 43 +++++- .../modals/GuidedWalkSelectorModal.vue | 11 +- src/plugins/changelog/de_DE.json | 4 + src/plugins/changelog/en_GB.json | 4 + src/plugins/i18n/de_DE.json | 1 + src/plugins/i18n/en_GB.json | 1 + src/router/index.js | 4 + src/views/GuidedWalkView.vue | 138 ++++++++++++++++++ 9 files changed, 201 insertions(+), 7 deletions(-) create mode 100644 src/views/GuidedWalkView.vue diff --git a/src/components/Tour.vue b/src/components/Tour.vue index 4274052..04344d0 100644 --- a/src/components/Tour.vue +++ b/src/components/Tour.vue @@ -148,7 +148,7 @@ export default { behavior: 'smooth' }) } else { - this.popoverShow = true + this.popoverShow = false this.currentIndex++ } } else { diff --git a/src/components/modals/DataInputModal.vue b/src/components/modals/DataInputModal.vue index 39c7571..920393c 100644 --- a/src/components/modals/DataInputModal.vue +++ b/src/components/modals/DataInputModal.vue @@ -4,6 +4,7 @@ ok-variant="primary" :cancel-variant="isGuidedWalk ? 'primary' : null" :cancel-disabled="cancelDisabled" + scrollable no-close-on-backdrop no-close-on-esc @cancel.prevent="onCancel" @@ -12,6 +13,8 @@ @shown="autofocusFirst" id="data-input-modal" no-fade + :dialog-class="fullscreen ? 'fullscreen-dialog' : null" + :content-class="fullscreen ? 'fullscreen-content' : null" size="xl" header-class="align-items-center" ref="dataInputModal"> @@ -144,6 +147,10 @@ export default { geolocation: { type: Object, default: () => null + }, + fullscreen: { + type: Boolean, + default: false } }, data: function () { @@ -383,6 +390,10 @@ export default { startTour: function () { this.$refs.dataInputTour.start() }, + forceGuidedWalk: function (config) { + this.updateCell(config.row, config.column) + this.onSelectGuidedWalk(config.walkName) + }, onSelectGuidedWalk: function (typeName) { const match = guideOrderTypes.find(g => g.name === typeName) @@ -454,9 +465,14 @@ export default { if (group) { const traitIndex = group.traits.findIndex(t => t.id === currentTrait.id) - if (traitIndex !== -1 && traitIndex < group.traits.length - 1) { - this.$refs[`trait-section-${group.traits[traitIndex + 1].id}`][0].handleTraverse(0) - emitter.emit('tts', group.traits[traitIndex + 1].name, false) + if (traitIndex !== -1) { + if (traitIndex < group.traits.length - 1) { + this.$refs[`trait-section-${group.traits[traitIndex + 1].id}`][0].handleTraverse(0) + emitter.emit('tts', group.traits[traitIndex + 1].name, false) + } else if (this.traitsByGroup.length === 1) { + // This is the last trait in this tab/group and there's only one tab + this.validate() + } } } }, @@ -610,7 +626,10 @@ export default { */ hide: function () { this.reset() - this.$nextTick(() => this.$refs.dataInputModal.hide()) + this.$nextTick(() => { + this.$refs.dataInputModal.hide() + this.$emit('hidden') + }) }, reset: function () { this.traitGroupTabIndex = 0 @@ -621,10 +640,12 @@ export default { created: function () { emitter.on('plot-clicked', this.updateCell) emitter.on('plot-cache-changed', this.updateCellComments) + emitter.on('force-guided-walk', this.forceGuidedWalk) }, beforeDestroy: function () { emitter.off('plot-clicked', this.updateCell) emitter.off('plot-cache-changed', this.updateCellComments) + emitter.off('force-guided-walk', this.forceGuidedWalk) } } @@ -633,4 +654,18 @@ export default { .trait-group-tab-content section:first-child hr { display: none; } + +.fullscreen-dialog { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: 0; + padding: 0; + max-width: unset; +} +.fullscreen-content { + min-height: 100vh; +} diff --git a/src/components/modals/GuidedWalkSelectorModal.vue b/src/components/modals/GuidedWalkSelectorModal.vue index defbc4a..0f16e69 100644 --- a/src/components/modals/GuidedWalkSelectorModal.vue +++ b/src/components/modals/GuidedWalkSelectorModal.vue @@ -42,11 +42,18 @@ export default { methods: { onSubmit: function () { const order = this.$refs.guideOrderSelector.getOrder() - this.$emit('change', order) emitter.emit('plausible-event', { key: 'guided-walk-started', props: { order: order } }) + this.$router.push({ name: 'guided-walk', query: { row: this.cell.row, column: this.cell.column, guidedWalkName: order } }) - this.$nextTick(() => this.hide()) + // this.$nextTick(() => this.hide()) + + // const order = this.$refs.guideOrderSelector.getOrder() + // this.$emit('change', order) + + // emitter.emit('plausible-event', { key: 'guided-walk-started', props: { order: order } }) + + // this.$nextTick(() => this.hide()) }, /** * Shows and resets modal dialog diff --git a/src/plugins/changelog/de_DE.json b/src/plugins/changelog/de_DE.json index 5c4c457..5056207 100644 --- a/src/plugins/changelog/de_DE.json +++ b/src/plugins/changelog/de_DE.json @@ -237,6 +237,10 @@ "type": "new", "title": "Visuelle Änderungen", "text": "Die Form, Größe und Kompaktheit der Hauptdatenanzeige kann jetzt verändert werden. Aktuell stehen Kreise und Quadrate als Formen und drei Auswahlmöglichkeiten für Größen und Kompaktheit zur Auswahl." + }, { + "type": "update", + "title": "Gelenkter Ablaub Änderung", + "text": "Um sowohl den verfügbaren Bildschirmbereich als auch die Leistung zu maximieren haben wir den gelenkten Ablauf auf eine eigenständige Seite verlagert wo er den maximalen Bildschirmbereich ausnutzen kann." } ] } diff --git a/src/plugins/changelog/en_GB.json b/src/plugins/changelog/en_GB.json index 154e466..ca4031e 100644 --- a/src/plugins/changelog/en_GB.json +++ b/src/plugins/changelog/en_GB.json @@ -237,6 +237,10 @@ "type": "new", "title": "Visual changes", "text": "You can change the shape, size and compactness of the main data display to match your needs. Currently circles and squares are available as the shapes and three different settings for sizes and compactness are available." + }, { + "type": "update", + "title": "Guided walk change", + "text": "To maximize the available screen space as well as performance, we have moved the guided walk to its own page where it will use all the available screen space." } ] } diff --git a/src/plugins/i18n/de_DE.json b/src/plugins/i18n/de_DE.json index 4d07999..7000b8c 100644 --- a/src/plugins/i18n/de_DE.json +++ b/src/plugins/i18n/de_DE.json @@ -490,6 +490,7 @@ "pageArchiveTextExportedOn": "Daten archiviert am: {date}", "pageArchiveTextUpdatedOn": "Versuch zuletzt aktualisiert am: {date}", "pageArchiveNoArchiveFound": "Es wurde kein Archiv für diesen Versuch gefunden. Dies bedeutet entweder, dass es sehr, sehr lange her ist das GridScore benutzt wurde oder, dass etwas mit der Archivierung schief gegangen ist. Bitte mit den Entwicklern von GridScore in Verbingung setzen.", + "pageGuidedWalkInvalidConfig": "Ungültige Konfiguration für gelenkten Ablauf. Bitte erneut versuchen.", "tabTitleSettingsShareExport": "Deine Einstellungen teilen", "tabTextSettingsShareExport": "Der QR-Code unten kann von anderen genutzt werden um deine Einstellungen zu laden und ihre eigenen zu überschreiben.", "tabTitleSettingsShareImport": "Andere Einstellungen laden", diff --git a/src/plugins/i18n/en_GB.json b/src/plugins/i18n/en_GB.json index 1cae7e2..f14b275 100644 --- a/src/plugins/i18n/en_GB.json +++ b/src/plugins/i18n/en_GB.json @@ -497,6 +497,7 @@ "pageArchiveTextExportedOn": "Data archived on: {date}", "pageArchiveTextUpdatedOn": "Trial last updated on: {date}", "pageArchiveNoArchiveFound": "No archive has been found for your trial. This either means that it has been a long, long time since you last used GridScore or that there has been an issue with backups. Please get in touch with the maintainers of GridScore.", + "pageGuidedWalkInvalidConfig": "Invalid configuration for guided walk. Please try again.", "tabTitleSettingsShareExport": "Share your settings", "tabTextSettingsShareExport": "The QR code below will let others load your settings and overwrite their own settings.", "tabTitleSettingsShareImport": "Load other settings", diff --git a/src/router/index.js b/src/router/index.js index a592f0e..1a203cf 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,6 +53,10 @@ const routes = [ path: '/data-entry', name: 'data-entry', component: () => import('@/views/DataEntryView.vue') + }, { + path: '/guided-walk', + name: 'guided-walk', + component: () => import('@/views/GuidedWalkView.vue') }, { path: '/trial-setup', name: 'trial-setup', diff --git a/src/views/GuidedWalkView.vue b/src/views/GuidedWalkView.vue new file mode 100644 index 0000000..ee7cf93 --- /dev/null +++ b/src/views/GuidedWalkView.vue @@ -0,0 +1,138 @@ + + + + +