fix: new service & work properties

src/components/04_product-service/FormServiceProperties.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import useOptionStore from 'src/stores/options';
+import { Attributes } from 'src/stores/product-service/types';
+import { Icon } from '@iconify/vue';
+
+const optionStore = useOptionStore();
+
+defineProps<{
+  readonly?: boolean;
+}>();
+
+const serviceAttributes = defineModel<Attributes>('serviceAttributes', {
+  required: true,
+});
+
+defineEmits<{
+  (e: 'serviceProperties'): void;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">
+    • {{ $t(`formDialogTitleInformation`) }}
+    <div>
+      <q-btn
+        :disable="readonly"
+        dense
+        unelevated
+        outline
+        class="q-mt-sm q-px-sm"
+        color="primary"
+        @click="$emit('serviceProperties')"
+      >
+        <Icon
+          icon="basil:settings-adjust-solid"
+          width="24px"
+          class="q-mr-sm"
+          style="color: var(--brand-1)"
+        />
+        {{ $t('properties') }}
+      </q-btn>
+    </div>
+  </div>
+
+  <div class="col-9 row">
+    <div
+      v-if="serviceAttributes.additional.length > 0"
+      class="col q-gutter-sm row items-center"
+    >
+      <div
+        v-for="(p, index) in serviceAttributes.additional"
+        :key="index"
+        class="bordered q-px-sm surface-3"
+        style="border-radius: 6px"
+      >
+        {{ optionStore.mapOption(p.fieldName ?? '') }}
+      </div>
+    </div>
+
+    <div v-else class="col flex items-center app-text-muted">
+      {{ $t('noProperties') }}
+    </div>
+  </div>
+</template>