feat: properties dialog

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

@@ -18,6 +18,10 @@ defineProps<{
   isType?: boolean;
   service?: boolean;
 }>();
+
+defineEmits<{
+  (e: 'serviceProperties'): void;
+}>();
 </script>
 
 <template>
@@ -105,6 +109,7 @@ defineProps<{
           round
           padding="0"
           style="background-color: var(--surface-tab)"
+          @click="$emit('serviceProperties')"
         >
           <Icon
             icon="basil:settings-adjust-solid"

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

@@ -0,0 +1,370 @@
+<script lang="ts" setup>
+import { Option } from 'src/stores/options/types';
+import { ref, watch } from 'vue';
+import { Attributes } from 'src/stores/product-service/types';
+import NoData from '../NoData.vue';
+
+const propertiesOption = defineModel<Option[]>('propertiesOption');
+const formServiceProperties = defineModel<Attributes>('formServiceProperties');
+
+const telMax = ref();
+const pointNum = ref();
+
+const selectAll = ref(false);
+
+const tel = ref(false);
+const comma = ref(false);
+const point = ref(false);
+
+const typeOption = ref([
+  {
+    label: 'Text',
+    value: 'string',
+    color: 'var(--pink-6-hsl)',
+    icon: 'mdi-alpha-t',
+  },
+  {
+    label: 'Number',
+    value: 'number',
+    color: 'var(--purple-11-hsl)',
+    icon: 'mdi-numeric',
+  },
+  {
+    label: 'Date',
+    value: 'date',
+    color: 'var(--green-9-hsl)',
+    icon: 'mdi-calendar-blank-outline',
+  },
+  {
+    label: 'List',
+    value: 'array',
+    color: 'var(--indigo-7-hsl)',
+    icon: 'mdi-code-array',
+  },
+]);
+
+watch(
+  () => selectAll.value,
+  () => {
+    if (selectAll.value) {
+    }
+  },
+);
+
+defineEmits<{
+  (e: 'addProperties'): void;
+}>();
+
+function addProperties() {
+  formServiceProperties.value?.additional.push({
+    fieldName: null,
+    type: null,
+  });
+}
+
+function deleteItem(index: number) {
+  if (!formServiceProperties.value) return;
+  if (index >= 0 && index < formServiceProperties.value.additional.length) {
+    formServiceProperties.value.additional.splice(index, 1);
+  }
+}
+
+function shouldShowItem(opt: Option) {
+  if (formServiceProperties.value) {
+    const additionalFieldNames = new Set(
+      formServiceProperties.value.additional.map((o) => o.fieldName),
+    );
+    return !!opt && !additionalFieldNames.has(opt.value);
+  }
+}
+</script>
+<template>
+  <div class="full-width column no-wrap" style="height: 30vw">
+    <div>
+      <q-btn
+        dense
+        unelevated
+        class="q-px-sm q-mb-lg"
+        label="Properties"
+        icon="mdi-plus"
+        color="primary"
+        @click="addProperties"
+      />
+    </div>
+
+    <div
+      v-if="formServiceProperties?.additional.length === 0"
+      class="bordered rounded surface-1 flex justify-center items-center col"
+    >
+      <NoData use-field />
+    </div>
+
+    <div
+      v-if="
+        formServiceProperties?.additional &&
+        formServiceProperties.additional.length > 0
+      "
+      class="q-gutter-y-md"
+    >
+      <div
+        v-for="(p, index) in formServiceProperties.additional"
+        :key="index"
+        class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
+        :class="
+          index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
+        "
+      >
+        <q-btn
+          id="btn-swap-work-product"
+          icon="mdi-arrow-up"
+          dense
+          flat
+          round
+          :disable="index === 0"
+          style="color: hsl(var(--text-mute-2))"
+        />
+        <q-btn
+          id="btn-swap-work-product"
+          icon="mdi-arrow-down"
+          dense
+          flat
+          round
+          :disable="index === formServiceProperties.additional.length - 1"
+          style="color: hsl(var(--text-mute-2))"
+        />
+
+        <q-avatar
+          size="md"
+          class="q-mx-lg"
+          style="background-color: var(--surface-3)"
+        >
+          {{ index + 1 }}
+        </q-avatar>
+
+        <!-- <q-select
+          dense
+          multiple
+          outlined
+          emit-value
+          map-options
+          hide-bottom-space
+          :display-value="
+            formServiceProperties.additional[index].fieldName ?? ''
+          "
+          class="col q-mr-md"
+          label="Properties Name"
+          :option-value="
+            (v) =>
+              p.fieldName !== null
+                ? {
+                    fieldName: v.value,
+                    type: null,
+                  }
+                : (p.fieldName = v.value)
+          "
+          :options="propertiesOption"
+          v-model="formServiceProperties.additional"
+        >
+          <template v-slot:before-options>
+            <q-item
+              class="row items-center col-12"
+              clickable
+              @click="selectAll = !selectAll"
+            >
+              <q-checkbox size="sm" class="q-pr-md" v-model="selectAll" />
+              เลือกทั้งหมด
+            </q-item>
+            <q-separator />
+          </template>
+
+          <template v-slot:option="scope">
+            <q-item
+              v-if="scope.opt"
+              v-bind="scope.itemProps"
+              class="row items-center col-12"
+            >
+              <q-checkbox
+                size="sm"
+                class="q-pr-md"
+                v-model="scope.selected"
+                v-bind="scope.itemProps"
+              />
+              {{ scope.opt.label }}
+            </q-item>
+          </template>
+        </q-select> -->
+
+        <q-select
+          dense
+          outlined
+          emit-value
+          map-options
+          hide-bottom-space
+          class="col q-mr-md"
+          label="Properties Name"
+          option-label="label"
+          option-value="value"
+          :options="propertiesOption"
+          v-model="p.fieldName"
+        >
+          <template v-slot:option="scope">
+            <q-item
+              v-if="scope.opt && shouldShowItem(scope.opt)"
+              v-bind="scope.itemProps"
+              class="row items-center col-12"
+            >
+              {{ scope.opt.label }}
+            </q-item>
+          </template>
+        </q-select>
+
+        <div class="col">
+          <q-select
+            dense
+            outlined
+            emit-value
+            map-options
+            hide-bottom-space
+            label="Type"
+            option-value="value"
+            :options="typeOption"
+            v-model="p.type"
+          >
+            <template v-slot:option="scope">
+              <q-item
+                v-if="scope.opt"
+                v-bind="scope.itemProps"
+                class="row items-center col-12"
+              >
+                <q-avatar
+                  size="sm"
+                  class="q-mr-md"
+                  :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+                >
+                  <q-icon
+                    size="20px"
+                    :name="scope.opt.icon"
+                    :style="`color: hsl(${scope.opt.color})`"
+                  />
+                </q-avatar>
+                {{ scope.opt.label }}
+              </q-item>
+            </template>
+
+            <template v-slot:selected-item="scope">
+              <div v-if="scope.opt" class="row items-center col-12">
+                <q-avatar
+                  size="xs"
+                  class="q-mr-sm"
+                  :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+                >
+                  <q-icon
+                    size="14px"
+                    :name="scope.opt.icon"
+                    :style="`color: hsl(${scope.opt.color})`"
+                  />
+                </q-avatar>
+                {{ scope.opt.label }}
+              </div>
+            </template>
+          </q-select>
+
+          <div
+            v-if="p.type === 'number'"
+            class="menu-border q-pt-md q-pb-sm"
+            style="margin-top: -20px"
+          >
+            <q-item>
+              <q-item-section class="column">
+                <span class="app-text-muted-2">เพิ่มเติม</span>
+                <div class="q-gutter-y-sm">
+                  <div class="row items-center">
+                    <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
+                      <q-checkbox v-model="tel" size="xs" />
+                      เบอร์โทร
+                    </div>
+                    <q-input
+                      v-model="telMax"
+                      class="col"
+                      dense
+                      outlined
+                      label="จำนวนหลัก"
+                    />
+                  </div>
+
+                  <div class="row items-center">
+                    <div class="col surface-3 rounded q-mr-sm q-py-xs">
+                      <q-checkbox v-model="comma" size="xs" />
+                      ใส่ comma
+                    </div>
+                  </div>
+
+                  <div class="row items-center">
+                    <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
+                      <q-checkbox v-model="point" size="xs" />
+                      ทศนิยม
+                    </div>
+                    <q-input
+                      v-model="pointNum"
+                      class="col"
+                      dense
+                      outlined
+                      label="ตำแหน่ง"
+                    />
+                  </div>
+                </div>
+              </q-item-section>
+            </q-item>
+          </div>
+
+          <div
+            v-if="p.type === 'array'"
+            class="menu-border q-pt-md q-pb-sm"
+            style="margin-top: -20px"
+          >
+            <q-item>
+              <q-item-section class="column">
+                <span class="app-text-muted-2">เพิ่มเติม</span>
+                <div class="row items-center justify-between">
+                  <div class="col surface-3 rounded q-mr-sm q-py-xs">
+                    <q-checkbox v-model="tel" size="xs" />
+                    เพิ่ม list
+                  </div>
+                  <div class="col-1">
+                    <q-btn
+                      dense
+                      flat
+                      icon="mdi-plus"
+                      class="bordered"
+                      text-color="grey"
+                    />
+                  </div>
+                </div>
+              </q-item-section>
+            </q-item>
+          </div>
+        </div>
+
+        <q-btn
+          id="btn-delete-work-product"
+          icon="mdi-trash-can-outline"
+          dense
+          flat
+          round
+          color="negative"
+          class="q-ml-sm"
+          @click="deleteItem(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.menu-border {
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  border-bottom-left-radius: var(--radius-2);
+  border-bottom-right-radius: var(--radius-2);
+}
+</style>

