Merge pull request #207 from determaer/main

fixes

src/BaseAdaptiveExtendedChatApp.vue

@@ -30,6 +30,7 @@
             filter-enabled
             @select="selectChat"
             @action="chatAction"
+            @load-more-chats="loadMoreChats"
           >
             <template #sidebar>
               <SideBar
@@ -124,35 +125,32 @@
                 @force-scroll-to-bottom="forceScrollToBottom"
               />
               <ChatInput 
-              :focus-on-input-area="inputFocus"
-              @send="addMessage">
+                :focus-on-input-area="inputFocus"
+                @send="addMessage"
+              >
                 <template #buttons>
                   <FileUploader
                     :filebump-url="filebumpUrl"
-                    :state="'disabled'"
                   />
                   <ButtonEmojiPicker
                     :mode="'hover'"
-                    :state="'disabled'"
                   />
                   <ButtonTemplateSelector
                     :templates="templates"
                     :group-templates="groupTemplates"
                     :mode="'click'"
-                    :state="'disabled'"
+                    :elevated-window="false"
                   />
                   <ButtonWabaTemplateSelector
                     :waba-templates="wabaTemplates"
                     :group-templates="groupTemplates"
                     :mode="'click'"
-                    :state="'disabled'"
                     :filebump-url="filebumpUrl"
                     @send-waba-values="sendWabaValues"
                   />
                   <ChannelSelector
                     :channels="channels"
                     :mode="'hover'"
-                    :state="'disabled'"
                     @select-channel="onSelectChannel"
                   />
                 </template>
@@ -310,6 +308,10 @@ const selectItem = (item) => {
   console.log("selected sidebar item", item);
 };
 
