Modify defaults form to save user's preferences to database

funidata · Jun 18, 2024 · 0a98046 · 0a98046
1 parent 5b1b61f
commit 0a98046
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 43 deletions.
diff --git a/web/src/components/defaults-dialog/DefaultsForm.tsx b/web/src/components/defaults-dialog/DefaultsForm.tsx
@@ -1,50 +1,49 @@
-import { useLazyQuery } from "@apollo/client";
-import { Grid } from "@mui/material";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
+import { useMutation, useQuery } from "@apollo/client";
+import { Autocomplete, FormControl, Grid, TextField } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { GetMySettingsDocument } from "../../graphql/generated/graphql";
-import DimensionComboBox from "../entry-dialog/DimensionComboBox";
-import useDefaultEntryValues from "../user-preferences/useDefaultEntryValues";
-
-type DefaultsFormSchema = {
-  activity: string;
-  product: string;
-};
+import {
+  FindDimensionOptionsDocument,
+  GetMySettingsDocument,
+  UpdateSettingsDocument,
+} from "../../graphql/generated/graphql";
 
 const DefaultsForm = () => {
   const { t } = useTranslation();
-
-  const [getMySettings] = useLazyQuery(GetMySettingsDocument);
-
-  const getDefaultValues = async (): Promise<DefaultsFormSchema> => {
-    const { data: settingsData } = await getMySettings();
-
-    return {
-      product: settingsData?.getMySettings.productPreset || "",
-      activity: settingsData?.getMySettings.activityPreset || "",
-    };
-  };
-
-  const { setDefaultValues } = useDefaultEntryValues();
-  const form = useForm<DefaultsFormSchema>({
-    defaultValues: getDefaultValues,
+  const { data: dimensionData } = useQuery(FindDimensionOptionsDocument);
+  const { data: settingsData } = useQuery(GetMySettingsDocument);
+  const [updateSettings] = useMutation(UpdateSettingsDocument, {
+    refetchQueries: [GetMySettingsDocument],
   });
 
-  const { watch } = form;
-
-  useEffect(() => {
-    const sub = watch((value) => setDefaultValues(value));
-    return () => sub.unsubscribe();
-  }, [setDefaultValues, watch]);
+  if (!settingsData) {
+    return null;
+  }
 
   return (
     <Grid container spacing={3}>
       <Grid item xs={12} md={6}>
-        <Grid container spacing={2}>
-          <DimensionComboBox form={form} name="product" title={t("entryDialog.product")} />
-          <DimensionComboBox form={form} name="activity" title={t("entryDialog.activity")} />
-        </Grid>
+        <FormControl fullWidth>
+          <Autocomplete
+            onChange={(_, value) =>
+              updateSettings({ variables: { settings: { productPreset: value } } })
+            }
+            options={dimensionData?.findDimensionOptions.product || []}
+            value={settingsData?.getMySettings.productPreset}
+            renderInput={(params) => <TextField {...params} label={t("entryDialog.product")} />}
+          />
+        </FormControl>
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <FormControl fullWidth>
+          <Autocomplete
+            onChange={(_, value) =>
+              updateSettings({ variables: { settings: { activityPreset: value } } })
+            }
+            options={dimensionData?.findDimensionOptions.activity || []}
+            value={settingsData?.getMySettings.activityPreset}
+            renderInput={(params) => <TextField {...params} label={t("entryDialog.activity")} />}
+          />
+        </FormControl>
       </Grid>
     </Grid>
   );

diff --git a/web/src/components/entry-dialog/useEntryForm.tsx b/web/src/components/entry-dialog/useEntryForm.tsx
@@ -78,11 +78,7 @@ const useEntryForm = ({ editEntry, date }: useEntryProps) => {
   };
 
   const form = useForm<EntryFormSchema>({
-    defaultValues: async () => {
-      const asd = await getDefaultValues();
-      console.log(asd);
-      return asd;
-    },
+    defaultValues: getDefaultValues,
   });
 
   const { loading: hoursLoading } = useFormSetRemainingHours({

diff --git a/web/src/graphql/generated/graphql.ts b/web/src/graphql/generated/graphql.ts
@@ -66,6 +66,7 @@ export type Mutation = {
   addWorkdayEntry: Scalars['String']['output'];
   removeWorkdayEntry: Scalars['String']['output'];
   replaceWorkdayEntry: Scalars['String']['output'];
+  updateSettings: UserSettings;
 };
 
 
@@ -84,6 +85,11 @@ export type MutationReplaceWorkdayEntryArgs = {
   replacementEntry: AddWorkdayEntryInput;
 };
 
+
+export type MutationUpdateSettingsArgs = {
+  settings: UpdateSettingsDto;
+};
+
 export type Query = {
   __typename?: 'Query';
   findDimensionOptions: DimensionOptions;
@@ -107,6 +113,11 @@ export type SessionStatus = {
   employeeNumber?: Maybe<Scalars['Float']['output']>;
 };
 
+export type UpdateSettingsDto = {
+  activityPreset?: InputMaybe<Scalars['String']['input']>;
+  productPreset?: InputMaybe<Scalars['String']['input']>;
+};
+
 export type UserSettings = {
   __typename?: 'UserSettings';
   activityPreset?: Maybe<Scalars['String']['output']>;
@@ -165,11 +176,19 @@ export type GetMySettingsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetMySettingsQuery = { __typename?: 'Query', getMySettings: { __typename?: 'UserSettings', employeeNumber: number, productPreset?: string | null, activityPreset?: string | null } };
 
+export type UpdateSettingsMutationVariables = Exact<{
+  settings: UpdateSettingsDto;
+}>;
+
+
+export type UpdateSettingsMutation = { __typename?: 'Mutation', updateSettings: { __typename?: 'UserSettings', employeeNumber: number } };
+
 
 export const AddWorkdayEntryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddWorkdayEntry"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"entry"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AddWorkdayEntryInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addWorkdayEntry"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"entry"},"value":{"kind":"Variable","name":{"kind":"Name","value":"entry"}}}]}]}}]} as unknown as DocumentNode<AddWorkdayEntryMutation, AddWorkdayEntryMutationVariables>;
 export const FindDimensionOptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindDimensionOptions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"findDimensionOptions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"product"}},{"kind":"Field","name":{"kind":"Name","value":"activity"}},{"kind":"Field","name":{"kind":"Name","value":"issue"}},{"kind":"Field","name":{"kind":"Name","value":"client"}}]}}]}}]} as unknown as DocumentNode<FindDimensionOptionsQuery, FindDimensionOptionsQueryVariables>;
 export const FindWorkdaysDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindWorkdays"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"start"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DateTime"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"end"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DateTime"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"findWorkdays"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"query"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"start"},"value":{"kind":"Variable","name":{"kind":"Name","value":"start"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"end"},"value":{"kind":"Variable","name":{"kind":"Name","value":"end"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"date"}},{"kind":"Field","name":{"kind":"Name","value":"entries"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"duration"}},{"kind":"Field","name":{"kind":"Name","value":"durationInHours"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"acceptanceStatus"}},{"kind":"Field","name":{"kind":"Name","value":"typeName"}},{"kind":"Field","name":{"kind":"Name","value":"ratioNumber"}},{"kind":"Field","name":{"kind":"Name","value":"product"}},{"kind":"Field","name":{"kind":"Name","value":"activity"}},{"kind":"Field","name":{"kind":"Name","value":"issue"}},{"kind":"Field","name":{"kind":"Name","value":"client"}}]}}]}}]}}]} as unknown as DocumentNode<FindWorkdaysQuery, FindWorkdaysQueryVariables>;
 export const GetSessionStatusDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSessionStatus"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getSessionStatus"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"employeeNumber"}}]}}]}}]} as unknown as DocumentNode<GetSessionStatusQuery, GetSessionStatusQueryVariables>;
 export const RemoveWorkdayEntryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"RemoveWorkdayEntry"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"entry"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoveWorkdayEntryInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"removeWorkdayEntry"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"entry"},"value":{"kind":"Variable","name":{"kind":"Name","value":"entry"}}}]}]}}]} as unknown as DocumentNode<RemoveWorkdayEntryMutation, RemoveWorkdayEntryMutationVariables>;
 export const ReplaceWorkdayEntryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ReplaceWorkdayEntry"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"originalEntry"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoveWorkdayEntryInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"replacementEntry"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AddWorkdayEntryInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"replaceWorkdayEntry"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"originalEntry"},"value":{"kind":"Variable","name":{"kind":"Name","value":"originalEntry"}}},{"kind":"Argument","name":{"kind":"Name","value":"replacementEntry"},"value":{"kind":"Variable","name":{"kind":"Name","value":"replacementEntry"}}}]}]}}]} as unknown as DocumentNode<ReplaceWorkdayEntryMutation, ReplaceWorkdayEntryMutationVariables>;
