diff --git a/src/components/ResultsView.tsx b/src/components/ResultsView.tsx index 098f6d0..34e8834 100644 --- a/src/components/ResultsView.tsx +++ b/src/components/ResultsView.tsx @@ -314,8 +314,13 @@ const ResultsView: ResultsViewComponent = ({ const [columnFilters, setColumnFilters] = useState(settings.columnFilters); const [searchFilter, setSearchFilter] = useState(settings.searchFilter); const [showInterface, setShowInterface] = useState(settings.showInterface); + const [hiddenColumns, setHiddenColumns] = useState(settings.hiddenColumns); const [showMenuIcons, setShowMenuIcons] = useState(false); + const visibleColumns = useMemo(() => { + return columns.filter(column => !hiddenColumns.includes(column.key)); + }, [columns, hiddenColumns]); + const { allProcessedResults, paginatedResults } = useMemo(() => { return postProcessResults(results, { activeSort, @@ -360,6 +365,7 @@ const ResultsView: ResultsViewComponent = ({ const [isEditColumnSort, setIsEditColumnSort] = useState(false); const [isEditColumnFilter, setIsEditColumnFilter] = useState(false); const [isEditSearchFilter, setIsEditSearchFilter] = useState(false); + const [isEditHiddenColumns, setIsEditHiddenColumns] = useState(false); const [layout, setLayout] = useState(settings.layout); const layoutMode = useMemo( @@ -371,8 +377,9 @@ const ResultsView: ResultsViewComponent = ({ searchFilter || columnFilters.length || random.count || + hiddenColumns.length || (activeSort.length && layout.mode !== "table"), // indicator is on ResultHeader - [searchFilter, columnFilters, random, activeSort, layout.mode] + [searchFilter, columnFilters, random, activeSort, layout.mode, hiddenColumns] ); const onViewChange = (view: (typeof views)[number], i: number) => { const newViews = views.map((v, j) => (i === j ? view : v)); @@ -405,6 +412,23 @@ const ResultsView: ResultsViewComponent = ({ (view) => VIEWS[view.mode]?.value === true ); + const onHiddenColumnsChange = (newHiddenColumns: string[]) => { + setHiddenColumns(newHiddenColumns); + if (preventSavingSettings) return; + const hiddenColumnsNode = getSubTree({ + key: "hiddenColumns", + parentUid: settings.resultNodeUid, + }); + hiddenColumnsNode.children.forEach((c) => deleteBlock(c.uid)); + newHiddenColumns.forEach((columnKey, order) => + createBlock({ + parentUid: hiddenColumnsNode.uid, + node: { text: columnKey }, + order, + }) + ); + }; + return (
{ const options = s.options === "columns" - ? columns.map((c) => c.key) + ? visibleColumns.map((c) => c.key) : s.options.slice(); return (
))} c.key) .filter((c) => !activeSort.some((as) => as.key === c))} transformItem={(k) => @@ -663,7 +688,7 @@ const ResultsView: ResultsViewComponent = ({ ButtonProps={{ text: "Choose Column", intent: "primary", - disabled: columns.length === activeSort.length, + disabled: visibleColumns.length === activeSort.length, }} onItemSelect={(column) => { resultViewSetActiveSort([ @@ -689,7 +714,7 @@ const ResultsView: ResultsViewComponent = ({
c.key)} + items={visibleColumns.map((c) => c.key)} transformItem={(k) => k.length > 10 ? `${k.slice(0, 7)}...` : k } @@ -825,7 +850,7 @@ const ResultsView: ResultsViewComponent = ({ intent="primary" onClick={() => { const newFilter = { - key: columns[0].key, + key: visibleColumns[0].key, type: SUPPORTED_COLUMN_FILTER_TYPES[0].id, value: [""], uid: window.roamAlphaAPI.util.generateUID(), @@ -884,7 +909,7 @@ const ResultsView: ResultsViewComponent = ({ - {views.map(({ column, mode, value }, i) => ( + {views.filter(({ column }) => visibleColumns.some(c => c.key === column)).map(({ column, mode, value }, i) => ( {column} @@ -942,6 +967,31 @@ const ResultsView: ResultsViewComponent = ({
+ ) : isEditHiddenColumns ? ( +
+ setIsEditHiddenColumns(false)} + text="Hide Columns" + /> +
+ {columns.map(({ key }) => ( +
+ {key} + { + const isVisible = (e.target as HTMLInputElement).checked; + if (isVisible) { + onHiddenColumnsChange(hiddenColumns.filter(col => col !== key)); + } else { + onHiddenColumnsChange([...hiddenColumns, key]); + } + }} + /> +
+ ))} +
+
) : ( {onEdit && ( @@ -975,6 +1025,14 @@ const ResultsView: ResultsViewComponent = ({ setIsEditViews(true); }} /> + { + setIsEditHiddenColumns(true); + }} + /> ) : layoutMode === "bar" ? ( ) : layoutMode === "timeline" ? ( @@ -1167,7 +1225,7 @@ const ResultsView: ResultsViewComponent = ({ data={allProcessedResults} layout={layout} onQuery={() => onRefresh(true)} - resultKeys={columns} + resultKeys={visibleColumns} parentUid={parentUid} views={views} activeSort={activeSort} diff --git a/src/utils/parseResultSettings.ts b/src/utils/parseResultSettings.ts index f7e0a3c..e67a7b2 100644 --- a/src/utils/parseResultSettings.ts +++ b/src/utils/parseResultSettings.ts @@ -114,6 +114,10 @@ const parseResultSettings = ( tree: resultNode.children, key: "layout", }); + const hiddenColumnsNode = getSubTree({ + tree: resultNode.children, + key: "hiddenColumns", + }); const layout = Object.fromEntries( layoutNode.children .filter((c) => c.children.length) @@ -161,6 +165,7 @@ const parseResultSettings = ( savedViewData[column]?.mode || (column === "text" ? "link" : "plain"), value: savedViewData[column]?.value || "", })), + hiddenColumns: hiddenColumnsNode.children.map((c) => c.text), random, pageSize, layout,