project-booster-vue 10.16.4 → 10.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "10.16.4",
+  "version": "10.17.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/question/configurations-import/ConfigurationsImport.ts

@@ -30,6 +30,7 @@ export interface ConfigurationsImportViewModel {
       errorText: string;
     };
   };
+  nextStep: any;
 }
 
 export interface ConfigurationsImportPayload {

package/src/components/rework/navigation/MPbNavigation.vue

@@ -140,6 +140,7 @@ $responsive-breakpoint: 'm';
 
 .m-pb-navigation {
   margin-top: $mu250;
+  width: 100%;
 
   .m-pb-navigation__left,
   .m-pb-navigation__right {

package/src/components/rework/question/configurations-import/MPbConfigurationsImport.vue

@@ -67,24 +67,14 @@
           ></m-link>
         </div>
 
-        <div class="pb-configurations-import__buttons row-flex" v-if="payload.callToActions">
-          <div class="pb-configurations-import__buttons__button" v-for="button in payload.callToActions">
-            <m-button
-              :class="{ 'js-cdl': trackingStatus }"
-              :label="button.label"
-              @click="callAction(button.nextStep)"
-              :theme="button.theme"
-              :data-cdl-click="
-                JSON.stringify([
-                  [
-                    'cdl_event',
-                    formatEvent({ button_name: button.label, button_location: stepLocation }, EventTypeEnum.BUTTON),
-                  ],
-                ])
-              "
-            />
-          </div>
-        </div>
+        <m-pb-navigation
+          :answers="answers"
+          :payload="payload"
+          :trackingStatus="trackingStatus"
+          @go-back="$emit('go-back')"
+          @next-step="callAction(payload?.viewModel?.nextStep)"
+          :step-number="stepNumber"
+        />
       </m-container>
     </div>
     <pb-configurations-search
@@ -112,16 +102,12 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, ref, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, ref, PropType } from 'vue';
 import { useStore } from 'vuex';
 import PbConfigurationsSearch from '../../../../components/configurations/search/PbConfigurationsSearch.vue';
-import PbStickyFooter from '../../../../components/sticky-footer/PbStickyFooter.vue';
-import MButton from '../../../../components/mozaic/buttons/MButton.vue';
 import MContainer from '../../../../components/mozaic/grid/MContainer.vue';
 import MFlexy from '../../../../components/mozaic/grid/MFlexy.vue';
-import MFlexyCol from '../../../../components/mozaic/grid/MFlexyCol.vue';
-import MFlex from '../../../../components/mozaic/flex/MFlex.vue';
 import MLink from '../../../../components/mozaic/link/MLink.vue';
 import MNotification from '../../../../components/mozaic/notifications/MNotification.vue';
 import PbCard from '../../../../components/cards/PbCard.vue';
@@ -137,182 +123,149 @@ import { Configuration } from '@/types/pb/Configuration';
 import { decorate } from '@/services/decorate';
 import { PayloadAction } from '../../types/genericPayload';
 import { EventTypeEnum, formatEvent } from '../../services/event';
-
-const BACK_ICON =
-  'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
-const INFO_ICON =
-  'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Notification_Information_24px.svg';
-const ADD_ICON = 'https://storage.googleapis.com/project-booster-media/common/icons/plus--title-offset.jpg';
-
-export default defineComponent({
-  name: 'pbConfigurationsImport',
-  components: {
-    PbCard,
-    MButton,
-    MContainer,
-    MFlexyCol,
-    MFlexy,
-    MFlex,
-    MLink,
-    MNotification,
-    PbConfigurationsSearch,
-    PbStickyFooter,
+import MPbNavigation from '../../navigation/MPbNavigation.vue';
+
+const emit: any = defineEmits();
+
+const props = defineProps({
+  /**
+   * The component view model and business data as an object. The provided props
+   * is merged with the default payload value so only overridden values will change
+   * from the default ones.
+   */
+  payload: {
+    type: Object as PropType<ConfigurationsImportPayload>,
+    default: () => null,
+    required: true,
   },
-  props: {
-    /**
-     * The component view model and business data as an object. The provided props
-     * is merged with the default payload value so only overridden values will change
-     * from the default ones.
-     */
-    payload: {
-      type: Object as PropType<ConfigurationsImportPayload>,
-      default: () => null,
-      required: true,
-    },
-    /**
-     * The options provided at runtime to customize component behaviour
-     */
-    runtimeOptions: {
-      type: Object,
-      default: () => ({}),
-    },
-    /**
-     * Flag indicating whether the back button should be displayed
-     */
-    showBackButton: {
-      type: Boolean,
-      default: true,
-    },
-    /**
-     * Name for the event to send when the question is answered
-     */
-    completedEventName: {
-      type: String,
-      default: 'step-completed',
-    },
-    /**
-     * The previous answers to inject
-     */
-    answers: {
-      type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
-      default: () => new Map<string, ScenarioStepAnswer[]>(),
-    },
-    /**
-     * Define the offset for question sticky bottom elements.
-     *
-     * _Use any value for the [`top` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/top)_
-     */
-    stickyBottomOffset: {
-      type: String,
-      default: '0px',
-    },
-    /**
-     * Step location
-     */
-    stepLocation: {
-      type: String,
-      default: '',
-    },
-    /**
-     * Define the location of the step in the scenario.
-     */
-    trackingStatus: {
-      type: Boolean,
-      default: false,
-    },
+  /**
+   * The options provided at runtime to customize component behaviour
+   */
+  runtimeOptions: {
+    type: Object,
+    default: () => ({}),
   },
+  /**
+   * Flag indicating whether the back button should be displayed
+   */
+  showBackButton: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Name for the event to send when the question is answered
+   */
+  completedEventName: {
+    type: String,
+    default: 'step-completed',
+  },
+  /**
+   * The previous answers to inject
+   */
+  answers: {
+    type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+    default: () => new Map<string, ScenarioStepAnswer[]>(),
+  },
+  /**
+   * Define the offset for question sticky bottom elements.
+   *
+   * _Use any value for the [`top` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/top)_
+   */
+  stickyBottomOffset: {
+    type: String,
+    default: '0px',
+  },
+  /**
+   * Step location
+   */
+  stepLocation: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Define the location of the step in the scenario.
+   */
+  trackingStatus: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Current step number
+   */
+  stepNumber: {
+    type: Number,
+    default: 0,
+  },
+});
 
-  setup(props, { emit }) {
-    const store = useStore();
-    const projectId = computed(() => store.getters['configurations/getCurrentProjectId']);
-    const selectedConfigurations = computed(() => store.getters['configurations/getConfigurations']);
-    const showImportConfigurationDialog = ref(false);
-    const configurationImportSuccess = ref(false);
-    const configurationImportError = ref(false);
-
-    const navigateTo = (viewModel: ConfigurationsImportViewModel) => {
-      if (viewModel.backLink) {
-        (<any>window).location = decorate(props.answers, props.runtimeOptions, viewModel.backLink);
-      } else {
-        /**
-         * Emitted when go back link is clicked
-         * @event go-back
-         */
-        emit('go-back');
-      }
-    };
+const store = useStore();
+const projectId = computed(() => store.getters['configurations/getCurrentProjectId']);
+const selectedConfigurations = computed(() => store.getters['configurations/getConfigurations']);
+const showImportConfigurationDialog = ref(false);
+const configurationImportSuccess = ref(false);
+const configurationImportError = ref(false);
+
+const navigateTo = (viewModel: ConfigurationsImportViewModel) => {
+  if (viewModel.backLink) {
+    (<any>window).location = decorate(props.answers, props.runtimeOptions, viewModel.backLink);
+  } else {
+    /**
+     * Emitted when go back link is clicked
+     * @event go-back
+     */
+    emit('go-back');
+  }
+};
 
-    const displayConfigurationDialog = () => {
-      showImportConfigurationDialog.value = true;
-    };
+const displayConfigurationDialog = () => {
+  showImportConfigurationDialog.value = true;
+};
 
-    const importConfiguration = async (configuration: Configuration) => {
-      showImportConfigurationDialog.value = false;
-      await store.dispatch('configurations/importConfiguration', configuration);
-      await store.dispatch('configurations/searchConfigurations', projectId.value);
+const importConfiguration = async (configuration: Configuration) => {
+  showImportConfigurationDialog.value = false;
+  await store.dispatch('configurations/importConfiguration', configuration);
+  await store.dispatch('configurations/searchConfigurations', projectId.value);
 
-      if (store.getters['configurations/getConfigurationImportSuccess']) {
-        configurationImportSuccess.value = true;
-      } else if (store.getters['configurations/getConfigurationImportError']) {
-        configurationImportError.value = true;
-      }
-    };
-
-    const formatDate = (date: string) => {
-      return format(new Date(date), 'dd/MM/yyyy');
-    };
-
-    const emitRefreshConfigurationEvent = () => {
-      store.dispatch('configurations/loadConfigurations', { projectId: projectId.value });
-    };
-
-    const skipQuestion = (button: ConfigurationsImportSkippable) => {
-      store.dispatch('sendEventToBus', { code: 'SKIP-IMPORT-SIMULATIONS', payload: { projectId: projectId.value } });
-      emit(props.completedEventName, {
-        answers: {},
-        nextStep: button.nextStep,
-      });
-    };
-
-    const validMultiSelect = (multiSelectOptions: ConfigurationsImportMultiSelectAction) => {
-      emit(props.completedEventName, {
-        answers: selectedConfigurations.value,
-        nextStep: multiSelectOptions.nextStep,
-      });
-    };
-
-    const callAction = (action: PayloadAction) => {
-      if (action.code != '__BACK__') {
-        emit('step-completed', {
-          answers: [],
-          nextStep: action,
-        });
-      } else {
-        emit('go-back');
-      }
-    };
-
-    return {
-      ADD_ICON,
-      BACK_ICON,
-      INFO_ICON,
-      navigateTo,
-      displayConfigurationDialog,
-      importConfiguration,
-      formatDate,
-      emitRefreshConfigurationEvent,
-      skipQuestion,
-      validMultiSelect,
-      showImportConfigurationDialog,
-      selectedConfigurations,
-      configurationImportSuccess,
-      configurationImportError,
-      callAction,
-      EventTypeEnum,
-      formatEvent,
-    };
-  },
-});
+  if (store.getters['configurations/getConfigurationImportSuccess']) {
+    configurationImportSuccess.value = true;
+  } else if (store.getters['configurations/getConfigurationImportError']) {
+    configurationImportError.value = true;
+  }
+};
+
+const formatDate = (date: string) => {
+  return format(new Date(date), 'dd/MM/yyyy');
+};
+
+const emitRefreshConfigurationEvent = () => {
+  store.dispatch('configurations/loadConfigurations', { projectId: projectId.value });
+};
+
+const skipQuestion = (button: ConfigurationsImportSkippable) => {
+  store.dispatch('sendEventToBus', { code: 'SKIP-IMPORT-SIMULATIONS', payload: { projectId: projectId.value } });
+  emit(props.completedEventName, {
+    answers: {},
+    nextStep: button.nextStep,
+  });
+};
+
+const validMultiSelect = (multiSelectOptions: ConfigurationsImportMultiSelectAction) => {
+  emit(props.completedEventName, {
+    answers: selectedConfigurations.value,
+    nextStep: multiSelectOptions.nextStep,
+  });
+};
+
+const callAction = (action: PayloadAction) => {
+  if (action.code != '__BACK__') {
+    emit('step-completed', {
+      answers: [],
+      nextStep: action,
+    });
+  } else {
+    emit('go-back');
+  }
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/rework/question/configurations-import/default-payload.json

@@ -13,23 +13,11 @@
         "errorTitle": "Le plan 3D n’a pas pu être importé",
         "errorText": "Une erreur est survenue"
       }
-    }
-  },
-  "callToActions": [
-    {
-      "label": "Précédent",
-      "theme": "bordered-primary-02",
-      "nextStep": {
-        "code": "__BACK__"
-      }
     },
-    {
-      "label": "Suivant",
-      "nextStep": {
-        "code": "LMFR_BATHROOM_DOWNLOAD"
-      }
+    "nextStep": {
+      "code": "LMFR_BATHROOM_DOWNLOAD"
     }
-  ],
+  },
   "skippable": [
     {
       "isAnswer": true,

package/src/components/rework/question/dimensions-input/DimensionsInput.ts

@@ -0,0 +1,28 @@
+export interface DimensionsInputValidation {
+  lengthMinValue?: number;
+  lengthMaxValue?: number;
+  widthMinValue?: number;
+  widthMaxValue?: number;
+  lengthMaxErrorMessage?: string;
+  lengthMinErrorMessage?: string;
+  widthMaxErrorMessage?: string;
+  widthMinErrorMessage?: string;
+  requiredErrorMessage?: string;
+  thresholdsIncluded?: boolean;
+}
+
+export interface DimensionsInputViewModel {
+  label?: string;
+  image?: string;
+  backLabel?: string;
+  lengthPlaceholder?: string;
+  widthPlaceholder?: string;
+  actionLabel?: string;
+  validation: DimensionsInputValidation;
+}
+
+export interface DimensionsInputPayload {
+  viewModel: DimensionsInputViewModel;
+  value?: { length: string; width: string };
+  defaultDecoratorValue?: string;
+}

package/src/components/rework/question/dimensions-input/MPbDimensionsInput.stories.mdx

@@ -0,0 +1,230 @@
+import { nestedAppDecorator } from '../../../../../.storybook/nested-app-decorator';
+import { ArgsTable, Canvas, Meta, Source, Story } from '@storybook/addon-docs';
+import MPbDimensionsInput from './MPbDimensionsInput';
+import DEFAULT_PAYLOAD from './default-payload.json';
+
+<Meta
+  title="Project Booster/Rework/Questions/MPbDimensionsInput 🦠"
+  component={MPbDimensionsInput}
+  argTypes={{
+    'payload': {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    'dynamic event name according to completedEventName prop': {
+      table: {
+        defaultValue: {
+          summary: 'Event payload',
+          detail: JSON.stringify({ answers: [{ projectName: 'My project name', optin: false }] }, null, '  '),
+        },
+      },
+    },
+    'onStepCompleted': {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[nestedAppDecorator({}, [])]}
+  parameters={{ layout: 'fullscreen' }}
+/>
+
+# 🦠 `MPbDimensionsInput` - Components
+
+[![alt text](https://storage.googleapis.com/project-booster-media/project-booster-vue/project-booster-sources.svg 'Project booster component source code')](https://github.com/adeo/project-booster-vue/tree/master/src/components/question)
+
+---
+
+The `MPbDimensionsInput` Vue component allows to fill multiple dimension. It
+is customizable through the payload property. It has the same
+behaviour as the `PbQuestion` component and is designed to work in scenarii.
+
+It has a default provided payload, used in the Sandbox below.
+
+The input field is automatically focused.
+
+The back button will make `vue-router` trigger the history back feature from the browser. It can be hidden with the
+`showBackButton` flag.
+
+# `MPbDimensionsInput` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbDimensionsInput },
+  setup() {
+    return { args };
+  },
+  template: `<m-pb-dimensions-input
+    style="width:720px; margin:0 auto;"
+    :payload="args.payload"
+    :show-back-button="args.showBackButton"
+    :answers="args.answers"
+    :runtime-options="args.runtimeOptions"
+    :completed-event-name="args.completedEventName"
+    @step-completed="args.onStepCompleted"
+  />`,
+});
+
+<Canvas>
+  <Story name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="101 Sandbox" />
+
+# `MPbDimensionsInput` - Features
+
+## Customization
+
+It is possible to customize the component default behaviour by **overriding** a property in the provided `payload` property.
+
+Here is the default payload:
+
+<Source language="json" code={JSON.stringify(DEFAULT_PAYLOAD, null, '  ')} />
+
+Here is the payload with overridden values:
+
+export const overridenLabelsPayload = {
+  viewModel: {
+    backLabel: 'Retour',
+    label: 'Quelles sont les dimensions de cette pièce ?',
+    lengthPlaceholder: 'Longueur',
+    widthPlaceholder: 'Largeur',
+    actionLabel: 'Valider',
+    image: 'https://upload.wikimedia.org/wikipedia/commons/f/f8/Lille_vue_gd_place.JPG',
+  },
+};
+
+<Source language="json" code={JSON.stringify(overridenLabelsPayload, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - feature customize"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: overridenLabelsPayload }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Value injection from a previous answer with default value fallback
+
+It is possible to inject a value for the component from a previous answer. To do so, add a `value` to the component
+`payload`. The value should have the same structure as the component anwser when completed (See event payload in the
+[Sandbox story](#pbamountinput---component-props)) :
+
+export const valuePayload = {
+  value: {
+    length: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForLength')}",
+    width: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForWidth')}",
+  },
+};
+
+The `getAnswerValue` function allows to retrieve a value from one provided answer. To retrieve a value, the first
+parameter is the answer Id, the second is an optionnal path to extract a spcific value.
+
+<Source language="json" code={JSON.stringify(valuePayload, null, '  ')} />
+
+A `defaultDecoratorValue` value can be added as a fallback when no previous answer is found. When no default value is provided and no answer
+is found, the component value will be empty :
+
+export const valueWithFallbackPayload = {
+  defaultDecoratorValue: {
+    length: '2',
+    width: '2.5',
+  },
+  value: {
+    length: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForLength') || defaultValue.length}",
+    width: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForWidth') || defaultValue.width}",
+  },
+};
+
+<Source language="json" code={JSON.stringify(valueWithFallbackPayload, null, '  ')} />
+
+The `getAnswerValue` function allows to retrieve a value from one provided answer. To retrieve a value, the first
+parameter is the answer's id, the second is an optional path to extract a specific value.
+
+It will try to find a value in a previous answer for a question with id `LMFR_PREVIOUS_QUESTION`,
+provided thanks to the `answers` prop. If no value is found, it will use the `defaultDecoratorValue` as a fallback.
+
+export const previousAnswers = {
+  LMFR_PREVIOUS_QUESTION: [
+    {
+      pathForLength: '4.56',
+      pathForWidth: '7.89',
+    },
+  ],
+};
+
+<Source language="json" code={JSON.stringify(previousAnswers, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature previous value from answer"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      payload: valuePayload,
+      answers: new Map(Object.entries(previousAnswers)),
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+When no answer is found, the default value fallback is used:
+
+<Canvas>
+  <Story
+    name="Showcase - Feature previous value from default"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: valueWithFallbackPayload }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Custom validation
+
+It is possible to customize the input field validation. To do so, provide a `validation` property to the `viewModel`.
+
+The default `validation` object is:
+
+<Source language="json" code={JSON.stringify(DEFAULT_PAYLOAD.viewModel.validation, null, '  ')} />
+
+It is possible to customize those values:
+
+export const customValidation = {
+  viewModel: {
+    validation: {
+      lengthMinValue: 1,
+      lengthMaxValue: 10,
+      thresholdsIncluded: true,
+      widthMinValue: 1,
+      widthMaxValue: 10,
+      lengthMaxErrorMessage: 'La longueur doit être inférieure à 10m',
+      lengthMinErrorMessage: 'La longueur doit être supérieure à 1m',
+      widthMaxErrorMessage: 'La largeur doit être inférieure à 10m',
+      widthMinErrorMessage: 'La largeur doit être supérieure à 1m',
+      notValidNumberMessage: 'Veuillez ne saisir que des chiffres',
+    },
+  },
+};
+
+<Source language="json" code={JSON.stringify(customValidation, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature custom validation"
+    parameters={{ controls: { disable: true }, storyshots: { disable: true } }}
+    args={{ payload: customValidation }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>