✨ Feat : single choice component

frontend/components/commons/forms/questions-form/QuestionsForm.component.vue

@@ -33,15 +33,15 @@
           @on-error="onError"
         />
 
+        <!--TODO -  pass visibleOption as props from settings-->
         <SingleLabelComponent
           v-if="input.component_type === COMPONENT_TYPE.SINGLE_LABEL"
+          :questionId="input.id"
           :title="input.question"
-          :options="input.options"
+          v-model="input.options"
           :isRequired="input.is_required"
           :tooltipMessage="input.description"
-          @on-change-single-label="
-            onChangeMonoSelection({ newOptions: $event, idComponent: input.id })
-          "
+          :visibleOptions="input.settings.visible_options"
           @on-error="onError"
         />
 
@@ -240,11 +240,7 @@ export default {
         default:
       }
     },
-    onChangeMonoSelection({ newOptions, idComponent }) {
-      // TODO - to remove when single label will use v-model
-      const component = this.inputs.find(({ id }) => id === idComponent);
-      component.options = newOptions;
-    },
+
     async sendBackendRequest(responseValues) {
       try {
         let responseData = null;
@@ -534,6 +530,18 @@ export default {
       this.inputs.forEach((input) => {
         let selectedOption = null;
         switch (input.component_type) {
+          // case COMPONENT_TYPE.MULTI_LABEL:
+            //TODO - place the code after the switch inside RATING and FREE_TEXT cases
+            // const selectedOptions = input.options?.filter(
+            //   (option) => option.is_selected
+            // );
+
+            // if (selectedOptions?.length) {
+            //   responseByQuestionName[input.name] = {
+            //     value: selectedOptions.map((option) => option.value),
+            //   };
+            // }
+            // break;
           case COMPONENT_TYPE.SINGLE_LABEL:
           case COMPONENT_TYPE.RATING:
             selectedOption = input.options?.find(

frontend/components/commons/forms/questions-form/fields/single-label/SingleLabel.component.vue

@@ -17,16 +17,24 @@
       />
     </div>
 
-    <SingleLabelMonoSelectionComponent v-model="options" />
+    <SingleLabelMonoSelectionComponent
+      :options="uniqueOptions"
+      :componentId="questionId"
+      :showSearch="showSearch"
+      :maxOptionsToShowBeforeCollapse="maxOptionsToShowBeforeCollapse"
+      @change="$emit('update:options', options)"
+    />
   </div>
 </template>
 
 <script>
-import SingleLabelMonoSelectionComponent from "./SingleLabelMonoSelection.component.vue";
 export default {
-  components: { SingleLabelMonoSelectionComponent },
   name: "SingleLabelComponent",
   props: {
+    questionId: {
+      type: String,
+      required: true,
+    },
     title: {
       type: String,
       required: true,
@@ -43,19 +51,33 @@ export default {
       type: String,
       default: () => "",
     },
+    visibleOptions: {
+      type: Number | null,
+      required: false,
+    },
   },
-  methods: {
-    onChangeSingleLabel(newOptions) {
-      this.$emit("on-change-single-label", newOptions);
-      const isAnySingleLabelSelected =
-        this.isAnySingleLabelSelected(newOptions);
-
-      if (this.isRequired) {
-        this.$emit("on-error", !isAnySingleLabelSelected);
+  model: {
+    prop: "options",
+  },
+  data() {
+    return {
+      uniqueOptions: [],
+    };
+  },
+  beforeMount() {
+    this.uniqueOptions = this.options.reduce((accumulator, current) => {
+      if (!accumulator.find((item) => item.id === current.id)) {
+        accumulator.push(current);
       }
+      return accumulator;
+    }, []);
+  },
+  computed: {
+    showSearch() {
+      return this.uniqueOptions.length >= 12;
     },
-    isAnySingleLabelSelected(options) {
-      return options.some((option) => option.value);
+    maxOptionsToShowBeforeCollapse() {
+      return this.visibleOptions ?? -1;
     },
   },
 };

frontend/components/commons/forms/questions-form/fields/single-label/SingleLabelMonoSelection.component.vue

@@ -1,68 +1,182 @@
 <template>
   <div class="container">
-    <div class="inputs-area">
-      <div class="input-button" v-for="option in options" :key="option.id">
+    <div class="component-header" v-if="showSearch || showCollapseButton">
+      <div class="left-header">
+        <SearchSingleLabelComponent
+          v-if="showSearch"
+          v-model="searchInput"
+          :searchRef="searchRef"
+          :placeholder="placeholder"
+        />
+      </div>
+
+      <div class="right-header">
+        <button
+          type="button"
+          class="show-less-button cursor-pointer"
+          v-if="showCollapseButton"
+          v-text="textToShowInTheCollapseButton"
+          @click="toggleShowLess"
+        />
+      </div>
+    </div>
+    <transition-group
+      name="shuffle"
+      class="inputs-area"
+      v-if="filteredOptions.length"
+    >
+      <div
+        class="input-button"
+        v-for="option in visibleOptions"
+        :key="option.id"
+      >
         <input
           type="checkbox"
           :name="option.text"
           :id="option.id"
-          v-model="option.value"
+          v-model="option.is_selected"
           @change="onSelect(option)"
         />
         <label
           class="label-text cursor-pointer"
-          :class="{ 'label-active': option.value }"
+          :class="{ 'label-active': option.is_selected }"
           :for="option.id"
           v-text="option.text"
         />
       </div>
-    </div>
+    </transition-group>
+    <i
+      class="no-result"
+      v-if="!filteredOptions.length"
+      v-text="noResultMessage"
+    />
   </div>
 </template>
 
 <script>
 export default {
   name: "SingleLabelMonoSelectionComponent",
   props: {
+    maxOptionsToShowBeforeCollapse: {
+      type: Number,
+      default: () => -1,
+    },
     options: {
       type: Array,
       required: true,
     },
+    placeholder: {
+      type: String,
+      default: () => "Search labels",
+    },
+    componentId: {
+      type: String,
+      required: true,
+    },
+    showSearch: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   model: {
     prop: "options",
     event: "on-change",
   },
+  data() {
+    return {
+      searchInput: "",
+      showLess: false,
+    };
+  },
+  created() {
+    this.searchRef = `${this.componentId}SearchFilterRef`;
+  },
+  computed: {
+    filteredOptions() {
+      return this.options.filter((option) =>
+        String(option.text)
+          .toLowerCase()
+          .includes(this.searchInput.toLowerCase())
+      );
+    },
+    visibleOptions() {
+      if (!this.showCollapseButton || this.showLess)
+        return this.filteredOptions;
+
+      return this.filteredOptions.slice(
+        0,
+        this.maxOptionsToShowBeforeCollapse + 1
+      );
+    },
+    noResultMessage() {
+      return `There is no result matching: ${this.searchInput}`;
+    },
+    numberToShowInTheCollapseButton() {
+      return this.filteredOptions.length - this.maxOptionsToShowBeforeCollapse;
+    },
+    showCollapseButton() {
+      if (this.maxOptionsToShowBeforeCollapse === -1) return false;
+      if (this.numberToShowInTheCollapseButton < 0) return false;
+      return this.options.length > this.maxOptionsToShowBeforeCollapse;
+    },
+    textToShowInTheCollapseButton() {
+      if (this.showLess) {
+        return "Show less";
+      }
+      return `+${this.numberToShowInTheCollapseButton}`;
+    },
+  },
   methods: {
-    onSelect({ id, value }) {
+    onSelect({ id, is_selected }) {
       this.options.map((option) => {
         if (option.id === id) {
-          option.value = value;
+          option.is_selected = is_selected;
         } else {
-          option.value = false;
+          option.is_selected = false;
         }
         return option;
       });
 
       this.$emit("on-change", this.options);
     },
+    toggleShowLess() {
+      this.showLess = !this.showLess;
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .container {
   display: flex;
+  flex-direction: column;
+  gap: $base-space * 2;
+  .component-header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
   .inputs-area {
     display: inline-flex;
     gap: $base-space;
+    flex-wrap: wrap;
     border-radius: 5em;
     background: transparent;
     &:hover {
       border-color: darken(palette(purple, 800), 12%);
     }
   }
 }
+
+.show-less-button {
+  background: none;
+  border: none;
+  color: rgba(0, 0, 0, 0.6);
+  text-decoration: none;
+  &:hover {
+    color: rgba(0, 0, 0, 0.87);
+  }
+}
+
 .label-text {
   display: flex;
   width: 100%;
@@ -82,7 +196,7 @@ export default {
     background: darken(palette(purple, 800), 8%);
   }
 }
-input {
+input[type="checkbox"] {
   display: none;
 }
 .label-active {
@@ -92,4 +206,17 @@ input {
 .cursor-pointer {
   cursor: pointer;
 }
+
+.shuffle-move {
+  transition: transform 0.5s;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>