feat: ระบบย้อนกลับ

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

@@ -78,8 +78,8 @@ const currentHq = ref<{ id: string; code: string }>({
   code: '',
 });
 
-const beforeBranch = ref<{ id: string | undefined; code: string }>({
-  id: undefined,
+const beforeBranch = ref<{ id: string; code: string }>({
+  id: '',
   code: '',
 });
 
@@ -158,6 +158,69 @@ function clearData() {
       <template v-else>
         <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
           <div class="tree-container q-pa-md bordered-r">
+            <div class="row">
+              <Icon
+                icon="ep:arrow-left-bold"
+                width="21px"
+                class="q-mr-sm"
+                :class="{
+                  'color-icon-arrow ': !currentHq.id,
+                  'cursor-pointer': currentHq.id,
+                }"
+                @click="
+                  () => {
+                    if (currentHq.id) {
+                      beforeBranch = currentHq;
+                      currentHq = { id: '', code: '' };
+                      fieldSelectedBranch = {
+                        label: t('branchHQLabel'),
+                        value: 'branchHQLabel',
+                      };
+                    }
+                  }
+                "
+              />
+
+              <Icon
+                icon="ep:arrow-right-bold"
+                width="21px"
+                class="q-mr-md"
+                :class="{
+                  'color-icon-arrow ': !beforeBranch.id,
+                  'cursor-pointer': beforeBranch.id,
+                }"
+                @click="
+                  () => {
+                    if (beforeBranch.id) {
+                      currentHq = beforeBranch;
+                      beforeBranch = { id: '', code: '' };
+                      fieldSelectedBranch = {
+                        label: '',
+                        value: '',
+                      };
+                    }
+                  }
+                "
+              />
+
+              <q-space />
+
+              <Icon
+                icon="pixelarticons:plus"
+                height="26"
+                class="color-icon-plus cursor-pointer"
+              />
+            </div>
+
+            <div class="bordered rounded q-mt-md">
+              <div
+                class="bordered-b q-pl-sm text-weight-bold surface-0"
+                style="height: 50px; display: flex; align-items: center"
+              >
+                <Icon icon="flowbite:home-solid" width="24px" class="q-mr-md" />
+                ทั้งหมด
+              </div>
+
               <q-tree
                 :nodes="treeData"
                 node-key="id"
@@ -165,9 +228,11 @@ function clearData() {
                 children-key="branch"
               >
                 <template #default-header="{ node }">
-                <div class="row items-center justify-between full-width">
+                  <div
+                    class="row items-center justify-between full-width no-wrap"
+                  >
                     <span>{{ node.name }}</span>
-                  <div class="q-gutter-xs" @click.stop>
+                    <div class="q-gutter-xs flex no-wrap" @click.stop>
                       <q-btn icon="mdi-file-plus-outline" fab-mini unelevated />
                       <q-btn icon="mdi-dots-vertical" fab-mini unelevated flat>
                         <q-menu class="bordered">
@@ -262,6 +327,7 @@ function clearData() {
                 </template>
               </q-tree>
             </div>
+          </div>
           <div class="branch-wrapper q-pa-md">
             <div class="q-mb-md flex" style="gap: var(--size-4)">
               <div style="flex-grow: 1; display: flex; align-items: center">
@@ -355,7 +421,10 @@ function clearData() {
                         code: item.branchLabelCode,
                       };
 
-                      beforeBranch = currentHq;
+                      beforeBranch = {
+                        id: '',
+                        code: '',
+                      };
                     }
                   }
                 "