@edgedev/create-edge-app 1.1.23 → 1.1.26

package/edge/components/formSubtypes/users.vue

@@ -0,0 +1,336 @@
+<script setup>
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+// TODO: If a removed user no longer has roles to any organiztions, need to a create new organization for them with
+// default name of "Personal". This will allow them to continue to use the app.
+
+// TODO:  Finish user setup.
+// TODO:  Add error/success to join/add organization.
+const props = defineProps({
+  item: {
+    type: Object,
+    default: null,
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  passThroughProps: {
+    type: [Number, String, Array, Object, Boolean],
+    required: false,
+  },
+})
+
+const edgeFirebase = inject('edgeFirebase')
+const state = reactive({
+  workingItem: {},
+  dialog: false,
+  form: false,
+  currentTitle: '',
+  saveButton: 'Invite User',
+  helpers: {
+    submits: true,
+  },
+  deleteDialog: false,
+  loading: false,
+})
+
+const roleNamesOnly = computed(() => {
+  return edgeGlobal.edgeState.userRoles.map((role) => {
+    return role.name
+  })
+})
+
+const newItem = {
+  name: '',
+  email: '',
+  role: '',
+  isTemplate: false,
+}
+
+// computed property gets count of admin users in organization
+const adminCount = computed(() => {
+  return props.items.filter((item) => {
+    return item.roles.find((role) => {
+      return role.collectionPath === edgeGlobal.edgeState.organizationDocPath.replaceAll('/', '-') && role.role === 'admin'
+    })
+  }).length
+})
+
+const addItem = () => {
+  state.saveButton = 'Invite User'
+  state.workingItem = edgeGlobal.dupObject(newItem)
+  state.workingItem.id = edgeGlobal.generateShortId()
+  state.currentTitle = 'Invite User'
+  state.dialog = true
+}
+
+const editItem = (item) => {
+  state.currentTitle = item.name
+  state.saveButton = 'Update User'
+  state.workingItem = edgeGlobal.dupObject(item)
+  state.workingItem.name = item.meta.name
+  state.workingItem.role = edgeGlobal.getRoleName(props.item.roles, edgeGlobal.edgeState.currentOrganization)
+  const newItemKeys = Object.keys(newItem)
+  newItemKeys.forEach((key) => {
+    if (state.workingItem[key] === undefined) {
+      state.workingItem[key] = newItem[key]
+    }
+  })
+  state.dialog = true
+}
+
+const deleteConfirm = (item) => {
+  state.currentTitle = item.name
+  state.workingItem = edgeGlobal.dupObject(item)
+  state.deleteDialog = true
+}
+
+const deleteAction = async () => {
+  const userRoles = state.workingItem.roles.filter((role) => {
+    return role.collectionPath.startsWith(edgeGlobal.edgeState.organizationDocPath.replaceAll('/', '-'))
+  })
+  for (const role of userRoles) {
+    await edgeFirebase.removeUserRoles(state.workingItem.docId, role.collectionPath)
+    // console.log(role.collectionPath)
+  }
+  state.deleteDialog = false
+  edgeGlobal.edgeState.changeTracker = {}
+}
+
+const closeDialog = () => {
+  state.dialog = false
+  edgeGlobal.edgeState.changeTracker = {}
+}
+
+const disableTracking = computed(() => {
+  return state.saveButton === 'Invite User'
+})
+
+const onSubmit = async () => {
+  state.loading = true
+  const userRoles = edgeGlobal.orgUserRoles(edgeGlobal.edgeState.currentOrganization)
+  const roles = userRoles.find(role => role.name === state.workingItem.role).roles
+  if (state.saveButton === 'Invite User') {
+    if (!state.workingItem.isTemplate) {
+      await edgeFirebase.addUser({ roles, meta: { name: state.workingItem.name, email: state.workingItem.email } })
+    }
+    else {
+      await edgeFirebase.addUser({ roles, meta: { name: state.workingItem.name, email: state.workingItem.email }, isTemplate: true })
+    }
+  }
+  else {
+    const oldRoles = state.workingItem.roles.filter((role) => {
+      return role.collectionPath.startsWith(edgeGlobal.edgeState.organizationDocPath.replaceAll('/', '-'))
+        && !roles.find(r => r.collectionPath === role.collectionPath)
+    })
+
+    for (const role of oldRoles) {
+      await edgeFirebase.removeUserRoles(state.workingItem.docId, role.collectionPath)
+    }
+
+    for (const role of roles) {
+      await edgeFirebase.storeUserRoles(state.workingItem.docId, role.collectionPath, role.role)
+    }
+  }
+  edgeGlobal.edgeState.changeTracker = {}
+  state.loading = false
+  state.dialog = false
+}
+
+const newUserSchema = toTypedSchema(z.object({
+  name: z.string({
+    required_error: 'Name is required',
+  }).min(1, { message: 'Name is required' }),
+  email: z.string({
+    required_error: 'Email is required',
+  }).email({ message: 'Invalid email address' }).min(6, { message: 'Email must be at least 6 characters long' }).max(50, { message: 'Email must be less than 50 characters long' }),
+  role: z.string({
+    required_error: 'Role is required',
+  }).min(1, { message: 'Role is required' }),
+}))
+
+const updateUserSchema = toTypedSchema(z.object({
+  name: z.string({
+    required_error: 'Name is required',
+  }).min(1, { message: 'Name is required' }),
+  role: z.string({
+    required_error: 'Role is required',
+  }).min(1, { message: 'Role is required' }),
+}))
+
+const computedUserSchema = computed(() => {
+  if (state.saveButton === 'Invite User') {
+    return newUserSchema
+  }
+  return updateUserSchema
+})
+
+const currentOrganization = computed(() => {
+  if (edgeGlobal.edgeState.organizations.length > 0) {
+    if (edgeGlobal.edgeState.currentOrganization && edgeFirebase?.data[`organizations/${edgeGlobal.edgeState.currentOrganization}`]) {
+      return edgeFirebase?.data[`organizations/${edgeGlobal.edgeState.currentOrganization}`]
+    }
+  }
+  return ''
+})
+</script>
+
+<template>
+  <edge-shad-button v-if="props.item === null" class="bg-slate-500 mx-2 h-6 text-xs" @click="addItem()">
+    Invite Member
+  </edge-shad-button>
+  <div v-else class="flex w-full py-2 justify-between items-center cursor-pointer" @click="editItem(props.item)">
+    <Avatar class="handle pointer p-0 h-6 w-6 mr-2">
+      <User width="18" height="18" />
+    </Avatar>
+    <div class="flex gap-2 mr-2 items-center">
+      <div class="text-md text-bold mr-2">
+        {{ props.item.meta.name }}
+      </div>
+      <edge-chip v-if="props.item.userId === edgeFirebase.user.uid">
+        You
+      </edge-chip>
+      <edge-chip v-if="!props.item.userId" class="bg-warning">
+        Invited, Not Registered
+      </edge-chip>
+    </div>
+    <div class="grow flex gap-2 justify-end">
+      <edge-chip>
+        {{ edgeGlobal.getRoleName(props.item.roles, edgeGlobal.edgeState.currentOrganization) }}
+      </edge-chip>
+      <template v-if="!props.item.userId">
+        <edge-chip>
+          Registration Code: {{ props.item.docId }}
+          <edge-clipboard-button :text="props.item.docId" />
+        </edge-chip>
+      </template>
+    </div>
+    <edge-shad-button
+      :disabled="items.length === 1"
+      class="bg-red-400 mx-2 h-6 text-xs"
+      variant="outline"
+      @click.stop="deleteConfirm(props.item)"
+    >
+      <span v-if="props.item.userId === edgeFirebase.user.uid">Leave</span>
+      <span v-else>Remove</span>
+    </edge-shad-button>
+  </div>
+  <edge-shad-dialog
+    v-model="state.deleteDialog"
+  >
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>
+          <span v-if="state.workingItem.userId === edgeFirebase.user.uid">
+            Remove Yourself?
+          </span>
+          <span v-else>
+            Remove "{{ state.workingItem.meta.name }}"
+          </span>
+        </DialogTitle>
+        <DialogDescription />
+      </DialogHeader>
+
+      <h3 v-if="state.workingItem.userId === edgeFirebase.user.uid && adminCount > 1">
+        Are you sure you want to remove yourself from the organization "{{ currentOrganization.name }}"? You will no longer have access to any of the organization's data.
+      </h3>
+      <h3 v-else-if="state.workingItem.userId === edgeFirebase.user.uid && adminCount === 1">
+        You cannot remove yourself from this organization because you are the only admin. You can delete the organization or add another admin.
+      </h3>
+      <h3 v-else>
+        Are you sure you want to remove "{{ state.workingItem.meta.name }}" from the organization "{{ currentOrganization.name }}"?
+      </h3>
+      <DialogFooter class="pt-6 flex justify-between">
+        <edge-shad-button class="text-white  bg-slate-800 hover:bg-slate-400" @click="state.deleteDialog = false">
+          Cancel
+        </edge-shad-button>
+        <edge-shad-button
+          :disabled="adminCount === 1 && state.workingItem.userId === edgeFirebase.user.uid"
+          class="w-full"
+          variant="destructive"
+          @click="deleteAction()"
+        >
+          <span v-if="state.workingItem.userId === edgeFirebase.user.uid">
+            Leave
+          </span>
+          <span v-else>
+            Remove
+          </span>
+        </edge-shad-button>
+      </DialogFooter>
+    </DialogContent>
+  </edge-shad-dialog>
+  <edge-shad-dialog
+    v-model="state.dialog"
+  >
+    <DialogContent>
+      <edge-shad-form :initial-values="state.workingItem" :schema="computedUserSchema" @submit="onSubmit">
+        <DialogHeader>
+          <DialogTitle>
+            {{ state.currentTitle }}
+          </DialogTitle>
+          <DialogDescription />
+        </DialogHeader>
+
+        <edge-g-input
+          v-model="state.workingItem.name"
+          name="name"
+          :disable-tracking="true"
+          field-type="text"
+          label="Name"
+          :parent-tracker-id="`inviteUser-${state.workingItem.id}`"
+          :disabled="state.saveButton !== 'Invite User'"
+        />
+        <edge-g-input
+          v-if="state.saveButton === 'Invite User'"
+          v-model="state.workingItem.email"
+          name="email"
+          :disable-tracking="true"
+          field-type="text"
+          label="Email"
+          :parent-tracker-id="`inviteUser-${state.workingItem.id}`"
+        />
+        <edge-g-input
+          v-if="state.saveButton === 'Invite User'"
+          v-model="state.workingItem.isTemplate"
+          name="isTemplate"
+          :disable-tracking="true"
+          field-type="boolean"
+          label="Template User"
+          :parent-tracker-id="`inviteUser-${state.workingItem.id}`"
+        />
+        <div class="mb-4" />
+        <edge-g-input
+          v-model="state.workingItem.role"
+          name="role"
+          :disable-tracking="true"
+          :items="roleNamesOnly"
+          field-type="select"
+          label="Role"
+          :parent-tracker-id="`inviteUser-${state.workingItem.id}`"
+          :disabled="state.workingItem.userId === edgeFirebase.user.uid"
+        />
+        <DialogFooter class="pt-6 flex justify-between">
+          <edge-shad-button variant="destructive" @click="closeDialog">
+            Cancel
+          </edge-shad-button>
+          <edge-shad-button
+            :disabled="state.loading"
+            class="text-white  w-100 bg-slate-800 hover:bg-slate-400"
+            type="submit"
+          >
+            <Loader2 v-if="state.loading" class="w-4 h-4 mr-2 animate-spin" />
+            {{ state.saveButton }}
+          </edge-shad-button>
+        </DialogFooter>
+      </edge-shad-form>
+    </DialogContent>
+  </edge-shad-dialog>
+</template>
+
+<style lang="scss" scoped>
+.pointer {
+  cursor: move;
+}
+</style>

package/edge/components/functionChips.vue

@@ -0,0 +1,57 @@
+<script setup>
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+})
+// Your JavaScript code goes here
+</script>
+
+<template>
+  <div>
+    <edge-chip>
+      Type: {{ field.type }}
+    </edge-chip>
+    <edge-chip>
+      Required
+    </edge-chip>
+    <DropdownMenu
+      v-if="field?.enum?.length"
+    >
+      <DropdownMenuTrigger as-child>
+        <edge-chip class="ml-1 cursor-pointer">
+          Enum
+        </edge-chip>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <edge-v-alert class="w-[300px]">
+          <div class="text-lg">
+            Enum
+          </div>
+          {{ field.enum.join(', ') }}
+        </edge-v-alert>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    <DropdownMenu
+      v-if="field.description"
+    >
+      <DropdownMenuTrigger as-child>
+        <edge-chip class="ml-1 cursor-pointer">
+          Description
+        </edge-chip>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <edge-v-alert class="w-[300px]">
+          <div class="text-lg">
+            Description
+          </div>
+          {{ field.description }}
+        </edge-v-alert>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
+
+<style scoped>
+</style>

