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

Client:Table:Separating table columns of my documents and recent documents.

Browse Source
This commit is contained in:
Vlada Gazizova 2024-08-27 14:10:00 +03:00
parent cff3012fa8
commit 8d8d84b961
3 changed files with 181 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,
@ -221,6 +221,11 @@ class FilesTableHeader extends React.Component {
}
: {};
console.log(
"getTableColumns modifiedRecentColumnIsEnabled",
this.props.modifiedRecentColumnIsEnabled,
);
const columns = [
{
key: "Name",
@ -232,11 +237,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 +258,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 +365,11 @@ class FilesTableHeader extends React.Component {
defaultColumns.push(...columns);
}
let columns = getColumns(defaultColumns);
console.log("call getColumns defaultColumns", defaultColumns);
let columns = getColumns(defaultColumns, isRecentTab);
console.log("getTableColumns columns", columns);
const storageColumns = localStorage.getItem(tableStorageName);
const splitColumns = storageColumns && storageColumns.split(",");
const resetColumnsSize =
@ -371,6 +381,11 @@ class FilesTableHeader extends React.Component {
const sortOrder = isRooms ? roomsFilter.sortOrder : filter.sortOrder;
this.setTableColumns(tableColumns);
console.log(
"fromUpdate this.props.modifiedRecentColumnIsEnabled",
fromUpdate,
this.props.modifiedRecentColumnIsEnabled,
);
if (fromUpdate) {
this.setState({
columns,
@ -454,6 +469,17 @@ class FilesTableHeader extends React.Component {
sortBy !== this.state.sortBy ||
sortOrder !== this.state.sortOrder
) {
console.log(
"isRecentTab this.state.isRecentTab",
isRecentTab,
this.state.isRecentTab,
);
console.log("sortBy this.state.sortBy", sortBy, this.state.sortBy);
console.log(
"sortOrder this.state.sortOrder",
sortOrder,
this.state.sortOrder,
);
return this.getTableColumns(true);
}
@ -464,6 +490,12 @@ class FilesTableHeader extends React.Component {
if (columnIndex === -1) return;
columns[columnIndex].enable = this.props.withContent;
console.log(
"componentDidUpdate columns[columnIndex].enable",
columns[columnIndex].enable,
this.props.withContent,
);
this.setState({ columns });
}
@ -482,10 +514,11 @@ class FilesTableHeader extends React.Component {
onColumnChange = (key) => {
const { columns } = this.state;
console.log("onColumnChange columns", columns);
const columnIndex = columns.findIndex((c) => c.key === key);
if (columnIndex === -1) return;
console.log("onColumnChange setColumnEnable", key);
this.props.setColumnEnable(key);
columns[columnIndex].enable = !columns[columnIndex].enable;
@ -650,6 +683,12 @@ export default inject(
roomColumnActivityIsEnabled,
roomQuotaColumnIsEnable,
authorRecentColumnIsEnabled,
modifiedRecentColumnIsEnabled,
createdRecentColumnIsEnabled,
sizeRecentColumnIsEnabled,
typeRecentColumnIsEnabled,
getColumns,
setColumnEnable,
} = tableStore;
@ -701,6 +740,12 @@ export default inject(
roomColumnActivityIsEnabled,
roomQuotaColumnIsEnable,
authorRecentColumnIsEnabled,
modifiedRecentColumnIsEnabled,
createdRecentColumnIsEnabled,
sizeRecentColumnIsEnabled,
typeRecentColumnIsEnabled,
getColumns,
setColumnEnable,
isTrashFolder,

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,

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

@ -63,11 +63,17 @@ 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;
@ -120,14 +126,27 @@ 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) => {
console.log("setModifiedRecentColumn", enable);
this.modifiedRecentColumnIsEnabled = enable;
};
setRoomColumn = (enable) => {
this.roomColumnIsEnabled = enable;
};
@ -140,10 +159,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 +203,7 @@ class TableStore {
setAccountsInsideGroupColumnGroup = (enable) =>
(this.groupAccountsInsideGroupColumnIsEnabled = enable);
setColumnsEnable = (frameTableColumns) => {
setColumnsEnable = (frameTableColumns, isRecentTab) => {
const storageColumns = localStorage.getItem(this.tableStorageName);
const splitColumns = storageColumns
? storageColumns.split(",")
@ -184,6 +211,8 @@ class TableStore {
? frameTableColumns.split(",")
: null;
console.log("splitColumns", splitColumns);
if (splitColumns) {
const {
isRoomsFolder,
@ -192,9 +221,21 @@ class TableStore {
getIsAccountsPeople,
getIsAccountsGroups,
getIsAccountsInsideGroup,
// isRecentTab,
// isRecentFolder,
} = this.treeFoldersStore;
const isRooms = isRoomsFolder || isArchiveFolder;
// console.log(
// "getIsAccountsPeople getIsAccountsGroups getIsAccountsInsideGroup",
// getIsAccountsPeople(),
// getIsAccountsGroups(),
// getIsAccountsInsideGroup(),
// );
// console.log("isRooms isTrashFolder", isRooms, isTrashFolder);
if (isRooms) {
this.setRoomColumnType(splitColumns.includes("Type"));
this.setRoomColumnTags(splitColumns.includes("Tags"));
@ -240,13 +281,31 @@ class TableStore {
return;
}
console.log("setColumnsEnable isRecentTab", isRecentTab);
console.log("window.location", window.location);
if (isRecentTab) {
console.log(
"call setModifiedRecentColumn",
splitColumns.includes("ModifiedRecent"),
);
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 +331,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 +341,9 @@ class TableStore {
case "CreatedTrash":
this.setCreatedTrashColumn(!this.createdTrashColumnIsEnabled);
return;
case "CreatedRecent":
this.setCreatedRecentColumn(!this.createdRecentColumnIsEnabled);
return;
case "Department":
getIsAccountsPeople()
@ -291,6 +356,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 +370,9 @@ class TableStore {
case "SizeTrash":
this.setSizeTrashColumn(!this.sizeTrashColumnIsEnabled);
return;
case "SizeRecent":
this.setSizeRecentColumn(!this.sizeRecentColumnIsEnabled);
return;
case "Type":
isRooms
@ -319,6 +390,10 @@ class TableStore {
this.setTypeTrashColumn(!this.typeTrashColumnIsEnabled);
return;
case "TypeRecent":
this.setTypeRecentColumn(!this.typeRecentColumnIsEnabled);
return;
case "QuickButtons":
this.setQuickButtonsColumn(!this.quickButtonsColumnIsEnabled);
return;
@ -370,7 +445,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,16 +454,23 @@ class TableStore {
const columns = [];
if (splitColumns) {
this.setColumnsEnable();
console.log(
"getColumns defaultColumns splitColumns",
defaultColumns,
splitColumns,
);
this.setColumnsEnable(null, isRecentTab);
for (let col of defaultColumns) {
const column = splitColumns.find((key) => key === col.key);
column ? (col.enable = true) : (col.enable = false);
columns.push(col);
}
return columns;
} else if (isFrame && frameTableColumns) {
console.log("2");
this.setColumnsEnable(frameTableColumns);
const frameTableArray = frameTableColumns.split(",");