@edgedev/create-edge-app 1.2.33 → 1.2.35

package/edge/routes/cms/dashboard/themes/index.vue

@@ -1,18 +1,281 @@
 <script setup>
+import { useEdgeCmsDialogPositionFix } from '~/edge/composables/useEdgeCmsDialogPositionFix'
+
+const edgeFirebase = inject('edgeFirebase')
+const { themes: themeNewDocSchema } = useCmsNewDocs()
 const state = reactive({
   filter: '',
+  importingJson: false,
+  importDocIdDialogOpen: false,
+  importDocIdValue: '',
+  importConflictDialogOpen: false,
+  importConflictDocId: '',
+  importErrorDialogOpen: false,
+  importErrorMessage: '',
 })
+const themeImportInputRef = ref(null)
+const themeImportDocIdResolver = ref(null)
+const themeImportConflictResolver = ref(null)
+const INVALID_THEME_IMPORT_MESSAGE = 'Invalid file. Please import a valid theme file.'
+
+useEdgeCmsDialogPositionFix()
+
+useEdgeCmsDialogPositionFix()
 
 definePageMeta({
   middleware: 'auth',
 })
+
+const themesCollectionPath = computed(() => `${edgeGlobal.edgeState.organizationDocPath}/themes`)
+const themesCollection = computed(() => edgeFirebase.data?.[themesCollectionPath.value] || {})
+
+const readTextFile = file => new Promise((resolve, reject) => {
+  if (typeof FileReader === 'undefined') {
+    reject(new Error('File import is only available in the browser.'))
+    return
+  }
+  const reader = new FileReader()
+  reader.onload = () => resolve(String(reader.result || ''))
+  reader.onerror = () => reject(new Error('Could not read the selected file.'))
+  reader.readAsText(file)
+})
+
+const normalizeImportedDoc = (payload, fallbackDocId = '') => {
+  if (!payload || typeof payload !== 'object' || Array.isArray(payload))
+    throw new Error(INVALID_THEME_IMPORT_MESSAGE)
+
+  if (payload.document && typeof payload.document === 'object' && !Array.isArray(payload.document)) {
+    const normalized = { ...payload.document }
+    if (!normalized.docId && payload.docId)
+      normalized.docId = payload.docId
+    if (!normalized.docId && fallbackDocId)
+      normalized.docId = fallbackDocId
+    return normalized
+  }
+
+  const normalized = { ...payload }
+  if (!normalized.docId && fallbackDocId)
+    normalized.docId = fallbackDocId
+  return normalized
+}
+
+const isPlainObject = value => !!value && typeof value === 'object' && !Array.isArray(value)
+
+const cloneSchemaValue = (value) => {
+  if (isPlainObject(value) || Array.isArray(value))
+    return edgeGlobal.dupObject(value)
+  return value
+}
+
+const getDocDefaultsFromSchema = (schema = {}) => {
+  const defaults = {}
+  for (const [key, schemaEntry] of Object.entries(schema || {})) {
+    const hasValueProp = isPlainObject(schemaEntry) && Object.prototype.hasOwnProperty.call(schemaEntry, 'value')
+    const baseValue = hasValueProp ? schemaEntry.value : schemaEntry
+    defaults[key] = cloneSchemaValue(baseValue)
+  }
+  return defaults
+}
+
+const getThemeDocDefaults = () => getDocDefaultsFromSchema(themeNewDocSchema.value || {})
+
+const validateImportedThemeDoc = (doc) => {
+  if (!isPlainObject(doc))
+    throw new Error(INVALID_THEME_IMPORT_MESSAGE)
+
+  const requiredKeys = Object.keys(themeNewDocSchema.value || {})
+  const missing = requiredKeys.filter(key => !Object.prototype.hasOwnProperty.call(doc, key))
+  if (missing.length)
+    throw new Error(INVALID_THEME_IMPORT_MESSAGE)
+
+  return doc
+}
+
+const makeUniqueDocId = (baseDocId, docsMap = {}) => {
+  const cleanBase = String(baseDocId || '').trim() || 'theme'
+  let nextDocId = `${cleanBase}-copy`
+  let suffix = 2
+  while (docsMap[nextDocId]) {
+    nextDocId = `${cleanBase}-copy-${suffix}`
+    suffix += 1
+  }
+  return nextDocId
+}
+
+const requestThemeImportDocId = (initialValue = '') => {
+  state.importDocIdValue = String(initialValue || '')
+  state.importDocIdDialogOpen = true
+  return new Promise((resolve) => {
+    themeImportDocIdResolver.value = resolve
+  })
+}
+
+const resolveThemeImportDocId = (value = '') => {
+  const resolver = themeImportDocIdResolver.value
+  themeImportDocIdResolver.value = null
+  state.importDocIdDialogOpen = false
+  if (resolver)
+    resolver(String(value || '').trim())
+}
+
+const requestThemeImportConflict = (docId) => {
+  state.importConflictDocId = String(docId || '')
+  state.importConflictDialogOpen = true
+  return new Promise((resolve) => {
+    themeImportConflictResolver.value = resolve
+  })
+}
+
+const resolveThemeImportConflict = (action = 'cancel') => {
+  const resolver = themeImportConflictResolver.value
+  themeImportConflictResolver.value = null
+  state.importConflictDialogOpen = false
+  if (resolver)
+    resolver(action)
+}
+
+watch(() => state.importDocIdDialogOpen, (open) => {
+  if (!open && themeImportDocIdResolver.value) {
+    const resolver = themeImportDocIdResolver.value
+    themeImportDocIdResolver.value = null
+    resolver('')
+  }
+})
+
+watch(() => state.importConflictDialogOpen, (open) => {
+  if (!open && themeImportConflictResolver.value) {
+    const resolver = themeImportConflictResolver.value
+    themeImportConflictResolver.value = null
+    resolver('cancel')
+  }
+})
+
+const getImportDocId = async (incomingDoc, fallbackDocId = '') => {
+  let nextDocId = String(incomingDoc?.docId || '').trim()
+  if (!nextDocId)
+    nextDocId = await requestThemeImportDocId(fallbackDocId)
+  if (!nextDocId)
+    throw new Error('Import canceled. A docId is required.')
+  if (nextDocId.includes('/'))
+    throw new Error('docId cannot include "/".')
+  return nextDocId
+}
+
+const openImportErrorDialog = (message) => {
+  state.importErrorMessage = String(message || 'Failed to import theme JSON.')
+  state.importErrorDialogOpen = true
+}
+
+const triggerThemeImport = () => {
+  themeImportInputRef.value?.click()
+}
+
+const importSingleThemeFile = async (file, existingThemes = {}) => {
+  const fileText = await readTextFile(file)
+  const parsed = JSON.parse(fileText)
+  const importedDoc = validateImportedThemeDoc(normalizeImportedDoc(parsed, ''))
+  const incomingDocId = await getImportDocId(importedDoc, '')
+  let targetDocId = incomingDocId
+  let importDecision = 'create'
+
+  if (existingThemes[targetDocId]) {
+    const decision = await requestThemeImportConflict(targetDocId)
+    if (decision === 'cancel')
+      return
+    if (decision === 'new') {
+      targetDocId = makeUniqueDocId(targetDocId, existingThemes)
+      if (typeof importedDoc.name === 'string' && importedDoc.name.trim() && !/\(Copy\)$/i.test(importedDoc.name.trim()))
+        importedDoc.name = `${importedDoc.name} (Copy)`
+      importDecision = 'new'
+    }
+    else {
+      importDecision = 'overwrite'
+    }
+  }
+
+  const payload = { ...getThemeDocDefaults(), ...importedDoc, docId: targetDocId }
+  await edgeFirebase.storeDoc(themesCollectionPath.value, payload, targetDocId)
+  existingThemes[targetDocId] = payload
+
+  if (importDecision === 'overwrite')
+    edgeFirebase?.toast?.success?.(`Overwrote theme "${targetDocId}".`)
+  else if (importDecision === 'new')
+    edgeFirebase?.toast?.success?.(`Imported theme as new "${targetDocId}".`)
+  else
+    edgeFirebase?.toast?.success?.(`Imported theme "${targetDocId}".`)
+}
+
+const handleThemeImport = async (event) => {
+  const input = event?.target
+  const files = Array.from(input?.files || [])
+  if (!files.length)
+    return
+
+  state.importingJson = true
+  const existingThemes = { ...(themesCollection.value || {}) }
+  try {
+    for (const file of files) {
+      try {
+        await importSingleThemeFile(file, existingThemes)
+      }
+      catch (error) {
+        console.error('Failed to import theme JSON', error)
+        const message = error?.message || 'Failed to import theme JSON.'
+        if (/^Import canceled\./i.test(message))
+          continue
+        if (error instanceof SyntaxError || message === INVALID_THEME_IMPORT_MESSAGE)
+          openImportErrorDialog(INVALID_THEME_IMPORT_MESSAGE)
+        else
+          openImportErrorDialog(message)
+      }
+    }
+  }
+  finally {
+    state.importingJson = false
+    if (input)
+      input.value = ''
+  }
+}
 </script>
 
 <template>
   <div
     v-if="edgeGlobal.edgeState.organizationDocPath"
   >
