@bindu-dashing/dam-solution 1.0.0

package/dist/AssetType/createAssetType.js

@@ -0,0 +1,832 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _appConstants = require("../constants/appConstants");
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireWildcard(require("lodash"));
+require("./style.css");
+var _useFetch = _interopRequireDefault(require("../hocs/useFetch"));
+var APIS = _interopRequireWildcard(require("../constants/apiEndpoints"));
+var _reactBeautifulDnd = require("react-beautiful-dnd");
+const CreateAssetType = _ref => {
+  let {
+    setShowCreateOrEditAsset,
+    id,
+    fetchAssets,
+    setAssetTypes,
+    setCurrentUpdatingId,
+    damAccessKey,
+    secretKey,
+    subdomain,
+    styles,
+    setReservedWords,
+    reservedWords,
+    accessToken
+  } = _ref;
+  const [form] = _antd.Form.useForm();
+  const [data, setData] = (0, _react.useState)({});
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const {
+    fetchApi
+  } = (0, _useFetch.default)();
+  const [initialValues, setInitialValues] = (0, _react.useState)({});
+  const [dataSource, setDataSource] = (0, _react.useState)([]);
+  const [fetchRecordLoading, setFetchRecordLoading] = (0, _react.useState)(false);
+  const optionsSupportedTypes = ["DROPDOWN", "MULTI_SELECT", "CHECKBOX", "RADIO"];
+  const [outputFormatData, setOutputFormatData] = (0, _react.useState)([]);
+  const onChangeType = (index, value) => {
+    setData(prevData => ({
+      ...prevData,
+      [index]: {
+        type: value,
+        isNew: data !== null && data !== void 0 && data[index] ? false : true
+      }
+    }));
+  };
+  (0, _react.useEffect)(() => {
+    if (id) {
+      setFetchRecordLoading(true);
+      fetchApi({
+        httpMethod: "get",
+        route: APIS.FETCH_ASSET_TYPE.replace(":id", id),
+        onSuccess: response => {
+          var _get, _get2;
+          const result = response === null || response === void 0 ? void 0 : response.data;
+          form.setFieldsValue(result);
+          setInitialValues(result);
+          const updatedData = {};
+          (_get = (0, _lodash.get)(result, "metadata_fields")) === null || _get === void 0 ? void 0 : _get.forEach((field, index) => {
+            updatedData[index] = {
+              type: field === null || field === void 0 ? void 0 : field.type,
+              isNew: false
+            };
+          });
+          setData(updatedData);
+          setDataSource((_get2 = (0, _lodash.get)(result, "metadata_fields")) === null || _get2 === void 0 ? void 0 : _get2.map((field, index) => {
+            var _ref2;
+            return {
+              ...field,
+              key: (_ref2 = index + 1) === null || _ref2 === void 0 ? void 0 : _ref2.toString(),
+              index: index
+            };
+          }));
+          setOutputFormatData(_lodash.default.sortBy((0, _lodash.get)(result, "output_format", []), "order"));
+          setFetchRecordLoading(false);
+        },
+        onFailure: () => {
+          setFetchRecordLoading(false);
+        },
+        accessToken,
+        damAccessKey,
+        secretKey,
+        subdomain
+      });
+    }
+  }, [id]);
+  (0, _react.useEffect)(() => {
+    if ((reservedWords === null || reservedWords === void 0 ? void 0 : reservedWords.length) == 0) {
+      fetchApi({
+        httpMethod: "get",
+        route: APIS.GET_RESERVED_KEYWORDS,
+        onSuccess: response => {
+          const result = response === null || response === void 0 ? void 0 : response.data;
+          setReservedWords(result);
+        },
+        onFailure: () => {},
+        accessToken,
+        damAccessKey,
+        secretKey,
+        subdomain
+      });
+    }
+  }, []);
+  const validation = () => {
+    const errors = [];
+    const requiredFields = outputFormatData === null || outputFormatData === void 0 ? void 0 : outputFormatData.filter(row => {
+      return row === null || row === void 0 ? void 0 : row.required;
+    });
+    const lastRequiredField = requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields[(requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.length) - 1];
+    const finalData = outputFormatData === null || outputFormatData === void 0 ? void 0 : outputFormatData.map((row, index) => {
+      var _row$separator;
+      if ((!(row !== null && row !== void 0 && row.separator) || row !== null && row !== void 0 && row.separator && !(row !== null && row !== void 0 && (_row$separator = row.separator) !== null && _row$separator !== void 0 && _row$separator.trim())) && (row === null || row === void 0 ? void 0 : row.name) !== (lastRequiredField === null || lastRequiredField === void 0 ? void 0 : lastRequiredField.name)) {
+        if (row !== null && row !== void 0 && row.required) {
+          row["error"] = "Required";
+          errors === null || errors === void 0 ? void 0 : errors.push(true);
+        }
+      }
+      return row;
+    });
+    setOutputFormatData(finalData);
+    return errors;
+  };
+  const onFinish = values => {
+    const errors = validation();
+    if ((errors === null || errors === void 0 ? void 0 : errors.length) == 0) {
+      var _data$metadata_fields;
+      const data = {
+        ...initialValues,
+        ...values
+      };
+      data["metadata_fields"] = data === null || data === void 0 ? void 0 : (_data$metadata_fields = data.metadata_fields) === null || _data$metadata_fields === void 0 ? void 0 : _data$metadata_fields.map(field => {
+        var _typeOption$dataType;
+        const typeOption = _appConstants.METADATA_DROPDOWN_OPTIONS === null || _appConstants.METADATA_DROPDOWN_OPTIONS === void 0 ? void 0 : _appConstants.METADATA_DROPDOWN_OPTIONS.find(option => (option === null || option === void 0 ? void 0 : option.value) === (field === null || field === void 0 ? void 0 : field.type));
+        const hasOptions = optionsSupportedTypes === null || optionsSupportedTypes === void 0 ? void 0 : optionsSupportedTypes.find(option => option === (field === null || field === void 0 ? void 0 : field.type));
+        if (field !== null && field !== void 0 && field.options && !hasOptions) {
+          delete field.options;
+        }
+        field["data_type"] = (_typeOption$dataType = typeOption === null || typeOption === void 0 ? void 0 : typeOption.dataType) !== null && _typeOption$dataType !== void 0 ? _typeOption$dataType : "text";
+        field["is_searchable"] = true;
+        return field;
+      });
+      data["output_format"] = outputFormatData;
+      setLoading(true);
+      if (id) {
+        fetchApi({
+          route: APIS.UPDATE_ASSET_TYPE.replace(":id", id),
+          body: data,
+          httpMethod: "put",
+          onSuccess: response => {
+            const result = response === null || response === void 0 ? void 0 : response.data;
+            setLoading(false);
+            setShowCreateOrEditAsset(null);
+            setCurrentUpdatingId(null);
+            _antd.notification.success({
+              message: "Asset Type updated successfully"
+            });
+            setAssetTypes(prevAssets => prevAssets === null || prevAssets === void 0 ? void 0 : prevAssets.map(assetType => {
+              if ((assetType === null || assetType === void 0 ? void 0 : assetType.id) === id) {
+                return result === null || result === void 0 ? void 0 : result.data;
+              } else {
+                return assetType;
+              }
+            }));
+          },
+          onFailure: () => {
+            setLoading(false);
+            _antd.notification.error({
+              message: "Error while updating asset type"
+            });
+          },
+          accessToken,
+          damAccessKey,
+          secretKey,
+          subdomain
+        });
+      } else {
+        fetchApi({
+          route: APIS.CREATE_ASSET_TYPE,
+          httpMethod: "post",
+          body: data,
+          onSuccess: () => {
+            setLoading(false);
+            setShowCreateOrEditAsset(false);
+            setCurrentUpdatingId(null);
+            _antd.notification.success({
+              message: "Asset Type created successfully"
+            });
+            fetchAssets();
+          },
+          onFailure: () => {
+            setLoading(false);
+            _antd.notification.error({
+              message: "Error while creating asset type"
+            });
+          },
+          accessToken,
+          damAccessKey,
+          secretKey,
+          subdomain
+        });
+      }
+    }
+  };
+  const columns = [{
+    title: "",
+    render: () => {
+      return /*#__PURE__*/_react.default.createElement(_icons.HolderOutlined, null);
+    },
+    width: "20px"
+  }, {
+    title: "Name",
+    dataIndex: "name",
+    ellipsis: true
+  }, {
+    title: "Type",
+    dataIndex: "type"
+  }, {
+    title: "Order",
+    dataIndex: "display_order"
+  }];
+  const outputFormatColumns = [{
+    title: "",
+    render: () => {
+      return /*#__PURE__*/_react.default.createElement(_icons.HolderOutlined, null);
+    },
+    width: "20px"
+  }, {
+    title: "Name",
+    dataIndex: "name",
+    ellipsis: true
+  }, {
+    title: "Required",
+    dataIndex: "required",
+    render: (value, record) => {
+      return /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+        onChange: e => setOutputFormatData(prevData => {
+          return prevData === null || prevData === void 0 ? void 0 : prevData.map(row => {
+            if ((row === null || row === void 0 ? void 0 : row.name) == (record === null || record === void 0 ? void 0 : record.name)) {
+              row["required"] = e.target.checked;
+              row["error"] = !(record !== null && record !== void 0 && record.required) || record !== null && record !== void 0 && record.separator ? null : record === null || record === void 0 ? void 0 : record.error;
+            }
+            return row;
+          });
+        }),
+        checked: value
+      });
+    },
+    width: 100
+  }, {
+    title: "Separator",
+    dataIndex: "separator",
+    render: (value, record) => {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+        onChange: e => setOutputFormatData(prevData => {
+          return prevData === null || prevData === void 0 ? void 0 : prevData.map(row => {
+            if ((row === null || row === void 0 ? void 0 : row.name) == (record === null || record === void 0 ? void 0 : record.name)) {
+              row["separator"] = e.target.value;
+              row["error"] = !(record !== null && record !== void 0 && record.required) || record !== null && record !== void 0 && record.separator ? null : record === null || record === void 0 ? void 0 : record.error;
+            }
+            return row;
+          });
+        }),
+        value: value
+      }), (record === null || record === void 0 ? void 0 : record.error) && /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+        style: {
+          color: "red"
+        }
+      }, record === null || record === void 0 ? void 0 : record.error));
+    },
+    width: 100
+  }, {
+    title: "Order",
+    dataIndex: "order",
+    width: 100
+  }];
+  const onFieldsChange = (_, allFields) => {
+    const metadataField = allFields === null || allFields === void 0 ? void 0 : allFields.find(field => {
+      var _field$name, _field$name2, _field$value;
+      return (field === null || field === void 0 ? void 0 : (_field$name = field.name) === null || _field$name === void 0 ? void 0 : _field$name.includes("metadata_fields")) && (field === null || field === void 0 ? void 0 : (_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.length) == 1 &&
+      // field?.touched &&
+      (field === null || field === void 0 ? void 0 : (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.length) > 0;
+    });
+    if (metadataField) {
+      var _metadataField$value;
+      setDataSource(metadataField === null || metadataField === void 0 ? void 0 : (_metadataField$value = metadataField.value) === null || _metadataField$value === void 0 ? void 0 : _metadataField$value.map((value, index) => {
+        var _ref3;
+        return {
+          ...value,
+          key: (_ref3 = index + 1) === null || _ref3 === void 0 ? void 0 : _ref3.toString(),
+          index: index
+        };
+      }));
+      setOutputFormatData(function () {
+        var _metadataField$value2;
+        let prevOutputFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        const finalRecords = [...prevOutputFormat];
+        const fileUrlRecord = prevOutputFormat === null || prevOutputFormat === void 0 ? void 0 : prevOutputFormat.find(record => (record === null || record === void 0 ? void 0 : record.name) == "File Url");
+        // add new fields
+        metadataField === null || metadataField === void 0 ? void 0 : (_metadataField$value2 = metadataField.value) === null || _metadataField$value2 === void 0 ? void 0 : _metadataField$value2.forEach((value, index) => {
+          const existingRecord = finalRecords === null || finalRecords === void 0 ? void 0 : finalRecords.find(row => (row === null || row === void 0 ? void 0 : row.name) == (value === null || value === void 0 ? void 0 : value.name));
+          if (!existingRecord) {
+            var _ref4;
+            finalRecords.push({
+              name: value === null || value === void 0 ? void 0 : value.name,
+              required: false,
+              key: (_ref4 = index + 1) === null || _ref4 === void 0 ? void 0 : _ref4.toString(),
+              index: index,
+              error: null,
+              order: index + 1
+            });
+          }
+        });
+        // remove fields
+        finalRecords === null || finalRecords === void 0 ? void 0 : finalRecords.forEach((value, index) => {
+          var _metadataField$value3;
+          const existingRecord = (value === null || value === void 0 ? void 0 : value.name) !== "File Url" ? metadataField === null || metadataField === void 0 ? void 0 : (_metadataField$value3 = metadataField.value) === null || _metadataField$value3 === void 0 ? void 0 : _metadataField$value3.findIndex(row => (row === null || row === void 0 ? void 0 : row.name) == (value === null || value === void 0 ? void 0 : value.name)) : 0;
+          if (existingRecord == -1) {
+            finalRecords === null || finalRecords === void 0 ? void 0 : finalRecords.splice(index);
+          }
+        });
+        const finalDataSource = finalRecords === null || finalRecords === void 0 ? void 0 : finalRecords.map((item, index) => {
+          var _ref5;
+          return {
+            ...item,
+            key: (_ref5 = index + 1) === null || _ref5 === void 0 ? void 0 : _ref5.toString(),
+            index: index
+          };
+        });
+        if (!fileUrlRecord) {
+          var _ref6;
+          return [{
+            name: "File Url",
+            key: (_ref6 = (finalRecords === null || finalRecords === void 0 ? void 0 : finalRecords.length) + 1) === null || _ref6 === void 0 ? void 0 : _ref6.toString(),
+            index: finalRecords === null || finalRecords === void 0 ? void 0 : finalRecords.length,
+            order: (finalRecords === null || finalRecords === void 0 ? void 0 : finalRecords.length) + 1,
+            required: false
+          }, ...finalDataSource];
+        }
+        return finalDataSource === null || finalDataSource === void 0 ? void 0 : finalDataSource.map((item, index) => {
+          var _ref7, _item$separator;
+          return {
+            ...item,
+            key: (_ref7 = index + 1) === null || _ref7 === void 0 ? void 0 : _ref7.toString(),
+            index: index,
+            order: index + 1,
+            separator: (_item$separator = item === null || item === void 0 ? void 0 : item.separator) !== null && _item$separator !== void 0 ? _item$separator : null
+          };
+        });
+      });
+    }
+  };
+  const onOutputFormatDragEnd = result => {
+    if (!result.destination) {
+      return;
+    }
+    const {
+      source,
+      destination
+    } = result;
+    const newDataSource = [...outputFormatData];
+    const movedItem = newDataSource[source.index];
+    newDataSource.splice(source.index, 1);
+    newDataSource.splice(destination.index, 0, movedItem);
+    const finalDataSource = newDataSource === null || newDataSource === void 0 ? void 0 : newDataSource.map((item, index) => {
+      item["order"] = index + 1;
+      item["index"] = index;
+      item["key"] = (index + 1).toString();
+      return item;
+    });
+    setOutputFormatData(finalDataSource);
+  };
+  const onDragEnd = result => {
+    if (!result.destination) {
+      return;
+    }
+    const {
+      source,
+      destination
+    } = result;
+    const newDataSource = [...dataSource];
+    const movedItem = newDataSource[source.index];
+    newDataSource.splice(source.index, 1);
+    newDataSource.splice(destination.index, 0, movedItem);
+    const finalDataSource = newDataSource === null || newDataSource === void 0 ? void 0 : newDataSource.map((item, index) => {
+      item["display_order"] = index + 1;
+      item["index"] = index;
+      item["key"] = (index + 1).toString();
+      return item;
+    });
+    form.setFieldValue("metadata_fields", finalDataSource);
+    setDataSource(finalDataSource);
+    const newData = Object === null || Object === void 0 ? void 0 : Object.values(data);
+    const movedDataItem = newData[source.index];
+    newData.splice(source.index, 1);
+    newData.splice(destination.index, 0, movedDataItem);
+    const finalData = newData === null || newData === void 0 ? void 0 : newData.map((item, index) => {
+      return item;
+    });
+    const updatedData = {};
+    finalData === null || finalData === void 0 ? void 0 : finalData.forEach((field, index) => {
+      updatedData[index] = field;
+    });
+    setData(updatedData);
+  };
+  const DroppableTableBody = _ref8 => {
+    let {
+      columnId,
+      ...props
+    } = _ref8;
+    return /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Droppable, {
+      droppableId: "1"
+    }, (provided, snapshot) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("tbody", Object.assign({
+      ref: provided.innerRef
+    }, props, provided.droppableProps, {
+      className: `${props.className} ${snapshot.isDraggingOver ? "is-dragging-over" : ""}`
+    }))));
+  };
+  const DraggableTableRow = _ref9 => {
+    let {
+      tasks,
+      ...props
+    } = _ref9;
+    if ((tasks === null || tasks === void 0 ? void 0 : tasks.length) === 0) {
+      return /*#__PURE__*/_react.default.createElement("tr", Object.assign({
+        className: "ant-table-placeholder row-item"
+      }, props), /*#__PURE__*/_react.default.createElement("td", {
+        colSpan: columns.length,
+        className: "ant-table-cell"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "ant-empty ant-empty-normal"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Empty, {
+        image: _antd.Empty.PRESENTED_IMAGE_SIMPLE
+      }))));
+    }
+    const task = tasks === null || tasks === void 0 ? void 0 : tasks.find(task => (task === null || task === void 0 ? void 0 : task.key) === (props === null || props === void 0 ? void 0 : props["data-row-key"]));
+    return /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Draggable, {
+      key: props === null || props === void 0 ? void 0 : props["data-row-key"],
+      draggableId: props === null || props === void 0 ? void 0 : props["data-row-key"],
+      index: task === null || task === void 0 ? void 0 : task.index
+    }, (provided, snapshot) => {
+      return /*#__PURE__*/_react.default.createElement("tr", Object.assign({
+        ref: provided.innerRef
+      }, props, provided.draggableProps, provided.dragHandleProps, {
+        className: `row-item 
+              } ${snapshot.isDragging ? "row-dragging" : ""}`
+      }));
+    });
+  };
+  const DraggableOutputFormatTableRow = _ref10 => {
+    let {
+      tasks,
+      ...props
+    } = _ref10;
+    if ((tasks === null || tasks === void 0 ? void 0 : tasks.length) === 0) {
+      return /*#__PURE__*/_react.default.createElement("tr", Object.assign({
+        className: "ant-table-placeholder row-item"
+      }, props), /*#__PURE__*/_react.default.createElement("td", {
+        colSpan: outputFormatColumns.length,
+        className: "ant-table-cell"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "ant-empty ant-empty-normal"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Empty, {
+        image: _antd.Empty.PRESENTED_IMAGE_SIMPLE
+      }))));
+    }
+    const task = tasks === null || tasks === void 0 ? void 0 : tasks.find(task => (task === null || task === void 0 ? void 0 : task.key) === (props === null || props === void 0 ? void 0 : props["data-row-key"]));
+    return /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Draggable, {
+      key: props === null || props === void 0 ? void 0 : props["data-row-key"],
+      draggableId: props === null || props === void 0 ? void 0 : props["data-row-key"],
+      index: task === null || task === void 0 ? void 0 : task.index
+    }, (provided, snapshot) => {
+      return /*#__PURE__*/_react.default.createElement("tr", Object.assign({
+        ref: provided.innerRef
+      }, props, provided.draggableProps, provided.dragHandleProps, {
+        className: `row-item 
+              } ${snapshot.isDragging ? "row-dragging" : ""}`
+      }));
+    });
+  };
+  const getFormattedValue = data => {
+    const sortedData = _lodash.default.sortBy(data, "order");
+    const value = sortedData === null || sortedData === void 0 ? void 0 : sortedData.reduce((acc, field) => {
+      if (field !== null && field !== void 0 && field.required) {
+        // if (field?.name !== "File Url") {
+        acc = acc + (field === null || field === void 0 ? void 0 : field.name);
+        if (field !== null && field !== void 0 && field.separator) {
+          acc = acc + (field === null || field === void 0 ? void 0 : field.separator);
+        }
+        // }
+      }
+
+      return acc;
+    }, "");
+    return value;
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    width: 650,
+    open: true,
+    onClose: () => {
+      setCurrentUpdatingId(null);
+      setShowCreateOrEditAsset(false);
+    },
+    className: "create-asset-page",
+    title: `${id ? "Update" : "Create"} Asset Type`,
+    maskClosable: false,
+    style: {
+      "--color": styles === null || styles === void 0 ? void 0 : styles.primaryColor
+    }
+  }, fetchRecordLoading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "dam-loading"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Spin, null)) : /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    layout: "vertical",
+    className: "form",
+    form: form,
+    onFinish: onFinish,
+    onFieldsChange: onFieldsChange
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: "Name",
+    name: "name",
+    rules: [{
+      required: true,
+      message: "Name is required"
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    style: {
+      width: "100%"
+    },
+    placeholder: "Name"
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: "Sort Metadata Fields"
+  }, /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.DragDropContext, {
+    onDragEnd: onDragEnd
+  }, /*#__PURE__*/_react.default.createElement(_antd.Table, {
+    dataSource: dataSource,
+    columns: columns,
+    pagination: false,
+    rowKey: "key",
+    components: {
+      body: {
+        // Custom tbody
+        wrapper: val => DroppableTableBody({
+          ...val
+        }),
+        // Custom td
+        row: val => DraggableTableRow({
+          tasks: dataSource,
+          ...val
+        })
+      }
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: "Image Picker Output format"
+  }, /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.DragDropContext, {
+    onDragEnd: onOutputFormatDragEnd
+  }, /*#__PURE__*/_react.default.createElement(_antd.Table, {
+    dataSource: outputFormatData,
+    columns: outputFormatColumns,
+    pagination: false,
+    rowKey: "key",
+    components: {
+      body: {
+        // Custom tbody
+        wrapper: val => DroppableTableBody({
+          ...val
+        }),
+        // Custom td
+        row: val => DraggableOutputFormatTableRow({
+          tasks: outputFormatData,
+          ...val
+        })
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: "10px"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+    style: {
+      color: "gray"
+    }
+  }, "Sample: ", getFormattedValue(outputFormatData)))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: "Metadata Fields",
+    name: "metadata_fields",
+    rules: [{
+      required: true,
+      message: "Metadata is required"
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.List, {
+    name: "metadata_fields"
+  }, (fields, _ref11) => {
+    let {
+      add,
+      remove
+    } = _ref11;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fields.map((_ref12, index) => {
+      var _data$index2, _data$index3, _data$index4, _data$index5;
+      let {
+        key,
+        name,
+        ...restField
+      } = _ref12;
+      const fieldKey = key + 1;
+      return /*#__PURE__*/_react.default.createElement(_antd.Row, {
+        className: "metadata-field-container"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        span: 22
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "metadata-field"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Row, null, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        span: 12
+      }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, Object.assign({}, restField, {
+        name: [name, "name"],
+        label: "Label",
+        rules: [{
+          required: true,
+          message: "Label is required"
+        }, () => ({
+          validator(_, value) {
+            if (!value || !(0, _lodash.includes)(reservedWords, value)) {
+              const filteredName = dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(label => {
+                var _label$name;
+                return (label === null || label === void 0 ? void 0 : (_label$name = label.name) === null || _label$name === void 0 ? void 0 : _label$name.trim()) === (value === null || value === void 0 ? void 0 : value.trim()) && (label === null || label === void 0 ? void 0 : label.key) != key + 1;
+              });
+              if (!filteredName) {
+                return Promise.resolve();
+              } else {
+                return Promise.reject(new Error("This Metadata Field already exists"));
+              }
+            }
+            return Promise.reject(new Error("This is a reserved word"));
+          }
+        })]
+      }), /*#__PURE__*/_react.default.createElement(_antd.Input, {
+        placeholder: "Label",
+        style: {
+          width: "100%"
+        }
+      }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        span: 11,
+        push: 1
+      }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, Object.assign({}, restField, {
+        name: [name, "type"],
+        label: "Type",
+        rules: [{
+          required: true,
+          message: "Type is required"
+        }]
+      }), /*#__PURE__*/_react.default.createElement(_antd.Select, {
+        placeholder: "Type",
+        options: _appConstants.METADATA_DROPDOWN_OPTIONS === null || _appConstants.METADATA_DROPDOWN_OPTIONS === void 0 ? void 0 : _appConstants.METADATA_DROPDOWN_OPTIONS.map(option => {
+          var _data$index;
+          if ((option === null || option === void 0 ? void 0 : option.value) === "DATE" && id && data !== null && data !== void 0 && data[index] && !(data !== null && data !== void 0 && (_data$index = data[index]) !== null && _data$index !== void 0 && _data$index.isNew)) {
+            return {
+              ...option,
+              disabled: true
+            };
+          } else {
+            return option;
+          }
+        }),
+        style: {
+          width: "100%"
+        },
+        onChange: e => onChangeType(index, e),
+        disabled: id && (data === null || data === void 0 ? void 0 : (_data$index2 = data[index]) === null || _data$index2 === void 0 ? void 0 : _data$index2.type) == "DATE" && !(data !== null && data !== void 0 && (_data$index3 = data[index]) !== null && _data$index3 !== void 0 && _data$index3.isNew) ? true : false
+      })))), /*#__PURE__*/_react.default.createElement(_antd.Row, null, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        span: 12
+      }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, Object.assign({}, restField, {
+        name: [name, "default_value"],
+        label: "Default Value",
+        extra: (data === null || data === void 0 ? void 0 : (_data$index4 = data[index]) === null || _data$index4 === void 0 ? void 0 : _data$index4.type) == "DATE" ? "Date should be of type yyyy-mm-dd" : "",
+        rules: [() => ({
+          validator(_, value) {
+            const metadata = form.getFieldValue("metadata_fields");
+            const currentMetadataField = metadata === null || metadata === void 0 ? void 0 : metadata.find((field, fieldIndex) => fieldIndex == index);
+            if (currentMetadataField && (0, _lodash.includes)(optionsSupportedTypes, currentMetadataField === null || currentMetadataField === void 0 ? void 0 : currentMetadataField.type)) {
+              var _currentMetadataField, _currentMetadataField2;
+              const optionValues = (currentMetadataField === null || currentMetadataField === void 0 ? void 0 : (_currentMetadataField = currentMetadataField.options) === null || _currentMetadataField === void 0 ? void 0 : _currentMetadataField.length) > 0 ? currentMetadataField === null || currentMetadataField === void 0 ? void 0 : (_currentMetadataField2 = currentMetadataField.options) === null || _currentMetadataField2 === void 0 ? void 0 : _currentMetadataField2.map(option => {
+                return option === null || option === void 0 ? void 0 : option.value;
+              }) : [];
+              if (value && !(0, _lodash.includes)(optionValues, value)) {
+                return Promise.reject(new Error("Value should exists in options value"));
+              } else {
+                return Promise.resolve();
+              }
+            }
+            return Promise.resolve();
+          }
+        })]
+      }), /*#__PURE__*/_react.default.createElement(_antd.Input, {
+        placeholder: "Default Value"
+      }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        span: 11,
+        push: 1
+      }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, Object.assign({}, restField, {
+        name: [name, "display_order"],
+        label: "Display Order",
+        rules: [{
+          required: true,
+          message: "Display Order is required"
+        }]
+      }), /*#__PURE__*/_react.default.createElement(_antd.Input, {
+        placeholder: "Display Order",
+        style: {
+          width: "100%"
+        }
+      })))), /*#__PURE__*/_react.default.createElement(_antd.Row, null, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        span: 12
+      }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, Object.assign({}, restField, {
+        name: [name, "is_mandatory"],
+        valuePropName: "checked"
+      }), /*#__PURE__*/_react.default.createElement(_antd.Checkbox, null, "Is Mandatory")))), (0, _lodash.includes)(optionsSupportedTypes, data === null || data === void 0 ? void 0 : (_data$index5 = data[index]) === null || _data$index5 === void 0 ? void 0 : _data$index5.type) && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+        name: [name, "options"],
+        label: "Options",
+        rules: [{
+          required: true,
+          message: "Options is required"
+        }]
+      }, /*#__PURE__*/_react.default.createElement(_antd.Form.List, Object.assign({}, restField, {
+        name: [name, "options"]
+      }), (options, _ref13) => {
+        let {
+          add,
+          remove
+        } = _ref13;
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options.map(_ref14 => {
+          let {
+            key,
+            name,
+            ...restField
+          } = _ref14;
+          return /*#__PURE__*/_react.default.createElement(_antd.Row, {
+            style: {
+              display: "flex"
+            }
+          }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+            span: 10
+          }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, Object.assign({}, restField, {
+            name: [name, "label"],
+            rules: [{
+              required: true,
+              message: "Label is required"
+            }]
+          }), /*#__PURE__*/_react.default.createElement(_antd.Input, {
+            placeholder: "Label",
+            style: {
+              width: "100%"
+            }
+          }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+            span: 10,
+            push: 1
+          }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, Object.assign({}, restField, {
+            name: [name, "value"],
+            rules: [{
+              required: true,
+              message: "Missing Value"
+            }, () => ({
+              validator(_, value) {
+                var _currentField$options;
+                const currentField = dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(field => (field === null || field === void 0 ? void 0 : field.key) == fieldKey);
+                const filteredOption = currentField === null || currentField === void 0 ? void 0 : (_currentField$options = currentField.options) === null || _currentField$options === void 0 ? void 0 : _currentField$options.find((label, index) => {
+                  var _label$value;
+                  return (label === null || label === void 0 ? void 0 : (_label$value = label.value) === null || _label$value === void 0 ? void 0 : _label$value.trim()) === (value === null || value === void 0 ? void 0 : value.trim()) && index != key;
+                });
+                if (!filteredOption) {
+                  return Promise.resolve();
+                } else {
+                  return Promise.reject(new Error("This Value already exists"));
+                }
+              }
+            })]
+          }), /*#__PURE__*/_react.default.createElement(_antd.Input, {
+            placeholder: "Value",
+            style: {
+              width: "100%"
+            }
+          }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+            span: 2,
+            push: 2
+          }, /*#__PURE__*/_react.default.createElement(_icons.MinusCircleOutlined, {
+            onClick: () => remove(name)
+          })));
+        }), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+          type: "dashed",
+          onClick: () => add(),
+          block: true,
+          icon: /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null)
+        }, "Add Option")));
+      })))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        span: 2
+      }, /*#__PURE__*/_react.default.createElement(_icons.MinusCircleOutlined, {
+        style: {
+          marginLeft: "10px"
+        },
+        onClick: () => remove(name)
+      })));
+    }), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      type: "dashed",
+      onClick: () => {
+        add();
+        const currentMetadata = form.getFieldValue("metadata_fields");
+        form.setFieldValue("metadata_fields", currentMetadata === null || currentMetadata === void 0 ? void 0 : currentMetadata.map(function () {
+          let field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+          let index = arguments.length > 1 ? arguments[1] : undefined;
+          return {
+            ...field,
+            display_order: index + 1
+          };
+        }));
+      },
+      block: true,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null)
+    }, "Add field")));
+  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    block: true,
+    style: {
+      marginLeft: "auto",
+      backgroundColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor
+    },
+    htmlType: "submit",
+    loading: loading
+  }, "Submit")));
+};
+var _default = CreateAssetType;
+exports.default = _default;