npm - @edgedev/create-edge-app - Versions diffs - 1.1.10 → 1.1.12 - Mend

@edgedev/create-edge-app 1.1.10 → 1.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +1 -1
package/pages/app/account/[page].vue +86 -9
package/pages/app/dashboard/[[collection]]/[[docId]].vue +32 -2
package/pages/app.vue +63 -2
package/pages/app/account.vue +0 -73

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-app",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "Create Edge Starter App",
   "bin": {
     "create-edge-app": "./bin/cli.js"

package/pages/app/account/[page].vue CHANGED Viewed

@@ -55,15 +55,92 @@ const page = computed(() => {
 <template>
   <div
-    v-if="edgeFirebase?.user?.loggedIn"
+    v-if="edgeGlobal.edgeState.organizationDocPath"
+    class="w-full max-w-7xl mx-auto  bg-white rounded-[9.96px] shadow-md px-6"
   >
-    <Card class="w-full flex-1 bg-muted/50 m-auto">
-      <edge-organization-settings v-if="page === 'organization-settings'" :subscribe-options="subscribeOptions" :form-schema="orgSchema" :org-fields="orgFields" />
-      <edge-my-account v-if="page === 'my-account'" />
-      <edge-my-profile v-if="page === 'my-profile'" :form-schema="metaSchema" :meta-fields="metaFields" />
-      <edge-organization-members v-if="page === 'organization-members'" />
-      <edge-my-organizations v-if="page === 'my-organizations'" :registration-code="config.public.registrationCode" />
-      <edge-billing v-if="page === 'subscription'" />
-    </Card>
+    <edge-organization-settings
+      v-if="page === 'organization-settings'"
+      :subscribe-options="subscribeOptions"
+      :form-schema="orgSchema"
+      :org-fields="orgFields"
+      class="bg-white"
+    >
+      <template #header>
+        <Teleport to="#page-header">
+          <edge-shad-breadcrumbs
+            :items="[
+              { text: 'Settings', to: '/app/dashboard/my-profile' },
+              { text: 'Organization', to: '' },
+            ]"
+          />
+        </Teleport>
+      </template>
+    </edge-organization-settings>
+    <edge-my-account
+      v-if="page === 'my-account'"
+      class="bg-white"
+    >
+      <template #header>
+        <Teleport to="#page-header">
+          <edge-shad-breadcrumbs
+            :items="[
+              { text: 'Settings', to: '/app/dashboard/my-profile' },
+              { text: 'My Account', to: '' },
+            ]"
+          />
+        </Teleport>
+      </template>
+    </edge-my-account>
+    <edge-my-profile
+      v-if="page === 'my-profile'"
+      :form-schema="metaSchema"
+      :meta-fields="metaFields"
+      class="bg-white"
+    >
+      <template #header>
+        <Teleport to="#page-header">
+          <edge-shad-breadcrumbs
+            :items="[
+              { text: 'Settings', to: '/app/dashboard/my-profile' },
+              { text: 'My Profile', to: '' },
+            ]"
+          />
+        </Teleport>
+      </template>
+    </edge-my-profile>
+    <edge-organization-members
+      v-if="page === 'organization-members'"
+      class="bg-white"
+    >
+      <template #header>
+        <Teleport to="#page-header">
+          <edge-shad-breadcrumbs
+            :items="[
+              { text: 'Settings', to: '/app/dashboard/my-profile' },
+              { text: 'Users', to: '' },
+            ]"
+          />
+        </Teleport>
+      </template>
+    </edge-organization-members>
+    <edge-my-organizations
+      v-if="page === 'my-organizations'"
+      :registration-code="config.public.registrationCode"
+      class="bg-white"
+    >
+      <template #header>
+        <Teleport to="#page-header">
+          <edge-shad-breadcrumbs
+            :items="[
+              { text: 'Settings', to: '/app/dashboard/my-profile' },
+              { text: 'My Organizations', to: '' },
+            ]"
+          />
+        </Teleport>
+      </template>
+    </edge-my-organizations>
+    <edge-billing
+      v-if="page === 'subscription'"
+    />
   </div>
 </template>

package/pages/app/dashboard/[[collection]]/[[docId]].vue CHANGED Viewed

@@ -62,10 +62,40 @@ definePageMeta({
   middleware: 'auth',
 })
+const isAdmin = computed(() => {
+  return edgeGlobal.isAdminGlobal(edgeFirebase).value
+})
+const toBool = v => v === true || v === 'true' || v === 1 || v === '1'
+const allowMenuItem = (item) => {
+  const isDev = config.public.developmentMode
+  const adminOnly = toBool(item.adminOnly)
+  const devOnly = toBool(item.devOnly)
+  const override = toBool(item.override)
+  if (item.override !== undefined)
+    return override
+  if (adminOnly && !isAdmin.value)
+    return false
+  if (devOnly && !isDev)
+    return false
+  return true
+}
 onMounted(() => {
   if (!route.params.collection) {
-    // If making a static collection route, this onMounted should be removed
-    router.push('/app/dashboard/things')
+    const menuItems = edgeGlobal.edgeState.menuItems
+      .filter(allowMenuItem)
+      .map(item => ({
+        ...item,
+        submenu: Array.isArray(item.submenu)
+          ? item.submenu.filter(allowMenuItem)
+          : item.submenu,
+      }))
+    const firstTop = (menuItems && menuItems.length) ? menuItems[0] : null
+    if (firstTop && typeof firstTop.to === 'string' && firstTop.to.length) {
+      router.replace(firstTop.to)
+    }
   }
 })
 </script>

