@edgedev/create-edge-app 1.1.25 → 1.1.27

package/edge/components/organizationSettings.vue

@@ -0,0 +1,271 @@
+<script setup>
+import { computed, defineProps, inject, nextTick, onBeforeMount, reactive, watch } from 'vue'
+import CardContent from '~/components/ui/card/CardContent.vue'
+
+import { useToast } from '@/components/ui/toast/use-toast'
+const props = defineProps({
+  subscribeOptions: {
+    type: Array,
+    default: () => [],
+  },
+  orgFields: {
+    type: Object,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: 'Organization Settings',
+  },
+  hideUniqueIdentifier: {
+    type: Boolean,
+    default: false,
+  },
+  formSchema: {
+    type: Object,
+    required: true,
+  },
+})
+const { toast } = useToast()
+
+const edgeFirebase = inject('edgeFirebase')
+// const edgeGlobal = inject('edgeGlobal')
+
+const state = reactive({
+  data: {},
+  org: '',
+  form: false,
+  loaded: false,
+  showSnack: false,
+  successMessage: '',
+  snackColor: 'success',
+  loading: false,
+})
+
+const onSubmit = async () => {
+  state.loading = true
+  state.showSnack = false
+  const result = await edgeFirebase.changeDoc('organizations', edgeGlobal.edgeState.currentOrganization, state.data)
+  edgeGlobal.getOrganizations(edgeFirebase)
+
+  edgeGlobal.edgeState.changeTracker = {}
+  state.loaded = false
+  let message = 'Updated Successfully'
+  if (!result.success) {
+    message = 'You do not have permission'
+  }
+  toast({
+    title: '',
+    description: message,
+    duration: 1000,
+  })
+  await nextTick()
+  state.loaded = true
+  state.loading = false
+}
+
+const currentOrgData = computed(() => {
+  if (edgeGlobal.objHas(edgeFirebase.data, edgeGlobal.edgeState.organizationDocPath) === false) {
+    return ''
+  }
+  return edgeFirebase.data[edgeGlobal.edgeState.organizationDocPath]
+})
+
+const loadStateData = () => {
+  state.data = edgeGlobal.dupObject(currentOrgData.value)
+  for (const field of props.orgFields) {
+    if (edgeGlobal.objHas(state.data, field.field) === false) {
+      if (field.type === 'section') {
+        state.data[field.field] = {}
+        for (const subField of field.fields) {
+          if (edgeGlobal.objHas(state.data[field.field], subField.field) === false) {
+            state.data[field.field][subField.field] = subField.value
+          }
+        }
+      }
+      else {
+        state.data[field.field] = field.value
+      }
+    }
+  }
+}
+
+onBeforeMount(() => {
+  loadStateData()
+  state.loaded = true
+})
+watch(currentOrgData, async () => {
+  edgeGlobal.edgeState.changeTracker = {}
+  loadStateData()
+  state.loaded = false
+  await nextTick()
+  state.loaded = true
+})
+
+const navigateToBilling = async () => {
+  state.loading = true
+  const billingLink = await edgeFirebase.runFunction('stripe-redirectToBilling', {})
+  window.location.href = billingLink.data.url
+  state.loading = false
+}
+
+const gotoSubscription = async (url) => {
+  state.loading = true
+  window.location.href = url
+  state.loading = false
+}
+
+const route = useRoute()
+</script>
+
+<template>
+  <Card class="w-full flex-1 bg-muted/50 mx-auto w-full border-none shadow-none pt-2">
+    <slot
+      name="subscription"
+      :subscribed-status="edgeGlobal.edgeState.subscribedStatus"
+      :subscribe-options="props.subscribeOptions"
+      :goto-subscription="gotoSubscription"
+      :navigate-to-billing="navigateToBilling"
+      :current-organization="edgeGlobal.edgeState.currentOrganization"
+    >
+      <Alert v-if="edgeGlobal.edgeState.subscribedStatus && props.subscribeOptions.length > 0" class="mt-0" :class="edgeGlobal.edgeState.subscribedStatus.color">
+        <component :is="edgeGlobal.edgeState.subscribedStatus.icon" />
+        <AlertTitle>
+          {{ edgeGlobal.edgeState.subscribedStatus.status }}
+        </AlertTitle>
+        <AlertDescription>
+          {{ edgeGlobal.edgeState.subscribedStatus.description }}
+          <template v-if="!edgeGlobal.edgeState.subscribedStatus.isSubscribed">
+            <div class="text-center w-full mb-4">
+              <slot name="subscribeTitle">
+                <span class="text-2xl">Subscribe now with 7 day free trial!</span>
+              </slot>
+            </div>
+            <slot name="subscribeOptions">
+              <div class="flex justify-center space-x-4">
+                <edge-shad-button
+                  v-for="option in props.subscribeOptions"
+                  :key="option.buttonText"
+                  class="text-white  w-100 bg-slate-800 hover:bg-slate-400"
+                  @click="gotoSubscription(`${option.stripeSubscriptionLink}?client_reference_id=${edgeGlobal.edgeState.currentOrganization}`)"
+                >
+                  {{ option.buttonText }}
+                </edge-shad-button>
+              </div>
+            </slot>
+          </template>
+          <div v-else class="flex flex-col sm:flex-row">
+            <div>
+              <edge-shad-button
+                class="text-white  w-100 bg-slate-800 hover:bg-slate-400"
+                @click="navigateToBilling"
+              >
+                Manage Subscription
+              </edge-shad-button>
+            </div>
+          </div>
+        </AlertDescription>
+      </Alert>
+    </slot>
+
+    <edge-shad-form
+      :schema="props.formSchema"
+      @submit="onSubmit"
+    >
+      <slot name="header">
+        <edge-menu class="bg-secondary text-foreground rounded-none sticky top-0 py-6">
+          <template #start>
+            <slot name="header-start">
+              <component :is="edgeGlobal.iconFromMenu(route)" class="mr-2" />
+              <span class="capitalize">Organization Settings</span>
+            </slot>
+          </template>
+          <template #center>
+            <slot name="header-center">
+              <div v-if="!props.hideSearch" class="w-full px-6" />
+            </slot>
+          </template>
+          <template #end>
+            <slot name="header-end">
+              <div />
+            </slot>
+          </template>
+        </edge-menu>
+      </slot>
+      <CardContent v-if="state.loaded" class="p-3 w-full  overflow-y-auto scroll-area">
+        <template v-for="field in props.orgFields" :key="field.field">
+          <Card v-if="field.type === 'section'" class="mb-2">
+            <CardHeader>
+              <CardTitle>
+                {{ field.label }}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div class="grid gap-2">
+                <template v-for="subField in field.fields" :key="subField.field">
+                  <edge-g-input
+                    v-model="state.data[field.field][subField.field]"
+                    :name="`${field.field}.${subField.field}`"
+                    :label="subField.label"
+                    :field-type="subField.type"
+                    :hint="subField.hint"
+                    persistent-hint
+                  />
+                </template>
+              </div>
+            </CardContent>
+          </Card>
+          <edge-g-input
+            v-if="edgeGlobal.objHas(field, 'bindings')"
+            v-model="state.data[field.field]"
+            :name="field.field"
+            v-bind="field.bindings"
+            :parent-tracker-id="`org-settings-${field.field}`"
+          />
+          <edge-g-input
+            v-else
+            v-model="state.data[field.field]"
+            :name="field.field"
+            :field-type="field.type"
+            :label="field.label"
+            parent-tracker-id="org-settings"
+            :hint="field.hint"
+            persistent-hint
+          />
+        </template>
+        <edge-chip class="mt-3">
+          ID: {{ edgeGlobal.edgeState.currentOrganization }}
+          <edge-clipboard-button :text="edgeGlobal.edgeState.currentOrganization" />
+        </edge-chip>
+        <Alert v-if="state.showSnack" class="bg-success mt-4 py-2 flex">
+          <div>
+            {{ state.successMessage }}
+          </div>
+          <div class="grow text-right">
+            <edge-shad-button
+
+              class="mx-2 h-6 text-xs text-white bg-slate-800"
+
+              @click="state.showSnack = false"
+            >
+              Close
+            </edge-shad-button>
+          </div>
+        </Alert>
+      </CardContent>
+      <CardFooter>
+        <edge-shad-button
+          type="submit"
+          :disabled="state.loading"
+          class="text-white  w-100 bg-slate-800 hover:bg-slate-400"
+        >
+          <Loader2 v-if="state.loading" class="w-4 h-4 mr-2 animate-spin" />
+          Save
+        </edge-shad-button>
+      </CardFooter>
+    </edge-shad-form>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/edge/components/shad/breadcrumbs.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+  itemClass: {
+    type: String,
+    default: 'text-secondary text-2xl sm:text-4xl font-[700]',
+  },
+})
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <template v-for="(item, index) in props.items" :key="index">
+        <BreadcrumbItem>
+          <BreadcrumbLink v-if="item.to" class="border-b-2 border-dashed" :class="props.itemClass">
+            <NuxtLink :to="item.to">
+              {{ item.text }}
+            </NuxtLink>
+          </BreadcrumbLink>
+          <BreadcrumbPage v-else :class="props.itemClass">
+            {{ item.text }}
+          </BreadcrumbPage>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator v-if="index < (props.items.length - 1)" />
+      </template>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
+
+<style>
+</style>

