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

Restore reset button for edit table view modal #1052

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

Restore reset button for edit table view modal #1052

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
40 changes: 39 additions & 1 deletion src/components/shared/EditTableViewModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,16 @@ import { DragDropContext, Droppable, OnDragEndResponder, Draggable as Draggablee
import { availableHotkeys } from "../../configs/hotkeysConfig";
import { useHotkeys } from "react-hotkeys-hook";
import { useAppDispatch, useAppSelector } from "../../store";
import { TableColumn } from "../../configs/tableConfigs/aclsTableConfig";
import { aclsTableConfig, TableColumn } from "../../configs/tableConfigs/aclsTableConfig";
import { eventsTableConfig } from "../../configs/tableConfigs/eventsTableConfig";
import { seriesTableConfig } from "../../configs/tableConfigs/seriesTableConfig";
import { recordingsTableConfig } from "../../configs/tableConfigs/recordingsTableConfig";
import { jobsTableConfig } from "../../configs/tableConfigs/jobsTableConfig";
import { serversTableConfig } from "../../configs/tableConfigs/serversTableConfig";
import { servicesTableConfig } from "../../configs/tableConfigs/servicesTableConfig";
import { usersTableConfig } from "../../configs/tableConfigs/usersTableConfig";
import { groupsTableConfig } from "../../configs/tableConfigs/groupsTableConfig";
import { themesTableConfig } from "../../configs/tableConfigs/themesTableConfig";

/**
* This component renders the modal for editing which columns are shown in the table
Expand Down Expand Up @@ -84,6 +93,32 @@ const EditTableViewModal = ({
close();
};

// Reset columns to how they were before the user made any changes ever
const resetToInitialConfig = () => {
const initialConfig = getConfigByResource(resource);
setActiveColumns(initialConfig?.columns.filter((column) => !column.deactivated) ?? []);
setDeactivatedColumns(initialConfig?.columns.filter((column) => column.deactivated) ?? []);
}

const getConfigByResource = (resource: string) => {
switch (resource) {
case "events": return eventsTableConfig;
case "series": return seriesTableConfig;
case "recordings": return recordingsTableConfig;
case "jobs": return jobsTableConfig;
case "servers": return serversTableConfig;
case "services": return servicesTableConfig;
case "users": return usersTableConfig;
case "groups": return groupsTableConfig;
case "acls": return aclsTableConfig;
case "themes": return themesTableConfig;
default: {
console.warn("Resource of type " + resource + " is undefined for tableConfigs.")
return undefined;
}
}
}

// change column order based on where column was dragged and dropped
const onDragEnd: OnDragEndResponder = (result) => {
// dropped outside the list
Expand Down Expand Up @@ -253,6 +288,9 @@ const EditTableViewModal = ({
<button onClick={() => save()} className="submit active">
{t("SAVE") /* Save As Default */}
</button>
<button onClick={() => resetToInitialConfig()} className="cancel active">
{t("RESET") /* Reset saved setting */}
</button>
</footer>
</section>
</>
Expand Down
6 changes: 4 additions & 2 deletions src/slices/tableSlice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,13 @@ export function isSeries(row: Row | Event | Series | Recording | Server | Job |
// TODO: Improve row typing. While this somewhat correctly reflects the current state of our code, it is rather annoying to work with.
export type Row = { selected: boolean } & ( Event | Series | Recording | Server | Job | Service | UserResult | Group | AclResult | ThemeDetailsType )

export type Resource = "events" | "series" | "recordings" | "jobs" | "servers" | "services" | "users" | "groups" | "acls" | "themes"

type TableState = {
status: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
error: SerializedError | null,
multiSelect: boolean,
resource: string,
resource: Resource,
pages: Page[],
columns: TableConfig["columns"],
sortBy: string,
Expand All @@ -90,7 +92,7 @@ const initialState: TableState = {
status: 'uninitialized',
error: null,
multiSelect: false,
resource: "",
resource: "events",
pages: [],
columns: [],
sortBy: "date",
Expand Down
20 changes: 10 additions & 10 deletions src/thunks/tableThunks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const loadEventsIntoTable = (): AppThunk => async (dispatch, getState) =>
const pages = calculatePages(total / pagination.limit, pagination.offset);

let tableData = {
resource: "events",
resource: "events" as const,
rows: resource,
columns: events.columns,
multiSelect: table.multiSelect,
Expand Down Expand Up @@ -124,7 +124,7 @@ export const loadSeriesIntoTable = (): AppThunk => (dispatch, getState) => {
const pages = calculatePages(total / pagination.limit, pagination.offset);

let tableData = {
resource: "series",
resource: "series" as const,
rows: resource,
columns: series.columns,
multiSelect: table.multiSelect,
Expand Down Expand Up @@ -156,7 +156,7 @@ export const loadRecordingsIntoTable = (): AppThunk => (dispatch, getState) => {
const pages = calculatePages(total / pagination.limit, pagination.offset);

let tableData = {
resource: "recordings",
resource: "recordings" as const,
columns: recordings.columns,
multiSelect: table.multiSelect,
pages: pages,
Expand Down Expand Up @@ -191,7 +191,7 @@ export const loadJobsIntoTable = (): AppThunk => (dispatch, getState) => {
const pages = calculatePages(total / pagination.limit, pagination.offset);

let tableData = {
resource: "jobs",
resource: "jobs" as const,
rows: resource.map((obj) => {
return { ...obj, selected: false }
}),
Expand Down Expand Up @@ -225,7 +225,7 @@ export const loadServersIntoTable = (): AppThunk => (dispatch, getState) => {
const pages = calculatePages(total / pagination.limit, pagination.offset);

let tableData = {
resource: "servers",
resource: "servers" as const,
rows: resource.map((obj) => {
return { ...obj, selected: false }
}),
Expand Down Expand Up @@ -264,7 +264,7 @@ export const loadServicesIntoTable = (): AppThunk => (dispatch, getState) => {
}),
pages: pages,
totalItems: total,
resource: "services",
resource: "services" as const,
columns: services.columns,
multiSelect: table.multiSelect,
sortBy: table.sortBy,
Expand Down Expand Up @@ -294,7 +294,7 @@ export const loadUsersIntoTable = (): AppThunk => (dispatch, getState) => {
const pages = calculatePages(total / pagination.limit, pagination.offset);

let tableData = {
resource: "users",
resource: "users" as const,
rows: resource.map((obj) => {
return { ...obj, selected: false }
}),
Expand Down Expand Up @@ -328,7 +328,7 @@ export const loadGroupsIntoTable = (): AppThunk => (dispatch, getState) => {
const pages = calculatePages(total / pagination.limit, pagination.offset);

let tableData = {
resource: "groups",
resource: "groups" as const,
rows: resource.map((obj) => {
return { ...obj, selected: false }
}),
Expand Down Expand Up @@ -362,7 +362,7 @@ export const loadAclsIntoTable = (): AppThunk => (dispatch, getState) => {
const pages = calculatePages(total / pagination.limit, pagination.offset);

let tableData = {
resource: "acls",
resource: "acls" as const,
rows: resource.map((obj) => {
return { ...obj, selected: false }
}),
Expand Down Expand Up @@ -395,7 +395,7 @@ export const loadThemesIntoTable = (): AppThunk => (dispatch, getState) => {
const pages = calculatePages(total / pagination.limit, pagination.offset);

let tableData = {
resource: "themes",
resource: "themes" as const,
rows: resource.map((obj) => {
return { ...obj, selected: false }
}),
Expand Down
Loading