@bindu-dashing/dam-solution-v2 5.8.6

package/README.md

@@ -0,0 +1,53 @@
+# @veera-dashing/dam-solution-v2
+
+---
+
+## Installation
+
+To install the library in your project:
+
+```bash
+npm install @veera-dashing/dam-solution-v2
+# or
+yarn add @veera-dashing/dam-solution-v2
+
+```
+
+## Local Testing
+
+To test the library in local before publishing it to npm:
+
+In Library
+
+```bash
+npm run build
+npm link
+```
+
+In test project:
+
+```bash
+npm link @veera-dashing/dam-solution-v2
+```
+
+## Publishing
+
+To publish the library to npm:
+
+1. Update the version in package.json
+2. Next Steps
+
+```bash
+npm run build
+npm publish
+
+```
+
+## Login
+
+To login to npm account:
+Before publishing, login to npm account if not already loggedin
+
+```bash
+npm login
+```

package/build/AssetType/AddFieldProperties.d.ts

@@ -0,0 +1,9 @@
+import { InputTypeEntity } from "../utilities/constants/interface";
+export default function AddFieldProperties({ field, setCurrentFieldIndex, onUpdateField, currentInputType, index, allFields, }: {
+    field: InputTypeEntity | undefined;
+    setCurrentFieldIndex: (value: number | null) => void;
+    onUpdateField: (updatedValues: any, field: InputTypeEntity, index: number | null) => void;
+    currentInputType: InputTypeEntity | undefined;
+    index: number | null;
+    allFields: InputTypeEntity[];
+}): JSX.Element;

