@edgedev/create-edge-app 1.1.25 → 1.1.27

package/edge/components/fileTree.vue

@@ -0,0 +1,72 @@
+<script setup>
+const props = defineProps ({
+  title: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  items: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+})
+
+const emit = defineEmits(['fileDelete'])
+
+const state = reactive({
+  fileTypes: {
+    'text/html': 'FileCode2',
+    'application/javascript': 'FileCode2',
+    'application/json': 'FileCode2',
+    'application/xml': 'FileCode2',
+    'text/markdown': 'FileCode2',
+    'application/pdf': 'FileText',
+    'image/png': 'FileImage',
+    'text/plain': 'FileText',
+    'image/svg+xml': 'FileImage',
+    'image/jpeg': 'FileImage',
+    'image/gif': 'FileImage',
+    'image/webp': 'FileImage',
+    'image/x-icon': 'FileImage',
+    'application/vnd.ms-excel': 'FileSpreadsheet',
+    'text/css': 'FileCode2',
+    'image/vnd.microsoft.icon': 'FileImage', // ICO files
+  },
+})
+
+const fileDelete = (value) => {
+  emit('fileDelete', value)
+}
+</script>
+
+<template>
+  <Command class="rounded-lg border shadow-md w-full h-full border-0">
+    <CommandList>
+      <CommandGroup :heading="props.title">
+        <template v-for="(item, index) in items" :key="index">
+          <CommandItem v-if="edgeGlobal.objHas(item, 'children')" class="items-start" :value="item.title">
+            <div class="w-full">
+              <div class="flex items-center">
+                <FolderOpen class="mr-2" />
+                <span>{{ item.title }}</span>
+              </div>
+              <div class="ml-4 w-full">
+                <edge-file-tree :items="item.children" @file-delete="fileDelete" />
+              </div>
+            </div>
+          </CommandItem>
+          <CommandItem v-else :value="item.title">
+            <component :is="state.fileTypes[item.file]" class="mr-2" />
+            <span>{{ item.title }}</span>
+            <CommandShortcut>
+              <edge-shad-button class="h-6 w-6 hover:bg-slate-600" variant="text" size="icon" @click.prevent.stop="fileDelete(item)">
+                <Trash class="h-4 w-4" />
+              </edge-shad-button>
+            </CommandShortcut>
+          </CommandItem>
+        </template>
+      </CommandGroup>
+    </CommandList>
+  </Command>
+</template>

package/edge/components/files.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Upload Files',
+  },
+  description: {
+    type: String,
+    default: 'Drag and drop files here or click to upload.',
+  },
+  modelValue: {
+    type: [Array, Object],
+    default: () => [],
+  },
+  accept: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const state = reactive({
+  files: [],
+})
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: false,
+  prop: 'modelValue',
+})
+
+const dropFiles = computed(() => {
+  return state.files
+})
+
+watch (dropFiles, (newValue) => {
+  const files = []
+  newValue.forEach((file) => {
+    files.push(file.file)
+  })
+  modelValue.value = files
+})
+
+// Ensure modelValue is always an array
+watch(modelValue, (newValue) => {
+  console.log(newValue)
+  if (!Array.isArray(newValue)) {
+    modelValue.value = [newValue]
+  }
+})
+</script>
+
+<template>
+  <Card color="secondary" class="px-0 py-2 my-2 drop-active text-center sticky z-10 top-0 cursor-pointer">
+    <file-upload
+      v-model="state.files"
+      :accept="props.accept"
+      :name="props.name"
+      :multiple="props.multiple"
+      drop
+      class="w-full"
+    >
+      <Card-title class="pt-6">
+        {{ props.title }}
+      </Card-title>
+      <CardContent style="width:100%;" class="pb-3">
+        <p>{{ props.description }}</p>
+      </CardContent>
+    </file-upload>
+    <div v-if="modelValue.length > 0" class="mt-0">
+      <div v-if="props.multiple" class="mb-2">
+        {{ modelValue.length }} file(s) selected for upload.
+      </div>
+      <div v-else class="mt-0">
+        {{ modelValue[0].name }} selected for upload.
+      </div>
+    </div>
+  </Card>
+</template>

package/edge/components/formSubtypes/myOrgs.vue

