Implement first draft of additional properties for ADHActivityPoi

databrowser/src/config/tourism/odhActivityPoi/odhActivityPoi.sharedView.ts

@@ -423,5 +423,21 @@ export const odhActivityPoiSharedView = ():
       ],
     },
     mappingCategory(),
+    {
+      name: 'Additional properties',
+      slug: 'additional-properties',
+      subcategories: [
+        {
+          name: '',
+          properties: [
+            {
+              title: '',
+              component: CellComponent.AdditionalPropertiesCell,
+              objectMapping: { additionalProperties: 'AdditionalProperties' },
+            },
+          ],
+        },
+      ],
+    },
   ],
 });

databrowser/src/domain/cellComponents/components/cells/additionalPropertiesCell/AdditionalPropertiesCell.vue

@@ -0,0 +1,73 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div v-if="editable" class="mt-2 flex flex-col gap-2">
+      <CheckboxCustom
+        v-for="({ label, value }, index) in propertyTypes"
+        :key="label"
+        :label="label"
+        :model-value="value"
+        @update:model-value="handleCheckboxChange(index)"
+      />
+    </div>
+
+    <AdditionalPropertiesWrapper
+      v-for="{ label, propertyName, componentName } in activePropertyTypes"
+      :key="propertyName"
+      :label="label"
+      :component="componentName"
+      :property-value="getPropertyValue(propertyName)"
+      :editable="editable"
+      @update="emitUpdate(propertyName, $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import CheckboxCustom from '../../../../../components/checkbox/CheckboxCustom.vue';
+import {
+  AdditionalProperties,
+  AdditionalPropertyName,
+  AdditionalPropertyType,
+} from './types';
+import { propertiesOptions } from './propertyOptions';
+import AdditionalPropertiesWrapper from './AdditionalPropertiesWrapper.vue';
+
+const props = withDefaults(
+  defineProps<{
+    additionalProperties?: Partial<AdditionalProperties>;
+    editable?: boolean;
+  }>(),
+  {
+    additionalProperties: () => ({}),
+    editable: false,
+  }
+);
+
+const propertyTypes = ref(propertiesOptions(props.additionalProperties));
+
+const activePropertyTypes = computed(() =>
+  propertyTypes.value.filter((s) => s.value === true)
+);
+
+const handleCheckboxChange = (index: number) => {
+  propertyTypes.value[index].value = !propertyTypes.value[index].value;
+};
+
+const getPropertyValue = <T = AdditionalPropertyType>(
+  propertyName: AdditionalPropertyName
+) => props.additionalProperties[propertyName] as T;
+
+const emit = defineEmits(['update']);
+
+const emitUpdate = (baseProp: keyof AdditionalProperties, value: any) => {
+  const newValue = { ...props.additionalProperties, [baseProp]: value };
+  emit('update', { prop: 'additionalProperties', value: newValue });
+};
+</script>

databrowser/src/domain/cellComponents/components/cells/additionalPropertiesCell/AdditionalPropertiesWrapper.vue

@@ -0,0 +1,48 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div>
+    <h2 class="text-xl font-bold text-black">{{ label }}</h2>
+
+    <EchargingDataCell
+      v-if="component === 'EchargingDataCell'"
+      :property-value="toType(propertyValue)"
+      :editable="editable"
+      @update="emit('update', $event)"
+    />
+
+    <ExampleDataCell
+      v-if="component === 'ExampleDataCell'"
+      :property-value="toType(propertyValue)"
+      :editable="editable"
+      @update="emit('update', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import EchargingDataCell from './EchargingDataCell.vue';
+import ExampleDataCell from './ExampleDataCell.vue';
+import {
+  AdditionalPropertyComponentName,
+  AdditionalPropertyType,
+} from './types';
+
+defineProps<{
+  label: string;
+  component: AdditionalPropertyComponentName;
+  propertyValue: AdditionalPropertyType;
+  editable: boolean;
+}>();
+
+const emit = defineEmits(['update']);
+
+// Dirty helper function to cast the property value to the correct type
+// If someone knows a better way to do this, please let me know
+const toType = <T = unknown>(propertyValue: AdditionalPropertyType) =>
+  propertyValue as T;
+</script>

