feat: add basic form customer

src/pages/03_customer-management/components/FormBasicInfo.vue

@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { QSelect } from 'quasar';
+import { selectFilterOptionRefMod } from 'stores/utils';
+import { getRole } from 'src/services/keycloak';
+import { onMounted } from 'vue';
+
+defineProps<{
+  prefixId?: string;
+  outlined?: boolean;
+  readonly?: boolean;
+  saveEnabled?: boolean;
+  customerType?: 'CORP' | 'PERS';
+}>();
+
+const personName = defineModel<string>('personName', { required: true });
+const customerName = defineModel<string>('customerName', { required: true });
+const customerNameEN = defineModel<string>('customerNameEn', {
+  required: true,
+});
+const taxNo = defineModel<string | null>('taxNo');
+const registeredBranchId = defineModel<string>('registeredBranchId', {
+  required: true,
+});
+
+const branchOptions = defineModel<{ id: string; name: string }[]>(
+  'branchOptions',
+  { default: [] },
+);
+const filteredBranchOptions = ref<Record<string, unknown>[]>([]);
+
+let branchFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+onMounted(() => {
+  branchFilter = selectFilterOptionRefMod(
+    branchOptions,
+    filteredBranchOptions,
+    'name',
+  );
+});
+
+watch(
+  () => branchOptions.value,
+  () => {
+    branchFilter = selectFilterOptionRefMod(
+      branchOptions,
+      filteredBranchOptions,
+      'name',
+    );
+  },
+);
+</script>
+
+<template>
+  <div class="row q-col-gutter-md">
+    <div class="col-12 text-weight-bold text-body1 row items-center">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-office-building-outline"
+        style="background-color: var(--surface-3)"
+      />
+      <span>{{ $t('customer.form.group.basicInfo') }}</span>
+      <q-btn
+        type="submit"
+        dense
+        unelevated
+        color="primary"
+        :label="$t('save')"
+        @click="$emit('save')"
+        class="q-px-md q-ml-auto rounded"
+      />
+    </div>
+    <q-select
+      outlined
+      clearable
+      use-input
+      fill-input
+      emit-value
+      map-options
+      hide-selected
+      hide-bottom-space
+      dense
+      class="col-12 col-md-4"
+      option-value="id"
+      input-debounce="0"
+      option-label="name"
+      lazy-rules="ondemand"
+      v-model="registeredBranchId"
+      :readonly="readonly"
+      :options="filteredBranchOptions"
+      :hide-dropdown-icon="readonly"
+      :label="$t('registeredBranch')"
+      :for="`${prefixId}-input-source-nationality`"
+      :rules="[
+        (val) => {
+          const roles = getRole() || [];
+          return (
+            ['admin', 'system', 'head_of_admin'].some((v) =>
+              roles.includes(v),
+            ) ||
+            !!val ||
+            $t('form.error.required')
+          );
+        },
+      ]"
+      @filter="branchFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      hide-bottom-space
+      :label="$t('customer.form.customerName')"
+      v-model="customerName"
+      class="col-12 col-md-4"
+      :readonly="readonly"
+      :for="`${prefixId}-input-company-name`"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      :label="$t('customer.form.customerNameEN')"
+      v-model="customerNameEN"
+      :for="`${prefixId}-input-company-name-en`"
+      class="col-12 col-md-4"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      v-model="personName"
+      :label="$t('customer.form.personName')"
+      :for="`${prefixId}-input-person-name`"
+      :rules="[(v: string) => !!v || $t('form.error.required')]"
+      class="col-12 col-md-4"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      v-if="customerType === 'PERS'"
+      :readonly="readonly"
+      hide-bottom-space
+      :label="$t('customer.form.taxIdentificationNumber')"
+      v-model="taxNo"
+      :for="`${prefixId}-input-tax-no`"
+      class="col-12 col-md-4"
+    />
+  </div>
+</template>