Skip to content
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

7638 px creation UI updates #7647

Open
wants to merge 14 commits into
base: development
Choose a base branch
from
Open

7638 px creation UI updates #7647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
709ce6e
PX: update styling of no qualified templates message
josh-huridocs Feb 5, 2025
6b09ea0
apply new criteria message
josh-huridocs Feb 9, 2025
41369bd
Merge branch 'development' of https://github.com/huridocs/uwazi into …
josh-huridocs Feb 9, 2025
a9e7ec0
px modal styling update
josh-huridocs Feb 9, 2025
2b64e03
[MultiSelectList] hideFilters config
josh-huridocs Feb 9, 2025
64e2166
[MultiSelectList] custom classes for item and item container
josh-huridocs Feb 9, 2025
3c17a90
[Px - Extractor Modal] Custom classes update for item and item container
josh-huridocs Feb 9, 2025
4d1033e
[Px - Extractor Modal] update styling for step 2
josh-huridocs Feb 9, 2025
17a7844
update translations
josh-huridocs Feb 9, 2025
014efa8
Merge branch 'development' into 7638-px-creation-ui-updates
josh-huridocs Feb 10, 2025
8faa8bd
[MultiSelectList] set default item class names
josh-huridocs Feb 10, 2025
5762f8a
Merge branch 'development' of https://github.com/huridocs/uwazi into …
josh-huridocs Feb 10, 2025
5fe1e4e
Merge branch '7638-px-creation-ui-updates' of https://github.com/huri…
josh-huridocs Feb 10, 2025
a0835c6
Merge branch 'development' into 7638-px-creation-ui-updates
josh-huridocs Feb 11, 2025
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
88 changes: 50 additions & 38 deletions app/react/V2/Components/Forms/MultiselectList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ interface MultiselectListProps {
startOnSelected?: boolean;
search?: string;
suggestions?: boolean;
itemClassName?: string | null;
itemContainerClassName?: string | null;
hideFilters?: boolean;
blankState?: string | React.ReactNode;
}

