From c4705085056dec1f346c0ab1d8fc8e0d957c2180 Mon Sep 17 00:00:00 2001 From: jfrye122 Date: Tue, 9 May 2023 16:19:34 -0400 Subject: [PATCH] added select job id selector --- components/Selects/select-cost-center.jsx | 7 - components/Selects/select-job-name.jsx | 165 ++++++++++++++++++ .../owner-name-display.component.jsx | 47 +++++ .../screen-time-ticket-create.component.jsx | 61 ++++--- 4 files changed, 247 insertions(+), 33 deletions(-) create mode 100644 components/Selects/select-job-name.jsx create mode 100644 components/owner-name-display/owner-name-display.component.jsx diff --git a/components/Selects/select-cost-center.jsx b/components/Selects/select-cost-center.jsx index 51c59fa..d11d82e 100644 --- a/components/Selects/select-cost-center.jsx +++ b/components/Selects/select-cost-center.jsx @@ -5,7 +5,6 @@ import { Dropdown } from "react-native-element-dropdown"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; -//TODO Justin currently inprogress import { selectCurrentTimeTicketJob, selectCurrentTimeTicketJobId, @@ -17,11 +16,6 @@ const data = [ { label: "Item 1", value: "1" }, { label: "Item 2", value: "3" }, { label: "Item 3", value: "3" }, - { label: "Item 4", value: "4" }, - { label: "Item 5", value: "5" }, - { label: "Item 6", value: "6" }, - { label: "Item 7", value: "7" }, - { label: "Item 8", value: "8" }, ]; // const mapStateToProps = createStructuredSelector({ @@ -78,7 +72,6 @@ export default connect(null, null)(SelectCostCenter); const styles = StyleSheet.create({ container: { - backgroundColor: "white", padding: 16, justifyContent: "center", alignContent: "center", diff --git a/components/Selects/select-job-name.jsx b/components/Selects/select-job-name.jsx new file mode 100644 index 0000000..6b0655b --- /dev/null +++ b/components/Selects/select-job-name.jsx @@ -0,0 +1,165 @@ +import { useLazyQuery } from "@apollo/client"; +import React, { forwardRef, useState, useEffect } from "react"; +import { useTranslation } from "react-i18next"; +import _ from "lodash"; + +import { + SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE, + SEARCH_JOBS_FOR_AUTOCOMPLETE, +} from "../../graphql/jobs.queries"; +import { StyleSheet, Text, View } from "react-native"; +import { Dropdown } from "react-native-element-dropdown"; +import { connect } from "react-redux"; +import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component"; + +export function JobSearchSelect( + convertedOnly = false, + notInvoiced = false, + notExported = true, + clm_no = false, + ...restProps +) { + const { t } = useTranslation(); + const [selectorData, setSelectorData] = useState([]); + const [selectedvalue, setSelectedValue] = useState(null); + const [isFocus, setIsFocus] = useState(false); + + const [theOptions, setTheOptions] = useState([]); + + const [callSearch, { loading, error, data }] = useLazyQuery( + SEARCH_JOBS_FOR_AUTOCOMPLETE, + {} + ); + const [callIdSearch, { loading: idLoading, error: idError, data: idData }] = + useLazyQuery(SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE); + + const executeSearch = (v) => { + if (v && v !== "") callSearch(v); + }; + const debouncedExecuteSearch = _.debounce(executeSearch, 500); + + const handleSearch = (value) => { + debouncedExecuteSearch({ + variables: { + search: value, + ...(convertedOnly || notExported + ? { + ...(convertedOnly ? { isConverted: true } : {}), + ...(notExported ? { notExported: true } : {}), + ...(notInvoiced ? { notInvoiced: true } : {}), + } + : {}), + }, + }); + }; + + useEffect(() => { + if (restProps.value) { + callIdSearch({ variables: { id: restProps.value } }); + } + }, [restProps.value, callIdSearch]); + + useEffect(() => { + setTheOptions( + _.uniqBy( + [ + ...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []), + ...(data && data.search_jobs ? data.search_jobs : []), + ], + "id" + ) + ); + }, [data, idData]); + + useEffect(() => { + var count = Object.keys(theOptions).length; + 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 || "" + // }`, + + }); + } + setSelectorData(selectDataArray); + }, [theOptions]); + return ( + + setIsFocus(true)} + onBlur={() => setIsFocus(false)} + onChange={(item) => { + console.log(item); + setSelectedValue(item.value); + setIsFocus(false); + }} + onChangeText={(search) => { + handleSearch(search); + }} + /> + {/* {theOptions ? console.log(theOptions): null} */} + + ); +} + +export default connect(null, null)(JobSearchSelect); + +const styles = StyleSheet.create({ + container: { + padding: 16, + justifyContent: "center", + alignContent: "center", + }, + dropdown: { + height: 50, + borderColor: "gray", + borderWidth: 0.5, + borderRadius: 8, + paddingHorizontal: 8, + }, + icon: { + marginRight: 5, + }, + label: { + position: "absolute", + backgroundColor: "white", + left: 22, + top: 8, + zIndex: 999, + paddingHorizontal: 8, + fontSize: 14, + }, + placeholderStyle: { + fontSize: 16, + }, + selectedTextStyle: { + fontSize: 16, + }, + iconStyle: { + width: 20, + height: 20, + }, + inputSearchStyle: { + height: 40, + fontSize: 16, + }, +}); diff --git a/components/owner-name-display/owner-name-display.component.jsx b/components/owner-name-display/owner-name-display.component.jsx new file mode 100644 index 0000000..da79657 --- /dev/null +++ b/components/owner-name-display/owner-name-display.component.jsx @@ -0,0 +1,47 @@ +import { connect } from "react-redux"; +import { createStructuredSelector } from "reselect"; +import { store } from "../../redux/store"; +import { selectBodyshop } from "../../redux/user/user.selectors"; +const mapStateToProps = createStructuredSelector({ + bodyshop: selectBodyshop, +}); +const mapDispatchToProps = (dispatch) => ({ + //setUserLanguage: language => dispatch(setUserLanguage(language)) +}); +export default connect(mapStateToProps, mapDispatchToProps)(OwnerNameDisplay); + +export function OwnerNameDisplay({ bodyshop, ownerObject }) { + const emptyTest = + ownerObject?.ownr_fn + ownerObject?.ownr_ln + ownerObject?.ownr_co_nm; + + if (!emptyTest || emptyTest === "null" || emptyTest.trim() === "") + return "N/A"; + + if (bodyshop.last_name_first) + return `${ownerObject?.ownr_ln || ""}, ${ownerObject?.ownr_fn || ""} ${ + ownerObject?.ownr_co_nm || "" + }`.trim(); + + return `${ownerObject?.ownr_fn || ""} ${ownerObject?.ownr_ln || ""} ${ + ownerObject.ownr_co_nm || "" + }`.trim(); +} + +export function OwnerNameDisplayFunction(ownerObject, forceFirstLast = false) { + const emptyTest = + ownerObject?.ownr_fn + ownerObject?.ownr_ln + ownerObject?.ownr_co_nm; + + if (!emptyTest || emptyTest === "null" || emptyTest.trim() === "") + return "N/A"; + + const rdxStore = store.getState(); + + if (rdxStore.user.bodyshop.last_name_first && !forceFirstLast) + return `${ownerObject?.ownr_ln || ""}, ${ownerObject?.ownr_fn || ""} ${ + ownerObject?.ownr_co_nm || "" + }`.trim(); + + return `${ownerObject?.ownr_fn || ""} ${ownerObject?.ownr_ln || ""} ${ + ownerObject?.ownr_co_nm || "" + }`.trim(); +} diff --git a/components/time-ticket/screen-time-ticket-create.component.jsx b/components/time-ticket/screen-time-ticket-create.component.jsx index 3b0639e..e2c8258 100644 --- a/components/time-ticket/screen-time-ticket-create.component.jsx +++ b/components/time-ticket/screen-time-ticket-create.component.jsx @@ -14,17 +14,21 @@ import { selectRates, } from "../../redux/employee/employee.selectors"; import DateTimePickerModal from "react-native-modal-datetime-picker"; +import { JobSearchSelect } from "../Selects/select-job-name"; +import { selectBodyshop } from "../../redux/user/user.selectors"; //TODO add props needed for call const mapStateToProps = createStructuredSelector({ currentEmployee: selectCurrentEmployee, currentRatesNCostCenters: selectRates, + bodyshop: selectBodyshop, }); const mapDispatchToProps = (dispatch) => ({}); export function TimeTicketCreate({ currentEmployee, currentRatesNCostCenters, + bodyshop }) { const { t } = useTranslation(); @@ -77,20 +81,13 @@ export function TimeTicketCreate({ {({ handleChange, handleBlur, handleSubmit, values }) => ( {/* Below will be replaced with a copy of SelectCostCenter but for jobs*/} - + {/* Below will be replaced with a Date Picker*/} {/* */} - {/* Below will set to auto fill with current employee */} - {/* Below will be replaced with SelectCostCenter */} + -