Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remember table sorting #1009

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remember table sorting #1009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/selectors/tableSelectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export const getPageLimit = (state: RootState) => state.table.pagination.limit;
export const getPageOffset = (state: RootState) => state.table.pagination.offset;
export const getNumberDirectAccessiblePages = (state: RootState) => state.table.pagination.directAccessibleNo;
export const getResourceType = (state: RootState) => state.table.resource;
export const getTableSorting = (state: RootState) => state.table.sortBy;
export const getTableDirection = (state: RootState) => state.table.reverse;
export const getTableSorting = (state: RootState) => state.table.sortBy[state.table.resource];
export const getTableDirection = (state: RootState) => state.table.reverse[state.table.resource];
export const getTable = (state: RootState) => state.table;
export const getDeactivatedColumns = (state: RootState) =>
state.table.columns.filter((column) => column.deactivated);
Expand Down
46 changes: 34 additions & 12 deletions src/slices/tableSlice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ type TableState = {
resource: string,
pages: Page[],
columns: TableConfig["columns"],
sortBy: string,
sortBy: { [key: string]: string }, // Key is resource, value is actual sorting parameter
predicate: string,
reverse: string,
reverse: { [key: string]: string }, // Key is resource, value is actual sorting parameter
rows: Row[],
maxLabel: string,
pagination: Pagination,
Expand All @@ -93,9 +93,31 @@ const initialState: TableState = {
resource: "",
pages: [],
columns: [],
sortBy: "date",
sortBy: {
events: "date",
series: "createdDateTime",
recordings: "status",
jobs: "id",
servers: "online",
services: "status",
users: "name",
groups: "name",
acls: "name",
themes: "name",
},
predicate: "",
reverse: "DESC",
reverse: {
events: "DESC",
series: "DESC",
recordings: "ASC",
jobs: "ASC",
servers: "ASC",
services: "ASC",
users: "ASC",
groups: "ASC",
acls: "ASC",
theme: "ASC",
},
rows: [],
maxLabel: "",
pagination: {
Expand All @@ -116,17 +138,17 @@ const tableSlice = createSlice({
resource: TableState["resource"],
pages: TableState["pages"],
rows: TableState["rows"],
sortBy: TableState["sortBy"],
reverse: TableState["reverse"],
sortBy: TableState["sortBy"][0],
reverse: TableState["reverse"][0],
totalItems: TableState["pagination"]["totalItems"],
}>) {
state.multiSelect = action.payload.multiSelect;
state.columns = action.payload.columns;
state.resource = action.payload.resource;
state.pages = action.payload.pages;
state.rows = action.payload.rows;
state.sortBy = action.payload.sortBy;
state.reverse = action.payload.reverse;
state.sortBy[action.payload.resource] = action.payload.sortBy;
state.reverse[action.payload.resource] = action.payload.reverse;
state.pagination = {
...state.pagination,
totalItems: action.payload.totalItems,
Expand Down Expand Up @@ -168,14 +190,14 @@ const tableSlice = createSlice({
})
},
reverseTable(state, action: PayloadAction<
TableState["reverse"]
TableState["reverse"][0]
>) {
state.reverse = action.payload;
state.reverse[state.resource] = action.payload;
},
setSortBy(state, action: PayloadAction<
TableState["sortBy"]
TableState["sortBy"][0]
>) {
state.sortBy = action.payload;
state.sortBy[state.resource] = action.payload;
},
createPage(state, action: PayloadAction<
Page
Expand Down
60 changes: 20 additions & 40 deletions src/thunks/tableThunks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,8 @@ export const loadEventsIntoTable = (): AppThunk => async (dispatch, getState) =>
columns: events.columns,
multiSelect: table.multiSelect,
pages: pages,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["events"],
reverse: table.reverse["events"],
totalItems: total,
};

Expand All @@ -90,8 +90,6 @@ export const loadEventsIntoTable = (): AppThunk => async (dispatch, getState) =>

tableData = {
...tableData,
sortBy: "date",
reverse: "DESC",
multiSelect: multiSelect,
};
}
Expand Down Expand Up @@ -129,8 +127,8 @@ export const loadSeriesIntoTable = (): AppThunk => (dispatch, getState) => {
columns: series.columns,
multiSelect: table.multiSelect,
pages: pages,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["series"],
reverse: table.reverse["series"],
totalItems: total,
};

Expand All @@ -139,8 +137,6 @@ export const loadSeriesIntoTable = (): AppThunk => (dispatch, getState) => {

tableData = {
...tableData,
sortBy: "title",
reverse: "ASC",
multiSelect: multiSelect,
};
}
Expand All @@ -160,8 +156,8 @@ export const loadRecordingsIntoTable = (): AppThunk => (dispatch, getState) => {
columns: recordings.columns,
multiSelect: table.multiSelect,
pages: pages,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["recordings"],
reverse: table.reverse["recordings"],
rows: resource.map((obj) => {
return { ...obj, selected: false }
}),
Expand All @@ -173,8 +169,6 @@ export const loadRecordingsIntoTable = (): AppThunk => (dispatch, getState) => {

tableData = {
...tableData,
sortBy: "status",
reverse: "ASC",
multiSelect: multiSelect,
};
}
Expand All @@ -198,8 +192,8 @@ export const loadJobsIntoTable = (): AppThunk => (dispatch, getState) => {
columns: jobs.columns,
multiSelect: table.multiSelect,
pages: pages,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["jobs"],
reverse: table.reverse["jobs"],
totalItems: total,
};

Expand All @@ -208,8 +202,6 @@ export const loadJobsIntoTable = (): AppThunk => (dispatch, getState) => {

tableData = {
...tableData,
sortBy: "id",
reverse: "ASC",
multiSelect: multiSelect,
};
}
Expand All @@ -232,8 +224,8 @@ export const loadServersIntoTable = (): AppThunk => (dispatch, getState) => {
columns: servers.columns,
multiSelect: table.multiSelect,
pages: pages,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["servers"],
reverse: table.reverse["servers"],
totalItems: total,
};

Expand All @@ -242,8 +234,6 @@ export const loadServersIntoTable = (): AppThunk => (dispatch, getState) => {

tableData = {
...tableData,
sortBy: "online",
reverse: "ASC",
multiSelect: multiSelect,
};
}
Expand All @@ -267,17 +257,15 @@ export const loadServicesIntoTable = (): AppThunk => (dispatch, getState) => {
resource: "services",
columns: services.columns,
multiSelect: table.multiSelect,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["services"],
reverse: table.reverse["services"],
};

if (table.resource !== "services") {
const multiSelect = servicesTableConfig.multiSelect;

tableData = {
...tableData,
sortBy: "status",
reverse: "ASC",
multiSelect: multiSelect,
};
}
Expand All @@ -301,8 +289,8 @@ export const loadUsersIntoTable = (): AppThunk => (dispatch, getState) => {
columns: users.columns,
multiSelect: table.multiSelect,
pages: pages,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["users"],
reverse: table.reverse["users"],
totalItems: total,
};

Expand All @@ -311,8 +299,6 @@ export const loadUsersIntoTable = (): AppThunk => (dispatch, getState) => {

tableData = {
...tableData,
sortBy: "name",
reverse: "ASC",
multiSelect: multiSelect,
};
}
Expand All @@ -335,8 +321,8 @@ export const loadGroupsIntoTable = (): AppThunk => (dispatch, getState) => {
columns: groups.columns,
multiSelect: table.multiSelect,
pages: pages,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["groups"],
reverse: table.reverse["groups"],
totalItems: total,
};

Expand All @@ -345,8 +331,6 @@ export const loadGroupsIntoTable = (): AppThunk => (dispatch, getState) => {

tableData = {
...tableData,
sortBy: "name",
reverse: "ASC",
multiSelect: multiSelect,
};
}
Expand All @@ -369,17 +353,15 @@ export const loadAclsIntoTable = (): AppThunk => (dispatch, getState) => {
columns: acls.columns,
multiSelect: table.multiSelect,
pages: pages,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["acls"],
reverse: table.reverse["acls"],
totalItems: total,
};

if (table.resource !== "acls") {
const multiSelect = aclsTableConfig.multiSelect;
tableData = {
...tableData,
sortBy: "name",
reverse: "ASC",
multiSelect: multiSelect,
};
}
Expand All @@ -402,8 +384,8 @@ export const loadThemesIntoTable = (): AppThunk => (dispatch, getState) => {
columns: themes.columns,
multiSelect: table.multiSelect,
pages: pages,
sortBy: table.sortBy,
reverse: table.reverse,
sortBy: table.sortBy["themes"],
reverse: table.reverse["themes"],
totalItems: total,
};

Expand All @@ -412,8 +394,6 @@ export const loadThemesIntoTable = (): AppThunk => (dispatch, getState) => {

tableData = {
...tableData,
sortBy: "name",
reverse: "ASC",
multiSelect: multiSelect,
};
}
Expand Down
Loading