package/build/AssetType/AddFieldProperties.js

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Form, Input } from "antd";
+import TextField from "./fieldProperties/TextField";
+import NumberField from "./fieldProperties/NumberField";
+import { useEffect, useState } from "react";
+import DateField from "./fieldProperties/DateField";
+import OptionsField from "./fieldProperties/OptionsField";
+import { InputSupportedTypes, InputTypes, } from "../utilities/constants/interface";
+import { first, get, includes, isArray, nth } from "lodash";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import useAppNavigate from "../utilities/useAppNavigate";
+import { getFormItem } from "../MyDrive/fileDetails/MetaForm";
+import dayjs from "dayjs";
+import { DATE_FORMAT, DATE_WITH_TIME_FORMAT } from "../hocs/appConstants";
+export default function AddFieldProperties({ field, setCurrentFieldIndex, onUpdateField, currentInputType, index, allFields, }) {
+    const { styles } = useDamConfig();
+    const navigate = useAppNavigate();
+    const [defaultValueInput, setDefaultValueInput] = useState("");
+    const onUpdate = (values) => {
+        const allValues = Object.assign({}, values);
+        if (allValues === null || allValues === void 0 ? void 0 : allValues.defaultValue) {
+            allValues["defaultValue"] = getFormattedDefaultValue(allValues);
+        }
+        if (get(field, "_id", null)) {
+            allValues["_id"] = get(field, "_id");
+        }
+        onUpdateField(allValues, currentInputType, index);
+        setCurrentFieldIndex(null);
+    };
+    const [form] = Form.useForm();
+    const getFormattedDefaultValue = (values) => {
+        const defaultName = get(field, "defaultName");
+        const defaultValue = get(values, "defaultValue");
+        // console.log("default", defaultValue);
+        const allowTime = get(values, `inputTypeSettings.${InputSupportedTypes.ALLOW_TIME}.allow`, false);
+        const allowMultiple = get(values, `inputTypeSettings.${InputSupportedTypes.ALLOW_MULTIPLE}`, false);
+        switch (defaultName) {
+            case InputTypes.DATE_RANGE:
+            case InputTypes.DATE:
+                const format = allowTime ? DATE_WITH_TIME_FORMAT : DATE_FORMAT;
+                if (isArray(defaultValue) && get(defaultValue, "length") === 2) {
+                    return [
+                        first(defaultValue)
+                            ? dayjs(first(defaultValue)).format(format)
+                            : null,
+                        nth(defaultValue, 1)
+                            ? dayjs(nth(defaultValue, 1)).format(format)
+                            : null,
+                    ];
+                }
+                return defaultValue ? dayjs(defaultValue).format(format) : null;
+            case InputTypes.CHECKBOX:
+                return defaultValue || [];
+            case InputTypes.SELECT:
+                return allowMultiple ? defaultValue || [] : defaultValue || undefined;
+            default:
+                return defaultValue;
+        }
+    };
+    const getInitialDefaultValue = (inputTypeSettings) => {
+        const defaultName = currentInputType === null || currentInputType === void 0 ? void 0 : currentInputType.defaultName;
+        const allowMultiple = get(inputTypeSettings, `${InputSupportedTypes.ALLOW_MULTIPLE}`, false);
+        const value = get(field, "defaultValue", "");
+        switch (defaultName) {
+            case InputTypes.DATE:
+                return value ? dayjs(value) : undefined;
+            case InputTypes.DATE_RANGE:
+                return isArray(value) && get(value, "length") === 2
+                    ? [dayjs(first(value)), dayjs(nth(value, 1))]
+                    : undefined;
+            case InputTypes.SELECT:
+                return allowMultiple ? value || [] : value !== null && value !== void 0 ? value : undefined;
+            case InputTypes.CHECKBOX:
+                return value || [];
+            default:
+                return value;
+        }
+    };
+    useEffect(() => {
+        form.setFieldsValue(Object.assign(Object.assign({}, field), { defaultValue: getInitialDefaultValue(get(field, "inputTypeSettings", {})) }));
+        handleFormValuesChange();
+    }, [field, form]);
+    // Update defaultValueInput whenever form values change
+    const handleFormValuesChange = () => {
+        var _a;
+        const formValues = form.getFieldsValue(true);
+        const defaultName = currentInputType === null || currentInputType === void 0 ? void 0 : currentInputType.defaultName;
+        const options = ((_a = formValues.options) === null || _a === void 0 ? void 0 : _a.filter((opt) => (opt === null || opt === void 0 ? void 0 : opt.label) && (opt === null || opt === void 0 ? void 0 : opt.value))) || [];
+        const settings = formValues.inputTypeSettings || {};
+        const placeholder = formValues.placeholder || "";
+        const item = {
+            _id: "defaultValue",
+            name: "Default Value",
+            defaultName,
+            options,
+            inputTypeSettings: settings,
+            placeholder,
+        };
+        // Add rule: defaultValue must be one of the options when defaultName is SELECT
+        let rules = [];
+        if ((defaultName === InputTypes.SELECT ||
+            defaultName === InputTypes.CHECKBOX ||
+            defaultName === InputTypes.RADIO) &&
+            options.length > 0) {
+            rules.push({
+                validator: (_, value) => {
+                    const allowedValues = options
+                        .filter((opt) => opt)
+                        .map((opt) => opt.value);
+                    if (value === undefined ||
+                        (Array.isArray(value)
+                            ? value.every((v) => allowedValues.includes(v))
+                            : allowedValues.includes(value))) {
+                        return Promise.resolve();
+                    }
+                    return Promise.reject("Default value must be one of the options");
+                },
+            });
+        }
+        // Rule for DATE and DATE_RANGE: check time part if allow time is selected
+        if ((defaultName === InputTypes.DATE ||
+            defaultName === InputTypes.DATE_RANGE) &&
+            settings[InputSupportedTypes.ALLOW_TIME] !== undefined) {
+            rules.push({
+                validator: (_, value) => {
+                    const allowTime = !!get(settings, `${InputSupportedTypes.ALLOW_TIME}.allow`);
+                    if (!value)
+                        return Promise.resolve();
+                    // For DATE
+                    if (defaultName === InputTypes.DATE) {
+                        const hasTime = value && value.hour && typeof value.hour === "function"
+                            ? value.hour() !== 0 ||
+                                value.minute() !== 0 ||
+                                value.second() !== 0
+                            : false;
+                        if (allowTime && !hasTime) {
+                            return Promise.reject("Please select a date with time (hour/minute/second).");
+                        }
+                        if (!allowTime && hasTime) {
+                            return Promise.reject("Time is not allowed. Please select only a date.");
+                        }
+                    }
+                    // For DATE_RANGE
+                    if (defaultName === InputTypes.DATE_RANGE && Array.isArray(value)) {
+                        const [start, end] = value;
+                        const startHasTime = start && start.hour && typeof start.hour === "function"
+                            ? start.hour() !== 0 ||
+                                start.minute() !== 0 ||
+                                start.second() !== 0
+                            : false;
+                        const endHasTime = end && end.hour && typeof end.hour === "function"
+                            ? end.hour() !== 0 || end.minute() !== 0 || end.second() !== 0
+                            : false;
+                        if (allowTime && (!startHasTime || !endHasTime)) {
+                            return Promise.reject("Please select both start and end dates with time.");
+                        }
+                        if (!allowTime && (startHasTime || endHasTime)) {
+                            return Promise.reject("Time is not allowed. Please select only dates.");
+                        }
+                    }
+                    return Promise.resolve();
+                },
+            });
+        }
+        // Pass rules to getFormItem
+        const defaultValueItem = getFormItem(Object.assign(Object.assign({}, item), { additionalRules: rules }), true);
+        setDefaultValueInput(defaultValueItem);
+    };
+    return (_jsxs("div", { className: "md-lib-p-4", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2", children: [_jsx("h2", { className: "md-lib-text-xl md-lib-font-semibold", children: "Properties" }), _jsxs("p", { className: "md-lib-ml-auto md-lib-text-sm md-lib-truncate", style: { color: styles === null || styles === void 0 ? void 0 : styles.secondaryTextColor }, children: ["Type: ", get(field, "name", "N/A")] })] }), _jsx("div", { className: "md-lib-mt-4", children: _jsxs(Form, { layout: "vertical", form: form, requiredMark: false, scrollToFirstError: true, onFinish: onUpdate, initialValues: field, onValuesChange: handleFormValuesChange, children: [_jsx(Form.Item, { name: "isMandatory", valuePropName: "checked", children: _jsx(Checkbox, { children: "Marks as mandatory field" }) }), _jsx(Form.Item, { name: "name", label: "Field Name", rules: [
+                                { required: true, message: "Name is required" },
+                                {
+                                    validator: (_, value) => {
+                                        if (!value ||
+                                            !allFields.some((f, i) => f.name === value && i !== index)) {
+                                            return Promise.resolve();
+                                        }
+                                        return Promise.reject("Name must be unique");
+                                    },
+                                },
+                            ], children: _jsx(Input, { placeholder: "Enter name", className: "md-lib-h-12" }) }), _jsx(Form.Item, { label: "Placeholder", name: "placeholder", rules: [
+                                {
+                                    required: true,
+                                    message: "Placeholder is required",
+                                },
+                            ], children: _jsx(Input, { placeholder: "Enter Field Placeholder", className: "md-lib-h-12" }) }), defaultValueInput, _jsxs("div", { children: [!!get(currentInputType, "supportedTypes.length") && (_jsx("h3", { className: "md-lib-text-md md-lib-font-semibold md-lib-mb-2", children: "Field Validations" })), _jsxs(Form.Item, { name: "field_validations", children: [includes([InputTypes.PARAGRAPH, InputTypes.TEXT, InputTypes.LINK], get(currentInputType, "defaultName")) && (_jsx(TextField, { field: field, supportedTypes: get(currentInputType, "supportedTypes", []) })), get(currentInputType, "defaultName") == InputTypes.NUMBERS && (_jsx(NumberField, { field: field, supportedTypes: get(currentInputType, "supportedTypes", []) })), (get(currentInputType, "defaultName") == InputTypes.DATE ||
+                                            get(currentInputType, "defaultName") ==
+                                                InputTypes.DATE_RANGE) && (_jsx(DateField, { field: field, supportedTypes: get(currentInputType, "supportedTypes", []) })), includes([
+                                            InputTypes.SELECT,
+                                            InputTypes.PERSON,
+                                            InputTypes.TEAM,
+                                            InputTypes.CHECKBOX,
+                                            InputTypes.RADIO,
+                                        ], get(currentInputType, "defaultName")) && (_jsx(OptionsField, { field: field, supportedTypes: get(currentInputType, "supportedTypes", []), currentInputType: currentInputType }))] })] }), _jsxs(Form.Item, { className: "md-lib-flex md-lib-items-center md-lib-justify-end md-lib-absolute md-lib-bottom-0 md-lib-right-0 !md-lib-my-2", children: [_jsx(Button, { color: "primary", variant: "text", onClick: () => {
+                                        setCurrentFieldIndex(null);
+                                        // navigate(ASSETS_SCREEN);
+                                    }, size: "large", children: "Cancel" }), _jsx(Button, { color: "primary", htmlType: "submit", className: "md-lib-ml-2 md-lib-border-primaryColor md-lib-text-primaryColor", size: "large", children: "Update" })] })] }) })] }));
+}

