Skip to content

Commit

Permalink
Only persist unsaved changes in session in All view
Browse files Browse the repository at this point in the history
  • Loading branch information
@chloerice
chloerice committed Sep 12, 2024
1 parent 3168958 commit 653c46b
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 57 deletions.
124 changes: 68 additions & 56 deletions polaris-react/playground/OrdersPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -388,13 +388,13 @@ function OrdersIndexTableWithFilters(
},
) {
const sortOptions: IndexFiltersProps['sortOptions'] = [
{label: 'Order', value: 'order asc', directionLabel: 'Ascending'},
{label: 'Order', value: 'order desc', directionLabel: 'Ascending'},
{label: 'Order', value: 'order desc', directionLabel: 'Descending'},
{label: 'Customer', value: 'customer asc', directionLabel: 'A-Z'},
{label: 'Customer', value: 'customer desc', directionLabel: 'A-Z'},
{label: 'Customer', value: 'customer desc', directionLabel: 'Z-A'},
{label: 'Date', value: 'date asc', directionLabel: 'A-Z'},
{label: 'Date', value: 'date desc', directionLabel: 'A-Z'},
{label: 'Date', value: 'date desc', directionLabel: 'Z-A'},
{label: 'Total', value: 'total asc', directionLabel: 'Ascending'},
{label: 'Total', value: 'total desc', directionLabel: 'Ascending'},
{label: 'Total', value: 'total desc', directionLabel: 'Descending'},
];

Expand All @@ -406,7 +406,7 @@ function OrdersIndexTableWithFilters(
'Archived',
]);
const [selectedView, setSelectedView] = useState(0);
const [sortSelected, setSortSelected] = useState(['order asc']);
const [sortSelected, setSortSelected] = useState(['order desc']);
const [queryValue, setQueryValue] = useState('');
const [status, setStatus] = useState<string[]>([]);
const [paymentStatus, setPaymentStatus] = useState<string[]>([]);
Expand Down Expand Up @@ -458,11 +458,11 @@ function OrdersIndexTableWithFilters(
);

const [savedSortSelected, setSavedSortSelected] = useState([
'order asc',
'order asc',
'order asc',
'order asc',
'order asc',
'order desc',
'order desc',
'order desc',
'order desc',
'order desc',
]);

const {mode, setMode} = useSetIndexFiltersMode(IndexFiltersMode.Default);
Expand Down Expand Up @@ -628,30 +628,6 @@ function OrdersIndexTableWithFilters(
handleFilterOrders({status: []});
};

function isEmpty(value: string | string[]) {
return Array.isArray(value) ? value.length === 0 : value === '';
}

const isUnsaved = (
value?: string | string[],
savedValue?: string | string[],
) => {
if (value === undefined) return false;
if (value.length && savedValue === undefined) return true;

const isArray = Array.isArray(value) && Array.isArray(status);
const isString =
typeof value === 'string' && typeof savedValue === 'string';

if (isString) return value !== savedValue;
if (isArray)
return !(
savedValue?.length &&
value.length === savedValue.length &&
value.every((status) => savedValue.indexOf(status) > -1)
);
};

