Merge pull request #5937 from beyondessential/master

merge: Master to dev

packages/admin-panel/src/table/DataFetchingTable/useColumnFilters.js → packages/admin-panel/src/table/DataFetchingTable/useColumnFilters.jsx

@@ -2,25 +2,29 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
+import { useState } from 'react';
 import { useLocation, useSearchParams } from 'react-router-dom';
 
 /**
  * Utility hook for managing cell filters in the URL, to prevent multiple updates to the URL for the same filter
  */
 export const useColumnFilters = (defaultFilters = []) => {
+  const [defaults, setDefaults] = useState(defaultFilters);
   const location = useLocation();
   const [urlSearchParams, setUrlSearchParams] = useSearchParams();
   const urlFilters = urlSearchParams.get('filters');
-  const filters = urlFilters ? JSON.parse(urlFilters) : defaultFilters;
+  const filters = urlFilters ? JSON.parse(urlFilters) : defaults;
 
   const onChangeFilters = newFilters => {
+    // Check if the cleaned filters are the same as current filters
+    if (JSON.stringify(newFilters) === JSON.stringify(filters)) return;
+
+    // Clear the defaults if the filters are being updated
+    setDefaults([]);
+
     // Remove filters with empty values
     const updatedFilters = newFilters.filter(filter => filter.value !== '');
 
-    // Check if the cleaned filters are the same as current filters
-    if (JSON.stringify(updatedFilters) === JSON.stringify(filters)) return;
-
     if (updatedFilters.length === 0) {
       // If there are no filters left, delete the filters key
       urlSearchParams.delete('filters');

packages/datatrak-web/src/api/mutations/useCreateTask.ts

@@ -6,23 +6,35 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { DatatrakWebTaskChangeRequest } from '@tupaia/types';
 import { post } from '../api';
-import { successToast } from '../../utils';
+import { successToast, gaEvent } from '../../utils';
 import { useCurrentUserContext } from '../CurrentUserContext';
 
+type Data = DatatrakWebTaskChangeRequest.ReqBody & {
+  country_code: string;
+};
+
 export const useCreateTask = (onSuccess?: () => void) => {
   const queryClient = useQueryClient();
-  const { projectId } = useCurrentUserContext();
-  return useMutation<any, Error, DatatrakWebTaskChangeRequest.ReqBody, unknown>(
-    (data: DatatrakWebTaskChangeRequest.ReqBody) => {
+  const { projectId, project } = useCurrentUserContext();
+  return useMutation<any, Error, Data, unknown>(
+    (data: Data) => {
+      // Country code is not part of the task data, it's used for GA events
+      const { country_code, ...rest } = data;
       return post('tasks', {
-        data,
+        data: rest,
       });
     },
     {
-      onSuccess: () => {
+      onSuccess: (_, variables) => {
         queryClient.invalidateQueries(['tasks']);
         queryClient.invalidateQueries(['taskMetric', projectId]);
         successToast('Task successfully created');
+        // Send off GA events
+        gaEvent('task_created_by_project', project?.code!);
+        gaEvent('task_created_by_country', variables.country_code);
+        gaEvent('task_created_by_survey', variables.survey_code);
+        gaEvent('task_created', 'Task created');
+
         if (onSuccess) onSuccess();
       },
     },

packages/datatrak-web/src/features/Questions/AutocompleteQuestion.tsx

@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import throttle from 'lodash.throttle';
 import { createFilterOptions } from '@material-ui/lab';
@@ -76,6 +76,15 @@ export const AutocompleteQuestion = ({
     searchValue,
   );
 
+  //If we programmatically set the value of the input, we need to update the search value
+  useEffect(() => {
+    // if the selection is the same as the search value, do not update the search value
+    if (!selectedValue || typeof selectedValue !== 'string' || selectedValue === searchValue)
+      return;
+
+    setSearchValue(selectedValue);
+  }, [JSON.stringify(selectedValue)]);
+
   const canCreateNew = !!createNew;
 
   const getOptionSelected = (option: Option, selectedOption?: string | null) => {

packages/datatrak-web/src/features/Tasks/CreateTaskModal/CreateTaskModal.tsx

@@ -140,6 +140,13 @@ export const CreateTaskModal = ({ onClose }: CreateTaskModalProps) => {
   const isLoadingData = isLoadingCountries || isLoadingUser || isFetchingUser;
   const { mutate: createTask, isLoading: isSaving } = useCreateTask(onClose);
 
+  const handleCreateTask = data => {
+    createTask({
+      ...data,
+      country_code: selectedCountry?.code,
+    });
+  };
+
   const buttons: {
     text: string;
     onClick: () => void;
@@ -156,7 +163,7 @@ export const CreateTaskModal = ({ onClose }: CreateTaskModalProps) => {
     },
     {
       text: 'Save',
-      onClick: handleSubmit(createTask),
+      onClick: handleSubmit(handleCreateTask),
       id: 'save',
       disabled: !isValid || isSaving || isLoadingData,
     },

packages/ui-components/src/components/DateRangePicker/YearPicker.tsx

@@ -133,13 +133,18 @@ export const YearPicker = ({
     const startDate = getOffsetStartDateForYear(y, granularity, dateOffset);
     const endDate = getOffsetEndDateForYear(y, startDate, granularity, dateOffset);
     // use the correct year based on the valueKey
-    const yearToUse = valueKey === 'startDate' ? startDate : endDate;
+    let yearToUse = y;
+
+    if (dateOffset) {
+      const keyDate = valueKey === 'startDate' ? startDate : endDate;
+      yearToUse = keyDate.year();
+    }
 
     if (startDate.isAfter(maxMomentDate)) {
       continue;
     }
     yearOptions.push({
-      value: yearToUse.year(),
+      value: yearToUse,
       displayLabel,
       startDate,
       endDate,
@@ -160,7 +165,6 @@ export const YearPicker = ({
     if (!dateOffset) {
       return momentToYear(momentDateValue);
     }
-
     const applicableOption = yearOptions.find(option => {
       const { startDate, endDate } = option;
       if (valueKey === 'startDate') {
@@ -174,7 +178,6 @@ export const YearPicker = ({
     return applicableOption[valueKey].year();
   };
   const selectedOption = getSelectedOption();
-
   return (
     <DatePicker
       label="Year"