feat: toggle status

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

@@ -162,7 +162,94 @@ function clearData() {
                   <span>{{ node.name }}</span>
                   <div class="q-gutter-xs" @click.stop>
                     <q-btn icon="mdi-file-plus-outline" fab-mini unelevated />
-                    <q-btn icon="mdi-dots-vertical" fab-mini unelevated />
+                    <q-btn icon="mdi-dots-vertical" fab-mini unelevated flat>
+                      <q-menu class="bordered">
+                        <q-list v-close-popup>
+                          <q-item
+                            clickable
+                            dense
+                            class="row q-py-sm"
+                            style="white-space: nowrap"
+                          >
+                            <q-icon
+                              name="mdi-eye-outline"
+                              class="col-3"
+                              size="xs"
+                              style="color: hsl(var(--green-6-hsl))"
+                            />
+                            <span class="col-9 q-px-md flex items-center">
+                              {{ $t('viewDetail') }}
+                            </span>
+                          </q-item>
+                          <q-item
+                            clickable
+                            dense
+                            class="row q-py-sm"
+                            style="white-space: nowrap"
+                          >
+                            <q-icon
+                              name="mdi-pencil-outline"
+                              class="col-3"
+                              size="xs"
+                              style="color: hsl(var(--cyan-6-hsl))"
+                            />
+                            <span class="col-9 q-px-md flex items-center">
+                              {{ $t('edit') }}
+                            </span>
+                          </q-item>
+                          <q-item
+                            dense
+                            clickable
+                            class="row"
+                            style="white-space: nowrap"
+                          >
+                            <q-icon
+                              name="mdi-trash-can-outline"
+                              size="xs"
+                              class="col-3"
+                              style="color: hsl(var(--red-6-hsl))"
+                            />
+                            <span class="col-9 q-px-md flex items-center">
+                              {{ $t('delete') }}
+                            </span>
+                          </q-item>
+
+                          <q-item dense>
+                            <q-item-section class="q-py-sm">
+                              <div class="q-pa-sm surface-2 rounded">
+                                <q-toggle
+                                  dense
+                                  size="sm"
+                                  :label="
+                                    node.status !== 'INACTIVE'
+                                      ? $t('switchOnLabel')
+                                      : $t('switchOffLabel')
+                                  "
+                                  @click="
+                                    async () => {
+                                      const res = await branchStore.editById(
+                                        node.id,
+                                        {
+                                          status:
+                                            node.status !== 'INACTIVE'
+                                              ? 'INACTIVE'
+                                              : 'ACTIVE',
+                                        },
+                                      );
+                                      if (res) node.status = res.status;
+                                    }
+                                  "
+                                  :model-value="
+                                    node.status === 'CREATED' ||
+                                    node.status === 'ACTIVE'
+                                  "
+                                />
+                              </div>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                      </q-menu>
+                    </q-btn>
                   </div>
                 </div>
               </template>