bt-core-app 0.0.0

package/src/composables/csv.ts

@@ -0,0 +1,198 @@
+import { TableColumn } from "./list"
+import { isLengthyArray, fromCamelCase, nestedValue } from "../index"
+
+export interface CSVProps {
+    canExportCSV?: boolean
+}
+
+export const csvDefaults = {
+    canExportCSV: false
+}
+
+export interface UseCSVPropsReturn {
+    exportToCSV: Function
+}
+
+export interface CSVItem {
+    header: string
+    itemText?: string
+    value: any
+}
+
+declare global {
+    interface Navigator {
+        msSaveOrOpenBlob: (blob: Blob, fileName: string) => boolean
+    }
+}
+
+export function useCSV(): UseCSVPropsReturn {
+
+    function exportToCSV(
+        items: any[],
+        headers?: TableColumn[],
+        fileName: string = 'csvData.csv') {
+
+        if (!isLengthyArray(items)) {
+            return;
+        }
+
+        let dnaArray: CSVItem[] = []
+
+        if (headers != null) {
+            dnaArray = headers?.filter(y => (y.csv ?? y.csvText ?? y.csvFilter ?? y.csvArray) != null)
+                        .map(z => {
+                            return {
+                                header: z.title ?? '',
+                                itemText: z.itemText,
+                                value: z.value
+                            }
+                        })
+        }
+        else {
+            dnaArray = Object.keys(items[0]).map(x => { return { header: fromCamelCase(x) ?? '', value: x }; });
+        }
+
+        dnaArray = dnaArray.filter(z => z.header.length > 0)
+
+        var lineArray: any[] = [];
+
+        // var increments = [];
+        // if (dnaArray.some(y => y.breakdown === true)) {
+        //     try {
+        //         increments = await BlitzIt.store.getAll('stock-increments');
+        //     }
+        //     catch (err) {
+        //         console.log('generating csv file could not pull increments for breakdown');
+        //         console.log(this.extractErrorDescription(err));
+        //     }
+        // }
+
+        // if (docTitle != null) {
+        //     lineArray.push(docTitle);
+        // }
+
+        // dnaArray = dnaArray.filter(x => x.header != null);
+
+        //print header row
+        // lineArray.push(dnaArray.map(x => x.header))
+
+        for (let i = 0; i < items.length; i++) {
+            const d = items[i];
+
+            var newItem: any = {};
+            var extraLines: any[] = [];
+
+            for (let ii = 0; ii < dnaArray.length; ii++) {
+                const dna = dnaArray[ii];
+                var v = null;
+                if (typeof(dna.value) == 'function') {
+                    v = dna.value(d);
+                }
+                else if (typeof(dna.value) == 'string') {
+                    v = nestedValue(d, dna.value);
+
+                    // if (dna.navigation != null && v != null) {
+                    //     //search from local storage
+                    //     try {
+                    //         var res = await BlitzIt.store.get(dna.navigation, v, null, false, null, null, true);
+                    //         if (res != null) {
+                    //             v = res;
+                    //         }
+                    //     }
+                    //     catch (err) {
+                    //         console.log(err);
+                    //     }
+                    // }
+                }
+
+                // if (v != null && dna.valueFilter != null) {
+                //     console.log('aa');
+                //     v = this.$options.filters[dna.valueFilter](v);
+                //     console.log(v);
+                // }
+
+                // if (dna.csvArray) {
+                //     if (this.isLengthyArray(v)) {
+                //         v.forEach(w => {
+                //             var otherNewItem = {};
+                //             // otherNewItem[dna.header] = w.toString();
+                //             // extraLines.push(otherNewItem);
+                //             if (dna.breakdown && w.productID != null) {
+                //                 otherNewItem[dna.header] = `${getBreakdown(w.quantity, measurements, increments, w.productID)}, ${w.product?.productName}`;
+                //                 extraLines.push(otherNewItem);
+                //             }
+                //             else {
+                //                 otherNewItem[dna.header] = w.toString();
+                //                 extraLines.push(otherNewItem);
+                //             }
+                //         })
+                //     }
+                // }
+                // else {
+                    // if (dna.breakdown) {
+                    //     var prodProp = dna.csvProductIDProp || 'productID';
+                    //     newItem[dna.header] = getBreakdown(v, measurements, increments, d[prodProp]);
+                    // }
+                    if (dna.itemText != null) {
+                        newItem[dna.header] = nestedValue(v, dna.itemText);
+                    }
+                    else {
+                        newItem[dna.header] = v;
+                    }
+                // }
+            }
+
+            lineArray.push(newItem);
+
+            if (isLengthyArray(extraLines)) {
+                extraLines.forEach(e => {
+                    lineArray.push(e);
+                })
+            }
+
+            extraLines = [];
+        }
+
+        var resArray = [];
+
+        // if (docTitle != null) {
+        //     resArray.push(docTitle);
+        // }
+
+        //print header row
+        resArray.push(dnaArray.map(x => x.header))
+
+        lineArray.forEach(obj => {
+            let propArray: any[] = [];
+            dnaArray.forEach(function(k) {
+                var v = obj[k.header];
+                propArray.push(v != null ? v : '');
+            });
+            
+            resArray.push(propArray.join(","));
+        })
+
+        var csvContent = resArray.join("\n");
+        var file = new Blob([csvContent], { type: "text/plain;charset=utf-8" });
+        
+        if (window.navigator.msSaveOrOpenBlob) {
+            window.navigator.msSaveOrOpenBlob(file, fileName);
+        }
+        else {
+            var a = document.createElement("a"),
+                url = URL.createObjectURL(file);
+                a.href = url;
+                a.download = fileName;
+                document.body.appendChild(a);
+                a.click();
+                setTimeout(function () {
+                    document.body.removeChild(a);
+                    window.URL.revokeObjectURL(url);
+                }, 0);
+            }
+    }
+
+    return {
+        exportToCSV
+    }
+}