package/build/AssetType/AssetTemplatesTable.d.ts

@@ -0,0 +1,10 @@
+import { AssetTemplateEntity } from "../utilities/constants/interface";
+declare function AssetTemplatesTable({ assetTemplates, totalPages, totalCount, filters, onFetchAssetTemplates, loading, }: {
+    assetTemplates: AssetTemplateEntity[];
+    totalPages: number;
+    totalCount: number;
+    filters: any;
+    onFetchAssetTemplates: (params: any) => void;
+    loading: boolean;
+}): JSX.Element;
+export default AssetTemplatesTable;

package/build/AssetType/AssetTemplatesTable.js

@@ -0,0 +1,153 @@
+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 { Space, Table, Tooltip, Switch } from "antd";
+import { useMemo, useState } from "react";
+import { get } from "lodash";
+import { APP_DATE_TIME_FORMAT, DEFAULT_PAGE, LOCAL_TIMEZONE, } from "../hocs/appConstants";
+import { NotificationStatus, SortOrders, } from "../utilities/constants/interface";
+import CustomLoader from "../common/loader/CustomLoader";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import CustomButton from "../common/Button";
+import { ASSET_TEMPLATE_SCREEN } from "../utilities/constants/routes";
+import moment from "moment-timezone";
+import { DeleteConfirmationModal, RenderTableSearchFilters, RenderTableSelectFilters, } from "../common/CustomElements";
+import { DEACTIVATE_OK_TEXT, DELETE_CONFIRMATION_MESSAGE, DELETE_OK_TEXT, DELETE_SUCCESS, SOMETHING_WENT_WRONG, UPDATE_SUCCESS, } from "../utilities/constants/messages";
+import { showNotification } from "../common/notifications";
+import { FETCH_ASSET_URL } from "../utilities/constants/apiUrls";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import useAppNavigate from "../utilities/useAppNavigate";
+function AssetTemplatesTable({ assetTemplates, totalPages, totalCount, filters = {}, onFetchAssetTemplates, loading, }) {
+    const [state, setState] = useState({
+        showConfirmPopup: false,
+        selectedAsset: {},
+        actionLoading: false,
+        updateAssetId: "",
+    });
+    const navigate = useAppNavigate();
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { showConfirmPopup, selectedAsset, actionLoading, updateAssetId } = state;
+    const toggleDeletConfirm = (asset = {}, updateAssetId = "") => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { selectedAsset: asset, showConfirmPopup: !prevState.showConfirmPopup, actionLoading: false, updateAssetId: updateAssetId })));
+    };
+    const onDeleteTemplate = () => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { actionLoading: true })));
+        try {
+            const response = yield api.delete(FETCH_ASSET_URL.replace(":assetId", get(selectedAsset, "_id")));
+            onFetchAssetTemplates(Object.assign(Object.assign({}, filters), { page: DEFAULT_PAGE }));
+            toggleDeletConfirm();
+            showNotification(get(response, "data.message", DELETE_SUCCESS), NotificationStatus.SUCCESS);
+        }
+        catch (error) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { actionLoading: false })));
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+    });
+    const onUpdateTemplate = (values, assetId) => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { actionLoading: true })));
+        try {
+            const response = yield api.put(FETCH_ASSET_URL.replace(":assetId", assetId), values);
+            onFetchAssetTemplates(filters);
+            toggleDeletConfirm();
+            showNotification(get(response, "data.message", UPDATE_SUCCESS), NotificationStatus.SUCCESS);
+        }
+        catch (error) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { actionLoading: false })));
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+    });
+    const getSortOrder = (order) => {
+        if (order === SortOrders.ASCEND) {
+            return "ascend";
+        }
+        else if (order === SortOrders.DESCEND) {
+            return "descend";
+        }
+    };
+    const columns = [
+        {
+            title: "Template Name",
+            dataIndex: "name",
+            key: "templateName",
+            sortOrder: filters.sortBy == "name" ? getSortOrder(filters.sortOrder) : undefined,
+            filteredValue: filters.name ? [filters.name] : [],
+            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, }) => {
+                return (_jsx(RenderTableSearchFilters, { value: selectedKeys[0] || "", onChange: (e) => setSelectedKeys(e.target.value ? [e.target.value] : []), placeholder: "Search name", onPressEnter: confirm, onClick: confirm, onClear: () => {
+                        clearFilters();
+                        setSelectedKeys([]);
+                        confirm();
+                    } }));
+            },
+            sorter: true,
+            render: (text) => (_jsx("span", { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-max-w-[200px] md-lib-truncate md-lib-inline-block md-lib-cursor-default", title: text, children: text })),
+        },
+        {
+            title: "Created at",
+            dataIndex: "createdAt",
+            key: "createdAt",
+            sorter: true,
+            sortOrder: filters.sortBy == "createdAt"
+                ? getSortOrder(filters.sortOrder)
+                : undefined,
+            width: 200,
+            render: (date) => (_jsx("span", { className: "md-lib-text-secondaryTextColor dark:md-lib-text-darkSecondaryTextColor md-lib-text-sm md-lib-cursor-default", children: moment.utc(date).tz(LOCAL_TIMEZONE).format(APP_DATE_TIME_FORMAT) })),
+        },
+        {
+            title: "Description",
+            dataIndex: "description",
+            key: "description",
+            render: (text) => (_jsx("span", { className: "md-lib-text-secondaryTextColor dark:md-lib-text-darkSecondaryTextColor md-lib-max-w-[240px] md-lib-truncate md-lib-inline-block md-lib-text-sm md-lib-cursor-default", title: text, children: text })),
+        },
+        {
+            title: "Active",
+            dataIndex: "isActive",
+            key: "isActive",
+            align: "center",
+            filteredValue: filters.isActive ? filters.isActive : null,
+            render: (isActive, record) => (_jsx(Switch, { loading: updateAssetId === get(record, "_id") && actionLoading, checked: isActive, onChange: (checked) => {
+                    if (isActive) {
+                        toggleDeletConfirm(record, get(record, "_id"));
+                    }
+                    else {
+                        onUpdateTemplate({ isActive: !isActive }, get(record, "_id"));
+                    }
+                } })),
+            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, }) => (_jsx(RenderTableSelectFilters, { selectedKeys: selectedKeys, onChange: (value) => setSelectedKeys(value), placeholder: "Is active?", onClear: () => {
+                    clearFilters();
+                    setSelectedKeys([]);
+                    confirm();
+                }, onClick: confirm })),
+        },
+        {
+            title: "Actions",
+            dataIndex: "",
+            key: "actions",
+            render: (record) => (_jsxs(Space, { children: [_jsx(Tooltip, { title: "Edit Asset template", className: "md-lib-hidden md:md-lib-block", children: _jsx(CustomButton, { icon: _jsx(EditOutlined, { size: 24, className: "md-lib-text-primaryColor" }), size: "large", label: "", className: "md-lib-border-none", onClick: () => navigate(ASSET_TEMPLATE_SCREEN.replace(":id", get(record, "_id"))) }) }), _jsx(Tooltip, { title: "Delete Asset template", placement: "topLeft", children: _jsx(CustomButton, { icon: _jsx(DeleteOutlined, { className: "md-lib-text-dangerColor", size: 24 }), label: "", type: "default", onClick: () => toggleDeletConfirm(record), className: "md-lib-border-none", size: "large" }) })] })),
+        },
+    ];
+    const handleTableChange = (pagination, tableFilters, sorter) => {
+        const order = sorter.order === "ascend" ? SortOrders.ASCEND : SortOrders.DESCEND;
+        const sortBy = sorter.field;
+        const updatedFilters = Object.assign(Object.assign({}, filters), { page: get(pagination, "current"), name: get(tableFilters, "templateName")
+                ? get(tableFilters, "templateName[0]")
+                : "", isActive: get(tableFilters, "isActive")
+                ? get(tableFilters, "isActive")
+                : undefined, sortBy: sortBy, sortOrder: order });
+        onFetchAssetTemplates(updatedFilters);
+    };
+    return (_jsxs("div", { className: "md-lib-mt-4", children: [_jsx(Table, { columns: columns, dataSource: assetTemplates, loading: { spinning: loading, indicator: _jsx(CustomLoader, {}) }, className: "assetType-table", pagination: totalPages > 1 ? { showSizeChanger: false, total: totalCount } : false, onChange: handleTableChange, scroll: { x: "100%" } }), _jsx(DeleteConfirmationModal, { showDeleteModal: showConfirmPopup, toggleDeleteModal: toggleDeletConfirm, okText: updateAssetId ? DEACTIVATE_OK_TEXT : DELETE_OK_TEXT, onOk: updateAssetId
+                    ? () => onUpdateTemplate({ isActive: false }, get(selectedAsset, "_id"))
+                    : onDeleteTemplate, loading: actionLoading, description: DELETE_CONFIRMATION_MESSAGE.replace(":action", updateAssetId ? "deactivate" : "delete").replace(":entity", `${get(selectedAsset, "name", "this asset template")}`), subHeading: updateAssetId
+                    ? ""
+                    : "Deleting this template might result in loosing all the meta data associated with this asset type. This change is irreversible." })] }));
+}
+export default AssetTemplatesTable;

