added ability to add custom component in layout section components, a…

…dded scroll handle when sending message from chat window
fleetbase · May 15, 2024 · 1bd1bcc · 1bd1bcc
1 parent 8babd4e
commit 1bd1bcc
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 26 deletions.
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
@@ -50,15 +50,15 @@ export default class ChatWindowComponent extends Component {
         this.sender = this.getSenderFromParticipants(channel);
         // if not participant close window
         if (!this.sender) {
-            later(
+            return later(
                 this,
                 () => {
                     this.chat.closeChannel(channel);
                 },
                 300
             );
-            return;
         }
+
         this.listenChatChannel(channel);
         this.loadAvailableUsers.perform();
         this.chat.on('chat.closed', this.handleChatClosed.bind(this));
@@ -73,6 +73,7 @@ export default class ChatWindowComponent extends Component {
     async listenChatChannel(chatChannelRecord) {
         this.socket.listen(`chat.${chatChannelRecord.public_id}`, (socketEvent) => {
             const { event, data } = socketEvent;
+            console.log(event);
             switch (event) {
                 case 'chat.added_participant':
                 case 'chat.removed_participant':
@@ -140,6 +141,7 @@ export default class ChatWindowComponent extends Component {
         yield this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent, attachments);
         this.pendingMessageContent = '';
         this.pendingAttachmentFiles = [];
+        this.handleChatFeedScroll();
     }
 
     @action handleKeyPress(event) {
@@ -233,7 +235,7 @@ export default class ChatWindowComponent extends Component {
                 () => {
                     this.channelFeedContainerElement.scrollTop = this.channelFeedContainerElement.scrollHeight;
                 },
-                800
+                300
             );
         }
     }

diff --git a/addon/components/layout/section/footer.hbs b/addon/components/layout/section/footer.hbs
@@ -1,3 +1,6 @@
 <div class="next-view-section-footer" {{vertical-offset-by "bottom" offset=@verticalOffset elements=@verticalOffsetElements}} ...attributes>
+    {{#if @footerComponent}}
+        {{component @footerComponent}}
+    {{/if}}
     {{yield}}
 </div>
diff --git a/addon/components/layout/section/header.hbs b/addon/components/layout/section/header.hbs
@@ -1,28 +1,36 @@
 <div id="next-view-section-subheader" class="next-view-section-subheader {{if @hideActions 'actions-hidden'}}" ...attributes>
-    <div id="next-view-section-subheader-left" class="next-view-section-subheader-left {{@leftSubheaderClass}}">
-        <div class="flex flex-row items-center">
-            {{#if @badge}}
-                <span class="mr-2 {{@badgeContainerClass}}">
-                    <Badge @status={{@badge}} @hideStatusDot={{@hideStatusDot}} class={{@badgeClass}} @disableHumanize={{@disableBadgeHumanize}} />
-                </span>
-            {{/if}}
-            {{#if @icon}}
-                <FaIcon @icon={{@icon}} @size={{@iconSize}} @prefix={{@iconPrefix}} class="{{@iconClass}} mr-2" />
-            {{/if}}
-            <h2 id="next-view-section-subheader-title" class="next-view-section-subheader-title {{@titleClass}}">{{@title}}</h2>
-            {{#if @subtitle}}
-                <div class={{@subtitleClass}}>
-                    {{@subtitle}}
+    {{#if @headerComponent}}
+        {{component @headerComponent}}
+    {{else}}
+        <div id="next-view-section-subheader-left" class="next-view-section-subheader-left {{@leftSubheaderClass}}">
+            {{#if @headerTitleComponent}}
+                {{component @headerTitleComponent}}
+            {{else}}
+                <div class="flex flex-row items-center">
+                    {{#if @badge}}
+                        <span class="mr-2 {{@badgeContainerClass}}">
+                            <Badge @status={{@badge}} @hideStatusDot={{@hideStatusDot}} class={{@badgeClass}} @disableHumanize={{@disableBadgeHumanize}} />
+                        </span>
+                    {{/if}}
+                    {{#if @icon}}
+                        <FaIcon @icon={{@icon}} @size={{@iconSize}} @prefix={{@iconPrefix}} class="{{@iconClass}} mr-2" />
+                    {{/if}}
+                    <h2 id="next-view-section-subheader-title" class="next-view-section-subheader-title {{@titleClass}}">{{@title}}</h2>
+                    {{#if @subtitle}}
+                        <div class={{@subtitleClass}}>
+                            {{@subtitle}}
+                        </div>
+                    {{/if}}
                 </div>
             {{/if}}
+            {{#if @onSearch}}
+                <Input @type="text" @value={{@searchQuery}} aria-label={{t "common.search-input"}} placeholder={{or @searchPlaceholder (concat (t "common.search") " " (pluralize @title))}} class="w-64 ml-3 form-input form-input-sm {{@searchInputClass}}" {{on "keyup" @onSearch}} />
+            {{/if}}
         </div>
-        {{#if @onSearch}}
-            <Input @type="text" @value={{@searchQuery}} aria-label={{t "common.search-input"}} placeholder={{or @searchPlaceholder (concat (t "common.search") " " (pluralize @title))}} class="w-64 ml-3 form-input form-input-sm {{@searchInputClass}}" {{on "keyup" @onSearch}} />
-        {{/if}}
-    </div>
-    {{#unless @hideActions}}
-        <div id="next-view-section-subheader-actions" class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
-            {{yield}}
-        </div>
-    {{/unless}}
+        {{#unless @hideActions}}
+            <div id="next-view-section-subheader-actions" class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
+                {{yield}}
+            </div>
+        {{/unless}}
+    {{/if}}
 </div>