@edgedev/create-edge-app 1.0.61 → 1.0.63

package/app.vue

@@ -1,192 +1,10 @@
 <script setup>
-// TODO : ADD CODE FOR NOTIFICATIONS AND DEEP LINKING
-// import { useTheme } from 'vuetify'
-// const vueTheme = useTheme()
-// const changeTheme = (theme) => {
-//   vueTheme.global.name.value = theme
-// }
-const edgeFirebase = inject('edgeFirebase')
-// const edgeGlobal = inject('edgeGlobal')
-
-const currentOrganization = computed(() => {
-  return edgeGlobal.edgeState.currentOrganization
-})
-
-watch(currentOrganization, async () => {
-  if (currentOrganization.value) {
-    // RUN STUFF HERE WHEN ORGANIZATION CHANGES LIKE SNAPSHOTS
-    await projectSetOrg(currentOrganization.value, edgeFirebase, edgeGlobal)
-
-    // KEEP THIS CODE:
-    const auth = useState('auth')
-    auth.value = edgeFirebase.user
-
-    const preLoginRoute = useState('preLoginRoute')
-    const router = useRouter()
-
-    let cleanedRoute = ''
-    if (preLoginRoute.value) {
-      cleanedRoute = preLoginRoute.value.endsWith('/') ? preLoginRoute.value.slice(0, -1) : preLoginRoute.value
-    }
-
-    if (cleanedRoute === ''
-    || cleanedRoute === '/app'
-    || cleanedRoute === '/app/login'
-    || cleanedRoute === '/app/signup') {
-      router.push('/app/dashboard')
-    }
-    else {
-      router.push(preLoginRoute.value)
-    }
-
-    console.log(auth.value)
-  }
-  if (!currentOrganization.value) {
-    const auth = useState('auth')
-    auth.value = ''
-    const router = useRouter()
-    router.push('/app/login')
-  }
-})
-
-const currentOrg = computed(() => edgeFirebase.data[`organizations/${edgeGlobal.edgeState.currentOrganization}`])
-
-watch (currentOrg, async () => {
-  if (currentOrg.value) {
-    edgeGlobal.edgeState = subscribedStatus(currentOrg.value)
-  }
-}, { immediate: true }, { deep: true })
-
-const orgName = computed(() => {
-  const org = edgeGlobal.edgeState.organizations.find(org => org.docId === edgeGlobal.edgeState.currentOrganization)
-  return org?.name
-})
-
-const user = computed(() => {
-  return edgeFirebase.user
-})
-
-watch (user, async () => {
-  if (user.value) {
-    const auth = useState('auth')
-    auth.value = user.value
-  }
-})
-const colorMode = useColorMode()
-onMounted(() => {
-  colorMode.preference = 'system'
-  // if (edgeGlobal.isDarkMode()) {
-  //   changeTheme('dark')
-  // }
-  // else {
-  //   changeTheme('light')
-  // }
-})
-edgeFirebase.runFunction('edgeFirebase-initFirestore', {})
-edgeGlobal.edgeState.userRoles = [
-  {
-    name: 'Admin',
-    roles: [
-      {
-        collectionPath: 'organizationDocPath',
-        role: 'admin',
-      },
-    ],
-  },
-  {
-    name: 'User',
-    roles: [
-      {
-        collectionPath: 'organizationDocPath',
-        role: 'user',
-      },
-    ],
-  },
-]
-
-const menuItems = [
-  {
-    title: 'Dashboard',
-    to: '/app/dashboard/things',
-    icon: 'LayoutDashboard',
-  },
-  {
-    title: 'Sub Things',
-    to: '/app/dashboard/subthings',
-    icon: 'Package',
-  },
-]
 </script>
 
 <template>
