WIP: adds pages for device properties

unfortunately there is still a nasty bug that prevents the page of
beeing displayed after the edit button was pressed

pages/devices/_deviceId/properties.vue

@@ -69,6 +69,7 @@ export default class DevicePropertiesPage extends Vue {
     this.$api.devices.findRelatedDeviceProperties(this.deviceId).then((foundProperties) => {
       this.properties = foundProperties
       this.isLoading = false
+      this.openSelectedPanel()
     }).catch(() => {
       this.$store.commit('snackbar/setError', 'Failed to fetch custom fields')
       this.isLoading = false
@@ -93,6 +94,28 @@ export default class DevicePropertiesPage extends Vue {
     return !!this.$route.path.match(editUrl)
   }
 
+  getPropertyIdFromUrl (): string | undefined {
+    // eslint-disable-next-line no-useless-escape
+    const editUrl = '^\/devices\/' + this.deviceId + '\/properties\/([0-9]+)\/?.*$'
+    const matches = this.$route.path.match(editUrl)
+    if (!matches) {
+      return
+    }
+    return matches[1]
+  }
+
+  openSelectedPanel (): void {
+    const propertyId = this.getPropertyIdFromUrl()
+    if (!propertyId) {
+      return
+    }
+    const propertyIndex: number = this.properties.findIndex((prop: DeviceProperty) => prop.id === propertyId)
+    if (propertyIndex === -1) {
+      return
+    }
+    this.openedPanels = [propertyIndex]
+  }
+
   addProperty (): void {
   }
 

pages/devices/_deviceId/properties/_propertyId.vue

+<template>
+  <div class="mb-1" style="flex: 0 0 100%; align-self: flex-start;">
+    <NuxtChild
+      v-if="isEditModeForProperty"
+      v-model="property"
+    />
+    <DevicePropertyExpansionPanel
+      v-else
+      v-model="property"
+    >
+      <DevicePropertyInfo
+        v-model="property"
+        :compartments="compartments"
+        :sampling-medias="samplingMedias"
+        :properties="properties"
+        :units="units"
+        :measured-quantity-units="measuredQuantityUnits"
+      />
+    </DevicePropertyExpansionPanel>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'nuxt-property-decorator'
+
+import { DeviceProperty } from '@/models/DeviceProperty'
+import { Compartment } from '@/models/Compartment'
+import { Property } from '@/models/Property'
+import { SamplingMedia } from '@/models/SamplingMedia'
+import { Unit } from '@/models/Unit'
+import { MeasuredQuantityUnit } from '@/models/MeasuredQuantityUnit'
+
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
+import DevicePropertyExpansionPanel from '@/components/DevicePropertyExpansionPanel.vue'
+import DevicePropertyInfo from '@/components/DevicePropertyInfo.vue'
+
+@Component({
+  components: {
+    DevicePropertyExpansionPanel,
+    DevicePropertyInfo,
+    ProgressIndicator
+  }
+})
+export default class DevicePropertyIdPage extends Vue {
+  private compartments: Compartment[] = []
+  private samplingMedias: SamplingMedia[] = []
+  private properties: Property[] = []
+  private units: Unit[] = []
+  private measuredQuantityUnits: MeasuredQuantityUnit[] = []
+
+  @Prop({
+    required: true,
+    type: Object
+  })
+  readonly value!: DeviceProperty
+
+  mounted () {
+    this.$api.compartments.findAllPaginated().then((foundCompartments) => {
+      this.compartments = foundCompartments
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of compartments failed')
+    })
+    this.$api.samplingMedia.findAllPaginated().then((foundSamplingMedias) => {
+      this.samplingMedias = foundSamplingMedias
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of sampling medias failed')
+    })
+    this.$api.properties.findAllPaginated().then((foundProperties) => {
+      this.properties = foundProperties
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of properties failed')
+    })
+    this.$api.units.findAllPaginated().then((foundUnits) => {
+      this.units = foundUnits
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of units failed')
+    })
+    this.$api.measuredQuantityUnits.findAllPaginated().then((foundUnits) => {
+      this.measuredQuantityUnits = foundUnits
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of measuredquantityunits failed')
+    })
+  }
+
+  get property (): DeviceProperty {
+    return this.value
+  }
+
+  set property (value: DeviceProperty) {
+    this.$emit('input', value)
+  }
+
+  get deviceId (): string {
+    return this.$route.params.deviceId
+  }
+
+  get isEditModeForProperty () {
+    return this.$route.path === '/devices/' + this.deviceId + '/properties/' + this.value.id + '/edit'
+  }
+}
+</script>

pages/devices/_deviceId/properties/_propertyId/edit.vue

+<template>
+  <DevicePropertyExpansionPanel
+    v-model="valueCopy"
+  >
+    <template #actions>
+      <v-btn
+        v-if="isLoggedIn"
+        text
+        small
+        nuxt
+        :to="'/devices/' + deviceId + '/properties'"
+      >
+        Cancel
+      </v-btn>
+      <v-btn
+        v-if="isLoggedIn"
+        color="green"
+        small
+        @click="save()"
+      >
+        Apply
+      </v-btn>
+    </template>
+    <DevicePropertyForm
+      v-model="valueCopy"
+      :compartments="compartments"
+      :sampling-medias="samplingMedias"
+      :properties="properties"
+      :units="units"
+      :measured-quantity-units="measuredQuantityUnits"
+    />
+  </DevicePropertyExpansionPanel>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'nuxt-property-decorator'
+
+import { DeviceProperty } from '@/models/DeviceProperty'
+import { Compartment } from '@/models/Compartment'
+import { Property } from '@/models/Property'
+import { SamplingMedia } from '@/models/SamplingMedia'
+import { Unit } from '@/models/Unit'
+import { MeasuredQuantityUnit } from '@/models/MeasuredQuantityUnit'
+
+import DevicePropertyExpansionPanel from '@/components/DevicePropertyExpansionPanel.vue'
+import DevicePropertyForm from '@/components/DevicePropertyForm.vue'
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
+
+@Component({
+  components: {
+    DevicePropertyExpansionPanel,
+    DevicePropertyForm,
+    ProgressIndicator
+  }
+})
+export default class DeviceCustomFieldsShowPage extends Vue {
+  private isSaving: boolean = false
+  private valueCopy: DeviceProperty = new DeviceProperty()
+
+  private compartments: Compartment[] = []
+  private samplingMedias: SamplingMedia[] = []
+  private properties: Property[] = []
+  private units: Unit[] = []
+  private measuredQuantityUnits: MeasuredQuantityUnit[] = []
+
+  @Prop({
+    required: true,
+    type: Object
+  })
+  readonly value!: DeviceProperty
+
+  created () {
+    this.valueCopy = DeviceProperty.createFromObject(this.value)
+  }
+
+  mounted () {
+    this.$api.compartments.findAllPaginated().then((foundCompartments) => {
+      this.compartments = foundCompartments
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of compartments failed')
+    })
+    this.$api.samplingMedia.findAllPaginated().then((foundSamplingMedias) => {
+      this.samplingMedias = foundSamplingMedias
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of sampling medias failed')
+    })
+    this.$api.properties.findAllPaginated().then((foundProperties) => {
+      this.properties = foundProperties
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of properties failed')
+    })
+    this.$api.units.findAllPaginated().then((foundUnits) => {
+      this.units = foundUnits
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of units failed')
+    })
+    this.$api.measuredQuantityUnits.findAllPaginated().then((foundUnits) => {
+      this.measuredQuantityUnits = foundUnits
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of measuredquantityunits failed')
+    });
+    //(this.$refs.devicePropertyForm as Vue & { focus: () => void}).focus()
+  }
+
+  get deviceId (): string {
+    return this.$route.params.deviceId
+  }
+
+  get isLoggedIn (): boolean {
+    return this.$store.getters['oidc/isAuthenticated']
+  }
+
+  save (): void {
+  }
+
+  @Watch('value', { immediate: true, deep: true })
+  // @ts-ignore
+  onValueChanged (val: DeviceProperty) {
+    this.valueCopy = DeviceProperty.createFromObject(val)
+  }
+}
+</script>

pages/devices/_deviceId/properties/index.vue

@@ -59,28 +59,45 @@
         </v-list>
       </v-menu>
     </template>
-    <template>
-      <em>TODO:</em> <tt>DeviceProperty</tt> component for view mode, <tt>DevicePropertyForm</tt> for edit mode
-    </template>
+    <DevicePropertyInfo
+      v-model="value"
+      :compartments="compartments"
+      :sampling-medias="samplingMedias"
+      :properties="properties"
+      :units="units"
+      :measured-quantity-units="measuredQuantityUnits"
+    />
   </DevicePropertyExpansionPanel>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'nuxt-property-decorator'
 import { DeviceProperty } from '@/models/DeviceProperty'
+import { Compartment } from '@/models/Compartment'
+import { Property } from '@/models/Property'
+import { SamplingMedia } from '@/models/SamplingMedia'
+import { Unit } from '@/models/Unit'
+import { MeasuredQuantityUnit } from '@/models/MeasuredQuantityUnit'
 
 import ProgressIndicator from '@/components/ProgressIndicator.vue'
 import DevicePropertyExpansionPanel from '@/components/DevicePropertyExpansionPanel.vue'
+import DevicePropertyInfo from '@/components/DevicePropertyInfo.vue'
 
 @Component({
   components: {
     DevicePropertyExpansionPanel,
+    DevicePropertyInfo,
     ProgressIndicator
   }
 })
 export default class DevicePropertiesShowPage extends Vue {
   private isLoading = false
   private isSaving = false
+  private compartments: Compartment[] = []
+  private samplingMedias: SamplingMedia[] = []
+  private properties: Property[] = []
+  private units: Unit[] = []
+  private measuredQuantityUnits: MeasuredQuantityUnit[] = []
 
   /**
    * a DeviceProperty
@@ -93,6 +110,31 @@ export default class DevicePropertiesShowPage extends Vue {
   readonly value!: DeviceProperty
 
   mounted () {
+    this.$api.compartments.findAllPaginated().then((foundCompartments) => {
+      this.compartments = foundCompartments
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of compartments failed')
+    })
+    this.$api.samplingMedia.findAllPaginated().then((foundSamplingMedias) => {
+      this.samplingMedias = foundSamplingMedias
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of sampling medias failed')
+    })
+    this.$api.properties.findAllPaginated().then((foundProperties) => {
+      this.properties = foundProperties
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of properties failed')
+    })
+    this.$api.units.findAllPaginated().then((foundUnits) => {
+      this.units = foundUnits
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of units failed')
+    })
+    this.$api.measuredQuantityUnits.findAllPaginated().then((foundUnits) => {
+      this.measuredQuantityUnits = foundUnits
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of measuredquantityunits failed')
+    })
   }
 
   get isInProgress (): boolean {