segment section: have a single object create setion and widget config

part of #501

Define 2 interfaces: `SectionConfigFactory` and `WidgetConfigFactory`,
the former extending the latter. Config objects that provide more than
one widget can use classes implementing those factories to return all
the required widgets.

The `sectionSegments`, as well as `groupPersonTrips` and `groupSegments`
use this pattern to advertise all their widgets and configs.

The demo_survey platform now gets the sections and widgets from a single
`questionnaire.ts` file, which, for the segment section, now use the
`SegmentsSectionFactory` to get all the builtin section config and
widgets. Builtin widgets do not have to be added to the `segments.tsx`
file anymore.

Author: tahini

example/demo_survey/src/admin/app-admin.tsx

@@ -2,8 +2,7 @@ import runClientApp from 'evolution-frontend/lib/apps/admin';
 import { setApplicationConfiguration } from 'chaire-lib-frontend/lib/config/application.config';
 import appConfig, { EvolutionApplicationConfiguration } from 'evolution-frontend/lib/config/application.config';
 
-import surveySections from '../survey/sections';
-import * as widgetsConfig from '../survey/widgets';
+import { surveySections, widgetsConfig } from '../survey/questionnaire';
 import projectHelpers from '../survey/helper';
 import VisitedPlaceSection from '../survey/templates/VisitedPlacesSection';
 

example/demo_survey/src/app-survey.tsx

@@ -2,8 +2,7 @@ import runClientApp from 'evolution-frontend/lib/apps/participant';
 import appConfig, { EvolutionApplicationConfiguration } from 'evolution-frontend/lib/config/application.config';
 import { setApplicationConfiguration } from 'chaire-lib-frontend/lib/config/application.config';
 
-import surveySections from './survey/sections';
-import * as widgetsConfig from './survey/widgets';
+import { surveySections, widgetsConfig } from './survey/questionnaire';
 import projectHelpers from './survey/helper';
 import VisitedPlaceSection from './survey/templates/VisitedPlacesSection';
 

example/demo_survey/src/survey/helper.ts