-  <Toaster />
-  <div class="flex flex-col h-screen">
-    <div class="flex h-full w-full">
-      <SidebarProvider>
-        <div class="h-full">
-          <edge-side-menu
-            v-if="edgeFirebase.user.loggedIn"
-            :menu-items="menuItems"
-          >
-            <template #header>
-              <SidebarMenu>
-                <SidebarMenuItem>
-                  <SidebarMenuButton style="padding-left: 4px !important;">
-                    <Package class="!h-6 !w-6" /> <span class="text-xl">{{ orgName }}</span>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              </SidebarMenu>
-            </template>
-            <template #footer="slotProps">
-              <Card v-if="slotProps.sideBarState === 'expanded'">
-                <CardHeader class="p-2 pt-0 md:p-4">
-                  <CardTitle>Upgrade to Pro</CardTitle>
-                  <CardDescription>
-                    Unlock all features and get unlimited access to our support
-                    team.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent class="p-2 pt-0 md:p-4 md:pt-0">
-                  <Button size="sm" class="w-full">
-                    Upgrade
-                  </Button>
-                </CardContent>
-              </Card>
-            </template>
-          </edge-side-menu>
-        </div>
-        <div class="grow h-full flex flex-col h-screen">
-          <edge-menu
-            v-if="edgeFirebase.user.loggedIn"
-            type="nav"
-            nav-class="justify-left mr-8"
-            :menu-items="menuItems"
-          >
-            <template #start>
-              <SidebarTrigger class="-ml-2 mr-2 h-4 w-4" />
-              <Package class="h-6 w-6 mr-2" />
-              <h1 class="text-xl font-bold">
-                {{ orgName }}
-              </h1>
-            </template>
-          </edge-menu>
-          <NuxtPage class="flex-1 flex flex-col overflow-y-auto p-3" keepalive />
-          <edge-menu
-            v-if="edgeFirebase.user.loggedIn"
-            type="footer"
-            nav-class="justify-end mr-8"
-            :menu-items="menuItems"
-          >
-            <template #start>
-              <div class="text-xs text-muted-foreground">
-                Copyright {{ new Date().getFullYear() }}
-              </div>
-            </template>
-          </edge-menu>
-        </div>
-      </SidebarProvider>
-    </div>
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
 
 <style lang="scss">

