@edgedev/create-edge-app 0.0.1

package/components/editor.vue

@@ -0,0 +1,250 @@
+<script setup>
+const props = defineProps({
+  docId: {
+    type: String,
+    default: '',
+  },
+  collection: {
+    type: String,
+    required: true,
+  },
+  newDocSchema: {
+    type: Object,
+    required: true,
+  },
+})
+
+const newDoc = computed(() => {
+  return Object.entries(props.newDocSchema).reduce((newObj, [key, val]) => {
+    newObj[key] = val.value
+    return newObj
+  }, {})
+})
+
+const router = useRouter()
+
+const state = reactive({
+  workingDoc: {},
+  form: false,
+  tab: 'forms',
+  bypassUnsavedChanges: false,
+  afterMount: false,
+})
+const edgeFirebase = inject('edgeFirebase')
+const edgeGlobal = inject('edgeGlobal')
+
+const unsavedChanges = computed(() => {
+  if (props.docId === 'new') {
+    return false
+  }
+  return JSON.stringify(state.workingDoc) !== JSON.stringify(edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`][props.docId])
+})
+
+const subCollection = (collection) => {
+  if (edgeGlobal.objHas(edgeFirebase.data, `${edgeGlobal.edgeState.organizationDocPath}/${collection}`) === false) {
+    return []
+  }
+  // need to return an array of objects title is name and value is docId
+  return Object.entries(edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${collection}`]).map(([key, val]) => {
+    return {
+      title: val.name,
+      value: key,
+    }
+  })
+}
+
+onBeforeRouteUpdate((to, from, next) => {
+  if (unsavedChanges.value && !state.bypassUnsavedChanges) {
+    state.dialog = true
+    next(false)
+    return
+  }
+  edgeGlobal.edgeState.changeTracker = {}
+  next()
+})
+
+const discardChanges = async () => {
+  if (props.docId === 'new') {
+    state.bypassUnsavedChanges = true
+    edgeGlobal.edgeState.changeTracker = {}
+    router.push('/app/dashboard')
+    return
+  }
+  state.workingDoc = await edgeGlobal.dupObject(edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`][props.docId])
+  state.bypassUnsavedChanges = true
+  edgeGlobal.edgeState.changeTracker = {}
+  router.push('/app/dashboard')
+}
+
+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 title = computed(() => {
+  if (props.docId !== 'new') {
+    if (!edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`]) {
+      return ''
+    }
+    return capitalizeFirstLetter(`${edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`][props.docId].name}`)
+  }
+  else {
+    return `New ${capitalizeFirstLetter(singularize(props.collection))}`
+  }
+})
+
+const onSubmit = async (event) => {
+  const results = await event
+  if (results.valid) {
+    state.bypassUnsavedChanges = true
+    edgeFirebase.storeDoc(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`, state.workingDoc)
+    edgeGlobal.edgeState.changeTracker = {}
+    router.push(`/app/dashboard/${props.collection}`)
+  }
+}
+
+onBeforeMount(async () => {
+  edgeGlobal.edgeState.changeTracker = {}
+  for (const field of Object.keys(props.newDocSchema)) {
+    if (props.newDocSchema[field].type === 'collection') {
+      await edgeFirebase.startSnapshot(`${edgeGlobal.edgeState.organizationDocPath}/${field}`)
+    }
+  }
+  await edgeFirebase.startSnapshot(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`)
+})
+
+watch(() => edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`], (newVal) => {
+  if (props.docId !== 'new') {
+    if (edgeGlobal.objHas(newVal, props.docId) === false) {
+      return
+    }
+    state.workingDoc = edgeGlobal.dupObject(newVal[props.docId])
+    Object.keys(newDoc.value).forEach((field) => {
+      if (!edgeGlobal.objHas(state.workingDoc, field)) {
+        state.workingDoc[field] = newDoc.value[field]
+      }
+    })
+    state.afterMount = true
+  }
+  else {
+    state.workingDoc = edgeGlobal.dupObject(newDoc.value)
+    state.afterMount = true
+  }
+})
+</script>
+
+<template>
+  <v-card v-if="state.afterMount">
+    <v-form
+      v-model="state.form"
+      validate-on="submit"
+      @submit.prevent="onSubmit"
+    >
+      <v-toolbar flat>
+        <v-icon class="mx-4">
+          mdi-atom-variant
+        </v-icon>
+
+        {{ title }}
+        <v-spacer />
+        <v-btn
+          type="submit"
+          color="primary"
+          variant="text"
+        >
+          Save
+        </v-btn>
+      </v-toolbar>
+      <v-card-text>
+        <v-row>
+          <v-col v-for="(field, name, index) in props.newDocSchema" :key="index" :cols="field.cols">
+            <g-input
+              v-if="field.type !== 'collection'"
+              v-model="state.workingDoc[name]"
+              :disable-tracking="props.docId === 'new'"
+              :field-type="field.type"
+              :rules="[edgeGlobal.edgeRules.required]"
+              :label="field.label"
+              :parent-tracker-id="`${props.collection}-${props.docId}`"
+              :helper="field.helper"
+            />
+            <g-input
+              v-else
+              v-model="state.workingDoc[name]"
+              :disable-tracking="props.docId === 'new'"
+              field-type="select"
+              :label="field.label"
+              :items="subCollection(name)"
+              :parent-tracker-id="`${props.collection}-${props.docId}`"
+            />
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          v-if="!unsavedChanges"
+          color="secondary"
+          variant="text"
+          to="/app/dashboard"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          v-else
+          color="secondary"
+          variant="text"
+          to="/app/dashboard"
+        >
+          Cancel
+        </v-btn>
+
+        <v-btn
+          type="submit"
+          color="primary"
+          variant="text"
+        >
+          Save
+        </v-btn>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+  <v-dialog v-model="state.dialog" max-width="500px">
+    <v-card>
+      <v-card-title class="headline">
+        Unsaved Changes!
+      </v-card-title>
+      <v-card-text>
+        <h4>"{{ title }}" has unsaved changes.</h4>
+        <p>Are you sure you want to discard them?</p>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="blue darken-1" text @click="state.dialog = false">
+          Cancel
+        </v-btn>
+        <v-btn color="error" text @click="discardChanges()">
+          Discard
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/components/topMenu.vue

@@ -0,0 +1,17 @@
+<script setup>
+const edgeFirebase = inject('edgeFirebase')
+const edgeGlobal = inject('edgeGlobal')
+</script>
+
+<template>
+  <v-app-bar v-if="edgeFirebase.user.loggedIn">
+    <v-spacer />
+    <user-menu />
+  </v-app-bar>
+</template>
+
+<style lang="scss" scoped>
+  .inverted-logo {
+    filter: invert(1);
+  }
+</style>

package/components/userMenu.vue

@@ -0,0 +1,64 @@
+<script setup>
+const edgeFirebase = inject('edgeFirebase')
+const edgeGlobal = inject('edgeGlobal')
+</script>
+
+<template>
+  <v-menu>
+    <template #activator="{ props }">
+      <v-btn
+        prepend-icon="mdi-account-group-outline"
+        color="primary"
+        dark
+        v-bind="props"
+        variant="plain"
+      >
+        <template #prepend>
+          <v-icon color="secondary" />
+        </template>
+        {{ edgeGlobal.currentOrganizationObject.name }}
+      </v-btn>
+    </template>
+    <v-card>
+      <v-list>
+        <v-list-item
+          :title="edgeFirebase.user.meta.name"
+          :subtitle="edgeFirebase.user.firebaseUser.providerData[0].email"
+        >
+          <template #prepend>
+            <v-avatar>
+              <v-icon>
+                mdi-account
+              </v-icon>
+            </v-avatar>
+          </template>
+          <template #append>
+            <v-btn size="small" variant="text" icon="mdi-menu-down" />
+          </template>
+        </v-list-item>
+      </v-list>
+      <v-divider />
+      <edge-org-switcher />
+
+      <v-divider />
+
+      <v-list :lines="false" density="compact" nav>
+        <v-list-item link to="/app/account/organization-settings">
+          <v-list-item-title>Manage Account</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item link to="/app/account/my-profile">
+          <v-list-item-title>My Profile</v-list-item-title>
+        </v-list-item>
+      </v-list>
+
+      <v-divider />
+
+      <v-list :lines="false" density="compact" nav>
+        <v-list-item @click="logOut(edgeFirebase, edgeGlobal)">
+          <v-list-item-title>Log out</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-menu>
+</template>

package/composables/global.ts

@@ -0,0 +1,15 @@
+export const globalState = reactive({
+  drawer: false,
+  dark: true,
+})
+
+export const projectSetOrg = async (organization: string, edgeFirebase: any, edgeGlobal: any) => {
+  // set Organization Paths and start snapshots here
+}
+
+export const logOut = async (edgeFirebase: any, edgeGlobal: any) => {
+  const auth = useState('auth')
+  auth.value = ''
+  globalState.drawer = false
+  await edgeGlobal.edgeLogOut(edgeFirebase)
+}

package/composables/vuetify.ts

@@ -0,0 +1,10 @@
+// DO NOT CHANGE THIS FILE
+import { getCurrentInstance } from 'vue'
+
+export function useVuetify() {
+  const instance: any = getCurrentInstance()
+  if (!instance) {
+    throw new Error('useVuetify should be called in setup().')
+  }
+  return instance.proxy.$vuetify
+}

package/deploy.sh

@@ -0,0 +1,6 @@
+pnpm run generate
+firebase functions:config:set openai.api_key="SOME_API_KEY"
+firebase functions:config:get
+firebase deploy --only functions
+firebase deploy --only hosting
+firebase deploy --only firestore

package/emulator.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+ports=(9099 4000 5001 8080 5025 9199)
+for port in "${ports[@]}"; do
+  pid=$(lsof -ti :$port)
+  if [ ! -z "$pid" ]; then
+    process_name=$(ps -p $pid -o comm=)
+    echo $process_name
+    echo "Stopping Firebase emulator on port $port with PID $pid"
+    kill -9 $pid
+  fi
+done
+DIR="./firebase_data"
+if [ ! -d "$DIR" ]; then
+ cp -r ./firebase_data_emulator_seed ./firebase_data
+fi
+firebase emulators:start --import ./firebase_data --export-on-exit

package/firebase.json

@@ -0,0 +1,56 @@
+{
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  },
+  "functions": [
+    {
+      "source": "functions",
+      "codebase": "default",
+      "ignore": [
+        "node_modules",
+        ".git",
+        "firebase-debug.log",
+        "firebase-debug.*.log"
+      ]
+    }
+  ],
+  "hosting": {
+    "public": ".output/public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  },
+  "storage": {
+    "rules": "storage.rules"
+  },
+  "emulators": {
+    "auth": {
+      "port": 9099
+    },
+    "functions": {
+      "port": 5001
+    },
+    "firestore": {
+      "port": 8080
+    },
+    "hosting": {
+      "port": 5025
+    },
+    "storage": {
+      "port": 9199
+    },
+    "ui": {
+      "enabled": true
+    },
+    "singleProjectMode": true
+  }
+}

package/firestore.indexes.json

@@ -0,0 +1,4 @@
+{
+    "indexes": [],
+    "fieldOverrides": []
+}