@@ -22,6 +22,7 @@ import { Mode } from 'evolution-common/lib/services/odSurvey/types';
 // Configuration for the segments section
 // FIXME As sections and their widgets become more builtin, this thould be moved elsewhere. For now, it just needs to be available for both widgets.ts and sections.ts files
 export const segmentSectionConfig = {
+    type: 'segments' as const,
     enabled: true,
     modesIncludeOnly: [
         'walk',

example/demo_survey/src/survey/questionnaire.ts

@@ -0,0 +1,48 @@
+import { SegmentsSectionFactory } from 'evolution-common/lib/services/questionnaire/sections/segments/sectionSegments';
+import * as odSurveyHelper from 'evolution-common/lib/services/odSurvey/helpers';
+import surveySections from './sections';
+import * as widgetsConfig from './widgets';
+import helper, { segmentSectionConfig } from './helper';
+import { getAndValidateSurveySections, SectionConfig } from 'evolution-common/lib/services/questionnaire/types';
+import { getFormattedDate, validateButtonActionWithCompleteSection } from 'evolution-frontend/lib/services/display/frontendHelper';
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle';
+
+// FIXME For now this file is here and has quite a bit of code. Eventually, the
+// questionnaire generation should be done in Evolution directly when we have
+// more builtin stuff
+
+const widgetFactoryOptions = {
+    getFormattedDate: getFormattedDate,
+    buttonActions: { validateButtonAction: validateButtonActionWithCompleteSection },
+    iconMapper: { 'check-circle': faCheckCircle }
+};
+
+const segmentSectionConfigFactory = new SegmentsSectionFactory(segmentSectionConfig, widgetFactoryOptions);
+const segmentSectionConfigFromFactory = segmentSectionConfigFactory.getSectionConfig();
+
+// Add the segments section to the exported configuration
+const segmentConfig: SectionConfig = {
+    ...segmentSectionConfigFromFactory,
+    isSectionVisible: function(interview) {
+      const person = odSurveyHelper.getPerson({ interview }) as any;
+      return person && person.didTripsOnTripsDate === 'yes';
+    },
+    isSectionCompleted: (interview) => {
+        const person = odSurveyHelper.getPerson({ interview });
+        return helper.tripsForPersonComplete(person, interview);
+    }
+};
+// FIXME Workaround to satisfy the completion percentage calculation that expects sections to be defined in their order of display in the object (see https://github.com/chairemobilite/evolution/issues/1024)
+const { travelBehavior, end, completed, ...earlierSections } = surveySections;
+const validatedSections = getAndValidateSurveySections({
+    ...earlierSections,
+    segments: segmentConfig,
+    travelBehavior,
+    end,
+    completed
+});
+
+// Widgets defined in the interview will override the ones from the section factory, if any
+const allWidgetConfig = Object.assign({}, segmentSectionConfigFactory.getWidgetConfigs(), widgetsConfig);
+
+export { validatedSections as surveySections, allWidgetConfig as widgetsConfig };

example/demo_survey/src/survey/sections.ts

@@ -10,8 +10,7 @@ import isEmpty from 'lodash/isEmpty';
 import { _isBlank } from 'chaire-lib-common/lib/utils/LodashExtensions';
 import { getResponse, getValidation, addGroupedObjects, removeGroupedObjects } from 'evolution-common/lib/utils/helpers';
 import * as odSurveyHelper from 'evolution-common/lib/services/odSurvey/helpers';
-import { getSegmentsSectionConfig } from 'evolution-common/lib/services/questionnaire/sections/segments/sectionSegments';
-import helper, { segmentSectionConfig } from './helper';
+import helper from './helper';
 import config from 'chaire-lib-common/lib/config/shared/project.config';
 import { getAndValidateSurveySections, SectionConfig } from 'evolution-common/lib/services/questionnaire/types';
 import { personNoWorkTripReason, personNoSchoolTripReason, personWhoAnsweredForThisPerson } from './widgets/travelBehavior';
@@ -406,18 +405,6 @@ const sections: { [sectionName: string]: SectionConfig } = {
     }
   },
 
-  segments: {
-    ...getSegmentsSectionConfig({ segmentConfig: segmentSectionConfig }),
-    isSectionVisible: function(interview) {
-      const person = odSurveyHelper.getPerson({ interview }) as any;
-      return person && person.didTripsOnTripsDate === 'yes';
-    },
-    isSectionCompleted: (interview) => {
-        const person = odSurveyHelper.getPerson({ interview });
-        return helper.tripsForPersonComplete(person, interview);
-    }
-  },
-
   travelBehavior: {
     previousSection: 'segments',
     nextSection: "personsTrips",
@@ -539,4 +526,4 @@ const sections: { [sectionName: string]: SectionConfig } = {
 
 };
 
-export default getAndValidateSurveySections(sections);
+export default sections;

example/demo_survey/src/survey/widgets.ts

@@ -8,7 +8,6 @@ import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle';
 import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
 
 import { validateButtonActionWithCompleteSection } from 'evolution-frontend/lib/services/display/frontendHelper';
-import { getSwitchPersonWidgets } from 'evolution-common/lib/services/questionnaire/sections/common/widgetsSwitchPerson';
 import { getButtonValidateAndGotoNextSection } from 'evolution-common/lib/services/questionnaire/sections/common/buttonValidateAndGotoNextSection';
 
 import * as homeWidgets from './widgets/home';
@@ -45,9 +44,6 @@ export const personDidTrips: any                        = householdMembersWidget
 export const buttonSaveNextSectionHouseholdMembers: any = householdMembersWidgets.buttonSaveNextSectionHouseholdMembers;
 export const selectPerson: any                          = householdMembersWidgets.selectPerson;
 export const buttonSelectPersonConfirm: any             = householdMembersWidgets.buttonSelectPersonConfirm;
-const switchPersonsWidget = getSwitchPersonWidgets();
-export const activePersonTitle: any                     = switchPersonsWidget.activePersonTitle;
-export const buttonSwitchPerson: any                    = switchPersonsWidget.buttonSwitchPerson;
 
 import * as profileWidgets from './widgets/profile';
 
@@ -101,14 +97,6 @@ export const buttonVisitedPlacesConfirmNextSection: any = visitedPlacesWidgets.b
 
 import * as segmentsWidgets from './widgets/segments';
 
-export const personTrips: any                   = segmentsWidgets.personTrips;
-export const personTripsTitle: any              = segmentsWidgets.personTripsTitle;
-export const segments: any                      = segmentsWidgets.segments;
-export const segmentIntro: any                  = segmentsWidgets.segmentIntro;
-export const segmentSameModeAsReverseTrip: any  = segmentsWidgets.segmentSameModeAsReverseTrip;
-export const segmentModePre: any                = segmentsWidgets.segmentModePre;
-export const segmentMode: any                   = segmentsWidgets.segmentMode;
-export const segmentHasNextMode: any            = segmentsWidgets.segmentHasNextMode;
 export const segmentParkingType: any            = segmentsWidgets.segmentParkingType;
 export const segmentParkingPaymentType: any     = segmentsWidgets.segmentParkingPaymentType;
 export const segmentVehicleOccupancy: any       = segmentsWidgets.segmentVehicleOccupancy;
@@ -124,8 +112,6 @@ export const segmentTrainStationStart: any      = segmentsWidgets.segmentTrainSt
 export const segmentTrainStationEnd: any        = segmentsWidgets.segmentTrainStationEnd;
 export const segmentBusLines: any               = segmentsWidgets.segmentBusLines;
 export const tripJunctionGeography: any         = segmentsWidgets.tripJunctionGeography;
-export const introButtonSaveTrip: any           = segmentsWidgets.introButtonSaveTrip;
-export const buttonSaveTrip: any                = segmentsWidgets.buttonSaveTrip;
 
 import * as travelBehaviorWidgets from './widgets/travelBehavior';
 

example/demo_survey/src/survey/widgets/segments.tsx

@@ -18,20 +18,8 @@ import subwayStations from '../subwayStations.json';
 import trainStations  from '../trainStations.json';
 import busRoutes  from '../busRoutes.json';
 import { GroupConfig } from 'evolution-common/lib/services/questionnaire/types';
-import { getModePreWidgetConfig } from 'evolution-common/lib/services/questionnaire/sections/segments/widgetSegmentModePre';
-import { getModeWidgetConfig } from 'evolution-common/lib/services/questionnaire/sections/segments/widgetSegmentMode';
-import { getSameAsReverseTripWidgetConfig } from 'evolution-common/lib/services/questionnaire/sections/segments/widgetSameAsReverseTrip';
-import { getSegmentHasNextModeWidgetConfig } from 'evolution-common/lib/services/questionnaire/sections/segments/widgetSegmentHasNextMode';
-import { getSegmentsGroupConfig } from 'evolution-common/lib/services/questionnaire/sections/segments/groupSegments';
-import { getTripSegmentsIntro } from 'evolution-common/lib/services/questionnaire/sections/segments/widgetTripSegmentsIntro';
-import { getButtonSaveTripSegmentsConfig } from 'evolution-common/lib/services/questionnaire/sections/segments/buttonSaveTripSegments';
-import { getPersonsTripsGroupConfig } from 'evolution-common/lib/services/questionnaire/sections/segments/groupPersonTrips';
-import { getPersonsTripsTitleWidgetConfig } from 'evolution-common/lib/services/questionnaire/sections/segments/widgetPersonTripsTitle';
 import { getFormattedDate, validateButtonAction } from 'evolution-frontend/lib/services/display/frontendHelper';
 
-export const personTrips: GroupConfig = getPersonsTripsGroupConfig();
-
-export const segments: GroupConfig = getSegmentsGroupConfig();
 /*
 TODO These were the original widgets for the group, as well as some from other surveys, that should eventually be configurable
 widgets: [
@@ -61,17 +49,6 @@ widgets: [
   ]
     */
 
-export const segmentIntro = getTripSegmentsIntro();;
-
-export const segmentSameModeAsReverseTrip = getSameAsReverseTripWidgetConfig();
-
-// FIXME ModePre and Mode widgets should be automatically created if the section config enables them
-export const segmentModePre = getModePreWidgetConfig({ segmentConfig: segmentSectionConfig });
-
-export const segmentMode = getModeWidgetConfig({ segmentConfig: segmentSectionConfig });
-
-export const segmentHasNextMode = getSegmentHasNextModeWidgetConfig();
-
 export const segmentVehicleOccupancy = {
   type: "question",
   path: "vehicleOccupancy",
@@ -2459,8 +2436,6 @@ export const segmentParkingPaymentType = {
   }
 };
 
-export const personTripsTitle = getPersonsTripsTitleWidgetConfig({ getFormattedDate })
-
 export const introButtonSaveTrip = {
   type: "text",
   containsHtml: true,
@@ -2470,9 +2445,3 @@ export const introButtonSaveTrip = {
     en: `<p class="no-bottom-margin center _oblique">If you selected <strong>all</strong> modes of transport used during this trip:</p>`
   }
 };
-
-// FIXME The options should be in a config somewhere for frontend mapping
-export const buttonSaveTrip = getButtonSaveTripSegmentsConfig({
-    iconMapper: { 'check-circle': faCheckCircle },
-    buttonActions: { validateButtonAction: validateButtonAction },
-});

packages/evolution-common/src/services/questionnaire/sections/common/__tests__/widgetsSwitchPerson.test.ts

@@ -6,14 +6,18 @@
  */
 import _cloneDeep from 'lodash/cloneDeep';
 
-import { getSwitchPersonWidgets } from '../widgetsSwitchPerson';
+import { SwitchPersonWidgetsFactory } from '../widgetsSwitchPerson';
 import { interviewAttributesForTestCases } from '../../../../../tests/surveys';
 import * as utilHelpers from '../../../../../utils/helpers';
-import { t } from 'i18next';
 import { ButtonWidgetConfig, TextWidgetConfig } from '../../../../questionnaire/types';
 
 import * as odHelpers from '../../../../odSurvey/helpers';
-import { start } from 'repl';
+
+const widgetFactoryOptions = {
+    getFormattedDate: (date: string) => date,
+    buttonActions: { validateButtonAction: jest.fn() },
+    iconMapper: {}
+};
 
 jest.mock('../../../../odSurvey/helpers', () => ({
     getInterviewablePersonsArray: jest.fn().mockReturnValue([]),
@@ -28,10 +32,10 @@ beforeEach(() => {
     jest.clearAllMocks();
 });
 
-describe('getSwitchPersonWidgets', () => {
+describe('SwitchPersonWidgets', () => {
 
     test('should return the correct widget configs', () => {
-        const widgetConfig = getSwitchPersonWidgets();
+        const widgetConfig = new SwitchPersonWidgetsFactory(widgetFactoryOptions).getWidgetConfigs();
         expect(widgetConfig).toEqual({
             activePersonTitle: {
                 type: 'text',
@@ -66,7 +70,7 @@ describe('getSwitchPersonWidgets', () => {
 
 describe('activePersonTitle widget', () => {
 
-    const widgetConfig = getSwitchPersonWidgets({})['activePersonTitle'] as TextWidgetConfig;
+    const widgetConfig = new SwitchPersonWidgetsFactory(widgetFactoryOptions).getWidgetConfigs()['activePersonTitle'] as TextWidgetConfig;
 
     describe('conditional', () => {
         const conditional = widgetConfig.conditional;
@@ -112,7 +116,7 @@ describe('activePersonTitle widget', () => {
 });
 
 describe('buttonSwitchPerson widget', () => {
-    const widgetConfig = getSwitchPersonWidgets({})['buttonSwitchPerson'] as ButtonWidgetConfig;
+    const widgetConfig = new SwitchPersonWidgetsFactory(widgetFactoryOptions).getWidgetConfigs()['buttonSwitchPerson'] as ButtonWidgetConfig;
 
     describe('conditional', () => {
 

packages/evolution-common/src/services/questionnaire/sections/common/widgetsSwitchPerson.ts

@@ -5,10 +5,11 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 
-import { ButtonWidgetConfig, TextWidgetConfig } from '../../../questionnaire/types';
+import { ButtonWidgetConfig, TextWidgetConfig, WidgetConfig } from '../../../questionnaire/types';
 import * as odHelpers from '../../../odSurvey/helpers';
 import { TFunction } from 'i18next';
 import { InterviewUpdateCallbacks, UserInterviewAttributes } from '../../types';
+import { WidgetConfigFactory, WidgetFactoryOptions } from '../types';
 
 const hasMoreThanOneInterviewablePerson = (interview: UserInterviewAttributes): boolean =>
     odHelpers.getInterviewablePersonsArray({ interview }).length > 1;
@@ -69,13 +70,13 @@ const buttonSwitchPerson: ButtonWidgetConfig = {
  * @param options
  * @returns The widget configurations to switch between persons during a survey
  */
-export const getSwitchPersonWidgets = (
-    // FIXME: Type this when there is a few more widgets implemented
-    _options: { context?: () => string } = {}
-): { activePersonTitle: TextWidgetConfig; buttonSwitchPerson: ButtonWidgetConfig } => {
-    // TODO These should be some configuration receive here to fine-tune the section's content
-    return {
+export class SwitchPersonWidgetsFactory implements WidgetConfigFactory {
+    constructor(private options: WidgetFactoryOptions) {
+        /** Nothing to do */
+    }
+
+    getWidgetConfigs = (): Record<string, WidgetConfig> => ({
         activePersonTitle,
         buttonSwitchPerson
-    };
-};
+    });
+}