From 0d4b4f7c20765819efc547a38a48acf9bf5f9f63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20=C3=96stberg?= Date: Fri, 20 Jan 2023 15:36:31 +0100 Subject: [PATCH 01/11] Work towards new frontend --- frontend/quasar.config.js | 7 +- frontend/src/boot/axios.js | 2 +- frontend/src/components/FormBrowser.vue | 170 +++++++ frontend/src/components/FormConfig.vue | 328 +++++++++++++ .../FormSubmissions.vue} | 14 +- frontend/src/components/StringListEditor.vue | 1 - frontend/src/pages/FormBrowser.vue | 434 ------------------ frontend/src/pages/FormHandler.vue | 89 ++++ frontend/src/router/routes.js | 8 +- 9 files changed, 599 insertions(+), 454 deletions(-) create mode 100644 frontend/src/components/FormBrowser.vue create mode 100644 frontend/src/components/FormConfig.vue rename frontend/src/{pages/FormResponses.vue => components/FormSubmissions.vue} (96%) delete mode 100644 frontend/src/pages/FormBrowser.vue create mode 100644 frontend/src/pages/FormHandler.vue diff --git a/frontend/quasar.config.js b/frontend/quasar.config.js index efe217e..dfaf64e 100644 --- a/frontend/quasar.config.js +++ b/frontend/quasar.config.js @@ -123,7 +123,12 @@ module.exports = configure(function (/* ctx */) { // animations: 'all', // --- includes all animations // https://v2.quasar.dev/options/animations - animations: [], + animations: [ + 'flipInX', + 'flipOutX', + 'fadeIn', + 'fadeOut', + ], // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles // sourceFiles: { diff --git a/frontend/src/boot/axios.js b/frontend/src/boot/axios.js index a9a65d5..6735c68 100644 --- a/frontend/src/boot/axios.js +++ b/frontend/src/boot/axios.js @@ -7,7 +7,7 @@ import axios from 'axios' // good idea to move this instance creation inside of the // "export default () => {}" function below (which runs individually // for each client) -const api = axios.create({ baseURL: 'https://forms.dckube.scilifelab.se/api/v1' }) +const api = axios.create({ baseURL: '/api/v1' }) export default boot(({ app }) => { // for use inside Vue files (Options API) through this.$axios and this.$api diff --git a/frontend/src/components/FormBrowser.vue b/frontend/src/components/FormBrowser.vue new file mode 100644 index 0000000..7c7fb74 --- /dev/null +++ b/frontend/src/components/FormBrowser.vue @@ -0,0 +1,170 @@ + + + diff --git a/frontend/src/components/FormConfig.vue b/frontend/src/components/FormConfig.vue new file mode 100644 index 0000000..0491165 --- /dev/null +++ b/frontend/src/components/FormConfig.vue @@ -0,0 +1,328 @@ + + + diff --git a/frontend/src/pages/FormResponses.vue b/frontend/src/components/FormSubmissions.vue similarity index 96% rename from frontend/src/pages/FormResponses.vue rename to frontend/src/components/FormSubmissions.vue index 1d136d5..c7e04ce 100644 --- a/frontend/src/pages/FormResponses.vue +++ b/frontend/src/components/FormSubmissions.vue @@ -1,15 +1,8 @@ diff --git a/frontend/src/pages/FormHandler.vue b/frontend/src/pages/FormHandler.vue new file mode 100644 index 0000000..3456268 --- /dev/null +++ b/frontend/src/pages/FormHandler.vue @@ -0,0 +1,89 @@ + + + diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js index 094a9a7..3342f6d 100644 --- a/frontend/src/router/routes.js +++ b/frontend/src/router/routes.js @@ -5,13 +5,7 @@ const routes = [ component: () => import('layouts/MainLayout.vue'), meta: { 'loginRequired': true }, children: [ - { path: '', name: "FormBrowser", component: () => import('pages/FormBrowser.vue')}, - { - path: 'responses/:identifier', - name: "FormResponses", - component: () => import('pages/FormResponses.vue'), - props: route => ({'identifier': route.params.identifier}) - } + { path: '', name: "FormHandler", component: () => import('pages/FormHandler.vue')}, ] }, From 1eb608dc3416117d5cebdb711a694e4b567b32ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20=C3=96stberg?= Date: Tue, 24 Jan 2023 12:55:18 +0100 Subject: [PATCH 02/11] Fix references to start page in the login page forwarding --- frontend/src/router/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js index b24cd31..d8df507 100644 --- a/frontend/src/router/index.js +++ b/frontend/src/router/index.js @@ -39,7 +39,7 @@ export default route(function (/* { store, ssrContext } */) { next() } else if (to.name === 'Login') - next({name: 'FormBrowser'}) + next({name: 'FormHandler'}) else next() }) @@ -53,7 +53,7 @@ export default route(function (/* { store, ssrContext } */) { next() } else if (to.name === 'Login') - next({name: 'FormBrowser'}) + next({name: 'FormHandler'}) else next() } From 8e1d39430a90578ae2ceb473e7ae44cfeb508551 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20=C3=96stberg?= Date: Wed, 25 Jan 2023 08:42:06 +0100 Subject: [PATCH 03/11] Move delete dialog to its own component --- frontend/src/components/DeleteDialog.vue | 62 ++++++++++++++++++++++++ frontend/src/components/FormConfig.vue | 50 ++----------------- 2 files changed, 67 insertions(+), 45 deletions(-) create mode 100644 frontend/src/components/DeleteDialog.vue diff --git a/frontend/src/components/DeleteDialog.vue b/frontend/src/components/DeleteDialog.vue new file mode 100644 index 0000000..0940a2d --- /dev/null +++ b/frontend/src/components/DeleteDialog.vue @@ -0,0 +1,62 @@ + + + diff --git a/frontend/src/components/FormConfig.vue b/frontend/src/components/FormConfig.vue index 0491165..1c1999d 100644 --- a/frontend/src/components/FormConfig.vue +++ b/frontend/src/components/FormConfig.vue @@ -162,51 +162,9 @@ - - - - - Are you sure you want to delete this form? - - - - - - - - - - - - - Are you sure you want to abandon your changes? - - - - - - - - + @@ -214,10 +172,12 @@ import { defineComponent } from 'vue' import StringListEditor from 'components/StringListEditor.vue' +import DeleteDialog from 'components/DeleteDialog.vue' export default defineComponent({ name: 'FormConfig', components: { + 'delete-dialog': DeleteDialog, 'str-list-editor': StringListEditor, }, From dbde053f42127f759ea4b3d7ef6c96ac70d63f3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20=C3=96stberg?= Date: Wed, 25 Jan 2023 09:28:38 +0100 Subject: [PATCH 04/11] Close dialog upon clicking delete --- frontend/src/components/DeleteDialog.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/DeleteDialog.vue b/frontend/src/components/DeleteDialog.vue index 0940a2d..d9ddc79 100644 --- a/frontend/src/components/DeleteDialog.vue +++ b/frontend/src/components/DeleteDialog.vue @@ -9,6 +9,7 @@ Date: Wed, 25 Jan 2023 09:29:13 +0100 Subject: [PATCH 05/11] Add confirmation dialog for deleting submissions --- frontend/src/components/FormSubmissions.vue | 28 ++++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/FormSubmissions.vue b/frontend/src/components/FormSubmissions.vue index c7e04ce..31ab28a 100644 --- a/frontend/src/components/FormSubmissions.vue +++ b/frontend/src/components/FormSubmissions.vue @@ -2,7 +2,7 @@
<form action="{{ urlInfo.submission_url }}" method="{{ urlInfo.method }}" accept-charset="utf-8"> @@ -72,7 +72,7 @@ color="red" icon="delete" flat - @click="deleteSubmission(props.row.id)" + @click="confirmDelete(props.row.id)" /> @@ -125,6 +125,11 @@ color="secondary" @click="jsonToClipboard(listingType === 'submission' ? rawSubmissions : questions)" /> + +
@@ -132,8 +137,15 @@ import { defineComponent } from 'vue' import { copyToClipboard } from 'quasar' +import DeleteDialog from 'components/DeleteDialog.vue' + export default defineComponent({ name: 'FormSubmissions', + + components: { + 'delete-dialog': DeleteDialog, + }, + props: { identifier: { type: String, @@ -194,6 +206,8 @@ export default defineComponent({ urlInfo: {}, listingType: 'submission', showCopyInfo: false, + toDelete: {}, + showDeleteWarning: false, } }, @@ -263,9 +277,15 @@ export default defineComponent({ .catch((err) => this.urlError = true) .finally(() => this.urlLoading = false); }, - deleteSubmission(subid) { + + confirmDelete(entry) { + this.toDelete = entry; + this.showDeleteWarning = true; + }, + + deleteSubmission() { this.$axios - .delete('/api/v1/form/' + this.identifier + '/submission/' + subid, + .delete('/api/v1/form/' + this.identifier + '/submission/' + this.toDelete, {headers: {'X-CSRFToken': this.$q.cookies.get('_csrf_token')}}) .then(() => this.getEntry()) .catch(() => console.log('Failed to delete entry ' + subid)) From eb0f009195a5c361973ee7733b07ccec92ed4077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20=C3=96stberg?= Date: Wed, 25 Jan 2023 09:32:15 +0100 Subject: [PATCH 06/11] Make space for delete button smaller --- frontend/src/components/FormSubmissions.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/FormSubmissions.vue b/frontend/src/components/FormSubmissions.vue index 31ab28a..8d360af 100644 --- a/frontend/src/components/FormSubmissions.vue +++ b/frontend/src/components/FormSubmissions.vue @@ -66,12 +66,14 @@ > {{ col.value }} - + From 331da683505ca2d046de786139abe8e2f352fc84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20=C3=96stberg?= Date: Wed, 25 Jan 2023 09:35:20 +0100 Subject: [PATCH 07/11] Redesign the save/delete buttons for form configuration; remove the template dialog --- frontend/src/components/FormConfig.vue | 52 +------------------------- 1 file changed, 2 insertions(+), 50 deletions(-) diff --git a/frontend/src/components/FormConfig.vue b/frontend/src/components/FormConfig.vue index 1c1999d..9f00f5e 100644 --- a/frontend/src/components/FormConfig.vue +++ b/frontend/src/components/FormConfig.vue @@ -112,32 +112,18 @@
- Save failed @@ -145,23 +131,6 @@ - - - - - - - - - @@ -266,23 +235,6 @@ export default defineComponent({ this.saving = false }) }, - - cancelEdit(entry) { - entry.expand = false; - delete this.editData[entry.key]; - }, - openTemplateDialog(entry, type) { - this.showEditTemplateDialog = true; - let prop = "email_" + type + "_template"; - this.currentEditTemplate = entry; - console.log(this.currentEditTemplate) - this.currentEditTemplateType = prop; - this.currentEditTemplateText = entry[prop]; - }, - saveTemplate() { - this.currentEditTemplate[this.currentEditTemplateType] = this.currentEditTemplateText; - this.showEditTemplateDialog = false; - }, }, }) From 4f0c5ae86dad1937489167848f9c6dc3c8103f0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20=C3=96stberg?= Date: Wed, 25 Jan 2023 09:50:11 +0100 Subject: [PATCH 08/11] Change attribute order --- frontend/src/components/DeleteDialog.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/DeleteDialog.vue b/frontend/src/components/DeleteDialog.vue index d9ddc79..2007384 100644 --- a/frontend/src/components/DeleteDialog.vue +++ b/frontend/src/components/DeleteDialog.vue @@ -8,8 +8,8 @@ Date: Wed, 25 Jan 2023 10:18:40 +0100 Subject: [PATCH 09/11] Split add button from form browser --- frontend/src/components/FormBrowser.vue | 31 ++++++++++++++----------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/FormBrowser.vue b/frontend/src/components/FormBrowser.vue index 7c7fb74..737d941 100644 --- a/frontend/src/components/FormBrowser.vue +++ b/frontend/src/components/FormBrowser.vue @@ -12,13 +12,6 @@ :no-results-label="filter + ' does not match any entries'" > @@ -66,6 +99,7 @@ import FormSubmissions from 'components/FormSubmissions.vue' export default defineComponent({ name: 'FormHandler', + components: { 'form-browser': FormBrowser, 'form-config': FormConfig, @@ -75,15 +109,28 @@ export default defineComponent({ data () { return { selected: '', - 'tab': 'config', + tab: 'config', + refreshNeeded: false, + showLeaveFormDialog: false, } }, methods: { + getLeaveConfirmation () { + this.showLeaveFormDialog = true + }, + leaveForm () { this.selected = '' this.tab = 'config' - } + }, + + addForm() { + this.$api + .post('/form', {}, {headers: {'X-CSRFToken': this.$q.cookies.get('_csrf_token')}}) + .then(() => this.refreshNeeded = true); + }, + } }) From 0cf5d7a05fae3c585b6df96333ecb97f8a0b506b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20=C3=96stberg?= Date: Wed, 25 Jan 2023 10:23:52 +0100 Subject: [PATCH 11/11] Remove unused animations --- frontend/quasar.config.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/quasar.config.js b/frontend/quasar.config.js index dfaf64e..8c164c8 100644 --- a/frontend/quasar.config.js +++ b/frontend/quasar.config.js @@ -124,8 +124,6 @@ module.exports = configure(function (/* ctx */) { // animations: 'all', // --- includes all animations // https://v2.quasar.dev/options/animations animations: [ - 'flipInX', - 'flipOutX', 'fadeIn', 'fadeOut', ],