@abgov/nx-adsp 5.8.0 → 5.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "5.8.0",
+  "version": "5.8.2",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/react-form/files/__fileName__/__fileName__.module.css__tmpl__

@@ -1,4 +1,6 @@
 .form {
+  max-width: 800px;
+  
   > fieldset {
     display: none;
   }

package/src/generators/react-form/files/__fileName__/__fileName__.slice.ts__tmpl__

@@ -49,6 +49,7 @@ export interface <%= className %>State {
     saving: boolean;
     submitting: boolean;
   };
+  errorMessage: string;
 }
 
 function areSectionsComplete(
@@ -75,7 +76,7 @@ function areSectionsComplete(
     let completion: SectionCompletion = null;
     if (!hasError && hasValues.length === requiredValues.length) {
       completion = 'complete';
-    } else {
+    } else if (hasValues.length > 0) {
       // This means partial completion.
       completion = 'incomplete';
     }
@@ -172,6 +173,11 @@ const formSaved = createAction(
   (values: <%= className %>) => ({ payload: values })
 );
 
+const formSaveRejected = createAction(
+  '<%= propertyName %>/save-rejected',
+  (message: string) => ({ payload: message })
+);
+
 const queueSaveForm = createAsyncThunk(
   '<%= propertyName %>/queue-save',
   debounce(
@@ -181,13 +187,22 @@ const queueSaveForm = createAsyncThunk(
       const { formId }: <%= className %>State =
         state[<%= constantName %>_FEATURE_KEY];
 
-      await axios.put(
-        `${FORM_SERVICE_URL}/form/v1/forms/${formId}/data`,
-        { data: values },
-        { headers: { Authorization: `Bearer ${user.access_token}` } }
-      );
-
-      dispatch(formSaved(values));
+      try {
+        await axios.put(
+          `${FORM_SERVICE_URL}/form/v1/forms/${formId}/data`,
+          { data: values },
+          { headers: { Authorization: `Bearer ${user.access_token}` } }
+        );
+
+        dispatch(formSaved(values));
+      } catch (err) {
+        let message = 'Unexpected error saving form.';
+        if (axios.isAxiosError(err) && err.response?.status === 400) {
+          message = err.response?.data?.errorMessage;
+        }
+        
+        dispatch(formSaveRejected(message));
+      }
     },
     2000,
     { trailing: true, leading: false }
@@ -256,6 +271,7 @@ export const initial<%= className %>State: <%= className %>State = {
     saving: false,
     submitting: false,
   },
+  errorMessage: null,
 };
 
 export const <%= propertyName %>Slice = createSlice({
@@ -292,6 +308,10 @@ export const <%= propertyName %>Slice = createSlice({
       .addCase(formSaved, (state) => {
         state.busy.saving = false;
       })
+      .addCase(formSaveRejected, (state, action) => {
+        state.busy.saving = false;
+        state.errorMessage = action.payload;
+      })
       .addCase(queueSaveForm.rejected, (state) => {
         state.busy.saving = false;
       })

package/src/generators/react-form/files/__fileName__/__fileName__.tsx__tmpl__

@@ -67,7 +67,7 @@ const <%= section.className %>FieldSet: FunctionComponent<FieldSetProps> = ({
           <p><%= value.constant %></p>
           <%_ } _%>
         <%_ } else { _%>
-          <GoAFormItem label="<%= value.title || key %>" helpText="<%= value.description %>">
+          <GoAFormItem mb="m" label="<%= value.title || key %>" helpText="<%= value.description %>">
           <%_ switch(value.type) { 
             case 'string': _%>
             <%_ if (value.enum) { _%>
@@ -129,7 +129,7 @@ const <%= section.className %>FieldSet: FunctionComponent<FieldSetProps> = ({
               disabled={isReadOnly || inReview}
               error={errors['<%= key %>']}
               placeholder="<%= value?.examples || []%>"
-              onChange={(name, updated) => onChange({ ...value, [name]: updated })}
+              onChange={(name, updated) => onChange({ ...value, [name]: parseFloat(updated) })}
               value={`${value.<%= key %> || ''}`}
               name="<%= key %>"
               <%_ if (value?.maximum !== undefined) { _%>