#133 Clear previous selected fields

avniproject · Jul 20, 2023 · 75192e5 · 75192e5
1 parent 70d7544
commit 75192e5
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 29 deletions.
diff --git a/client/components/FilterComponent/DateConceptFilter.tsx b/client/components/FilterComponent/DateConceptFilter.tsx
@@ -4,22 +4,34 @@ import { Menu } from "@headlessui/react";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
-import dayjs from "dayjs";
+import dayjs, { Dayjs }  from "dayjs";
 const { RangePicker } = DatePicker;
 dayjs.extend(customParseFormat);
 const dateFormat = "DD/MM/YYYY";
 interface Props {
- conceptDate: (data: any[] | null) => void;
+ getDateConcept: (data: any[] | null) => void;
+ conceptDates: any[] | null;
 }
 
-const DateConceptFilter = ({ conceptDate }: Props) => {
+const DateConceptFilter = ({ getDateConcept, conceptDates }: Props) => {
 
  const [date, setDate] = useState<null | string[]>(null);
-
+ const [value, setValue] = useState<[Dayjs, Dayjs] | null>(null);
  useEffect(() => {
- conceptDate(date);
+ getDateConcept(date);
  }, [date]);
 
+ useEffect(()=>{
+ if (conceptDates === null || conceptDates.length === 0) {
+ setValue(null); 
+ } else {
+ setValue([
+ dayjs(conceptDates[0].from), 
+ dayjs(conceptDates[0].to), 
+ ]);
+ }
+ },[conceptDates])
+
  return (
  <>
  <Menu
@@ -28,6 +40,7 @@ const DateConceptFilter = ({ conceptDate }: Props) => {
  >
  <RangePicker
  format={dateFormat}
+ value ={value}
  onChange={(dateValue) => {
  if (dateValue) {
  setDate(

diff --git a/client/components/FilterComponent/NumericConceptFilter.tsx b/client/components/FilterComponent/NumericConceptFilter.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
 
 interface Prop {
- conceptNumeric: (fromNumber: number, toNumber: number) => void;
+ getNumericConcept: (fromNumber: number, toNumber: number) => void;
+ numericConcept: any[];
 }
 
-export default function NumericConceptFilter({ conceptNumeric }: Prop) {
+export default function NumericConceptFilter({ getNumericConcept, numericConcept }: Prop) {
 
  const [frominputValue, setfromInputValue] = useState("");
  const [toinputValue, settoInputValue] = useState("");
@@ -18,10 +19,16 @@ export default function NumericConceptFilter({ conceptNumeric }: Prop) {
  setIsValidRange(isValid);
  if (isValid) {
 
- conceptNumeric(parseInt(frominputValue), parseInt(toinputValue));
+ getNumericConcept(parseInt(frominputValue), parseInt(toinputValue));
 
  }
  }, [frominputValue, toinputValue]);
+ useEffect(()=>{
+ if(numericConcept.length===0){
+ setfromInputValue('')
+ settoInputValue('')
+ }
+ },[numericConcept])
 
  return (
  <>

diff --git a/client/components/FilterComponent/TextConceptFilter.tsx b/client/components/FilterComponent/TextConceptFilter.tsx
@@ -1,25 +1,35 @@
 import { useEffect, useState } from "react";
 
 interface Prop {
- conceptNote: (data: string) => void;
+ getConcepts: (data: string) => void;
+ textConcept : string;
 }
 
-export default function TexConceptFilter({ conceptNote }: Prop) {
+export default function TexConceptFilter({ getConcepts, textConcept }: Prop) {
 
  const [inputValue, setInputValue] = useState("");
 
  useEffect(() => {
 
- conceptNote(inputValue);
+ getConcepts(inputValue);
 
  }, [inputValue]);
+
+ useEffect(()=>{
+
+ if(textConcept.length===0){
+ setInputValue('')
+ }
+
+ },[textConcept])
 
  return (
  <div className="inline-flex w-52 mt-5">
  <input
  type="text"
  className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500"
  value={inputValue}
+ onFocus={() => setInputValue('')}
  onChange={(e) => setInputValue(e.target.value)}
  placeholder="Enter Text Here"
  />

diff --git a/client/components/FilterComponent/TimeStampConceptFilter.tsx b/client/components/FilterComponent/TimeStampConceptFilter.tsx
@@ -4,24 +4,37 @@ import { Menu } from "@headlessui/react";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
-import dayjs from "dayjs";
+import dayjs, {Dayjs} from "dayjs";
 const { RangePicker } = DatePicker;
 dayjs.extend(customParseFormat);
 const dateFormat = "YYYY-MM-DD HH:mm:ss";
 interface Props {
- conceptDateTime: (data: any[] | null) => void;
+ getTimeStampConcept: (data: any[] | null) => void;
+ dateTimeConcept: any[] | null;
 }
 
-const TimeStampConceptFilter = ({ conceptDateTime }: Props) => {
+const TimeStampConceptFilter = ({ getTimeStampConcept, dateTimeConcept }: Props) => {
 
  const [date, setDate] = useState<null | string[]>(null);
+ const [value, setValue] = useState<[Dayjs, Dayjs] | null>(null);
 
  useEffect(() => {
 
- conceptDateTime(date);
+ getTimeStampConcept(date);
 
  }, [date]);
 
+ useEffect(()=>{
+ if (dateTimeConcept === null || dateTimeConcept.length === 0) {
+ setValue(null); 
+ } else {
+ setValue([
+ dayjs(dateTimeConcept[0].from), 
+ dayjs(dateTimeConcept[0].to), 
+ ]);
+ }
+ },[dateTimeConcept])
+
  return (
  <>
  <Menu
@@ -30,6 +43,7 @@ const TimeStampConceptFilter = ({ conceptDateTime }: Props) => {
  >
  <RangePicker
  format={dateFormat}
+ value = {value}
  onChange={(dateValue) => {
  if (dateValue) {
  setDate(

diff --git a/client/components/ImageList.tsx b/client/components/ImageList.tsx
@@ -63,7 +63,7 @@ export default function ImageList() {
  const [textConcept, setTextConcept] = useState<any>([])
  const [codedConcept, setCodedConcept] = useState<any>([])
  const [noteConcept, setNoteConcept] = useState<any>([])
- const [toNumericConcept, setToNumericConcept] = useState<any>([])
+ const [numericConcept, setToNumericConcept] = useState<any>([])
  const [dateTimeConcept, setDateTimeConcept] = useState<any[] | null>([]);
  const [conceptDates, setConceptDates] = useState<any[] | null>([]);
  const [typeId, setTypeId] = useState<any>([])
@@ -390,7 +390,7 @@ export default function ImageList() {
  setCodedConcept([])
  };
 
- const conceptDate = (data: any[]|null) => {
+ const getDateConcept = (data: any[]|null) => {
  if(data && data.length>0){
  setConceptDates([{
  "conceptUuid":concepts.uuid,
@@ -400,7 +400,7 @@ export default function ImageList() {
  }
  };
 
- const conceptDateTime = (data: any[]|null) => {
+ const getTimeStampConcept = (data: any[]|null) => {
  if(data && data.length>0){
  setDateTimeConcept([{
  "conceptUuid": concepts.uuid,
@@ -410,7 +410,7 @@ export default function ImageList() {
  }
  };
 
- const conceptNumeric = (fromNumber: number, toNumber: number) =>{
+ const getNumericConcept = (fromNumber: number, toNumber: number) =>{
  setToNumericConcept([{
  "conceptUuid":concepts.uuid,
  "from": fromNumber,
@@ -424,10 +424,12 @@ export default function ImageList() {
  "conceptUuid": concepts.uuid,
  "values":data
  }])
+ }else{
+ setCodedConcept([])
  }
  }
 
- const conceptNote = (data: string) =>{
+ const getNoteConcept = (data: string) =>{
 
  if(data && data.length>0){
  setNoteConcept([{
@@ -438,7 +440,7 @@ export default function ImageList() {
 
  }
 
- const conceptText = (data: string) =>{
+ const getTextConcept = (data: string) =>{
 
  if(data && data.length>0){
  setTextConcept([{
@@ -628,8 +630,8 @@ export default function ImageList() {
  conceptfilter.push(codedConcept[0]);
  }
 
- if (toNumericConcept && toNumericConcept.length > 0) {
- conceptfilter.push(toNumericConcept[0]);
+ if (numericConcept && numericConcept.length > 0) {
+ conceptfilter.push(numericConcept[0]);
  }
 
  if (textConcept && textConcept.length > 0) {
@@ -664,7 +666,7 @@ export default function ImageList() {
  setDataBody(body)
  }
  fitersData()
- },[date, subject, encouter, program, toDate, fromDate, add, codedConcept, toNumericConcept, dateTimeConcept, conceptDates, textConcept, noteConcept]);
+ },[date, subject, encouter, program, toDate, fromDate, add, codedConcept, numericConcept, dateTimeConcept, conceptDates, textConcept, noteConcept]);
 
  const handleApplyFilter = async () => {
  redirectIfNotValid();
@@ -770,18 +772,27 @@ export default function ImageList() {
  />
  ) : selectedFormSubject && selectedFormSubject.length > 0 && concepts && concepts.dataType === "Date" ? (
  <DateConceptFilter
- conceptDate={conceptDate}
+ getDateConcept={getDateConcept}
+ conceptDates={conceptDates}
  />
  ) : selectedFormSubject && selectedFormSubject.length > 0 && concepts && concepts.dataType === "DateTime" ? (
- <TimeStampConceptFilter conceptDateTime={conceptDateTime} />
+ <TimeStampConceptFilter 
+ getTimeStampConcept={getTimeStampConcept} 
+ dateTimeConcept={dateTimeConcept}/>
  ) : selectedFormSubject && selectedFormSubject.length > 0 && concepts && concepts.dataType === "Text" ? (
  <TexConceptFilter
- conceptNote={conceptText} />
+ getConcepts={getTextConcept}
+ textConcept ={textConcept}
+ />
  ) : selectedFormSubject && selectedFormSubject.length > 0 && concepts && concepts.dataType === "Numeric" ? (
- <NumericConceptFilter conceptNumeric={conceptNumeric} />
+ <NumericConceptFilter 
+ getNumericConcept={getNumericConcept}
+ numericConcept={numericConcept}
+ />
  ) : selectedFormSubject && selectedFormSubject.length > 0 && concepts && concepts.dataType === "Notes" ? (
  <TexConceptFilter 
- conceptNote={conceptNote}/>
+ getConcepts={getNoteConcept}
+ textConcept ={noteConcept}/>
  ) : null}
  </div>