Web: Files: Added radio/checkbox, added selecting file and save button.

2021-07-05 12:54:12 +03:00 · 2021-07-05 12:54:12 +03:00 · e822857eb5
commit e822857eb5
parent e47ecb1767
6 changed files with 117 additions and 28 deletions
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/asideView.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/asideView.js
@ -10,6 +10,7 @@ import FilesListBody from "./filesListBody";
 import Aside from "@appserver/components/aside";
 import Heading from "@appserver/components/heading";
 import Backdrop from "@appserver/components/backdrop";
+import Button from "@appserver/components/button";
 const DISPLAY_TYPE = "aside";
 const SelectFileDialogAsideView = ({
  t,
@ -32,8 +33,8 @@ const SelectFileDialogAsideView = ({
  selectedFolder,
  header,
  loadingText,
+  selectedFile,
 }) => {
-  console.log("isLoadingData", isLoadingData, "selectedFolder", selectedFolder);
  return (
    <StyledAsidePanel visible={isPanelVisible}>
      <Backdrop
@ -80,10 +81,28 @@ const SelectFileDialogAsideView = ({
                  selectedFolder={selectedFolder}
                  displayType={DISPLAY_TYPE}
                  loadingText={loadingText}
+                  selectedFile={selectedFile}
                />
              )}
            </div>
          </div>
+          <div className="select-file-dialog-aside_buttons">
+            <Button
+              className="select-file-dialog-buttons-save"
+              primary
+              size="medium"
+              label={t("Common:SaveButton")}
+              tabIndex={1}
+              onClick={onClose}
+            />
+            <Button
+              primary
+              size="medium"
+              label={t("Common:CloseButton")}
+              tabIndex={1}
+              onClick={onClose}
+            />
+          </div>
        </StyledSelectFilePanel>
      </Aside>
    </StyledAsidePanel>
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/filesListBody.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/filesListBody.js
@ -19,9 +19,10 @@ const FilesListBody = ({
  viewer,
  listHeight,
  needRowSelection,
-  emptyFilesList,
  loadingText,
  selectedFolder,
+  isMultiSelect,
+  selectedFile,
 }) => {
  const { t } = useTranslation(["SelectFile", "Common"]);
  const filesListRef = useRef(null);
@ -66,6 +67,13 @@ const FilesListBody = ({
    },
    [loadingText]
  );
+  const isFileChecked = useCallback(
+    (file) => {
+      const checked = selectedFile ? file.id === selectedFile.id : false;
+      return checked;
+    },
+    [selectedFile]
+  );
  const Item = useCallback(
    ({ index, style }) => {
      const isLoaded = isItemLoaded(index);
@ -87,6 +95,8 @@ const FilesListBody = ({
        ((viewer.id === file.createdBy.id && t("Common:MeLabel")) ||
          file.createdBy.displayName);

+      const isChecked = isFileChecked(file);
+
      return (
        <div style={style}>
          <ListRow
@ -96,6 +106,8 @@ const FilesListBody = ({
            onSelectFile={onSelectFile}
            fileName={modifyFileName}
            fileExst={fileExst}
+            isMultiSelect={isMultiSelect}
+            isChecked={isChecked}
          >
            <Text data-index={index} className="files-list_file-owner">
              {fileOwner}
@ -104,7 +116,7 @@ const FilesListBody = ({
        </div>
      );
    },
-    [filesList, renderLoader]
+    [filesList, selectedFile, renderLoader]
  );
  return (
    <>
@ -147,6 +159,7 @@ const FilesListBody = ({
 };
 FilesListBody.defaultProps = {
  listHeight: 300,
+  isMultiSelect: false,
 };
 export default inject(({ auth }) => {
  const { user } = auth.userStore;
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/index.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/index.js
@ -26,7 +26,6 @@ class SelectFileDialogBody extends React.Component {
      defaultFileName: "",
      filesList: [],
      width: window.innerWidth,
-      isChecked: false,
      hasNextPage: true,
      isNextPageLoading: false,
      displayType: this.getDisplayType(),
@ -119,20 +118,18 @@ class SelectFileDialogBody extends React.Component {
  };

  onSelectFile = (e) => {
-    const { onSetFileName, onClose } = this.props;
+    const { onSetFileName, onClose, onSelectFile } = this.props;
    const { filesList } = this.state;
    const index = e.target.dataset.index;

    if (!index) return;
-    this.setState(
-      {
-        selectedFile: filesList[index].id, //object sent
-      },
-      function () {
-        onClose && onClose();
-        onSetFileName & onSetFileName(filesList[index].title);
-      }
-    );
+    this.setState({
+      selectedFile: filesList[index],
+      fileName: filesList[index].title,
+    });
+    // onSelectFile && onSelectFile(filesList[index]);
+    //onClose && onClose();
+    //onSetFileName & onSetFileName(filesList[index].title);
  };

  onClickFile = (e) => {
@ -218,7 +215,9 @@ class SelectFileDialogBody extends React.Component {
      selectedFolder,
      displayType,
      selectedKeys,
+      selectedFile,
    } = this.state;
+
    const loadingText = loadingLabel
      ? loadingLabel
      : `${t("Common:LoadingProcessing")} ${t("Common:LoadingDescription")}`;
@ -244,6 +243,7 @@ class SelectFileDialogBody extends React.Component {
        selectedFolder={selectedFolder}
        header={header}
        loadingText={loadingText}
+        selectedFile={selectedFile}
      />
    ) : (
      <SelectFileDialogModalView
@ -266,6 +266,7 @@ class SelectFileDialogBody extends React.Component {
        header={header}
        modalHeightContent={modalHeightContent}
        loadingText={loadingText}
+        selectedFile={selectedFile}
      />
    );
  }
@ -273,6 +274,7 @@ class SelectFileDialogBody extends React.Component {
 SelectFileDialogBody.propTypes = {
  onClose: PropTypes.func.isRequired,
  isPanelVisible: PropTypes.bool.isRequired,
+  onSelectFile: PropTypes.func.isRequired,
  foldersType: PropTypes.oneOf(["common", "third-party"]),
  folderId: PropTypes.string,
  withoutProvider: PropTypes.bool,
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/listRow.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/listRow.js
@ -3,7 +3,8 @@ import { StyledFilesList } from "../StyledPanels";
 import { ReactSVG } from "react-svg";
 import { inject, observer } from "mobx-react";
 import Text from "@appserver/components/text";
-
+import Checkbox from "@appserver/components/checkbox";
+import RadioButton from "@appserver/components/radio-button";
 const ListRow = ({
  displayType,
  needRowSelection,
@ -13,17 +14,45 @@ const ListRow = ({
  children,
  fileExst,
  iconSrc,
+  isMultiSelect,
+  isChecked,
 }) => {
+  console.log("isChecked", isChecked);
  return (
    <StyledFilesList
      displayType={displayType}
      needRowSelection={needRowSelection}
+      isChecked={isChecked}
    >
      <div
        data-index={index}
        className="modal-dialog_file-name"
        onClick={onSelectFile}
      >
+        {isMultiSelect ? (
+          <Checkbox
+            id={option.key}
+            value={`${index}`}
+            label={option.label}
+            isChecked={isChecked}
+            className="option_checkbox"
+            truncate={true}
+            title={option.label}
+            onChange={onOptionChange}
+          />
+        ) : (
+          <RadioButton
+            fontSize="13px"
+            fontWeight="400"
+            name="name"
+            label=""
+            onChange={() => {}}
+            isChecked={isChecked}
+            onClick={function noRefCheck() {}}
+            value=""
+            className="select-file-dialog_checked"
+          />
+        )}
        <ReactSVG src={iconSrc} className="select-file-dialog_icon" />
        <div data-index={index} className="files-list_full-name">
          <Text data-index={index} className="entry-title">
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/modalView.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/modalView.js
@ -106,6 +106,7 @@ class SelectFileDialogModalViewBody extends React.Component {
      header,
      modalHeightContent,
      loadingText,
+      selectedFile,
    } = this.props;
    const { isLoading } = this.state;
    console.log("this.folderList", this.folderList);
@ -150,6 +151,7 @@ class SelectFileDialogModalViewBody extends React.Component {
                        loadNextPage={loadNextPage}
                        selectedFolder={selectedFolder}
                        loadingText={loadingText}
+                        selectedFile={selectedFile}
                      />
                    )}
                  </div>
@ -168,14 +170,26 @@ class SelectFileDialogModalViewBody extends React.Component {
            </StyledSelectFilePanel>
          </ModalDialog.Body>
          <ModalDialog.Footer>
-            <Button
-              className="modal-dialog-button"
-              primary
-              size="big"
-              label={t("Common:CloseButton")}
-              tabIndex={1}
-              onClick={onClose}
-            />
+            <StyledSelectFilePanel>
+              <div className="select-file-dialog-modal_buttons">
+                <Button
+                  className="select-file-dialog-buttons-save"
+                  primary
+                  size="medium"
+                  label={t("Common:SaveButton")}
+                  tabIndex={1}
+                  onClick={onClose}
+                />
+                <Button
+                  className="modal-dialog-button"
+                  primary
+                  size="medium"
+                  label={t("Common:CloseButton")}
+                  tabIndex={1}
+                  onClick={onClose}
+                />
+              </div>
+            </StyledSelectFilePanel>
          </ModalDialog.Footer>
        </ModalDialog>
      </StyledAsidePanel>
--- a/products/ASC.Files/Client/src/components/panels/StyledPanels.js
+++ b/products/ASC.Files/Client/src/components/panels/StyledPanels.js
@ -585,6 +585,14 @@ const StyledSelectFilePanel = styled.div`
      border-right: 1px solid #dee2e6;
    }
  }
+  .select-file-dialog-aside_buttons {
+    position: fixed;
+    bottom: 0;
+    margin-bottom: 8px;
+  }
+  .select-file-dialog-buttons-save {
+    margin: 0 8px;
+  }
 `;

 const StyledFilesList = styled.div`
@ -600,7 +608,7 @@ const StyledFilesList = styled.div`
  }
  .files-list_file-owner {
    margin-left: auto;
-    max-width: 280px;
+    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
@ -616,7 +624,6 @@ const StyledFilesList = styled.div`
  }
  .modal-dialog_file-name:hover {
    background-color: #eceef1;
-    border-radius: 3px;
  }
  .files-list_full-name {
    grid-area: full-name;
@ -630,6 +637,9 @@ const StyledFilesList = styled.div`
  .select-file-dialog_icon {
    grid-area: icon-name;
  }
+  .select-file-dialog_checked {
+    grid-area: checked-button;
+  }
  .files-list_file-owner_wrapper {
    grid-area: owner-name;
    margin-right: 16px;
@ -640,6 +650,8 @@ const StyledFilesList = styled.div`
      `}
  }
  .modal-dialog_file-name {
+    border-radius: 3px;
+    ${(props) => props.isChecked && `background:#eceef1;`}
    cursor: ${(props) => (props.needRowSelection ? "pointer" : "default")};
    border-bottom: 1px solid #eceef1;
    align-items: center;
@ -648,13 +660,13 @@ const StyledFilesList = styled.div`
      props.displayType === "aside"
        ? css`
            height: 56px;
-            grid-template-areas: "icon-name full-name full-name" "icon-name owner-name owner-name";
+            grid-template-areas: "checked-button icon-name full-name full-name" "checked-button icon-name owner-name owner-name";
          `
        : css`
            height: 36px;
-            grid-template-areas: "icon-name full-name owner-name";
+            grid-template-areas: "checked-button icon-name full-name owner-name";
          `}
-    grid-template-columns: 32px 1fr;
+    grid-template-columns: 16px 32px 1fr;
  }
 `;
 export {