changes for mali - data extract

Author: trevlenb2

src/features/dataExtracts/DataExtract.tsx

@@ -6,22 +6,17 @@ import { PageableModel } from '../../api/providers';
 import { PlanModel } from '../plan/providers/types';
 import Select from 'react-select';
 import { Button, Col, Container, Form, FormGroup, Row } from 'react-bootstrap';
-import { getDataExtract } from './api';
+import { getDataExtract, getQueryLabels } from './api';
+
+import { DataExtractQueryResponse } from './providers/types';
 
 const DataExtract = () => {
   const [planList, setPlanList] = useState<PageableModel<PlanModel>>();
   const [selectedPlan, setSelectedPlan] = useState<string>();
+  const [dataExtractLabels, setDataExtractLabels] = useState<DataExtractQueryResponse[]>();
+  const [selectedDataExtractLabelId, setSelectedDataExtractLabelId] = useState<string>();
   let link = useRef<HTMLAnchorElement>(null);
 
-  // const paginationHandler = (size: number, page: number) => {
-  //   loadData(size, page);
-  // };
-  //
-  // const sortHandler = (sortValue: string, direction: boolean) => {
-  //   setCurrentSortDirection(direction);
-  //   setCurrentSortField(sortValue);
-  // };
-
   const loadData = useCallback((size: number, page: number) => {
     getPlanList(size, page, true, '', '', false)
       .then(res => setPlanList(res))
@@ -34,18 +29,19 @@ const DataExtract = () => {
 
   const getCSV = useCallback(() => {
     const planModel = planList?.content.find(plan => plan.identifier === selectedPlan);
-    if (planModel) {
-      getDataExtract(planModel.identifier)
+    if (planModel && selectedDataExtractLabelId) {
+      getDataExtract(planModel.identifier, selectedDataExtractLabelId)
         .then(res => {
           if (link && link.current) {
             link.current.href = window.URL.createObjectURL(new Blob([res], { type: 'text/csv;charset=utf-8' }));
             link.current.download = 'data-extract.csv';
             link.current.click();
           }
         })
+
         .catch(ex => toast.error(ex));
     }
-  }, [selectedPlan, planList]);
+  }, [selectedPlan, planList, selectedDataExtractLabelId]);
 
   return (
     <Container fluid className="text-center my-4">
@@ -54,12 +50,44 @@ const DataExtract = () => {
           <FormGroup style={{ display: 'flex', alignItems: 'center' }}>
             <Form.Label style={{ marginRight: '10px' }}>Select Plan</Form.Label>
             <Select
+              styles={{
+                container: provided => ({
+                  ...provided,
+                  width: 800 // Control the width here
+                })
+              }}
               options={planList?.content.map(plan => new Option(plan.name, plan.identifier))}
-              onChange={e => setSelectedPlan(e?.value)}
+              onChange={e => {
+                setSelectedPlan(e?.value);
+                if (e?.value != null) {
+                  getQueryLabels(e?.value).then(labels => setDataExtractLabels(labels));
+                }
+              }}
             />
           </FormGroup>
         </Col>
-        <Col md={1}>{selectedPlan ? <Button onClick={() => getCSV()}>Get CSV</Button> : null}</Col>
+        <Col md={2}>
+          {selectedPlan ? (
+            <FormGroup style={{ display: 'flex', alignItems: 'center' }}>
+              <Form.Label style={{ marginRight: '10px' }}>Select Extract</Form.Label>
+              <Select
+                styles={{
+                  container: provided => ({
+                    ...provided,
+                    width: 300 // Control the width here
+                  })
+                }}
+                options={dataExtractLabels?.map(
+                  dataExtractLabel => new Option(dataExtractLabel.queryLabel, dataExtractLabel.queryLabel)
+                )}
+                onChange={e => setSelectedDataExtractLabelId(e?.value)}
+              />
+            </FormGroup>
+          ) : null}
+        </Col>
+        <Col md={1}>
+          {selectedPlan && selectedDataExtractLabelId ? <Button onClick={() => getCSV()}>Get CSV</Button> : null}
+        </Col>
       </Row>
       <a
         style={{ display: 'none' }}

src/features/dataExtracts/api/index.ts

@@ -1,5 +1,10 @@
 import api from '../../../api/axios';
+import { DataExtractQueryResponse } from '../providers/types';
 
-export const getDataExtract = async (planIdentifier: string): Promise<File> => {
-  return await api.get<File>('data-extract/' + planIdentifier).then(res => res.data);
+export const getDataExtract = async (planIdentifier: string, queryLabel: string): Promise<File> => {
+  return await api.get<File>('data-extract/extract/' + planIdentifier + '/' + queryLabel).then(res => res.data);
+};
+
+export const getQueryLabels = async (planIdentifier: string): Promise<DataExtractQueryResponse[]> => {
+  return await api.get<DataExtractQueryResponse[]>('data-extract/queryLabels/' + planIdentifier).then(res => res.data);
 };

src/features/dataExtracts/providers/types.ts

@@ -0,0 +1,5 @@
+export interface DataExtractQueryResponse {
+  id: string;
+  planIdentifier: string;
+  queryLabel: string;
+}