Merge pull request #234 from zimmerman-team/feat/2437/2476

2437 2351
zimmerman-team · Nov 26, 2020 · fd713ba · fd713ba
2 parents 9eba856 + d22b2f2
commit fd713ba
Show file tree

Hide file tree

Showing 15 changed files with 95 additions and 36 deletions.
diff --git a/cypress/integration/qbOutputFormat.spec.ts b/cypress/integration/qbOutputFormat.spec.ts
@@ -10,7 +10,7 @@ describe('Query Builder - output format', function () {
   it('should load the page', function () {
     cy.visit('/querybuilder/output-format');
     cy.get('[data-cy=covid-banner-close-btn]').click();
-    cy.get(':nth-child(3) > #navlink').click();
+    cy.get(':nth-child(3) > #Output_Format').click();
   });
 
   it('should show the correct text', function () {

diff --git a/src/app/components/datadisplay/DataTable/index.tsx b/src/app/components/datadisplay/DataTable/index.tsx
@@ -6,6 +6,7 @@ import sortBy from 'lodash/sortBy';
 import get from 'lodash/get';
 import axios from 'axios';
 import { PagingState, CustomPaging } from '@devexpress/dx-react-grid';
+import { ModuleStore } from 'app/modules/querybuilder-module/state/store';
 import {
   Grid,
   PagingPanel,
@@ -20,6 +21,7 @@ import {
 } from 'app/modules/querybuilder-module/fragments/results/model';
 import { ROWS } from 'app/state/models/QueryModel';
 import { NoDataCellComponent } from './common/nodatacellcomp';
+import { getRetrievedItemsLabel } from 'app/modules/querybuilder-module/fragments/results/util';
 
 export const DataTable = (props) => {
   const [cols, setCols] = useState(
@@ -35,6 +37,8 @@ export const DataTable = (props) => {
   const [pageSize, setPageSize] = useState(10);
   const [tablePage, setTablePage] = useState(0);
   const [loading, setLoading] = useState(false);
+  const store = ModuleStore.useStore();
+  const rowFormat = store.get('rowFormat');
 
   useEffect(() => {
     if (!props.defaultCols && docsData.length > 0) {
@@ -87,7 +91,7 @@ export const DataTable = (props) => {
     >
       <h3>
         Datastore retrieved {props.allDataCount}{' '}
-        {props.allDataCount === 1 ? 'activity' : 'activities'} for you
+        {getRetrievedItemsLabel(rowFormat, props.allDataCount)} for you
       </h3>
       <Paper>
         <Grid rows={docsData} columns={cols}>

diff --git a/src/app/components/inputs/selects/ConnectedSelect/common/index.tsx b/src/app/components/inputs/selects/ConnectedSelect/common/index.tsx
@@ -135,8 +135,6 @@ export const ValueContainer = (provided) => ({
   fontWeight: 200,
 });
 
-
-
 export const MenuList = (provided, state) => ({
   ...provided,
   height: '300px',

diff --git a/src/app/components/inputs/selects/ConnectedSelect/index.tsx b/src/app/components/inputs/selects/ConnectedSelect/index.tsx
@@ -29,7 +29,7 @@ const customStyles = {
   multiValueLabel: MultiValueLabel,
   multiValueRemove: (provided: any) => ({ ...provided }),
   menu: Menu,
-  placeholder: styles => ({...styles, color: 'black', opacity: '1'}),
+  placeholder: (styles) => ({ ...styles, color: 'black', opacity: '1' }),
 };
 
 export const ConnectedSelect = (props: any) => {
@@ -42,7 +42,11 @@ export const ConnectedSelect = (props: any) => {
       `}
       data-cy={props.data_cy}
     >
-      <FieldInputLabel for={createID(props.label)} label={props.label} data-cy={'select-field-label'} />
+      <FieldInputLabel
+        for={createID(props.label)}
+        label={props.label}
+        data-cy={'select-field-label'}
+      />
       <Select
         inputId={createID(props.label)}
         data-cy={'select'}

diff --git a/src/app/modules/querybuilder-module/fragments/additional-filters/common/AddFilterModule.tsx b/src/app/modules/querybuilder-module/fragments/additional-filters/common/AddFilterModule.tsx
@@ -1,12 +1,12 @@
 /* core */
 import React from 'react';
 /* third-party */
+import get from 'lodash/get';
 import Grid from '@material-ui/core/Grid';
 /* project component */
 import { ConnectedSelect } from 'app/components/inputs/selects/ConnectedSelect';
 /* actions & store */
 import { useStoreActions, useStoreState } from 'app/state/store';
-import get from 'lodash/get';
 
 type Props = {
   label: string;
@@ -22,27 +22,6 @@ export function AddFilterModule(props: Props) {
     get(state, `${props.dataKey}.data`, [])
   );
   const action = useStoreActions((actions) => actions[props.dataKey].fetch);
-  const label = props.label;
-  if (label === 'IATI version') {
-    return (
-      <Grid item xs={12} sm={12} md={4} key={props.label}>
-        <ConnectedSelect
-          label={props.label}
-          value={props.value}
-          options={values || []}
-          onChange={props.onChange}
-          onMenuOpen={() => {
-            if (values.length === 0) {
-              action();
-            }
-          }}
-          placeholder={props.placeholder}
-          getOptionValue={(option) => option.code}
-          getOptionLabel={(option) => `${option.code}`}
-        />
-      </Grid>
-    );
-  }
 
   return (
     <Grid item xs={12} sm={12} md={4} key={props.label}>
@@ -58,7 +37,11 @@ export function AddFilterModule(props: Props) {
         }}
         placeholder={props.placeholder}
         getOptionValue={(option) => option.code}
-        getOptionLabel={(option) => `${option.code}: ${option.name}`}
+        getOptionLabel={(option) =>
+          `${option.code}${
+            props.label === 'IATI version' ? '' : `: ${option.name}`
+          }`
+        }
       />
     </Grid>
   );

diff --git a/src/app/modules/querybuilder-module/fragments/additional-filters/consts.tsx b/src/app/modules/querybuilder-module/fragments/additional-filters/consts.tsx
@@ -134,12 +134,24 @@ export const additionalFiltersPopData = [
           <AddFilterModule
             label="Tag"
             dataKey="tag"
-            placeholder="All other identifier types"
+            placeholder="All options"
             value={props.store.get('tag')}
             onChange={(e) => props.store.set('tag')(e)}
           />
         ),
       },
+      {
+        label: 'Tag vocabulary',
+        component: (props) => (
+          <AddFilterModule
+            label="Tag vocabulary"
+            dataKey="tagVocabulary"
+            placeholder="All options"
+            value={props.store.get('tagVocabulary')}
+            onChange={(e) => props.store.set('tagVocabulary')(e)}
+          />
+        ),
+      },
       {
         label: 'Policy marker',
         component: (props) => (

diff --git a/src/app/modules/querybuilder-module/fragments/results/layout.tsx b/src/app/modules/querybuilder-module/fragments/results/layout.tsx
@@ -26,6 +26,7 @@ import { DownloadButton } from 'app/modules/querybuilder-module/fragments/result
 import { FormResetButton } from 'app/modules/querybuilder-module/common/FormResetButton';
 import { RadioButton } from 'app/components/inputs/radiobuttons/RadioButton';
 import { RadioGroupTitle } from 'app/components/inputs/radiobuttons/RadioButtonGroup/common/RadioGroupTitle';
+import { getRetrievedItemsLabel } from './util';
 // import { setRows } from 'app/state/models/QueryModel';
 
 const filename = () => new Date().toISOString().slice(0, 19);
@@ -93,6 +94,8 @@ export const DownloadFragment = () => {
     }
   }, [allDataCount]);
 
+  const itemsLabel = getRetrievedItemsLabel(rowFormat);
+
   return (
     <Grid
       container
@@ -145,14 +148,14 @@ export const DownloadFragment = () => {
             {allDataCount > 50 && (
               <FormControlLabel
                 value="50"
-                control={<RadioButton id={"activities_radio"} />}
-                label="50 activities"
+                control={<RadioButton id="activities_radio" />}
+                label={`50 ${itemsLabel}`}
               />
             )}
             <FormControlLabel
               value={allDataCount.toString()}
-              control={<RadioButton id={"activities_radio_2"} />}
-              label={`${allDataCount} activities`}
+              control={<RadioButton id="activities_radio_2" />}
+              label={`${allDataCount} ${itemsLabel}`}
             />
           </RadioGroup>
         </Grid>

diff --git a/src/app/modules/querybuilder-module/fragments/results/util.ts b/src/app/modules/querybuilder-module/fragments/results/util.ts
@@ -30,3 +30,22 @@ export const cleanIframes = () => {
     iframes[i].parentNode.removeChild(iframes[i]);
   }
 };
+
+export const getRetrievedItemsLabel = (rowFormat: string, count?: number) => {
+  if (rowFormat === 'activity') {
+    if (count && count === 1) {
+      return 'activity';
+    }
+    return 'activities';
+  }
+  if (rowFormat === 'transaction') {
+    if (count && count === 1) {
+      return 'transaction';
+    }
+    return 'transactions';
+  }
+  if (count && count === 1) {
+    return 'budget';
+  }
+  return 'budgets';
+};
diff --git a/src/app/modules/querybuilder-module/state/effects.ts b/src/app/modules/querybuilder-module/state/effects.ts
@@ -239,6 +239,13 @@ export const withEffects: StoreEffect = (store) => {
           })
         : null;
 
+    const tagVocabulary =
+      store.get('tagVocabulary') && rowFormat === 'activity'
+        ? store.get('tagVocabulary').map((item: ActivityStatusModel) => {
+            return item.code;
+          })
+        : null;
+
     const defaultFlowType =
       store.get('defaultFlowType') && rowFormat === 'activity'
         ? store.get('defaultFlowType').map((item: ActivityStatusModel) => {
@@ -807,6 +814,9 @@ export const withEffects: StoreEffect = (store) => {
         ? `policy_marker_code:(${policyMarker && policyMarker.join(' ')})`
         : null,
       get(tag, 'length', 0) ? `tag_code:(${tag && tag.join(' ')})` : null,
+      get(tagVocabulary, 'length', 0)
+        ? `tag_vocabulary:(${tagVocabulary && tagVocabulary.join(' ')})`
+        : null,
     ];
 
     const surl = constructSolrQuery(

diff --git a/src/app/modules/querybuilder-module/state/store.ts b/src/app/modules/querybuilder-module/state/store.ts
@@ -50,6 +50,7 @@ export type ModuleStoreModel = {
   otherIdentifierType: ActivityStatusModel[];
   policyMarker: ActivityStatusModel[];
   tag: ActivityStatusModel[];
+  tagVocabulary: ActivityStatusModel[];
   mustHaveDates: string;
   startDateAfter: any;
   startDateBefore: any;
@@ -70,6 +71,7 @@ const initialState = fromLocalStorage<ModuleStoreModel>({
   sectors: [],
   policyMarker: [],
   tag: [],
+  tagVocabulary: [],
   sectorCategories: [],
   sectorVocabularies: [],
   countries: [],

diff --git a/src/app/state/api/index.ts b/src/app/state/api/index.ts
@@ -6,7 +6,7 @@ import { Endpoint } from 'app/state/interfaces/Endpoint';
 export const baseURL =
   'https://iatidatastore.iatistandard.org/search/activity?';
 // export const baseURL =
-//   'https://iatidatastore.iatistandard.org/search/activity?';
+//   'https://test-datastore.iatistandard.org/search/activity?';
 
 export const tableRows = 2500;
 
@@ -51,6 +51,8 @@ export const POLICY_MARKER = 'data/policy_marker.json';
 
 export const TAG = 'data/tag.json';
 
+export const TAG_VOCABULARY = 'api/codelists/TagVocabulary/?format=json';
+
 export const ORGANISATIONS =
   // @ts-ignore
   NODE_ENV === 'development'

diff --git a/src/app/state/interfaces/TagVocabularyInterface.ts b/src/app/state/interfaces/TagVocabularyInterface.ts
@@ -0,0 +1,12 @@
+import { ActivityStatusModel } from 'app/state/models';
+import { getTagVocabularies } from 'app/state/services/api-service';
+import api, { ApiModel } from 'app/state/api';
+
+export interface TagVocabularyInterface
+  extends ApiModel<ActivityStatusModel[]> {}
+
+const tagVocabulary: TagVocabularyInterface = {
+  ...api(getTagVocabularies),
+};
+
+export default tagVocabulary;
diff --git a/src/app/state/models/ApplicationStoreModel.ts b/src/app/state/models/ApplicationStoreModel.ts
@@ -29,6 +29,7 @@ import { TransactionReceiverOrgsInterface } from 'app/state/interfaces/Transacti
 import { ParticipatingOrgsInterface } from 'app/state/interfaces/ParticipatingOrgsInterface';
 import { SecondaryReporterInterface } from 'app/state/interfaces/SecondaryReporterInterface';
 import { PolicyMarkerInterface } from 'app/state/interfaces/PolicyMarkerInterface';
+import { TagVocabularyInterface } from 'app/state/interfaces/TagVocabularyInterface';
 
 import { QueryModel } from 'app/state/models/QueryModel';
 import { HierarchyInterface } from '../interfaces/HierarchyInterface';
@@ -74,4 +75,5 @@ export interface ApplicationStoreModel {
   secondaryReporter: SecondaryReporterInterface;
   policyMarker: PolicyMarkerInterface;
   tag: TagInterface;
+  tagVocabulary: TagVocabularyInterface;
 }
diff --git a/src/app/state/services/api-service.ts b/src/app/state/services/api-service.ts
@@ -31,6 +31,7 @@ import {
   TRANSACTION_RECEIVER_ORGS,
   TRANSACTION_TIED_STATUS,
   TRANSACTION_TYPE,
+  TAG_VOCABULARY,
 } from 'app/state/api';
 
 import { Endpoint } from 'app/state/interfaces/Endpoint';
@@ -82,6 +83,11 @@ export const getTag: Endpoint = (params: RequestInit = {}) =>
     method: 'GET',
   }).then((res) => res.json());
 
+export const getTagVocabularies: Endpoint = (params: RequestInit = {}) =>
+  fetch(HOSTNAME + TAG_VOCABULARY, {
+    method: 'GET',
+  }).then((res) => res.json());
+
 export const getRegions: Endpoint = (params: RequestInit = {}) =>
   fetch(HOSTNAME + REGIONS, {
     method: 'GET',

diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
@@ -35,8 +35,9 @@ import humanitarianScopeVocab from 'app/state/interfaces/HumanitarianScopeVocabI
 import transactionHumanitarian from 'app/state/interfaces/TransactionHumanitarianInterface';
 import otherIdentifierType from 'app/state/interfaces/OtherIdentifierTypeInterface';
 import participatingOrgs from 'app/state/interfaces/ParticipatingOrgsInterface';
-import policyMarker from '../interfaces/PolicyMarkerInterface';
+import policyMarker from 'app/state/interfaces/PolicyMarkerInterface';
 import tag from 'app/state/interfaces/TagInterface';
+import tagVocabulary from 'app/state/interfaces/TagVocabularyInterface';
 import { queryModel } from 'app/state/models/QueryModel';
 
 export const applicationStore: ApplicationStoreModel = {
@@ -76,6 +77,7 @@ export const applicationStore: ApplicationStoreModel = {
   otherIdentifierType: otherIdentifierType,
   policyMarker: policyMarker,
   tag: tag,
+  tagVocabulary: tagVocabulary,
 };
 
 const appStore = createStore(applicationStore);