package/edge/components/gError.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { defineProps } from 'vue'
+const props = defineProps({
+  error: {
+    type: String,
+    default: '',
+  },
+})
+
+const firebaseErrorMap = {
+  'auth/invalid-email': 'Oops! That doesn\'t look like a valid email address.',
+  'auth/user-disabled': 'Oh no! This user account is currently disabled.',
+  'auth/user-not-found': 'Hmm, we couldn\'t find a user with that email.',
+  'auth/wrong-password': 'Whoops! That password doesn\'t seem to be correct.',
+  'auth/email-already-in-use': 'It looks like someone else is already using that email address!',
+  'auth/weak-password': 'Your password should be stronger! Try adding more characters or symbols.',
+  'auth/operation-not-allowed': 'Sorry, this operation is not allowed.',
+  'auth/account-exists-with-different-credential': 'This account already exists, but with different credentials.',
+  'auth/credential-already-in-use': 'These credentials are already being used by someone else.',
+  'auth/user-token-expired': 'Your session has expired. Please log in again.',
+  'auth/network-request-failed': 'Oops, we couldn\'t connect to the server. Check your internet connection.',
+  'storage/object-not-found': 'Oh dear, we couldn\'t find the file you\'re looking for.',
+  'storage/bucket-not-found': 'We couldn\'t find the storage bucket you\'re looking for.',
+  'storage/project-not-found': 'Hmm, we couldn\'t find the project you\'re looking for.',
+  'storage/quota-exceeded': 'You\'ve reached your storage limit! Please try again later.',
+  'storage/unauthorized': 'Hold on! You don\'t have permission to access this resource.',
+  'storage/canceled': 'The upload was canceled.',
+  'storage/invalid-checksum': 'The file seems to be corrupted. Please try again.',
+  'firestore/permission-denied': 'You don\'t have permission to access this data.',
+  'firestore/unavailable': 'Our Firestore service is taking a break. Please try again later.',
+  'firestore/internal': 'Something went wrong on our end. We\'ll look into it!',
+  'firestore/invalid-argument': 'You provided an invalid argument. Please double-check!',
+  'firestore/cancelled': 'Operation cancelled. No worries!',
+  'auth/popup-closed-by-user': 'Oops! The authentication popup was closed before the process could complete. Please try again.',
+  'auth/invalid-verification-code': 'Uh oh! That verification code doesn\'t seem to be correct. Please try again.',
+  'auth/too-many-requests': 'Whoa! You\'ve made too many attempts in a short period of time. Please wait a bit before trying again.',
+  'auth/invalid-login-credentials': 'The provided login credentials are invalid. Please try again.',
+  'auth/admin-restricted-operation': 'This operation is restricted to administrators only.',
+  'auth/argument-error': 'There seems to be an error with the provided argument. Please check and try again.',
+  'auth/app-not-authorized': 'This app is not authorized. Please contact the administrator.',
+  'auth/app-not-installed': 'The app is not installed. Please install the app and try again.',
+  'auth/captcha-check-failed': 'The captcha check failed. Please try again.',
+  'auth/code-expired': 'The code has expired. Please request a new one.',
+  'auth/cordova-not-ready': 'The system is not ready yet. Please wait a moment and try again.',
+  'auth/cors-unsupported': 'Your browser does not support CORS. Please update your browser or try a different one.',
+  'auth/custom-token-mismatch': 'The provided custom token does not match. Please check and try again.',
+  'auth/requires-recent-login': 'For security reasons, this operation requires recent authentication. Log in again before retrying this request.',
+  'auth/dependent-sdk-initialized-before-auth': 'An internal error occurred: a dependent SDK was initialized before the auth module.',
+  'auth/dynamic-link-not-activated': 'The dynamic link is not activated. Please contact support.',
+  'auth/email-change-needs-verification': 'Your email change needs verification. Please check your email for a verification link.',
+  'auth/emulator-config-failed': 'The emulator configuration failed. Please check your setup.',
+  'auth/expired-action-code': 'The action code has expired. Please request a new one.',
+  'auth/cancelled-popup-request': 'The popup request was cancelled. Please try again.',
+  'auth/internal-error': 'An internal error occurred. Please try again later.',
+  // ... Add more error codes as needed
+}
+
+const getReadableFirebaseError = (errorCode) => {
+  let code = ''
+
+  if (typeof errorCode === 'string') {
+    const match = errorCode.match(/(?:Firebase: Error \()?([a-z/,-]+)\)?/)
+    code = match ? match[1] : ''
+  }
+  else if (errorCode instanceof Error) {
+    const match = errorCode.message.match(/(?:Firebase: Error \()?([a-z/,-]+)\)?/)
+    code = match ? match[1] : ''
+  }
+
+  if (!code) {
+    console.log('Invalid error code:', errorCode)
+    return 'An invalid error code was received. Please try again later.'
+  }
+
+  const readableError = firebaseErrorMap[code]
+
+  if (readableError) {
+    return readableError
+  }
+  else {
+    console.log('Unknown Firebase error:', errorCode)
+    return errorCode instanceof Error ? errorCode.message : errorCode
+  }
+}
+</script>
+
+<template>
+  <Alert class="mt-2 bg-red-800">
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      {{ getReadableFirebaseError(props.error) }}
+    </AlertDescription>
+  </Alert>
+</template>
+
+<style scoped>
+
+</style>

