Merge pull request #311 from ANN-RADAR/feat/copy-laboratory

Feat/copy laboratory
ANN-RADAR · Oct 11, 2022 · 006bf62 · 006bf62
2 parents 5ec953d + 174dcc1
commit 006bf62
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 16 deletions.
diff --git a/src/components/laboratories-edit.vue → src/components/laboratories-form.vue b/src/components/laboratories-edit.vue → src/components/laboratories-form.vue
@@ -285,6 +285,7 @@
       </v-card-text>
       <v-card-actions>
         <v-btn type="submit" form="laboratories-form">{{ $t('save') }}</v-btn>
+        <v-btn v-if="laboratoryId" @click="createCopy">{{ $t('copy') }}</v-btn>
       </v-card-actions>
     </v-card>
   </div>
@@ -294,7 +295,6 @@
 import {
   Laboratory,
   LaboratoryExperimentalGovernance,
-  LaboratoryId,
   LaboratorySector,
   LaboratoryStakeholderCategory,
   LaboratoryStakeholderType,
@@ -354,6 +354,14 @@ export default Vue.extend({
       type: String,
       required: false
     },
+    copiedLaboratoryId: {
+      type: String,
+      required: false
+    },
+    basePath: {
+      type: String,
+      required: false
+    },
     returnTo: {
       type: String,
       required: true
@@ -381,19 +389,31 @@ export default Vue.extend({
   computed: {
     ...(mapState as MapStateToComputed)('root', ['laboratories']),
     laboratory(): Laboratory | null {
-      return (
-        (this.laboratoryId && this.laboratories[this.laboratoryId]) || null
-      );
+      const id = this.laboratoryId || this.copiedLaboratoryId || null;
+      const lab = (id && this.laboratories[id]) || null;
+
+      if (lab && this.copiedLaboratoryId) {
+        // Remove location information of copied laboratory
+        lab.location = '';
+      }
+
+      return lab;
     }
   },
   watch: {
-    laboratoryId(newLaboratoryId: LaboratoryId) {
-      if (newLaboratoryId && !this.laboratories[newLaboratoryId]) {
+    laboratory(newLaboratory) {
+      if (newLaboratory) {
+        // Fill form with laboratory data
+        this.updateLaboratoryData(newLaboratory);
+      } else if (this.laboratoryId) {
+        // Return to laboratories list if there's no laboratory with the given id found
         this.$router.push(this.returnTo);
-      } else {
-        this.updateLaboratoryData(this.laboratories[newLaboratoryId]);
       }
     },
+    $route() {
+      // Reset drawing source on route change
+      this.source.clear();
+    },
     addCustomSector(newAddCustomSector: boolean) {
       if (!newAddCustomSector) {
         this.customSector = '';
@@ -567,6 +587,9 @@ export default Vue.extend({
       if (category !== 'other') {
         this.customStakeholderCategory[index] = '';
       }
+    },
+    createCopy() {
+      this.$router.push(`${this.basePath}/copy/${this.laboratoryId}`);
     }
   },
   created() {
@@ -582,11 +605,6 @@ export default Vue.extend({
     this.source.on('clear', () => {
       this.hasFeature = false;
     });
-
-    // Set laboratory data for the current route
-    if (this.laboratory) {
-      this.updateLaboratoryData(this.laboratory);
-    }
   },
   destroyed() {
     // Reset drawing source

diff --git a/src/components/map-component.vue b/src/components/map-component.vue
@@ -277,6 +277,9 @@ export default Vue.extend({
     highlightedFeatureIds() {
       this.handleAdminAreaSelectionAndHighlighting();
     },
+    $route() {
+      this.updateLaboratoriesFeatures();
+    },
     laboratories() {
       this.updateLaboratoriesFeatures();
     },

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -46,6 +46,7 @@
   "cancel": "Cancel",
   "save": "Save",
   "create": "Create",
+  "copy": "Create a Copy",
   "saving": "Saving...",
   "loading": "Loading...",
   "notAvailable": "n/a",

diff --git a/src/router.ts b/src/router.ts
@@ -6,7 +6,7 @@ import i18n from './plugins/i18n';
 import store from './store';
 
 import Laboratories from './views/real-laboratories.vue';
-import EditLaboratory from './components/laboratories-edit.vue';
+import LaboratoryForm from './components/laboratories-form.vue';
 import ListLaboratories from './components/laboratories-list.vue';
 import Category from './views/category-container.vue';
 import PotentialInspectorTable from './components/potential-inspector-table.vue';
@@ -48,20 +48,31 @@ const routes = [
       },
       {
         path: 'new',
-        component: EditLaboratory,
+        component: LaboratoryForm,
         name: 'Add Urban Testbed',
         props: (route: Route) => ({
           laboratoryType: route.params.laboratoryType,
           returnTo: `/urban-testbeds/${route.params.laboratoryType}/list`
         })
       },
+      {
+        path: 'copy/:copiedLaboratoryId',
+        component: LaboratoryForm,
+        name: 'Copy Urban Testbed',
+        props: (route: Route) => ({
+          laboratoryType: route.params.laboratoryType,
+          copiedLaboratoryId: route.params.copiedLaboratoryId,
+          returnTo: `/urban-testbeds/${route.params.laboratoryType}/list`
+        })
+      },
       {
         path: ':laboratoryId',
-        component: EditLaboratory,
+        component: LaboratoryForm,
         name: 'Edit Urban Testbed',
         props: (route: Route) => ({
           laboratoryType: route.params.laboratoryType,
           laboratoryId: route.params.laboratoryId,
+          basePath: `/urban-testbeds/${route.params.laboratoryType}`,
           returnTo: `/urban-testbeds/${route.params.laboratoryType}/list`
         })
       }