const handlers = {
queryValue: {
set: setQueryValue,
Expand Down Expand Up @@ -683,6 +659,32 @@ function OrdersIndexTableWithFilters(
},
};

// ---- Applied filter event handlers ----

function isEmpty(value: string | string[]) {
return Array.isArray(value) ? value.length === 0 : value === '';
}

const isUnsaved = (
value?: string | string[],
savedValue?: string | string[],
) => {
if (value === undefined) return false;
if (value.length && savedValue === undefined) return true;

const isArray = Array.isArray(value) && Array.isArray(status);
const isString =
typeof value === 'string' && typeof savedValue === 'string';

if (isString) return value !== savedValue;
if (isArray)
return !(
savedValue?.length &&
value.length === savedValue.length &&
value.every((status) => savedValue.indexOf(status) > -1)
);
};

const handleChangeFilters = (nextFilterValues: {
queryValue?: string;
paymentStatus?: string[];
Expand All @@ -698,7 +700,6 @@ function OrdersIndexTableWithFilters(
handleFilterOrders(nextFilterValues);
};

// ---- Applied filter event handlers ----
const handleResetToSavedFilters = (view: number) => {
const nextFilters: {
queryValue: string;
Expand All @@ -720,6 +721,7 @@ function OrdersIndexTableWithFilters(
`resetting to ---
`,
nextFilters,
[savedSortSelected[view]],
);

setSortSelected([savedSortSelected[view]]);
Expand Down Expand Up @@ -758,7 +760,8 @@ function OrdersIndexTableWithFilters(

return `${label}: ${humanReadableValue}`;
};
// ----

// ---- Filters

const filters: FilterInterface[] = [
{
Expand Down Expand Up @@ -846,7 +849,7 @@ function OrdersIndexTableWithFilters(
value,
label: getHumanReadableValue(handlers[key].label, value),
unsavedChanges: selectedView === 0 ? true : isUnsaved(value, savedValue),
onRemove: handlers[key].remove,
onRemove: key === 'queryValue' ? undefined : handlers[key].remove,
});
});

Expand All @@ -870,13 +873,19 @@ function OrdersIndexTableWithFilters(
}
};

const hasUnsavedChanges =
sortSelected[0] !== savedSortSelected[selectedView] ||
const hasUnsavedSortChange =
(selectedView === 0 && sortSelected[0] !== 'order desc') ||
sortSelected[0] !== savedSortSelected[selectedView];

const hasUnsavedFilterChange =
(selectedView === 0 && appliedFilters.length > 0) ||
(!savedViewFilters[selectedView] && appliedFilters.length > 0) ||
(appliedFilters.length === 0 &&
savedViewFilters[selectedView]?.length > 0) ||
!appliedFilters.every(appliedFilterMatchesSavedFilter);

const hasUnsavedChanges = hasUnsavedSortChange || hasUnsavedFilterChange;

// ---- View event handlers
const sleep = (ms: number) => {
return new Promise((resolve) => setTimeout(resolve, ms));
Expand All @@ -897,27 +906,25 @@ function OrdersIndexTableWithFilters(

const handleSelectView = async (view: number) => {
const previousView = selectedView;
const previousSortSelected = sortSelected[0];
let nextFilters;
if (previousView === 0 && (queryValue || hasUnsavedChanges)) {

if (previousView === 0 && hasUnsavedChanges) {
nextFilters = getFiltersToSave();
} else if (queryValue) {
nextFilters = [
...savedViewFilters[previousView],
{
key: 'queryValue',
value: queryValue,
label: handlers.queryValue.label,
},
];
}

setQueryValue('');
setMode(IndexFiltersMode.Default);
setSelectedView(view);
setLoading(true);
handleResetToSavedFilters(view);
if (nextFilters) await handleSaveViewFilters(previousView, nextFilters);
else await sleep(250);
if (nextFilters) {
await handleSaveViewFilters(
previousView,
nextFilters,
previousSortSelected,
);
} else await sleep(250);
setLoading(false);
};

Expand Down Expand Up @@ -1014,7 +1021,7 @@ function OrdersIndexTableWithFilters(
setSavedViewFilters((filters) => [...filters, []]);
setSavedSortSelected((currentSavedSortSelected) => [
...currentSavedSortSelected,
'order asc',
'order desc',
]);
}

Expand Down Expand Up @@ -1052,13 +1059,19 @@ function OrdersIndexTableWithFilters(
const handleCancel = () => {
if (!hasUnsavedChanges) {
console.log('cancelled -- no unsaved changes');
// } else if (selectedView === 0) {
// console.log('cancelled -- persisting all');
} else if (selectedView === 0) {
console.log('cancelled -- clearing all');
const nextSavedSortSelected = [...savedSortSelected];
nextSavedSortSelected[0] = 'order desc';
handleClearFilters();
setSortSelected(['order desc']);
setSavedSortSelected(nextSavedSortSelected);
} else {
handleResetToSavedFilters(selectedView);
console.log('cancelled -- resetting to saved');
}
};

const tabs: TabProps[] = viewNames.map((name, index) => {
return {
index,
Expand Down Expand Up @@ -1095,7 +1108,6 @@ function OrdersIndexTableWithFilters(

const cancelAction: IndexFiltersProps['cancelAction'] = {
onAction: handleCancel,
disabled: !hasUnsavedChanges,
};

const queryPlaceholder = `Search ${viewNames[selectedView]?.toLowerCase()}`;
Expand Down Expand Up @@ -1124,7 +1136,7 @@ function OrdersIndexTableWithFilters(
onClearAll={handleClearFilters}
mode={mode}
setMode={setMode}
sortUnsaved={sortSelected[0] !== savedSortSelected[selectedView]}
sortUnsaved={hasUnsavedSortChange}
/>
<Table orders={filteredOrders} />
</Card>
Expand Down
4 changes: 3 additions & 1 deletion polaris-react/src/components/Filters/components/FiltersBar/FiltersBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,9 @@ export function FiltersBar({
label={appliedFilter?.label || pinnedFilter.label}
filterKey={filterKey}
selected={appliedFilterKeys?.includes(filterKey)}
onRemove={handleFilterPillRemove}
onRemove={
appliedFilter?.onRemove ? handleFilterPillRemove : undefined
}
disabled={pinnedFilter.disabled || disableFilters}
closeOnChildOverlayClick={closeOnChildOverlayClick}
/>
Expand Down

0 comments on commit 653c46b

Please sign in to comment.