@@ -0,0 +1,214 @@
+<script setup>
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+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: 'Add Organization',
+  helpers: {
+    submits: true,
+  },
+  deleteDialog: false,
+  loading: false,
+})
+
+const newItem = {
+  name: '',
+}
+
+const addItem = () => {
+  console.log(newItem)
+  state.saveButton = 'Add Organization'
+  state.workingItem = edgeGlobal.dupObject(newItem)
+  state.workingItem.id = edgeGlobal.generateShortId()
+  state.currentTitle = 'Add Organization'
+  state.dialog = true
+}
+
+const joinOrg = () => {
+  state.saveButton = 'Join Organization'
+  state.workingItem = edgeGlobal.dupObject(newItem)
+  state.workingItem.id = edgeGlobal.generateShortId()
+  state.currentTitle = 'Join Organization'
+  state.dialog = true
+}
+
+const deleteConfirm = (item) => {
+  state.currentTitle = item.name
+  state.workingItem = edgeGlobal.dupObject(item)
+  state.deleteDialog = true
+}
+
+const deleteAction = async () => {
+  await edgeFirebase.removeUser(state.workingItem.docId)
+  state.deleteDialog = false
+  edgeGlobal.edgeState.changeTracker = {}
+}
+
+const closeDialog = () => {
+  state.dialog = false
+  edgeGlobal.edgeState.changeTracker = {}
+}
+
+const register = reactive({
+  registrationCode: props.passThroughProps,
+  dynamicDocumentFieldValue: '',
+})
+
+const onSubmit = async () => {
+  const registerSend = edgeGlobal.dupObject(register)
+  state.loading = true
+  if (state.saveButton === 'Add Organization') {
+    registerSend.dynamicDocumentFieldValue = state.workingItem.name
+  }
+  else {
+    registerSend.dynamicDocumentFieldValue = ''
+    registerSend.registrationCode = state.workingItem.name
+  }
+  const results = await edgeFirebase.currentUserRegister(registerSend)
+  edgeGlobal.getOrganizations(edgeFirebase)
+  console.log(results)
+  edgeGlobal.edgeState.changeTracker = {}
+  state.dialog = false
+  state.loading = false
+}
+const schema = toTypedSchema(z.object({
+  name: z.string({
+    required_error: 'Required',
+  }).min(1, { message: 'Required' }),
+}))
+</script>
+
+<template>
+  <edge-shad-button v-if="props.item === null && props.passThroughProps" class="bg-slate-500 mx-2 h-6 text-xs" @click="addItem()">
+    Add Organization
+  </edge-shad-button>
+  <edge-shad-button v-if="props.item === null" class="bg-slate-500 mx-2 h-6 text-xs" @click="joinOrg()">
+    Join Organization
+  </edge-shad-button>
+  <div v-else class="flex w-full py-2 justify-between items-center">
+    <Avatar class="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.name }}
+      </div>
+      <edge-chip v-if="edgeGlobal.edgeState.currentOrganization === props.item.docId" size="small" color="primary">
+        Current
+      </edge-chip>
+      <edge-shad-button v-else class="bg-slate-500 h-6 text-xs" @click.stop.prevent="edgeGlobal.setOrganization(props.item.docId, edgeFirebase)">
+        Switch
+      </edge-shad-button>
+    </div>
+    <div class="grow flex gap-2 justify-end">
+      <edge-chip>
+        {{ edgeGlobal.getRoleName(edgeFirebase.user.roles, props.item.docId) }}
+      </edge-chip>
+    </div>
+    <edge-shad-button
+      class="bg-red-400 mx-2 h-6 text-xs"
+      variant="outline"
+      @click.stop="deleteConfirm(props.item)"
+    >
+      Leave
+    </edge-shad-button>
+  </div>
+
+  <edge-shad-dialog v-model="state.deleteDialog">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>
+          Leave Organization
+        </DialogTitle>
+      </DialogHeader>
+      <DialogDescription />
+      <h3 v-if="edgeGlobal.getRoleName(edgeFirebase.user.roles, state.workingItem.docId) === 'User'">
+        Are you sure you want to leave the organization "{{ state.currentTitle }}"? You will no longer have access to any of the organization's data.
+      </h3>
+      <h3 v-else>
+        As an admin, you cannot leave the organization "{{ state.currentTitle }}" from this screen. Please go to the organization's members page to remove yourself.
+      </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
+          v-if="edgeGlobal.getRoleName(edgeFirebase.user.roles, state.workingItem.docId) === 'User'"
+          class="w-full"
+          variant="destructive"
+          @click="deleteAction()"
+        >
+          Leave
+        </edge-shad-button>
+      </DialogFooter>
+    </DialogContent>
+  </edge-shad-dialog>
+
+  <edge-shad-dialog v-model="state.dialog">
+    <DialogContent>
+      <edge-shad-form :schema="schema" @submit="onSubmit">
+        <DialogHeader>
+          <DialogTitle>
+            {{ state.currentTitle }}
+          </DialogTitle>
+        </DialogHeader>
+        <DialogDescription />
+        <edge-g-input
+          v-model="state.workingItem.name"
+          name="name"
+          :disable-tracking="true"
+          field-type="text"
+          :label="state.saveButton === 'Add Organization' ? 'Name' : 'Registration Code'"
+          :parent-tracker-id="`myOrgs-${state.workingItem.id}`"
+        />
+
+        <template v-if="state.saveButton === 'Add Organization'">
+          Please enter the name of the organization you would like to create.
+        </template>
+        <template v-else>
+          To join an existing organization, please enter the registration code provided by the organization.
+        </template>
+        <DialogFooter class="pt-6 flex justify-between">
+          <edge-shad-button variant="destructive" @click="closeDialog">
+            Close
+          </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>