Skip to content

Commit

Permalink
UIBULKED-557: Add hover effect to improve text visibility in dropdown…
Browse files Browse the repository at this point in the history 
…s in Bulk Edit in-app form (#624)
  • Loading branch information
@UladzislauKutarkin
UladzislauKutarkin authored Oct 25, 2024
1 parent 23d9bc2 commit 8affb3f
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 107 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
* [UIBULKED-545](https://folio-org.atlassian.net/browse/UIBULKED-545) Clean up permissions.
* [UIBULKED-572](https://folio-org.atlassian.net/browse/UIBULKED-572) Include additional field to 'actions'.
* [UIBULKED-497](https://folio-org.atlassian.net/browse/UIBULKED-497) "Are you sure" preview displays outdated values after User changed selection on bulk edit form and clicked "Confirm changes".
* [UIBULKED-557](https://folio-org.atlassian.net/browse/UIBULKED-557) Add hover effect to improve text visibility in dropdowns in Bulk Edit in-app form.

## [4.1.4](https://github.com/folio-org/ui-bulk-edit/tree/v4.1.4) (2024-05-29)

Expand Down
235 changes: 128 additions & 107 deletions ...mponents/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/ValuesColumn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,9 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option
return [placeholder, ...rest.sort((a, b) => a.label.localeCompare(b.label))];
};

function getLabelByValue(items, targetValue) {
return items?.find((labeledValue) => labeledValue.value === targetValue)?.label;
}
const sortedNotes = sortWithoutPlaceholder(filteredAndMappedNotes);
const sortedHoldingsNotes = sortWithoutPlaceholder(filteredAndMappedHoldingsNotes);
const sortedInstanceNotes = sortWithoutPlaceholder(filteredAndMappedInstanceNotes);
Expand Down Expand Up @@ -171,15 +174,17 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option
), formatMessage({ id: 'ui-bulk-edit.layer.selectPatronGroup' }));

return controlType === CONTROL_TYPES.PATRON_GROUP_SELECT && (
<Select
dataOptions={patronGroups}
value={actionValue}
onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
data-testid={`select-patronGroup-${actionIndex}`}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.patronGroupSelect' })}
marginBottom0
dirty={!!actionValue}
/>
<div title={getLabelByValue(patronGroups, actionValue)}>
<Select
dataOptions={patronGroups}
value={actionValue}
onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
data-testid={`select-patronGroup-${actionIndex}`}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.patronGroupSelect' })}
marginBottom0
dirty={!!actionValue}
/>
</div>
);
};

Expand All @@ -201,7 +206,7 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option
controlType === CONTROL_TYPES.LOCATION && (
<>
{isCentralTenant ? (
<>
<div title={getLabelByValue(locationsEsc, actionValue)}>
<Selection
id="locations-esc"
loading={isLocationEscLoading}
Expand All @@ -223,9 +228,9 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option
});
}}
/>
</>
</div>
) : (
<>
<div title={getLabelByValue(locationsEsc, actionValue)}>
<LocationSelection
value={actionValue}
onSelect={(loc) => onChange({ actionIndex, value: loc?.id, fieldName: FIELD_VALUE_KEY })}
Expand All @@ -245,47 +250,51 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option
}
data-testid={`locationLookup-${actionIndex}`}
/>
</>
</div>
)}
</>
)
);

const renderStatusSelect = () => controlType === CONTROL_TYPES.STATUS_SELECT && (
<Select
dataOptions={statuses}
value={actionValue}
onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
data-testid={`select-statuses-${actionIndex}`}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.statusSelect' })}
marginBottom0
dirty={!!actionValue}
/>
<div title={getLabelByValue(statuses, actionValue)}>
<Select
dataOptions={statuses}
value={actionValue}
onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
data-testid={`select-statuses-${actionIndex}`}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.statusSelect' })}
marginBottom0
dirty={!!actionValue}
/>
</div>
);

const renderLoanTypeSelect = () => controlType === CONTROL_TYPES.LOAN_TYPE && (
isLoanTypesEscLoading ?
<Loading size="large" />
:
<Selection
id="loanType"
value={actionValue}
loading={isLoanTypesLoading}
onChange={value => {
onChange(
{
actionIndex,
value,
fieldName: FIELD_VALUE_KEY,
tenants: getTenantsById(removeDuplicatesByValue(loanTypesEsc, tenants), value)
}
);
}}
placeholder={formatMessage({ id: 'ui-bulk-edit.layer.selectLoanType' })}
dataOptions={isCentralTenant ? removeDuplicatesByValue(loanTypesEsc, tenants) : loanTypes}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
dirty={!!actionValue}
/>
<div title={getLabelByValue(isCentralTenant ? removeDuplicatesByValue(loanTypesEsc, tenants) : loanTypes, actionValue)}>
<Selection
id="loanType"
value={actionValue}
loading={isLoanTypesLoading}
onChange={value => {
onChange(
{
actionIndex,
value,
fieldName: FIELD_VALUE_KEY,
tenants: getTenantsById(removeDuplicatesByValue(loanTypesEsc, tenants), value)
}
);
}}
placeholder={formatMessage({ id: 'ui-bulk-edit.layer.selectLoanType' })}
dataOptions={isCentralTenant ? removeDuplicatesByValue(loanTypesEsc, tenants) : loanTypes}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
dirty={!!actionValue}
/>
</div>
);