-    <edge-dashboard :filter="state.filter" collection="themes" class="pt-0 flex-1">
+    <edge-dashboard
+      :filter="state.filter"
+      collection="themes"
+      class="pt-0 flex-1"
+      header-class="bg-secondary py-2 border"
+    >
+      <template #header-end>
+        <div class="flex items-center gap-2">
+          <input
+            ref="themeImportInputRef"
+            type="file"
+            multiple
+            accept=".json,application/json"
+            class="hidden"
+            @change="handleThemeImport"
+          >
+          <edge-shad-button
+            type="button"
+            size="icon"
+            variant="outline"
+            class="h-9 w-9"
+            :disabled="state.importingJson"
+            title="Import Themes"
+            aria-label="Import Themes"
+            @click="triggerThemeImport"
+          >
+            <Loader2 v-if="state.importingJson" class="h-4 w-4 animate-spin" />
+            <Upload v-else class="h-4 w-4" />
+          </edge-shad-button>
+          <edge-shad-button class="uppercase bg-primary" to="/app/dashboard/themes/new">
+            Add Theme
+          </edge-shad-button>
+        </div>
+      </template>
       <template #list="slotProps">
         <template v-for="item in slotProps.filtered" :key="item.docId">
           <edge-shad-button variant="text" class="cursor-pointer w-full flex justify-between items-center py-2 gap-3" :to="`/app/dashboard/themes/${item.docId}`">
