jws-frontend/src/components/TreeComponent.vue

<script setup lang="ts">
import { BranchWithChildren } from 'stores/branch/types';
import ToggleButton from './button/ToggleButton.vue';

const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
  default: [],
});

const expandedTree = defineModel<string[]>('expandedTree', { default: [] });

withDefaults(
  defineProps<{
    typeTree: 'product' | 'branch';
    color?: string;
    nodeKey?: string;
    labelKey?: string;
    childrenKey: string;
    action?: boolean;
  }>(),
  {
    color: 'transparent',
    nodeKey: 'id',
    labelKey: 'name',
  },
);

defineEmits<{
  (e: 'handleHold', node: any): void;
  (e: 'select', node: any): void;
  (e: 'create', node: any): void;

  (e: 'view', node: any): void;
  (e: 'edit', node: any): void;
  (e: 'delete', node: any): void;
  (e: 'changeStatus', node: any): void;
}>();
</script>

<template>
  <q-tree
    :nodes="nodes"
    :color="color"
    :node-key="nodeKey"
    :label-key="labelKey"
    :children-key="childrenKey"
    v-model:expanded="expandedTree"
    style="color: var(--foreground)"
  >
    <template #default-header="{ node }">
      <div
        class="full-width q-py-xs"
        :class="{
          'clickable-node': typeTree === 'product' || node.isHeadOffice,
          'cursor-pointer': node.type === 'group' || node.type === 'type',
          'active-node': expandedTree[expandedTree.length - 1] === node.id,
        }"
        v-touch-hold.mouse="() => $emit('handleHold', node)"
        @click.stop="
          async () => {
            $emit('select', node);
          }
        "
        :id="`tree-enter-${node.name}`"
      >
        <div class="row col items-center justify-between full-width no-wrap">
          <q-icon
            v-if="
              (node.type === 'group' && node._count.type > 0) ||
              (node.isHeadOffice && node._count.branch !== 0)
            "
            name="mdi-triangle-down"
            size="12px"
            class="app-text-muted q-mr-md q-ml-sm"
            :style="`rotate: ${expandedTree[0] === node.id ? '0deg' : '30deg'}`"
          />
          <div
            class="col row"
            :class="{ 'q-pl-sm': node.type === 'type' }"
            :style="`padding-left:${(node.type === 'group' && node._count.type === 0) || (node.isHeadOffice && node._count.branch === 0) ? '36px' : ''}`"
          >
            <span
              class="ellipsis col-12"
              style="white-space: nowrap"
              :class="{
                'text-weight-bold':
                  expandedTree[expandedTree.length - 1] === node.id,
                'app-text-info':
                  expandedTree[expandedTree.length - 1] === node.id,
              }"
            >
              {{ node.name }}
            </span>
            <span class="app-text-muted text-caption ellipsis">
              {{ node.code }}
            </span>
          </div>

          <div
            class="row q-gutter-xs items-center no-wrap app-text-muted-2"
            v-if="$q.screen.gt.xs"
          >
            <slot></slot>
            <q-btn
              v-if="typeTree === 'product'"
              icon="mdi-eye-outline"
              :id="`btn-tree-eye-${node.name}`"
              size="sm"
              dense
              round
              flat
              @click.stop="() => $emit('view', node)"
            />

            <q-btn
              v-if="node.isHeadOffice && typeTree === 'branch'"
              :id="`create-sub-branch-btn-${node.name}`"
              @click.stop="$emit('create', node)"
              icon="mdi-file-plus-outline"
              class="app-text-muted-2"
              size="sm"
              dense
              round
              flat
            />

            <q-btn
              v-if="action"
              icon="mdi-dots-vertical"
              :id="`btn-tree-dots-${node.name}`"
              size="sm"
              dense
              round
              flat
              @click.stop
              :key="node.id"
            >
              <q-menu class="bordered">
                <q-list>
                  <q-item
                    v-close-popup
                    clickable
                    :id="`view-detail-btn-${node.name}-view`"
                    @click.stop="() => $emit('view', node)"
                    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
                    :id="`view-detail-btn-${node.name}-edit`"
                    v-close-popup
                    clickable
                    dense
                    class="row q-py-sm"
                    style="white-space: nowrap"
                    @click.stop="() => $emit('edit', node)"
                  >
                    <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
                    v-close-popup
                    :id="`view-detail-btn-${node.name}-delete`"
                    dense
                    :clickable="node.status === 'CREATED'"
                    class="row"
                    :class="{
                      'surface-3': node.status !== 'CREATED',
                      'app-text-muted': node.status !== 'CREATED',
                    }"
                    style="white-space: nowrap"
                    @click.stop="() => $emit('delete', node)"
                  >
                    <q-icon
                      name="mdi-trash-can-outline"
                      size="xs"
                      class="col-3"
                      :class="{
                        'app-text-negative': node.status === 'CREATED',
                      }"
                    />
                    <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 flex items-center">
                        <ToggleButton
                          :id="`view-detail-btn-${node.name}-status`"
                          two-way
                          :model-value="node.status !== 'INACTIVE'"
                          @click="() => $emit('changeStatus', node)"
                        />
                        <span class="q-pl-md">
                          {{
                            node.status !== 'INACTIVE'
                              ? $t('switchOnLabel')
                              : $t('switchOffLabel')
                          }}
                        </span>
                      </div>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div>
        </div>
      </div>
    </template>
  </q-tree>
</template>

<style scoped lang="scss"></style>