sfp_vue_franchisee_ginastica_cerebro/src/components/financial/FinancialPlanAccountTreeNode.vue

<template>
  <q-expansion-item
    v-if="hasChildren"
    v-model="expanded"
    dense
    expand-separator
    header-class="account-tree-row"
    :style="{ '--account-depth': depth }"
  >
    <template #header>
      <q-item-section class="account-code">{{ node.code }}</q-item-section>
      <q-item-section class="account-name text-weight-medium">{{ node.description }}</q-item-section>
      <q-item-section class="account-type">{{ node.chart_type }}</q-item-section>
      <q-item-section side class="account-actions">
        <NodeActions :node="node" :can-edit="canEdit" :can-delete="canDelete" @edit="$emit('edit', node)" @delete="$emit('delete', node.id)" />
      </q-item-section>
    </template>

    <FinancialPlanAccountTreeNode
      v-for="child in node.children"
      :key="child.id"
      :node="child"
      :depth="depth + 1"
      :force-expanded="forceExpanded"
      :can-edit="canEdit"
      :can-delete="canDelete"
      @edit="$emit('edit', $event)"
      @delete="$emit('delete', $event)"
    />
  </q-expansion-item>

  <q-item v-else dense class="account-tree-row" :style="{ '--account-depth': depth }">
    <q-item-section class="account-code">{{ node.code }}</q-item-section>
    <q-item-section class="account-name">{{ node.description }}</q-item-section>
    <q-item-section class="account-type">{{ node.chart_type }}</q-item-section>
    <q-item-section side class="account-actions">
      <NodeActions :node="node" :can-edit="canEdit" :can-delete="canDelete" @edit="$emit('edit', node)" @delete="$emit('delete', node.id)" />
    </q-item-section>
  </q-item>
</template>

<script setup>
import { computed, defineComponent, h, ref, watch } from "vue";
import { QBtn, QChip } from "quasar";

defineOptions({ name: "FinancialPlanAccountTreeNode" });
defineEmits(["edit", "delete"]);
const props = defineProps({
  node: { type: Object, required: true },
  depth: { type: Number, default: 0 },
  forceExpanded: { type: Boolean, default: false },
  canEdit: { type: Boolean, default: false },
  canDelete: { type: Boolean, default: false },
});
const hasChildren = computed(() => props.node.children?.length > 0);
const expanded = ref(props.depth === 0);
watch(() => props.forceExpanded, (value) => value && (expanded.value = true), { immediate: true });

const NodeActions = defineComponent({
  props: {
    node: { type: Object, default: () => ({}) },
    canEdit: Boolean,
    canDelete: Boolean,
  },
  emits: ["edit", "delete"],
  setup(actionProps, { emit }) {
    return () => actionProps.node.unit_id
      ? h("div", { class: "row no-wrap q-gutter-xs" }, [
          actionProps.canEdit ? h(QBtn, { flat: true, round: true, dense: true, icon: "mdi-pencil-outline", color: "secondary", onClick: (event) => { event.stopPropagation(); emit("edit"); } }) : null,
          actionProps.canDelete ? h(QBtn, { flat: true, round: true, dense: true, icon: "mdi-trash-can-outline", color: "negative", onClick: (event) => { event.stopPropagation(); emit("delete"); } }) : null,
        ])
      : h(QChip, { dense: true, color: "blue-grey-1", textColor: "blue-grey-7", icon: "mdi-lock-outline", label: "Matriz" });
  },
});
</script>

<style scoped>
:deep(.account-tree-row) { min-height: 48px; padding-left: calc(16px + (var(--account-depth) * 28px)); border-bottom: 1px solid #dedede; }
:deep(.account-code) { flex: 0 0 15%; min-width: 75px; }
:deep(.account-name) { flex: 1 1 auto; min-width: 0; }
:deep(.account-type) { flex: 0 0 16%; min-width: 85px; }
:deep(.account-actions) { flex: 0 0 105px; }
</style>