Constrain visible ft-input results list length to 15

kommunarr · Jun 11, 2024 · e5b5b43 · e5b5b43
1 parent a81a8b5
commit e5b5b43
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
@@ -4,6 +4,8 @@ import { mapActions } from 'vuex'
 import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 import { getIconForRoute, isKeyboardEventKeyPrintableChar, isNullOrEmpty } from '../../helpers/strings'
 
+const MAX_VISIBLE_LIST_ITEMS = 15
+
 export default defineComponent({
   name: 'FtInput',
   components: {
@@ -83,7 +85,7 @@ export default defineComponent({
         isPointerInList: false,
         keyboardSelectedOptionIndex: -1,
       },
-      visibleDataList: this.dataList,
+      visibleDataList: this.dataList?.slice(0, MAX_VISIBLE_LIST_ITEMS),
       // This button should be invisible on app start
       // As the text input box should be empty
       clearTextButtonExisting: false,
@@ -311,13 +313,13 @@ export default defineComponent({
       this.searchState.selectedOption = -1
       this.searchState.keyboardSelectedOptionIndex = -1
       if (this.inputData === '') {
-        this.visibleDataList = this.dataList
+        this.visibleDataList = this.dataList?.slice(0, MAX_VISIBLE_LIST_ITEMS)
         return
       }
       // get list of items that match input
       const lowerCaseInputData = this.inputData.toLowerCase()
 
-      this.visibleDataList = this.dataList.filter(x => {
+      this.visibleDataList = this.dataList?.slice(0, MAX_VISIBLE_LIST_ITEMS).filter(x => {
         if (x.name) {
           return x.name.toLowerCase().indexOf(lowerCaseInputData) !== -1
         }

diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
@@ -79,7 +79,7 @@
         <li
           v-for="(entry, index) in visibleDataList"
           :key="index"
-          :class="{ hover: searchState.selectedOption === index , bookmarked: entry.isBookmark }"
+          :class="{ hover: searchState.selectedOption === index }"
           :aria-roledescription="entry.isBookmark ? $t('Role Descriptions.bookmark') : null"
           @click="handleOptionClick(index)"
           @mouseenter="searchState.selectedOption = index"

diff --git a/src/renderer/store/modules/playlists.js b/src/renderer/store/modules/playlists.js
@@ -1,4 +1,4 @@
-import { DBPlaylistHandlers, DBSearchHistoryHandlers } from '../../../datastores/handlers/index'
+import { DBPlaylistHandlers } from '../../../datastores/handlers/index'
 
 function generateRandomPlaylistId() {
   return `ft-playlist--${generateRandomUniqueId()}`