Merge expand and collapse in results [SCI-10620]

app/javascript/vue/results/result.vue

@@ -251,6 +251,7 @@ export default {
       } else {
         $(resultId).collapse('show');
       }
+      this.$emit('result:collapsed');
     });
   },
   computed: {
@@ -370,6 +371,8 @@ export default {
       };
 
       axios.put(this.userSettingsUrl, { settings: [settings] });
+
+      this.$emit('result:collapsed');
     },
     dragEnter(e) {
       if (!this.urls.upload_attachment_url) return;

app/javascript/vue/results/results.vue

@@ -3,17 +3,19 @@
     <ResultsToolbar
       ref="resultsToolbar"
       :sort="sort"
+      :results="results"
       :canCreate="canCreate == 'true'"
       :archived="archived == 'true'"
       :active_url="active_url"
       :archived_url="archived_url"
       :headerSticked="headerSticked"
       :moduleName="moduleName"
+      :resultsCollapsed="resultsCollapsed"
       @setSort="setSort"
       @setFilters="setFilters"
       @newResult="createResult"
-      @expandAll="expandAll"
-      @collapseAll="collapseAll"
+      @expandAll="expandResults"
+      @collapseAll="collapseResults"
       class="my-4"
     />
     <div class="results-list">
@@ -32,6 +34,7 @@
         @result:deleted="removeResult"
         @result:restored="removeResult"
         @result:drag_enter="dragEnter"
+        @result:collapsed="checkResultsState"
       />
     </div>
     <clipboardPasteModal v-if="showClipboardPasteModal"
@@ -77,7 +80,8 @@ export default {
       nextPageUrl: null,
       loadingPage: false,
       activeDragResult: null,
-      userSettingsUrl: null
+      userSettingsUrl: null,
+      resultsCollapsed: false
     };
   },
   mounted() {
@@ -143,15 +147,27 @@ export default {
         }
       );
     },
-    expandAll() {
-      $('.result-wrapper .collapse').collapse('show');
-      this.toggleCollapsed(false);
+    checkResultsState() {
+      this.resultsCollapsed = this.$refs.results.every((result) => result.isCollapsed);
     },
-    collapseAll() {
+    collapseResults() {
       $('.result-wrapper .collapse').collapse('hide');
-      this.toggleCollapsed(true);
+      this.updateResultStateSettings(true);
+      this.$refs.results.forEach((result) => { result.isCollapsed = true; });
+      this.resultsCollapsed = true;
     },
-    toggleCollapsed(newState) {
+    expandResults() {
+      $('.result-wrapper .collapse').collapse('show');
+      this.updateResultStateSettings(false);
+      this.$refs.results.forEach((result) => { result.isCollapsed = false; });
+      this.resultsCollapsed = false;
+    },
+    updateResultStateSettings(newState) {
+      const updatedData = this.results.reduce((acc, currentResult) => {
+        acc[currentResult.id] = newState;
+        return acc;
+      }, {});
+
       this.results = this.results.map((result) => ({
         ...result,
         attributes: {
@@ -159,6 +175,13 @@ export default {
           collapsed: newState
         }
       }));
+
+      const settings = {
+        key: 'result_states',
+        data: updatedData
+      };
+
+      axios.put(this.userSettingsUrl, { settings: [settings] });
     },
     removeResult(result_id) {
       this.results = this.results.filter((r) => r.id != result_id);

app/javascript/vue/results/results_toolbar.vue

@@ -34,12 +34,16 @@
       </ul>
     </div>
     <div class="result-toolbar__right flex items-center [&_.sn-icon-filter]:!text-sn-blue">
-      <button class="btn btn-secondary mr-3" @click="collapseResults" tabindex="0">
-        {{ i18n.t('my_modules.results.collapse_label') }}
-      </button>
-      <button class="btn btn-secondary mr-3" @click="expandResults" tabindex="0">
-        {{ i18n.t('my_modules.results.expand_label') }}
-      </button>
+      <template v-if="results.length > 0">
+        <button :title="i18n.t('protocols.steps.collapse_label')" v-if="!resultsCollapsed" class="btn btn-secondary icon-btn xl:!px-4" @click="collapseResults" tabindex="0">
+          <i class="sn-icon sn-icon-collapse-all"></i>
+          <span class="tw-hidden xl:inline">{{ i18n.t("protocols.steps.collapse_label") }}</span>
+        </button>
+        <button v-else  :title="i18n.t('protocols.steps.expand_label')" class="btn btn-secondary icon-btn xl:!px-4" @click="expandResults" tabindex="0">
+          <i class="sn-icon sn-icon-expand-all"></i>
+          <span class="tw-hidden xl:inline">{{ i18n.t("protocols.steps.expand_label") }}</span>
+        </button>
+      </template>
 
       <FilterDropdown :filters="filters" @applyFilters="setFilters" />
       <MenuDropdown
@@ -75,7 +79,9 @@ export default {
     headerSticked: { type: Boolean, required: true },
     active_url: { type: String, required: true },
     archived_url: { type: String, required: true },
-    moduleName: { type: String, required: true }
+    moduleName: { type: String, required: true },
+    results: { type: Array, required: true },
+    resultsCollapsed: { type: Boolean, required: true }
   },
   data() {
     return {