@rimelight/ui 0.0.42 → 0.0.44

package/src/components/editor/views/PageEditView.vue

@@ -1,195 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch, nextTick } from "vue"
-import type { Page, PageVersion, PageDefinition } from "../types/pages"
-import { getPageResolutionPath } from "../utils/page"
-import PageEditor from "../PageEditor.vue"
-
-export interface PageEditViewProps {
-  lookupPath?: string
-  fetchUrl?: string
-  cacheKey?: string
-  pageDefinitions: Record<string, PageDefinition>
-  baseUrl: string
-  hierarchyPath?: string
-  isAdmin?: boolean
-  backUrl?: string
-}
-
-const {
-  lookupPath,
-  fetchUrl,
-  cacheKey,
-  pageDefinitions,
-  baseUrl,
-  hierarchyPath,
-  isAdmin = false,
-  backUrl
-} = defineProps<PageEditViewProps>()
-
-const resolvedFetchUrl = computed(() => getPageResolutionPath(lookupPath || fetchUrl || ""))
-const isSaving = ref(false)
-const currentVersionId = ref<string | null>(null)
-const editorRef = ref<{
-  resetHistory: () => void
-} | null>(null)
-const localPage = ref<Page | null>(null)
-const pageData = ref<Page | null>(null)
-const pageStatus = ref<"idle" | "pending" | "success" | "error">("idle")
-
-const fetchPageDetails = async () => {
-  if (!resolvedFetchUrl.value) return
-  pageStatus.value = "pending"
-  try {
-    const res = await fetch(resolvedFetchUrl.value)
-    if (!res.ok) throw new Error("Failed to fetch")
-    const data = await res.json()
-    pageData.value = data
-    localPage.value = JSON.parse(JSON.stringify(data))
-    pageStatus.value = "success"
-  } catch (err) {
-    pageStatus.value = "error"
-  }
-}
-
-watch(() => resolvedFetchUrl.value, fetchPageDetails, { immediate: true })
-
-const resolvePage = async (idOrSlug: string): Promise<Pick<Page, "title" | "icon" | "slug">> => {
-  const url = getPageResolutionPath(idOrSlug)
-  if (!url) throw new Error(`[Editor] Invalid page reference: ${idOrSlug}`)
-  const res = await fetch(`${url}?select=title,icon,slug`)
-  if (!res.ok) throw new Error(`[Editor] Page not found: ${idOrSlug}`)
-  return await res.json()
-}
-
-const fetchPages = async () => {
-  const types = Object.keys(pageDefinitions).join(",")
-  const prefix = (hierarchyPath ?? baseUrl).replace(/^\/|\/$/g, "")
-  const res = await fetch(
-    `/api/pages/list?select=title,slug,type,id&types=${types}&prefix=${prefix}`
-  )
-  if (!res.ok) throw new Error("Failed to fetch page list")
-  return await res.json()
-}
-
-const handleSave = async (updatedPage: Page): Promise<void> => {
-  if (!updatedPage.id) return
-  isSaving.value = true
-  try {
-    await fetch(`/api/pages/id/${updatedPage.id}`, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(updatedPage)
-    })
-    await fetchPageDetails()
-    await nextTick()
-    editorRef.value?.resetHistory()
-  } catch (e) {
-    console.error(e)
-  } finally {
-    isSaving.value = false
-  }
-}
-
-const handlePublish = async (updatedPage: Page): Promise<void> => {
-  if (!updatedPage.id) return
-  isSaving.value = true
-  try {
-    await fetch(`/api/pages/id/${updatedPage.id}/publish`, {
-      method: "POST"
-    })
-    const base = baseUrl.replace(/\/$/, "")
-    const cleanBase = base.replace(/^\//, "")
-    const slugToUse = updatedPage.slug.startsWith(cleanBase)
-      ? updatedPage.slug
-      : `${cleanBase}/${updatedPage.slug}`
-    if (typeof window !== "undefined") {
-      window.location.href = `/${slugToUse}`
-    }
-  } catch (e) {
-    console.error(e)
-  } finally {
-    isSaving.value = false
-  }
-}
-
-const handleUnpublish = async (updatedPage: Page): Promise<void> => {
-  if (!updatedPage.id) return
-  isSaving.value = true
-  try {
-    await fetch(`/api/pages/id/${updatedPage.id}/unpublish`, {
-      method: "POST"
-    })
-    await fetchPageDetails()
-  } catch (e) {
-    console.error(e)
-  } finally {
-    isSaving.value = false
-  }
-}
-
-const handleDelete = async (id: string) => {
-  try {
-    await fetch(`/api/pages/id/${id}`, {
-      method: "DELETE"
-    })
-    const dest = backUrl || baseUrl
-    if (typeof window !== "undefined") {
-      window.location.href = dest
-    }
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-const handleVersionNavigate = (version: PageVersion) => {
-  if (!version?.id || !localPage.value?.slug) return
-  const base = baseUrl.replace(/\/$/, "")
-  const cleanBase = base.replace(/^\//, "")
-  const slugToUse = localPage.value.slug.startsWith(cleanBase)
-    ? localPage.value.slug
-    : `${cleanBase}/${localPage.value.slug}`
-  if (typeof window !== "undefined") {
-    window.location.href = `/${slugToUse}/review?version=${version.id}`
-  }
-}
-
-const handleNavigateToPage = (slug: string) => {
-  const base = baseUrl.replace(/\/$/, "")
-  const cleanBase = base.replace(/^\//, "")
-  const slugToUse = slug.startsWith(cleanBase) ? slug : `${cleanBase}/${slug}`
-  if (typeof window !== "undefined") {
-    window.location.href = `/${slugToUse}/edit`
-  }
-}
-
-defineOptions({ name: "PageEditView" })
-</script>
-
-<template>
-  <div v-if="pageStatus === 'pending'" class="h-full w-full flex items-center justify-center p-12">
-    <span class="i-lucide-loader-2 size-12 animate-spin text-neutral-400" />
-  </div>
-  <div v-else-if="pageStatus === 'error' || !localPage" class="p-8 text-center">
-    <h3 class="text-lg font-bold text-red-600">Page Not Found</h3>
-    <p class="text-neutral-500 mt-2">The requested page could not be loaded.</p>
-  </div>
-  <template v-else-if="localPage && localPage.id">
-    <PageEditor
-      ref="editorRef"
-      v-model="localPage"
-      v-model:current-version-id="currentVersionId"
-      :is-saving="isSaving"
-      :is-admin="isAdmin"
-      :base-path="(hierarchyPath ?? baseUrl).replace(/^\/|\/$/g, '')"
-      :page-definitions="pageDefinitions"
-      :resolve-page="resolvePage"
-      :on-fetch-pages="fetchPages"
-      :on-delete-page="handleDelete"
-      :on-navigate-to-page="handleNavigateToPage"
-      @save="handleSave"
-      @publish="handlePublish"
-      @unpublish="handleUnpublish"
-      @version-navigate="handleVersionNavigate"
-    />
-  </template>
-</template>

package/src/components/editor/views/PageLiveView.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from "vue"
-import type { Page } from "../types/pages"
-import { getPageResolutionPath } from "../utils/page"
-import PageRenderer from "../PageRenderer.vue"
-
-export interface PageLiveViewProps {
-  lookupPath?: string
-  fetchUrl?: string
-  cacheKey?: string
-  baseUrl: string
-  canEdit?: boolean
-}
-const {
-  lookupPath,
-  fetchUrl,
-  cacheKey,
-  baseUrl,
-  canEdit = false
-} = defineProps<PageLiveViewProps>()
-
-const resolvedFetchUrl = computed(() => getPageResolutionPath(lookupPath || fetchUrl || ""))
-const page = ref<Page | null>(null)
-const pageStatus = ref<"idle" | "pending" | "success" | "error">("idle")
-
-const fetchPage = async () => {
-  if (!resolvedFetchUrl.value) return
-  pageStatus.value = "pending"
-  try {
-    const res = await fetch(resolvedFetchUrl.value)
-    if (!res.ok) throw new Error("Failed to fetch page")
-    const data = await res.json()
-    page.value = data
-    pageStatus.value = "success"
-  } catch (err) {
-    pageStatus.value = "error"
-  }
-}
-
-watch(() => resolvedFetchUrl.value, fetchPage, { immediate: true })
-
-const resolvePage = async (idOrSlug: string) => {
-  if (!idOrSlug) return null
-  const clean = idOrSlug.replace(/^\//, "")
-  try {
-    const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(clean)
-    const url = isUuid ? `/api/pages/id/${clean}` : `/api/pages/find/${clean}`
-    const res = await fetch(url)
-    if (res.ok) return await res.json()
-    const res2 = await fetch(`/api/pages/find/${clean}`)
-    if (res2.ok) return await res2.json()
-    return null
-  } catch (err) {
-    console.warn("[PageLiveView resolvePage Error]:", err)
-    return null
-  }
-}
-
-const editUrl = computed(() => {
-  const base = baseUrl.replace(/\/$/, "")
-  if (page.value?.slug) {
-    const slug = page.value.slug
-    const cleanBase = base.replace(/^\//, "")
-    if (slug.startsWith(cleanBase)) {
-      return `/${slug}/edit`
-    }
-    return `${base}/${slug}/edit`
-  }
-  return `${base}/edit`
-})
-
-defineOptions({ name: "PageLiveView" })
-</script>
-
-<template>
-  <div v-if="pageStatus === 'pending'" class="h-full w-full flex items-center justify-center p-12">
-    <span class="i-lucide-loader-2 size-12 animate-spin text-neutral-400" />
-  </div>
-  <div v-else-if="pageStatus === 'error' || !page" class="p-8 text-center">
-    <h3 class="text-lg font-bold text-red-600">Page Not Found</h3>
-    <p class="text-neutral-500 mt-2">The requested page could not be located.</p>
-  </div>
-  <PageRenderer
-    v-else
-    v-model="page"
-    :resolve-page="resolvePage"
-    :can-edit="canEdit"
-    :edit-url="editUrl"
-  />
-</template>

package/src/components/editor/views/PageReviewView.vue

@@ -1,308 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from "vue"
-import type { Page, PageVersion, PageDefinition } from "../types/pages"
-import {
-  convertVersionToPage,
-  syncPageWithDefinition,
-  getPageResolutionPath,
-  getLocalizedContent
-} from "../utils/page"
-import { useI18n } from "../utils/editorHelpers"
-import PageRenderer from "../PageRenderer.vue"
-import RLVButton from "../../button/RLVButton.vue"
-import PageVersionSelector from "../PageVersionSelector.vue"
-
-export interface PageReviewViewProps {
-  lookupPath: string
-  versionId?: string | null
-  pageDefinitions: Record<string, PageDefinition>
-  baseUrl: string
-  isAdmin?: boolean
-}
-
-const {
-  lookupPath,
-  versionId,
-  pageDefinitions,
-  baseUrl,
-  isAdmin = false
-} = defineProps<PageReviewViewProps>()
-
-export interface PageReviewViewEmits {
-  approved: [version: PageVersion]
-  rejected: [version: PageVersion]
-}
-const emit = defineEmits<PageReviewViewEmits>()
-
-const { t, locale } = useI18n()
-
-const page = ref<Page | null>(null)
-const pageStatus = ref<"idle" | "pending" | "success" | "error">("idle")
-
-const fetchBasePage = async () => {
-  const url = getPageResolutionPath(lookupPath)
-  if (!url) return
-  pageStatus.value = "pending"
-  try {
-    const res = await fetch(url)
-    if (!res.ok) throw new Error("Failed to fetch page")
-    page.value = await res.json()
-    pageStatus.value = "success"
-  } catch (err) {
-    pageStatus.value = "error"
-  }
-}
-
-const versionData = ref<PageVersion | null>(null)
-const versionStatus = ref<"idle" | "pending" | "success" | "error">("idle")
-
-const fetchVersionData = async () => {
-  if (!versionId) {
-    versionData.value = null
-    return
-  }
-  versionStatus.value = "pending"
-  try {
-    const res = await fetch(`/api/pages/versions/${versionId}`)
-    if (!res.ok) throw new Error("Failed to fetch version")
-    versionData.value = await res.json()
-    versionStatus.value = "success"
-  } catch (err) {
-    versionStatus.value = "error"
-  }
-}
-
-watch(() => lookupPath, fetchBasePage, { immediate: true })
-watch(() => versionId, fetchVersionData, { immediate: true })
-
-const localPage = ref<Page | null>(null)
-watch(
-  [page, versionData],
-  () => {
-    if (versionId && versionData.value) {
-      const converted = convertVersionToPage(versionData.value)
-      const typeKey = Object.keys(pageDefinitions).find(
-        (k) => k.toLowerCase() === converted.type?.toLowerCase()
-      )
-      const definition = typeKey ? pageDefinitions[typeKey] : null
-      if (definition) {
-        syncPageWithDefinition(converted, definition)
-      }
-      localPage.value = converted
-    } else if (page.value) {
-      const cloned = JSON.parse(JSON.stringify(page.value))
-      const typeKey = Object.keys(pageDefinitions).find(
-        (k) => k.toLowerCase() === cloned.type?.toLowerCase()
-      )
-      const definition = typeKey ? pageDefinitions[typeKey] : null
-      if (definition) {
-        syncPageWithDefinition(cloned, definition)
-      }
-      localPage.value = cloned
-    }
-  },
-  { immediate: true }
-)
-
-const showCompare = ref(false)
-const leftWidth = ref(50)
-const isActioning = ref<string | null>(null)
-
-const resolvePage = async (idOrSlug: string): Promise<Pick<Page, "title" | "icon" | "slug">> => {
-  const url = getPageResolutionPath(idOrSlug)
-  if (!url) throw new Error(`[Review] Invalid page reference: ${idOrSlug}`)
-  const res = await fetch(`${url}?select=title,icon,slug`)
-  if (!res.ok) throw new Error(`[Review] Page not found: ${idOrSlug}`)
-  return await res.json()
-}
-
-const navigateToView = () => {
-  if (typeof window !== "undefined") {
-    window.location.href = `/${relativeSlug.value}`
-  }
-}
-
-const navigateToVersion = (v: PageVersion) => {
-  if (typeof window !== "undefined") {
-    window.location.search = `?version=${v.id}`
-  }
-}
-
-const handleApprove = async () => {
-  if (!versionId || !isAdmin) return
-  isActioning.value = "approving"
-  try {
-    await fetch(`/api/pages/versions/${versionId}/approve`, { method: "POST" })
-    await fetchBasePage()
-    if (versionData.value) {
-      emit("approved", versionData.value)
-    }
-    if (page.value?.slug) {
-      const base = baseUrl.replace(/\/$/, "")
-      const cleanBase = base.replace(/^\//, "")
-      const slugToUse = page.value.slug.startsWith(cleanBase)
-        ? page.value.slug
-        : `${cleanBase}/${page.value.slug}`
-      if (typeof window !== "undefined") {
-        window.location.href = `/${slugToUse}`
-      }
-    }
-  } catch (e) {
-    console.error(e)
-  } finally {
-    isActioning.value = null
-  }
-}
-
-const handleReject = async () => {
-  if (!versionId || !isAdmin) return
-  isActioning.value = "rejecting"
-  try {
-    await fetch(`/api/pages/versions/${versionId}/reject`, { method: "POST" })
-    await fetchBasePage()
-    if (versionData.value) {
-      emit("rejected", versionData.value)
-    }
-    if (page.value?.slug) {
-      const base = baseUrl.replace(/\/$/, "")
-      const cleanBase = base.replace(/^\//, "")
-      const slugToUse = page.value.slug.startsWith(cleanBase)
-        ? page.value.slug
-        : `${cleanBase}/${page.value.slug}`
-      if (typeof window !== "undefined") {
-        window.location.href = `/${slugToUse}/edit`
-      }
-    }
-  } catch (e) {
-    console.error(e)
-  } finally {
-    isActioning.value = null
-  }
-}
-
-const relativeSlug = computed(() => {
-  if (page.value?.slug) return page.value.slug
-  const base = baseUrl.replace(/^\/|\/$/g, "")
-  return lookupPath.replace(base, "").replace(/^\/|\/$/g, "")
-})
-
-defineOptions({ name: "PageReviewView" })
-</script>
-
-<template>
-  <div
-    v-if="pageStatus === 'pending' || (versionId && versionStatus === 'pending')"
-    class="h-full w-full flex items-center justify-center p-12"
-  >
-    <span class="i-lucide-loader-2 size-12 animate-spin text-neutral-400" />
-  </div>
-
-  <div
-    v-else-if="pageStatus === 'error' || versionStatus === 'error' || !localPage"
-    class="p-8 text-center"
-  >
-    <h3 class="text-lg font-bold text-red-600">Version Not Found</h3>
-    <p class="text-neutral-500 mt-2">The requested page version could not be located.</p>
-  </div>
-
-  <template v-else>
-    <div
-      class="h-12 w-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between px-4 border-b border-default"
-    >
-      <div class="flex items-center gap-2">
-        <span class="text-xs text-neutral-500 font-medium">
-          Reviewing:
-          <span class="text-neutral-900 dark:text-white font-semibold">
-            {{ getLocalizedContent(localPage?.title, locale) }}
-          </span>
-        </span>
-        <span class="w-px h-4 bg-neutral-200 dark:bg-neutral-700 mx-2" />
-        <PageVersionSelector
-          v-if="page?.id"
-          :page-id="page.id"
-          :current-version-id="versionId || undefined"
-          :is-admin="isAdmin"
-          @version-selected="navigateToVersion"
-        />
-      </div>
-
-      <div class="flex items-center gap-2">
-        <RLVButton
-          color="neutral"
-          variant="ghost"
-          leading-leading-icon="i-lucide-external-link"
-          :label="t('page_editor.view_page', 'View Page')"
-          @click="navigateToView"
-        />
-        <RLVButton
-          color="neutral"
-          variant="ghost"
-          :leading-leading-icon="showCompare ? 'i-lucide-eye-off' : 'i-lucide-eye'"
-          :label="showCompare ? 'Hide' : 'Compare'"
-          @click="showCompare = !showCompare"
-        />
-        <span class="w-px h-4 bg-neutral-200 dark:bg-neutral-700 mx-2" />
-
-        <template v-if="isAdmin && versionId && versionData?.status === 'pending'">
-          <RLVButton
-            leading-leading-icon="i-lucide-x"
-            :label="t('common.reject', 'Reject')"
-            color="danger"
-            variant="outline"
-            :loading="isActioning === 'rejecting'"
-            @click="handleReject"
-          />
-          <RLVButton
-            leading-leading-icon="i-lucide-check"
-            :label="t('common.approve', 'Approve Version')"
-            color="primary"
-            :loading="isActioning === 'approving'"
-            @click="handleApprove"
-          />
-        </template>
-
-        <template v-else-if="versionId && versionData?.status === 'approved'">
-          <span
-            class="text-xs bg-green-500/10 text-green-600 px-2.5 py-1 rounded-md font-medium border border-green-500/20"
-          >
-            Version Already Approved
-          </span>
-        </template>
-
-        <template v-else-if="versionId && versionData?.status === 'rejected'">
-          <span
-            class="text-xs bg-red-500/10 text-red-600 px-2.5 py-1 rounded-md font-medium border border-green-500/20"
-          >
-            Version Rejected
-          </span>
-        </template>
-      </div>
-    </div>
-
-    <div class="flex w-full min-h-0">
-      <div :style="{ width: showCompare ? `${leftWidth}%` : '100%' }" class="overflow-y-auto">
-        <PageRenderer
-          v-if="localPage"
-          :key="versionId || 'live'"
-          v-model="localPage"
-          :resolve-page="resolvePage"
-          class="h-full"
-        />
-      </div>
-
-      <div
-        v-if="showCompare"
-        :style="{ width: `${100 - leftWidth}%` }"
-        class="overflow-y-auto border-l border-default bg-neutral-50/50 dark:bg-neutral-900/10"
-      >
-        <PageRenderer
-          v-if="page"
-          :key="'live-base-' + page.id"
-          :model-value="page"
-          :resolve-page="resolvePage"
-          class="opacity-70 pointer-events-none select-none h-full"
-        />
-      </div>
-    </div>
-  </template>
-</template>