fix(01): dialog drawer form

2024-08-02 03:52:56 +00:00 · 2024-08-02 03:52:56 +00:00 · 073635c95b
commit 073635c95b
parent ef9aeb930a
5 changed files with 227 additions and 105 deletions
--- a/src/components/01_branch-management/FormQr.vue
+++ b/src/components/01_branch-management/FormQr.vue
@ -35,7 +35,7 @@ defineEmits<{
      }"
      class="col-12 row branch-form-show-qr-code"
    >
-      <div class="col-12 flex flex-center q-py-md">
+      <div class="col-12 column flex-center q-py-md">
        <q-img
          v-if="qr"
          :src="qr as string"
@ -52,18 +52,17 @@ defineEmits<{
        </q-img>

        <q-btn
-          @click="$emit('upload')"
-          class="branch-form-btn-qr-code"
-          :class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
          v-else
+          @click="$emit('upload')"
+          class="branch-form-btn-qr-code q-mb-md"
+          :class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
          unelevated
          :color="$q.dark.isActive ? 'black' : 'grey-2'"
          :text-color="$q.dark.isActive ? 'white' : 'grey-5'"
        >
          <Icon icon="teenyicons:add-outline" width="30px" height="50px" />
        </q-btn>
-      </div>
-      <div class="col-12 flex flex-center q-pb-md">
+
        <q-btn
          v-if="!readonly"
          :text-color="$q.dark.isActive ? 'black' : 'white'"
--- a/src/components/02_personnel-management/InfoForm.vue
+++ b/src/components/02_personnel-management/InfoForm.vue
@ -51,26 +51,20 @@ const employeeTab = defineModel<string>('employeeTab');
      </q-tabs>
    </div>

-    <div
-      class="col full-height q-pa-md full-width"
-      :class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
-    >
-      <div class="col-md-2 q-mr-md" v-if="$slots['person-card']">
-        <slot name="person-card"></slot>
+    <div class="row col full-width scroll">
+      <!-- prepend -->
+      <div class="col" v-if="$slots.prepend">
+        <slot name="prepend"></slot>
      </div>

-      <div
-        class="rounded scroll full-height col full-width"
-        :class="{
-          'q-mt-md': $q.screen.lt.md,
-        }"
-      >
-        <div
-          class="row q-col-gutter-y-md surface-1 rounded bordered"
-          :class="{ 'q-pa-md': !noPaddingTab }"
-        >
-          <slot></slot>
-        </div>
+      <!-- center -->
+      <div class="col column full-height">
+        <slot></slot>
+      </div>
+
+      <!-- append -->
+      <div class="col" v-if="$slots.append">
+        <slot name="append"></slot>
      </div>
    </div>
  </div>
--- a/src/components/ImageUploadDialog.vue
+++ b/src/components/ImageUploadDialog.vue
@ -24,7 +24,7 @@ const file = defineModel<File | null>('file', {
  required: true,
 });
 defineEmits<{
-  (e: 'save', v: File | null): void;
+  (e: 'save', file: File | null, url: string | null): void;
 }>();

 const reader = new FileReader();
