fix: form readonly (product & service)

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { Attributes } from 'src/stores/product-service/types';
 import useOptionStore from 'src/stores/options';
 
 const optionStore = useOptionStore();
@@ -13,7 +11,6 @@ const code = defineModel<string>('code');
 const serviceCode = defineModel<string>('serviceCode');
 const serviceName = defineModel<string>('serviceNameTh');
 const serviceDescription = defineModel<string>('serviceDescription');
-const serviceAttributes = defineModel<Attributes>('serviceAttributes');
 
 defineProps<{
   dense?: boolean;
@@ -23,10 +20,6 @@ defineProps<{
   isType?: boolean;
   service?: boolean;
 }>();
-
-defineEmits<{
-  (e: 'serviceProperties'): void;
-}>();
 </script>
 
 <template>
@@ -36,9 +29,8 @@ defineEmits<{
   <div v-if="!service" class="col-9 row q-col-gutter-md">
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="
@@ -48,9 +40,8 @@ defineEmits<{
     />
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="
@@ -60,9 +51,8 @@ defineEmits<{
     />
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       type="textarea"
       class="col-12"
@@ -71,9 +61,8 @@ defineEmits<{
     />
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       type="textarea"
       class="col-12"
@@ -87,9 +76,8 @@ defineEmits<{
       id="input-service-code"
       for="input-service-code"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       :label="$t('serviceCode')"
@@ -99,31 +87,19 @@ defineEmits<{
       id="input-service-name"
       for="input-service-name"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-9"
       :label="$t('serviceName')"
       v-model="serviceName"
     />
-    <div v-if="readonly && serviceAttributes" class="col-12 q-gutter-x-md">
-      <span
-        v-for="(p, index) in serviceAttributes.additional"
-        :key="index"
-        class="bordered q-px-sm surface-tab"
-        style="border-radius: 6px"
-      >
-        {{ optionStore.mapOption(p.fieldName ?? '') }}
-      </span>
-    </div>
     <q-input
       id="input-service-description"
       for="input-service-description"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       type="textarea"
       class="col-12"

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

@@ -50,7 +50,10 @@ function confirmDelete(items: unknown[], index: number) {
 
 <template>
   <div class="column col-12 full-height no-wrap">
-    <div class="app-text-muted row items-start q-mb-md">
+    <div
+      class="app-text-muted row items-start q-pb-md"
+      style="min-height: 40px"
+    >
       • {{ $t(`workInformation`) }}
       <q-btn
         v-if="!readonly"

src/css/quasar.variables.scss

@@ -88,3 +88,7 @@ div.fullscreen.q-drawer__backdrop {
 .text-disabled {
   color: $disabled;
 }
+
+.q-field--outlined.q-field--readonly .q-field__control:before {
+  border-color: transparent;
+}