diff --git a/packages/client/public/locales/en/JavascriptSdk.json b/packages/client/public/locales/en/JavascriptSdk.json index 4e08a362ce..aea98742c1 100644 --- 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", diff --git 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 index d8da4834c1..69260fdb4d 100644 --- 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 ( - {t("SDKDescription")} - window.open(sdkLink, "_blank")}> - {t("APILink")}. - + {t("ManagerDescription")} {t("CreateSampleHeader")} @@ -354,9 +396,21 @@ const Manager = (props) => { /> + {}} + isChecked={true} + /> + {}} + isChecked={true} /> { /> {`(${t("MobileOnly")})`} @@ -388,6 +443,17 @@ const Manager = (props) => { {t("AdvancedDisplay")} + + + + @@ -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), + ), +); diff --git a/public/locales/en/Common.json b/public/locales/en/Common.json index 617d45e694..588c0cb6b5 100644 --- 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",