IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #607 from ONLYOFFICE/feature/default-column-view

Browse Source 
Feature/default column view
This commit is contained in:
Alexey Safronov 2024-08-28 20:00:22 +04:00 committed by GitHub
commit d7b4a03e13
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 157 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/public/locales/en/Files.json
View File

@ -84,6 +84,7 @@
"GoToPersonal": "Go to Documents",
"Images": "Images",
"InviteUsersInRoom": "Invite users in room",
"LastActivity": "Last activity",
"LeaveRoomDescription": "You are the owner of this room. Before you leave the room, you must transfer the owner's role to another user.",
"LeaveTheRoom": "Leave the room",
"LeftAndAppointNewOwner": "You have left the room and appointed a new owner",

46
packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
View File

@ -102,7 +102,7 @@ class FilesTableHeader extends React.Component {
},
{
key: "Activity",
title: t("ByLastModified"),
title: t("LastActivity"),
enable: this.props.roomColumnActivityIsEnabled,
resizable: true,
sortBy: SortByFieldName.ModifiedDate,
@ -211,9 +211,9 @@ class FilesTableHeader extends React.Component {
} else if (isRecentTab) {
const authorBlock = !isPublicRoom
? {
key: "Author",
key: "AuthorRecent",
title: t("ByAuthor"),
enable: this.props.authorColumnIsEnabled,
enable: this.props.authorRecentColumnIsEnabled,
resizable: true,
sortBy: SortByFieldName.Author,
// onClick: this.onFilter,
@ -232,11 +232,12 @@ class FilesTableHeader extends React.Component {
minWidth: 210,
onClick: this.onFilter,
},
{ ...authorBlock },
{
key: "Created",
key: "CreatedRecent",
title: t("ByCreation"),
enable: this.props.createdColumnIsEnabled,
enable: this.props.createdRecentColumnIsEnabled,
resizable: true,
sortBy: SortByFieldName.CreationDate,
// onClick: this.onFilter,
@ -252,27 +253,27 @@ class FilesTableHeader extends React.Component {
onChange: this.onColumnChange,
},
{
key: "Modified",
key: "ModifiedRecent",
title: t("ByLastModified"),
enable: this.props.modifiedColumnIsEnabled,
enable: this.props.modifiedRecentColumnIsEnabled,
resizable: true,
sortBy: SortByFieldName.ModifiedDate,
// onClick: this.onFilter,
onChange: this.onColumnChange,
},
{
key: "Size",
key: "SizeRecent",
title: t("Common:Size"),
enable: this.props.sizeColumnIsEnabled,
enable: this.props.sizeRecentColumnIsEnabled,
resizable: true,
sortBy: SortByFieldName.Size,
onClick: this.onFilter,
onChange: this.onColumnChange,
},
{
key: "Type",
key: "TypeRecent",
title: t("Common:Type"),
enable: this.props.typeColumnIsEnabled,
enable: this.props.typeRecentColumnIsEnabled,
resizable: true,
sortBy: SortByFieldName.Type,
// onClick: this.onFilter,
@ -359,7 +360,7 @@ class FilesTableHeader extends React.Component {
defaultColumns.push(...columns);
}
let columns = getColumns(defaultColumns);
let columns = getColumns(defaultColumns, isRecentTab);
const storageColumns = localStorage.getItem(tableStorageName);
const splitColumns = storageColumns && storageColumns.split(",");
const resetColumnsSize =
@ -438,11 +439,14 @@ class FilesTableHeader extends React.Component {
showStorageInfo,
roomsFilter,
filter,
changeDocumentsTabs,
} = this.props;
const sortBy = isRooms ? roomsFilter.sortBy : filter.sortBy;
const sortOrder = isRooms ? roomsFilter.sortOrder : filter.sortOrder;
const tabChangeCompleted = !(this.state.isRecentTab && changeDocumentsTabs);
if (
isArchiveFolder !== prevProps.isArchiveFolder ||
isRooms !== prevProps.isRooms ||
@ -451,8 +455,8 @@ class FilesTableHeader extends React.Component {
columnInfoPanelStorageName !== prevProps.columnInfoPanelStorageName ||
isRecentTab !== this.state.isRecentTab ||
showStorageInfo !== prevProps.showStorageInfo ||
sortBy !== this.state.sortBy ||
sortOrder !== this.state.sortOrder
(tabChangeCompleted && sortBy !== this.state.sortBy) ||
(tabChangeCompleted && sortOrder !== this.state.sortOrder)
) {
return this.getTableColumns(true);
}
@ -650,11 +654,18 @@ export default inject(
roomColumnActivityIsEnabled,
roomQuotaColumnIsEnable,
authorRecentColumnIsEnabled,
modifiedRecentColumnIsEnabled,
createdRecentColumnIsEnabled,
sizeRecentColumnIsEnabled,
typeRecentColumnIsEnabled,
getColumns,
setColumnEnable,
} = tableStore;
const { isPublicRoom, publicRoomKey } = publicRoomStore;
const { changeDocumentsTabs } = selectedFolderStore;
return {
setRoomsFilter,
@ -701,6 +712,12 @@ export default inject(
roomColumnActivityIsEnabled,
roomQuotaColumnIsEnable,
authorRecentColumnIsEnabled,
modifiedRecentColumnIsEnabled,
createdRecentColumnIsEnabled,
sizeRecentColumnIsEnabled,
typeRecentColumnIsEnabled,
getColumns,
setColumnEnable,
isTrashFolder,
@ -713,6 +730,7 @@ export default inject(
isDefaultRoomsQuotaSet,
showStorageInfo,
isArchiveFolder,
changeDocumentsTabs,
};
},
)(

66
packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js
View File

@ -40,11 +40,11 @@ import {
const RecentRowDataComponent = (props) => {
const {
authorColumnIsEnabled,
createdColumnIsEnabled,
modifiedColumnIsEnabled,
sizeColumnIsEnabled,
typeColumnIsEnabled,
authorRecentColumnIsEnabled,
createdRecentColumnIsEnabled,
modifiedRecentColumnIsEnabled,
sizeRecentColumnIsEnabled,
typeRecentColumnIsEnabled,
quickButtonsColumnIsEnabled,
lastOpenedColumnIsEnabled,
@ -87,15 +87,17 @@ const RecentRowDataComponent = (props) => {
</StyledBadgesContainer>
</TableCell>
{authorColumnIsEnabled ? (
{authorRecentColumnIsEnabled ? (
<TableCell
style={
!authorColumnIsEnabled ? { background: "none" } : dragStyles.style
!authorRecentColumnIsEnabled
? { background: "none" }
: dragStyles.style
}
{...selectionProp}
className={classNames(
selectionProp?.className,
lastColumn === "Author" ? "no-extra-space" : "",
lastColumn === "AuthorRecent" ? "no-extra-space" : "",
)}
>
<AuthorCell
@ -107,17 +109,17 @@ const RecentRowDataComponent = (props) => {
<div />
)}
{createdColumnIsEnabled ? (
{createdRecentColumnIsEnabled ? (
<TableCell
style={
!createdColumnIsEnabled
!createdRecentColumnIsEnabled
? { background: "none !important" }
: dragStyles.style
}
{...selectionProp}
className={classNames(
selectionProp?.className,
lastColumn === "Created" ? "no-extra-space" : "",
lastColumn === "CreatedRecent" ? "no-extra-space" : "",
)}
>
<DateCell
@ -152,15 +154,17 @@ const RecentRowDataComponent = (props) => {
<div />
)}
{modifiedColumnIsEnabled ? (
{modifiedRecentColumnIsEnabled ? (
<TableCell
style={
!modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style
!modifiedRecentColumnIsEnabled
? { background: "none" }
: dragStyles.style
}
{...selectionProp}
className={classNames(
selectionProp?.className,
lastColumn === "Modified" ? "no-extra-space" : "",
lastColumn === "ModifiedRecent" ? "no-extra-space" : "",
)}
>
<DateCell
@ -172,15 +176,17 @@ const RecentRowDataComponent = (props) => {
<div />
)}
{sizeColumnIsEnabled ? (
{sizeRecentColumnIsEnabled ? (
<TableCell
style={
!sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
!sizeRecentColumnIsEnabled
? { background: "none" }
: dragStyles.style
}
{...selectionProp}
className={classNames(
selectionProp?.className,
lastColumn === "Size" ? "no-extra-space" : "",
lastColumn === "SizeRecent" ? "no-extra-space" : "",
)}
>
<SizeCell
@ -192,17 +198,17 @@ const RecentRowDataComponent = (props) => {
<div />
)}
{typeColumnIsEnabled ? (
{typeRecentColumnIsEnabled ? (
<TableCell
style={
!typeColumnIsEnabled
!typeRecentColumnIsEnabled
? { background: "none !important" }
: dragStyles.style
}
{...selectionProp}
className={classNames(
selectionProp?.className,
lastColumn === "Type" ? "no-extra-space" : "",
lastColumn === "TypeRecent" ? "no-extra-space" : "",
)}
>
<TypeCell
@ -239,22 +245,22 @@ const RecentRowDataComponent = (props) => {
export default inject(({ tableStore }) => {
const {
authorColumnIsEnabled,
createdColumnIsEnabled,
modifiedColumnIsEnabled,
sizeColumnIsEnabled,
typeColumnIsEnabled,
authorRecentColumnIsEnabled,
createdRecentColumnIsEnabled,
modifiedRecentColumnIsEnabled,
sizeRecentColumnIsEnabled,
typeRecentColumnIsEnabled,
quickButtonsColumnIsEnabled,
lastOpenedColumnIsEnabled,
tableStorageName,
} = tableStore;
return {
authorColumnIsEnabled,
createdColumnIsEnabled,
modifiedColumnIsEnabled,
sizeColumnIsEnabled,
typeColumnIsEnabled,
authorRecentColumnIsEnabled,
createdRecentColumnIsEnabled,
modifiedRecentColumnIsEnabled,
sizeRecentColumnIsEnabled,
typeRecentColumnIsEnabled,
quickButtonsColumnIsEnabled,
lastOpenedColumnIsEnabled,
tableStorageName,

8
packages/client/src/pages/Home/Section/Filter/index.js
View File

@ -2054,6 +2054,12 @@ const SectionFilterContent = ({
label: t("Common:LastModifiedDate"),
default: true,
};
const activityDate = {
id: "sort-by_activity",
key: SortByFieldName.ModifiedDate,
label: t("Common:LastActivityDate"),
default: true,
};
const lastOpenedDate = {
id: "sort-by_last-opened",
key: SortByFieldName.LastOpened,
@ -2129,7 +2135,7 @@ const SectionFilterContent = ({
commonOptions.push(roomType);
commonOptions.push(tags);
commonOptions.push(owner);
commonOptions.push(modifiedDate);
commonOptions.push(activityDate);
showStorageInfo && commonOptions.push(sortByStorage);
} else if (isTrash) {
// commonOptions.push(authorOption);

13
packages/client/src/pages/Home/Section/Tabs/MyDocumentsTabs/index.js
View File

@ -39,6 +39,7 @@ const MyDocumentsTabs = ({
showBodyLoader,
isRoot,
user,
setChangeDocumentsTabs,
}) => {
const { t } = useTranslation(["Common", "Files"]);
@ -77,6 +78,7 @@ const MyDocumentsTabs = ({
filter.searchArea = 3;
} else filter.searchArea = null;
setChangeDocumentsTabs(true);
setFilter(filter);
window.DocSpace.navigate(`${url}?${filter.toUrlParams()}`);
};
@ -96,11 +98,19 @@ const MyDocumentsTabs = ({
};
export default inject(
({ treeFoldersStore, filesStore, clientLoadingStore, userStore }) => {
({
treeFoldersStore,
filesStore,
clientLoadingStore,
userStore,
selectedFolderStore,
}) => {
const { isPersonalRoom, isRecentTab, isRoot } = treeFoldersStore;
const { setFilter } = filesStore;
const { showBodyLoader } = clientLoadingStore;
const { user } = userStore;
const { setChangeDocumentsTabs } = selectedFolderStore;
return {
isPersonalRoom,
isRecentTab,
@ -108,6 +118,7 @@ export default inject(
showBodyLoader,
isRoot,
user,
setChangeDocumentsTabs,
};
},
)(observer(MyDocumentsTabs));

2
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
View File

@ -119,7 +119,7 @@ const Manager = (props) => {
const [columnsOptions, setColumnsOptions] = useState([
{ key: "Owner", label: t("Common:Owner") },
{ key: "Activity", label: t("Files:ByLastModified") },
{ key: "Activity", label: t("Files:LastActivity") },
]);
const [sortBy, setSortBy] = useState(dataSortBy[0]);

8
packages/client/src/store/SelectedFolderStore.ts
View File

@ -147,6 +147,8 @@ class SelectedFolderStore {
isCustomQuota: boolean | undefined;
changeDocumentsTabs = false;
constructor(settingsStore: SettingsStore) {
makeAutoObservable(this);
this.settingsStore = settingsStore;
@ -256,6 +258,10 @@ class SelectedFolderStore {
this.shared = shared;
};
setChangeDocumentsTabs = (changeDocumentsTabs: boolean) => {
this.changeDocumentsTabs = changeDocumentsTabs;
};
updateEditedSelectedRoom = (title = this.title, tags = this.tags) => {
this.title = title;
this.tags = tags;
@ -352,6 +358,8 @@ class SelectedFolderStore {
this[key] = item;
}
});
this.setChangeDocumentsTabs(false);
}
selectedFolder?.pathParts?.forEach((value) => {

66
packages/client/src/store/TableStore.js
View File

@ -63,16 +63,22 @@ class TableStore {
authorColumnIsEnabled = false;
roomColumnIsEnabled = true;
erasureColumnIsEnabled = true;
createdColumnIsEnabled = true;
createdColumnIsEnabled = false;
modifiedColumnIsEnabled = true;
sizeColumnIsEnabled = true;
typeColumnIsEnabled = true;
typeColumnIsEnabled = false;
quickButtonsColumnIsEnabled = true;
authorRecentColumnIsEnabled = true;
modifiedRecentColumnIsEnabled = false;
createdRecentColumnIsEnabled = false;
sizeRecentColumnIsEnabled = true;
typeRecentColumnIsEnabled = false;
lastOpenedColumnIsEnabled = true;
authorTrashColumnIsEnabled = true;
createdTrashColumnIsEnabled = false;
sizeTrashColumnIsEnabled = false;
sizeTrashColumnIsEnabled = true;
typeTrashColumnIsEnabled = false;
typeAccountsColumnIsEnabled = true;
@ -120,14 +126,26 @@ class TableStore {
this.authorColumnIsEnabled = enable;
};
setAuthorRecentColumn = (enable) => {
this.authorRecentColumnIsEnabled = enable;
};
setCreatedColumn = (enable) => {
this.createdColumnIsEnabled = enable;
};
setCreatedRecentColumn = (enable) => {
this.createdRecentColumnIsEnabled = enable;
};
setModifiedColumn = (enable) => {
this.modifiedColumnIsEnabled = enable;
};
setModifiedRecentColumn = (enable) => {
this.modifiedRecentColumnIsEnabled = enable;
};
setRoomColumn = (enable) => {
this.roomColumnIsEnabled = enable;
};
@ -140,10 +158,18 @@ class TableStore {
this.sizeColumnIsEnabled = enable;
};
setSizeRecentColumn = (enable) => {
this.sizeRecentColumnIsEnabled = enable;
};
setTypeColumn = (enable) => {
this.typeColumnIsEnabled = enable;
};
setTypeRecentColumn = (enable) => {
this.typeRecentColumnIsEnabled = enable;
};
setQuickButtonsColumn = (enable) => {
this.quickButtonsColumnIsEnabled = enable;
};
@ -176,7 +202,7 @@ class TableStore {
setAccountsInsideGroupColumnGroup = (enable) =>
(this.groupAccountsInsideGroupColumnIsEnabled = enable);
setColumnsEnable = (frameTableColumns) => {
setColumnsEnable = (frameTableColumns, isRecentTab) => {
const storageColumns = localStorage.getItem(this.tableStorageName);
const splitColumns = storageColumns
? storageColumns.split(",")
@ -240,13 +266,23 @@ class TableStore {
return;
}
if (isRecentTab) {
this.setModifiedRecentColumn(splitColumns.includes("ModifiedRecent"));
this.setAuthorRecentColumn(splitColumns.includes("AuthorRecent"));
this.setCreatedRecentColumn(splitColumns.includes("CreatedRecent"));
this.setLastOpenedColumn(splitColumns.includes("LastOpened"));
this.setSizeRecentColumn(splitColumns.includes("SizeRecent"));
this.setTypeRecentColumn(splitColumns.includes("TypeRecent"));
this.setQuickButtonsColumn(splitColumns.includes("QuickButtons"));
return;
}
this.setModifiedColumn(splitColumns.includes("Modified"));
this.setAuthorColumn(splitColumns.includes("Author"));
this.setCreatedColumn(splitColumns.includes("Created"));
this.setSizeColumn(splitColumns.includes("Size"));
this.setTypeColumn(splitColumns.includes("Type"));
this.setQuickButtonsColumn(splitColumns.includes("QuickButtons"));
this.setLastOpenedColumn(splitColumns.includes("LastOpened"));
}
};
@ -272,6 +308,9 @@ class TableStore {
case "AuthorTrash":
this.setAuthorTrashColumn(!this.authorTrashColumnIsEnabled);
return;
case "AuthorRecent":
this.setAuthorRecentColumn(!this.authorRecentColumnIsEnabled);
return;
case "Created":
this.setCreatedColumn(!this.createdColumnIsEnabled);
@ -279,6 +318,9 @@ class TableStore {
case "CreatedTrash":
this.setCreatedTrashColumn(!this.createdTrashColumnIsEnabled);
return;
case "CreatedRecent":
this.setCreatedRecentColumn(!this.createdRecentColumnIsEnabled);
return;
case "Department":
getIsAccountsPeople()
@ -291,6 +333,9 @@ class TableStore {
case "Modified":
this.setModifiedColumn(!this.modifiedColumnIsEnabled);
return;
case "ModifiedRecent":
this.setModifiedRecentColumn(!this.modifiedRecentColumnIsEnabled);
return;
case "Erasure":
this.setErasureColumn(!this.erasureColumnIsEnabled);
@ -302,6 +347,9 @@ class TableStore {
case "SizeTrash":
this.setSizeTrashColumn(!this.sizeTrashColumnIsEnabled);
return;
case "SizeRecent":
this.setSizeRecentColumn(!this.sizeRecentColumnIsEnabled);
return;
case "Type":
isRooms
@ -319,6 +367,10 @@ class TableStore {
this.setTypeTrashColumn(!this.typeTrashColumnIsEnabled);
return;
case "TypeRecent":
this.setTypeRecentColumn(!this.typeRecentColumnIsEnabled);
return;
case "QuickButtons":
this.setQuickButtonsColumn(!this.quickButtonsColumnIsEnabled);
return;
@ -370,7 +422,7 @@ class TableStore {
}
};
getColumns = (defaultColumns) => {
getColumns = (defaultColumns, isRecentTab) => {
const { isFrame, frameConfig } = this.settingsStore;
const storageColumns = localStorage.getItem(this.tableStorageName);
const splitColumns = storageColumns && storageColumns.split(",");
@ -379,7 +431,7 @@ class TableStore {
const columns = [];
if (splitColumns) {
this.setColumnsEnable();
this.setColumnsEnable(null, isRecentTab);
for (let col of defaultColumns) {
const column = splitColumns.find((key) => key === col.key);

1
public/locales/en/Common.json
View File

@ -244,6 +244,7 @@
"InviteUsers": "Invite users",
"Kilobyte": "KB",
"Language": "Language",
"LastActivityDate": "Last activity date",
"LastModifiedDate": "Last modified date",
"LastName": "Last name",
"LatePayment": "Late payment",