@edc-motor/admin-kit 0.4.23 → 0.4.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.4.23",
+  "version": "0.4.24",
   "description": "EdC Motor — kit del panel de administración: layout, gestores CRUD, imágenes, PDF, páginas, configuración, usuarios y copias (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@edc-motor/ui": "^0.4.23",
+    "@edc-motor/ui": "^0.4.24",
     "axios": "^1.7.0",
     "vue-draggable-plus": "^0.6.1"
   },

package/scss/_admin-kit.scss

@@ -8,3 +8,4 @@
 @use "components/preview-manager";
 @use "components/pdf-manager";
 @use "components/page-blocks";
+@use "components/menu-manager";

package/scss/components/_menu-manager.scss

@@ -0,0 +1,133 @@
+@use "tokens" as *;
+
+// Configurador del menú público (doc 10 ampliado): filas tipo PageBlocks
+// (icono + etiqueta + badges + acciones), sin drag — el orden se mueve con
+// flechas, dentro de cada nivel (raíz o hijos de un grupo).
+.menu-manager {
+  display: grid;
+  gap: $space-3;
+
+  &__bar {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__empty { color: $text-3; margin: 0; }
+
+  &__list {
+    display: grid;
+    gap: $space-2;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: $space-2;
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    background: $surface;
+    padding: $space-2 $space-3;
+    min-width: 0;
+    transition: border-color 0.15s ease;
+
+    &:hover { border-color: $border-strong; }
+    &.is-hidden { opacity: 0.65; }
+  }
+
+  // Hijos de un grupo: sangrados justo debajo de él (mismo lenguaje que los
+  // bloques hijos de PageBlocks).
+  &__item.is-child { margin-left: $space-7; }
+
+  &__icon {
+    display: inline-flex;
+    color: $text-3;
+    flex: 0 0 auto;
+  }
+
+  &__label {
+    font-weight: $k-fw-semibold;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: auto;
+  }
+
+  &__badges { display: flex; gap: $space-1; }
+
+  &__moves {
+    display: flex;
+    gap: 2px;
+  }
+
+  &__move {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: 1px solid $border;
+    border-radius: $radius-sm;
+    color: $text-2;
+    cursor: pointer;
+    padding: $space-1;
+    transition: background-color 0.15s ease;
+
+    &:hover:not(:disabled) { background: $surface-2; }
+    &:disabled { opacity: 0.4; cursor: default; }
+  }
+
+  &__visibility {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, $success 45%, transparent);
+    border-radius: $radius-sm;
+    color: $success;
+    cursor: pointer;
+    padding: $space-1;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    &.is-on {
+      background: $success;
+      border-color: $success;
+      @include contrast-text($success);
+    }
+    &:disabled { opacity: 0.6; cursor: default; }
+  }
+
+  &__group-select {
+    min-width: 160px;
+
+    .form-field__select { min-height: 34px; }
+  }
+
+  &__group-actions {
+    display: flex;
+    gap: $space-1;
+  }
+
+  &__edit,
+  &__delete {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    border-radius: $radius-sm;
+    padding: $space-1;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  &__edit {
+    color: $accent-500;
+    &:hover { background: color-mix(in srgb, $accent-500 12%, transparent); }
+  }
+
+  &__delete {
+    color: $danger;
+    &:hover { background: color-mix(in srgb, $danger 12%, transparent); }
+  }
+}

package/src/content/MenuManager.vue

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import type { AxiosInstance } from 'axios'
+import {
+  ArrowDown,
+  ArrowUp,
+  Compass,
+  Eye,
+  EyeOff,
+  File,
+  Folder,
+  Plus,
+  SquarePen,
+  Trash2,
+} from '@lucide/vue'
+import {
+  BaseButton,
+  BaseSelect,
+  EditModal,
+  TranslatableInput,
+  useConfirm,
+  useToast,
+} from '@edc-motor/ui'
+
+// Configurador del menú de la web pública (doc 10 ampliado): mezcla páginas
+// del CRM y "rutas" propias del juego bajo un árbol de UN nivel (los grupos
+// son carpetas del admin; una página o ruta puede colgar de un grupo, un
+// grupo no puede colgar de otro). Filas tipo PageBlocks (no cards):
+// subir/bajar dentro de su nivel, interruptor de visibilidad, select de
+// grupo y, en grupos, editar label + borrar. Agnóstico de i18n (DC-29):
+// todos los textos por prop; `routeLabels` los pone el juego.
+
+export interface MenuManagerLabels {
+  newGroup: string
+  newGroupTitle: string
+  editGroupTitle: string
+  groupLabel: string
+  save: string
+  cancel: string
+  delete: string
+  confirmDelete: string
+  empty: string
+  root: string
+  hidden: string
+  draft: string
+  moveUp: string
+  moveDown: string
+  visible: string
+  group: string
+  error: string
+}
+
+const defaultLabels: MenuManagerLabels = {
+  newGroup: 'Nuevo grupo',
+  newGroupTitle: 'Nuevo grupo',
+  editGroupTitle: 'Editar grupo',
+  groupLabel: 'Nombre del grupo',
+  save: 'Guardar',
+  cancel: 'Cancelar',
+  delete: 'Borrar',
+  confirmDelete: '¿Borrar este grupo? Sus elementos pasarán a la raíz.',
+  empty: 'El menú aún no tiene elementos.',
+  root: '— Raíz —',
+  hidden: 'Oculto',
+  draft: 'Borrador',
+  moveUp: 'Subir',
+  moveDown: 'Bajar',
+  visible: 'Visible',
+  group: 'Grupo',
+  error: 'No se ha podido completar la acción.',
+}
+
+const props = withDefaults(
+  defineProps<{
+    api: AxiosInstance
+    locales: { code: string; name: string }[]
+    /** Etiqueta visible de cada route_key que el juego ofrece al menú. */
+    routeLabels?: Record<string, string>
+    labels?: Partial<MenuManagerLabels>
+  }>(),
+  { routeLabels: () => ({}), labels: () => ({}) },
+)
+
+const L = reactive({ ...defaultLabels, ...props.labels }) as MenuManagerLabels
+
+const toast = useToast()
+const { confirm } = useConfirm()
+
+interface MenuPageInfo {
+  id: number
+  title: Record<string, string>
+  is_published: boolean
+}
+
+interface MenuNode {
+  id: number
+  type: 'page' | 'route' | 'group'
+  is_visible: boolean
+  order: number
+  route_key: string | null
+  label: Record<string, string> | null
+  page: MenuPageInfo | null
+  children: MenuNode[]
+}
+
+const tree = ref<MenuNode[]>([])
+const busy = ref(false)
+
+async function load() {
+  try {
+    const { data } = await props.api.get('/admin/menu')
+    tree.value = data.data
+  } catch {
+    toast.danger(L.error)
+  }
+}
+
+// Filas aplanadas para pintar (profundidad máxima 1: hijos de un grupo,
+// indentados justo debajo de él — un grupo no puede colgar de otro).
+interface Row {
+  node: MenuNode
+  depth: 0 | 1
+  parentId: number | null
+}
+const rows = computed<Row[]>(() => {
+  const out: Row[] = []
+  for (const node of tree.value) {
+    out.push({ node, depth: 0, parentId: null })
+    if (node.type === 'group') {
+      for (const child of node.children) out.push({ node: child, depth: 1, parentId: node.id })
+    }
+  }
+  return out
+})
+
+const groups = computed(() => tree.value.filter((n) => n.type === 'group'))
+
+function siblingIds(parentId: number | null): number[] {
+  if (parentId === null) return tree.value.map((n) => n.id)
+  return groups.value.find((g) => g.id === parentId)?.children.map((c) => c.id) ?? []
+}
+
+function siblingIndex(row: Row): number {
+  return siblingIds(row.parentId).indexOf(row.node.id)
+}
+
+function canMoveUp(row: Row): boolean {
+  return siblingIndex(row) > 0
+}
+function canMoveDown(row: Row): boolean {
+  const ids = siblingIds(row.parentId)
+  const idx = siblingIndex(row)
+  return idx >= 0 && idx < ids.length - 1
+}
+
+/** Primer texto disponible (agnóstico de locale, patrón EntityRefSelect). */
+function firstText(map: Record<string, string> | null | undefined): string {
+  if (!map) return ''
+  return Object.values(map).find(Boolean) ?? ''
+}
+
+function labelOf(node: MenuNode): string {
+  if (node.type === 'page') return node.page ? firstText(node.page.title) : ''
+  if (node.type === 'route') return props.routeLabels[node.route_key ?? ''] ?? node.route_key ?? ''
+  return firstText(node.label)
+}
+
+async function move(row: Row, direction: 'up' | 'down') {
+  const ids = siblingIds(row.parentId)
+  const idx = ids.indexOf(row.node.id)
+  const swapWith = direction === 'up' ? idx - 1 : idx + 1
+  if (idx < 0 || swapWith < 0 || swapWith >= ids.length) return
+  const next = [...ids]
+  ;[next[idx], next[swapWith]] = [next[swapWith], next[idx]]
+  busy.value = true
+  try {
+    await props.api.post('/admin/menu/reorder', { ids: next })
+    await load()
+  } catch {
+    toast.danger(L.error)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function toggleVisible(row: Row) {
+  busy.value = true
+  try {
+    await props.api.patch(`/admin/menu/${row.node.id}`, { is_visible: !row.node.is_visible })
+    await load()
+  } catch {
+    toast.danger(L.error)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function setGroup(row: Row, value: string) {
+  busy.value = true
+  try {
+    await props.api.patch(`/admin/menu/${row.node.id}`, {
+      parent_id: value ? Number(value) : null,
+    })
+    await load()
+  } catch {
+    toast.danger(L.error)
+  } finally {
+    busy.value = false
+  }
+}
+
+// Modal de grupo (crear / editar label), compartido.
+const modalOpen = ref(false)
+const editingGroup = ref<MenuNode | null>(null)
+const groupLabelForm = ref<Record<string, string>>({})
+const saving = ref(false)
+
+function openCreateGroup() {
+  editingGroup.value = null
+  groupLabelForm.value = {}
+  modalOpen.value = true
+}
+
+function openEditGroup(node: MenuNode) {
+  editingGroup.value = node
+  groupLabelForm.value = { ...(node.label ?? {}) }
+  modalOpen.value = true
+}
+
+async function saveGroup() {
+  saving.value = true
+  try {
+    if (editingGroup.value) {
+      await props.api.patch(`/admin/menu/${editingGroup.value.id}`, { label: groupLabelForm.value })
+    } else {
+      await props.api.post('/admin/menu/groups', { label: groupLabelForm.value })
+    }
+    modalOpen.value = false
+    await load()
+  } catch {
+    toast.danger(L.error)
+  } finally {
+    saving.value = false
+  }
+}
+
+async function removeGroup(node: MenuNode) {
+  const ok = await confirm({
+    message: L.confirmDelete,
+    confirmLabel: L.delete,
+    cancelLabel: L.cancel,
+    variant: 'danger',
+  })
+  if (!ok) return
+  busy.value = true
+  try {
+    await props.api.delete(`/admin/menu/${node.id}`)
+    await load()
+  } catch {
+    toast.danger(L.error)
+  } finally {
+    busy.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="menu-manager">
+    <div class="menu-manager__bar">
+      <BaseButton :disabled="busy" @click="openCreateGroup">
+        <template #icon><Plus :size="16" /></template>
+        {{ L.newGroup }}
+      </BaseButton>
+    </div>
+
+    <p v-if="!rows.length" class="menu-manager__empty">{{ L.empty }}</p>
+
+    <div class="menu-manager__list">
+      <article
+        v-for="row in rows"
+        :key="row.node.id"
+        class="menu-manager__item"
+        :class="{ 'is-child': row.depth === 1, 'is-hidden': !row.node.is_visible }"
+      >
+        <span class="menu-manager__icon">
+          <File v-if="row.node.type === 'page'" :size="16" />
+          <Compass v-else-if="row.node.type === 'route'" :size="16" />
+          <Folder v-else :size="16" />
+        </span>
+
+        <span class="menu-manager__label">{{ labelOf(row.node) }}</span>
+
+        <span class="menu-manager__badges">
+          <span v-if="!row.node.is_visible" class="chip is-missing">{{ L.hidden }}</span>
+          <span
+            v-if="row.node.type === 'page' && row.node.page && !row.node.page.is_published"
+            class="chip is-missing"
+          >
+            {{ L.draft }}
+          </span>
+        </span>
+
+        <span class="menu-manager__moves">
+          <button
+            type="button"
+            class="menu-manager__move"
+            :title="L.moveUp"
+            :aria-label="L.moveUp"
+            :disabled="busy || !canMoveUp(row)"
+            @click="move(row, 'up')"
+          >
+            <ArrowUp :size="14" />
+          </button>
+          <button
+            type="button"
+            class="menu-manager__move"
+            :title="L.moveDown"
+            :aria-label="L.moveDown"
+            :disabled="busy || !canMoveDown(row)"
+            @click="move(row, 'down')"
+          >
+            <ArrowDown :size="14" />
+          </button>
+        </span>
+
+        <button
+          type="button"
+          class="menu-manager__visibility"
+          :class="row.node.is_visible ? 'is-on' : 'is-off'"
+          :aria-pressed="row.node.is_visible"
+          :title="L.visible"
+          :disabled="busy"
+          @click="toggleVisible(row)"
+        >
+          <Eye v-if="row.node.is_visible" :size="15" />
+          <EyeOff v-else :size="15" />
+        </button>
+
+        <BaseSelect
+          v-if="row.node.type !== 'group'"
+          class="menu-manager__group-select"
+          :model-value="row.parentId === null ? '' : String(row.parentId)"
+          :options="[
+            { value: '', label: L.root },
+            ...groups.map((g) => ({ value: String(g.id), label: labelOf(g) })),
+          ]"
+          @update:model-value="(v: string) => setGroup(row, v)"
+        />
+
+        <span v-if="row.node.type === 'group'" class="menu-manager__group-actions">
+          <button
+            type="button"
+            class="menu-manager__edit"
+            :title="L.editGroupTitle"
+            :aria-label="L.editGroupTitle"
+            @click="openEditGroup(row.node)"
+          >
+            <SquarePen :size="15" />
+          </button>
+          <button
+            type="button"
+            class="menu-manager__delete"
+            :title="L.delete"
+            :aria-label="L.delete"
+            @click="removeGroup(row.node)"
+          >
+            <Trash2 :size="15" />
+          </button>
+        </span>
+      </article>
+    </div>
+
+    <EditModal
+      v-model="modalOpen"
+      :title="editingGroup ? L.editGroupTitle : L.newGroupTitle"
+      :submit-label="L.save"
+      :cancel-label="L.cancel"
+      :loading="saving"
+      @submit="saveGroup"
+    >
+      <TranslatableInput
+        v-model="groupLabelForm"
+        :locales="locales"
+        :label="L.groupLabel"
+        required
+      />
+    </EditModal>
+  </div>
+</template>

package/src/index.ts

@@ -24,6 +24,9 @@ export { useResource, type ResourceMeta } from './crud/useResource'
 // CRM de páginas y bloques (doc 03): editor dirigido por esquema.
 export { default as SchemaFields, type FieldSchema } from './content/SchemaFields.vue'
 export { default as PageBlocks, type PageBlocksLabels } from './content/PageBlocks.vue'
+// Configurador del menú público (doc 10 ampliado): páginas del CRM + rutas
+// del juego, reordenables y agrupables. Agnóstico de i18n (DC-29).
+export { default as MenuManager, type MenuManagerLabels } from './content/MenuManager.vue'
 // Subidas de imagen diferidas al guardar (uploads de contenido sin huérfanos):
 // las usan PageBlocks y las vistas del cascarón (Ajustes, form de página).
 export {