package/src/composables/dates.ts

@@ -0,0 +1,79 @@
+import { DateTime } from 'luxon'
+// import { useTimeZone } from '@/composables/auth'
+
+export interface BTDates {
+    getToday: () => string
+    getTomorrow: () => string
+    tzDate: (val?: string, fromFormat?: string) => DateTime
+    tzString: (val?: string, format?: string, fromFormat?: string) => string
+    utcDate: (val?: string, fromFormat?: string) => DateTime
+    utcString: (val?: string, format?: string, fromFormat?: string) => string
+}
+
+export interface CreateDatesOptions {
+  getTimeZone: () => string
+}
+ 
+export function createDates(options: CreateDatesOptions): BTDates {
+
+    function getToday(): string {
+        return tzDate()?.startOf('day').toUTC().toString() ?? '';
+    }
+
+    function getTomorrow(): string {
+        return tzDate()?.endOf('day').toUTC().toString() ?? '';
+    }
+
+    function tzDate(val?: string, fromFormat?: string): DateTime {
+        if (val == null) {
+            //create now
+            return DateTime.utc().setZone(options.getTimeZone())
+        }
+
+        return fromFormat ? DateTime.fromFormat(val, fromFormat, { zone: options.getTimeZone() }) : DateTime.fromISO(val, { zone: options.getTimeZone() })
+    }
+
+    function tzString(val?: string, format?: string, fromFormat?: string): string {
+        if (val == null) {
+            //create now
+            const d = DateTime.utc().setZone(options.getTimeZone())
+            return format ? d.toFormat(format) : d.toString()
+        }
+
+        if (val == 'Invalid DateTime') {
+            return ''
+        }
+
+        const d = fromFormat ? DateTime.fromFormat(val, fromFormat, { zone: options.getTimeZone() }) : DateTime.fromISO(val, { zone: options.getTimeZone() })
+        
+        return format ? d.toFormat(format) : d?.toString()
+    }
+
+    function utcDate(val?: string, fromFormat?: string): DateTime {
+        if (val == null) {
+            return DateTime.utc()
+        }
+        else {
+            return fromFormat ? DateTime.fromFormat(val, fromFormat) : DateTime.fromISO(val)
+        }
+    }
+
+    function utcString(val?: string, format?: string, fromFormat?: string): string {
+        if (val == null) {
+            return format ? DateTime.utc().toFormat(format) : DateTime.utc().toString()
+        }
+        else {
+            const d = fromFormat ? DateTime.fromFormat(val, fromFormat) : DateTime.fromISO(val)
+            return format ? d.toFormat(format) : d.toString()
+        }
+    }
+
+    return {
+        getToday,
+        getTomorrow,
+        tzDate,
+        tzString,
+        utcDate,
+        utcString
+    }
+}

