Client:Table:Separating table columns of my documents and recent documents.
This commit is contained in:
parent
cff3012fa8
commit
8d8d84b961
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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(",");
|
||||
|
Loading…
Reference in New Issue
Block a user