aio-entitykit 2.0.1 → 2.0.2

package/d1.css

@@ -464,7 +464,7 @@
 }
 
 .d1 .ai-indent-line {
-    stroke: var(--d1-border-light);
+    color: var(--d1-border-light);
 }
 
 
@@ -911,4 +911,4 @@
     text-align: center;
     border:1px solid var(--d1-border-medium);
     padding:0;
-}
+}

package/index.d.ts

@@ -0,0 +1,88 @@
+import { type FC, type ReactNode } from "react";
+import { type I_table } from 'aio-table';
+import type { AIOCordova } from 'aio-cordova';
+import { useEntity } from 'aio-entity';
+import './index.css';
+type I_option = {
+    text: string;
+    title?: string;
+    show?: boolean;
+    body?: () => ReactNode;
+    onClick?: () => void;
+};
+type I_EntityTable<T> = {
+    root?: boolean;
+    popup?: any;
+    cordova?: AIOCordova;
+    io?: boolean;
+    sideOptions?: {
+        text: string;
+        value: any;
+        onClick?: () => void;
+        before?: ReactNode;
+    }[];
+    header?: () => ReactNode;
+    footer?: () => ReactNode;
+    entity: ReturnType<typeof useEntity<T>>;
+    table: Partial<I_table<T>>;
+    attrs?: any;
+    moveTo?: (moveFrom: T, moveTo: T) => boolean;
+    getCardContent: (row: T, parent: T | false, type: 'root' | 'leaf' | 'node') => ReactNode;
+    getCardOptions?: (row: T, parent: T | false) => I_option[];
+    getSelectedOptions?: (selected: T[], parent?: T) => I_option[];
+    getRootOptions?: () => I_option[];
+    getCardTitle: (row: T) => string;
+    archive?: boolean;
+    filteredData?: T[];
+};
+export declare const EntityTable: <T>(props: I_EntityTable<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: <T>({ row }: {
+    row: T;
+    index: number;
+}) => import("react/jsx-runtime").JSX.Element;
+type I_DateFilter = {
+    result?: any;
+    fromDate?: number;
+    toDate?: number;
+    onChange: (p: {
+        fromDate?: number;
+        toDate?: number;
+    }) => void;
+};
+export declare const DateFilter: FC<I_DateFilter>;
+export declare const TimeRange: FC<{
+    fromDate?: number;
+    toDate?: number;
+    onChange: (p: {
+        fromDate?: number;
+        toDate?: number;
+    }) => void;
+}>;
+export declare const CardRow: FC<{
+    label: string;
+    value: ReactNode;
+    color?: string;
+    onClick?: () => void;
+}>;
+export type I_CardRow = [label: string, value: ReactNode, config?: {
+    isPrice?: boolean;
+    onClick?: () => void;
+}];
+export declare const CardRows: FC<{
+    rows: I_CardRow[];
+    placeholder?: string;
+}>;
+export declare const CardBox: FC<{
+    label: string;
+    value: ReactNode;
+    color?: string;
+    onClick?: () => void;
+    type: number;
+    isPrice?: boolean;
+    thin?: boolean;
+}>;
+export declare const Panel: FC<{
+    label?: ReactNode;
+    content: ReactNode;
+}>;
+export {};

package/index.js

@@ -0,0 +1,328 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { AIDate, AISelect, AITime, AITree } from 'aio-input';
+import AIOTable from 'aio-table';
+import { AddToAttrs, classListToString, GetSvg, SplitNumber, useSide } from 'aio-utils';
+import AIODate from 'aio-date';
+import Icon from '@mdi/react';
+import { mdiCheckboxMarked, mdiClose, mdiDownload, mdiListBox, mdiUpload } from "@mdi/js";
+import './index.css';
+const Context = createContext({});
+const Provider = ({ children, value }) => {
+    return _jsx(Context.Provider, { value: value, children: children });
+};
+const useProvider = () => useContext(Context);
+export const EntityTable = (props) => {
+    const DATE = new AIODate();
+    const { table, moveTo, entity, popup, archive, filteredData } = props;
+    const [showArchive, setShowArchive] = useState(false);
+    const { data } = entity;
+    const [selected, setSelected] = useState({});
+    const select = (row) => {
+        if (!props.getSelectedOptions) {
+            return;
+        }
+        const rowId = entity.id.get(row);
+        const keys = Object.keys(selected);
+        const firstSelected = keys.length ? selected[keys[0]] : undefined;
+        if (firstSelected) {
+            const firstSelectedParent = entity.getParentByRowId(entity.data, entity.id.get(firstSelected));
+            const firstSelectedParentId = firstSelectedParent ? entity.id.get(firstSelectedParent) : undefined;
+            const rowParent = entity.getParentByRowId(entity.data, entity.id.get(row));
+            const rowParentId = rowParent ? entity.id.get(rowParent) : undefined;
+            if (firstSelectedParentId !== rowParentId) {
+                setSelected({ [rowId]: row });
+                return;
+            }
+        }
+        if (selected[rowId]) {
+            setSelected((prev) => {
+                const newSelected = {};
+                for (let prop in prev) {
+                    if (rowId.toString() !== prop.toString()) {
+                        newSelected[prop] = prev[prop];
+                    }
+                }
+                return newSelected;
+            });
+        }
+        else {
+            setSelected((prev) => (Object.assign(Object.assign({}, prev), { [rowId]: row })));
+        }
+    };
+    const canMoveTo = (row) => {
+        const rowId = entity.id.get(row);
+        if (selected[rowId.toString()]) {
+            return false;
+        }
+        if (!moveTo) {
+            return false;
+        }
+        const keys = Object.keys(selected);
+        if (!keys.length) {
+            return false;
+        }
+        return true;
+    };
+    const getOptionDetails = (options, deselect) => {
+        return options.map((o) => {
+            return {
+                text: o.text, show: o.show,
+                onClick: () => {
+                    if (o.body) {
+                        popup.addModal({ header: { title: o.title || o.text }, body: o.body() });
+                    }
+                    if (o.onClick) {
+                        o.onClick();
+                    }
+                    if (deselect) {
+                        setTimeout(() => setSelected({}), 0);
+                    }
+                }
+            };
+        });
+    };
+    const getRootOptions = () => {
+        const options = props.getRootOptions ? props.getRootOptions() : [];
+        const res = [];
+        if (props.archive) {
+            res.push({
+                text: showArchive ? 'مخفی سازی آرشیو' : 'نمایش آرشیو', onClick: () => {
+                    setShowArchive(!showArchive);
+                }
+            });
+        }
+        return [...options, ...res];
+    };
+    const getOptions = (row, parent) => {
+        const options = props.getCardOptions ? props.getCardOptions(row, parent) : [];
+        const res = getOptionDetails(options);
+        return [
+            ...res,
+            {
+                show: canMoveTo(row), text: 'انتقال به اینجا', onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                    const keys = Object.keys(selected);
+                    const toRow = row;
+                    const toId = entity.id.get(toRow);
+                    if (!moveTo || !keys.length) {
+                        return;
+                    }
+                    const { parents } = entity.getRowAndParentsById(toId);
+                    for (let i = 0; i < parents.length; i++) {
+                        const id = entity.id.get(parents[i]).toString();
+                        if (selected[id]) {
+                            return;
+                        }
+                    }
+                    const rows = keys.map((key) => selected[key]).filter((fromRow) => !!moveTo(fromRow, toRow));
+                    const fromIds = rows.map((o) => entity.id.get(o));
+                    yield entity.moveTo(fromIds, toId);
+                    setSelected({});
+                })
+            },
+            { show: !!archive && !row.archive, text: 'انتقال به آرشیو', onClick: () => { if (!!archive) {
+                    entity.edit(Object.assign(Object.assign({}, row), { archive: true }));
+                } } },
+            { show: !!archive && !!row.archive, text: 'خروج از آرشیو', onClick: () => { if (!!archive) {
+                    entity.edit(Object.assign(Object.assign({}, row), { archive: false }));
+                } } },
+            { text: 'حذف', onClick: () => entity.remove(entity.id.get(row)) }
+        ];
+    };
+    const side = useSide({
+        options: props.sideOptions || [],
+        option: {
+            before: (o) => _jsx(Icon, { path: { reports: mdiListBox, export: mdiDownload, import: mdiUpload }[o.value], size: 1 })
+        },
+        onChange: () => {
+            side.close();
+        }
+    });
+    const rows = filteredData ? filteredData : data;
+    const attrs = AddToAttrs(props.attrs, { className: 'entity-table' });
+    return (_jsx(Provider, { value: { selected, setSelected, getRootOptions, rootProps: props, getOptions, entity, getOptionDetails, showArchive, setShowArchive, select }, children: _jsxs("div", Object.assign({}, attrs, { children: [_jsx("div", { className: "entity-table-today", style: { background: 'rgba(0,0,0,0.2)' }, children: DATE.getDateByPattern(DATE.getToday(true), 'امروز {weekDay} {day} {monthString} {year}') }), _jsxs("div", { className: "flex flex-row", children: [!!props.sideOptions && !!props.sideOptions.length &&
+                            _jsx("div", { className: "border-0 ml-2 px-2 py-2 rounded-full", onClick: () => side.open(), children: _jsx(Icon, { path: mdiListBox, size: 1 }) }), !!props.header && props.header()] }), _jsx(Selected, {}), _jsx(AIOTable, Object.assign({}, table, { value: rows, headerAttrs: { style: { display: 'none' } }, rowTemplate: ({ row, rowIndex }) => _jsx(Card, { row: row, index: rowIndex }), toolbar: () => _jsx(TableToolbar, {}) })), _jsx("div", { className: "mb-2" }), !!props.footer && props.footer(), side.render()] })) }));
+};
+const Selected = () => {
+    const { selected, rootProps, getOptionDetails, entity, setSelected } = useProvider();
+    const keys = Object.keys(selected);
+    const [options, setOptions] = useState([]);
+    function getOptions() {
+        const { getSelectedOptions } = rootProps;
+        if (!getSelectedOptions || !keys.length) {
+            return [];
+        }
+        const parent = keys.length ? entity.getParentByRowId(entity.data, entity.id.get(selected[keys[0]])) : undefined;
+        const list = [];
+        for (let prop in selected) {
+            list.push(selected[prop]);
+        }
+        const options = getSelectedOptions(list, parent);
+        return getOptionDetails(options, true);
+    }
+    useEffect(() => { setOptions(getOptions); }, [selected]);
+    if (!options.length) {
+        return null;
+    }
+    return (_jsxs("div", { className: "entity-table-selected", children: [_jsx("div", { className: "entity-table-deselect-all", onClick: () => setSelected({}), children: _jsx(Icon, { path: mdiClose, size: 0.8 }) }), _jsx("div", { className: "msf", children: `${keys.length} مورد انتخاب شده` }), _jsx("div", { style: { flex: 1 } }), _jsx(AISelect, { rtl: true, options: options, text: new GetSvg().getIcon('mdiDotsHorizontal', .8), caret: false, justify: true, className: 'entity-table-selected-options', style: { background: 'orange', color: '#000', border: 'none', height: 30, width: 30, padding: 0, } })] }));
+};
+const TableToolbar = () => {
+    const { rootProps, getOptionDetails, getRootOptions } = useProvider();
+    const { table } = rootProps;
+    let node = null;
+    if (typeof table.toolbar === 'function') {
+        node = table.toolbar() || null;
+    }
+    else if (table.toolbar) {
+        node = table.toolbar || null;
+    }
+    const options = getRootOptions();
+    const res = getOptionDetails(options);
+    return (_jsxs("div", { className: "entity-table-toolbar", children: [!!res.length &&
+                _jsx(AISelect, { rtl: true, options: res, text: new GetSvg().getIcon('mdiPlusThick', .8), caret: false, justify: true, className: 'd1-bg-cream flex flex-row items-center justify-center', style: { background: 'none', border: 'none', height: 30, width: 30, padding: 0, } }), node] }));
+};
+export const Card = ({ row }) => {
+    const { rootProps, getOptions, entity, showArchive, select, selected } = useProvider();
+    const rowId = entity.id.get(row);
+    const isSelected = selected[rowId];
+    const { getCardContent, getCardTitle } = rootProps;
+    const [open, setOpen] = useState(false);
+    //const tree = useMemo(() => {return <CardTree<T> row={row as any} open={open} />}, [row, selected, open])
+    return (_jsxs("div", { className: "entity-card", children: [_jsxs("div", { className: "entity-card-header", children: [_jsx("div", { className: "entity-card-toggle-icon", onClick: () => setOpen(!open), children: new GetSvg().getIcon(open ? 'mdiChevronDown' : 'mdiChevronLeft', .8) }), _jsxs("div", { className: "entity-card-title", style: { flex: 1, color: isSelected ? 'orange' : undefined }, onClick: () => select(row), children: [!!isSelected && _jsx(Icon, { path: mdiCheckboxMarked, size: 0.8, color: 'orange' }), getCardTitle(row)] }), !!getOptions && _jsx(CardOptions, { row: row, parent: false, isRoot: true })] }), getCardContent(row, false, 'root'), _jsx(CardTree, { row: row, open: open })] }));
+};
+const CardTree = ({ row, open }) => {
+    const { entity, showArchive } = useProvider();
+    const childs = entity.childs.get(row);
+    if (!childs || !childs.length || !open) {
+        return null;
+    }
+    return (_jsx(AITree, { rtl: true, autoHeight: true, indent: 24, value: childs, option: {
+            childs: (o) => entity.childs.get(o),
+            text: (row, { parentOptions }) => _jsx(CardTreeRow, { row: row, parentOptions: parentOptions }),
+            value: (o) => entity.id.get(o),
+            show: (o) => showArchive ? true : !o.archive,
+            className: () => `${'d1-bg-dark-gray'} !rounded-md`,
+            style: () => ({ borderBottom: '2px dashed #333' })
+        } }));
+};
+const CardTreeRow = ({ row, parentOptions }) => {
+    const { rootProps, getOptions, entity, select, selected } = useProvider();
+    const { getCardContent, getCardTitle } = rootProps;
+    const rowId = entity.id.get(row);
+    const isSelected = selected[rowId];
+    const childs = entity.childs.get(row);
+    const parentOption = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
+    const parent = parentOption ? parentOption.optionOrg : false;
+    console.log('tree row');
+    return (_jsxs("div", { className: classListToString(["entity-row", isSelected ? 'selected' : undefined]), children: [_jsxs("div", { className: "entity-row-header", children: [!!isSelected && _jsx(Icon, { path: mdiCheckboxMarked, size: 0.8, color: 'orange' }), _jsx("div", { className: 'entity-row-title', style: { color: isSelected ? 'orange' : undefined }, onClick: () => select(row), children: getCardTitle(row) }), !!getOptions && _jsx(CardOptions, { row: row, parent: parent })] }), getCardContent(row, parent, childs ? 'node' : 'leaf')] }));
+};
+const CardOptions = ({ row, parent, isRoot }) => {
+    const { getOptions } = useProvider();
+    return (_jsx(AISelect, { text: new GetSvg().getIcon('mdiDotsHorizontal', .8), caret: false, options: getOptions(row, parent, !!isRoot), justify: true, className: `${!isRoot ? 'd1-bg-cream' : 'd1-bg-gray'}`, style: { background: 'none', border: 'none', height: 30, width: 42, fontSize: '0.7em' }, popover: { modalAttrs: { style: { fontSize: '0.8em' } } } }));
+};
+export const DateFilter = ({ result, fromDate, toDate, onChange }) => {
+    const DATE = new AIODate();
+    const changeDateByDay = (date) => {
+        const [year, month, day] = date;
+        const fromDate = DATE.getTime([year, month, day, 0, 0]);
+        const toDate = DATE.getTime([year, month, day, 23, 59]);
+        onChange({ fromDate, toDate });
+    };
+    return (_jsxs("div", { className: "date-filter", children: [_jsxs("div", { className: "date-filter-toolbar", children: [result !== undefined && _jsx("button", { className: 'date-filter-result', children: result }), _jsx("div", { style: { flex: 1 } }), _jsxs("div", { className: "date-filter-toolbar-buttons", children: [_jsx(AIDate, { className: 'date-filter-input', style: { background: 'none' }, caret: false, justify: true, jalali: true, calendarClose: true, text: _jsx(CalendarIcon, {}), dateUnit: 'day', dateType: 'dateArray', onChange: (v) => { changeDateByDay(v); }, popover: { position: 'center' } }), _jsx(DateBox, { unit: 'day', className: 'd1-bg-blue-grad', onChange: onChange }), _jsx(DateBox, { unit: 'month', className: 'd1-bg-green-grad', onChange: onChange }), _jsx(DateBox, { unit: 'year', className: 'd1-bg-red-grad', onChange: onChange })] })] }), _jsx(TimeRange, { fromDate: fromDate, toDate: toDate, onChange: ({ fromDate, toDate }) => { onChange({ fromDate, toDate }); } })] }));
+};
+const DateBox = ({ unit, onChange }) => {
+    const DATE = new AIODate();
+    const dic = { day: 'امروز', week: 'هفته جاری', month: 'انتخاب ماه', year: 'سال جاری' };
+    const changeDateByUnit = (unit) => {
+        let [fromArray, toArray] = DATE.getCurrentRange(unit, true);
+        const fromDate = DATE.getTime(fromArray);
+        const toDate = DATE.getTime(toArray);
+        onChange({ fromDate, toDate });
+    };
+    const changeDateByMonth = (month) => {
+        const [year] = DATE.getToday(true);
+        const dateArray = [year, month];
+        const monthDaysLength = DATE.getMonthDaysLength(dateArray);
+        const fromArray = [dateArray[0], dateArray[1], 1, 0, 0];
+        const toArray = [dateArray[0], dateArray[1], monthDaysLength, 23, 59];
+        const fromDate = DATE.getTime(fromArray);
+        const toDate = DATE.getTime(toArray);
+        onChange({ fromDate, toDate });
+    };
+    if (unit === 'month') {
+        return (_jsx(AISelect, { className: `date-box`, style: { color: '#ddd', background: 'none' }, caret: false, text: dic[unit], popover: { modalAttrs: { style: { width: '100vw' } } }, options: [
+                { text: 'ماه جاری', onClick: () => changeDateByUnit('month') },
+                ...DATE.getMonths(true).map((o, i) => ({ text: o, onClick: () => changeDateByMonth(i + 1) }))
+            ] }));
+    }
+    return (_jsx("div", { className: `date-box`, style: { color: '#ddd' }, onClick: () => {
+            if (unit === 'day') {
+                changeDateByUnit('day');
+            }
+            if (unit === 'year') {
+                changeDateByUnit('year');
+            }
+        }, children: dic[unit] }));
+};
+const CalendarIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 24 24", role: "presentation", style: { width: '1.5rem', height: '1.5rem' }, children: _jsx("path", { d: "M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z", style: { fill: 'currentcolor' } }) }));
+};
+export const TimeRange = ({ fromDate, toDate, onChange }) => {
+    const getText = (time, field) => {
+        if (!time) {
+            return field === 'fromDate' ? 'از تاریخ' : 'تا تاریخ';
+        }
+        const DATE = new AIODate();
+        const { weekDay, monthString, yearStr, dayStr } = DATE.getDetails(time, true);
+        return `${weekDay} ${dayStr} ${monthString} ${yearStr}`;
+    };
+    const renderTime = (time, field) => {
+        const text = getText(time, field);
+        return (_jsx(AITime, { dateType: "dateNumber", className: 'time-range-input', style: { background: 'none' }, value: time, text: text, jalali: true, caret: false, onChange: (v) => onChange({ fromDate, toDate, [field]: v }), deSelect: true }));
+    };
+    return (_jsxs("div", { className: "time-range", children: [_jsx("div", { style: { flex: 1 }, children: renderTime(fromDate, 'fromDate') }), _jsx("div", { className: "time-range-splitter" }), _jsx("div", { style: { flex: 1 }, children: renderTime(toDate, 'toDate') })] }));
+};
+export const CardRow = ({ label, value, color, onClick }) => {
+    return (_jsxs("div", { className: 'card-row', onClick: () => { if (onClick) {
+            onClick();
+        } }, children: [_jsx("div", { className: "text-sm", children: label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "font-bold text-sm flex flex-row items-center justify-center", style: { color }, children: value })] }));
+};
+export const CardRows = ({ rows, placeholder = 'موردی وجود ندارد' }) => {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [!rows.length && _jsx("div", { className: "text-xs w-full flex flex-row items-center justify-center", children: placeholder }), rows.map((r, i) => {
+                const { onClick, isPrice } = r[2] || {};
+                let value = r[1];
+                if (isPrice && (typeof r[1] === 'number' || typeof r[1] === 'string')) {
+                    value = SplitNumber(r[1]);
+                }
+                return _jsx(CardRow, { label: r[0], value: value, onClick: onClick }, i);
+            })] }));
+};
+export const CardBox = ({ thin, type, label, value, color, onClick, isPrice }) => {
+    let cls = `flex flex-col flex-1 items-center rounded-lg${!thin ? ' py-2' : ''}`;
+    if (type === 0) {
+        cls += ' d1-bg-cream';
+    }
+    const style = {};
+    if (type === 1) {
+        style.boxShadow = 'inset 2px 2px 5px 0px rgb(110 85 27 / 40%)';
+    }
+    else if (type === 2) {
+        style.background = 'rgba(0,0,0,0.2)';
+        style.color = '#fff';
+    }
+    return (_jsxs("div", { className: cls, style: style, onClick: () => { if (onClick) {
+            onClick();
+        } }, children: [_jsx("div", { className: "text-xs", children: label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "font-bold text-sm", style: { color }, children: isPrice ? SplitNumber(value) : value })] }));
+};
+export const Panel = ({ label, content }) => {
+    return (_jsxs("div", { className: 'd1-panel', children: [!!label && _jsx("div", { className: "d1-panel-label d1-panel-label-online-rtl", children: label }), content] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-entitykit",
-    "version": "2.0.1",
+    "version": "2.0.2",
     "description": "kit",
     "main": "index.js",
     "scripts": {