Skip to content

Commit

Permalink
IFS Proto Side by Side: Includes filter separate
Browse files Browse the repository at this point in the history
  • Loading branch information
@chloerice
chloerice committed Sep 30, 2024
1 parent 7752851 commit 5911749
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 68 deletions.
152 changes: 122 additions & 30 deletions polaris-react/playground/OrdersPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import {
IndexFiltersMode,
Badge,
Text,
TextField,
} from '../src';

import {orders} from './orders';
Expand Down Expand Up @@ -408,11 +409,20 @@ function OrdersIndexTableWithFilters(
const [selectedView, setSelectedView] = useState(0);
const [sortSelected, setSortSelected] = useState(['order desc']);
const [queryValue, setQueryValue] = useState('');
const [contains, setContains] = useState<string>('');
const [status, setStatus] = useState<string[]>([]);
const [paymentStatus, setPaymentStatus] = useState<string[]>([]);
const [fulfillmentStatus, setFulfillmentStatus] = useState<string[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [filteredOrders, setFilteredOrders] = useState(orders);
const [tempPersistedSearch, setTempPersistedSearch] = useState<string[]>([
'',
'',
'',
'',
'',
]);

const [savedViewFilters, setSavedViewFilters] = useState<SavedViewFilter[][]>(
[
[],
Expand Down Expand Up @@ -512,6 +522,7 @@ function OrdersIndexTableWithFilters(
};

const handleFilterOrders = (nextFilters: {
contains?: string;
queryValue?: string;
paymentStatus?: string[];
fulfillmentStatus?: string[];
Expand All @@ -523,6 +534,8 @@ function OrdersIndexTableWithFilters(
? nextFilters.queryValue
: queryValue;

const nextContains =
nextFilters.contains !== undefined ? nextFilters.contains : contains;
const nextStatus =
nextFilters.status !== undefined ? nextFilters.status : status;
const nextPaymentStatus =
Expand All @@ -534,11 +547,16 @@ function OrdersIndexTableWithFilters(
? nextFilters.fulfillmentStatus
: fulfillmentStatus;

const containsSet = new Set(nextContains);
const statusSet = new Set(nextStatus);
const paymentStatusSet = new Set(nextPaymentStatus);
const fulfillmentStatusSet = new Set(nextFulfillmentStatus);
const result = orders.filter((order) => {
const matchesQueryValue = hasTextValueMatches(nextQueryValue, order);
const matchesContains = hasTextValueMatches(
preProcessText(nextContains),
order,
);

const matchesStatus = hasArrayValueMatches(
new Set([order.status]),
Expand All @@ -558,6 +576,7 @@ function OrdersIndexTableWithFilters(
setLoading(false);
return (
matchesQueryValue &&
matchesContains &&
matchesPaymentStatus &&
matchesFulfillmentStatus &&
matchesStatus
Expand All @@ -580,6 +599,16 @@ function OrdersIndexTableWithFilters(
handleFilterOrders({queryValue: ''});
};

const handleContainsChange = (value: string) => {
setContains(value);
handleFilterOrders({contains: value});
};

const handleContainsRemove = (value: string[]) => {
setContains('');
handleFilterOrders({contains: ''});
};

const handlePaymentStatusChange = (value: string[]) => {
setPaymentStatus(value);
handleFilterOrders({paymentStatus: value});
Expand Down Expand Up @@ -618,6 +647,13 @@ function OrdersIndexTableWithFilters(
emptyValue: '',
label: 'Include',
},
contains: {
set: setContains,
change: handleContainsChange,
remove: handleContainsRemove,
emptyValue: '',
label: 'Include',
},
status: {
set: setStatus,
change: handleStatusChange,
Expand Down Expand Up @@ -668,6 +704,7 @@ function OrdersIndexTableWithFilters(
};

const handleChangeFilters = (nextFilterValues: {
contains?: string;
queryValue?: string;
paymentStatus?: string[];
fulfillmentStatus?: string[];
Expand All @@ -684,11 +721,13 @@ function OrdersIndexTableWithFilters(

const handleResetToSavedFilters = (view: number) => {
const nextFilters: {
contains: string;
queryValue: string;
paymentStatus: string[];
fulfillmentStatus: string[];
status: string[];
} = {
contains: '',
queryValue: '',
paymentStatus: [],
fulfillmentStatus: [],
Expand All @@ -713,6 +752,7 @@ function OrdersIndexTableWithFilters(

const handleClearFilters = () => {
handleChangeFilters({
contains: '',
queryValue: '',
paymentStatus: [],
fulfillmentStatus: [],
Expand Down Expand Up @@ -746,6 +786,21 @@ function OrdersIndexTableWithFilters(
// ---- Filters

const filters: FilterInterface[] = [
{
key: 'contains',
label: handlers.contains.label,
filter: (
<TextField
autoFocus
labelHidden
type="text"
autoComplete="off"
label={handlers.contains.label}
value={contains}
onChange={handleContainsChange}
/>
),
},
{
key: 'paymentStatus',
value: paymentStatus,
Expand Down Expand Up @@ -809,6 +864,8 @@ function OrdersIndexTableWithFilters(
const appliedFilters: AppliedFilterInterface[] = [];

Object.entries({
contains,
queryValue,
status,
paymentStatus,
fulfillmentStatus,
Expand All @@ -824,56 +881,78 @@ function OrdersIndexTableWithFilters(
value,
label: getHumanReadableValue(handlers[key].label, value),
unsavedChanges: selectedView === 0 ? true : isUnsaved(value, savedValue),
onRemove: key === 'queryValue' ? undefined : handlers[key].remove,
onRemove: handlers[key].remove,
});
});

// const appliedFiltersWithQuery = [
// ...appliedFilters,
// {
// key: 'queryValue',
// value: queryValue,
// label: handlers.queryValue.label,
// onRemove: handlers.queryValue.remove,
// },
// ];

const appliedFiltersWithoutQuery = appliedFilters.filter(
({key}) => key !== 'queryValue',
);

const savedViewFiltersWithoutQuery = savedViewFilters.filter(
({key}) => key !== 'queryValue',
);

const appliedFilterMatchesSavedFilter = (
appliedFilter: AppliedFilterInterface,
) => {
const savedFilter = savedViewFilters[selectedView].find(
const savedFilter = savedViewFiltersWithoutQuery[selectedView]?.find(
(savedFilter) => savedFilter.key === appliedFilter.key,
);

if (!savedFilter) {
return false;
} else if (typeof appliedFilter.value === 'string') {
return appliedFilter.value === savedFilter.value;
} else {
} else if (Array.isArray(appliedFilter.value)) {
const hasSameArrayValue =
new Set(savedFilter.value).difference(new Set(appliedFilter.value))
.size === 0;

return hasSameArrayValue;
} else {
return true;
}
};

const appliedFiltersWithQuery = [
...appliedFilters,
{
key: 'queryValue',
value: queryValue,
unsavedChanges:
queryValue && selectedView === 0
? true
: queryValue &&
queryValue !==
savedViewFilters[selectedView]?.find(
({key}) => key === 'queryValue',
)?.value,
},
];

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

const isAllViewAndFiltersAreApplied =
selectedView === 0 && appliedFiltersWithoutQuery.length > 0;

const appliedFilterCountDoesNotEqualSavedFilterCount =
appliedFiltersWithoutQuery.length !==
savedViewFiltersWithoutQuery[selectedView]?.length;

const appliedFiltersDoNotMatchSavedFilters =
!appliedFiltersWithoutQuery.every(appliedFilterMatchesSavedFilter);

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

console.table({
hasUnsavedFilterChange,
isAllViewAndFiltersAreApplied,
countDoesNotEqual:
selectedView > 0 && appliedFilterCountDoesNotEqualSavedFilterCount,
filtersDoNotMatch: selectedView > 0 && appliedFiltersDoNotMatchSavedFilters,
});

console.table(savedViewFilters[selectedView]);

const hasUnsavedChanges = hasUnsavedSortChange || hasUnsavedFilterChange;

Expand All @@ -884,10 +963,11 @@ function OrdersIndexTableWithFilters(

const getFiltersToSave = () => {
return Object.entries({
contains,
queryValue,
fulfillmentStatus,
paymentStatus,
status,
paymentStatus,
fulfillmentStatus,
})
.filter(([, value]) => value !== undefined)
.map(([key, value]) => {
Expand All @@ -900,7 +980,7 @@ function OrdersIndexTableWithFilters(
const previousSortSelected = sortSelected[0];
let nextFilters;

if (previousView === 0 && hasUnsavedChanges) {
if ((previousView === 0 && hasUnsavedChanges) || queryValue) {
nextFilters = getFiltersToSave();
}

Expand All @@ -920,8 +1000,10 @@ function OrdersIndexTableWithFilters(

const handleDeleteView = (index: number) => async () => {
const nextViewNames = [...viewNames];
const nextTempPersistedSearch = [...tempPersistedSearch];
const nextSavedViewFilters = [...savedViewFilters];
nextViewNames.splice(index, 1);
nextTempPersistedSearch.splice(index, 1);
nextSavedViewFilters.splice(index, 1);
setSavedViewFilters(nextSavedViewFilters);
setViewNames(nextViewNames);
Expand All @@ -945,6 +1027,7 @@ function OrdersIndexTableWithFilters(
setSavedViewFilters((filters) => [...filters, duplicateViewFilters]);
const nextAppliedFilters = {
queryValue: '',
contains: '',
status: [],
paymentStatus: [],
fulfillmentStatus: [],
Expand All @@ -953,7 +1036,12 @@ function OrdersIndexTableWithFilters(
duplicateViewFilters.forEach(({key, value}) => {
nextAppliedFilters[key] = value;
});

setViewNames((names) => [...names, name]);
setSavedSortSelected((currentSavedSortSelected) => [
...currentSavedSortSelected,
'order desc',
]);
await sleep(250);
setSelectedView(duplicateViewIndex);
setLoading(false);
Expand Down Expand Up @@ -996,16 +1084,17 @@ function OrdersIndexTableWithFilters(
sortSelected[0] !== savedSortSelected[0]);

const nextFilters = shouldSaveAppliedFiltersAsNew
? {queryValue, status, paymentStatus, fulfillmentStatus}
? getFiltersToSave()
: {
contains: '',
queryValue: '',
status: [],
paymentStatus: [],
fulfillmentStatus: [],
};

if (shouldSaveAppliedFiltersAsNew) {
handleSaveViewFilters(newViewIndex);
handleSaveViewFilters(newViewIndex, nextFilters);
} else {
handleClearFilters();
setSavedViewFilters((filters) => [...filters, []]);
Expand Down Expand Up @@ -1059,6 +1148,8 @@ function OrdersIndexTableWithFilters(
handleResetToSavedFilters(selectedView);
console.log('cancelled -- resetting to saved');
}

setQueryValue('');
};

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

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

const queryPlaceholder = `Search ${viewNames[selectedView]?.toLowerCase()}`;
Expand Down
Loading

0 comments on commit 5911749

Please sign in to comment.