@@ -40,5 +303,71 @@ definePageMeta({
         </template>
       </template>
     </edge-dashboard>
+    <edge-shad-dialog v-model="state.importDocIdDialogOpen">
+      <DialogContent class="pt-8">
+        <DialogHeader>
+          <DialogTitle class="text-left">
+            Enter Theme Doc ID
+          </DialogTitle>
+          <DialogDescription>
+            This JSON file does not include a <code>docId</code>. Enter the doc ID you want to import into.
+          </DialogDescription>
+        </DialogHeader>
+        <edge-shad-input
+          v-model="state.importDocIdValue"
+          name="theme-import-doc-id"
+          label="Doc ID"
+          placeholder="example-theme-id"
+        />
+        <DialogFooter class="pt-2 flex justify-between">
+          <edge-shad-button variant="outline" @click="resolveThemeImportDocId('')">
+            Cancel
+          </edge-shad-button>
+          <edge-shad-button @click="resolveThemeImportDocId(state.importDocIdValue)">
+            Continue
+          </edge-shad-button>
+        </DialogFooter>
+      </DialogContent>
+    </edge-shad-dialog>
+    <edge-shad-dialog v-model="state.importConflictDialogOpen">
+      <DialogContent class="pt-8">
+        <DialogHeader>
+          <DialogTitle class="text-left">
+            Theme Already Exists
+          </DialogTitle>
+          <DialogDescription>
+            <code>{{ state.importConflictDocId }}</code> already exists. Choose to overwrite it or import as a new theme.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter class="pt-2 flex justify-between">
+          <edge-shad-button variant="outline" @click="resolveThemeImportConflict('cancel')">
+            Cancel
+          </edge-shad-button>
+          <edge-shad-button variant="outline" @click="resolveThemeImportConflict('new')">
+            Add As New
+          </edge-shad-button>
+          <edge-shad-button @click="resolveThemeImportConflict('overwrite')">
+            Overwrite
+          </edge-shad-button>
+        </DialogFooter>
+      </DialogContent>
+    </edge-shad-dialog>
+    <edge-shad-dialog v-model="state.importErrorDialogOpen">
+      <DialogContent class="pt-8">
+        <DialogHeader>
+          <DialogTitle class="text-left">
+            Import Failed
+          </DialogTitle>
+          <DialogDescription class="text-left">
+            {{ state.importErrorMessage }}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter class="pt-2">
+          <edge-shad-button @click="state.importErrorDialogOpen = false">
+            Close
+          </edge-shad-button>
+        </DialogFooter>
+      </DialogContent>
+    </edge-shad-dialog>
   </div>
 </template>

package/edge-pull.sh

@@ -1,2 +1,16 @@
-git fetch edge-vue-components
-git subtree pull --prefix=edge edge-vue-components main --squash
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)"
+# shellcheck source=./edge-remote.sh
+source "$SCRIPT_DIR/edge-remote.sh"
+
+fetch_edge_remote
+
+if [ -d "$SCRIPT_DIR/edge" ]
+then
+  git subtree pull --prefix=edge "$EDGE_REMOTE_NAME" main --squash
+else
+  echo "No edge subtree found. Initializing with git subtree add."
+  git subtree add --prefix=edge "$EDGE_REMOTE_NAME" main --squash
+fi

package/edge-push.sh

@@ -1 +1,9 @@
-git subtree push --prefix=edge edge-vue-components main
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)"
+# shellcheck source=./edge-remote.sh
+source "$SCRIPT_DIR/edge-remote.sh"
+
+ensure_edge_remote
+git subtree push --prefix=edge "$EDGE_REMOTE_NAME" main

