@edgedev/create-edge-app 1.0.60 → 1.0.62

package/app.vue

@@ -1,196 +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">
-    <!-- <edge-menu v-if="edgeFirebase.user.loggedIn" type="header" nav-class="justify-start" class="bg-slate-300 dark:bg-slate-900" :menu-items="menuItems">
-      <template #start>
-        <Package class="h-6 w-6 mr-2" />
-        <h1 class="text-xl font-bold">
-          {{ orgName }}
-        </h1>
-      </template>
-    </edge-menu> -->
-    <div class="flex h-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">
-          <div class="flex justify-between p-1">
-            <div>
-              <!-- possible breadcrumbs -->
-            </div>
-            <div>
-              <edge-user-menu v-if="edgeFirebase.user.loggedIn" :title="orgName" button-class="w-8 h-8" icon-class="w-6 h-6" />
-            </div>
-          </div>
-          <NuxtPage keepalive />
-        </div>
-      </SidebarProvider>
-    </div>
-    <!-- <edge-menu
-      v-if="edgeFirebase.user.loggedIn"
-      type="footer"
-      button-class="text-slate-500"
-      nav-class="justify-end mr-8"
-      class="bg-slate-800"
-      :menu-items="menuItems"
-    >
-      <template #start>
-        <div class="text-xs text-muted-foreground">
-          Copyright {{ new Date().getFullYear() }}
-        </div>
-      </template>
-    </edge-menu> -->
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
 
 <style lang="scss">

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.60",
+  "version": "1.0.62",
   "description": "Create Edge Starter App",
   "bin": {
     "create-edge-app": "./bin/cli.js"

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

@@ -56,17 +56,14 @@ const page = computed(() => {
 <template>
   <div
     v-if="edgeFirebase?.user?.loggedIn"
-    class="p-3 w-full h-[calc(100vh-118px)] overflow-y-auto"
   >
-    <div class="gap-2 h-full w-full justify-items-center">
-      <Card class="w-full h-full bg-muted/50 max-w-7xl m-auto pt-3">
-        <edge-organization-settings v-if="page === 'organization-settings'" :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>
-    </div>
+    <Card class="w-full flex-1 bg-muted/50 max-w-7xl 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>
   </div>
 </template>

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

@@ -73,9 +73,8 @@ onMounted(() => {
 <template>
   <div
     v-if="edgeFirebase?.user?.loggedIn"
-    class="p-3 w-full h-[calc(100vh-118px)] overflow-y-auto"
   >
-    <edge-dashboard v-if="docId === '' && collection !== ''" :filter="state.filter" :collection="collection">
+    <edge-dashboard v-if="docId === ''" :filter="state.filter" :collection="collection" class="flex-1">
       <template #header-start>
         <LayoutDashboard class="mr-2" />
         <span class="capitalize">{{ collection }}</span>
@@ -126,6 +125,7 @@ onMounted(() => {
       :doc-id="docId"
       :schema="schemas[collection]"
       :new-doc-schema="state.newDocs[collection]"
+      class="w-full max-w-7xl mx-auto flex-1"
     >
       <template #header-start="slotProps">
         <FilePenLine class="mr-2" />

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>