@bindu-dashing/dam-solution 1.0.0

package/dist/Folders/filesListView.js

@@ -0,0 +1,439 @@
+"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 _lodash = require("lodash");
+var _react = _interopRequireWildcard(require("react"));
+var _icons = require("@ant-design/icons");
+var _uploadFile = _interopRequireDefault(require("./uploadFile"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _useFetch = _interopRequireDefault(require("../hocs/useFetch"));
+var APIS = _interopRequireWildcard(require("../constants/apiEndpoints"));
+require("./style.css");
+var _defaultImg = _interopRequireDefault(require("../assets/images/default-img.svg"));
+var _helpers = require("../hocs/helpers");
+const FilesListView = _ref => {
+  let {
+    isImagePicker,
+    onChangeSort,
+    sortOrders,
+    setSortOrders,
+    setSortOrder,
+    setSortBy,
+    onSelect,
+    files,
+    fetchFiles,
+    folder,
+    isAdmin,
+    damAccessKey,
+    secretKey,
+    subdomain,
+    styles,
+    assetTypes,
+    teams,
+    accessToken,
+    currentUser,
+    setIsAllFilesSelected,
+    isAllFilesSelected,
+    setSelectedFiles,
+    selectedFiles,
+    folderId,
+    onSearchFiles,
+    searchColumn,
+    setSearchColumn,
+    searchKey,
+    setSearchKey
+  } = _ref;
+  const [showEdit, setShowEdit] = (0, _react.useState)(false);
+  const [currentUpdatingFile, setCurrentUpdatingFile] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const {
+    fetchApi
+  } = (0, _useFetch.default)();
+  const showConfirm = item => {
+    const deleteModal = _antd.Modal.confirm();
+    deleteModal.update({
+      title: "Do you want to delete this file?",
+      icon: /*#__PURE__*/_react.default.createElement(_icons.ExclamationCircleFilled, null),
+      footer: null,
+      content: /*#__PURE__*/_react.default.createElement(_antd.Row, {
+        justify: "end",
+        gutter: 10,
+        style: {
+          marginTop: "20px"
+        }
+      }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        className: "gutter-row"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        onClick: () => {
+          deleteModal.destroy();
+        }
+      }, "Cancel")), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        className: "gutter-row"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "primary",
+        danger: true,
+        loading: loading,
+        onClick: () => onDelete(item, deleteModal)
+      }, /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null), " Delete"))),
+      maskClosable: false
+    });
+  };
+  const onDelete = (item, deleteModal) => {
+    setLoading(true);
+    fetchApi({
+      params: {
+        folder_id: folder === null || folder === void 0 ? void 0 : folder.id
+      },
+      httpMethod: "delete",
+      route: APIS.DELETE_FILE.replace(":id", item === null || item === void 0 ? void 0 : item.id),
+      onSuccess: () => {
+        setLoading(false);
+        deleteModal.destroy();
+        _antd.notification.success({
+          message: "File deleted successfully"
+        });
+        fetchFiles(null, folder === null || folder === void 0 ? void 0 : folder.id);
+      },
+      onFailure: () => {
+        setLoading(false);
+        _antd.notification.success({
+          message: "Error while deleting file"
+        });
+      },
+      accessToken,
+      damAccessKey,
+      secretKey,
+      subdomain
+    });
+  };
+  const fileAssetTypeIds = files === null || files === void 0 ? void 0 : files.reduce((acc, file) => {
+    if (!(0, _lodash.includes)(acc, file === null || file === void 0 ? void 0 : file.asset_type_id)) {
+      acc.push(file === null || file === void 0 ? void 0 : file.asset_type_id);
+    }
+    return acc;
+  }, []);
+  const filteredAssetTypes = assetTypes === null || assetTypes === void 0 ? void 0 : assetTypes.filter(type => (0, _lodash.includes)(fileAssetTypeIds, type === null || type === void 0 ? void 0 : type.id));
+  const assetTypesMetadata = filteredAssetTypes === null || filteredAssetTypes === void 0 ? void 0 : filteredAssetTypes.reduce((acc, type) => {
+    const metadata = type === null || type === void 0 ? void 0 : type.metadata_fields;
+    const fields = metadata === null || metadata === void 0 ? void 0 : metadata.filter(field => {
+      return !(0, _lodash.includes)(acc, field === null || field === void 0 ? void 0 : field.name);
+    });
+    const fieldNames = fields === null || fields === void 0 ? void 0 : fields.map(field => {
+      var _field$is_searchable;
+      return {
+        name: field === null || field === void 0 ? void 0 : field.name,
+        isSearchable: (_field$is_searchable = field === null || field === void 0 ? void 0 : field.is_searchable) !== null && _field$is_searchable !== void 0 ? _field$is_searchable : false
+      };
+    });
+    acc = [...acc, ...fieldNames];
+    return acc;
+  }, []);
+  function humanFileSize(size) {
+    var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
+    return (size / Math.pow(1024, i)).toFixed(2) * 1 + " " + ["B", "kB", "MB", "GB", "TB"][i];
+  }
+  const onOpen = item => {
+    window.open(item === null || item === void 0 ? void 0 : item.thumbnail_url, "_blank");
+  };
+  const onDownload = item => {
+    window.open(item === null || item === void 0 ? void 0 : item.file_url, "_blank");
+  };
+  const handleSearch = () => {
+    onSearchFiles(folderId, null, null, null);
+  };
+  const getColumnSearchProps = dataIndex => ({
+    filterDropdown: () => /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: 8
+      },
+      onKeyDown: e => e.stopPropagation()
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      placeholder: `Search`,
+      value: searchColumn == dataIndex ? searchKey : "",
+      onChange: e => {
+        setSearchColumn(dataIndex);
+        setSearchKey(e.target.value);
+      },
+      onPressEnter: () => handleSearch(),
+      style: {
+        marginBottom: 8,
+        display: "block"
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: "flex"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      type: "primary",
+      onClick: () => handleSearch(),
+      size: "small",
+      style: {
+        marginLeft: "auto"
+      }
+    }, "Search"))),
+    filterIcon: filtered => /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, {
+      style: {
+        color: filtered ? "#1677ff" : undefined
+      }
+    })
+  });
+  const columns = [{
+    title: "Name",
+    dataIndex: "name",
+    width: 300,
+    ...getColumnSearchProps("name"),
+    render: (value, record) => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "dam-file-list-view-name"
+      }, ((record === null || record === void 0 ? void 0 : record.file_upload_status) == "success" || (record === null || record === void 0 ? void 0 : record.thumbnail_url)) && /*#__PURE__*/_react.default.createElement(_antd.Image, {
+        src: (0, _lodash.get)(record, "thumbnail_url"),
+        fallback: _defaultImg.default,
+        preview: false,
+        style: {
+          maxWidth: "75px",
+          maxHeight: "75px"
+        }
+      }), (record === null || record === void 0 ? void 0 : record.file_upload_status) == "failure" && /*#__PURE__*/_react.default.createElement(_antd.Image, {
+        width: "100%",
+        src: _defaultImg.default,
+        fallback: _defaultImg.default,
+        preview: false,
+        style: {
+          maxWidth: "75px",
+          maxHeight: "75px"
+        }
+      }), (record === null || record === void 0 ? void 0 : record.file_upload_status) == "pending" && /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+        width: "100%",
+        className: "img-loading",
+        style: {
+          maxWidth: "75px",
+          maxHeight: "75px"
+        }
+      }), /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+        ellipsis: {
+          tooltip: true
+        }
+      }, value));
+    },
+    sorter: true,
+    fixed: "left",
+    filtered: true,
+    sortOrder: sortOrders === null || sortOrders === void 0 ? void 0 : sortOrders.name,
+    key: "name"
+  }, {
+    title: "Asset Type",
+    dataIndex: "asset_type",
+    width: "100%",
+    ellipsis: true,
+    filtered: true,
+    key: "asset_type",
+    width: 150,
+    ...getColumnSearchProps("asset_type")
+  }, {
+    title: "Format",
+    dataIndex: "type",
+    width: "100%",
+    render: value => {
+      const extension = value === null || value === void 0 ? void 0 : value.split(".");
+      return extension === null || extension === void 0 ? void 0 : extension[1];
+    },
+    filtered: true,
+    key: "type",
+    // ellipsis: true,
+    width: 100,
+    ...getColumnSearchProps("type")
+  }, {
+    title: "Size",
+    width: "100%",
+    dataIndex: "i_size",
+    render: value => {
+      return humanFileSize(value);
+    },
+    filtered: true,
+    sortOrder: sortOrders === null || sortOrders === void 0 ? void 0 : sortOrders.i_size,
+    sorter: true,
+    key: "i_size",
+    width: 100,
+    // ellipsis: true,
+    ...getColumnSearchProps("i_size")
+  }, {
+    title: "Folder name",
+    width: "100%",
+    dataIndex: "folder_name",
+    key: "folder_name",
+    // ellipsis: true,
+    width: 150,
+    ...getColumnSearchProps("folder_name")
+  }, ...(assetTypesMetadata === null || assetTypesMetadata === void 0 ? void 0 : assetTypesMetadata.map((asset, index) => {
+    return {
+      title: asset === null || asset === void 0 ? void 0 : asset.name,
+      dataIndex: asset === null || asset === void 0 ? void 0 : asset.name,
+      key: index,
+      // ellipsis: true,
+      filtered: asset === null || asset === void 0 ? void 0 : asset.isSearchable,
+      width: 150,
+      ...getColumnSearchProps(asset === null || asset === void 0 ? void 0 : asset.name)
+    };
+  })), {
+    title: "Creation date",
+    dataIndex: "created_at",
+    width: 200,
+    render: value => {
+      return (0, _dayjs.default)(value).format("MMM D, YYYY HH:MM a");
+    },
+    sortOrder: sortOrders === null || sortOrders === void 0 ? void 0 : sortOrders.created_at,
+    sorter: true,
+    key: "created_at",
+    ellipsis: true,
+    ...getColumnSearchProps("created_at")
+  }];
+  const items = item => {
+    const menuItems = [{
+      label: "Open",
+      icon: /*#__PURE__*/_react.default.createElement(_icons.EyeOutlined, null),
+      onClick: () => onOpen(item)
+    }, {
+      label: "Edit",
+      icon: /*#__PURE__*/_react.default.createElement(_icons.EditOutlined, null),
+      onClick: () => {
+        setShowEdit(true);
+        setCurrentUpdatingFile(item);
+      }
+    }];
+    if (isAdmin) {
+      menuItems.push({
+        label: "Download",
+        icon: /*#__PURE__*/_react.default.createElement(_icons.DownloadOutlined, null),
+        onClick: () => onDownload(item)
+      });
+      menuItems.push({
+        label: "Delete",
+        icon: /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null),
+        onClick: () => showConfirm(item)
+      });
+    }
+    return menuItems;
+  };
+  const rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+      const item = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows[0];
+      if (item) {
+        var _selectedRows$;
+        const assetType = assetTypes === null || assetTypes === void 0 ? void 0 : assetTypes.find(type => (type === null || type === void 0 ? void 0 : type.id) === (item === null || item === void 0 ? void 0 : item.asset_type_id));
+        const value = (0, _helpers.getFormattedValue)(assetType === null || assetType === void 0 ? void 0 : assetType.output_format, item === null || item === void 0 ? void 0 : item.file_url, item);
+        onSelect(selectedRows === null || selectedRows === void 0 ? void 0 : (_selectedRows$ = selectedRows[0]) === null || _selectedRows$ === void 0 ? void 0 : _selectedRows$.thumbnail_url, value);
+      }
+    }
+  };
+  const finalColumns = isImagePicker ? columns : [{
+    title: /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+      checked: isAllFilesSelected,
+      onChange: e => {
+        if (e.target.checked) {
+          setIsAllFilesSelected(true);
+          setSelectedFiles(files === null || files === void 0 ? void 0 : files.map(file => file === null || file === void 0 ? void 0 : file.id));
+        } else {
+          setIsAllFilesSelected(false);
+          setSelectedFiles([]);
+        }
+      }
+    }),
+    dataIndex: "",
+    width: 50,
+    render: props => {
+      return /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+        checked: (0, _lodash.includes)(selectedFiles, props.id),
+        onChange: e => {
+          if (e.target.checked) {
+            setSelectedFiles(prevSelectedFiles => {
+              const allSelectedFiles = [...prevSelectedFiles, props.id];
+              if (allSelectedFiles.length == files.length) {
+                setIsAllFilesSelected(true);
+              }
+              return allSelectedFiles;
+            });
+          } else {
+            setSelectedFiles(prevSelectedFiles => {
+              return prevSelectedFiles.filter(id => id !== props.id);
+            });
+            setIsAllFilesSelected(false);
+          }
+        }
+      });
+    }
+  }, ...columns, {
+    title: "Actions",
+    fixed: "right",
+    render: record => {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
+        menu: {
+          items: items(record)
+        },
+        className: "more-icon",
+        trigger: ["click"],
+        placement: "bottomRight"
+      }, /*#__PURE__*/_react.default.createElement(_icons.MoreOutlined, null)));
+    },
+    key: "actions",
+    width: 100
+  }];
+  const handleTableChange = (pagination, filters, sorter) => {
+    setSortOrders(prev => {
+      return {
+        [sorter === null || sorter === void 0 ? void 0 : sorter.field]: sorter === null || sorter === void 0 ? void 0 : sorter.order
+      };
+    });
+    if (sorter !== null && sorter !== void 0 && sorter.order) {
+      setSortBy(sorter === null || sorter === void 0 ? void 0 : sorter.field);
+      setSortOrder((sorter === null || sorter === void 0 ? void 0 : sorter.order) == "ascend" ? "asc" : "desc");
+      onChangeSort(sorter === null || sorter === void 0 ? void 0 : sorter.field, (sorter === null || sorter === void 0 ? void 0 : sorter.order) == "ascend" ? "asc" : "desc");
+    }
+  };
+  const tableProps = isImagePicker ? {
+    rowSelection: {
+      type: "radio",
+      ...rowSelection
+    }
+  } : {};
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Table, Object.assign({
+    columns: finalColumns,
+    dataSource: files === null || files === void 0 ? void 0 : files.map(file => {
+      return {
+        ...file,
+        key: file === null || file === void 0 ? void 0 : file.id
+      };
+    }),
+    className: "dam-files-list-view",
+    pagination: false,
+    sticky: true,
+    scroll: {
+      x: 1300
+      // overflow: "scroll",
+      // scrollToFirstRowOnChange: true,
+    },
+
+    onChange: handleTableChange
+  }, tableProps)), showEdit && /*#__PURE__*/_react.default.createElement(_uploadFile.default, {
+    setShowUploadFile: setShowEdit,
+    id: currentUpdatingFile === null || currentUpdatingFile === void 0 ? void 0 : currentUpdatingFile.id,
+    folderId: currentUpdatingFile === null || currentUpdatingFile === void 0 ? void 0 : currentUpdatingFile.folder_id,
+    teams: teams,
+    currentUser: currentUser,
+    fetchFiles: fetchFiles,
+    folder: folder,
+    styles: styles,
+    damAccessKey: damAccessKey,
+    secretKey: secretKey,
+    subdomain: subdomain,
+    accessToken: accessToken,
+    key: currentUpdatingFile === null || currentUpdatingFile === void 0 ? void 0 : currentUpdatingFile.id
+  }));
+};
+var _default = FilesListView;
+exports.default = _default;