chat

src/app/modules/chat/chat.component.html

@@ -1,2 +1,6 @@
-<p>chat works!</p>
+<div class="chat" fxLayout="row wrap" fxLayoutAlign="start start">
+  <app-user-list fxFlex="33.33333"></app-user-list>
+  <app-chat-channel fxFlex="33.33333"></app-chat-channel>
+  <app-chat-details fxFlex="33.33333"></app-chat-details>
+</div>
 <router-outlet></router-outlet>

src/app/modules/chat/chat.component.scss

@@ -0,0 +1,84 @@
+@mixin chat-theme() {
+  app-chat {
+    .chat {
+      background-color: $off-white;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      padding: 20px;
+      margin: 20px 0;
+      border-radius: 18px;
+      .user-list {
+        main {
+          h1 {
+            font-size: 15px;
+            color: $main-color;
+          }
+        }
+
+        ul {
+          list-style: none;
+          padding: 10px 0;
+          li {
+            padding: 10px 0;
+            border-radius: 20px;
+            margin-bottom: 10px;
+            transition: all 0.5s;
+            cursor: pointer;
+            &:hover {
+              background-color: $white-color;
+              padding: 10px;
+            }
+            div {
+              img {
+                width: 50px;
+                height: 50px;
+                object-fit: cover;
+              }
+            }
+            .user-info {
+              p {
+                font-size: 15px;
+                color: #4b5155;
+              }
+              span {
+                color: #7b8793;
+                font-size: 13px;
+              }
+            }
+
+            .count {
+              background-color: #76c00d;
+              border-radius: 50%;
+              color: $white-color;
+              display: block;
+              width: 20px;
+              height: 20px;
+              text-align: center;
+              margin-bottom: 5px;
+            }
+
+            .time {
+              color: #7b8793;
+              font-size: 13px;
+            }
+          }
+        }
+      }
+
+      .actions {
+        margin-top: 30px;
+        h1 {
+          font-size: 15px;
+          color: #4b5155;
+          margin-bottom: 5px;
+        }
+        input {
+          width: 100%;
+          background-color: $white-color;
+          border: 1px solid #dbe5ed;
+          padding: 10px 20px;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+}

src/app/modules/chat/chat.module.ts

@@ -3,9 +3,18 @@ import { CommonModule } from '@angular/common';
 
 import { ChatRoutingModule } from './chat-routing.module';
 import { ChatComponent } from './chat.component';
+import { UserListComponent } from './components/user-list/user-list.component';
+import { ChatChannelComponent } from './components/chat-channel/chat-channel.component';
+import { ChatDetailsComponent } from './components/chat-details/chat-details.component';
+import { SharedModule } from '@shared/shared.module';
 
 @NgModule({
-  declarations: [ChatComponent],
-  imports: [CommonModule, ChatRoutingModule],
+  declarations: [
+    ChatComponent,
+    UserListComponent,
+    ChatChannelComponent,
+    ChatDetailsComponent,
+  ],
+  imports: [CommonModule, ChatRoutingModule, SharedModule],
 })
 export class ChatModule {}

src/app/modules/chat/components/chat-channel/chat-channel.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatChannelComponent } from './chat-channel.component';
+
+describe('ChatChannelComponent', () => {
+  let component: ChatChannelComponent;
+  let fixture: ComponentFixture<ChatChannelComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ChatChannelComponent]
+    });
+    fixture = TestBed.createComponent(ChatChannelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/chat/components/chat-channel/chat-channel.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-chat-channel',
+  templateUrl: './chat-channel.component.html',
+  styleUrls: ['./chat-channel.component.scss']
+})
+export class ChatChannelComponent {
+
+}

src/app/modules/chat/components/chat-details/chat-details.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatDetailsComponent } from './chat-details.component';
+
+describe('ChatDetailsComponent', () => {
+  let component: ChatDetailsComponent;
+  let fixture: ComponentFixture<ChatDetailsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ChatDetailsComponent]
+    });
+    fixture = TestBed.createComponent(ChatDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/chat/components/chat-details/chat-details.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-chat-details',
+  templateUrl: './chat-details.component.html',
+  styleUrls: ['./chat-details.component.scss'],
+})
+export class ChatDetailsComponent {}

src/app/modules/chat/components/user-list/user-list.component.html