package/build/AssetType/CreateAssetTemplate.d.ts

@@ -0,0 +1,3 @@
+export default function CreateAssetTemplate({ label }: {
+    label: string;
+}): JSX.Element;

package/build/AssetType/CreateAssetTemplate.js

@@ -0,0 +1,68 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { ICON_SIZE } from "../hocs/appConstants";
+import { Form, Input, Modal } from "antd";
+import { useMemo, useState } from "react";
+import { CiCirclePlus } from "react-icons/ci";
+import CustomButton from "../common/Button";
+import { CustomInputFormItem, CustomTextAreaFormItem, } from "../common/RenderFormItem";
+import { CREATE_SUCCESS, ENTITY_REQUIRED, SOMETHING_WENT_WRONG, } from "../utilities/constants/messages";
+import { showNotification } from "../common/notifications";
+import { NotificationStatus } from "../utilities/constants/interface";
+import { get } from "lodash";
+import { CREATE_ASSETS_URL } from "../utilities/constants/apiUrls";
+import { ASSET_TEMPLATE_SCREEN } from "../utilities/constants/routes";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import useAppNavigate from "../utilities/useAppNavigate";
+const CiCirclePlusIcon = CiCirclePlus;
+const { TextArea } = Input;
+export default function CreateAssetTemplate({ label }) {
+    const navigate = useAppNavigate();
+    const [state, setState] = useState({ open: false, loading: false });
+    const { open, loading } = state;
+    const damConfig = useDamConfig();
+    const [form] = Form.useForm();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { brand } = damConfig;
+    const handleOk = () => {
+        form.validateFields().then((values) => __awaiter(this, void 0, void 0, function* () {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+            try {
+                const response = yield api.post(CREATE_ASSETS_URL, Object.assign(Object.assign({}, values), { brandId: get(brand, "_id") }));
+                // console.log("response", response);
+                showNotification(get(response, "data.message", CREATE_SUCCESS), NotificationStatus.SUCCESS);
+                toggleModal();
+                navigate(ASSET_TEMPLATE_SCREEN.replace(":id", get(response, "data._id")));
+            }
+            catch (error) {
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+                showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            }
+        }));
+    };
+    const toggleModal = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { open: !prevState.open, loading: false })));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(CustomButton, { type: "primary", icon: _jsx(CiCirclePlusIcon, { size: ICON_SIZE }), onClick: toggleModal, size: "large", label: label }), _jsx(Modal, { title: "Create new template", open: open, onCancel: toggleModal, okText: "Create", width: 400, onOk: handleOk, okButtonProps: { loading }, children: _jsxs(Form, { layout: "vertical", form: form, 
+                    // requiredMark={false}
+                    scrollToFirstError: true, onFinish: handleOk, children: [_jsx(CustomInputFormItem, { label: "Template name", name: "name", rules: [
+                                {
+                                    required: true,
+                                    message: ENTITY_REQUIRED.replace(":entity", "Name"),
+                                },
+                            ], placeholder: "Enter template name", style: { width: "100%" } }), _jsx(CustomTextAreaFormItem, { label: "Template description", name: "description", rules: [
+                                {
+                                    required: true,
+                                    message: ENTITY_REQUIRED.replace(":entity", "Description"),
+                                },
+                            ], placeholder: "Enter template description", style: { width: "100%" }, rows: 3 })] }) })] }));
+}