databrowser/src/domain/cellComponents/components/cells/additionalPropertiesCell/AdditionalPropertySection.vue

@@ -0,0 +1,19 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div>
+    <h3 class="my-2 font-bold">{{ label }}</h3>
+    <ContentDivider class="my-2" />
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ContentDivider from '../../../../../components/content/ContentDivider.vue';
+
+defineProps<{ label: string }>();
+</script>

databrowser/src/domain/cellComponents/components/cells/additionalPropertiesCell/EchargingDataCell.vue

@@ -0,0 +1,131 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div>
+    <AdditionalPropertySection label="Primary Data (synced from mobility api)">
+      <SubCategoryItem title="State">
+        <SelectWithOptionsCell
+          :value="propertyValue.State"
+          :options="[
+            { label: 'unavailable', value: 'UNAVAILABLE' },
+            { label: 'active', value: 'ACTIVE' },
+            {
+              label: 'temporary unavailable',
+              value: 'TEMPORARYUNAVAILABLE',
+            },
+            { label: 'available', value: 'AVAILABLE' },
+            { label: 'unknown', value: 'UNKNOWN' },
+            { label: 'fault', value: 'FAULT' },
+            { label: 'planned', value: 'PLANNED' },
+          ]"
+          :editable="editable"
+          @update="emitUpdate('State', $event.value)"
+        />
+      </SubCategoryItem>
+      <SubCategoryItem title="Access type">
+        <SelectWithOptionsCell
+          :value="propertyValue.AccessType"
+          :options="[
+            { label: 'public', value: 'PUBLIC' },
+            { label: 'private', value: 'PRIVATE' },
+            {
+              label: 'private with public access',
+              value: 'PRIVATE_WITHPUBLICACCESS',
+            },
+          ]"
+          :editable="editable"
+          @update="emitUpdate('AccessType', $event.value)"
+        />
+      </SubCategoryItem>
+      <SubCategoryItem title="Public accessible">
+        <ToggleCell
+          :enabled="propertyValue.ChargingStationAccessible"
+          :editable="editable"
+          @update="emitUpdate('ChargingStationAccessible', $event.value)"
+        />
+      </SubCategoryItem>
+      <SubCategoryItem title="Access type info">
+        <DictionaryCell
+          :dictitems="propertyValue.AccessTypeInfo"
+          :editable="editable"
+          @update="emitUpdate('AccessTypeInfo', $event.value)"
+        />
+      </SubCategoryItem>
+      <SubCategoryItem title="Payment info">
+        <StringCell
+          :text="propertyValue.PaymentInfo"
+          :editable="editable"
+          @update="emitUpdate('PaymentInfo', $event.value)"
+        />
+      </SubCategoryItem>
+      <SubCategoryItem title="Charging plugs count">
+        <StringCell
+          :text="propertyValue.ChargingPlugCount"
+          :editable="editable"
+          @update="emitUpdate('ChargingPlugCount', $event.value)"
+        />
+      </SubCategoryItem>
+      <SubCategoryItem title="Charging plugs types">
+        <ArrayEditableCell
+          :items="propertyValue.ChargingCableType"
+          :editable="editable"
+          @update="emitUpdate('ChargingCableType', $event.value)"
+        />
+      </SubCategoryItem>
+    </AdditionalPropertySection>
+
+    <AdditionalPropertySection label="Survey Data">
+      <SubCategoryItem title="Survey Date">
+        <DateCell
+          :date="propertyValue.SurveyDate"
+          :editable="editable"
+          @update="emitUpdate('SurveyDate', $event.value)"
+        />
+      </SubCategoryItem>
+    </AdditionalPropertySection>
+
+    <AdditionalPropertySection label="Horizontal Carparking">
+      <SubCategoryItem title="Flat">
+        <ToggleCell
+          :enabled="propertyValue.CarparkingAreaInColumns"
+          :editable="editable"
+          @update="emitUpdate('CarparkingAreaInColumns', $event.value)"
+        />
+      </SubCategoryItem>
+    </AdditionalPropertySection>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SubCategoryItem from '../../../../datasets/ui/category/SubCategoryItem.vue';
+import ArrayEditableCell from '../arrayCell/ArrayEditableCell.vue';
+import DictionaryCell from '../dictionaryCell/DictionaryCell.vue';
+import SelectWithOptionsCell from '../selectWithOptionsCell/SelectWithOptionsCell.vue';
+import StringCell from '../stringCell/StringCell.vue';
+import ToggleCell from '../toggleCell/ToggleCell.vue';
+import { EchargingDataProperties } from './types';
+import AdditionalPropertySection from './AdditionalPropertySection.vue';
+import DateCell from '../dateCell/DateCell.vue';
+
+const props = withDefaults(
+  defineProps<{
+    propertyValue?: Partial<EchargingDataProperties>;
+    editable?: boolean;
+  }>(),
+  {
+    propertyValue: () => ({}),
+    editable: false,
+  }
+);
+
+const emit = defineEmits(['update']);
+
+const emitUpdate = (prop: keyof EchargingDataProperties, value: any) => {
+  const newValue = { ...props.propertyValue, [prop]: value };
+  emit('update', newValue);
+};
+</script>