@@ -0,0 +1,87 @@
+<section class="user-list">
+  <main>
+    <h1 fxLayout="row" fxLayoutAlign="start center" class="gap-5">
+      <img src="../../../../../assets/images/chat.svg" alt="" title="" />
+      <span>Messages</span>
+    </h1>
+  </main>
+
+  <div class="actions">
+    <h1 fxLayout="row" fxLayoutAlign="space-between start">
+      <span>Active Chats</span>
+      <span>+</span>
+    </h1>
+    <input type="search" placeholder="Search..." />
+  </div>
+
+  <ul>
+    <li fxLayout="row wrap" fxLayoutAlign="start center">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="80"
+        fxLayout="row wrap"
+        fxLayoutAlign="start center"
+      >
+        <img src="../../../../../assets/images/avatar.png" alt="" title="" />
+        <div class="user-info plr-10">
+          <p>Mai Ghoneim</p>
+          <span>Me: What does this dummy…</span>
+        </div>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="20"
+        fxLayout="column"
+        fxLayoutAlign="center end"
+      >
+        <span class="count">3</span>
+        <span class="time">03:00</span>
+      </div>
+    </li>
+    <li fxLayout="row wrap" fxLayoutAlign="start center">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="80"
+        fxLayout="row wrap"
+        fxLayoutAlign="start center"
+      >
+        <img src="../../../../../assets/images/avatar.png" alt="" title="" />
+        <div class="user-info plr-10">
+          <p>Mai Ghoneim</p>
+          <span>Me: What does this dummy…</span>
+        </div>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="20"
+        fxLayout="column"
+        fxLayoutAlign="center end"
+      >
+        <span class="count">2</span>
+        <span class="time">03:00</span>
+      </div>
+    </li>
+    <li fxLayout="row wrap" fxLayoutAlign="start center">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="80"
+        fxLayout="row wrap"
+        fxLayoutAlign="start center"
+      >
+        <img src="../../../../../assets/images/avatar.png" alt="" title="" />
+        <div class="user-info plr-10">
+          <p>Mai Ghoneim</p>
+          <span>Me: What does this dummy…</span>
+        </div>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="20"
+        fxLayout="column"
+        fxLayoutAlign="center end"
+      >
+        <span class="time">03:00</span>
+      </div>
+    </li>
+  </ul>
+</section>

src/app/modules/chat/components/user-list/user-list.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserListComponent } from './user-list.component';
+
+describe('UserListComponent', () => {
+  let component: UserListComponent;
+  let fixture: ComponentFixture<UserListComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserListComponent]
+    });
+    fixture = TestBed.createComponent(UserListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/chat/components/user-list/user-list.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-list',
+  templateUrl: './user-list.component.html',
+  styleUrls: ['./user-list.component.scss'],
+})
+export class UserListComponent {}

src/app/modules/components/header/header.component.html

@@ -31,7 +31,13 @@
     >
       <img class="ptr" src="/assets/images/calendar-days.svg" alt="" title="" />
       <img class="ptr" src="/assets/images/notification.svg" alt="" title="" />
-      <img class="ptr" src="/assets/images/chat.svg" alt="" title="" />
+      <img
+        class="ptr"
+        src="/assets/images/chat.svg"
+        alt=""
+        title=""
+        (click)="onOpenChat()"
+      />
     </div>
 
     <img

src/app/modules/components/header/header.component.ts

@@ -1,10 +1,14 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+  styleUrls: ['./header.component.scss'],
 })
 export class HeaderComponent {
-
+  constructor(private readonly router: Router) {}
+  onOpenChat(): void {
+    this.router.navigate(['/modules/chat']);
+  }
 }

src/assets/scss/variables.scss

@@ -88,6 +88,7 @@ $span-color: #707070;
 @import "../../app/modules/human-resource/human-resource.component.scss";
 @import "../../app/modules/medical-insurance/medical-insurance.component.scss";
 @import "../../app/modules/search-employee/search-employee.component.scss";
+@import "../../app/modules/chat/chat.component.scss";
 
 @import "./spineer.scss";
 
@@ -109,6 +110,7 @@ $span-color: #707070;
   @include human-resourcce-theme();
   @include medical-theme();
   @include search-employee-theme();
+  @include chat-theme();
 }
 
 @include component-theme();

src/styles.scss

@@ -316,3 +316,7 @@ input.mat-input-element {
     border-bottom: 1px solid #ccc !important;
   }
 }
+
+.plr-10 {
+  padding: 0 10px;
+}