package/edge/components/shad/button.vue

@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({
+  type: {
+    type: String,
+    required: false,
+    default: 'button',
+  },
+  to: {
+    type: String,
+    required: false,
+  },
+  target: {
+    type: String,
+    required: false,
+  },
+})
+const router = useRouter()
+function handleNavigation() {
+  if (props.target === '_blank') {
+    window.open(props.to, '_blank')
+  }
+  else {
+    router.push(props.to)
+  }
+}
+</script>
+
+<script setup>
+
+</script>
+
+<template>
+  <Button v-if="props.to" :type="props.type" @click.stop.prevent="handleNavigation">
+    <slot />
+  </Button>
+  <Button v-else :type="props.type">
+    <slot />
+  </Button>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/edge/components/shad/checkbox.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  class: {
+    type: null,
+    required: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+  },
+  label: {
+    type: String,
+    required: false,
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.modelValue,
+})
+
+const formHandleChange = ref(() => {})
+
+watch(modelValue, (val) => {
+  formHandleChange.value(val)
+})
+</script>
+
+<template>
+  <div>
+    <FormField v-slot="{ handleChange }" type="checkbox" :name="props.name">
+      <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-3 mt-3" @click.capture.once="formHandleChange(modelValue)">
+        <FormControl>
+          <Checkbox
+            :id="props.name"
+            :ref="() => { formHandleChange = handleChange }"
+            v-model="modelValue"
+            :class="props.class"
+            class="bg-slate-200"
+          />
+        </FormControl>
+        <div class="space-y-1 leading-none w-full">
+          <div class="relative w-full items-center text-left">
+            <FormLabel><slot /></FormLabel>
+            <span class="absolute end-0 inset-y-0 flex items-center justify-center pl-2 pr-0">
+              <slot name="icon" /></span>
+          </div>
+          <FormDescription />
+          <FormMessage />
+        </div>
+      </FormItem>
+    </FormField>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/edge/components/shad/combobox.vue

