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

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

@@ -5,7 +5,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
const { Option } = Select; const { Option } = Select;
//To be used as a form element only. // To be used as a form element only.
const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone }, ref) => { const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone }, ref) => {
const [option, setOption] = useState(value); const [option, setOption] = useState(value);
@@ -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,36 +61,67 @@ 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={{
<Space style={{ marginLeft: "1rem" }}> display: "flex",
<HeartOutlined style={{ color: "red" }} /> alignItems: "center",
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>} flexWrap: "nowrap",
{o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null} width: "100%"
</Space> }}
>
<div
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>
{o.name}
</div> </div>
</Option> <Space style={{ marginLeft: "1rem" }}>
)) <HeartOutlined style={{ color: "red" }} />
: null} {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
{options {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
? options.map((o) => ( </Space>
<Option key={o.id} value={o.id} name={o.name} discount={o.discount}> </div>
<div className="imex-flex-row" style={{ width: "100%" }}> </Option>
<div style={{ flex: 1 }}>{o.name}</div> ))}
{options &&
<Space style={{ marginLeft: "1rem" }}> options.map((o) => (
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>} <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
{o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null} <div
</Space> style={{
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
width: "100%"
}}
>
<div
style={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>
{o.name}
</div> </div>
</Option> <Space style={{ marginLeft: "1rem" }}>
)) {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
: null} {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
</Space>
</div>
</Option>
))}
</Select> </Select>
); );
}; };