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

IO-2715 Resolve vendor search select.

Browse Source
This commit is contained in:
Patrick Fic
2024-03-21 09:12:49 -07:00
parent 6831a79407
commit 6463e13eeb
5 changed files with 277 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,92 +1,92 @@
import {HeartOutlined} from "@ant-design/icons";
import {Select, Space, Tag} from "antd";
import React, {forwardRef, useEffect, useState} from "react";
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
import { HeartOutlined } from '@ant-design/icons';
import { Select, Space, Tag } from 'antd';
import React, { forwardRef, useEffect, useState } from 'react';
import PhoneNumberFormatter from '../../utils/PhoneFormatter';
const {Option} = Select;
const { Option } = Select;
//To be used as a form element only.
const VendorSearchSelect = (
{value, onChange, options, onSelect, disabled, preferredMake, showPhone},
ref
{ value, onChange, options, onSelect, disabled, preferredMake, showPhone },
ref
) => {
const [option, setOption] = useState(value);
const [option, setOption] = useState(value);
useEffect(() => {
if (value !== option && onChange) {
onChange(option);
}
}, [value, option, onChange]);
useEffect(() => {
if (value !== option && onChange) {
onChange(option);
}
}, [value, option, onChange]);
const favorites =
preferredMake && options
? options.filter(
(o) =>
o.favorite.filter(
(f) => f.toLowerCase() === preferredMake.toLowerCase()
).length > 0
)
: [];
const favorites =
preferredMake && options
? options.filter(
(o) =>
o.favorite.filter((f) => f.toLowerCase() === preferredMake.toLowerCase()).length > 0
)
: [];
return (
<Select
ref={ref}
showSearch
value={option}
style={{
width: "100%",
}}
popupMatchSelectWidth={false}
onChange={setOption}
optionFilterProp="name"
onSelect={onSelect}
disabled={disabled || false}
optionLabelProp={"name"}
>
{favorites
? favorites.map((o) => (
<Option
key={`favorite-${o.id}`}
value={o.id}
name={o.name}
discount={o.discount}
>
<div className="imex-flex-row">
<div style={{flex: 1}}>{o.name}</div>
<Space style={{marginLeft: "1rem"}}>
<HeartOutlined style={{color: "red"}}/>
{o.phone && showPhone && (
<PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
)}
{o.discount && o.discount !== 0 ? (
<Tag color="green">{`${o.discount * 100}%`}</Tag>
) : null}
</Space>
</div>
</Option>
))
: null}
{options
? options.map((o) => (
<Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
<div className="imex-flex-row" style={{width: "100%"}}>
<div style={{flex: 1}}>{o.name}</div>
return (
<Select
ref={ref}
showSearch
value={option}
style={{
width: '100%',
}}
labelRender={({ label, value, ...rest }) => {
console.log(value, label, rest);
if (!value) return label;
const discount = options.find((o) => o.id === value)?.discount;
return (
<div className="imex-flex-row" style={{ width: '100%' }}>
<div style={{ flex: 1 }}>{label}</div>
<Space style={{marginLeft: "1rem"}}>
{o.phone && showPhone && (
<PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
)}
{o.discount && o.discount !== 0 ? (
<Tag color="green">{`${o.discount * 100}%`}</Tag>
) : null}
</Space>
</div>
</Option>
{discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
</div>
);
}}
popupMatchSelectWidth={false}
onChange={setOption}
optionFilterProp="name"
onSelect={onSelect}
disabled={disabled || false}
optionLabelProp={'name'}
>
{favorites
? favorites.map((o) => (
<Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
<div className="imex-flex-row">
<div style={{ flex: 1 }}>{o.name}</div>
<Space style={{ marginLeft: '1rem' }}>
<HeartOutlined style={{ color: 'red' }} />
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
{o.discount && o.discount !== 0 ? (
<Tag color="green">{`${o.discount * 100}%`}</Tag>
) : null}
</Space>
</div>
</Option>
))
: null}
{options
? options.map((o) => (
<Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
<div className="imex-flex-row" style={{ width: '100%' }}>
<div style={{ flex: 1 }}>{o.name}</div>
))
: null}
</Select>
);
<Space style={{ marginLeft: '1rem' }}>
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
{o.discount && o.discount !== 0 ? (
<Tag color="green">{`${o.discount * 100}%`}</Tag>
) : null}
</Space>
</div>
</Option>
))
: null}
</Select>
);
};
export default forwardRef(VendorSearchSelect);