feat: Several improvements for observations and timeseries

- Disable timeseries deletion if obs exist.
- Ensure correct year/timeseries is expanded in list after save.
- Add cancel button in timeseries form.
- Disable year modification if observations are already added.
- Pre-select crop, if there is only one available.
- In edit form, load crops for category of currently selected.

src/components/Observation.vue

@@ -24,14 +24,14 @@
   <div id="observation">
     <div class="mb-3">
       <router-link v-if="backToTimeSeries"
-                   :to="{name:'ObservationTimeSeriesList', params: {expandedId:this.paramObservationTimeSeries.observationTimeSeriesId}}"
+                   :to="{name:'ObservationTimeSeriesList', params: {paramExpandedId:this.paramObservationTimeSeries.observationTimeSeriesId}}"
                    class="vips-btn">
         {{ $t("back.label") }}
       </router-link>
       <router-link v-else class="vips-btn" to="/">{{ $t("back.label") }}</router-link>
     </div>
 
-    <div v-if="isPartOfTimeSeries" class="mt-3 mb-3">
+    <div v-if="this.observation.observationTimeSeries" class="mt-3 mb-3">
       <b>{{ $t("observation.for.observationTimeSeries.name") }} <i>{{ this.observation.observationTimeSeries.name }}</i>
         - <i>{{ this.observation.locationPointOfInterest.name }}</i></b>
     </div>
@@ -158,11 +158,10 @@
       </div>
 
       <div v-if="!observation.deleted" class="float-end">
-
         <a v-if="isDeleteBttnVisible" class="vips-btn danger" @click="callForRemoveObservation">{{ $t("delete.label") }}</a>
         <span v-else>
           <router-link v-if="backToTimeSeries"
-                       :to="{name:'ObservationTimeSeriesList', params: {expandedId:this.paramObservationTimeSeries.observationTimeSeriesId}}"
+                       :to="{name:'ObservationTimeSeriesList', params: {paramExpandedId:this.paramObservationTimeSeries.observationTimeSeriesId}}"
                        class="vips-btn danger">
             {{ $t("cancel.label") }}
           </router-link>
