fixbugwithselectordropdownaddedclockedinlist

This commit is contained in:
jfrye122
2023-05-13 13:56:44 -04:00
parent 2d17623bdf
commit 66fa8196af
10 changed files with 505 additions and 106 deletions

View File

@@ -53,16 +53,16 @@ export function CostCenterSelect(props) {
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={costCenters}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder={!isFocus ? "Select Cost Center" : "..."}
searchPlaceholder="Search..."
value={props.currentValue?.value}
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
data={costCenters}
value={props.currentValue?.value}
onChange={(item) => {
props.onValueSelected(item);
//setValue(item.value);

View File

@@ -1,5 +1,5 @@
import { useLazyQuery } from "@apollo/client";
import React, { forwardRef, useState, useEffect } from "react";
import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import _ from "lodash";
@@ -12,17 +12,24 @@ import { Dropdown } from "react-native-element-dropdown";
import { connect } from "react-redux";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
///This Component is for testing select. This is not for prod. Justin
export function JobIdSearchSelect(
convertedOnly = false,
notInvoiced = false,
notExported = true,
clm_no = false,
onValueSelected,
currentValue,
...restProps
props
// //currentValue,
// ...restProps
) {
// console.log("JobIdSearchSelectprops:", props);
const notExported =
props.notExported !== undefined ? props.notExported : true;
const notInvoiced =
props.notInvoiced !== undefined ? props.notInvoiced : false;
const convertedOnly =
props.convertedOnly !== undefined ? props.convertedOnly : false;
const clm_no = props.clm_no !== undefined ? props.clm_no : false;
// console.log("notExported:", notExported);
// console.log("notInvoiced:", notInvoiced);
// console.log("convertedOnly:", convertedOnly);
// console.log("clm_no:", clm_no);
const { t } = useTranslation();
const [theOptions, setTheOptions] = useState([]);
@@ -33,19 +40,18 @@ export function JobIdSearchSelect(
const [callIdSearch, { loading: idLoading, error: idError, data: idData }] =
useLazyQuery(SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE);
const [callSearch, { loading, error, data }] = useLazyQuery(
SEARCH_JOBS_FOR_AUTOCOMPLETE,
{}
);
const executeSearch = (v) => {
console.log("executeSearchWithV:", v);
// console.log("executeSearchWithV:", v);
if (v && v !== "") callSearch(v);
};
const debouncedExecuteSearch = _.debounce(executeSearch, 500);
const handleSearch = (value) => {
console.log("handleSearchWithValue:", value);
// console.log("handleSearchWithValue:", value);
debouncedExecuteSearch({
variables: {
search: value,
@@ -60,52 +66,59 @@ export function JobIdSearchSelect(
});
};
useEffect(() => {
console.log("useEfectDependentOn: restProps.value, callIdSearch", restProps);
if (restProps.value) {
console.log("restPropsValue:", restProps.value);
callIdSearch({ variables: { id: restProps.value } });
}
}, [restProps.value, callIdSearch]);
// useEffect(() => {
// console.log("useEfectDependentOn: restProps.value, callIdSearch", restProps);
// if (restProps.value) {
// console.log("restPropsValue:", restProps.value);
// callIdSearch({ variables: { id: restProps.value } });
// }
// }, [restProps.value, callIdSearch]);
useEffect(() => {
console.log("useEfectDependentOn: [data, idData]");
console.log("idDataValue:", (idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []));
console.log("dataValue:", (data && data.search_jobs ? data.search_jobs : []));
setTheOptions(
_.uniqBy(
[
...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []),
...(data && data.search_jobs ? data.search_jobs : []),
],
"id"
)
);
// console.log("useEfectDependentOn: [data, idData]");
// console.log( "idDataValue:", idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []);
// console.log("dataValue:", data && data.search_jobs ? data.search_jobs : []);
if (data) {
setTheOptions(
_.uniqBy(
[
...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []),
...(data && data.search_jobs ? data.search_jobs : []),
],
"id"
)
);
}
}, [data, idData]);
useEffect(() => {
console.log("useEfectDependentOn: [theOptions]");
// console.log("useEfectDependentOn: [theOptions]");
var count = Object.keys(theOptions).length;
console.log("useEfectDependentOn: [theOptions] count:", count);
let selectDataArray = [];
for (let i = 0; i < count; i++) {
// let o = theOptions[i];
selectDataArray.push({
value: theOptions[i].id,
label: theOptions[i].ro_number,
// `${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${
// o.ro_number || t("general.labels.na")
// } | ${OwnerNameDisplayFunction(o)} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
// o.v_model_desc || ""
// }`,
label: `${clm_no && theOptions[i].clm_no ? `${theOptions[i].clm_no} | ` : ""}${
theOptions[i].ro_number || t("general.labels.na")
} | ${OwnerNameDisplayFunction(theOptions[i])} | ${theOptions[i].v_model_yr || ""} ${theOptions[i].v_make_desc || ""} ${
theOptions[i].v_model_desc || ""
}`,
});
}
setSelectorData(selectDataArray);
}, [theOptions]);
// useEffect(() => {
// console.log("useEffectonselectedvaluechange:", selectedvalue.value);
// if (typeof onJobSelected !== "undefined") {
// console.log("onJobSelected:", selectedvalue.value);
// onJobSelected(selectedvalue.value);
// }
// }, [selectedvalue]);
return (
<View style={styles.container}>
<Dropdown
@@ -114,29 +127,41 @@ export function JobIdSearchSelect(
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={selectorData}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder={!isFocus ? "Job Id to Post Against" : "..."}
searchPlaceholder="Search..."
value={selectedvalue}//{selectedvalue}
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
onChange={(item) => {
console.log("onChangefired!!!!");
console.log("itemSelected", item);
setSelectedValue(item.value);
// onValueSelected(item);
//console.log(item);
data={selectorData}
value={selectedvalue} //{selectedvalue}
onChange={(item) => props.onJobSelected(item)}//TODO: add setIsFocus(false); to this
// {
// console.log("onValueSelected!!!!");
// // (item) => {onJobSelected(item.value)};
// console.log("onChangefired!!!!");
// console.log("itemSelected", item);
// onJobSelected(item.value);
// setSelectedValue(item.value);
// console.log("onValueSelected",onValueSelected);
// if (onValueSelected){
// console.log("onValueSelected!!!!");
// }
//console.log(item);
// setSelectedValue(item.value);
// if (onValueSelected) onValueSelected(item.value);
setIsFocus(false);
}}
// setIsFocus(false);
// }}
onChangeText={(search) => {
if (search && search !== "") {
console.log("onChangeTextFired!!!!");
handleSearch(search);
handleSearch(search);
}
}}
/>
{/* {theOptions ? console.log(theOptions): null} */}