admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-2926-Vendor-Discount-Wrapping-In-Parts-Order - Fix Wrapping in Vendor Search Select

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-09-16 12:16:29 -04:00
parent 40f61bbc8f
commit 0212b837ea
1 changed files with 78 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
client/src/components/vendor-search-select/vendor-search-select.component.jsx
View File

@@ -33,9 +33,25 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
if (!value || !options) return label; if (!value || !options) return label;
const discount = options?.find((o) => o.id === value)?.discount; const discount = options?.find((o) => o.id === value)?.discount;
return ( return (
<div className="imex-flex-row" style={{ width: "100%" }}> <div
<div style={{ flex: 1 }}>{label}</div> style={{
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
width: "100%"
}}
>
<div
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>
{label}
</div>
{discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null} {discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
</div> </div>
); );
@@ -45,13 +61,30 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
optionFilterProp="name" optionFilterProp="name"
onSelect={onSelect} onSelect={onSelect}
disabled={disabled || false} disabled={disabled || false}
optionLabelProp={"name"} optionLabelProp="name"
> >
{favorites {favorites &&
? favorites.map((o) => ( favorites.map((o) => (
<Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}> <Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
<div className="imex-flex-row"> <div
<div style={{ flex: 1 }}>{o.name}</div> style={{
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
width: "100%"
}}
>
<div
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>
{o.name}
</div>
<Space style={{ marginLeft: "1rem" }}> <Space style={{ marginLeft: "1rem" }}>
<HeartOutlined style={{ color: "red" }} /> <HeartOutlined style={{ color: "red" }} />
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>} {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
@@ -59,22 +92,36 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
</Space> </Space>
</div> </div>
</Option> </Option>
)) ))}
: null} {options &&
{options options.map((o) => (
? options.map((o) => (
<Option key={o.id} value={o.id} name={o.name} discount={o.discount}> <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
<div className="imex-flex-row" style={{ width: "100%" }}> <div
<div style={{ flex: 1 }}>{o.name}</div> style={{
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
width: "100%"
}}
>
<div
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>
{o.name}
</div>
<Space style={{ marginLeft: "1rem" }}> <Space style={{ marginLeft: "1rem" }}>
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>} {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
{o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null} {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
</Space> </Space>
</div> </div>
</Option> </Option>
)) ))}
: null}
</Select> </Select>
); );
}; };