const renderNoteTypeSelect = () => controlType === CONTROL_TYPES.NOTE_SELECT && (
Expand All @@ -294,91 +303,103 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option
isHoldingsNotesEscLoading ?
<Loading size="large" />
:
<Select
id="noteHoldingsType"
value={action.value}
loading={isHoldingsNotesLoading}
onChange={e => onChange(
{
actionIndex,
value: e.target.value,
fieldName: FIELD_VALUE_KEY,
tenants: getTenantsById(sortedHoldingsNotes, e.target.value)
}
)}
dataOptions={sortedHoldingsNotes}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
marginBottom0
dirty={!!action.value}
/>)}
<div title={getLabelByValue(sortedHoldingsNotes, action.value)}>
<Select
id="noteHoldingsType"
value={action.value}
loading={isHoldingsNotesLoading}
onChange={e => onChange(
{
actionIndex,
value: e.target.value,
fieldName: FIELD_VALUE_KEY,
tenants: getTenantsById(sortedHoldingsNotes, e.target.value)
}
)}
dataOptions={sortedHoldingsNotes}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
marginBottom0
dirty={!!action.value}
/>
</div>
)}
{isItemCapability && (
isItemsNotesEscLoading ?
<Loading size="large" />
:
<div title={getLabelByValue(sortedNotes, action.value)}>
<Select
id="noteType"
value={action.value}
disabled={usItemNotesLoading || isItemsNotesEscLoading}
onChange={e => onChange({
actionIndex,
value: e.target.value,
fieldName: FIELD_VALUE_KEY,
tenants: getTenantsById(sortedNotes, e.target.value),
})}
dataOptions={sortedNotes}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
marginBottom0
dirty={!!actionValue}
/>
</div>
)}
{isInstanceCapability && (
<div title={getLabelByValue(sortedInstanceNotes, actionValue)}>
<Select
id="noteType"
id="noteInstanceType"
value={action.value}
disabled={usItemNotesLoading || isItemsNotesEscLoading}
onChange={e => onChange({
actionIndex,
value: e.target.value,
fieldName: FIELD_VALUE_KEY,
tenants: getTenantsById(sortedNotes, e.target.value),
})}
dataOptions={sortedNotes}
loading={isInstanceNotesLoading}
onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
dataOptions={sortedInstanceNotes}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
marginBottom0
dirty={!!actionValue}
/>)}
{isInstanceCapability && (
<Select
id="noteInstanceType"
value={action.value}
loading={isInstanceNotesLoading}
onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
dataOptions={sortedInstanceNotes}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
marginBottom0
dirty={!!action.value}
/>
dirty={!!action.value}
/>
</div>
)}
</>
);

const renderNoteDuplicateTypeSelect = () => controlType === CONTROL_TYPES.NOTE_DUPLICATE_SELECT && (
<Select
id="noteTypeDuplicate"
value={action.value}
disabled
onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
dataOptions={duplicateNoteOptions}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
marginBottom0
dirty={!!actionValue}
/>
<div title={getLabelByValue(duplicateNoteOptions, action.value)}>
<Select
id="noteTypeDuplicate"
value={action.value}
disabled
onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
dataOptions={duplicateNoteOptions}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
marginBottom0
dirty={!!actionValue}
/>
</div>
);

const renderElectronicAccessRelationshipSelect = () => controlType === CONTROL_TYPES.ELECTRONIC_ACCESS_RELATIONSHIP_SELECT && (
isElectronicAccessEscLoading ?
<Loading size="large" />
:
<Select
id="urlRelationship"
value={action.value}
loading={isElectronicAccessLoading || isElectronicAccessEscLoading}
onChange={e => onChange(
{
actionIndex,
value: e.target.value,
fieldName: FIELD_VALUE_KEY,
tenants: getTenantsById(accessRelationshipsWithPlaceholder, e.target.value)
}
)}
dataOptions={accessRelationshipsWithPlaceholder}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.urlRelationshipSelect' })}
marginBottom0
dirty={!!actionValue}
/>
<div title={getLabelByValue(accessRelationshipsWithPlaceholder, action.value)}>
<Select
id="urlRelationship"
value={action.value}
loading={isElectronicAccessLoading || isElectronicAccessEscLoading}
onChange={e => onChange(
{
actionIndex,
value: e.target.value,
fieldName: FIELD_VALUE_KEY,
tenants: getTenantsById(accessRelationshipsWithPlaceholder, e.target.value)
}
)}
dataOptions={accessRelationshipsWithPlaceholder}
aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.urlRelationshipSelect' })}
marginBottom0
dirty={!!actionValue}
/>
</div>
);

return (
Expand Down

0 comments on commit 8affb3f

Please sign in to comment.