package/edge-remote.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+EDGE_REMOTE_NAME="${EDGE_REMOTE_NAME:-edge-vue-components}"
+EDGE_REMOTE_URL="${EDGE_REMOTE_URL:-https://github.com/Edge-Marketing-and-Design/edge-vue-components.git}"
+
+ensure_edge_remote() {
+  if git remote get-url "$EDGE_REMOTE_NAME" >/dev/null 2>&1
+  then
+    return 0
+  fi
+
+  echo "Remote '$EDGE_REMOTE_NAME' is not configured. Adding '$EDGE_REMOTE_URL'."
+  git remote add "$EDGE_REMOTE_NAME" "$EDGE_REMOTE_URL"
+}
+
+fetch_edge_remote() {
+  ensure_edge_remote
+  git fetch "$EDGE_REMOTE_NAME"
+}

package/edge-status.sh

@@ -1,14 +1,18 @@
 #!/usr/bin/env bash
 set -euo pipefail
 
-git fetch edge-vue-components >/dev/null 2>&1
+SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)"
+# shellcheck source=./edge-remote.sh
+source "$SCRIPT_DIR/edge-remote.sh"
 
-UP_TREE="$(git rev-parse edge-vue-components/main^{tree})"
+fetch_edge_remote >/dev/null 2>&1
+
+UP_TREE="$(git rev-parse "$EDGE_REMOTE_NAME/main^{tree}")"
 LOCAL_TREE="$(git rev-parse HEAD:edge)"
 
 if [ "$UP_TREE" = "$LOCAL_TREE" ]
 then
-  echo "edge is in sync with edge-vue-components/main"
+  echo "edge is in sync with $EDGE_REMOTE_NAME/main"
 else
-  echo "edge differs from edge-vue-components/main"
-fi
+  echo "edge differs from $EDGE_REMOTE_NAME/main"
+fi

package/edge-update-all.sh

