Skip to content

Commit

Permalink
[IndexFilters] Prototype solution 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@chloerice
chloerice committed Sep 11, 2024
1 parent e158a9c commit cc77341
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 95 deletions.
110 changes: 40 additions & 70 deletions polaris-react/playground/OrdersPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,6 @@ function OrdersIndexTableWithFilters(
const [queryValue, setQueryValue] = useState('');
const [status, setStatus] = useState<string[]>([]);
const [paymentStatus, setPaymentStatus] = useState<string[]>([]);
const [contains, setContains] = useState<string>('');
const [fulfillmentStatus, setFulfillmentStatus] = useState<string[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [filteredOrders, setFilteredOrders] = useState(orders);
Expand Down Expand Up @@ -464,9 +463,15 @@ function OrdersIndexTableWithFilters(
],
);

const {mode, setMode} = useSetIndexFiltersMode(
props?.withFilteringByDefault ? IndexFiltersMode.Filtering : undefined,
);
const [savedSortSelected, setSavedSortSelected] = useState([
'order asc',
'order asc',
'order asc',
'order asc',
'order asc',
]);

const {mode, setMode} = useSetIndexFiltersMode(IndexFiltersMode.Default);

const preProcessText = (input: string) => {
// Insert a space between numbers and letters if they are adjacent
Expand Down Expand Up @@ -513,7 +518,6 @@ function OrdersIndexTableWithFilters(
};

const handleFilterOrders = (nextFilters: {
contains?: string;
queryValue?: string;
paymentStatus?: string[];
fulfillmentStatus?: string[];
Expand All @@ -525,8 +529,6 @@ 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 @@ -538,16 +540,11 @@ 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 @@ -566,7 +563,6 @@ function OrdersIndexTableWithFilters(

// if (
// matchesQueryValue &&
// matchesContains &&
// matchesPaymentStatus &&
// matchesFulfillmentStatus &&
// matchesStatus
Expand All @@ -577,7 +573,6 @@ function OrdersIndexTableWithFilters(
// nextFilters,
// `
// matchesQueryValue: ${matchesQueryValue},
// matchesContains: ${matchesContains},
// matchesPaymentStatus: ${matchesPaymentStatus},
// matchesFulfillmentStatus: ${matchesFulfillmentStatus},
// matchesStatus: ${matchesStatus}
Expand All @@ -587,7 +582,6 @@ function OrdersIndexTableWithFilters(
setLoading(false);
return (
matchesQueryValue &&
matchesContains &&
matchesPaymentStatus &&
matchesFulfillmentStatus &&
matchesStatus
Expand Down Expand Up @@ -621,16 +615,6 @@ 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 @@ -691,13 +675,6 @@ function OrdersIndexTableWithFilters(
change: handleQueryValueChange,
remove: handleQueryValueRemove,
emptyValue: '',
label: 'Search',
},
contains: {
set: setContains,
change: handleContainsChange,
remove: handleContainsRemove,
emptyValue: '',
label: 'Include',
},
status: {
Expand All @@ -724,7 +701,6 @@ function OrdersIndexTableWithFilters(
};

const handleChangeFilters = (nextFilterValues: {
contains?: string;
queryValue?: string;
paymentStatus?: string[];
fulfillmentStatus?: string[];
Expand All @@ -742,13 +718,11 @@ function OrdersIndexTableWithFilters(
// ---- Applied filter event handlers ----
const handleResetToSavedFilters = (view: number) => {
const nextFilters: {
contains: string;
queryValue: string;
paymentStatus: string[];
fulfillmentStatus: string[];
status: string[];
} = {
contains: '',
queryValue: '',
paymentStatus: [],
fulfillmentStatus: [],
Expand All @@ -765,12 +739,13 @@ function OrdersIndexTableWithFilters(
nextFilters,
);

setSortSelected([savedSortSelected[view]]);

return handleChangeFilters(nextFilters);
};

const handleClearFilters = () => {
handleChangeFilters({
contains: '',
queryValue: '',
paymentStatus: [],
fulfillmentStatus: [],
Expand Down Expand Up @@ -804,19 +779,10 @@ function OrdersIndexTableWithFilters(

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: 'queryValue',
label: handlers.queryValue.label,
hidden: true,
filter: null,
},
{
key: 'paymentStatus',
Expand Down Expand Up @@ -881,7 +847,7 @@ function OrdersIndexTableWithFilters(
const appliedFilters: AppliedFilterInterface[] = [];

Object.entries({
contains,
queryValue,
status,
paymentStatus,
fulfillmentStatus,
Expand All @@ -901,16 +867,6 @@ function OrdersIndexTableWithFilters(
});
});

const appliedFiltersWithQueryValue = [
...appliedFilters,
{
key: 'queryValue',
value: queryValue,
label: getHumanReadableValue(handlers.queryValue.label, queryValue),
onRemove: handlers.queryValue.remove,
},
];

const appliedFilterMatchesSavedFilter = (
appliedFilter: AppliedFilterInterface,
) => {
Expand All @@ -932,11 +888,20 @@ function OrdersIndexTableWithFilters(
};

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

console.log(
hasUnsavedChanges,
savedViewFilters[selectedView],
appliedFilters,
savedSortSelected[selectedView],
sortSelected,
);

// ---- View event handlers
const sleep = (ms: number) => {
return new Promise((resolve) => setTimeout(resolve, ms));
Expand All @@ -948,7 +913,6 @@ function OrdersIndexTableWithFilters(
fulfillmentStatus,
paymentStatus,
status,
contains,
})
.filter(([key, value]) => value !== undefined)
.map(([key, value]) => {
Expand Down Expand Up @@ -1027,19 +991,22 @@ function OrdersIndexTableWithFilters(
const handleSaveViewFilters = useCallback(
async (index: number, nextFilters?: SavedViewFilter[]) => {
const nextSavedFilters = [...savedViewFilters];
const nextSavedSortSelected = [...savedSortSelected];
nextSavedSortSelected[index] = sortSelected[0];
nextSavedFilters[index] = nextFilters
? nextFilters
: appliedFiltersWithQueryValue.map(({key, value, label}) => ({
: appliedFilters.map(({key, value, label}) => ({
key,
value,
label,
}));

setSavedSortSelected(nextSavedSortSelected);
setSavedViewFilters(nextSavedFilters);
await sleep(300);
return true;
},
[appliedFiltersWithQueryValue, savedViewFilters],
[appliedFilters, sortSelected, savedSortSelected, savedViewFilters],
);

const handleCreateNewView = async (name: string) => {
Expand All @@ -1050,12 +1017,12 @@ function OrdersIndexTableWithFilters(
(queryValue ||
paymentStatus.length > 0 ||
fulfillmentStatus.length > 0 ||
status.length > 0);
status.length > 0 ||
sortSelected[0] !== savedSortSelected[0]);

const nextFilters = shouldSaveAppliedFiltersAsNew
? {contains, queryValue, status, paymentStatus, fulfillmentStatus}
? {queryValue, status, paymentStatus, fulfillmentStatus}
: {
contains: '',
queryValue: '',
status: [],
paymentStatus: [],
Expand All @@ -1067,6 +1034,10 @@ function OrdersIndexTableWithFilters(
} else {
handleClearFilters();
setSavedViewFilters((filters) => [...filters, []]);
setSavedSortSelected((currentSavedSortSelected) => [
...currentSavedSortSelected,
'order asc',
]);
}

handleFilterOrders(nextFilters);
Expand All @@ -1079,7 +1050,7 @@ function OrdersIndexTableWithFilters(
setMode(IndexFiltersMode.Default);
setViewNames((names) => [...names, name]);
setSelectedView(index);
const saved = await handleSaveViewFilters(index);
const saved = await handleSaveViewFilters(index, getFiltersToSave());
await handleSaveViewFilters(0, []);
return saved;
};
Expand Down Expand Up @@ -1139,9 +1110,7 @@ function OrdersIndexTableWithFilters(
const primaryAction: IndexFiltersProps['primaryAction'] = {
type: selectedView === 0 ? 'save-as' : 'save',
onAction: handleSave,
disabled:
(!hasUnsavedChanges && selectedView !== 0) ||
(selectedView === 0 && appliedFilters.length === 0),
disabled: !hasUnsavedChanges,
loading: false,
};

Expand Down Expand Up @@ -1176,6 +1145,7 @@ function OrdersIndexTableWithFilters(
onClearAll={handleClearFilters}
mode={mode}
setMode={setMode}
sortUnsaved={sortSelected[0] !== savedSortSelected[selectedView]}
/>
<Table orders={filteredOrders} />
</Card>
Expand Down
22 changes: 11 additions & 11 deletions polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,16 +135,16 @@ export function FilterPill({
</Box>
);

// const unsavedPip = unsavedChanges ? (
// <Box paddingInlineEnd="150">
// <Box
// background="bg-fill-emphasis"
// borderRadius="050"
// width="6px"
// minHeight="6px"
// />
// </Box>
// ) : null;
const unsavedPip = unsavedChanges ? (
<Box paddingInlineEnd="150">
<Box
background="bg-fill-emphasis"
borderRadius="050"
width="6px"
minHeight="6px"
/>
</Box>
) : null;

const removeFilterButtonMarkup =
selected && onRemove !== undefined ? (
Expand Down Expand Up @@ -176,7 +176,7 @@ export function FilterPill({
}
>
<InlineStack wrap={false} align="center" blockAlign="center" gap="0">
{/* {unsavedPip} */}
{unsavedPip}
{labelMarkup}
{disclosureMarkup}
</InlineStack>
Expand Down
Loading

0 comments on commit cc77341

Please sign in to comment.