Web: Client: JavascriptSDK: manager preset was complemented

2023-12-25 16:25:47 +05:00 · 2023-12-25 16:25:47 +05:00 · df2a6d3033
commit df2a6d3033
parent a85f2c70a5
3 changed files with 131 additions and 20 deletions
--- a/packages/client/public/locales/en/JavascriptSdk.json
+++ b/packages/client/public/locales/en/JavascriptSdk.json
@ -1,7 +1,9 @@
 {
+  "ActionButton": "Action button",
  "AdvancedDisplay": "Advanced display settings",
  "APILink": "API library",
  "Ascending": "Ascending",
+  "CancelButtonText": "Cancel button text",
  "Code": "Code to insert",
  "CopyWindowCode": "Copy window embed code",
  "CreateSampleHeader": "Create sample DocSpace embed",
@ -10,8 +12,10 @@
  "CSPHelp": "This setting is a security mechanism that can be used to protect against content injection attacks. The CSP describes secure resource download sources. Downloading from resources not included in the `white list` is blocked. Specify the domains (together with the protocol) with which it will work.",
  "CSPInputPlaceholder": "Enter URL like this: https://example.com",
  "CustomizingDisplay": "Customizing the display",
+  "DefaultColumnsOption": "Default (Quantity depends on screen width)",
  "DataDisplay": "Data display settings",
  "Descending": "Descending",
+  "DisplayColumns": "Displaying columns in a file row",
  "EmbedCodeSuccessfullyCopied": "Embed code successfully copied to clipboard",
  "Editor": "Editor",
  "EditorDescription": "Allows you to open the SDK as a document editor for editing by specifying the id parameter for a file.",
@ -20,6 +24,8 @@
  "EnterId": "Enter id",
  "EnterPage": "Enter page number",
  "EnterWidth": "Enter width",
+  "ElementItself": "The element itself",
+  "ElementCalledAfterClicking": "The element will be called after clicking",
  "Filter": "Search, Filter and Sort",
  "FileSelector": "File selector",
  "FileSelectorDescription": "Opens the file selector and allows you to select a file from a list of available files.",
@ -33,6 +39,7 @@
  "JavascriptSdk": "Javascript SDK",
  "Manager": "Manager",
  "ManagerDescription": "Displays a list of entities depending on the specified rootPath. It allows you to create rooms, folders, and files and work with them.",
+  "MainElementParameter": "Main element parameter",
  "Menu": "Left menu",
  "MobileOnly": "only mobile devices",
  "Page": "Display page (number)",
@ -42,6 +49,9 @@
  "RoomSelectorDescription": "Opens the room selector and allows you to select a room from a list of the available rooms.",
  "SDKDescription": "Using JavaScript SDK, you can embed a room or a folder from ONLYOFFICE DocSpace into your web interface as an iframe. Here, you can find settings for creating a sample iframe and configuring CSP. To use the complete SDK, please refer to the ",
  "SearchTerm": "Search term",
+  "SettingUpColumns": "Setting up Columns",
+  "SetItUp": "Set it up",
+  "SelectButtonText": "Select Button text",
  "SortOrder": "Sort order",
  "StartSettingUp": "Start setting up",
  "Title": "Navigate and Title",
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
@ -8,14 +8,15 @@ import Label from "@docspace/components/label";
 import Text from "@docspace/components/text";
 import Checkbox from "@docspace/components/checkbox";
 import ComboBox from "@docspace/components/combobox";
+import RadioButtonGroup from "@docspace/components/radio-button-group";
 import TabContainer from "@docspace/components/tabs-container";
+import SelectedItem from "@docspace/components/selected-item";
 import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
 import { objectToGetParams, loadScript } from "@docspace/common/utils";
 import { inject, observer } from "mobx-react";

 import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
 import HelpButton from "@docspace/components/help-button";
-import Link from "@docspace/components/link";

 import GetCodeDialog from "../sub-components/GetCodeDialog";
 import Button from "@docspace/components/button";
@ -41,7 +42,7 @@ import {
 } from "./StyledPresets";

 const Manager = (props) => {
-  const { t, setDocumentTitle, currentColorScheme, sdkLink } = props;
+  const { t, setDocumentTitle } = props;

  setDocumentTitle(t("JavascriptSdk"));

@ -66,6 +67,18 @@ const Manager = (props) => {
    { key: "pixel", label: "px" },
  ];

+  const columnDisplayOptions = [
+    { value: "default", label: t("DefaultColumnsOption") },
+    { value: "custom", label: t("SetItUp") },
+  ];
+
+  const columnsOptions = [
+    { key: "Type", label: t("Common:Type") },
+    { key: "Tags", label: t("Common:Tags") },
+    // { key: "Owner", label: t("Common:Owner") },
+    // { key: "Modified", label: t("Files:ByLastModified") },
+  ];
+
  const [sortBy, setSortBy] = useState(dataSortBy[0]);
  const [sortOrder, setSortOrder] = useState(dataSortOrder[0]);
  const [widthDimension, setWidthDimension] = useState(dataDimensions[0]);
@ -75,8 +88,19 @@ const Manager = (props) => {
  const [withSubfolders, setWithSubfolders] = useState(true);
  const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
  const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
+  const [columnDisplay, setColumnDisplay] = useState(columnDisplayOptions[0].value);
+  const [selectedColumns, setSelectedColumns] = useState([
+    { key: "Name", label: t("Common:Name") },
+    columnsOptions[0],
+    columnsOptions[1],
+  ]);
+  const [selectedColumnOption, setSelectedColumnOption] = useState({
+    key: "Select",
+    label: t("Common:SelectAction"),
+  });

  const [config, setConfig] = useState({
+    mode: "manager",
    width: `${width}${widthDimension.label}`,
    height: `${height}${heightDimension.label}`,
    frameId: "ds-frame",
@ -85,6 +109,7 @@ const Manager = (props) => {
    showMenu: true,
    showFilter: true,
    init: true,
+    viewTableColumns: selectedColumns.map((column) => column.key).join(","),
  });

  const params = objectToGetParams(config);
@ -226,10 +251,34 @@ const Manager = (props) => {
    });
  };

+  const changeColumnsOption = (e) => {
+    setColumnDisplay(e.target.value);
+  };
+
  const openGetCodeModal = () => setIsGetCodeDialogOpened(true);

  const closeGetCodeModal = () => setIsGetCodeDialogOpened(false);

+  const onColumnSelect = (option) => {
+    setSelectedColumnOption(option);
+    if (!selectedColumns.find((column) => column.key === option.key)) {
+      setConfig((config) => ({
+        ...config,
+        viewTableColumns: [...selectedColumns, option].map((column) => column.key).join(","),
+      }));
+      setSelectedColumns((prevSelectedColumns) => [...prevSelectedColumns, option]);
+    }
+  };
+
+  const deleteSelectedColumn = (option) => {
+    const filteredColumns = selectedColumns.filter((column) => column.key !== option.key);
+    setConfig((config) => ({
+      ...config,
+      viewTableColumns: filteredColumns.map((column) => column.key).join(","),
+    }));
+    setSelectedColumns(filteredColumns);
+  };
+
  const onResize = () => {
    const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
    if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
@ -274,14 +323,7 @@ const Manager = (props) => {
  return (
    <SDKContainer>
      <CategoryDescription>
-        <Text className="sdk-description">{t("SDKDescription")}</Text>
-        <Link
-          color={currentColorScheme?.main?.accent}
-          fontSize="12px"
-          fontWeight="400"
-          onClick={() => window.open(sdkLink, "_blank")}>
-          {t("APILink")}.
-        </Link>
+        <Text className="sdk-description">{t("ManagerDescription")}</Text>
      </CategoryDescription>
      <CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
      <Container>
@ -354,9 +396,21 @@ const Manager = (props) => {
            />
            <Checkbox
              className="checkbox"
-              label={t("Header")}
-              onChange={onChangeShowHeader}
-              isChecked={config.showHeader}
+              label={t("Title")}
+              onChange={onChangeShowTitle}
+              isChecked={config.showTitle}
+            />
+            <Checkbox
+              className="checkbox"
+              label={t("SettingUpColumns")}
+              onChange={() => {}}
+              isChecked={true}
+            />
+            <Checkbox
+              className="checkbox"
+              label={t("ActionButton")}
+              onChange={() => {}}
+              isChecked={true}
            />
            <Checkbox
              className="checkbox"
@ -366,9 +420,10 @@ const Manager = (props) => {
            />
            <RowContainer>
              <Checkbox
-                label={t("Title")}
-                onChange={onChangeShowTitle}
-                isChecked={config.showTitle}
+                className="checkbox"
+                label={t("Header")}
+                onChange={onChangeShowHeader}
+                isChecked={config.showHeader}
              />
              <Text color="gray">{`(${t("MobileOnly")})`}</Text>
            </RowContainer>
@ -388,6 +443,17 @@ const Manager = (props) => {
            </FilesSelectorInputWrapper>
          </ControlsGroup>
          <CategorySubHeader>{t("AdvancedDisplay")}</CategorySubHeader>
+          <ControlsGroup>
+            <Label className="label" text={t("Common:Filter")} />
+            <ComboBox
+              onSelect={() => {}}
+              options={[{ key: "1", label: t("Common:SelectAction"), default: true }]}
+              scaled={true}
+              selectedOption={{ key: "1", label: t("Common:SelectAction"), default: true }}
+              displaySelectedOption
+              directionY="top"
+            />
+          </ControlsGroup>
          <ControlsGroup>
            <Label className="label" text={t("SearchTerm")} />
            <ColumnContainer>
@ -456,6 +522,37 @@ const Manager = (props) => {
              tabIndex={7}
            />
          </ControlsGroup>
+          <ControlsGroup>
+            <Label className="label" text={t("DisplayColumns")} />
+            <RadioButtonGroup
+              orientation="vertical"
+              options={columnDisplayOptions}
+              name="columnsDisplayOptions"
+              selected={columnDisplay}
+              onClick={changeColumnsOption}
+            />
+            {columnDisplay === "custom" && (
+              <>
+                <ComboBox
+                  onSelect={onColumnSelect}
+                  options={columnsOptions}
+                  scaled={true}
+                  directionY="top"
+                  selectedOption={selectedColumnOption}
+                />
+
+                {selectedColumns.map((column) => (
+                  <SelectedItem
+                    key={column.key}
+                    isDisabled={column.key === "Name"}
+                    onClose={() => deleteSelectedColumn(column)}
+                    onClick={() => deleteSelectedColumn(column)}
+                    label={column.label}
+                  />
+                ))}
+              </>
+            )}
+          </ControlsGroup>
        </Controls>
      </Container>

@ -486,12 +583,14 @@ const Manager = (props) => {

 export default inject(({ auth }) => {
  const { settingsStore, setDocumentTitle } = auth;
-  const { theme, currentColorScheme, sdkLink } = settingsStore;
+  const { theme } = settingsStore;

  return {
    theme,
    setDocumentTitle,
-    currentColorScheme,
-    sdkLink,
  };
-})(withTranslation(["JavascriptSdk", "Files", "EmbeddingPanel", "Common"])(observer(Manager)));
+})(
+  withTranslation(["JavascriptSdk", "Files", "EmbeddingPanel", "Common", "Files"])(
+    observer(Manager),
+  ),
+);
--- a/public/locales/en/Common.json
+++ b/public/locales/en/Common.json
@ -34,6 +34,7 @@
  "ByFirstNameSorting": "By first name",
  "ByLastNameSorting": "By last name",
  "Bytes": "bytes",
+  "Button": "Button",
  "CancelButton": "Cancel",
  "ChangeButton": "Change",
  "ChangesSavedSuccessfully": "Changes saved successfully",
@ -134,6 +135,7 @@
  "FEB": "FEB",
  "FeedbackAndSupport": "Feedback & Support",
  "FillFormButton": "Fill in the form",
+  "Filter": "Filter",
  "FirstName": "First name",
  "Free": "Free",
  "FreeProFeatures": "Free access to pro features",