@@ -0,0 +1,127 @@
+#!/usr/bin/env sh
+set -eu
+
+SCRIPT_DIR="$(cd -- "$(dirname -- "$0")" && pwd)"
+cd "$SCRIPT_DIR"
+
+usage() {
+  cat <<'EOF'
+Usage: ./edge-update-all.sh
+
+Updates:
+1) edge subtree (via edge-pull.sh)
+2) remove @edgedev/template-engine and @edgedev/firebase
+3) install latest @edgedev/template-engine and @edgedev/firebase
+EOF
+}
+
+for arg in "$@"
+do
+  case "$arg" in
+    -h|--help)
+      usage
+      exit 0
+      ;;
+    *)
+      echo "Unknown argument: $arg"
+      echo
+      usage
+      exit 1
+      ;;
+  esac
+done
+
+if ! command -v pnpm >/dev/null 2>&1
+then
+  echo "pnpm is required (pnpm-lock.yaml is present), but it is not installed."
+  echo "Install pnpm and rerun."
+  exit 1
+fi
+
+sync_edge_functions() {
+  edge_functions_dir="$SCRIPT_DIR/edge/functions"
+  local_functions_dir="$SCRIPT_DIR/functions"
+
+  if [ ! -d "$edge_functions_dir" ]; then
+    return
+  fi
+
+  echo "==> Syncing edge/functions into local functions/"
+
+  find "$edge_functions_dir" -type f | sort | while IFS= read -r src_file; do
+    rel_path="${src_file#$edge_functions_dir/}"
+    dest_file="$local_functions_dir/$rel_path"
+    dest_dir="$(dirname "$dest_file")"
+
+    mkdir -p "$dest_dir"
+
+    cp "$src_file" "$dest_file"
+  done
+}
+
+merge_firestore_indexes() {
+  edge_indexes="$SCRIPT_DIR/edge/root/firestore.indexes.json"
+  local_indexes="$SCRIPT_DIR/firestore.indexes.json"
+
+  if [ ! -f "$edge_indexes" ]; then
+    return
+  fi
+
+  if [ ! -f "$local_indexes" ]; then
+    echo "==> Writing firestore.indexes.json from edge/root"
+    cp "$edge_indexes" "$local_indexes"
+    return
+  fi
+
+  echo "==> Merging firestore.indexes.json with edge/root priority"
+  EDGE_INDEXES_PATH="$edge_indexes" LOCAL_INDEXES_PATH="$local_indexes" node <<'EOF'
+const fs = require('fs')
+
+const edgePath = process.env.EDGE_INDEXES_PATH
+const localPath = process.env.LOCAL_INDEXES_PATH
+
+const readJson = (filePath) => JSON.parse(fs.readFileSync(filePath, 'utf8'))
+const edgeJson = readJson(edgePath)
+const localJson = readJson(localPath)
+
+const normalizeArray = value => Array.isArray(value) ? value : []
+const makeKey = index => JSON.stringify({
+  collectionGroup: index?.collectionGroup || '',
+  queryScope: index?.queryScope || 'COLLECTION',
+  fields: normalizeArray(index?.fields).map(field => ({
+    fieldPath: field?.fieldPath || '',
+    order: field?.order || '',
+    arrayConfig: field?.arrayConfig || '',
+    vectorConfig: field?.vectorConfig || null,
+  })),
+})
+
+const mergedMap = new Map()
+for (const index of normalizeArray(localJson.indexes))
+  mergedMap.set(makeKey(index), index)
+for (const index of normalizeArray(edgeJson.indexes))
+  mergedMap.set(makeKey(index), index)
+
+const merged = {
+  ...localJson,
+  ...edgeJson,
+  indexes: Array.from(mergedMap.values()),
+}
+
+fs.writeFileSync(localPath, `${JSON.stringify(merged, null, 2)}\n`)
+EOF
+}
+
+echo "==> Updating edge subtree"
+"$SCRIPT_DIR/edge-pull.sh"
+
+sync_edge_functions
+merge_firestore_indexes
+
+echo "==> Removing @edgedev packages"
+pnpm remove @edgedev/template-engine @edgedev/firebase
+
+echo "==> Installing latest @edgedev packages"
+pnpm add @edgedev/template-engine@latest @edgedev/firebase@latest
+
+echo "==> Done"

package/firebase.json

@@ -23,6 +23,10 @@
       "**/node_modules/**"
     ],
     "rewrites": [
+      {
+        "source": "/api/history/**",
+        "function": "cms-trackHistory"
+      },
       {
         "source": "/api/stripe",
         "function": {

package/nuxt.config.ts

@@ -24,7 +24,7 @@ export default defineNuxtConfig({
       meta: [
         {
           'http-equiv': 'Content-Security-Policy',
-          'content': 'font-src \'self\' https://files.edgemarketingdesign.com https://use.typekit.net https://p.typekit.net data:;',
+          'content': 'font-src \'self\' https://files.edgemarketingdesign.com https://use.typekit.net https://p.typekit.net https://fonts.gstatic.com data:;',
         },
       ],
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-app",
-  "version": "1.2.33",
+  "version": "1.2.35",
   "description": "Create Edge Starter App",
   "bin": {
     "create-edge-app": "./bin/cli.js"
@@ -22,7 +22,7 @@
     "@capacitor/push-notifications": "5.1.0",
     "@chenfengyuan/vue-number-input": "2",
     "@edgedev/firebase": "latest",
-    "@edgedev/template-engine": "^0.1.12",
+    "@edgedev/template-engine": "latest",
     "@guolao/vue-monaco-editor": "^1.5.5",
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-text-style": "^2.11.5",