@ -131,7 +131,7 @@ function change(e: Event) {
          type="submit"
          color="primary"
          class="q-px-md"
-          @click="$emit('save', inputFile?.files?.[0] || null)"
+          @click="$emit('save', inputFile?.files?.[0] || null, imageUrl)"
          :label="$t('save')"
        />
      </div>
@ -190,4 +190,14 @@ function change(e: Event) {
 .image-container > :deep(*:not(:first-child)) {
  display: none;
 }
+
+.close-btn {
+  color: hsl(var(--negative-bg));
+  background-color: hsla(var(--negative-bg) / 0.1);
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative-bg));
+  }
+}
 </style>
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@ -4,11 +4,11 @@ import { ref } from 'vue';
 defineProps<{
  icon?: string;
  color?: string;
-  img?: string;
+  img?: string | null;
  bgColor?: string;
  title?: string;
  caption?: string;
-  cover?: string;
+  cover?: string | null;

  hideFade?: boolean;
  active?: boolean;
@ -40,7 +40,11 @@ const showOverlay = ref(false);
    <div class="absolute-top flex items-center full-height q-pl-lg">
      <div
        class="surface-1"
-        style="border-radius: 50%; border: 4px solid var(--surface-1)"
+        style="
+          border-radius: 50%;
+          border: 4px solid var(--surface-1);
+          overflow: hidden;
+        "
      >
        <div
          class="avatar__status"
@ -51,7 +55,7 @@ const showOverlay = ref(false);
          size="6rem"
          font-size="3rem"
          class="cursor-pointer"
-          style="z-index: 1; overflow: hidden"
+          style="z-index: 1"
          :style="`background-color: ${img ? 'white' : bgColor || 'var(--brand-1)'}; color: ${color || 'white'}`"
          @mouseover="showOverlay = true"
          @mouseleave="showOverlay = false"
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@ -29,6 +29,7 @@ import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import TreeCompoent from 'src/components/TreeCompoent.vue';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import SideMenu from 'src/components/SideMenu.vue';
+import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';

 const $q = useQuasar();
 const { t } = useI18n();
@ -69,10 +70,44 @@ const modal = ref<boolean>(false);
 const hideStat = ref(false);
 const currentStatus = ref<Status | 'All'>('All');
 const expandedTree = ref<string[]>([]);
+const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
+  {
+    icon: 'mdi-office-building-outline',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+  {
+    icon: 'mdi-phone',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+  {
+    icon: 'mdi-map-marker-radius',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+  {
+    icon: 'mdi-map-legend',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+  {
+    icon: 'mdi-qrcode',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+  {
+    icon: 'mdi-piggy-bank-outline',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+]);

-const profileFileImg = ref<File | undefined>(undefined);
+const isImageEdit = ref(false);
+const profileFileImg = ref<File | null>(null);
 const imageUrl = ref<string | null>('');
 const currentNode = ref<BranchWithChildren>();
+const imageDialog = ref(false);

 const inputFileImg = (() => {
  const element = document.createElement('input');
@ -532,6 +567,25 @@ function handleHold(node: BranchWithChildren) {
  };
 }

+function openImageDialog(isEdit?: boolean) {
+  if (isEdit) isImageEdit.value = true;
+  else isImageEdit.value = false;
+  imageDialog.value = true;
+}
+
+function handleImageUpload(file: File | null, url: string | null) {
+  imageUrl.value = url;
+  imageDialog.value = false;
+  // profileFileImg = file;
+}
+
+watch(
+  () => profileFileImg.value,
+  () => {
+    if (profileFileImg.value !== null) isImageEdit.value = true;
+  },
+);
+
 watch(locale, () => {
  fieldSelectedBranch.value = {
    label: t(`${fieldSelectedBranch.value.label}`),
@ -1394,41 +1448,22 @@ watch(currentHq, () => {
        onSubmit();
      }
    "
-    :close="() => (modal = false)"
+    :close="() => ((modal = false), (profileFileImg = null))"
  >
    <div class="q-mx-lg q-mt-lg">
      <!-- title="บริษัทจ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด"
      caption="Jobs Worker Service Co., Ltd." -->
      <ProfileBanner
        active
-        hideFade
+        :hideFade="imageUrl === '' || imageUrl === null"
+        :img="imageUrl || null"
+        :cover="imageUrl || null"
        icon="mdi-office-building-outline"
        color="hsla(var(--pink-6-hsl)/1)"
        bgColor="hsla(var(--pink-6-hsl)/0.15)"
-        @view="console.log('view')"
-        @edit="console.log('edit')"
-        :menu="[
-          {
-            icon: 'mdi-phone',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-          {
-            icon: 'mdi-qrcode',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-          {
-            icon: 'mdi-image-filter-hdr',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-          {
-            icon: 'mdi-map-legend',
-            color: 'hsl(var(--info-bg))',
-            bgColor: 'var(--surface-1)',
-          },
-        ]"
+        @view="openImageDialog"
+        @edit="inputFileImg.click()"
+        :menu="formMenuIcon"
      />
    </div>
    <div
@ -1441,27 +1476,27 @@ watch(currentHq, () => {
            :menu="[
              {
                name: $t('formDialogTitleInformation'),
-                anchor: 'information',
+                anchor: 'form-information',
              },
              {
                name: $t('formDialogTitleContact'),
-                anchor: 'contact',
+                anchor: 'form-contact',
              },
              {
                name: $t('formDialogTitleAddress'),
-                anchor: 'address',
+                anchor: 'form-address',
              },
              {
                name: $t('formDialogTitleLocation'),
-                anchor: 'location',
+                anchor: 'form-location',
              },
              {
                name: 'QR Code',
-                anchor: 'qr',
+                anchor: 'form-qr',
              },
              {
                name: $t('bankBook'),
-                anchor: 'bankBook',
+                anchor: 'form-bankBook',
              },
            ]"
            background="transparent"
@ -1476,7 +1511,7 @@ watch(currentHq, () => {

      <div class="col-10 q-pa-md q-gutter-y-xl">
        <FormBranchInformation
-          id="information"
+          id="form-information"
          v-model:code="formData.codeHeadOffice"
          v-model:code-sub-branch="currentEdit.code"
          v-model:taxNo="formData.taxNo"
@ -1490,7 +1525,7 @@ watch(currentHq, () => {
          title="formDialogTitleInformation"
        />
        <FormBranchContact
-          id="contact"
+          id="form-contact"
          v-model:type-branch="formTypeBranch"
          v-model:telephone-no="formData.telephoneNo"
          v-model:contact="formData.contact"
@ -1503,7 +1538,7 @@ watch(currentHq, () => {
          :outlined="true"
        />
        <FormAddress
-          id="address"
+          id="form-address"
          dense
          outlined
          separator
@ -1517,7 +1552,7 @@ watch(currentHq, () => {
          v-model:zip-code="formData.zipCode"
        />
        <FormLocation
-          id="location"
+          id="form-location"
          :readonly="formType === 'view'"
          :separator="true"
          v-model:latitude="formData.latitude"
@ -1525,7 +1560,7 @@ watch(currentHq, () => {
          title="formDialogTitleLocation"
        />
        <FormQr
-          id="qr"
+          id="form-qr"
          title="QR Code"
          :separator="true"
          :qr="qrCodeimageUrl"
@ -1564,21 +1599,71 @@ watch(currentHq, () => {
    :close="() => ((modalDrawer = false), flowStore.rotate())"
    :statusBranch="formData.status"
  >
-    <template #info>
-      <InfoForm
-        v-model:address="formData.address"
-        v-model:addressEN="formData.addressEN"
-        v-model:province-id="formData.provinceId"
-        v-model:district-id="formData.districtId"
-        v-model:sub-district-id="formData.subDistrictId"
-        v-model:zip-code="formData.zipCode"
-        :title-form-address="$t('formDialogTitleAddress')"
-        :address-title="$t('formDialogAddress')"
-        :address-title-e-n="$t('formDialogAddressEN')"
-        :readonly="formType === 'view'"
+    <InfoForm>
+      <div class="q-mx-lg q-mt-lg">
+        <ProfileBanner
+          active
+          hideFade
+          :img="imageUrl || null"
+          :cover="imageUrl || null"
+          :title="formData.name"
+          :caption="formData.nameEN"
+          icon="mdi-office-building-outline"
+          color="hsla(var(--pink-6-hsl)/1)"
+          bgColor="hsla(var(--pink-6-hsl)/0.15)"
+          @view="openImageDialog"
+          @edit="inputFileImg.click()"
+          :readonly="formType === 'view'"
+          :menu="formMenuIcon"
+        />
+      </div>
+
+      <div
+        class="col surface-1 q-ma-lg rounded bordered scroll row"
+        id="branch-info"
      >
-        <template #information>
+        <div class="col">
+          <div style="position: sticky; top: 0" class="q-pa-sm">
+            <SideMenu
+              :menu="[
+                {
+                  name: $t('formDialogTitleInformation'),
+                  anchor: 'info-information',
+                },
+                {
+                  name: $t('formDialogTitleContact'),
+                  anchor: 'info-contact',
+                },
+                {
+                  name: $t('formDialogTitleAddress'),
+                  anchor: 'info-address',
+                },
+                {
+                  name: $t('formDialogTitleLocation'),
+                  anchor: 'info-location',
+                },
+                {
+                  name: 'QR Code',
+                  anchor: 'info-qr',
+                },
+                {
+                  name: $t('bankBook'),
+                  anchor: 'info-bankBook',
+                },
+              ]"
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#branch-info"
+            />
+          </div>
+        </div>
+
+        <div class="col-10 q-pa-md q-gutter-y-xl">
          <FormBranchInformation
+            id="info-information"
            v-model:code="formData.codeHeadOffice"
            v-model:code-sub-branch="currentEdit.code"
            v-model:taxNo="formData.taxNo"
@ -1592,10 +1677,8 @@ watch(currentHq, () => {
            :view="formType === 'view'"
            title="formDialogTitleInformation"
          />
-        </template>
-
-        <template #person>
          <FormBranchContact
+            id="info-contact"
            title="formDialogTitleContact"
            v-model:telephone-no="formData.telephoneNo"
            v-model:contact="formData.contact"
@ -1608,10 +1691,31 @@ watch(currentHq, () => {
            :dense="true"
            :outlined="true"
          />
-        </template>
-
-        <template #qr-code>
+          <FormAddress
+            id="info-address"
+            dense
+            outlined
+            separator
+            prefix-id="default"
+            :title="$t('formDialogTitleAddress')"
+            :readonly="formType === 'view'"
+            v-model:address="formData.address"
+            v-model:addressEN="formData.addressEN"
+            v-model:province-id="formData.provinceId"
+            v-model:district-id="formData.districtId"
+            v-model:sub-district-id="formData.subDistrictId"
+            v-model:zip-code="formData.zipCode"
+          />
+          <FormLocation
+            id="info-location"
+            title="formDialogTitleLocation"
+            v-model:latitude="formData.latitude"
+            v-model:longitude="formData.longitude"
+            :readonly="formType === 'view'"
+            :separator="true"
+          />
          <FormQr
+            id="info-qr"
            :readonly="formType === 'view'"
            title="QR Code"
            :separator="true"
@ -1622,20 +1726,7 @@ watch(currentHq, () => {
              }
            "
          />
-        </template>
-
-        <template #location>
-          <FormLocation
-            title="formDialogTitleLocation"
-            v-model:latitude="formData.latitude"
-            v-model:longitude="formData.longitude"
-            :readonly="formType === 'view'"
-            :separator="true"
-          />
-        </template>
-
-        <template #by-type>
-          <FormImage
+          <!-- <FormImage
            @upload="
              () => {
                inputFileImg.click();
@ -1644,10 +1735,10 @@ watch(currentHq, () => {
            v-model:image="imageUrl"
            :title="$t('formDialogTitleImg')"
            :readonly="formType === 'view'"
-          />
-        </template>
-      </InfoForm>
-    </template>
+          /> -->
+        </div>
+      </div>
+    </InfoForm>
  </DrawerInfo>

  <q-dialog v-model="holdDialog" position="bottom">
@ -1779,6 +1870,30 @@ watch(currentHq, () => {
      </q-list>
    </div>
  </q-dialog>
+
+  <ImageUploadDialog
+    v-model:dialogState="imageDialog"
+    v-model:file="profileFileImg"
+    v-model:image-url="imageUrl"
+    :hiddenFooter="!isImageEdit"
+    clearButton
+    @save="handleImageUpload"
+  >
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div
+          class="full-height full-width flex justify-center items-center"
+          style="background: hsla(var(--pink-6-hsl) / 0.15)"
+        >
+          <q-icon
+            size="15rem"
+            name="mdi-office-building-outline"
+            style="color: hsla(var(--pink-6-hsl) / 1)"
+          ></q-icon>
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
 </template>

 <style scoped>