From baf37698b37927f2e6acd39c4aa66742611fa6cf Mon Sep 17 00:00:00 2001 From: Jonathan Bernard Date: Sat, 14 Mar 2020 16:21:39 -0500 Subject: [PATCH] Issue 002: Delete functionality for measures. --- .../004-add-the-ability-to-delete-measures.md | 0 web/package-lock.json | 5 +++ web/package.json | 1 + web/src/router.ts | 6 +++ web/src/store-modules/measure.ts | 11 ++++++ web/src/views/DeleteMeasure.vue | 25 ++++++++++++ web/src/views/Measure.vue | 10 +++-- web/src/views/delete-measure.ts | 38 +++++++++++++++++++ web/src/views/measure.scss | 3 +- 9 files changed, 95 insertions(+), 4 deletions(-) rename doc/issues/{in-progress => done}/004-add-the-ability-to-delete-measures.md (100%) create mode 100644 web/src/views/DeleteMeasure.vue create mode 100644 web/src/views/delete-measure.ts diff --git a/doc/issues/in-progress/004-add-the-ability-to-delete-measures.md b/doc/issues/done/004-add-the-ability-to-delete-measures.md similarity index 100% rename from doc/issues/in-progress/004-add-the-ability-to-delete-measures.md rename to doc/issues/done/004-add-the-ability-to-delete-measures.md diff --git a/web/package-lock.json b/web/package-lock.json index 9a22bd6..89fbc99 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -9991,6 +9991,11 @@ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, + "lodash.omit": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz", + "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=" + }, "lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", diff --git a/web/package.json b/web/package.json index 1ac9772..601c373 100644 --- a/web/package.json +++ b/web/package.json @@ -27,6 +27,7 @@ "lodash.findindex": "^4.6.0", "lodash.keyby": "^4.6.0", "lodash.merge": "^4.6.2", + "lodash.omit": "^4.5.0", "moment": "^2.24.0", "register-service-worker": "^1.5.2", "vue": "^2.6.11", diff --git a/web/src/router.ts b/web/src/router.ts index 7648c42..2a06cba 100644 --- a/web/src/router.ts +++ b/web/src/router.ts @@ -7,6 +7,7 @@ import Measure from '@/views/Measure.vue'; import Measures from '@/views/Measures.vue'; import NewMeasure from '@/views/NewMeasure.vue'; import NewMeasurement from '@/views/NewMeasurement.vue'; +import DeleteMeasure from '@/views/DeleteMeasure.vue'; import NotFound from '@/views/NotFound.vue'; import QuickPanels from '@/views/QuickPanels.vue'; import UserAccount from '@/views/UserAccount.vue'; @@ -68,6 +69,11 @@ const router = new Router({ name: 'new-measurement', component: NewMeasurement }, + { + path: '/delete/measure/:slug', + name: 'delete-measure', + component: DeleteMeasure + }, { path: '*', name: 'not-found', diff --git a/web/src/store-modules/measure.ts b/web/src/store-modules/measure.ts index a8b69ee..236b024 100644 --- a/web/src/store-modules/measure.ts +++ b/web/src/store-modules/measure.ts @@ -8,6 +8,7 @@ import { } from 'vuex-module-decorators'; import assign from 'lodash.assign'; import keyBy from 'lodash.keyby'; +import omit from 'lodash.omit'; import { User, Measure, MeasureConfig } from '@/models'; import api from '@/services/pm-api-client'; @@ -35,7 +36,17 @@ export class MeasureStoreModule extends VuexModule { return newMeasure; } + @Action({ rawError: true }) + public async deleteMeasure(m: Measure) { + const delResponse = await api.deleteMeasure(m.slug); + this.context.commit('DELETE_MEASURE', m); + } + @Mutation private SET_MEASURE(measure: Measure) { this.measures = assign({}, this.measures, {[measure.slug]: measure}); } + + @Mutation private DELETE_MEASURE(measure: Measure) { + this.measures = assign({}, omit(this.measures, measure.slug)); + } } diff --git a/web/src/views/DeleteMeasure.vue b/web/src/views/DeleteMeasure.vue new file mode 100644 index 0000000..ca5fdda --- /dev/null +++ b/web/src/views/DeleteMeasure.vue @@ -0,0 +1,25 @@ + + diff --git a/web/src/views/Measure.vue b/web/src/views/Measure.vue index 89cf0b1..75742ac 100644 --- a/web/src/views/Measure.vue +++ b/web/src/views/Measure.vue @@ -5,8 +5,12 @@

{{measure.name}}

{{measure.description}}

- - Add Measurement + + + + + Add Measurement + @@ -17,4 +21,4 @@ - + diff --git a/web/src/views/delete-measure.ts b/web/src/views/delete-measure.ts new file mode 100644 index 0000000..2ae7e1a --- /dev/null +++ b/web/src/views/delete-measure.ts @@ -0,0 +1,38 @@ +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { Measure as MeasureModel, MeasureConfig } from '@/models'; +import { measureStore, measurementStore } from '@/store'; +import { logService } from '@/services/logging'; + +const logger = logService.getLogger('/views/delete-measure'); + +@Component({}) +export class DeleteMeasure extends Vue { + private waiting: boolean = false; + + private get measure(): MeasureModel | null { + return measureStore.measures[this.$route.params.slug] || null; + } + + private async mounted() { + if (!this.measure) { + await measureStore.fetchMeasure(this.$route.params.slug); + } + } + + private async deleteMeasure() { + if (this.measure) { + this.waiting = true; + try { + await measureStore.deleteMeasure(this.measure); + this.$router.push({ name: 'measures' }); + } catch (e) { + // TODO: show errors + logger.error('Unable to delete measure. \n\t ' + JSON.stringify(this.measure), e.stack); + } finally { + this.waiting = false; + } + } + } +} + +export default DeleteMeasure; diff --git a/web/src/views/measure.scss b/web/src/views/measure.scss index 5dd8468..462c19a 100644 --- a/web/src/views/measure.scss +++ b/web/src/views/measure.scss @@ -1,6 +1,7 @@ @import '~@/styles/vars'; -.header-action button { +.header-action .btn { + color: inherit; margin-left: auto; margin-right: 2rem; background-color: none;