package/pages/app.vue CHANGED Viewed

@@ -8,11 +8,70 @@ const currentOrganization = computed(() => {
   return edgeGlobal.edgeState.currentOrganization
 })
+const menuBuilder = () => {
+  const orgDocPath = `organizations/${currentOrganization.value}`
+  const orgRole = edgeFirebase?.user?.roles.find(role =>
+    role.collectionPath === orgDocPath.replaceAll('/', '-'),
+  )
+  const isOrgUserAdmin = orgRole && orgRole.role === 'admin'
+  edgeGlobal.edgeState.menuItems = [
+    {
+      title: 'Dashboard',
+      to: '/app/dashboard/things',
+      icon: 'LayoutDashboard',
+    },
+    {
+      title: 'Sub Things',
+      to: '/app/dashboard/subthings',
+      icon: 'Package',
+    },
+    {
+      title: 'Settings',
+      to: '/app/account/my-profile',
+      icon: 'Settings',
+      submenu: [
+        {
+          title: 'Profile',
+          to: '/app/account/my-profile',
+          icon: 'User',
+        },
+        {
+          title: 'Account',
+          to: '/app/account/my-account',
+          icon: 'CircleUser',
+        },
+        {
+          title: 'Orgs',
+          to: '/app/account/my-organizations',
+          icon: 'Group',
+        },
+        {
+          title: 'Org',
+          to: '/app/account/organization-settings',
+          icon: 'Settings',
+          override: isOrgUserAdmin,
+        },
+        {
+          title: 'Users',
+          to: '/app/account/organization-members',
+          icon: 'Users',
+          override: isOrgUserAdmin,
+        },
+      ],
+    },
+  ]
+}
 watch(currentOrganization, async () => {
   if (currentOrganization.value) {
     // RUN STUFF HERE WHEN ORGANIZATION CHANGES LIKE SNAPSHOTS
     await projectSetOrg(currentOrganization.value, edgeFirebase, edgeGlobal)
+    const orgDocPath = `organizations/${currentOrganization.value}`
+    edgeGlobal.edgeState.isAdminCollections = [`organizations-${orgDocPath}`]
+    menuBuilder()
     // KEEP THIS CODE:
     const auth = useState('auth')
     auth.value = edgeFirebase.user
@@ -147,7 +206,7 @@ edgeGlobal.edgeState.userRoles = [
   },
 ]
-const menuItems = [
+edgeGlobal.edgeState.menuItems = [
   {
     title: 'Dashboard',
     to: '/app/dashboard/things',
@@ -177,9 +236,10 @@ const menuItems = [
         <div class="h-full">
           <edge-side-bar
             v-if="edgeFirebase.user.loggedIn"
-            :menu-items="menuItems"
+            :menu-items="edgeGlobal.edgeState.menuItems"
             :collapsible="sideBarProviderProps.collapsible"
             class="border-solid border-r"
+            :show-settings-section="false"
           >
             <template #header>
               <SidebarMenu>
@@ -233,6 +293,7 @@ const menuItems = [
                   >
                     <MenuSquare />
                   </edge-shad-button>
+                  <div id="page-header" />
                 </template>
               </edge-menu>
               <NuxtPage class="flex-1 flex flex-col overflow-y-auto p-3 pt-0" />

package/pages/app/account.vue DELETED Viewed

@@ -1,73 +0,0 @@
-<script setup>
-const edgeFirebase = inject('edgeFirebase')
-const isAdmin = computed(() => {
-  const orgRole = edgeFirebase?.user?.roles.find(role =>
-    role.collectionPath === edgeGlobal.edgeState.organizationDocPath.replaceAll('/', '-'),
-  )
-  return orgRole && orgRole.role === 'admin'
-})
-const adminMenuItems = [
-  {
-    title: 'Organization',
-    to: '/app/account/organization-settings',
-    icon: 'Settings',
-  },
-  {
-    title: 'Members',
-    to: '/app/account/organization-members',
-    icon: 'Users',
-  },
-]
-const menuItems = [
-  {
-    title: 'Profile',
-    to: '/app/account/my-profile',
-    icon: 'User',
-  },
-  {
-    title: 'Account',
-    to: '/app/account/my-account',
-    icon: 'CircleUser',
-  },
-  {
-    title: 'Organizations',
-    to: '/app/account/my-organizations',
-    icon: 'Group',
-  },
-]
-</script>
-<template>
-  <div
-    v-if="edgeGlobal.edgeState.organizationDocPath"
-  >
-    <div class="h-full p-0">
-      <SidebarProvider class="min-h-full">
-        <div class="h-full md:w-[180px]">
-          <edge-side-bar
-            :menu-items="menuItems"
-            :settings-menu-items="isAdmin ? adminMenuItems : []"
-            collapsible="submenu"
-            class="bg-background text-foreground border-none w-[180px] absolute shadow-none"
-            :show-settings-section="false"
-            title="My Settings"
-            settings-title="Organization Settings"
-            group-label-classes="text-foreground/70"
-          >
-            <template #header>
-              <h1 class="text-xl">
-                Settings
-              </h1>
-            </template>
-          </edge-side-bar>
-        </div>
-        <NuxtPage class="flex-1 flex flex-col overflow-y-auto p-3" />
-      </SidebarProvider>
-    </div>
-  </div>
-</template>
-<style lang="scss">
-</style>