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

<script setup lang="ts">
import { Icon } from '@iconify/vue';

const remark = defineModel<string>('remark');
const detail = defineModel<string>('detail');
const name = defineModel<string>('name');
const code = defineModel<string>('code');

const serviceCode = defineModel<string>('serviceCode');
const serviceName = defineModel<string>('serviceName');
const serviceDescription = defineModel<string>('serviceDescription');

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  isType?: boolean;
  service?: boolean;
}>();
</script>

<template>
  <div class="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
  </div>
  <div v-if="!service" class="col-9 row q-col-gutter-md">
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="
        $t(isType ? 'productAndServiceTypeCode' : 'productAndServiceGroupCode')
      "
      v-model="code"
    />
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="
        $t(isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName')
      "
      v-model="name"
    />
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      type="textarea"
      class="col-12"
      :label="$t('detail')"
      v-model="detail"
    />
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      type="textarea"
      class="col-12"
      :label="$t('formDialogInputRemark')"
      v-model="remark"
    />
  </div>

  <div v-if="service" class="col-9 row q-col-gutter-md">
    <q-input
      id="input-service-code"
      for="input-service-code"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('serviceCode')"
      v-model="serviceCode"
    />
    <q-input
      id="input-service-name"
      for="input-service-name"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-9"
      :label="$t('serviceName')"
      v-model="serviceName"
    >
      <template #prepend>
        <q-btn
          dense
          unelevated
          round
          padding="0"
          style="background-color: var(--surface-tab)"
        >
          <Icon
            icon="basil:settings-adjust-solid"
            width="24px"
            style="color: var(--stone-7)"
          />
        </q-btn>
      </template>
    </q-input>
    <q-input
      id="input-service-description"
      for="input-service-description"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      type="textarea"
      class="col-12"
      :label="$t('serviceDetail')"
      v-model="serviceDescription"
    />
  </div>
</template>

<style scoped></style>