@edgedev/create-edge-app 1.1.3 → 1.1.4

package/app.vue

@@ -9,7 +9,4 @@
 
 <style lang="scss">
 .firebase-emulator-warning { display: none; }
-html, body {
-  overflow: hidden;
-}
 </style>

package/package.json

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

package/pages/app/account.vue

@@ -40,36 +40,33 @@ const menuItems = [
 </script>
 
 <template>
-  <NuxtLayout name="app">
-    <div
-      v-if="edgeGlobal.edgeState.organizationDocPath"
-      class="flex-1 flex flex-col overflow-y-auto p-3 pt-0"
-    >
-      <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
+    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>
-  </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">

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

@@ -71,69 +71,90 @@ onMounted(() => {
 </script>
 
 <template>
-  <NuxtLayout name="app">
-    <div
-      v-if="edgeGlobal.edgeState.organizationDocPath"
-      class="flex-1 flex flex-col overflow-y-auto p-3 pt-0"
-    >
-      <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>
-        </template>
-        <template #header-center>
-          <div class="w-full px-6">
-            <edge-shad-input
-              v-model="state.filter"
-              label=""
-              name="filter"
-              placeholder="Filter..."
-            />
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath"
+  >
+    <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>
+      </template>
+      <template #header-center>
+        <div class="w-full px-6">
+          <edge-shad-input
+            v-model="state.filter"
+            label=""
+            name="filter"
+            placeholder="Filter..."
+          />
+        </div>
+      </template>
+      <template #header-end="slotProps">
+        <edge-shad-button class="uppercase bg-slate-600" :to="`/app/dashboard/${collection}/new`">
+          Add {{ slotProps.title }}
+        </edge-shad-button>
+      </template>
+      <template #list-item="slotProps">
+        <edge-shad-button variant="text" class="cursor-pointer w-full flex justify-between slotProps.items-center py-2 gap-3" :to="`/app/dashboard/${collection}/${slotProps.item.docId}`">
+          <div>
+            <Avatar class="cursor-pointer p-0 h-8 w-8 mr-2">
+              <FilePenLine class="h-5 w-5" />
+            </Avatar>
           </div>
-        </template>
-        <template #header-end="slotProps">
-          <edge-shad-button class="uppercase bg-slate-600" :to="`/app/dashboard/${collection}/new`">
-            Add {{ slotProps.title }}
-          </edge-shad-button>
-        </template>
-        <template #list-item="slotProps">
-          <edge-shad-button variant="text" class="cursor-pointer w-full flex justify-between slotProps.items-center py-2 gap-3" :to="`/app/dashboard/${collection}/${slotProps.item.docId}`">
-            <div>
-              <Avatar class="cursor-pointer p-0 h-8 w-8 mr-2">
-                <FilePenLine class="h-5 w-5" />
-              </Avatar>
-            </div>
-            <div class="grow text-left">
-              <div class="text-lg">
-                {{ slotProps.item.name }}
-              </div>
+          <div class="grow text-left">
+            <div class="text-lg">
+              {{ slotProps.item.name }}
             </div>
-            <div>
-              <edge-shad-button
-                size="icon"
-                class="bg-slate-600 h-7 w-7"
-                @click.stop="slotProps.deleteItem(slotProps.item.docId)"
-              >
-                <Trash class="h-5 w-5" />
-              </edge-shad-button>
-            </div>
-          </edge-shad-button>
-          <Separator class="dark:bg-slate-600" />
-        </template>
-      </edge-dashboard>
-      <edge-editor
-        v-else
-        :collection="collection"
-        :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" />
-          {{ slotProps.title }}
-        </template>
-        <template #header-end="slotProps">
+          </div>
+          <div>
+            <edge-shad-button
+              size="icon"
+              class="bg-slate-600 h-7 w-7"
+              @click.stop="slotProps.deleteItem(slotProps.item.docId)"
+            >
+              <Trash class="h-5 w-5" />
+            </edge-shad-button>
+          </div>
+        </edge-shad-button>
+        <Separator class="dark:bg-slate-600" />
+      </template>
+    </edge-dashboard>
+    <edge-editor
+      v-else
+      :collection="collection"
+      :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" />
+        {{ slotProps.title }}
+      </template>
+      <template #header-end="slotProps">
+        <edge-shad-button
+          v-if="!slotProps.unsavedChanges"
+          :to="`/app/dashboard/${collection}`"
+          class="bg-red-700 uppercase h-8 hover:bg-slate-400 w-20"
+        >
+          Close
+        </edge-shad-button>
+        <edge-shad-button
+          v-else
+          :to="`/app/dashboard/${collection}`"
+          class="bg-red-700 uppercase h-8 hover:bg-slate-400 w-20"
+        >
+          Cancel
+        </edge-shad-button>
+        <edge-shad-button
+          type="submit"
+          class="bg-slate-500 uppercase h-8 hover:bg-slate-400 w-20"
+        >
+          Save
+        </edge-shad-button>
+      </template>
+      <template #footer="slotProps">
+        <div class="flex w-full gap-1 items-center justify-end">
           <edge-shad-button
             v-if="!slotProps.unsavedChanges"
             :to="`/app/dashboard/${collection}`"
@@ -148,39 +169,15 @@ onMounted(() => {
           >
             Cancel
           </edge-shad-button>
+
           <edge-shad-button
             type="submit"
             class="bg-slate-500 uppercase h-8 hover:bg-slate-400 w-20"
           >
             Save
           </edge-shad-button>
-        </template>
-        <template #footer="slotProps">
-          <div class="flex w-full gap-1 items-center justify-end">
-            <edge-shad-button
-              v-if="!slotProps.unsavedChanges"
-              :to="`/app/dashboard/${collection}`"
-              class="bg-red-700 uppercase h-8 hover:bg-slate-400 w-20"
-            >
-              Close
-            </edge-shad-button>
-            <edge-shad-button
-              v-else
-              :to="`/app/dashboard/${collection}`"
-              class="bg-red-700 uppercase h-8 hover:bg-slate-400 w-20"
-            >
-              Cancel
-            </edge-shad-button>
-
-            <edge-shad-button
-              type="submit"
-              class="bg-slate-500 uppercase h-8 hover:bg-slate-400 w-20"
-            >
-              Save
-            </edge-shad-button>
-          </div>
-        </template>
-      </edge-editor>
-    </div>
-  </NuxtLayout>
+        </div>
+      </template>
+    </edge-editor>
+  </div>
 </template>

package/pages/app/login.vue

@@ -2,17 +2,15 @@
 </script>
 
 <template>
-  <NuxtLayout name="app">
-    <div class="flex w-full h-full align-center items-center">
-      <edge-auth type="login" class="p-8 mx-auto max-w-lg w-full h-full max-h-[540px] overflow-y-auto">
-        <div class="grid gap-2 text-center">
-          <h1 class="text-2xl font-bold">
-            Login
-          </h1>
-        </div>
-      </edge-auth>
-    </div>
-  </NuxtLayout>
+  <div class="flex w-full h-full align-center items-center">
+    <edge-auth type="login" class="p-8 mx-auto max-w-lg w-full h-full max-h-[540px] overflow-y-auto">
+      <div class="grid gap-2 text-center">
+        <h1 class="text-2xl font-bold">
+          Login
+        </h1>
+      </div>
+    </edge-auth>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/pages/app/signup.vue

@@ -3,17 +3,15 @@ const config = useRuntimeConfig()
 </script>
 
 <template>
-  <NuxtLayout name="app">
-    <div class="flex w-full h-full align-center items-center">
-      <edge-auth type="register" :registration-code="config.public.registrationCode" class="p-8 mx-auto max-w-lg w-full h-full max-h-[760px] overflow-y-auto">
-        <div class="grid gap-2 text-center">
-          <h1 class="text-2xl font-bold">
-            Sign Up
-          </h1>
-        </div>
-      </edge-auth>
-    </div>
-  </NuxtLayout>
+  <div class="flex w-full h-full align-center items-center">
+    <edge-auth type="register" :registration-code="config.public.registrationCode" class="p-8 mx-auto max-w-lg w-full h-full max-h-[760px] overflow-y-auto">
+      <div class="grid gap-2 text-center">
+        <h1 class="text-2xl font-bold">
+          Sign Up
+        </h1>
+      </div>
+    </edge-auth>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/pages/app.vue

@@ -0,0 +1,256 @@
+<script setup>
+const edgeFirebase = inject('edgeFirebase')
+// const edgeGlobal = inject('edgeGlobal')
+
+const route = useRoute()
+
+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'
+})
+
+const showLeftPanel = computed(() => {
+  return edgeGlobal?.edgeState?.showLeftPanel[route.path]
+})
+
+const leftPanelDefaultSize = computed(() => {
+  if (showLeftPanel.value) {
+    return 20
+  }
+  return 0
+})
+
+const mainPanelDefaultSize = computed(() => {
+  if (showLeftPanel.value) {
+    return 80
+  }
+  return 100
+})
+
+const leftPanel = ref(null)
+const mainPanel = ref(null)
+
+watch(showLeftPanel, (value) => {
+  if (leftPanel.value && mainPanel.value) {
+    const animateResize = (panel, targetSize) => {
+      let currentSize = panel.value.getSize()
+      const step = (targetSize - currentSize) / 10 // Smooth out the transition
+
+      const animate = () => {
+        if (Math.abs(currentSize - targetSize) > 0.5) {
+          currentSize += step
+          panel.value.resize(currentSize)
+          requestAnimationFrame(animate)
+        }
+        else {
+          panel.value.resize(targetSize)
+        }
+      }
+
+      animate()
+    }
+
+    if (value) {
+      animateResize(leftPanel, 20)
+      animateResize(mainPanel, 80)
+    }
+    else {
+      animateResize(leftPanel, 0)
+      animateResize(mainPanel, 100)
+    }
+  }
+})
+
+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>
+  <Head>
+    <title>Edge App</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
+  </Head>
+  <Toaster />
+  <div class="flex flex-col h-[calc(100vh+200px)]">
+    <div class="flex h-full w-full fixed">
+      <edge-sidebar-provider
+        v-slot="sideBarProviderProps"
+        enable-nested-menu
+        collapsible="slack"
+      >
+        <div class="h-full">
+          <edge-side-bar
+            v-if="edgeFirebase.user.loggedIn"
+            :menu-items="menuItems"
+            :collapsible="sideBarProviderProps.collapsible"
+            class="border-solid border-r"
+          >
+            <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-bar>
+        </div>
+        <ResizablePanelGroup
+          direction="horizontal"
+          class="h-full w-full"
+        >
+          <ResizablePanel ref="leftPanel" class="bg-sidebar text-sidebar-foreground" :default-size="leftPanelDefaultSize">
+            <div id="left-panel" />
+          </ResizablePanel>
+          <ResizableHandle v-if="showLeftPanel" with-handle />
+          <ResizablePanel ref="mainPanel" :default-size="mainPanelDefaultSize">
+            <div class="grow h-full flex flex-col h-screen">
+              <edge-menu
+                v-if="edgeFirebase.user.loggedIn"
+                type="nav"
+                nav-class="justify-left"
+                class="px-1 border-none"
+              >
+                <template #start>
+                  <edge-shad-button
+                    v-show="edgeGlobal.edgeState.sidebar.isMobile"
+                    variant="icon"
+                    class="p-1"
+                    @click="edgeGlobal.edgeState.sidebar.toggleSidebar"
+                  >
+                    <MenuSquare />
+                  </edge-shad-button>
+                </template>
+              </edge-menu>
+              <NuxtPage class="flex-1 flex flex-col overflow-y-auto p-3 pt-0" />
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </edge-sidebar-provider>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.firebase-emulator-warning { display: none; }
+html {
+  scrollbar-width: none;
+}
+
+html::-webkit-scrollbar {
+  display: none;
+}
+</style>