@@ -666,7 +665,7 @@ export default {
         this.$router.replace({
           path: '/observationTimeSeriesList',
           query: {
-            expandedId: this.paramObservationTimeSeries.observationTimeSeriesId
+            paramExpandedId: this.paramObservationTimeSeries.observationTimeSeriesId,
           }
         });
       } else {
@@ -808,8 +807,8 @@ export default {
       this.observationForStore.polygonService = this.observation.polygonService;
     }
     this.backToTimeSeries = this.paramObservationTimeSeries;
-    this.isPartOfTimeSeries = (this.observation.observationTimeSeries !== undefined && this.observation.observationTimeSeries !== null) || (this.paramObservationTimeSeries !== undefined);
-  },
+    this.isPartOfTimeSeries = this.observation.observationTimeSeries !== undefined && this.observation.observationTimeSeries !== null;
+    },
   beforeRouteEnter(to, from, next) {
     next(vm => {
       if (vm.$root.sharedState.uuid == "") {

src/components/ObservationList.vue

@@ -45,7 +45,7 @@
 						</div>
             <div class="col-4 d-flex align-items-center justify-content-end">
               <router-link v-if="obs.observationTimeSeries"
-                           :to="{name:'ObservationTimeSeriesList', params: {expandedId:obs.observationTimeSeries.observationTimeSeriesId}}">
+                           :to="{name:'ObservationTimeSeriesList', params: {paramExpandedId:obs.observationTimeSeries.observationTimeSeriesId}}">
                 <span class="badge badge-pill badge-info">Tidsserie</span>
               </router-link>
 							<router-link

src/components/ObservationTimeSeries.vue

@@ -22,7 +22,11 @@
 <template xmlns="http://www.w3.org/1999/html">
   <div id="observationTimeSeriesForm">
     <div class="mb-2">
-      <router-link class="vips-btn" to="/observationTimeSeriesList">{{ $t("back.label") }}</router-link>
+      <router-link :to="{name:'ObservationTimeSeriesList', params: {paramExpandedId: this.dataToSubmit.id, paramYear: this.paramYear}}"
+                   class="vips-btn">
+        {{ $t("back.label") }}
+      </router-link>
+
     </div>
 
     <div v-if="dataToSubmit.deleted">
@@ -30,7 +34,6 @@
         {{ $t("err.observationTimeSeries.remove.warn") }}
       </div>
     </div>
-
     <div class="form-floating mb-3">
       <select id="cropId" class="form-select" required
               v-model="dataToSubmit.cropId"
@@ -63,8 +66,7 @@
                                  v-on:visibilityObservationTimeSeriesAction="setVisibilityAndMasking"/>
 
     <div class="form-floating mb-3">
-      <select id="year" class="form-select" required
-              v-model="dataToSubmit.year">
+      <select id="year" class="form-select" required v-model="dataToSubmit.year" :disabled="observations.length > 0">
         <option v-for="year in formOptions.years" :value="year">{{ year }}</option>
       </select>
       <label for="year">Velg år</label>
@@ -81,8 +83,13 @@
     </div>
 
     <div class="form-group float-end" v-if="!dataToSubmit.deleted">
-      <a v-show="isDeleteButtonVisible" class="vips-btn danger"
+      <a v-if="isDeleteButtonVisible" class="vips-btn danger"
          v-on:click="callForRemoveObservationTimeSeries">{{ $t("delete.label") }}</a>
+      <router-link v-else
+                   :to="{name:'ObservationTimeSeriesList', params: {paramYear: this.dataToSubmit.year}}"
+                   class="vips-btn danger">
+        {{ $t("cancel.label") }}
+      </router-link>
       <a class="vips-btn" v-on:click="saveObservationTimeSeries">{{ $t("save.label") }}</a>
     </div>
     <sync ref="sync"/>
@@ -122,6 +129,7 @@ export default {
         description: undefined,
         deleted: false
       },
+      observations: [],
       isDeleteButtonVisible: true,
     }
   },
@@ -131,10 +139,16 @@ export default {
       if (!this.cropCategoryIsSelected()) {
         this.$router.push('/cropCategory');
       }
-      this.dataToSubmit.id = this.getNewObservationTimeSeriesId();
       this.formOptions.crops = this.loadCropsFromLocalStorage();
-      this.formOptions.pests = []
+      if (this.formOptions.crops.length === 1) {
+        let cropId = this.formOptions.crops[0].organismId
+        this.dataToSubmit.cropId = cropId;
+        this.formOptions.pests = this.loadPestsFromLocalStorageForCrop(cropId);
+      } else {
+        this.formOptions.pests = []
+      }
       this.formOptions.pois = this.loadUserPoisFromLocalStorage();
+      this.dataToSubmit.id = this.getNewObservationTimeSeriesId();
       this.isDeleteButtonVisible = false;
     },
 
@@ -155,9 +169,10 @@ export default {
       this.dataToSubmit.year = ots.year;
       this.dataToSubmit.name = ots.name;
       this.dataToSubmit.description = ots.description;
-      this.formOptions.crops = this.loadCropsFromLocalStorage();
+      this.formOptions.crops = this.loadCropsForCurrentlySelectedCrop(ots.cropOrganismId);
       this.formOptions.pests = this.loadPestsFromLocalStorageForCrop(ots.cropOrganismId)
       this.formOptions.pois = this.loadUserPoisFromLocalStorage();
+      this.observations = this.loadObservationsFromLocalStore(ots.observationTimeSeriesId);
 
       if (this.createClone) {
         this.dataToSubmit.id = null;
@@ -165,7 +180,6 @@ export default {
         this.isDeleteButtonVisible = false;
       }
     },
-
     cropCategoryIsSelected() {
       let localCropIdList = []
       let localCropIdStr = localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_ID_LIST);
@@ -174,27 +188,40 @@ export default {
       }
       return localCropIdList.length > 0
     },
-
-    loadCropsFromLocalStorage() {
-      let localCropCategoryId = localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_ID_LIST);
-      if (!localCropCategoryId) {
-        console.error("No selected local crop categories");
-        return []
+    loadCropsForCurrentlySelectedCrop(cropId) {
+      let lstCropCategories = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_CATEGORY));
+      let cropsForCategory = []
+      lstCropCategories.forEach(category => {
+        const cropIds = category.cropOrganismIds;
+        if (cropIds) {
+          if (cropIds.includes(cropId)) {
+            cropsForCategory = this.loadCropsFromLocalStorage(category.cropCategoryId);
+          }
+        }
+      });
+      return cropsForCategory;
+    },
+    loadCropsFromLocalStorage(cropCategoryId) {
+      const allAvailableCropCategories = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_CATEGORY));
+      let cropCategoriesToDisplay = []
+      if (!cropCategoryId) {
+        let localSelectedCropCategories = localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_ID_LIST);
+        if (localSelectedCropCategories !== undefined && localSelectedCropCategories !== null) {
+          console.info("localSelectedCropCategories", localSelectedCropCategories)
+          cropCategoriesToDisplay = localSelectedCropCategories.split(",").filter(cropCatId => cropCatId !== "");
+        }
+      } else {
+        cropCategoriesToDisplay.push(String(cropCategoryId));
       }
