@abgov/nx-adsp 5.8.0-beta.4 → 5.8.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "5.8.0-beta.4",
+  "version": "5.8.0-beta.5",
   "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,3 +1,13 @@
+.form {
+  > fieldset {
+    display: none;
+  }
+
+  > fieldset.show {
+    display: block;
+  }
+}
+
 .formActions {  
   display: flex;
   margin-top: 16px;
@@ -5,8 +15,40 @@
   > * {
     margin-left: 16px;
   }
+  
+  .save {
+    margin-right: auto;
+    display: flex;
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: 500ms;
+    
+    > * {
+      margin-top: auto;
+      margin-bottom: auto;
+      margin-right: 8px;
+    }
+  }
 
+  .save[data-show='true'] {
+    opacity: 1;
+  }
+}
+
+.sectionActions {
+  display: flex;
+  
   > *:first-child {
-    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.load {
+  display: flex;
+  flex-direction: row;
+  padding-top: 64px;
+  padding-bottom: 64px;
+  > * {
+    margin: auto;
   }
 }

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

@@ -0,0 +1,23 @@
+import {
+  initial<%= className %>State,
+  <%= propertyName %>Actions,
+  <%= propertyName %>Reducer,
+} from './<%= fileName %>.slice';
+
+describe('<%= name %> slice', () => {
+  describe('<%= propertyName %>Reducer', () => {
+    it('can handle initial state', () => {
+      expect(<%= propertyName %>Reducer(undefined, { type: '' })).toEqual(
+        initial<%= className %>State
+      );
+    });
+
+    it('can handle set step action', () => {
+      expect(
+        <%= propertyName %>Reducer(undefined, <%= propertyName %>Actions.setStep(2))
+      ).toMatchObject({ step: 2 });
+    });
+
+    // TODO: Add state unit tests.
+  });
+});

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

@@ -1,4 +1,5 @@
 import {
+  PayloadAction,
   createAction,
   createAsyncThunk,
   createSelector,
@@ -15,10 +16,10 @@ const FORM_SERVICE_URL = '<%= formServiceUrl %>';
 /*
  * Update these interfaces according to your requirements.
  */
-<%= interfaceDefinition %>
-
+<%- interfaceDefinition %>
+<% const sections = Object.entries(dataSchema.properties); %>
 const rules: Record<string, Record<string, RegExp>> = {
-  <%_ Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { _%>
+  <%_ sections.forEach(function([sectionKey, section]) { _%>
   <%= sectionKey %>: {
   <%_ Object.entries(section.properties).filter(([_, { pattern }]) => !!pattern).forEach(function([key, value]) { _%>
     <%= key %>: new RegExp('<%- value.pattern %>')
@@ -28,17 +29,21 @@ const rules: Record<string, Record<string, RegExp>> = {
 };
 
 const required: Record<string, string[]> = {
-  <%_ Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { _%>
+  <%_ sections.forEach(function([sectionKey, section]) { _%>
     <%= sectionKey %>: [<%- section.required?.map(req => `'${req}'`) || "" %>],
   <%_ }); _%>
 };
 
+type FormStatus = 'draft' | 'locked' | 'submitted';
+type SectionCompletion = 'complete' | 'incomplete' | null;
+
 export interface <%= className %>State {
   formId: string;
+  status: FormStatus;
+  step: number;
   values: <%= className %>;
   errors: Record<string, Record<string, boolean>>;
-  complete: Record<string, boolean>;
-  review: boolean;
+  complete: Record<string, SectionCompletion>;
   busy: {
     loading: boolean;
     saving: boolean;
@@ -46,6 +51,41 @@ export interface <%= className %>State {
   };
 }
 
+function areSectionsComplete(
+  values: <%= className %>,
+  errors: Record<string, Record<string, boolean>> = {}
+): Record<string, SectionCompletion> {
+  const complete: Record<string, SectionCompletion> = {};
+  Object.entries(required).forEach(([section, requiredValues]) => {
+    const sectionValue = values[section] || {};
+
+    const hasValues = requiredValues
+      .map(
+        (required) =>
+          sectionValue[required] !== undefined &&
+          sectionValue[required] !== null &&
+          sectionValue[required] !== ''
+      )
+      .filter((hasValue) => hasValue);
+
+    const hasError =
+      Object.values(errors[section] || {}).filter((error) => error).length > 0;
+
+    // Note that sections with no required values are considered complete.
+    let completion: SectionCompletion = null;
+    if (!hasError && hasValues.length === requiredValues.length) {
+      completion = 'complete';
+    } else {
+      // This means partial completion.
+      completion = 'incomplete';
+    }
+    
+    complete[section] = completion;
+  });
+
+  return complete;
+}
+
 /**
  * Export an effect using createAsyncThunk from
  * the Redux Toolkit: https://redux-toolkit.js.org/api/createAsyncThunk
@@ -71,7 +111,7 @@ export const initializeForm = createAsyncThunk(
       throw new Error('No active user session.');
     }
 
-    const { data: forms } = await axios.get<{ results: { id: string }[] }>(
+    const { data: forms } = await axios.get<{ results: { id: string; status: FormStatus }[] }>(
       `${FORM_SERVICE_URL}/form/v1/forms`,
       {
         headers: {
@@ -86,9 +126,9 @@ export const initializeForm = createAsyncThunk(
       }
     );
 
-    let formId = forms.results?.[0]?.id;
-    if (!formId) {
-      const { data: form } = await axios.post<{ id: string }>(
+    let form = forms.results?.[0];
+    if (!form) {
+      const { data: newForm } = await axios.post<{ id: string; status: FormStatus }>(
         `${FORM_SERVICE_URL}/form/v1/forms`,
         {
           definitionId: FORM_DEFINITION_ID,
@@ -109,19 +149,21 @@ export const initializeForm = createAsyncThunk(
           },
         }
       );
-      formId = form.id;
+      form = newForm;
     }
 
     const { data } = await axios.get<{
       id: string;
       data: <%= className %>;
-    }>(`${FORM_SERVICE_URL}/form/v1/forms/${formId}/data`, {
+    }>(`${FORM_SERVICE_URL}/form/v1/forms/${form.id}/data`, {
       headers: {
         Authorization: `Bearer ${user.access_token}`,
       },
     });
 
-    return data;
+    const complete = areSectionsComplete(data.data);
+
+    return { ...form, ...data, complete };
   }
 );
 
@@ -172,20 +214,7 @@ export const updateForm = createAsyncThunk(
       errors[section] = sectionErrors;
     });
 
-    const complete: Record<string, boolean> = {};
-    Object.entries(required).forEach(([section, requiredValues]) => {
-      const sectionValue = values[section] || {};
-      complete[section] =
-        Object.values(errors[section]).filter((error) => error).length < 1 &&
-        requiredValues
-          .map(
-            (required) =>
-              sectionValue[required] !== undefined &&
-              sectionValue[required] !== null && 
-              sectionValue[required] !== ''
-          )
-          .filter((hasValue) => !hasValue).length < 1;
-    });
+    const complete = areSectionsComplete(values, errors);
 
     if (!hasError) {
       dispatch(queueSaveForm(values));
@@ -197,11 +226,19 @@ export const updateForm = createAsyncThunk(
 
 export const submitForm = createAsyncThunk(
   '<%= propertyName %>/submit',
-  async (formId: string) => {
+  async (_, { getState }) => {
+    const state = getState();
+    const { user }: UserState = state['user'];
+    const { formId }: <%= className %>State = state[<%= constantName %>_FEATURE_KEY];    
+    
     const { data } = await axios.post(
       `${FORM_SERVICE_URL}/form/v1/forms/${formId}`,
       { operation: 'submit' },
-      { headers: {} }
+      {
+        headers: {
+          Authorization: `Bearer ${user.access_token}`,
+        },
+      }
     );
     return data;
   }
@@ -209,10 +246,11 @@ export const submitForm = createAsyncThunk(
 
 export const initial<%= className %>State: <%= className %>State = {
   formId: null,
+  status: null,
+  step: 1,
   values: {} as <%= className %>,
   errors: {},
   complete: {},
-  review: false,
   busy: {
     loading: false,
     saving: false,
@@ -223,7 +261,11 @@ export const initial<%= className %>State: <%= className %>State = {
 export const <%= propertyName %>Slice = createSlice({
   name: <%= constantName %>_FEATURE_KEY,
   initialState: initial<%= className %>State,
-  reducers: {},
+  reducers: {
+    setStep: (state, action: PayloadAction<number>) => {
+      state.step = action.payload;
+    },
+  },
   extraReducers: (builder) => {
     builder
       .addCase(initializeForm.pending, (state) => {
@@ -231,7 +273,9 @@ export const <%= propertyName %>Slice = createSlice({
       })
       .addCase(initializeForm.fulfilled, (state, action) => {
         state.formId = action.payload.id;
+        state.status = action.payload.status;
         state.values = action.payload.data;
+        state.complete = action.payload.complete;
         state.busy.loading = false;
       })
       .addCase(initializeForm.rejected, (state) => {
@@ -250,6 +294,16 @@ export const <%= propertyName %>Slice = createSlice({
       })
       .addCase(queueSaveForm.rejected, (state) => {
         state.busy.saving = false;
+      })
+      .addCase(submitForm.pending, (state) => {
+        state.busy.submitting = true;
+      })
+      .addCase(submitForm.fulfilled, (state) => {
+        state.busy.submitting = false;
+        state.status = 'submitted'
+      })
+      .addCase(submitForm.rejected, (state) => {
+        state.busy.submitting = false;
       });
   },
 });
@@ -299,6 +353,16 @@ export const get<%= className %>State = (
   rootState: unknown
 ): <%= className %>State => rootState[<%= constantName %>_FEATURE_KEY];
 
+export const getFormStatus = createSelector(
+  get<%= className %>State,
+  (state) => state.status
+);
+
+export const getFormStep = createSelector(
+  get<%= className %>State,
+  (state) => state.step
+);
+
 export const getFormValues = createSelector(
   get<%= className %>State,
   (state) => state.values
@@ -318,3 +382,17 @@ export const getFormComplete = createSelector(
   get<%= className %>State,
   (state) => state.complete
 );
+
+export const getFormInReview = createSelector(
+  get<%= className %>State,
+  (state) => state.step === <%= sections.length + 1 %>
+);
+
+export const getFormCanSubmit = createSelector(
+  get<%= className %>State,
+  (state) =>
+    !state.busy.saving && !state.busy.submitting &&
+    state.status === 'draft' &&
+    Object.values(state.complete).filter((complete) => complete !== 'complete')
+      .length < 1
+);

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

@@ -1,10 +1,18 @@
 import {
   GoAButton,
+  GoAButtonGroup,
+  GoACallout,
   GoACheckbox,
+  GoADropdown,
+  GoADropdownItem,
   GoAFormItem,
   GoAFormStep,
   GoAFormStepper,
   GoAInput,
+  GoAInputDate,
+  GoAInputDateTime,
+  GoAInputTime,
+  GoANotification,
   GoASpinner,
 } from '@abgov/react-components';
 import { FunctionComponent, useEffect } from 'react';
@@ -12,61 +20,134 @@ import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch } from '../../store';
 import {
   getFormBusy,
+  getFormCanSubmit,
   getFormComplete,
   getFormErrors,
+  getFormInReview,
+  getFormStatus,
+  getFormStep,
   getFormValues,
   initializeForm,
+  submitForm,
+  <%= propertyName %>Actions,
   updateForm,
 } from './<%= fileName %>.slice';
 import styles from './<%= fileName %>.module.css';
 
 interface FieldSetProps {
+  className?: string;
+  inReview: boolean;
+  isReadOnly: boolean;
   value: Record<string, unknown>;
   errors: Record<string, boolean>;
   onChange: (value: Record<string, unknown>) => void;
+  onEdit: () => void;
 }
 
 <% Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { %>
 const <%= section.className %>FieldSet: FunctionComponent<FieldSetProps> = ({
+  className,
+  inReview,
+  isReadOnly,
   value,
   errors,
   onChange,
+  onEdit,
 }) => {
   return (
-    <fieldset>
+    <fieldset className={className}>
       <legend><%= section.title || sectionKey %></legend>
+      <div className={styles.sectionActions}>
+        <p><%= section.description %></p>
+        {!isReadOnly && inReview && <GoAButton type="tertiary" onClick={onEdit}>Edit</GoAButton>}
+      </div>
       <%_ Object.entries(section.properties).forEach(function([key, value]) { _%>
-      <GoAFormItem label="<%= value.title || key %>" helpText="<%= value.description %>">
-      <%_ switch(value.type) { 
-        case 'string': _%>
-        <GoAInput
-          type="text"
-          error={errors['<%= key %>']}
-          onChange={(name, updated) => onChange({ ...value, [name]: updated })}
-          value={`${value.<%= key %> || ''}`}
-          name="<%= key %>"
-        />
-      <%_ break;
-        case 'number': _%>
-        <GoAInput
-          type="number"
-          error={errors['<%= key %>']}
-          onChange={(name, updated) => onChange({ ...value, [name]: updated })}
-          value={`${value.<%= key %> || ''}`}
-          name="<%= key %>"
-        />
-      <%_ break;
-        case 'boolean': _%>
-        <GoACheckbox
-          checked={value.<%= key %> as any || false}
-          onChange={(name, updated) => onChange({ ...value, [name]: updated })}          
-          name="<%= key %>"
-        />
-      <%_ break;
-        default:
-        break; _%>
-      <%_ } _%>
-      </GoAFormItem>
+        <%_ if (!value.type) { _%>
+          <%_ if (value.constant) { _%>
+          <p><%= value.constant %></p>
+          <%_ } _%>
+        <%_ } else { _%>
+          <GoAFormItem label="<%= value.title || key %>" helpText="<%= value.description %>">
+          <%_ switch(value.type) { 
+            case 'string': _%>
+            <%_ if (value.enum) { _%>
+              <GoADropdown 
+                name="<%= key %>"
+                disabled={isReadOnly || inReview}
+                onChange={(name, updated) => onChange({ ...value, [name]: updated })}
+                value={`${value.<%= key %> || ''}`}
+              >
+                <%_ value.enum.forEach((enumValue) => { _%>
+                  <GoADropdownItem value="<%= enumValue %>" label="<%= enumValue %>" />
+                <%_ }); _%>
+              </GoADropdown>
+            <%_ } else { _%>
+              <%_ switch(value.format) { 
+                case 'date-time': _%>
+                <GoAInputDateTime
+                  name="<%= key %>"
+                  disabled={isReadOnly || inReview}
+                  value={value.<%= key %> ? new Date(value.<%= key %> as string) : null}
+                  onChange={(name, updated) => onChange({ ...value, [name]: (updated as Date)?.toISOString() })}
+                />
+              <%_ break;
+                case 'date': _%>
+                <GoAInputDate
+                  name="<%= key %>"
+                  disabled={isReadOnly || inReview}
+                  value={value.<%= key %> ? new Date(value.<%= key %> as string) : null}
+                  onChange={(name, updated) => onChange({ ...value, [name]: (updated as Date)?.toISOString() })}
+                />
+              <%_ break;
+                case 'time': _%>
+                <GoAInputTime
+                  name="<%= key %>"
+                  step={1}
+                  disabled={isReadOnly || inReview}
+                  value={value.<%= key %> ? new Date(value.<%= key %> as string) : null}
+                  onChange={(name, updated) => onChange({ ...value, [name]: (updated as Date)?.toISOString() })}
+                />
+              <%_ break;
+                default: _%>
+                <GoAInput
+                  type="text"
+                  disabled={isReadOnly || inReview}
+                  error={errors['<%= key %>']}
+                  placeholder="<%= value?.examples?.join(', ') || '' %>"
+                  onChange={(name, updated) => onChange({ ...value, [name]: updated })}
+                  value={`${value.<%= key %> || ''}`}
+                  name="<%= key %>"
+                />
+              <%_ break;
+                } _%>
+            <%_ } _%>
+          <%_ break;
+            case 'number': _%>
+            <GoAInput
+              type="number"
+              disabled={isReadOnly || inReview}
+              error={errors['<%= key %>']}
+              placeholder="<%= value?.examples || []%>"
+              onChange={(name, updated) => onChange({ ...value, [name]: updated })}
+              value={`${value.<%= key %> || ''}`}
+              name="<%= key %>"
+            />
+          <%_ break;
+            case 'boolean': _%>
+            <GoACheckbox
+              disabled={isReadOnly || inReview}
+              checked={value.<%= key %> as any || false}
+              onChange={(name, updated) => onChange({ ...value, [name]: updated })}          
+              name="<%= key %>"
+            />
+          <%_ break;
+            case 'array': _%>
+          <%_ break;
+            default:
+            break; _%>
+          <%_ } _%>
+          </GoAFormItem>
+        <%_ } _%>
       <%_ }); _%>
     </fieldset>
   );
@@ -80,18 +161,36 @@ export const <%= className %>Form: FunctionComponent = () => {
     dispatch(initializeForm());
   }, [dispatch, user]);
 
+  const formStatus = useSelector(getFormStatus);
+  const formStep = useSelector(getFormStep);
   const formData = useSelector(getFormValues);
   const formErrors = useSelector(getFormErrors);
   const formBusy = useSelector(getFormBusy);
   const formComplete = useSelector(getFormComplete);
-
+  const inReview = useSelector(getFormInReview);
+  const canSubmit = useSelector(getFormCanSubmit);
+  
+  <% const sections = Object.entries(dataSchema.properties); %>
   return (
-    <form>
-      <GoAFormStepper testId="<%= fileName %>>">
-      <%_ Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { _%>
+    <form className={styles.form}>
+      <GoANotification type="important">
+        This is a generated rapid prototype. Use it as a starting point to build the right thing for users.
+      </GoANotification>
+      { 
+        formStatus === 'submitted' && 
+        <GoACallout type="success" heading="<%= name %> form submitted">
+          We received your <%= name %> form and it is being processed.
+        </GoACallout>
+      }
+      <GoAFormStepper 
+        testId="<%= fileName %>"
+        step={formStep}
+        onChange={(step) => dispatch(<%= propertyName %>Actions.setStep(step))}
+      >
+      <%_ sections.forEach(function([sectionKey, section]) { _%>
         <GoAFormStep 
           text="<%= section.title || sectionKey %>" 
-          status={formComplete['<%= sectionKey %>'] ? 'complete' : null} />
+          status={formComplete['<%= sectionKey %>']} />
       <%_ }); _%>
         <GoAFormStep text="Review" />
       </GoAFormStepper>
@@ -101,20 +200,48 @@ export const <%= className %>Form: FunctionComponent = () => {
         </div>
       ) : (
         <>
-        <%_ Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { _%>
-          <<%= section.className %>FieldSet            
+        <%_ sections.forEach(function([sectionKey, section], idx) { _%>
+          <<%= section.className %>FieldSet
+            className={formStep === <%= idx + 1 %> || formStep === <%= sections.length + 1 %> ? styles.show : ''}
+            inReview={inReview}
+            isReadOnly={formStatus !== 'draft'}
             value={formData.<%= sectionKey %> as any || {}}
             errors={formErrors['<%= sectionKey %>'] || {}}
             onChange={(value) =>
               dispatch(updateForm({ ...formData, '<%= sectionKey %>': value as any }))
             }
+            onEdit={() => dispatch(<%= propertyName %>Actions.setStep(<%= idx + 1 %>))}
           />
         <%_ }); _%>
         </>
       )}
       <div className={styles.formActions}>
-        <GoAButton type="secondary">Back</GoAButton>
-        <GoAButton type="primary">Next</GoAButton>
+        <div className={styles.save} data-show={formBusy.saving}>
+          <GoASpinner size="medium" type="infinite" />
+          <span>Saving...</span>
+        </div>
+        <GoAButtonGroup alignment="end">
+        {formStep > 1 && (
+          <GoAButton
+            type="secondary"
+            onClick={() => dispatch(<%= propertyName %>Actions.setStep(formStep - 1))}
+          >
+            Back
+          </GoAButton>
+        )}
+        {formStep < <%= sections.length + 1 %> ? (
+          <GoAButton
+            type="primary"
+            onClick={() => dispatch(<%= propertyName %>Actions.setStep(formStep + 1))}
+          >
+            Next
+          </GoAButton>
+        ) : (
+          <GoAButton disabled={!canSubmit} type="primary" onClick={() => dispatch(submitForm())}>
+            Submit
+          </GoAButton>
+        )}
+        </GoAButtonGroup>
       </div>
     </form>
   );