package/build/AssetType/CreateOrEditAssetTemplate.d.ts

@@ -0,0 +1 @@
+export default function CreateOrEditAssetTemplate(): JSX.Element;

package/build/AssetType/CreateOrEditAssetTemplate.js

@@ -0,0 +1,77 @@
+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 } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { FETCH_ASSET_URL, FETCH_INPUT_TYPES_URL, } from "../utilities/constants/apiUrls";
+import { get } from "lodash";
+import EditAssetTemplate from "./EditAssetTemplate";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import { useTheme } from "../hocs/ThemeContext";
+import { InputTypes } from "../utilities/constants/interface";
+import Loader from "../common/loader/loader";
+import useAppParams from "../utilities/useAppParams";
+export default function CreateOrEditAssetTemplate() {
+    const [state, setState] = useState({
+        inputTypesLoading: false,
+        templatesDataLoading: false,
+        templateData: {},
+        inputTypesData: [],
+    });
+    const damConfig = useDamConfig();
+    const { styles } = damConfig;
+    const { variables } = useTheme();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const params = useAppParams();
+    useEffect(() => {
+        getInputTypesData();
+    }, []);
+    useEffect(() => {
+        getTemplateData();
+    }, [params]);
+    const getInputTypesData = () => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { inputTypesLoading: true });
+        });
+        try {
+            const response = yield api.get(FETCH_INPUT_TYPES_URL);
+            setState((prevState) => {
+                var _a;
+                return Object.assign(Object.assign({}, prevState), { inputTypesData: (_a = get(response, "data", [])) === null || _a === void 0 ? void 0 : _a.filter((input) => get(input, "defaultName") !== InputTypes.PERSON), inputTypesLoading: false });
+            });
+        }
+        catch (err) {
+            console.log("Error while fetching input types", err);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { inputTypesLoading: false });
+            });
+        }
+    });
+    const getTemplateData = () => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { templateData: true });
+        });
+        try {
+            const response = yield api.get(FETCH_ASSET_URL.replace(":assetId", get(params, "id") || ""));
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { templateData: get(response, "data", []), templatesDataLoading: false });
+            });
+        }
+        catch (error) {
+            console.log("Error while fetching template data", error);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { templatesDataLoading: false });
+            });
+        }
+    });
+    return (_jsx("div", { className: "md-lib-h-auto", style: {
+            backgroundColor: (styles === null || styles === void 0 ? void 0 : styles.secondaryColor) || (variables === null || variables === void 0 ? void 0 : variables.secondaryColor),
+        }, children: (state === null || state === void 0 ? void 0 : state.inputTypesLoading) || (state === null || state === void 0 ? void 0 : state.templatesDataLoading) ? (_jsx(Loader, {})) : (_jsx(EditAssetTemplate, { assetTemplate: get(state, "templateData", {}), inputTypes: get(state, "inputTypesData", []) })) }));
+}