package/src/composables/demo.ts

@@ -0,0 +1,25 @@
+import { ref, type Ref } from 'vue'
+
+export interface BTDemo {
+    endDemo: () => void
+    isDemoing: Ref<boolean>
+    startDemo: () => void
+}
+
+export function createDemo(): BTDemo {
+    const isDemoing = ref(false)
+
+    function startDemo() {
+
+    }
+
+    function endDemo() {
+
+    }
+
+    return {
+        endDemo,
+        isDemoing,
+        startDemo
+    }
+}

package/src/composables/dialogs.ts

@@ -0,0 +1,115 @@
+// import { openDialog } from 'vue3-promise-dialog'
+import { createConfirmDialog } from 'vuejs-confirm-dialog'
+import BTConfirmDialog from '@/components/Dialog-Confirm.vue'
+import BTSelectDateDialog from '@/components/Dialog-Select-Date.vue'
+import BTSelectDialog from '@/components/Dialog-Select.vue'
+import BTTextDialog from '@/components/Dialog-Text.vue'
+import { type ListProps } from '@/composables/list'
+
+export interface ConfirmDialogProps {
+    cancelText?: string
+    cancelValue?: any
+    confirmText?: string
+    confirmValue?: any
+    msg?: string
+    maxWidth?: number
+    minWidth?: number
+    title?: string
+}
+
+export interface SelectDateProps {
+    cancelText?: string
+    cancelValue?: any
+    confirmText?: string
+    dateFrom?: string
+    dateRules?: Function | unknown[]
+    format?: string
+    fromNow?: boolean
+    height?: string
+    msg?: string
+    maxWidth?: number
+    minWidth?: number
+    range?: boolean
+    required?: boolean
+    requireTime?: boolean
+    title?: string
+    useTime?: boolean
+}
+
+export interface SelectDialogProps extends ListProps {
+    cancelText?: string
+    cancelValue?: any
+    canUnselect?: boolean
+    confirmText?: string
+    height?: string
+    itemSubtext?: string
+    itemText?: string
+    itemValue?: string
+    msg?: string
+    maxWidth?: number
+    minWidth?: number
+    multiple?: boolean
+    nav?: string
+    onFilter?: Function
+    required?: boolean
+    subtextFilter?: string
+    subtextFunction?: Function
+    textFilter?: string
+    textFunction?: Function
+    title?: string
+}
+
+export interface TextDialogProps extends ListProps {
+    cancelText?: string
+    confirmText?: string
+    height?: string
+    label?: string
+    msg?: string
+    maxWidth?: number
+    minWidth?: number
+    required?: boolean
+    title?: string
+    value?: any
+}
+
+const confirmDialog = createConfirmDialog(BTConfirmDialog as any)
+const selectDateDialog = createConfirmDialog(BTSelectDateDialog as any)
+const selectDialog = createConfirmDialog(BTSelectDialog as any)
+const textDialog = createConfirmDialog(BTTextDialog as any)
+
+export function useRequireConfirmation(action: any, props: ConfirmDialogProps, requireConfirm: boolean) {
+    if (requireConfirm) {
+        const { reveal, onConfirm } = createConfirmDialog(BTConfirmDialog as any, props)
+        onConfirm(action)
+        reveal()
+    }
+    else {
+        action()
+    }
+}
+
+export async function useConfirmAsync(text: string) {
+    const { isCanceled } = await confirmDialog.reveal({ msg: text })
+    return !isCanceled
+}
+
+/**
+ * Returns undefined if cancelled
+ * [] if multiple
+ * Null | Obj if single
+ * @param opts 
+ */
+export async function useSelectDialog(opts?: SelectDialogProps) {
+    const { data } = await selectDialog.reveal(opts)
+    return data
+}
+
+export async function useSelectDate(opts?: SelectDateProps) {
+    const { data } = await selectDateDialog.reveal(opts)
+    return data
+}
+
+export async function useTextDialog(opts?: TextDialogProps) {
+    const { data } = await textDialog.reveal(opts)
+    return data
+}

