@edgedev/create-edge-app 1.1.27 → 1.1.29

package/edge/components/formSubtypes/myOrgs.vue

@@ -30,18 +30,38 @@ const state = reactive({
   },
   deleteDialog: false,
   loading: false,
+  bringUserIds: [],
+})
+
+const edgeUsers = toRef(edgeFirebase.state, 'users')
+const users = computed(() => Object.values(edgeUsers.value ?? {}))
+const roles = computed(() => edgeFirebase.user.roles)
+
+const bringUserOptions = computed(() => {
+  return users.value.filter(user => user.userId !== edgeFirebase.user.uid)
+})
+
+const showBringUsers = computed(() => {
+  return state.saveButton === 'Add Organization' && bringUserOptions.value.length > 0
 })
 
 const newItem = {
   name: '',
 }
 
+const startUsersSnapshot = async () => {
+  if (!edgeGlobal.edgeState.currentOrganization)
+    return
+  await edgeFirebase.startUsersSnapshot(`organizations/${edgeGlobal.edgeState.currentOrganization}`)
+}
+
 const addItem = () => {
   console.log(newItem)
   state.saveButton = 'Add Organization'
   state.workingItem = edgeGlobal.dupObject(newItem)
   state.workingItem.id = edgeGlobal.generateShortId()
   state.currentTitle = 'Add Organization'
+  state.bringUserIds = []
   state.dialog = true
 }
 
@@ -75,9 +95,77 @@ const register = reactive({
   dynamicDocumentFieldValue: '',
 })
 
