feat: edit and delete branch

src/components/01_branch-management/DetailBranchDrawerComponent.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Branch } from '../../stores/branch/types';
+import AppBox from '../app/AppBox.vue';
 
 defineProps<{
   data?: Branch;
@@ -22,8 +23,26 @@ const open = defineModel('open', { type: Boolean, default: false });
   >
     <q-toolbar class="q-mb-md q-pa-none">
       <q-toolbar-title>
-        <q-icon name="mdi-home" size="md" />
-        <span class="text-weight-bold q-pl-sm">รายละเอียดสำนักงานใหญ่</span>
+        <span class="text-weight-bold q-mr-sm">รายละเอียดสำนักงานใหญ่</span>
+
+        <q-btn
+          icon="mdi-pencil-outline"
+          class="app-text-info"
+          fab-mini
+          flat
+          @click.stop="$emit('triggerEdit', data)"
+        />
+        <q-btn
+          icon="mdi-trash-can-outline"
+          :class="{
+            'app-text-negative': data?.status === 'CREATED',
+            'app-text-muted': data?.status !== 'CREATED',
+          }"
+          :disable="data?.status !== 'CREATED'"
+          fab-mini
+          flat
+          @click.stop="$emit('triggerDelete', data)"
+        />
       </q-toolbar-title>
       <q-btn
         v-close-popup
@@ -38,7 +57,7 @@ const open = defineModel('open', { type: Boolean, default: false });
     </q-toolbar>
 
     <section class="q-mb-md">
-      <q-card class="bordered column q-pa-sm">
+      <AppBox class="column q-pa-sm" bordered>
         <div class="row card-details-row-height">
           <div class="col-3 color-text-static">รหัสสาขา</div>
           <div class="col-2">{{ data?.code }}</div>
@@ -109,11 +128,11 @@ const open = defineModel('open', { type: Boolean, default: false });
           <div class="col-3 color-text-static">Zip code</div>
           <div class="col-2">{{ data?.zipCode }}</div>
         </div>
-      </q-card>
+      </AppBox>
     </section>
 
     <section class="q-mb-md">
-      <q-card class="bordered q-pa-sm">
+      <AppBox class="q-pa-sm" bordered>
         <div class="row">
           <div class="col-8">
             <div class="row card-details-row-height">
@@ -148,7 +167,7 @@ const open = defineModel('open', { type: Boolean, default: false });
           <div class="col color-text-static">location</div>
           <div class="col"></div>
         </div>
-      </q-card>
+      </AppBox>
     </section>
   </q-drawer>
 </template>