-      const selectedCropCategories = localCropCategoryId.split(",").filter(cropCatId => cropCatId !== "");
-      const jsonLocalCropCategoryList = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_CATEGORY));
-
       let cropIdList = [];
-      selectedCropCategories.forEach(selectedCropCategoryId => {
-        const jsonCropCategory = jsonLocalCropCategoryList.find(({cropCategoryId}) => cropCategoryId === JSON.parse(selectedCropCategoryId));
+      cropCategoriesToDisplay.forEach(selectedCropCategoryId => {
+        const jsonCropCategory = allAvailableCropCategories.find(({cropCategoryId: ccId}) => ccId === JSON.parse(selectedCropCategoryId));
         if (jsonCropCategory) {
           cropIdList.push(...jsonCropCategory.cropOrganismIds);
         }
       });
-
       let cropList = [];
       const lstCropList = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_LIST));
-
       cropIdList.forEach(cropId => {
         const jsonDetailCrop = lstCropList.find(({organismId}) => organismId === cropId);
         if (jsonDetailCrop) {
@@ -227,6 +254,19 @@ export default {
       }
       return jsonUserPoiList;
     },
+    loadObservationsFromLocalStore(observationTimeSeriesId) {
+      let observationsForTimeSeries = [];
+      const jsonLocalObservationList = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_OBSERVATION_LIST));
+      if (jsonLocalObservationList && jsonLocalObservationList.length > 0) {
+        jsonLocalObservationList.forEach(observation => {
+          let obsOts = observation.observationTimeSeries;
+          if (obsOts && obsOts.observationTimeSeriesId === observationTimeSeriesId) {
+            observationsForTimeSeries.push(observation);
+          }
+        });
+      }
+      return observationsForTimeSeries;
+    },
     setVisibilityAndMasking(paramPrivate, paramPolygonService) {
       this.dataToSubmit.locationIsPrivate = paramPrivate;
       this.dataToSubmit.polygonService = paramPolygonService;
@@ -244,7 +284,9 @@ export default {
       }
     },
     callForRemoveObservationTimeSeries() {
-      if (confirm(this.$i18n.t("err.observationTimeSeries.remove.msg"))) {
+      if (this.observations.length > 0) {
+        alert(this.$i18n.t("err.observationTimeSeries.remove.info"))
+      } else if (confirm(this.$i18n.t("err.observationTimeSeries.remove.msg"))) {
         if (this.observationTimeSeriesId) {
           if (this.observationTimeSeriesId < 0) {
             this.removeLocalObservationTimeSeries(this.observationTimeSeriesId);
@@ -288,8 +330,7 @@ export default {
     getObservationTimeSeriesFromStore(otsId) {
       if (otsId) {
         let localOtsList = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_OBSERVATION_TIME_SERIES_LIST));
-        let localOts = localOtsList.find(({observationTimeSeriesId}) => observationTimeSeriesId === otsId);
-        return localOts;
+        return localOtsList.find(({observationTimeSeriesId}) => observationTimeSeriesId === otsId);
       }
       return null;
     },
@@ -386,7 +427,12 @@ export default {
       }
       localStorage.setItem(CommonUtil.CONST_STORAGE_OBSERVATION_TIME_SERIES_LIST, JSON.stringify(localOtsList));
       this.$refs.sync.syncTwoWay();
-      this.$router.replace({path: '/observationTimeSeriesList'});
+      this.$router.replace({
+        path: '/observationTimeSeriesList',
+        query: {
+          paramYear: otsToSave.year
+        }
+      });
     },
   },
   mounted() {

src/components/ObservationTimeSeriesList.vue

@@ -25,18 +25,16 @@
         <button type="button" class="btn btn-primary">+</button>
       </router-link>
     </div>
-    <div>
+    <div v-if="!observationsExistForSelectedYear" class="alert alert-info" role="alert">
+      {{ $t("observationTimeSeriesList.alert.emptylist") }}
+    </div>
+    <div v-else class="bg-light">
       <div class="form-floating mb-3">
         <select id="selectedYear" class="form-select" v-model="selectedYear">
           <option v-for="year in sortedYears()" :value="year">{{ year}}</option>
         </select>
         <label for="selectedYear">Velg år</label>
       </div>
-    </div>
-    <div v-if="!observationsExistForSelectedYear" class="alert alert-info" role="alert">
-      {{ $t("observationTimeSeriesList.alert.emptylist") }}
-    </div>
-    <div v-else class="bg-light">
       <ul class="list-group list-group-flush bg-light" v-if="isInitialized">
         <li v-for="ots in sortedObservationTimeSeries()" class="list-group-item list-group-item-action bg-light">
           <a href="#"
@@ -47,11 +45,11 @@
              v-bind:key="ots.observationTimeSeriesId"
           >
             <div v-if="ots.isDeleted" class="row deleted">
-              {{ ots.year }} <b>{{ ots.name }}</b>
+              <b>{{ ots.name }}</b>
             </div>
             <div v-else class="row">
               <div class="col-7 d-flex align-items-center">
-                <b>{{ ots.year }} {{ ots.name }}</b>
+                <b>{{ ots.name }}</b>
               </div>
               <div class="col-5 d-flex align-items-center justify-content-end">
                   <span class="badge badge-pill badge-info">{{ getObservationCount(ots.observationTimeSeriesId) }}</span>
@@ -78,13 +76,14 @@
                 {{ obs.timeOfObservation | dateFormat }}<br/>{{ obs.observationHeading }}
               </router-link>
             </li>
-            <li>
-              <router-link :to="{name: 'Observation', params: {paramObservationTimeSeries: ots}}"
-                           class="list-group-item list-group-item-action bg-light">
-                <font-awesome-icon class="small-icon" :icon="['fas', 'square-plus']" /> {{ $t("observation.msg")}}
-              </router-link>
-            </li>
           </ul>
+          <div v-if="isRowExpanded(ots.observationTimeSeriesId)" class="ms-4 mt-2 mb-2">
+            <div v-if="ots.uploaded === false">{{ $t("observationTimeSeries.observation.add.not.available")}}</div>
+            <router-link v-else :to="{name: 'Observation', params: {paramObservationTimeSeries: ots}}"
+                         class="bg-light">
+              <font-awesome-icon class="small-icon" :icon="['fas', 'square-plus']" /> {{ $t("observation.msg")}}
+            </router-link>
+          </div>
         </li>
       </ul>
     </div>
@@ -100,7 +99,7 @@ import {DateTime} from 'luxon'
 
 export default {
   name: "ObservationTimeSeriesList",
-  props: ['expandedId'],
+  props: ['paramExpandedId', 'paramYear'],
   data() {
     return {
       isInitialized: false,
@@ -118,7 +117,6 @@ export default {
       return Object.keys(this.otsYearMap).map(Number).sort((a, b) => a - b);
     },
     sortedObservationTimeSeries() {
-      console.info("Sorted OTS for " + this.selectedYear, this.otsYearMap[this.selectedYear])
       return this.otsYearMap[this.selectedYear];
     },
     toggleExpandedRow(id) {
@@ -137,6 +135,13 @@ export default {
       }
       return 0;
     },
+    getObservationTimeSeriesFromStore(otsId) {
+      if (otsId) {
+        let localOtsList = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_OBSERVATION_TIME_SERIES_LIST));
+        return localOtsList.find(({observationTimeSeriesId}) => observationTimeSeriesId === parseInt(otsId));
+      }
+      return null;
+    },
     loadObservationTimeSeriesListFromLocalStore() {
       this.isInitialized = true;
       this.otsYearMap = {}
@@ -158,7 +163,7 @@ export default {
         });
         this.otsList = localOtsList;
       }
-      this.observationsExistForSelectedYear = this.otsYearMap[this.selectedYear].length > 0;
+      this.observationsExistForSelectedYear = this.otsYearMap.hasOwnProperty(this.selectedYear) && this.otsYearMap[this.selectedYear].length > 0;
     },
     addObservationTimeSeriesToMap(ots) {
       const year = parseInt(ots.year);
@@ -193,11 +198,22 @@ export default {
   ,
   mounted() {
     CommonUtil.setHeaderTitle(this.$i18n.t("observationTimeSeriesList.heading"));
-
-    if (this.$router.currentRoute.query.expandedId) {
-      this.currentlyExpandedId = this.$router.currentRoute.query.expandedId
+    if (this.$router.currentRoute.query.paramExpandedId) {
+      this.currentlyExpandedId = this.$router.currentRoute.query.paramExpandedId
+    } else {
+      this.currentlyExpandedId = this.paramExpandedId;
+    }
+    if(this.currentlyExpandedId > 0) {
+      let expandedOts = this.getObservationTimeSeriesFromStore(this.currentlyExpandedId);
+      if(expandedOts) {
+        this.selectedYear = expandedOts.year;
+      }
+    } else if(this.$router.currentRoute.query.paramYear) {
+      this.selectedYear = this.$router.currentRoute.query.paramYear;
+    } else if(this.paramYear) {
+      this.selectedYear = this.paramYear;
     } else {
-      this.currentlyExpandedId = this.expandedId;
+      this.selectedYear = new Date().getFullYear()
     }
 
     let strUUID = localStorage.getItem(CommonUtil.CONST_STORAGE_UUID);

src/locales/nb.json

@@ -3,8 +3,9 @@
   "observationTimeSeries.add": "Registrer tidsserie",
   "observationTimeSeries.edit": "Rediger tidsserie",
   "err.observationTimeSeries.header.empty": "Tidsseriebeskrivelse må være utfylt",
-  "err.observationTimeSeries.remove.warn": "Tidsserien og alle tilhørende observasjoner vil bli slettet",
-  "err.observationTimeSeries.remove.msg": "Tidsserien og alle tilhørende observasjoner vil bli slettet. Er du helt sikker?",
+  "err.observationTimeSeries.remove.info": "Du må slette alle tilhørende observasjoner før du kan slette tidsserien.",
+  "err.observationTimeSeries.remove.warn": "Tidsserien vil bli slettet",
+  "err.observationTimeSeries.remove.msg": "Tidsserien vil bli slettet. Er du helt sikker?",
   "observationTimeSeriesList.alert.emptylist": "Du har ingen registrerte tidsserier. For å registrere en ny, klikk på pluss-ikonet nede til høyre.",
   "observationTimeSeriesList.observation.single": "1 observasjon",
   "observationTimeSeries.map.label": "Velg plassering",
@@ -14,6 +15,7 @@
   "observationTimeSeries.selectpoi": "Velg et forhåndsdefinert sted",
   "observationTimeSeries.detail.name.placeholder": "Tittel",
   "observationTimeSeries.detail.description.placeholder": "Beskrivelse",
+  "observationTimeSeries.observation.add.not.available": "Observasjoner kan legges til så snart tidsserien er lagret til databasen. Forsøk igjen senere.",
   "observation.for.observationTimeSeries.name": "Observasjon for tidsserie",
   "observation.for.observationTimeSeries.location": "på lokasjon",
   "mapObservationTimeSeries.label.selectPOI": "Velg et sted",