-export const GetMySettingsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetMySettings"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getMySettings"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"employeeNumber"}},{"kind":"Field","name":{"kind":"Name","value":"productPreset"}},{"kind":"Field","name":{"kind":"Name","value":"activityPreset"}}]}}]}}]} as unknown as DocumentNode<GetMySettingsQuery, GetMySettingsQueryVariables>;
+export const GetMySettingsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetMySettings"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getMySettings"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"employeeNumber"}},{"kind":"Field","name":{"kind":"Name","value":"productPreset"}},{"kind":"Field","name":{"kind":"Name","value":"activityPreset"}}]}}]}}]} as unknown as DocumentNode<GetMySettingsQuery, GetMySettingsQueryVariables>;
+export const UpdateSettingsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateSettings"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"settings"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateSettingsDto"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateSettings"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"settings"},"value":{"kind":"Variable","name":{"kind":"Name","value":"settings"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"employeeNumber"}}]}}]}}]} as unknown as DocumentNode<UpdateSettingsMutation, UpdateSettingsMutationVariables>;
diff --git a/web/src/graphql/user-settings.graphql b/web/src/graphql/user-settings.graphql
@@ -5,3 +5,9 @@ query GetMySettings {
     activityPreset
   }
 }
+
+mutation UpdateSettings($settings: UpdateSettingsDto!) {
+  updateSettings(settings: $settings) {
+    employeeNumber
+  }
+}