From 22794f7bfbd36e7a5502243067cab54f4b6f74aa Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 2 Jun 2024 09:34:57 +0200
Subject: [PATCH] sort channels

---
 .../attachments/attachments.component.scss    |  2 +-
 .../add-new-channel.component.ts              | 22 +++++++++++++++----
 .../sidebar-channels.component.html           |  6 ++---
 .../sidebar-channels.component.ts             |  4 +++-
 src/app/interface/channel.interface.ts        |  1 +
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/app/components/main-chat/single-chat/attachments/attachments.component.scss b/src/app/components/main-chat/single-chat/attachments/attachments.component.scss
index d051c70..7b9ed6e 100644
--- a/src/app/components/main-chat/single-chat/attachments/attachments.component.scss
+++ b/src/app/components/main-chat/single-chat/attachments/attachments.component.scss
@@ -2,9 +2,9 @@
 
 .files {
   display: flex;
-
   max-width: calc(100vw - 140px);
   overflow: auto;
+  margin-top: 12px;
   .filesView {
     cursor: pointer;
     transition: 0.3s ease-in-out;
diff --git a/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.ts b/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.ts
index ebc2e2b..7037736 100644
--- a/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.ts
+++ b/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.ts
@@ -154,11 +154,13 @@ export class AddNewChannelComponent {
 
   /**
    * Check if channel is allready existing.
-   * @param channelName 
-   * @returns 
+   * @param channelName
+   * @returns
    */
-  chechIfChannelExist(channelName: string){
-    const filterChannel = this.channelService.allChannels.some(channel => channel.name === channelName);
+  chechIfChannelExist(channelName: string) {
+    const filterChannel = this.channelService.allChannels.some(
+      (channel) => channel.name === channelName
+    );
     if (filterChannel) {
       return true;
     } else {
@@ -178,6 +180,7 @@ export class AddNewChannelComponent {
       hashtag: this.channelName,
       createdDate: this.currentDate,
       addedUser: this.checkUserArray(),
+      index: this.lastChannelIndex() + 1,
     };
     const channelId = await this.channelService.createNewChannel(
       newChannel,
@@ -190,6 +193,17 @@ export class AddNewChannelComponent {
     this.route.navigateByUrl(`main/${channelId}`);
   }
 
+  /**
+   * Calculates the index of the last channel and returns the next available index.
+   * @returns {number} The next available channel index.
+   */
+  lastChannelIndex(): number {
+    const channels = this.channelService.allChannels.filter(
+      (channel) => channel.index !== undefined && channel.index !== null
+    );
+    return Math.max(...channels.map((channel) => channel.index));
+  }
+
   /**
    * Checks the user array.
    * @returns The user array.
diff --git a/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.html b/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.html
index c26f8f6..00c08da 100644
--- a/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.html
+++ b/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.html
@@ -8,7 +8,7 @@
         class="arrowImg"
       />
       <img src="./assets/img/sidebar/bubbles.svg" alt="" />
-      <p> {{ 'sidebar-channels.channel' | translate }}</p>
+      <p>{{ "sidebar-channels.channel" | translate }}</p>
     </div>
     <div class="btn">
       <app-small-btn
@@ -29,7 +29,7 @@
       showAllChanneld: minimizeChannels
     }"
   >
-    @for (channel of getChannels(); track channel; let i = $index) {
+    @for (channel of getChannels(); track channel) {
     <div
       class="channelName"
       routerLink="/main/{{ channel.id }}"
@@ -47,7 +47,7 @@
     <div class="circle">
       <img src="./assets/img/sidebar/add-circle.svg" alt="" />
     </div>
-    <p>{{ 'sidebar-channels.addChannel' | translate }}</p>
+    <p>{{ "sidebar-channels.addChannel" | translate }}</p>
   </div>
   <app-add-new-channel
     [viewWidth]="viewWidth"
diff --git a/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.ts b/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.ts
index a8905d9..9a3dbca 100644
--- a/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.ts
+++ b/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.ts
@@ -82,6 +82,8 @@ export class SidebarChannelsComponent {
       (channel) => !priorityChannels.includes(channel)
     );
 
-    return [...priorityChannels, ...otherChannels];
+    return [...priorityChannels, ...otherChannels].sort(
+      (a, b) => a.index - b.index
+    );
   }
 }
diff --git a/src/app/interface/channel.interface.ts b/src/app/interface/channel.interface.ts
index 531a520..84890c0 100644
--- a/src/app/interface/channel.interface.ts
+++ b/src/app/interface/channel.interface.ts
@@ -12,6 +12,7 @@ export interface Channel {
   hashtag: string;
   createdDate: string;
   addedUser: Array<string>;
+  index: number;
 }
 
 export interface PrvChannel {