jws-frontend/src/components/shared/TreeView.vue

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { computed } from 'vue';
import DeleteButton from '../button/DeleteButton.vue';

type Node = {
  [key: string]: any;
  opened?: boolean;
  checked?: boolean;
  bg?: string;
  fg?: string;
  icon?: string;
  displayDropIcon?: boolean;
  children?: Node[];
};

type Props = {
  level?: number;
  keyTitle?: string;
  keySubtitle?: string;
  iconSize?: string;

  hideCheckBox?: boolean;
  expandable?: boolean;
  selectable?: boolean;
  deleteable?: boolean;
  deleteableDeep?: boolean;
  movable?: boolean;

  selectedNode?: Node[];
  ancestorNode?: Node[];
  decoration?: {
    level?: number;
    bg?: string;
    fg?: string;
    icon?: string;
  }[];
};

const props = defineProps<Props>();
const nodes = defineModel<Node[]>('nodes', { required: true });
const filterText = defineModel<string>('filterText', { required: false });

const emits = defineEmits<{
  (e: 'checked'): void;
  (e: 'unchecked'): void;
  (e: 'select', node: Node, ancestor?: Node[]): void;
  (e: 'open', node: Node, ancestor?: Node[]): void;
  (e: 'delete', node: Node): void;
  (e: 'moveUp', node: Node): void;
  (e: 'moveDown', node: Node): void;
}>();

const dec = props.decoration?.find((v) => v.level === (props.level || 0));
const maxLevel = computed(() =>
  props.decoration?.reduce((max, v) => {
    return v.level && v.level > max ? v.level : max;
  }, 0),
);

function recursiveSelect(node: Node) {
  if (node.children) {
    node.children.forEach((v) => {
      v.checked = true;
      recursiveSelect(v);
    });
  }
}

function recursiveDeselect(node: Node) {
  if (node.children) {
    node.children.forEach((v) => {
      v.checked = false;
      recursiveDeselect(v);
    });
  }
}

function toggleCheck(node: Node) {
  node.checked = !node.checked;
  if (node.checked === false) {
    recursiveDeselect(node);
    emits('unchecked');
  }
  if (node.checked === true) {
    recursiveSelect(node);
    emits('checked');
  }
}

function toggleExpand(node: Node, ancestor?: []) {
  node.opened = !node.opened;
  emits('open', node, ancestor);
}

function visibleNode(text: string, node: Node, ancestor?: Node[]): boolean {
  if (!text) return true;

  const getTitle = (n: Node): string => n[props.keyTitle || 'title'];
  const getSubtitle = (n: Node): string => n[props.keySubtitle || 'subtitle'];

  return (
    [node, ...(ancestor || [])].some(
      (v) => getTitle(v).includes(text) || getSubtitle(v).includes(text),
    ) || (node.children || []).some((v) => visibleNode(text, v, []))
  );
}
</script>