package/src/composables/document-meta.ts

@@ -0,0 +1,40 @@
+import { type RouteLocationNormalized } from 'vue-router'
+import { BTDemo } from '@/composables/demo'
+import { type Environment } from '@/composables/urls'
+
+export interface UseDocumentMetaOptions {
+    demo?: BTDemo
+}
+
+/**routes with meta object */
+export function useDocumentMeta(options?: UseDocumentMetaOptions) {
+
+    function updateMeta(to: RouteLocationNormalized) {
+        const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
+    
+        if(nearestWithTitle) {
+            document.title = nearestWithTitle.meta.title as string
+        }
+        else {
+            const env = import.meta.env.MODE as Environment
+            let title = ''
+
+            if (env == 'development')
+                title = 'BWeb Dev'
+            else if (env == 'staging')
+                title = 'BlitzIt Sandpit'
+            else {
+                title = 'BlitzIt Web | Cloud-Based Wholesale Logistics Platform'
+            }
+
+            if (options?.demo?.isDemoing.value == true)
+                title = `Training: ${title}`
+
+            document.title = title
+        }
+    }
+
+    return {
+        updateMeta
+    }
+}

package/src/composables/draggable.ts

@@ -0,0 +1,189 @@
+import { type ComponentPublicInstance, type MaybeRefOrGetter, type Ref, ref, toValue } from 'vue'
+import { type Position, useEventListener } from '@vueuse/core'
+import { type PointerOrTouchEvent } from './resizable'
+
+export interface UseDraggableOptions {
+    /**
+     * Only start the dragging when click on the element directly
+     *
+     * @default false
+     */
+    // exact?: MaybeRefOrGetter<boolean>
+  
+    preventDefault?: MaybeRefOrGetter<boolean>
+    stopPropagation?: MaybeRefOrGetter<boolean>
+  
+    /**
+     * Whether dispatch events in capturing phase
+     *
+     * @default true
+     */
+    capture?: boolean
+
+    /**
+     * Element to attach `pointermove` and `pointerup` events to.
+     *
+     * @default window
+     */
+    draggingElement?: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>
+  
+    /**
+     * Element for calculating bounds (If not set, it will use the event's target).
+     *
+     * @default undefined
+     */
+    // containerElement?: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>
+  
+    /**
+     * Handle that triggers the drag event
+     *
+     * @default target
+     */
+    handle?: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>
+  
+    /**
+     * Initial position of the element.
+     *
+     * @default { x: 0, y: 0 }
+     */
+    initialValue?: MaybeRefOrGetter<Position>
+
+    onStart?: (position: Position, event: PointerEvent) => void | false
+    onMove?: (position: Position, event: PointerEvent) => void
+    onEnd?: (position: Position, event: PointerEvent) => void
+  
+    /**
+     * Axis to drag on.
+     *
+     * @default 'both'
+     */
+    axis?: 'x' | 'y' | 'both'
+  }
+
+  export function useDraggable(
+    target: MaybeRefOrGetter<ComponentPublicInstance | null>, //HTMLElement | SVGElement | null | undefined>,
+    handle: MaybeRefOrGetter<ComponentPublicInstance | null>,
+    options: UseDraggableOptions = {},
+  ) {
+    const {
+        preventDefault = false,
+        stopPropagation = false,
+        axis = 'both',
+    } = options
+
+    const config = { capture: options.capture ?? true }
+    let currentElementPosition = { x: 0, y: 0 }
+    let startingElementPosition = { x: 0, y: 0 }
+    let startingPointerPosition = { x: 0, y: 0 }
+
+    let listeners: Function[] = []
+    let moveListeners: Function[] = []
+    let draggingIsOn: Ref<boolean> = ref(false)
+
+    function handleEvent(e: PointerEvent) {
+        if (toValue(preventDefault))
+            e.preventDefault()
+        if (toValue(stopPropagation))
+            e.stopPropagation()
+    }
+
+    function start(e: PointerOrTouchEvent) {
+        const t = toValue(target)
+        if (!t) return
+        const el = t.$el
+        const isTouch = e.type === 'touchstart' && e.touches.length > 0
+        const evtData = isTouch ? e.touches[0] : e
+
+        startingPointerPosition = { x: evtData.clientX, y: evtData.clientY }
+        
+        startingElementPosition = {
+            x: el.offsetLeft,
+            y: el.offsetTop
+        }
+
+        currentElementPosition = {
+            x: el.offsetLeft,
+            y: el.offsetTop
+        }
+
+        if (options.onStart?.(startingPointerPosition, e) === false) return
+
+        moveListeners.push(useEventListener('mousemove', move))
+        moveListeners.push(useEventListener('touchmove', move))
+        moveListeners.push(useEventListener('mouseup', end))
+        moveListeners.push(useEventListener('touchend', end))
+
+        handleEvent(e)
+    }
+
+    function move(e: any) {
+        if (!startingPointerPosition) return
+
+        const t = toValue(target)
+        if (!t) return
+        // const el = t.$el
+        const isTouch = e.type === 'touchmove' && e.touches.length > 0
+        const evtData = isTouch ? e.touches[0] : e
+        let dx = evtData.clientX - startingPointerPosition.x
+        let dy = evtData.clientY - startingPointerPosition.y
+
+        if (axis === 'x' || axis === 'both')
+            currentElementPosition.x = startingElementPosition.x + dx
+        if (axis === 'y' || axis === 'both')
+            currentElementPosition.y = startingElementPosition.y + dy
+
+        options.onMove?.(currentElementPosition, e)
+
+        handleEvent(e)
+
+        applyToElementStyle(currentElementPosition)
+    }
+
+    function end(e: any) {
+        document.documentElement.style.cursor = ''
+        moveListeners.forEach(m => { m() })
+        moveListeners.length = 0
+        options.onEnd?.(currentElementPosition, e)
+        handleEvent(e)
+    }
+
+    function applyToElementStyle(s: Position) {
+        const t = toValue(target)
+        if (!t) return
+        const el = t.$el
+
+        el.style.left = `${s.x}px`
+        el.style.top = `${s.y}px`
+    }
+
+    function turnDraggableOn() {
+        if (toValue(draggingIsOn)) return
+        const handleT = toValue(handle)
+        if (!handleT) return
+        const handleEl = handleT.$el
+        handleEl.style.cursor = 'move'
+        
+        listeners.push(useEventListener(handleEl, 'mousedown', start, config))
+        listeners.push(useEventListener(handleEl, 'touchstart', start, config))
+        draggingIsOn.value = true
+    }
+
+    function turnDraggableOff() {
+        if (!toValue(draggingIsOn)) return
+        const handleT = toValue(handle)
+        if (!handleT) return
+        const handleEl = handleT.$el
+        handleEl.style.cursor = ''
+        
+        //provide new position and size?
+        listeners.forEach(l => { l() })
+        listeners.length = 0
+        draggingIsOn.value = false
+    }
+
+    return {
+        draggingIsOn,
+        turnDraggableOff,
+        turnDraggableOn
+    }
+  }