@edgedev/create-edge-app 0.0.1

package/.eslintrc

@@ -0,0 +1,10 @@
+{
+  "root": true,
+  "extends": "@antfu", 
+  "rules": {
+    "vue/no-deprecated-slot-attribute": "off",
+    "curly": "off",
+    "no-console": "off",
+    "antfu/top-level-function": "off"
+  }
+}

package/.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "files.associations": {
+    "*.json": "json"
+  },
+  "[json]": {
+    "editor.formatOnSave": true,
+  },
+  "editor.formatOnSave": false,
+  "vetur.validation.template": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+  },
+  "vue3snippets.enable-compile-vue-file-on-did-save-code": false
+}

package/README.md

@@ -0,0 +1,63 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app.vue

@@ -0,0 +1,106 @@
+<script setup>
+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 user = computed(() => {
+  return edgeFirebase.user
+})
+
+watch (user, async () => {
+  if (user.value) {
+    const auth = useState('auth')
+    auth.value = user.value
+  }
+})
+
+onMounted(() => {
+  if (edgeGlobal.isDarkMode()) {
+    changeTheme('dark')
+  }
+  else {
+    changeTheme('light')
+  }
+})
+edgeFirebase.runFunction('initFirestore', {})
+edgeGlobal.edgeState.userRoles = [
+  {
+    name: 'Admin',
+    roles: [
+      {
+        collectionPath: 'organizationDocPath',
+        role: 'admin',
+      },
+    ],
+  },
+  {
+    name: 'User',
+    roles: [
+      {
+        collectionPath: 'organizationDocPath',
+        role: 'user',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <v-app>
+    <top-menu v-if="edgeFirebase.user.loggedIn" />
+    <v-main>
+      <NuxtPage />
+    </v-main>
+    <bottom-menu v-if="edgeFirebase.user.loggedIn" />
+  </v-app>
+</template>
+
+<style lang="scss">
+.firebase-emulator-warning { display: none; }
+</style>

package/bin/cli-edge-app.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+const { execSync } = require('child_process')
+const fs = require('fs')
+const readline = require('readline')
+
+const runCommand = (command) => {
+  try {
+    execSync(`${command}`, { stdio: 'inherit' })
+  }
+  catch (err) {
+    console.error(`Failed to run command: ${command}`, err)
+    return false
+  }
+  return true
+}
+
+const promptForProjectId = () => {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  })
+
+  return new Promise((resolve, reject) => {
+    rl.question('Please enter your Firebase project ID: ', (projectId) => {
+      rl.close()
+      resolve(projectId)
+    })
+  })
+}
+
+const initializeFirebase = async (projectId, repoName) => {
+  if (!projectId) {
+    console.error('Error: Firebase project ID cannot be empty.')
+    process.exit(1)
+  }
+
+  try {
+    execSync('firebase --version', { stdio: 'inherit' })
+  }
+  catch (err) {
+    console.error('Firebase CLI could not be found. Please install it and try again.')
+    process.exit(1)
+  }
+
+  const pathToFirebaseJson = `${repoName}/firebase.json`
+  const pathToFirestoreRules = `${repoName}/firestore.rules`
+
+  if (fs.existsSync(pathToFirebaseJson)) {
+    fs.renameSync(pathToFirebaseJson, `${pathToFirebaseJson}.temp`)
+  }
+
+  if (fs.existsSync(pathToFirestoreRules)) {
+    fs.renameSync(pathToFirestoreRules, `${pathToFirestoreRules}.temp`)
+  }
+
+  console.log(`Initializing Firebase for ${repoName}...`)
+  runCommand(`cd ${repoName} && firebase use --add ${projectId} --alias default`)
+  runCommand(`cd ${repoName} && firebase init firestore functions hosting storage emulators --project default`)
+
+  if (fs.existsSync(`${pathToFirebaseJson}.temp`)) {
+    fs.renameSync(`${pathToFirebaseJson}.temp`, pathToFirebaseJson)
+  }
+
+  if (fs.existsSync(`${pathToFirestoreRules}.temp`)) {
+    fs.renameSync(`${pathToFirestoreRules}.temp`, pathToFirestoreRules)
+  }
+}
+
+const repoName = process.argv[2]
+const gitCheckoutCommand = `git clone --depth 1 https://github.com/Edge-Marketing-and-Design/edgeApp.git ${repoName}`
+const installDependenciesCommand = `cd ${repoName} && pnpm install`
+const installFunctionDependenciesCommand = `cd ${repoName}/functions && npm install`
+
+console.log(`Cloning with name ${repoName}...`)
+const checkedOut = runCommand(gitCheckoutCommand)
+if (!checkedOut) {
+  process.exit(1)
+}
+
+console.log(`Installing dependencies for ${repoName}...`)
+const installedDeps = runCommand(installDependenciesCommand)
+if (!installedDeps) {
+  process.exit(1)
+}
+
+console.log(`Installing function dependencies for ${repoName}...`)
+const installedFunctionDeps = runCommand(installFunctionDependenciesCommand)
+if (!installedFunctionDeps) {
+  process.exit(1)
+}
+
+console.log(`Successfully created ${repoName}!`)
+
+const main = async () => {
+  const projectId = await promptForProjectId()
+  await initializeFirebase(projectId, repoName)
+}
+
+main()

package/components/account.vue

@@ -0,0 +1,84 @@
+<script setup>
+const route = useRoute()
+const edgeGlobal = inject('edgeGlobal')
+const site = computed(() => {
+  return route.params.collection
+})
+const metaFields = [
+  {
+    field: 'name',
+    type: 'text',
+    label: 'Name',
+    hint: 'Your name, shown in the user interface.',
+    rules: [edgeGlobal.edgeRules.required],
+  },
+]
+const orgFields = [
+  {
+    field: 'name',
+    type: 'text',
+    label: 'Name',
+    hint: 'Your name, shown in the user interface.',
+    rules: [edgeGlobal.edgeRules.required],
+  },
+]
+
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <v-card>
+    <v-toolbar flat>
+      <v-icon class="mx-4">
+        mdi-account-group-outline
+      </v-icon>
+      {{ edgeGlobal.currentOrganizationObject.name }}
+    </v-toolbar>
+    <v-card-text>
+      <v-row>
+        <v-col cols="3">
+          <v-card>
+            <v-list :lines="false" density="compact" nav>
+              <v-list-subheader class="">
+                Organization
+              </v-list-subheader>
+              <v-list-item link to="/app/account/organization-settings">
+                <v-list-item-title>Settings</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item link to="/app/account/organization-members">
+                <v-list-item-title>Members</v-list-item-title>
+              </v-list-item>
+            </v-list>
+            <v-divider />
+
+            <v-list :lines="false" density="compact" nav>
+              <v-list-subheader class="">
+                My Settings
+              </v-list-subheader>
+              <v-list-item link to="/app/account/my-profile">
+                <v-list-item-title>Profile</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item link to="/app/account/my-account">
+                <v-list-item-title>Account</v-list-item-title>
+              </v-list-item>
+              <v-list-item link to="/app/account/my-organizations">
+                <v-list-item-title>Organizations</v-list-item-title>
+              </v-list-item>
+            </v-list>
+
+            <v-divider />
+          </v-card>
+        </v-col>
+        <v-col cols="9">
+          <edge-organization-settings v-if="site === 'organization-settings'" :org-fields="orgFields" />
+          <edge-my-account v-if="site === 'my-account'" />
+          <edge-my-profile v-if="site === 'my-profile'" :meta-fields="metaFields" />
+          <edge-organization-members v-if="site === 'organization-members'" />
+          <edge-my-organizations v-if="site === 'my-organizations'" :registration-code="config.public.registrationCode" />
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>

package/components/bottomMenu.vue

@@ -0,0 +1,35 @@
+<script setup>
+const edgeFirebase = inject('edgeFirebase')
+const edgeGlobal = inject('edgeGlobal')
+</script>
+
+<template>
+  <v-bottom-navigation>
+    <v-btn to="/app/dashboard">
+      <v-icon>mdi-view-dashboard</v-icon>
+
+      Dashboard
+    </v-btn>
+    <v-btn to="/app/dashboard/subthings">
+      <v-icon>mdi-cube</v-icon>
+
+      Sub Things
+    </v-btn>
+
+    <v-btn to="/app/account/organization-settings">
+      <v-icon>mdi-cog</v-icon>
+
+      Settings
+    </v-btn>
+
+    <v-btn @click="logOut(edgeFirebase, edgeGlobal)">
+      <v-icon>mdi-logout</v-icon>
+
+      Logout
+    </v-btn>
+  </v-bottom-navigation>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/components/dashboard.vue

@@ -0,0 +1,186 @@
+<script setup>
+const props = defineProps({
+  collection: {
+    type: String,
+    required: true,
+  },
+})
+
+const edgeFirebase = inject('edgeFirebase')
+const edgeGlobal = inject('edgeGlobal')
+const router = useRouter()
+
+const state = reactive({
+  form: false,
+  menu: false,
+  dialog: false,
+  apiKeys: [],
+  filter: '',
+  empty: false,
+  afterMount: false,
+  deleteDialog: false,
+  deleteItemName: '',
+  deleteItemDocId: '',
+})
+
+const gotoSite = (docId) => {
+  router.push(`/app/dashboard/${props.collection}/${docId}`)
+}
+
+const capitalizeFirstLetter = (str) => {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+const singularize = (word) => {
+  if (word.endsWith('ies')) {
+    return `${word.slice(0, -3)}y`
+  }
+  else if (word.endsWith('es')) {
+    return word.slice(0, -2)
+  }
+  else if (word.endsWith('s')) {
+    return word.slice(0, -1)
+  }
+  else {
+    return word
+  }
+}
+
+const filtered = computed(() => {
+  if (edgeGlobal.objHas(edgeFirebase.data, `${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`) === false) {
+    return []
+  }
+
+  const allData = Object.values(edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`])
+
+  const filtered = allData.filter((entry) => {
+    if (state.filter.trim() === '') {
+      return true
+    }
+
+    // Modify the condition as needed, e.g., using "startsWith" or "includes"
+    return entry.name.toLowerCase().includes(state.filter.toLowerCase())
+  })
+  return filtered.sort((a, b) => {
+    if (a.name < b.name) {
+      return -1
+    }
+    if (a.name > b.name) {
+      return 1
+    }
+    return 0
+  })
+})
+
+onBeforeMount (async () => {
+  await edgeFirebase.startSnapshot(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`)
+  state.afterMount = true
+})
+
+const deleteItem = (docId) => {
+  state.deleteDialog = true
+  state.deleteItemName = edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`][docId].name
+  state.deleteItemDocId = docId
+}
+
+const deleteAction = () => {
+  edgeFirebase.removeDoc(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`, state.deleteItemDocId)
+  state.deleteDialog = false
+}
+</script>
+
+<template>
+  <v-card v-if="state.afterMount">
+    <v-toolbar flat>
+      <v-toolbar-title>{{ capitalizeFirstLetter(props.collection) }}</v-toolbar-title>
+      <v-text-field
+        v-model="state.filter"
+        label="Filter"
+        prepend-icon="mdi-filter"
+        variant="underlined"
+        hide-details
+        clearable
+        @click:clear="state.filter = ''"
+      />
+      <v-spacer />
+      <v-btn variant="outlined" :to="`/app/dashboard/${props.collection}/new`">
+        Add {{ singularize(props.collection) }}
+      </v-btn>
+    </v-toolbar>
+    <v-card-text>
+      <v-list lines="two">
+        <template v-for="item in filtered" :key="item.docId">
+          <v-list-item @click="gotoSite(item.docId)">
+            <template #prepend>
+              <v-avatar color="grey-darken-1">
+                <v-icon>mdi-file-edit</v-icon>
+              </v-avatar>
+            </template>
+
+            <v-list-item-title>{{ item.name }}</v-list-item-title>
+            <template #append>
+              <v-btn
+                color="grey-lighten-1"
+                icon="mdi-delete"
+                variant="text"
+                @click.stop="deleteItem(item.docId)"
+              />
+            </template>
+          </v-list-item>
+          <v-divider
+            inset
+          />
+        </template>
+      </v-list>
+    </v-card-text>
+    <v-dialog
+      v-model="state.deleteDialog"
+      persistent
+      max-width="600"
+      transition="fade-transition"
+    >
+      <v-card>
+        <v-toolbar flat>
+          <v-icon class="mx-4">
+            mdi-list-box
+          </v-icon>
+          Delete
+          <v-spacer />
+
+          <v-btn
+            type="submit"
+            color="primary"
+            icon
+            @click="state.deleteDialog = false"
+          >
+            <v-icon> mdi-close</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-card-title>Are you sure you want to delete "{{ state.deleteItemName }}"?</v-card-title>
+        <v-card-text>Hey there, you're about to banish "{{ state.deleteItemName }}" into the endless abyss of deletion, never to be seen again. Remember, this is not just another trashy reality TV show - there are no sudden comebacks or surprise twists. Once it's gone, it's gone, just like the dignity of anyone who wears socks with sandals. Are you 100% sure you're ready to make ""{{ state.deleteItemName }}"" disappear like a magician's assistant? Tick-tock, the choice is yours!</v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="blue-darken-1"
+            variant="text"
+            @click="state.deleteDialog = false"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            type="submit"
+            color="error"
+            variant="text"
+            @click="deleteAction()"
+          >
+            Delete
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+
+</style>