Merge pull request #5401 from marcellamaki/fix-form-scroll

Fix bug in 'scroll into view' for storage form

Author: akolson

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue

@@ -25,8 +25,6 @@
       v-model="channel_id__in"
       :label="$tr('channelSourceLabel')"
       :items="channelOptions"
-      item-text="name"
-      item-value="id"
       :disabled="loadingChannels"
       notranslate
       useEllipsis
@@ -64,7 +62,6 @@
       v-model="kinds"
       :items="kindFilterOptions"
       :label="$tr('kindLabel')"
-      item-text="text"
     />
 
     <!-- Language -->
@@ -78,7 +75,6 @@
       v-model="licenses"
       :items="licenseOptions"
       :label="$tr('licensesLabel')"
-      item-text="text"
     />
 
     <!-- Created after -->
@@ -210,7 +206,11 @@
             this.channel_id__in = [];
           }
 
-          this.channelOptions = channels.filter(c => c.id !== this.currentChannelId);
+          const filteredChannels = channels.filter(c => c.id !== this.currentChannelId);
+          this.channelOptions = filteredChannels.map(channel => ({
+            value: channel.id,
+            text: channel.name,
+          }));
           this.loadingChannels = false;
         });
       },

contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue

@@ -60,15 +60,13 @@
           v-model="licenses"
           :items="licenseOptions"
           :label="$tr('licenseLabel')"
-          item-text="text"
         />
 
         <!-- Formats (attach to self to keep in notranslate class) -->
         <MultiSelect
           v-model="kinds"
           :items="kindOptions"
           :label="$tr('formatLabel')"
-          item-text="text"
         />
 
         <!-- Starred -->

contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue

@@ -114,8 +114,6 @@
       v-model="publicChannels"
       :label="$tr('selectAllThatApplyPlaceholder')"
       :items="publicChannelOptions"
-      :item-value="channelName"
-      item-text="name"
       notranslate
       :box="false"
     />
@@ -365,7 +363,11 @@
         ];
       },
       publicChannelOptions() {
-        return sortBy(this.channels, c => c.name.toLowerCase()).filter(c => !c.public);
+        const options = sortBy(this.channels, c => c.name.toLowerCase()).filter(c => !c.public);
+        return options.map(option => ({
+          text: option.name,
+          value: this.channelName(option),
+        }));
       },
     },
     methods: {

contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue

@@ -98,6 +98,7 @@
       <KTransition kind="component-vertical-slide-out-in">
         <RequestForm
           v-show="showRequestForm"
+          ref="requestform"
           @submitted="showRequestForm = false"
         />
       </KTransition>
@@ -156,12 +157,11 @@
         this.showRequestForm = !this.showRequestForm;
         if (this.showRequestForm) {
           this.$nextTick(() => {
-            if (window.scroll) {
-              window.scroll({
-                top: this.$refs.requestheader.offsetTop - 24,
-                behavior: 'smooth',
-              });
-            }
+            this.$nextTick(() => {
+              // Wait for the form to be visible
+              // then scroll to the top of the form
+              this.$refs.requestform.$el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            });
           });
         }
       },

contentcuration/contentcuration/frontend/shared/views/form/MultiSelect.vue

@@ -18,7 +18,7 @@
       >
         <template #selection="{ item }">
           <VChip :class="{ notranslate }">
-            {{ getText(item) }}
+            {{ item.text }}
           </VChip>
         </template>
         <template #item="{ item }">
@@ -33,7 +33,7 @@
               :style="getEllipsisStyle()"
               dir="auto"
             >
-              {{ getText(item) }}
+              {{ item.text }}
             </span>
           </Checkbox>
         </template>
@@ -67,10 +67,6 @@
           return [];
         },
       },
-      itemText: {
-        type: [String, Function],
-        required: true,
-      },
       notranslate: {
         type: Boolean,
         default: false,
@@ -109,14 +105,6 @@
           }
           : {};
       },
-      getText(item) {
-        if (typeof this.itemText === 'string') {
-          return item[this.itemText];
-        } else if (typeof this.itemText === 'function') {
-          return this.itemText(item);
-        }
-        return item.text || item;
-      },
       resetScroll() {
         const [{ value: firstItemValue } = {}] = this.items || [];
         if (!firstItemValue) {