src/pages/04_product-service/MainPage.vue

@@ -15,6 +15,8 @@ import PriceDataComponent from 'src/components/04_product-service/PriceDataCompo
 import ProfileUpload from 'src/components/ProfileUpload.vue';
 import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
 import FormServiceWork from 'src/components/04_product-service/FormServiceWork.vue';
+import ServiceProperties from 'src/components/04_product-service/ServiceProperties.vue';
+import useOptionStore from 'src/stores/options';
 
 import { Status } from 'src/stores/types';
 import NoData from 'components/NoData.vue';
@@ -33,6 +35,7 @@ import {
 } from 'src/stores/product-service/types';
 
 const productServiceStore = useProductServiceStore();
+const optionStore = useOptionStore();
 
 const {
   fetchStatsProductType,
@@ -143,6 +146,7 @@ const serviceTab = [
   },
 ];
 const currentServiceTab = ref('serviceInformation');
+const propertiesDialog = ref<boolean>(false);
 
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
@@ -1025,7 +1029,7 @@ watch(currentStatus, async () => {
     :title="'สร้างสินค้าและบริการ'"
     no-footer
     no-app-box
-    :max-width="80"
+    max-width="80%"
   >
     <template #body>
       <div class="row q-gutter-xl q-pa-sm">
@@ -1172,6 +1176,7 @@ watch(currentStatus, async () => {
     </AppBox>
   </FormDialog>
 
+  <!-- add service -->
   <FormDialog
     no-address
     :title="$t('addService')"
@@ -1194,6 +1199,7 @@ watch(currentStatus, async () => {
         v-if="currentServiceTab === 'serviceInformation'"
         dense
         service
+        @service-properties="propertiesDialog = true"
       />
       <FormServiceWork
         v-if="currentServiceTab === 'workInformation'"
@@ -1202,6 +1208,25 @@ watch(currentStatus, async () => {
       />
     </template>
   </FormDialog>
+
+  <!-- service properties -->
+  <FormDialog
+    no-address
+    no-footer
+    no-app-box
+    width="75%"
+    height="1000px"
+    title="Properties"
+    v-model:modal="propertiesDialog"
+  >
+    <ServiceProperties
+      v-model:properties-option="
+        optionStore.globalOption.tha.servicePropertiesField
+      "
+      v-model:form-service-properties="formDataProductService.attributes"
+      @add-properties="console.log('')"
+    />
+  </FormDialog>
 </template>
 
 <style scoped>