Skip to content

docs(VariantManagement): fix "in FilterBar" story #6623

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

Merged
merged 2 commits into from
Nov 18, 2024
Merged

docs(VariantManagement): fix "in FilterBar" story #6623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
33c1599
docs(VariantManagement): fix "in FilterBar" story
Lukas742 Nov 14, 2024
bc97309
Update VariantManagement.mdx
Lukas742 Nov 14, 2024
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
37 changes: 15 additions & 22 deletions packages/main/src/components/VariantManagement/VariantManagement.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,11 +268,11 @@ function FilterBarWithVariantManagement() {
const hasChanged = Object.entries(initialVariantValues.current[selectedVariant]).some(([key, val]) => {
if (key === 'selectedCodes') {
const selectedCodesLength = Object.keys(filters.selectedCodes).length;
if (selectedCodesLength > 0 && Object.keys(val).length !== selectedCodesLength) {
if (Object.keys(val).length !== selectedCodesLength) {
return true;
}
return Object.entries(filters.selectedCodes).some(([code, bool]) => {
return val[code] !== bool;
return val?.[code] !== bool;
});
}
return filters[key] !== val;
Expand Down Expand Up @@ -319,7 +319,7 @@ function FilterBarWithVariantManagement() {
</VariantManagement>
}
>
<FilterGroupItem label="Countries">
<FilterGroupItem label="Countries" filterKey={0}>
<Select onChange={handleSelectChange}>
<Option selected={selectedCountry === 'Indonesia'}>Indonesia</Option>
<Option selected={selectedCountry === 'Costa Rica'}>Costa Rica</Option>
Expand All @@ -331,10 +331,10 @@ function FilterBarWithVariantManagement() {
<Option selected={selectedCountry === 'Austria'}>Austria</Option>
</Select>
</FilterGroupItem>
<FilterGroupItem label="Date">
<FilterGroupItem label="Date" filterKey={1}>
<DatePicker value={date} onChange={handleDateChange} />
</FilterGroupItem>
<FilterGroupItem label="Company Code">
<FilterGroupItem label="Company Code" filterKey={2}>
<MultiComboBox onSelectionChange={handleSelectedCodesChange}>
<MultiComboBoxItem text="001" selected={selectedCodes['001']} data-code="001" />
<MultiComboBoxItem text="002" selected={selectedCodes['002']} data-code="002" />
Expand All @@ -344,27 +344,20 @@ function FilterBarWithVariantManagement() {
</MultiComboBox>
</FilterGroupItem>
</FilterBar>
<Form
style={{ marginBlockStart: '2rem' }}
columnsS={1}
columnsM={1}
columnsL={1}
columnsXL={1}
labelSpanM={2}
labelSpanL={2}
labelSpanXL={2}
>
<FormItem label="Current View">
<Text>{selectedVariant}</Text>
</FormItem>
<FormGroup titleText="Filters">
<FormItem label="Selected Country">
<Form style={{ marginBlockStart: '2rem' }} layout={'S1 M1 L1 XL1'} labelSpan={'S3 M3 L3 XL3'}>
<FormGroup headerText="Variant">
<FormItem labelContent={<Label showColon>Current View</Label>}>
<Text>{selectedVariant}</Text>
</FormItem>
</FormGroup>
<FormGroup headerText="Filters">
<FormItem labelContent={<Label showColon>Selected Country</Label>}>
<Text>{selectedCountry}</Text>
</FormItem>
<FormItem label="Selected Date">
<FormItem labelContent={<Label showColon>Selected Date</Label>}>
<Text>{date}</Text>
</FormItem>
<FormItem label="Selected Company Codes">
<FormItem labelContent={<Label showColon>Selected Company Codes</Label>}>
<Text>{Object.keys(selectedCodes).join(', ')}</Text>
</FormItem>
</FormGroup>
Expand Down
22 changes: 12 additions & 10 deletions packages/main/src/components/VariantManagement/VariantManagement.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ export const WithFilterBarImplementation: Story = {
</VariantManagement>
}
>
<FilterGroupItem label="Countries">
<FilterGroupItem label="Countries" filterKey={0}>
<Select onChange={handleSelectChange}>
<Option selected={selectedCountry === 'Indonesia'}>Indonesia</Option>
<Option selected={selectedCountry === 'Costa Rica'}>Costa Rica</Option>
Expand All @@ -336,10 +336,10 @@ export const WithFilterBarImplementation: Story = {
<Option selected={selectedCountry === 'Austria'}>Austria</Option>
</Select>
</FilterGroupItem>
<FilterGroupItem label="Date">
<FilterGroupItem label="Date" filterKey={1}>
<DatePicker value={date} onChange={handleDateChange} />
</FilterGroupItem>
<FilterGroupItem label="Company Code">
<FilterGroupItem label="Company Code" filterKey={2}>
<MultiComboBox onSelectionChange={handleSelectedCodesChange}>
<MultiComboBoxItem text="001" selected={selectedCodes['001']} data-code="001" />
<MultiComboBoxItem text="002" selected={selectedCodes['002']} data-code="002" />
Expand All @@ -349,18 +349,20 @@ export const WithFilterBarImplementation: Story = {
</MultiComboBox>
</FilterGroupItem>
</FilterBar>
<Form style={{ marginBlockStart: '2rem' }} layout={'S1 M1 L1 XL1'} labelSpan={'M2 L2 XL2'}>
<FormItem labelContent={<Label>Current View</Label>}>
<Text>{selectedVariant}</Text>
</FormItem>
<Form style={{ marginBlockStart: '2rem' }} layout={'S1 M1 L1 XL1'} labelSpan={'S3 M3 L3 XL3'}>
<FormGroup headerText="Variant">
<FormItem labelContent={<Label showColon>Current View</Label>}>
<Text>{selectedVariant}</Text>
</FormItem>
</FormGroup>
<FormGroup headerText="Filters">
<FormItem labelContent={<Label>Selected Country</Label>}>
<FormItem labelContent={<Label showColon>Selected Country</Label>}>
<Text>{selectedCountry}</Text>
</FormItem>
<FormItem labelContent={<Label>Selected Date</Label>}>
<FormItem labelContent={<Label showColon>Selected Date</Label>}>
<Text>{date}</Text>
</FormItem>
<FormItem labelContent={<Label>Selected Company Codes</Label>}>
<FormItem labelContent={<Label showColon>Selected Company Codes</Label>}>
<Text>{Object.keys(selectedCodes).join(', ')}</Text>
</FormItem>
</FormGroup>
Expand Down
Loading