From 9e744b98a928f186094819c7ba85277e8f120dc7 Mon Sep 17 00:00:00 2001
From: Marc Hanisch <mhanisch@gfz-potsdam.de>
Date: Mon, 15 Mar 2021 14:56:00 +0100
Subject: [PATCH] passes CV entities as component props
---
pages/devices/_deviceId/properties.vue | 69 ++++++++++++--
.../_deviceId/properties/_propertyId.vue | 91 ++++++++++++-------
.../_deviceId/properties/_propertyId/edit.vue | 86 +++++++++++-------
pages/devices/_deviceId/properties/index.vue | 85 +++++++++++------
4 files changed, 230 insertions(+), 101 deletions(-)
diff --git a/pages/devices/_deviceId/properties.vue b/pages/devices/_deviceId/properties.vue
index 00a14c57e..75b09a092 100644
--- a/pages/devices/_deviceId/properties.vue
+++ b/pages/devices/_deviceId/properties.vue
@@ -21,17 +21,22 @@
multiple
>
<template
- v-for="(field, index) in properties"
+ v-for="(field, index) in deviceProperties"
>
<NuxtChild
:key="'property-' + index"
- v-model="properties[index]"
+ v-model="deviceProperties[index]"
+ :compartments="compartments"
+ :sampling-medias="samplingMedias"
+ :properties="properties"
+ :units="units"
+ :measured-quantity-units="measuredQuantityUnits"
@delete="deleteProperty"
/>
</template>
</v-expansion-panels>
<v-card-actions
- v-if="properties.length > 3"
+ v-if="deviceProperties.length > 3"
>
<v-spacer />
<v-btn
@@ -48,8 +53,13 @@
</template>
<script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
+import { Component, Vue, 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 ProgressIndicator from '@/components/ProgressIndicator.vue'
@@ -60,20 +70,51 @@ import ProgressIndicator from '@/components/ProgressIndicator.vue'
})
export default class DevicePropertiesPage extends Vue {
private openedPanels: number[] = []
- private properties: DeviceProperty[] = []
+ private deviceProperties: DeviceProperty[] = []
private isLoading = false
private isSaving = false
+ private compartments: Compartment[] = []
+ private samplingMedias: SamplingMedia[] = []
+ private properties: Property[] = []
+ private units: Unit[] = []
+ private measuredQuantityUnits: MeasuredQuantityUnit[] = []
+
mounted () {
this.isLoading = true
this.$api.devices.findRelatedDeviceProperties(this.deviceId).then((foundProperties) => {
- this.properties = foundProperties
+ this.deviceProperties = foundProperties
this.isLoading = false
this.openSelectedPanel()
}).catch(() => {
- this.$store.commit('snackbar/setError', 'Failed to fetch custom fields')
+ this.$store.commit('snackbar/setError', 'Failed to fetch properties')
this.isLoading = false
})
+ 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 {
@@ -106,14 +147,17 @@ export default class DevicePropertiesPage extends Vue {
openSelectedPanel (): void {
const propertyId = this.getPropertyIdFromUrl()
+ console.log('propertyId by URL is', propertyId)
if (!propertyId) {
+ Vue.set(this, 'openedPanels', [])
return
}
- const propertyIndex: number = this.properties.findIndex((prop: DeviceProperty) => prop.id === propertyId)
+ const propertyIndex: number = this.deviceProperties.findIndex((prop: DeviceProperty) => prop.id === propertyId)
+ console.log('propertyIndex is', propertyIndex)
if (propertyIndex === -1) {
return
}
- this.openedPanels = [propertyIndex]
+ Vue.set(this, 'openedPanels', [propertyIndex])
}
addProperty (): void {
@@ -121,5 +165,12 @@ export default class DevicePropertiesPage extends Vue {
deleteProperty (property: DeviceProperty) {
}
+
+ @Watch('$route', { immediate: true, deep: true })
+ // @ts-ignore
+ onRouteChanged () {
+ this.openSelectedPanel()
+ console.log('route changed', this.openedPanels)
+ }
}
</script>
diff --git a/pages/devices/_deviceId/properties/_propertyId.vue b/pages/devices/_deviceId/properties/_propertyId.vue
index 34d2d8867..8979294f7 100644
--- a/pages/devices/_deviceId/properties/_propertyId.vue
+++ b/pages/devices/_deviceId/properties/_propertyId.vue
@@ -3,6 +3,11 @@
<NuxtChild
v-if="isEditModeForProperty"
v-model="property"
+ :compartments="compartments"
+ :sampling-medias="samplingMedias"
+ :properties="properties"
+ :units="units"
+ :measured-quantity-units="measuredQuantityUnits"
/>
<DevicePropertyExpansionPanel
v-else
@@ -42,44 +47,68 @@ import DevicePropertyInfo from '@/components/DevicePropertyInfo.vue'
}
})
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
+ /**
+ * a list of compartments
+ */
+ @Prop({
+ default: () => [] as Compartment[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly compartments!: Compartment[]
+
+ /**
+ * a list of samplingMedias
+ */
+ @Prop({
+ default: () => [] as SamplingMedia[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly samplingMedias!: SamplingMedia[]
+
+ /**
+ * a list of properties
+ */
+ @Prop({
+ default: () => [] as Property[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly properties!: Property[]
+
+ /**
+ * a list of units
+ */
+ @Prop({
+ default: () => [] as Unit[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly units!: Unit[]
+
+ /**
+ * a list of measuredQuantityUnits
+ */
+ @Prop({
+ default: () => [] as MeasuredQuantityUnit[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
+
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 {
diff --git a/pages/devices/_deviceId/properties/_propertyId/edit.vue b/pages/devices/_deviceId/properties/_propertyId/edit.vue
index 68371784f..eeceb4413 100644
--- a/pages/devices/_deviceId/properties/_propertyId/edit.vue
+++ b/pages/devices/_deviceId/properties/_propertyId/edit.vue
@@ -57,48 +57,72 @@ 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
+ /**
+ * a list of compartments
+ */
+ @Prop({
+ default: () => [] as Compartment[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly compartments!: Compartment[]
+
+ /**
+ * a list of samplingMedias
+ */
+ @Prop({
+ default: () => [] as SamplingMedia[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly samplingMedias!: SamplingMedia[]
+
+ /**
+ * a list of properties
+ */
+ @Prop({
+ default: () => [] as Property[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly properties!: Property[]
+
+ /**
+ * a list of units
+ */
+ @Prop({
+ default: () => [] as Unit[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly units!: Unit[]
+
+ /**
+ * a list of measuredQuantityUnits
+ */
+ @Prop({
+ default: () => [] as MeasuredQuantityUnit[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
+
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()
}
diff --git a/pages/devices/_deviceId/properties/index.vue b/pages/devices/_deviceId/properties/index.vue
index cf34b1f69..14fe2e0a4 100644
--- a/pages/devices/_deviceId/properties/index.vue
+++ b/pages/devices/_deviceId/properties/index.vue
@@ -93,11 +93,6 @@ import DevicePropertyInfo from '@/components/DevicePropertyInfo.vue'
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
@@ -109,32 +104,62 @@ export default class DevicePropertiesShowPage extends Vue {
// @ts-ignore
readonly value!: DeviceProperty
+ /**
+ * a list of compartments
+ */
+ @Prop({
+ default: () => [] as Compartment[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly compartments!: Compartment[]
+
+ /**
+ * a list of samplingMedias
+ */
+ @Prop({
+ default: () => [] as SamplingMedia[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly samplingMedias!: SamplingMedia[]
+
+ /**
+ * a list of properties
+ */
+ @Prop({
+ default: () => [] as Property[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly properties!: Property[]
+
+ /**
+ * a list of units
+ */
+ @Prop({
+ default: () => [] as Unit[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly units!: Unit[]
+
+ /**
+ * a list of measuredQuantityUnits
+ */
+ @Prop({
+ default: () => [] as MeasuredQuantityUnit[],
+ required: false,
+ type: Array
+ })
+ // @ts-ignore
+ readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
+
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 {
--
GitLab