From 7648991be9c410532126d95377c5cd6d3601c9af Mon Sep 17 00:00:00 2001
From: Merve Karaman <amervekaraman@gmail.com>
Date: Thu, 13 Jul 2023 15:49:08 +0300
Subject: [PATCH] Scroll added when items are too many

---
 .../js/components/AkauntingItemButton.vue     | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/resources/assets/js/components/AkauntingItemButton.vue b/resources/assets/js/components/AkauntingItemButton.vue
index bd8bf4e57..7f7c26aa9 100644
--- a/resources/assets/js/components/AkauntingItemButton.vue
+++ b/resources/assets/js/components/AkauntingItemButton.vue
@@ -23,36 +23,38 @@
                    />
                </div>
 
-                <ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 mt-0 border-0 cursor-pointer">
-                    <div 
-                        class="hover:bg-gray-100 px-4" 
-                        v-for="(item, index) in sortedItems" 
-                        :key="index" 
-                        :class="isItemMatched ? 'highlightItem' : ''"
-                        @click="onItemSelected(item)"
-                    >
-                        <div class="w-full flex items-center justify-between">
-                            <span>{{ item.name }}</span>
+                <div v-bind:class="(sortedItems.length > 7) ? 'h-72 overflow-y-auto' : ''">
+                    <ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 mt-0 border-0 cursor-pointer">
+                        <div 
+                            class="hover:bg-gray-100 px-4" 
+                            v-for="(item, index) in sortedItems" 
+                            :key="index" 
+                            :class="isItemMatched ? 'highlightItem' : ''"
+                            @click="onItemSelected(item)"
+                        >
+                            <div class="w-full flex items-center justify-between">
+                                <span>{{ item.name }}</span>
 
-                            <money 
-                                :name="'item-id-' + item.id"
-                                :value="item.price"
-                                v-bind="money"
-                                masked
-                                disabled
-                                class="ltr:text-right rtl:text-left disabled-money text-gray"
-                            ></money>
+                                <money 
+                                    :name="'item-id-' + item.id"
+                                    :value="item.price"
+                                    v-bind="money"
+                                    masked
+                                    disabled
+                                    class="ltr:text-right rtl:text-left disabled-money text-gray"
+                                ></money>
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="hover:bg-gray-100 text-center py-2 px-4" v-if="!sortedItems.length">
-                        <div class="text-center">
-                            <span v-if="!items.length && !search">{{ noDataText }}</span>
+                        <div class="hover:bg-gray-100 text-center py-2 px-4" v-if="!sortedItems.length">
+                            <div class="text-center">
+                                <span v-if="!items.length && !search">{{ noDataText }}</span>
 
-                            <span v-else>{{ noMatchingDataText }}</span>
+                                <span v-else>{{ noMatchingDataText }}</span>
+                            </div>
                         </div>
-                    </div>
-                </ul>
+                    </ul>
+                </div>
 
                 <div class="flex items-center justify-center h-11 text-center text-purple font-bold border border-l-0 border-r-0 border-b-0 rounded-bl-lg rounded-br-lg hover:bg-gray-100 cursor-pointer" @click="onItemCreate">
                      <span class="material-icons text-lg font-bold mr-1">add</span>