<template>
  <div
    class="tree-container"
    :class="{
      'q-pl-xl': level && level > 0,
      'last-children': level && level === maxLevel,
    }"
  >
    <template v-for="(node, i) in nodes" :key="i">
      <div
        class="tree-item"
        v-if="filterText ? visibleNode(filterText, node, ancestorNode) : true"
      >
        <slot
          v-if="$slots['item']"
          name="item"
          :data="{ node, toggleExpand, toggleCheck }"
        />

        <div class="row items-center" v-else>
          <div v-if="!level && movable" style="width: var(--size-16)">
            <q-btn
              id="btn-up"
              for="btn-up"
              icon="mdi-arrow-up"
              size="sm"
              dense
              flat
              round
              :disable="i === 0"
              style="color: hsl(var(--text-mute-2))"
              @click.stop="$emit('moveUp', node)"
            />
            <q-btn
              id="btn-down"
              for="btn-down"
              icon="mdi-arrow-down"
              size="sm"
              dense
              flat
              round
              class="q-mx-sm"
              :disable="i === nodes.length - 1"
              style="color: hsl(var(--text-mute-2))"
              @click.stop="$emit('moveDown', node)"
            />
          </div>
          <div
            class="item__content row items-center no-wrap col"
            :class="{ active: selectedNode?.includes(node) }"
            @click="
              () => (selectable ? $emit('select', node) : toggleExpand(node))
            "
          >
            <div style="width: var(--size-6); margin-right: var(--size-1)">
              <div
                v-if="level !== maxLevel"
                class="q-mr-md"
                :style="`color: ${
                  !node.displayDropIcon &&
                  (!node.children || node.children.length === 0)
                    ? 'transparent'
                    : $q.dark.isActive
                      ? 'var(--gray-7)'
                      : 'var(--gray-4)'
                }`"
              >
                <q-icon
                  name="mdi-chevron-down-circle"
                  size="sm"
                  :style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
                  @click.stop="
                    !node.displayDropIcon &&
                    (!node.children || node.children.length === 0)
                      ? $emit('select', node)
                      : toggleExpand(node)
                  "
                />
              </div>
            </div>

            <label
              v-if="!hideCheckBox"
              class="flex items-center item__checkbox"
              @click.stop
            >
              <input
                type="checkbox"
                v-model="node.checked"
                :indeterminate="
                  node.children?.some((v) => !v.checked) &&
                  !node.children?.every((v) => !v.checked)
                "
                :style="`accent-color: var(--blue-7)`"
                @click="toggleCheck(node)"
              />
            </label>

            <div
              class="item__icon flex items-center justify-center"
              :style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
            >
              <div
                class="flex items-center justify-center"
                :style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
              >
                <Icon
                  v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
                  :icon="node.icon || dec.icon"
                  class="full-width full-height"
                />
              </div>
            </div>

            <div class="column">
              <span class="item__title">
                {{ node[keyTitle || 'title'] || 'No Title' }}
              </span>
              <span class="item__subtitle">
                {{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }}
              </span>
            </div>

            <DeleteButton
              v-if="deleteable"
              class="q-ml-auto"
              icon-only
              @click.stop="$emit('delete', node)"
            />
          </div>
        </div>

        <transition name="slide">
          <div
            v-if="node.opened && node.children && node.children.length > 0"
            :class="{ 'q-pl-xl': movable }"
            class="tree-children"
          >
            <TreeView
              :iconSize
              :hideCheckBox
              :selectable
              :selectedNode
              :filterText
              :deleteable="deleteableDeep"
              class="item__children"
              v-if="node.children"
              v-model:nodes="node.children"
              @open="
                (n) => {
                  $emit(
                    'open',
                    n,
                    !props.ancestorNode || props.ancestorNode.length === 0
                      ? [node]
                      : [...props.ancestorNode, node],
                  );
                }
              "
              @checked="
                () => {
                  node.checked = true;
                  $emit('checked');
                }
              "
              @unchecked="
                () => {
                  if (node.children?.every((v) => v.checked === false)) {
                    node.checked = false;
                  }
                  $emit('checked');
                }
              "
              @select="
                (v) =>
                  $emit(
                    'select',
                    v,
                    !props.ancestorNode || props.ancestorNode.length === 0
                      ? [node]
                      : [...props.ancestorNode, node],
                  )
              "
              :level="(level || 0) + 1"
              :ancestorNode="
                !props.ancestorNode || props.ancestorNode.length === 0
                  ? [node]
                  : [...props.ancestorNode, node]
              "
              :expandable
              :decoration
            />
          </div>
        </transition>
        <q-separator v-if="!level && i !== nodes.length - 1" class="q-mt-sm" />
      </div>
    </template>
  </div>
</template>

<style lang="css" scoped>
.tree-container {
  display: flex;
  flex-direction: column;
  user-select: none;
  gap: var(--size-2);

  & .tree-item {
    & .item__content {
      border: solid 1px transparent;
      border-radius: var(--radius-2);
      padding: 0.1rem 0.5rem;
      transition: 0.15s;

      &:hover {
        background: hsla(0 0% 0% / 0.1);
      }
    }

    & .item__checkbox {
      padding: 0.1rem 0.5rem;
      margin-right: 1rem;
    }

    & .item__icon {
      margin-right: 1rem;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
    }

    & .item__title {
      font-weight: 600;
    }

    & .item__subtitle {
      font-size: 80%;
      color: hsla(var(--text-mute-2));
    }

    & .tree-children {
      padding-top: var(--size-2);
    }

    & .active {
      border: solid 1px hsl(var(--info-bg));
      background: hsla(var(--info-bg) / 0.1);
    }
  }
}

.slide-enter-active {
  transition: all 0.1s ease-out;
}

.slide-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-enter-from,
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>