package/components/ui/sidebar/Sidebar.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 import type { SidebarProps } from '.'
 import { Sheet, SheetContent } from '@/components/ui/sheet'
 import { cn } from '@/lib/utils'
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
-
-defineOptions({
-  inheritAttrs: false,
-})
 
 const props = withDefaults(defineProps<SidebarProps>(), {
   side: 'left',
@@ -14,6 +10,10 @@ const props = withDefaults(defineProps<SidebarProps>(), {
   collapsible: 'offcanvas',
 })
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 </script>
 
@@ -31,7 +31,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
       data-sidebar="sidebar"
       data-mobile="true"
       :side="side"
-      class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+      :class="cn('w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden', props.class)"
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
       }"

package/layouts/public.vue

@@ -0,0 +1,14 @@
+<script setup>
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col">
+    <main class="flex flex-1 flex-col gap-4 px-4 pb-4 md:gap-8 md:px-8 md:pb-8">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<style>
+
+</style>

package/package.json

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

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

@@ -57,7 +57,7 @@ const page = computed(() => {
   <div
     v-if="edgeFirebase?.user?.loggedIn"
   >
-    <Card class="w-full flex-1 bg-muted/50 max-w-7xl m-auto ">
+    <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" />

package/pages/app/account.vue

@@ -0,0 +1,73 @@
+<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-menu
+            :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-menu>
+        </div>
+        <NuxtPage class="flex-1 flex flex-col overflow-y-auto p-3" keepalive />
+      </SidebarProvider>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+</style>

package/pages/app.vue

@@ -0,0 +1,191 @@
+<script setup>
+const edgeFirebase = inject('edgeFirebase')
+// const edgeGlobal = inject('edgeGlobal')
+
+const currentOrganization = computed(() => {
+  return edgeGlobal.edgeState.currentOrganization
+})
+
+watch(currentOrganization, async () => {
+  if (currentOrganization.value) {
+    // RUN STUFF HERE WHEN ORGANIZATION CHANGES LIKE SNAPSHOTS
+    await projectSetOrg(currentOrganization.value, edgeFirebase, edgeGlobal)
+
+    // KEEP THIS CODE:
+    const auth = useState('auth')
+    auth.value = edgeFirebase.user
+
+    const preLoginRoute = useState('preLoginRoute')
+    const router = useRouter()
+
+    let cleanedRoute = ''
+    if (preLoginRoute.value) {
+      cleanedRoute = preLoginRoute.value.endsWith('/') ? preLoginRoute.value.slice(0, -1) : preLoginRoute.value
+    }
+
+    if (cleanedRoute === ''
+    || cleanedRoute === '/app'
+    || cleanedRoute === '/app/login'
+    || cleanedRoute === '/app/signup') {
+      router.push('/app/dashboard')
+    }
+    else {
+      router.push(preLoginRoute.value)
+    }
+
+    console.log(auth.value)
+  }
+  if (!currentOrganization.value) {
+    const auth = useState('auth')
+    auth.value = ''
+    const router = useRouter()
+    router.push('/app/login')
+  }
+})
+
+const currentOrg = computed(() => edgeFirebase.data[`organizations/${edgeGlobal.edgeState.currentOrganization}`])
+
+watch (currentOrg, async () => {
+  if (currentOrg.value) {
+    edgeGlobal.edgeState = subscribedStatus(currentOrg.value)
+  }
+}, { immediate: true }, { deep: true })
+
+const orgName = computed(() => {
+  const org = edgeGlobal.edgeState.organizations.find(org => org.docId === edgeGlobal.edgeState.currentOrganization)
+  return org?.name
+})
+
+const user = computed(() => {
+  return edgeFirebase.user
+})
+
+watch (user, async () => {
+  if (user.value) {
+    const auth = useState('auth')
+    auth.value = user.value
+  }
+})
+const colorMode = useColorMode()
+onMounted(() => {
+  colorMode.preference = 'system'
+  // if (edgeGlobal.isDarkMode()) {
+  //   changeTheme('dark')
+  // }
+  // else {
+  //   changeTheme('light')
+  // }
+})
+edgeFirebase.runFunction('edgeFirebase-initFirestore', {})
+edgeGlobal.edgeState.userRoles = [
+  {
+    name: 'Admin',
+    roles: [
+      {
+        collectionPath: 'organizationDocPath',
+        role: 'admin',
+      },
+    ],
+  },
+  {
+    name: 'User',
+    roles: [
+      {
+        collectionPath: 'organizationDocPath',
+        role: 'user',
+      },
+    ],
+  },
+]
+
+const menuItems = [
+  {
+    title: 'Dashboard',
+    to: '/app/dashboard/things',
+    icon: 'LayoutDashboard',
+  },
+  {
+    title: 'Sub Things',
+    to: '/app/dashboard/subthings',
+    icon: 'Package',
+  },
+]
+</script>
+
+<template>
+  <Toaster />
+  <div class="flex flex-col h-screen">
+    <div class="flex h-full w-full">
+      <SidebarProvider>
+        <div class="h-full">
+          <edge-side-menu
+            v-if="edgeFirebase.user.loggedIn"
+            :menu-items="menuItems"
+          >
+            <template #header>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton style="padding-left: 4px !important;">
+                    <Package class="!h-6 !w-6" /> <span class="text-xl">{{ orgName }}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </template>
+            <template #footer="slotProps">
+              <Card v-if="slotProps.sideBarState === 'expanded'">
+                <CardHeader class="p-2 pt-0 md:p-4">
+                  <CardTitle>Upgrade to Pro</CardTitle>
+                  <CardDescription>
+                    Unlock all features and get unlimited access to our support
+                    team.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent class="p-2 pt-0 md:p-4 md:pt-0">
+                  <Button size="sm" class="w-full">
+                    Upgrade
+                  </Button>
+                </CardContent>
+              </Card>
+            </template>
+          </edge-side-menu>
+        </div>
+        <div class="grow h-full flex flex-col h-screen">
+          <edge-menu
+            v-if="edgeFirebase.user.loggedIn"
+            type="nav"
+            nav-class="justify-left mr-8"
+            :menu-items="menuItems"
+          >
+            <template #start>
+              <SidebarTrigger class="-ml-2 mr-2 h-4 w-4" />
+              <Package class="h-6 w-6 mr-2" />
+              <h1 class="text-xl font-bold">
+                {{ orgName }}
+              </h1>
+            </template>
+          </edge-menu>
+          <NuxtPage class="flex-1 flex flex-col overflow-y-auto p-3" keepalive />
+          <edge-menu
+            v-if="edgeFirebase.user.loggedIn"
+            type="footer"
+            nav-class="justify-end mr-8"
+            :menu-items="menuItems"
+          >
+            <template #start>
+              <div class="text-xs text-muted-foreground">
+                Copyright {{ new Date().getFullYear() }}
+              </div>
+            </template>
+          </edge-menu>
+        </div>
+      </SidebarProvider>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.firebase-emulator-warning { display: none; }
+html, body {
+  overflow: hidden;
+}
+</style>