+const updateBringUserSelection = (docId, checked) => {
+  const selections = new Set(state.bringUserIds)
+  if (checked) {
+    selections.add(docId)
+  }
+  else {
+    selections.delete(docId)
+  }
+  state.bringUserIds = Array.from(selections)
+}
+
+const addUsersToOrganization = async (orgId) => {
+  if (!orgId || state.bringUserIds.length === 0)
+    return
+  const targetUsers = users.value.filter(user => state.bringUserIds.includes(user.docId))
+  for (const user of targetUsers) {
+    const roleName = edgeGlobal.getRoleName(user.roles, edgeGlobal.edgeState.currentOrganization)
+    const resolvedRoleName = roleName === 'Unknown' ? 'User' : roleName
+    const orgRoles = edgeGlobal.orgUserRoles(orgId)
+    const roleMatch = orgRoles.find(role => role.name === resolvedRoleName)
+    if (!roleMatch)
+      continue
+    for (const role of roleMatch.roles) {
+      await edgeFirebase.storeUserRoles(user.docId, role.collectionPath, role.role)
+    }
+  }
+}
+
+const waitForOrgRole = async (orgId) => {
+  const orgPath = `organizations-${String(orgId).replaceAll('/', '-')}`
+  const maxAttempts = 30
+  const delayMs = 300
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    if (edgeFirebase.user.roles.some(role => role.collectionPath === orgPath)) {
+      return true
+    }
+    await new Promise(resolve => setTimeout(resolve, delayMs))
+  }
+  return false
+}
+
+const waitForNewOrgRole = async (previousOrgPaths) => {
+  const maxAttempts = 30
+  const delayMs = 300
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    const currentOrgRoles = edgeFirebase.user.roles.filter(role => role.collectionPath.startsWith('organizations-'))
+    const newOrgRole = currentOrgRoles.find(role => !previousOrgPaths.includes(role.collectionPath))
+    if (newOrgRole) {
+      return newOrgRole
+    }
+    await new Promise(resolve => setTimeout(resolve, delayMs))
+  }
+  return null
+}
+
+onBeforeMount(async () => {
+  await startUsersSnapshot()
+})
+
+watch(() => edgeGlobal.edgeState.currentOrganization, async (nextOrg, prevOrg) => {
+  if (nextOrg && nextOrg !== prevOrg) {
+    await startUsersSnapshot()
+  }
+})
+
 const onSubmit = async () => {
   const registerSend = edgeGlobal.dupObject(register)
   state.loading = true
+  const existingOrgPaths = edgeFirebase.user.roles
+    .filter(role => role.collectionPath.startsWith('organizations-'))
+    .map(role => role.collectionPath)
   if (state.saveButton === 'Add Organization') {
     registerSend.dynamicDocumentFieldValue = state.workingItem.name
   }
@@ -86,7 +174,14 @@ const onSubmit = async () => {
     registerSend.registrationCode = state.workingItem.name
   }
   const results = await edgeFirebase.currentUserRegister(registerSend)
-  edgeGlobal.getOrganizations(edgeFirebase)
+  await edgeGlobal.getOrganizations(edgeFirebase)
+  if (state.saveButton === 'Add Organization') {
+    const newOrgRole = await waitForNewOrgRole(existingOrgPaths)
+    const newOrgId = newOrgRole?.collectionPath?.replace('organizations-', '')
+    if (newOrgId) {
+      await addUsersToOrganization(newOrgId)
+    }
+  }
   console.log(results)
   edgeGlobal.edgeState.changeTracker = {}
   state.dialog = false
@@ -189,6 +284,22 @@ const schema = toTypedSchema(z.object({
         <template v-else>
           To join an existing organization, please enter the registration code provided by the organization.
         </template>
+        <div v-if="showBringUsers" class="mt-4 w-full">
+          <div class="text-sm font-medium text-foreground">
+            Users to bring over (you will be added automatically)
+          </div>
+          <div class="mt-2 w-full flex flex-wrap gap-2">
+            <div v-for="user in bringUserOptions" :key="user.docId" class="flex-1 min-w-[220px]">
+              <edge-shad-checkbox
+                :name="`bring-user-${user.docId}`"
+                :model-value="state.bringUserIds.includes(user.docId)"
+                @update:model-value="val => updateBringUserSelection(user.docId, val)"
+              >
+                {{ user.meta.name }}
+              </edge-shad-checkbox>
+            </div>
+          </div>
+        </div>
         <DialogFooter class="pt-6 flex justify-between">
           <edge-shad-button variant="destructive" @click="closeDialog">
             Close

package/edge/components/imagePicker.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+import { ImagePlus, Trash2 } from 'lucide-vue-next'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: 'Photo',
+  },
+  dialogTitle: {
+    type: String,
+    default: 'Select Image',
+  },
+  site: {
+    type: String,
+    default: 'clearwater-hub-images',
+  },
+  defaultTags: {
+    type: Array,
+    default: () => [],
+  },
+  includeCmsAll: {
+    type: Boolean,
+    default: true,
+  },
+  heightClass: {
+    type: String,
+    default: 'h-[160px]',
+  },
+  showRemove: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const state = reactive({
+  dialog: false,
+})
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: false,
+  prop: 'modelValue',
+})
+
+const openDialog = () => {
+  if (props.disabled)
+    return
+  state.dialog = true
+}
+
+const closeDialog = () => {
+  state.dialog = false
+}
+
+const selectImage = (url) => {
+  modelValue.value = url || ''
+  closeDialog()
+}
+
+const clearImage = () => {
+  if (props.disabled)
+    return
+  modelValue.value = ''
+}
+</script>
+
+<template>
+  <div class="rounded-lg border bg-background p-4 space-y-3">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <div class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {{ props.label }}
+      </div>
+      <div class="flex items-center gap-2">
+        <edge-shad-button size="sm" variant="outline" class="h-8 px-2" :disabled="props.disabled" @click="openDialog">
+          <ImagePlus class="h-4 w-4 mr-2" />
+          Select
+        </edge-shad-button>
+        <edge-shad-button
+          v-if="props.showRemove && modelValue"
+          size="icon"
+          variant="ghost"
+          class="h-8 w-8 text-destructive/80 hover:text-destructive"
+          :disabled="props.disabled"
+          @click="clearImage"
+        >
+          <Trash2 class="h-4 w-4" />
+        </edge-shad-button>
+      </div>
+    </div>
+    <div class="rounded-lg flex items-center justify-center overflow-hidden border bg-muted/20" :class="props.heightClass">
+      <img
+        v-if="modelValue"
+        :src="modelValue"
+        alt=""
+        class="max-h-full max-w-full h-auto w-auto object-contain"
+      >
+      <span v-else class="text-sm text-muted-foreground italic">No photo selected</span>
+    </div>
+  </div>
+
+  <Dialog v-model:open="state.dialog">
+    <DialogContent class="w-full max-w-[1200px] max-h-[80vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle>{{ props.dialogTitle }}</DialogTitle>
+        <DialogDescription />
+      </DialogHeader>
+      <edge-cms-media-manager
+        :site="props.site"
+        :default-tags="props.defaultTags"
+        :include-cms-all="props.includeCmsAll"
+        :select-mode="true"
+        @select="selectImage"
+      />
+    </DialogContent>
+  </Dialog>
+</template>

package/edge/components/myAccount.vue

@@ -34,6 +34,7 @@ const updateUser = async () => {
   state.userError = { success: state.userError.success, message: state.userError.message.replace('Firebase: ', '').replace(' (auth/invalid-email)', '') }
   if (state.userError.success) {
     state.userError = { success: true, message: 'A verification link has been sent to your new email address. Please click the link to complete the email change process.' }
+    await edgeFirebase.setUserMeta({ email: state.username })
   }
   edgeGlobal.edgeState.changeTracker = {}
   state.loaded = false