package/build/AssetType/DraggedField.d.ts

@@ -0,0 +1,14 @@
+import { AddFieldNameFunc } from "../types/assetType";
+import { InputTypeEntity } from "../utilities/constants/interface";
+export default function DraggedField({ provided, field, onAddLabel, onDeleteField, setCurrentFieldIndex, currentFieldIndex, index, showOutputFormat, onUpdateOutputFormat, outputFormatField, }: {
+    provided: any;
+    field: InputTypeEntity;
+    onAddLabel: AddFieldNameFunc;
+    onDeleteField: (value: number) => void;
+    setCurrentFieldIndex: (value: number | null) => void;
+    currentFieldIndex: number | null;
+    index: number;
+    showOutputFormat: boolean;
+    onUpdateOutputFormat: (id: number, key: string, value: string | boolean) => void;
+    outputFormatField: InputTypeEntity;
+}): JSX.Element;

package/build/AssetType/DraggedField.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ICON_SIZE } from "../hocs/appConstants";
+import { Checkbox, DatePicker, Input, InputNumber, Radio, Select } from "antd";
+import { MdDragIndicator } from "react-icons/md";
+import { MdOutlineEdit } from "react-icons/md";
+import { IoMdClose } from "react-icons/io";
+import { get } from "lodash";
+import { InputTypes, } from "../utilities/constants/interface";
+import { getWidgetIcon } from "./FieldsSection";
+const { RangePicker } = DatePicker;
+const MdDragIndicatorIcon = MdDragIndicator;
+const MdOutlineEditIcon = MdOutlineEdit;
+const IoMdCloseIcon = IoMdClose;
+export default function DraggedField({ provided, field, onAddLabel, onDeleteField, setCurrentFieldIndex, currentFieldIndex, index, showOutputFormat, onUpdateOutputFormat, outputFormatField, }) {
+    // const [fieldName, setFieldName] = useState("");
+    // useEffect(() => {
+    //   const initialName = get(field, "name", "");
+    //   setFieldName(initialName);
+    // }, [field]);
+    const defaultName = get(field, "defaultName");
+    const id = get(field, "_id");
+    const IconComponent = getWidgetIcon(get(field, "defaultName"));
+    return (_jsxs("div", { className: `md-lib-flex md-lib-relative md-lib-gap-2 md-lib-border md-lib-h-100 md-lib-rounded-md md-lib-cursor-pointer md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-mb-2 ${currentFieldIndex === index && !showOutputFormat
+            ? "md-lib-border-primaryColor"
+            : "md-lib-border-borderColor dark:md-lib-border-darkBorderColor"}`, 
+        // onBlur={() =>
+        //   onAddLabel(id, !!fieldName ? fieldName : get(field, "label", ""))
+        // }
+        onClick: () => {
+            if (!showOutputFormat) {
+                setCurrentFieldIndex(index);
+            }
+        }, children: [_jsx("div", Object.assign({ 
+                // style={{ backgroundColor: variables.secondaryColor }}
+                className: "md-lib-flex md-lib-items-center md-lib-rounded-s" }, provided.dragHandleProps, { children: _jsx(MdDragIndicatorIcon, { size: ICON_SIZE, className: "md-lib-h-100" }) })), _jsxs("div", { className: "md-lib-flex-1 md-lib-p-2 md-lib-w-100", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2 md-lib-mb-3", children: [IconComponent && _jsx(IconComponent, {}), _jsx("label", { className: "md-lib-font-semibold", children: get(field, "name", "Field Name") }), !showOutputFormat && (_jsxs("div", { className: `md-lib-flex md-lib-items-center md-lib-gap-2 md-lib-absolute md-lib-right-3 md-lib--top-3 md-lib-border md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-md md-lib-p-1 ${currentFieldIndex === index ? "md-lib-border-primaryColor" : "md-lib-hidden"}`, children: [_jsx(MdOutlineEditIcon, { size: ICON_SIZE, className: "md-lib-cursor-pointer", onClick: () => setCurrentFieldIndex(index), "aria-disabled": showOutputFormat }), _jsx(IoMdCloseIcon, { size: ICON_SIZE, className: "md-lib-cursor-pointer", onClick: (e) => {
+                                            e.stopPropagation();
+                                            onDeleteField(index);
+                                        }, "aria-disabled": showOutputFormat })] }))] }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2", children: [(defaultName === InputTypes.TEXT || !defaultName) && (_jsx(Input, { placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), defaultName === InputTypes.PARAGRAPH && (_jsx(Input.TextArea, { rows: 2, placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), defaultName === InputTypes.NUMBERS && (_jsx(InputNumber, { placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), defaultName === InputTypes.DATE && (_jsx(DatePicker, { style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), defaultName === InputTypes.DATE_RANGE && (_jsx(RangePicker, { placeholder: ["Start", "End"], style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), (defaultName === InputTypes.SELECT ||
+                                defaultName === InputTypes.TEAM) && (_jsx(Select, { placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none", disabled: true })), defaultName === InputTypes.LINK && (_jsx(Input, { placeholder: get(field, "placeholder", ""), style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), defaultName === InputTypes.RADIO && (_jsx(Radio.Group, { options: [], style: { width: "100%" }, size: "large", className: "md-lib-pointer-events-none" })), defaultName === InputTypes.CHECKBOX && (_jsx(Checkbox.Group, { options: [], style: { width: "100%" }, className: "md-lib-pointer-events-none" })), showOutputFormat && (_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2", children: [_jsx(Checkbox, { onChange: (e) => onUpdateOutputFormat(index, "required", e.target.checked), checked: get(outputFormatField, "required", false), children: "Required" }), _jsx(Input, { placeholder: "Separator", value: get(outputFormatField, "separator", ""), onChange: (e) => onUpdateOutputFormat(index, "separator", e.target.value) })] }))] })] })] }));
+}