halo/ui/console-src/modules/interface/menus/components/MenuItemListItem.vue

<script lang="ts" setup>
import {
  IconList,
  VDropdownItem,
  VEntity,
  VEntityField,
  VStatusDot,
  VTag,
} from "@halo-dev/components";
import { VueDraggable } from "vue-draggable-plus";
import type { MenuTreeItem } from "@console/modules/interface/menus/utils";
import { usePermission } from "@/utils/permission";
import { useI18n } from "vue-i18n";
import type { PropType } from "vue";

const { currentUserHasPermission } = usePermission();
const { t } = useI18n();

const menuTreeItems = defineModel({
  type: Array as PropType<MenuTreeItem[]>,
  default: [],
});

const emit = defineEmits<{
  (event: "change"): void;
  (event: "open-editing", menuItem: MenuTreeItem): void;
  (event: "open-create-by-parent", menuItem: MenuTreeItem): void;
  (event: "delete", menuItem: MenuTreeItem): void;
}>();

function onChange() {
  emit("change");
}

function onOpenEditingModal(menuItem: MenuTreeItem) {
  emit("open-editing", menuItem);
}

function onOpenCreateByParentModal(menuItem: MenuTreeItem) {
  emit("open-create-by-parent", menuItem);
}

function onDelete(menuItem: MenuTreeItem) {
  emit("delete", menuItem);
}

const TargetRef = {
  Post: t("core.menu.menu_item_editing_modal.fields.ref_kind.options.post"),
  SinglePage: t(
    "core.menu.menu_item_editing_modal.fields.ref_kind.options.single_page"
  ),
  Category: t(
    "core.menu.menu_item_editing_modal.fields.ref_kind.options.category"
  ),
  Tag: t("core.menu.menu_item_editing_modal.fields.ref_kind.options.tag"),
};

function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
  const { kind } = menuItem.spec.targetRef || {};

  if (kind && TargetRef[kind]) {
    return TargetRef[kind];
  }

  return undefined;
}
</script>
<template>
  <VueDraggable
    v-model="menuTreeItems"
    class="box-border h-full w-full divide-y divide-gray-100"
    ghost-class="opacity-50"
    group="menu-item"
    handle=".drag-element"
    tag="ul"
    @sort="onChange"
  >
    <li v-for="menuItem in menuTreeItems" :key="menuItem.metadata.name">
      <VEntity>
        <template #prepend>
          <div
            v-permission="['system:menus:manage']"
            class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
          >
            <IconList class="h-3.5 w-3.5" />
          </div>
        </template>
        <template #start>
          <VEntityField :title="menuItem.status?.displayName">
            <template #extra>
              <VTag v-if="getMenuItemRefDisplayName(menuItem)">
                {{ getMenuItemRefDisplayName(menuItem) }}
              </VTag>
            </template>
            <template #description>
              <a
                v-if="menuItem.status?.href"
                :href="menuItem.status?.href"
                :title="menuItem.status?.href"
                target="_blank"
                class="truncate text-xs text-gray-500 group-hover:text-gray-900"
              >
                {{ menuItem.status.href }}
              </a>
            </template>
          </VEntityField>
        </template>
        <template #end>
          <VEntityField v-if="menuItem.metadata.deletionTimestamp">
            <template #description>
              <VStatusDot
                v-tooltip="$t('core.common.status.deleting')"
                state="warning"
                animate
              />
            </template>
          </VEntityField>
        </template>
        <template
          v-if="currentUserHasPermission(['system:menus:manage'])"
          #dropdownItems
        >
          <VDropdownItem @click="onOpenEditingModal(menuItem)">
            {{ $t("core.common.buttons.edit") }}
          </VDropdownItem>
          <VDropdownItem @click="onOpenCreateByParentModal(menuItem)">
            {{ $t("core.menu.operations.add_sub_menu_item.button") }}
          </VDropdownItem>
          <VDropdownItem type="danger" @click="onDelete(menuItem)">
            {{ $t("core.common.buttons.delete") }}
          </VDropdownItem>
        </template>
      </VEntity>
      <MenuItemListItem
        v-model="menuItem.spec.children"
        class="pl-10 transition-all duration-300"
        @change="onChange"
        @delete="onDelete"
        @open-editing="onOpenEditingModal"
        @open-create-by-parent="onOpenCreateByParentModal"
      />
    </li>
  </VueDraggable>
</template>