@edgedev/create-edge-app 1.1.26 → 1.1.28

package/edge/components/cms/page.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { AlertTriangle, ArrowDown, ArrowUp, Maximize2, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
+import { AlertTriangle, ArrowDown, ArrowUp, Maximize2, Monitor, Smartphone, Sparkles, Tablet, UploadCloud } from 'lucide-vue-next'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 const props = defineProps({
@@ -20,6 +20,7 @@ const props = defineProps({
 const emit = defineEmits(['head'])
 
 const edgeFirebase = inject('edgeFirebase')
+const { buildPageStructuredData } = useStructuredDataTemplates()
 
 const state = reactive({
   newDocs: {
@@ -29,11 +30,17 @@ const state = reactive({
       postContent: { value: [] },
       structure: { value: [] },
       postStructure: { value: [] },
+      metaTitle: { value: '' },
+      metaDescription: { value: '' },
+      structuredData: { value: buildPageStructuredData() },
     },
   },
   editMode: false,
   showUnpublishedChangesDialog: false,
+  publishLoading: false,
   workingDoc: {},
+  seoAiLoading: false,
+  seoAiError: '',
   previewViewport: 'full',
   newRowLayout: '6',
   newPostRowLayout: '6',
@@ -200,6 +207,40 @@ const ensureBlocksArray = (workingDoc, key) => {
   }
 }
 
+const applySeoAiResults = (payload) => {
+  if (!payload || typeof payload !== 'object')
+    return
+  if (payload.metaTitle)
+    state.workingDoc.metaTitle = payload.metaTitle
+  if (payload.metaDescription)
+    state.workingDoc.metaDescription = payload.metaDescription
+  if (payload.structuredData)
+    state.workingDoc.structuredData = payload.structuredData
+}
+
+const updateSeoWithAi = async () => {
+  if (!edgeFirebase?.user?.uid)
+    return
+  state.seoAiLoading = true
+  state.seoAiError = ''
+  try {
+    const results = await edgeFirebase.runFunction('cms-updateSeoFromAi', {
+      orgId: edgeGlobal.edgeState.currentOrganization,
+      siteId: props.site,
+      pageId: props.page,
+      uid: edgeFirebase.user.uid,
+    })
+    applySeoAiResults(results?.data || {})
+  }
+  catch (error) {
+    console.error('Failed to update SEO with AI', error)
+    state.seoAiError = 'Failed to update SEO. Try again.'
+  }
+  finally {
+    state.seoAiLoading = false
+  }
+}
+
 const createRow = (columns = 1) => {
   const row = {
     id: edgeGlobal.generateShortId(),
@@ -398,6 +439,54 @@ const blockPick = (block, index, slotProps, post = false) => {
   }
 }
 
+const applyCollectionUniqueKeys = (workingDoc) => {
+  const resolveUniqueKey = (template) => {
+    if (!template || typeof template !== 'string')
+      return ''
+    let resolved = template
+    const orgId = edgeGlobal.edgeState.currentOrganization || ''
+    const siteId = props.site || ''
+    if (resolved.includes('{orgId}') && orgId)
+      resolved = resolved.replaceAll('{orgId}', orgId)
+    if (resolved.includes('{siteId}') && siteId)
+      resolved = resolved.replaceAll('{siteId}', siteId)
+    return resolved
+  }
+
+  const applyToBlocks = (blocks) => {
+    if (!Array.isArray(blocks))
+      return
+    blocks.forEach((block) => {
+      const meta = block?.meta
+      if (!meta || typeof meta !== 'object')
+        return
+      Object.keys(meta).forEach((fieldKey) => {
+        const cfg = meta[fieldKey]
+        if (!cfg?.collection?.uniqueKey)
+          return
+        const resolved = resolveUniqueKey(cfg.collection.uniqueKey)
+        if (!resolved)
+          return
+        if (cfg.queryItems && !Object.prototype.hasOwnProperty.call(cfg, 'uniqueKey')) {
+          const reordered = {}
+          Object.keys(cfg).forEach((key) => {
+            reordered[key] = cfg[key]
+            if (key === 'queryItems')
+              reordered.uniqueKey = resolved
+          })
+          block.meta[fieldKey] = reordered
+        }
+        else {
+          cfg.uniqueKey = resolved
+        }
+      })
+    })
+  }
+
+  applyToBlocks(workingDoc?.content)
+  applyToBlocks(workingDoc?.postContent)
+}
+
 onMounted(() => {
   if (props.page === 'new') {
     state.editMode = true
@@ -408,6 +497,7 @@ const editorDocUpdates = (workingDoc) => {
   ensureStructureDefaults(workingDoc, false)
   if (workingDoc?.post || (Array.isArray(workingDoc?.postContent) && workingDoc.postContent.length > 0) || Array.isArray(workingDoc?.postStructure))
     ensureStructureDefaults(workingDoc, true)
+  applyCollectionUniqueKeys(workingDoc)
   const blockIds = (workingDoc.content || []).map(block => block.blockId).filter(id => id)
   const postBlockIds = workingDoc.postContent ? workingDoc.postContent.map(block => block.blockId).filter(id => id) : []
   blockIds.push(...postBlockIds)
@@ -520,6 +610,15 @@ const layoutSpansFromString = (value, fallback = [6]) => {
 
 const rowUsesSpans = row => (row?.columns || []).some(col => Number.isFinite(col?.span))
 
+const rowGapClass = (row) => {
+  const gap = Number(row?.gap)
+  const allowed = new Set([0, 2, 4, 6, 8])
+  const safeGap = allowed.has(gap) ? gap : 4
+  if (safeGap === 0)
+    return 'gap-0'
+  return ['gap-0', `sm:gap-${safeGap}`].join(' ')
+}
+
 const rowGridClass = (row) => {
   const base = isMobilePreview.value
     ? 'grid grid-cols-1'
@@ -542,15 +641,6 @@ const rowVerticalAlignClass = (row) => {
   return map[row?.verticalAlign] || map.start
 }
 
-const rowGapClass = (row) => {
-  const gap = Number(row?.gap)
-  const allowed = new Set([0, 2, 4, 6, 8])
-  const safeGap = allowed.has(gap) ? gap : 4
-  if (safeGap === 0)
-    return 'gap-0'
-  return ['gap-0', `sm:gap-${safeGap}`].join(' ')
-}
-
 const rowGridStyle = (row) => {
   if (isMobilePreview.value)
     return {}
@@ -1001,6 +1091,21 @@ const unpublishedChangeDetails = computed(() => {
   return changes
 })
 
+const publishPage = async (pageId) => {
+  if (state.publishLoading)
+    return
+  const pageData = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/sites/${props.site}/pages`] || {}
+  if (!pageData[pageId])
+    return
+  state.publishLoading = true
+  try {
+    await edgeFirebase.storeDoc(`${edgeGlobal.edgeState.organizationDocPath}/sites/${props.site}/published`, pageData[pageId])
+  }
+  finally {
+    state.publishLoading = false
+  }
+}
+
 const hasUnsavedChanges = (changes) => {
   console.log('Unsaved changes:', changes)
   if (changes === true) {
@@ -1034,14 +1139,25 @@ const hasUnsavedChanges = (changes) => {
           <div class="w-full border-t border-gray-300 dark:border-white/15" aria-hidden="true" />
           <div v-if="!props.isTemplateSite" class="px-4 text-gray-600 dark:text-gray-300 whitespace-nowrap text-center flex flex-col items-center gap-1">
             <template v-if="isPublishedPageDiff(page)">
-              <edge-shad-button
-                variant="outline"
-                class="bg-yellow-100 text-yellow-800 border-yellow-300 hover:bg-yellow-100 hover:text-yellow-900 text-xs h-[32px] gap-1"
-                @click="state.showUnpublishedChangesDialog = true"
-              >
-                <AlertTriangle class="w-4 h-4" />
-                Unpublished Changes
-              </edge-shad-button>
+              <div class="flex items-center gap-2">
+                <edge-shad-button
+                  variant="outline"
+                  class="bg-yellow-100 text-yellow-800 border-yellow-300 hover:bg-yellow-100 hover:text-yellow-900 text-xs h-[32px] gap-1"
+                  @click="state.showUnpublishedChangesDialog = true"
+                >
+                  <AlertTriangle class="w-4 h-4" />
+                  Unpublished Changes
+                </edge-shad-button>
+                <edge-shad-button
+                  class="bg-primary text-primary-foreground hover:bg-primary/90 text-xs h-[32px] gap-1 shadow-sm"
+                  :disabled="state.publishLoading"
+                  @click="publishPage(page)"
+                >
+                  <Loader2 v-if="state.publishLoading" class="w-4 h-4 animate-spin" />
+                  <UploadCloud v-else class="w-4 h-4" />
+                  Publish
+                </edge-shad-button>
+              </div>
             </template>
             <template v-else>
               <edge-chip class="bg-green-100 text-green-800">
@@ -1121,6 +1237,23 @@ const hasUnsavedChanges = (changes) => {
         </div>
       </div>
     </template>
+    <template #success-alert>
+      <div v-if="!props.isTemplateSite" class="mt-2 flex flex-wrap items-center gap-2">
+        <edge-shad-button
+          variant="outline"
+          class="text-xs h-[28px] gap-1"
+          :disabled="state.seoAiLoading"
+          @click="updateSeoWithAi"
+        >
+          <Loader2 v-if="state.seoAiLoading" class="w-3.5 h-3.5 animate-spin" />
+          <Sparkles v-else class="w-3.5 h-3.5" />
+          Update SEO with AI
+        </edge-shad-button>
+        <span v-if="state.seoAiError" class="text-xs text-destructive">
+          {{ state.seoAiError }}
+        </span>
+      </div>
+    </template>
     <template #main="slotProps">
       <Tabs class="w-full" default-value="list">
         <TabsList v-if="slotProps.workingDoc?.post" class="w-full mt-3 bg-primary rounded-sm">