+const loadMoreChats = () => {
+  console.log('load more chats')
+}
+
 const chatAction = async (data) => {
   console.log("chat action", data);
   if (data.action === "add") {
@@ -373,6 +375,7 @@ const messageVisible = (message) => {
 }
 
 const searchMessages = (string) => {
+  foundMessages.value = []
   if (string && string.length > 0){
     isShowFeedWhileSearch.value = false
     foundMessages.value = transformToFeed(props.dataProvider.getMessagesBySearch(selectedChat.value.chatId, string))
@@ -391,9 +394,6 @@ const searchMessages = (string) => {
       foundMessages.value = t
     }
   }
-  else {
-    foundMessages.value = []
-  }
 }
 
 const getFeedObjects = () => {

src/data/chats.ts

@@ -3,7 +3,7 @@ export const chats = [
     chatId: 1, name: "Василий ВасилийВасилийВасилий Василий",
     avatar: 'https://img.freepik.com/free-photo/smiley-man-relaxing-outdoors_23-2148739334.jpg',
     countUnread: 102,
-    lastMessage: 'test',
+    lastMessage: 'Длинное сообщение сомнительного характера в контексте размещения на малой строке',
     'lastActivity.time': 'час назад',         // читаемый формат - для пользователей
     'lastActivity.timestamp': '1727001759',   // для сортировки
     isFixedBottom: false,
@@ -19,6 +19,9 @@ export const chats = [
   },
   {
     chatId: 2, name: "Мария",
+    colorUnread: 'green',
+    lastMessage: 'Длинное сообщение сомнительного характера в контексте размещения на малой строке',
+
     countUnread: 0, isFixedTop: true,
     'lastActivity.time': 'час назад',
     'lastActivity.timestamp': '1727027359',

src/helpers/useSearchModel.ts

@@ -0,0 +1,31 @@
+import { ref } from 'vue';
+
+interface SearchModel {
+    id: string
+    text: string
+}
+
+const searchModels = ref<SearchModel[]>([])
+
+export const useSearchModel = (outId : string) => {
+
+    const index = ref<number>(0)
+
+        let foundModel = searchModels.value.find(({id}) => id == outId)
+        if (foundModel != undefined){
+            index.value = searchModels.value.indexOf(foundModel)
+        } 
+        else {
+            searchModels.value.push({
+                id: outId,
+                text: '',
+            })
+            index.value = searchModels.value.length - 1
+        }
+
+    const getModel = () => {
+        return searchModels.value[index.value]
+    }
+
+    return {getModel}
+}

src/library/components/ButtonTemplateSelector.vue

@@ -18,6 +18,7 @@
       <TemplateSelector
         :templates="templates"
         :group-templates="groupTemplates"
+        :elevated-window="elevatedWindow"
         @close-template-window="close"
       />
     </div>
@@ -47,6 +48,10 @@ const props = defineProps({
     type: String,
     default: 'active',
   },
+  elevatedWindow: {
+    type: Boolean,
+    required: false,
+  }
 })
 
 const templateButton = ref(null)

src/library/components/ChatItem.vue

@@ -24,16 +24,21 @@
     </div>
 
     <div class="chat-item__info-container">
-      <div class="chat-item__name">
+      <Tooltip :text="chat.name" position="bottom">
+        <div class="chat-item__name">
         {{ chat.name }}
       </div>
-
-      <div
+      </Tooltip>
+
+      <Tooltip :text="chat.lastMessage" position="bottom">
+        <div
         v-if="chat.lastMessage || chat.typing"
         class="chat-item__last-message"
       >
         {{ showText }}
       </div>
+      </Tooltip>
+
     </div>
 
     <div class="chat-item__details-container">
@@ -46,6 +51,7 @@
       <div
         v-if="chat.countUnread > 0"
         class="chat-item__unread"
+        :style="{backgroundColor: chat.colorUnread ? chat.colorUnread : null}"
       >
         {{ chat.countUnread > 99 ? '99+' : chat.countUnread }}
       </div>
@@ -98,6 +104,7 @@ import { ref, computed, watch } from 'vue'
 import { ContextMenu } from '.'
 import { getStatus, statuses } from "../../helpers";
 import { t } from '../../locale/useLocale'
+import Tooltip from './Tooltip.vue';
 
 const props = defineProps({
   chat: {
@@ -246,7 +253,7 @@ watch(
     flex-grow: 1;
     align-self: flex-start;
     margin-right: 15px;
-    overflow-x: hidden;
+    overflow: hidden;
   }
 
   &__name {

src/library/components/ChatList.vue

@@ -44,7 +44,11 @@
       @update="getFilter"
     />
 
-    <div class="chat-list__items">
+    <div 
+      class="chat-list__items"
+      ref="refChatList"
+      @scroll="scrollCheck"
+    >
       <div class="chat-list__fixed-items-top">
         <ChatItem
           v-for="chat in getSortedAndFilteredChats().filter(c => c.isFixedTop)"
@@ -82,17 +86,10 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import {ChatItem, ChatFilter, ContextMenu} from "./";
+import { ref, unref } from 'vue';
+import { ChatItem, ChatFilter, ContextMenu } from "./";
 import { t } from '../../locale/useLocale';
 
-const filter = ref('');
-const isOpenMenu = ref(false)
-
-const hideMenu = () => {
-  isOpenMenu.value = false
-}
-
 // Define props
 const props = defineProps({
   chats: {
@@ -111,7 +108,24 @@ const props = defineProps({
 });
 
 // Define emits
-const emit = defineEmits(['select', 'action']);
+const emit = defineEmits(['select', 'action', 'loadMoreChats']);
+
+const filter = ref('');
+const isOpenMenu = ref(false)
+const refChatList = ref()
+
+const hideMenu = () => {
+  isOpenMenu.value = false
+}
+
+const scrollCheck = () => {
+  const element = unref(refChatList);
+  const scrollBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+
+  if (scrollBottom <= 0){
+    emit('loadMoreChats')
+  }
+};
 
 // Define method
 const selectChat = (chat) => {

src/library/components/FeedSearch.vue

@@ -7,7 +7,7 @@
         class="feed-search__input"
         type="text"
         :placeholder="t('component.FeedSearch.SearchPlaceholder')"
-        v-model="search"
+        v-model="getModel().text"
       >
       <i 
         class="pi pi-times" 
@@ -25,10 +25,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, unref, onMounted, watch, computed } from 'vue';
+import { ref, unref, onMounted, watch, computed, inject } from 'vue';
 import { t } from '../../locale/useLocale';
+import { useSearchModel } from '../../helpers/useSearchModel';
 import useDelayDebouncedRef from '../../helpers/useDelayDebouncedRef';
 
+const chatAppId = inject('chatAppId')
+const { getModel } = useSearchModel(chatAppId as string)
+
 const emit = defineEmits(['search', 'cancel', 'switch'])
 
 const props = defineProps({
@@ -47,23 +51,26 @@ const resetLoc = computed(() => {
 })
 
 watch(
-  () => search.value,
+  () => [getModel().text, search.value],
   () => {
-    emit('search', search.value);
+    if (search.value == getModel().text)
+      emit('search', getModel().text);
+    else
+      search.value = getModel().text
   }
 )
 
 const clearInput = () => {
   const el = unref(refInput);
   if (el)
     el.value = ''
+  getModel().text = ''
   emit('cancel')
 }
 
 onMounted(() => {
   const el = unref(refInput);
   el?.focus()
-  emit('search', el?.value);
 })
 
 </script>