project-booster-vue 10.16.3 → 10.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "10.16.3",
+  "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/exit-options/MPbExitOptions.vue

@@ -207,10 +207,12 @@ $responsive-breakpoint: 'm';
 
 .m-pb-exit-options {
   width: calc(100% - $mu250);
+  max-width: 100%;
   margin: 4rem auto;
 
   @include set-from-screen($responsive-breakpoint) {
     width: 100%;
+    max-width: 720px;
   }
 
   &__title {

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;
+}