Expand All @@ -52,6 +55,9 @@ const MultiselectList = ({
startOnSelected = false,
search = '',
suggestions = false,
hideFilters = false,
itemClassName = null,
itemContainerClassName = null,
blankState = <Translate>No items available</Translate>,
}: MultiselectListProps) => {
const [selectedItems, setSelectedItems] = useState<string[]>(value || []);
Expand Down Expand Up @@ -200,11 +206,11 @@ const MultiselectList = ({

const selected = selectedItems.includes(item.value);
const borderSyles = selected
? 'border-sucess-200'
? 'border-success-200'
: 'border-transparent hover:border-primary-300';

return (
<li key={item.value} className="mb-4">
<li key={item.value} className={`${itemClassName ?? 'bg-gray-50 rounded-lg mb-4'}`}>
<button
type="button"
className={`w-full flex text-left p-2.5 border ${borderSyles} rounded-lg items-center`}
Expand All @@ -229,7 +235,7 @@ const MultiselectList = ({
return (
<li
key={item.value}
className={`mb-2 ${!selected && searchTerm && !showAll ? 'opacity-70' : ''}`}
className={`${!selected && searchTerm && !showAll ? 'opacity-70' : ''} ${itemClassName ?? ' bg-gray-50 rounded-lg mb-2'} `}
>
<Checkbox
name={item.value}
Expand Down Expand Up @@ -258,7 +264,7 @@ const MultiselectList = ({
const isOpen = isGroupOpen(group.value);
if (foldableGroups) {
return (
<li key={group.value} className="mb-4">
<li key={group.value} className={`${itemClassName ?? 'bg-gray-50 rounded-lg mb-4'}`}>
<div
className={`flex justify-between p-3 mb-4 rounded-lg ${isOpen ? 'bg-indigo-50' : 'bg-gray-50'}`}
onClick={() => handleGroupToggle(group.value)}
Expand All @@ -274,15 +280,19 @@ const MultiselectList = ({
<Translate>Group</Translate>
</button>
</div>
{isOpen && <ul className="pl-4">{group.items?.map(renderItem)}</ul>}
{isOpen && (
<ul className={`${itemContainerClassName ?? 'pl-4 '}`}>
{group.items?.map(renderItem)}
</ul>
)}
</li>
);
}

return (
<li key={group.value} className="mb-4">
<li key={group.value} className={`${itemClassName ?? 'bg-gray-50 rounded-lg mb-4'}`}>
<span className="block mb-4 text-sm font-bold text-gray-900">{group.label}</span>
<ul className="">{group.items?.map(renderItem)}</ul>
<ul className={`${itemContainerClassName ?? ''}`}>{group.items?.map(renderItem)}</ul>
</li>
);
};
Expand Down Expand Up @@ -319,44 +329,46 @@ const MultiselectList = ({
value={searchTerm}
clearFieldAction={() => setSearchTerm('')}
/>
<div className="flex mx-1 my-4 flex-nowrap">
<RadioSelect
name="filter"
orientation="horizontal"
options={[
{
label: <Translate data-testid="multiselectlist-show-all">All</Translate>,
value: 'true',
defaultChecked: !startOnSelected,
},
{
label: renderSelectedLabel(),
value: 'false',
disabled: selectedOrSuggestedItems.size === 0,
defaultChecked: startOnSelected,
},
]}
onChange={applyFilter}
className="flex-grow"
/>
{allowSelelectAll && (
<button
type="button"
className="text-gray-400 underline"
onClick={() => handleSelectAll()}
>
<Translate>Select all</Translate>
</button>
)}
</div>
{!hideFilters && (
<div className="flex mx-1 my-4 flex-nowrap" data-testid="multiselectlist-filters">
<RadioSelect
name="filter"
orientation="horizontal"
options={[
{
label: <Translate data-testid="multiselectlist-show-all">All</Translate>,
value: 'true',
defaultChecked: !startOnSelected,
},
{
label: renderSelectedLabel(),
value: 'false',
disabled: selectedOrSuggestedItems.size === 0,
defaultChecked: startOnSelected,
},
]}
onChange={applyFilter}
className="flex-grow"
/>
{allowSelelectAll && (
<button
type="button"
className="text-gray-400 underline"
onClick={() => handleSelectAll()}
>
<Translate>Select all</Translate>
</button>
)}
</div>
)}
</div>

{items.length === 0 && (
<div className="flex w-full h-full items-center justify-center min-h-[300px]">
{renderChild(blankState)}
</div>
)}
<ul className="w-full px-2 pt-2 grow" ref={optionsRef}>
<ul className={`${itemContainerClassName ?? ' w-full px-2 pt-2 grow '}`} ref={optionsRef}>
{filteredItems.map(renderItem)}
</ul>
</div>
Expand Down
148 changes: 148 additions & 0 deletions app/react/V2/Components/Forms/specs/MultiselectList.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,4 +245,152 @@ describe('MultiselectList.cy.tsx', () => {
cy.contains('no items string').should('be.visible');
});
});

describe('hide filters property', () => {
it('should load/show filters when hideFilters is not set', () => {
cy.viewport(450, 650);
mount(
<div className="p-2 tw-content">
<MultiselectList onChange={() => {}} items={[]} />
</div>
);
cy.get('[data-testid="multiselectlist-filters"]').should('exist');
});

it('should not load/show filters when hideFilters is true', () => {
cy.viewport(450, 650);
mount(
<div className="p-2 tw-content">
<MultiselectList onChange={() => {}} items={[]} hideFilters />
</div>
);
cy.get('[data-testid="multiselectlist-filters"]').should('not.exist');
});
});

describe('custom class name properties', () => {
it('should apply a custom class name to each item', () => {
cy.viewport(450, 650);
mount(
<div className="p-2 tw-content">
<MultiselectList
onChange={() => {}}
items={[
{
label: 'Item 1',
searchLabel: 'Item 1',
value: 'item1',
},
{
label: 'Item 2',
searchLabel: 'Item 2',
value: 'item2',
},
]}
itemClassName="bg-gray-50"
/>
</div>
);
cy.get('li').should('have.class', 'bg-gray-50');
});

it('should apply the default class name to each item if no custom class name is provided', () => {
cy.viewport(450, 650);
mount(
<div className="p-2 tw-content">
<MultiselectList
onChange={() => {}}
items={[
{
label: 'Item 1',
searchLabel: 'Item 1',
value: 'item1',
},
{
label: 'Item 2',
searchLabel: 'Item 2',
value: 'item2',
},
]}
/>
</div>
);
cy.get('li').should('have.class', 'bg-gray-50');
});

it('should apply a custom class name to each checkbox item', () => {
cy.viewport(450, 650);
mount(
<div className="p-2 tw-content">
<MultiselectList
onChange={() => {}}
items={[
{
label: 'Item 1',
searchLabel: 'Item 1',
value: 'item1',
},
{
label: 'Item 2',
searchLabel: 'Item 2',
value: 'item2',
},
]}
checkboxes
itemClassName="bg-gray-50"
/>
</div>
);
cy.get('li').should('have.class', 'bg-gray-50');
});

it('should apply the default class name to each checkbox item if no custom class name is provided', () => {
cy.viewport(450, 650);
mount(
<div className="p-2 tw-content">
<MultiselectList
onChange={() => {}}
items={[
{
label: 'Item 1',
searchLabel: 'Item 1',
value: 'item1',
},
{
label: 'Item 2',
searchLabel: 'Item 2',
value: 'item2',
},
]}
checkboxes
/>
</div>
);
cy.get('li').should('have.class', 'mb-2');
});

it('should apply a custom class name to the items container', () => {
cy.viewport(450, 650);
mount(
<div className="p-2 tw-content">
<MultiselectList
onChange={() => {}}
items={[]}
itemContainerClassName="custom-container-class"
/>
</div>
);
cy.get('ul').should('have.class', 'custom-container-class');
});

it('should apply the default class name to the items container if no custom class name for the container is provided', () => {
cy.viewport(450, 650);
mount(
<div className="p-2 tw-content">
<MultiselectList onChange={() => {}} items={[]} />
</div>
);
cy.get('ul').should('have.class', 'w-full px-2 pt-2 grow');
});
});
});
Loading
Loading