databrowser/src/domain/cellComponents/components/cells/additionalPropertiesCell/ExampleDataCell.vue

@@ -0,0 +1,52 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div>
+    <AdditionalPropertySection label="Some example data">
+      <SubCategoryItem title="Prop1">
+        <StringCell
+          :text="propertyValue.prop1"
+          :editable="editable"
+          @update="emitUpdate('prop1', $event.value)"
+        />
+      </SubCategoryItem>
+      <SubCategoryItem title="Prop2">
+        <ToggleCell
+          :enabled="propertyValue.prop2"
+          :editable="editable"
+          @update="emitUpdate('prop2', $event.value)"
+        />
+      </SubCategoryItem>
+    </AdditionalPropertySection>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SubCategoryItem from '../../../../datasets/ui/category/SubCategoryItem.vue';
+import StringCell from '../stringCell/StringCell.vue';
+import ToggleCell from '../toggleCell/ToggleCell.vue';
+import { ExampleDataProperties } from './types';
+import AdditionalPropertySection from './AdditionalPropertySection.vue';
+
+const props = withDefaults(
+  defineProps<{
+    propertyValue?: Partial<ExampleDataProperties>;
+    editable?: boolean;
+  }>(),
+  {
+    propertyValue: () => ({}),
+    editable: false,
+  }
+);
+
+const emit = defineEmits(['update']);
+
+const emitUpdate = (prop: keyof ExampleDataProperties, value: any) => {
+  const newValue = { ...props.propertyValue, [prop]: value };
+  emit('update', newValue);
+};
+</script>

databrowser/src/domain/cellComponents/components/cells/additionalPropertiesCell/propertyOptions.ts

@@ -0,0 +1,32 @@
+// SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { SelectOption } from '../../../../../components/select/types';
+import {
+  AdditionalProperties,
+  AdditionalPropertyComponentName,
+  AdditionalPropertyName,
+} from './types';
+
+type AdditionalPropertiesOptions = SelectOption<boolean> & {
+  propertyName: AdditionalPropertyName;
+  componentName: AdditionalPropertyComponentName;
+};
+
+export const propertiesOptions = (
+  properties: Partial<AdditionalProperties>
+): AdditionalPropertiesOptions[] => [
+  {
+    label: 'Echarging data',
+    value: properties.EchargingDataProperties != null,
+    propertyName: 'EchargingDataProperties',
+    componentName: 'EchargingDataCell',
+  },
+  {
+    label: 'Example data',
+    value: properties.ExampleDataProperties != null,
+    propertyName: 'ExampleDataProperties',
+    componentName: 'ExampleDataCell',
+  },
+];