package/edge/components/gHelper.vue

@@ -0,0 +1,67 @@
+<!-- eslint-disable vue/no-v-text-v-html-on-component -->
+<script setup>
+import { computed, defineProps, reactive } from 'vue'
+const props = defineProps({
+  helper: {
+    type: String,
+    default: null,
+  },
+  title: {
+    type: String,
+    default: null,
+  },
+})
+
+const state = reactive({
+  titles: [
+    'Field Assistance',
+    'Form Help',
+    'Input Guide',
+    'Need Assistance?',
+    'Help Center',
+    'Field Support',
+    'Quick Help',
+    'Form Assistance',
+    'Guidance Available',
+    'Information Station',
+    'Here to Help',
+    'Form Guidance',
+    'Input Support',
+    'Solutions Available',
+    'Your Guide',
+    'Support Hub',
+    'Input Assistance',
+    'Help Desk',
+    'Support Center',
+  ],
+})
+const newTitle = computed(() => {
+  if (!props.title) {
+    return state.titles[Math.floor(Math.random() * state.titles.length)]
+  }
+  return `${props.title} Help`
+})
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="text" size="icon" class="p-0 w-5 h-5">
+        <Info class="w-5 h-5" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="absolute right-0 w-screen max-w-[600px]">
+      <Card class="border-0">
+        <CardHeader class="py-2">
+          <CardTitle class="text-xl">
+            {{ newTitle }}
+          </CardTitle>
+        </CardHeader>
+        <CardContent v-html="props.helper" />
+      </Card>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
+
+<style lang="scss">
+</style>