fix: 01 sub branch stat, hold dialog, tree table

src/pages/01_branch-management/MainPage.vue

@@ -30,7 +30,7 @@ const $q = useQuasar();
 const { t } = useI18n();
 const utilsStore = useUtilsStore();
 
-const labelBtnStatus = ref<string>(t('all'));
+const holdDialog = ref(false);
 
 const columns = [
   {
@@ -492,6 +492,11 @@ function changeTitle(
   return '';
 }
 
+function handleHold() {
+  if ($q.screen.gt.xs) return;
+  holdDialog.value = true;
+}
+
 watch(locale, () => {
   fieldSelectedBranch.value = {
     label: t(`${fieldSelectedBranch.value.label}`),
@@ -524,13 +529,26 @@ watch(
         style="transition: 0.1s ease-in-out"
       />
     </div>
-
     <transition name="slide">
       <StatCard
         v-if="!hideStat"
         class="q-pb-md"
         label-i18n
-        :branch="stats"
+        :branch="
+          expandedTree[0]
+            ? [
+                {
+                  ...stats[1],
+                  count: (() => {
+                    const foundItem = treeData.find(
+                      (i) => i.id === expandedTree[0],
+                    );
+                    return foundItem ? foundItem._count.branch : 0;
+                  })(),
+                },
+              ]
+            : stats
+        "
         :dark="$q.dark.isActive"
       />
     </transition>
@@ -568,10 +586,10 @@ watch(
             <template v-slot:before>
               <div class="surface-1 column full-height">
                 <div
-                  class="row bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
+                  class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
                   :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
                 >
-                  <div class="col">จัดการสาขาทั้งหมด</div>
+                  <div class="col ellipsis-2-lines">จัดการสาขาทั้งหมด</div>
                   <q-btn
                     round
                     flat
@@ -601,20 +619,21 @@ watch(
                   </q-btn>
                 </div>
 
-                <div class="col">
+                <div class="col full-width">
-                  <div class="scroll q-pa-md">
+                  <div class="q-pa-md">
                     <q-tree
                       :nodes="treeData"
                       node-key="id"
                       label-key="name"
                       children-key="branch"
-                      v-model:expanded="expandedTree"
                       color="transparent"
+                      v-model:expanded="expandedTree"
                       style="color: var(--foreground)"
                     >
                       <template #default-header="{ node }">
                         <div
-                          class="column full-width q-py-sm"
+                          class="full-width q-py-sm"
+                          v-touch-hold.mouse="handleHold"
                           @click.stop="
                             () => {
                               if (
@@ -658,21 +677,29 @@ watch(
                           <div
                             class="row col items-center justify-between full-width no-wrap"
                           >
-                            <span
+                            <div class="col row">
-                              :class="{
+                              <span
-                                'text-weight-bold': expandedTree[0] === node.id,
+                                class="ellipsis col-12"
-                                'app-text-info': expandedTree[0] === node.id,
+                                style="white-space: nowrap"
-                              }"
+                                :class="{
-                            >
+                                  'text-weight-bold':
-                              {{ node.name }}
+                                    expandedTree[0] === node.id,
-                              <div class="app-text-muted text-caption">
+                                  'app-text-info': expandedTree[0] === node.id,
+                                }"
+                              >
+                                {{ node.name }}
+                              </span>
+                              <span
+                                class="app-text-muted text-caption ellipsis"
+                              >
                                 {{ node.code }}
-                              </div>
+                              </span>
-                            </span>
+                            </div>
 
                             <div
                               class="row q-gutter-xs items-center no-wrap"
                               @click.stop
+                              v-if="$q.screen.gt.xs"
                             >
                               <q-btn
                                 v-if="node.isHeadOffice"
@@ -1048,6 +1075,8 @@ watch(
                                 id: '',
                                 code: '',
                               };
+                              expandedTree = [];
+                              expandedTree.push(props.row.id);
                             }
                           }
                         "
@@ -1275,6 +1304,8 @@ watch(
                                   id: '',
                                   code: '',
                                 };
+                                expandedTree = [];
+                                expandedTree.push(props.row.id);
                               }
                             }
                           "
@@ -1659,6 +1690,66 @@ watch(
       </InfoForm>
     </template>
   </DrawerInfo>
+
+  <q-dialog v-model="holdDialog" position="bottom">
+    <div class="surface-1 full-width rounded column" style="height: 280px">
+      <div class="flex q-py-sm justify-center full-width">
+        <div
+          class="rounded"
+          style="
+            width: 8%;
+            height: 4px;
+            background-color: hsla(0, 0%, 50%, 0.75);
+          "
+        ></div>
+      </div>
+
+      <q-list>
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon name="mdi-file-plus" class="app-text-muted-2" />
+          </q-item-section>
+          <q-item-section>
+            {{ $t('formDialogTitleCreateSubBranch') }}
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon
+              name="mdi-eye-outline"
+              style="color: hsl(var(--green-6-hsl))"
+            />
+          </q-item-section>
+          <q-item-section>{{ $t('viewDetail') }}</q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon
+              name="mdi-pencil-outline"
+              style="color: hsl(var(--cyan-6-hsl))"
+            />
+          </q-item-section>
+          <q-item-section>{{ $t('edit') }}</q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon name="mdi-trash-can-outline" class="app-text-negative" />
+          </q-item-section>
+          <q-item-section>{{ $t('delete') }}</q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-toggle dense size="sm" :model-value="holdDialog" />
+          </q-item-section>
+          <q-item-section>{{ $t('switchOnLabel') }}</q-item-section>
+        </q-item>
+      </q-list>
+    </div>
+  </q-dialog>
 </template>
 
 <style scoped>