@@ -0,0 +1,238 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+import { useField } from 'vee-validate'
+import { cn } from '@/lib/utils'
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Array],
+    required: false,
+  },
+  class: {
+    type: null,
+    required: false,
+    default: 'w-100',
+  },
+  placeholder: {
+    type: String,
+    default: 'Make a selection',
+    required: false,
+  },
+  label: {
+    type: String,
+    required: false,
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  items: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  itemTitle: {
+    type: String,
+    required: false,
+    default: 'title',
+  },
+  itemValue: {
+    type: String,
+    required: false,
+    default: 'name',
+  },
+  multiple: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const state = reactive({
+  width: 255,
+})
+
+const open = ref(false)
+
+const computedItems = computed(() => {
+  return props.items.map((item) => {
+    if (typeof item === 'string') {
+      return { [props.itemTitle]: item, [props.itemValue]: item }
+    }
+    const getNestedValue = (obj, path) => path.split('.').reduce((acc, key) => acc && acc[key], obj)
+    return {
+      [props.itemTitle]: getNestedValue(item, props.itemTitle),
+      [props.itemValue]: getNestedValue(item, props.itemValue),
+    }
+  })
+})
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: false,
+  prop: 'modelValue',
+})
+
+// Ensure model is an array when multiple
+if (props.multiple && !Array.isArray(modelValue.value)) {
+  modelValue.value = modelValue.value ? [modelValue.value] : []
+}
+
+const triggerButton = ref(null)
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    nextTick(() => {
+      if (triggerButton.value) {
+        state.width = triggerButton.value.$el.offsetWidth
+      }
+    })
+  }
+})
+
+const updateCheck = ref(true)
+watch(() => modelValue.value, () => {
+  updateCheck.value = false
+  nextTick(() => {
+    updateCheck.value = true
+  })
+})
+
+const { setValue } = useField(props.name)
+
+const handleItemSelect = (item) => {
+  const selectedValue = item[props.itemValue] ?? ''
+
+  if (props.multiple) {
+    // Start from an array
+    const current = Array.isArray(modelValue.value) ? [...modelValue.value] : []
+    const idx = current.indexOf(selectedValue)
+    if (idx === -1) {
+      current.push(selectedValue)
+    }
+    else {
+      current.splice(idx, 1)
+    }
+    modelValue.value = current
+    emits('update:modelValue', current)
+    setValue(current)
+    // keep popover open for multi-select
+  }
+  else {
+    modelValue.value = selectedValue
+    emits('update:modelValue', selectedValue)
+    setValue(selectedValue)
+    open.value = false
+  }
+}
+
+watch(() => modelValue.value, (newValue) => {
+  emits('update:modelValue', newValue)
+})
+
+const isSelected = (item) => {
+  const val = item[props.itemValue] ?? ''
+  if (props.multiple) {
+    return Array.isArray(modelValue.value) && modelValue.value.includes(val)
+  }
+  return modelValue.value === val
+}
+
+const triggerTitle = computed(() => {
+  const placeholder = props.placeholder
+  const items = computedItems.value
+
+  if (props.multiple) {
+    const values = Array.isArray(modelValue.value) ? modelValue.value : []
+    if (values.length === 0)
+      return placeholder
+    const titles = values
+      .map(v => items.find(i => (i[props.itemValue] ?? '') === v))
+      .filter(Boolean)
+      .map(i => i[props.itemTitle])
+    if (titles.length === 0)
+      return placeholder
+    if (titles.length <= 3)
+      return titles.join(', ')
+    return `${titles.length} selected`
+  }
+  else {
+    if (modelValue.value) {
+      const item = items.find(i => (i[props.itemValue] ?? '') === modelValue.value)
+      if (item && edgeGlobal.objHas(item, props.itemTitle))
+        return item[props.itemTitle]
+    }
+    return placeholder
+  }
+})
+</script>
+
+<template>
+  <FormField :name="props.name">
+    <FormItem class="flex flex-col space-y-1">
+      <FormLabel>{{ props.label }}</FormLabel>
+      <Popover v-model:open="open">
+        <PopoverTrigger as-child>
+          <FormControl>
+            <Button
+              ref="triggerButton"
+              variant="outline"
+              role="combobox"
+              :aria-expanded="open"
+              class="w-[200px] justify-between text-foreground"
+              :class="props.class"
+              :disabled="props.disabled"
+            >
+              {{ triggerTitle }}
+              <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </FormControl>
+        </PopoverTrigger>
+        <PopoverContent class="p-0" :style="`width: ${state.width}px !important;`">
+          <Command>
+            <CommandInput class="h-9" placeholder="Search..." />
+            <CommandEmpty>Not found.</CommandEmpty>
+            <CommandList>
+              <CommandGroup>
+                <CommandItem
+                  v-for="item in computedItems"
+                  :key="item[props.itemTitle]"
+                  :value="item[props.itemTitle]"
+                  @select="() => handleItemSelect(item)"
+                >
+                  <Check
+                    :class="cn(
+                      'h-4 w-4',
+                      isSelected(item) ? 'opacity-100' : 'opacity-0',
+                    )"
+                  />
+                  {{ item[props.itemTitle] }}
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      <FormDescription>
+        {{ props.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
+
+<style lang="scss" scoped>
+.PopoverContent {
+  width: 100vw;
+  max-height: var(--radix-popover-content-available-height);
+}
+</style>