meeting details page

src/app/modules/meetings/components/meeting-item/meeting-item.component.html

@@ -1,4 +1,4 @@
-<div class="item-card">
+<div class="item-card ptr" (click)="onOpenDetails()">
   <h1>
     <span>9:30 AM - 12:30 PM</span>
   </h1>

src/app/modules/meetings/components/meeting-item/meeting-item.component.ts

@@ -1,8 +1,17 @@
 import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-meeting-item',
   templateUrl: './meeting-item.component.html',
   styleUrls: ['./meeting-item.component.scss'],
 })
-export class MeetingItemComponent {}
+export class MeetingItemComponent {
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
+  onOpenDetails(): void {
+    this.router.navigate(['./details'], { relativeTo: this.route });
+  }
+}

src/app/modules/meetings/meeting-details/meeting-details.component.html

@@ -0,0 +1,100 @@
+<section
+  class="meetings-details gap-20"
+  fxLayout="row wrap"
+  fxLayoutAlign="start start"
+>
+  <div class="meetings-details__content" fxFlex.lt-md="100" fxFlex.gt-sm="73">
+    <header fxLayout="row" fxLayoutAlign="space-between center">
+      <img src="assets/images/arrow.svg" alt="" title="" />
+      <button>Create Meeting</button>
+    </header>
+    <div class="meetings-details__description">
+      <p class="bold">Sun <span>01/8/2023</span></p>
+      <p class="time bold">9:30 AM - 12:30 PM</p>
+    </div>
+    <div
+      class="meetings-details__options"
+      fxLayout="row wrap"
+      fxLayoutAlign="space-between start"
+    >
+      <main>
+        <img src="assets/images/meet_icon.svg" alt="" title="" />
+        <span class="bold">Meeting with CEO</span>
+        <ul fxLayout="row" fxLayoutAlign="start center">
+          <li>
+            <img src="assets/images/avatar.png" alt="" title="" />
+          </li>
+          <li>
+            <img src="assets/images/avatar.png" alt="" title="" />
+          </li>
+          <li>
+            <img src="assets/images/avatar.png" alt="" title="" />
+          </li>
+        </ul>
+      </main>
+      <div
+        class="meetings-details__options__actions gap-10"
+        fxLayout="row"
+        fxLayoutAlign="start center"
+      >
+        <img class="ptr" src="assets/images/file_icon.svg" alt="" title="" />
+        <img class="ptr" src="assets/images/options.svg" alt="" title="" />
+      </div>
+    </div>
+    <div class="mt-2">
+      <p class="bold fs-15">Meeting Details :</p>
+      <ul class="list-description">
+        <li class="bold">- Overview for the Project</li>
+        <li class="bold">- Overview for the Project</li>
+        <li class="bold">- Overview for the Project</li>
+        <li class="bold">- Overview for the Project</li>
+        <li class="bold">- Overview for the Project</li>
+        <li class="bold">- Overview for the Project</li>
+      </ul>
+    </div>
+  </div>
+  <div class="meetings-details__members" fxFlex.lt-md="100" fxFlex.gt-sm="25">
+    <h1 class="bold">Meeting Members</h1>
+    <ul>
+      <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+        <img src="../../../../assets/images/avatar.png" alt="" title="" />
+        <div fxLayout="column" fxLayoutAlign="start start">
+          <p>Franky Schmidt</p>
+          <span>Online</span>
+        </div>
+      </li>
+      <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+        <img src="../../../../assets/images/avatar.png" alt="" title="" />
+        <div fxLayout="column" fxLayoutAlign="start start">
+          <p>Franky Schmidt</p>
+          <span>Online</span>
+        </div>
+      </li>
+      <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+        <img src="../../../../assets/images/avatar.png" alt="" title="" />
+        <div fxLayout="column" fxLayoutAlign="start start">
+          <p>Franky Schmidt</p>
+          <span>Online</span>
+        </div>
+      </li>
+      <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+        <img src="../../../../assets/images/avatar.png" alt="" title="" />
+        <div fxLayout="column" fxLayoutAlign="start start">
+          <p>Franky Schmidt</p>
+          <span>Online</span>
+        </div>
+      </li>
+      <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+        <img src="../../../../assets/images/avatar.png" alt="" title="" />
+        <div fxLayout="column" fxLayoutAlign="start start">
+          <p>Franky Schmidt</p>
+          <span>Online</span>
+        </div>
+      </li>
+    </ul>
+
+    <div fxLayout="row" fxLayoutAlign="end center">
+      <a class="bold ptr">View all</a>
+    </div>
+  </div>
+</section>

src/app/modules/meetings/meeting-details/meeting-details.component.spec.ts

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

src/app/modules/meetings/meeting-details/meeting-details.component.ts

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

src/app/modules/meetings/meetings-routing.module.ts

@@ -2,12 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { MeetingsComponent } from './meetings.component';
 import { ListComponent } from './list/list.component';
+import { MeetingDetailsComponent } from './meeting-details/meeting-details.component';
 
 const routes: Routes = [
   {
     path: '',
     component: MeetingsComponent,
-    children: [{ path: '', component: ListComponent }],
+    children: [
+      { path: '', component: ListComponent },
+      { path: 'details', component: MeetingDetailsComponent },
+    ],
   },
 ];
 

src/app/modules/meetings/meetings-theme.scss

@@ -67,5 +67,120 @@
         }
       }
     }
+
+    .meetings-details {
+      margin: 20px 0;
+      height: 100%;
+      button {
+        background-color: $light-blue;
+        padding: 10px 20px;
+        border-radius: 20px;
+        color: $white-color;
+        outline: none;
+        border: 1px solid $light-blue;
+        font-size: 18px;
+        cursor: pointer;
+      }
+      &__content {
+        width: 100%;
+        height: 100%;
+        background-color: $off-white;
+        border-radius: 15px;
+        padding: 10px 20px;
+        box-shadow: -2px 6px 9px #2f2c8333;
+      }
+      &__members {
+        width: 100%;
+        height: 100%;
+        background-color: $off-white;
+        border-radius: 15px;
+        padding: 20px 20px;
+        box-shadow: -2px 6px 9px #2f2c8333;
+        h1 {
+          color: $main-color;
+          font-size: 20px;
+        }
+
+        ul {
+          list-style: none;
+          padding: 30px 0;
+          li {
+            padding: 10px;
+            transition: all 1s;
+            margin-bottom: 10px;
+            img {
+            }
+            div {
+              p {
+                color: #4b5155;
+                font-size: 13px;
+              }
+
+              span {
+                color: green;
+                font-size: 12px;
+              }
+            }
+
+            &:hover {
+              background-color: #f9fafc;
+              border-radius: 10px;
+            }
+          }
+        }
+
+        div {
+          a {
+            color: $main-color;
+            text-decoration: underline;
+            font-size: 15px;
+            cursor: pointer;
+            transition: all 1s;
+            &:hover {
+              color: $main-blue;
+            }
+          }
+        }
+      }
+      &__description {
+        padding: 20px 0;
+        p {
+          color: $span-color;
+          span {
+            color: $main-color;
+          }
+        }
+        .time {
+          font-size: 20px;
+          color: $span-color;
+          margin-top: 5px;
+          font-size: 12px;
+        }
+      }
+
+      &__options {
+        main {
+          span {
+            margin: 0 5px;
+          }
+
+          ul {
+            list-style: none;
+            li {
+            }
+          }
+        }
+      }
+    }
+
+    .list-description {
+      list-style: none;
+      margin: 10px 0;
+      li {
+        padding-bottom: 5px;
+        font-size: 13px;
+        color: $span-color;
+      }
+    }
   }
 }

src/app/modules/meetings/meetings.module.ts

@@ -7,9 +7,16 @@ import { ListComponent } from './list/list.component';
 import { MeetingItemComponent } from './components/meeting-item/meeting-item.component';
 import { SharedModule } from '@shared/shared.module';
 import { CeateMeetingComponent } from './components/ceate-meeting/ceate-meeting.component';
+import { MeetingDetailsComponent } from './meeting-details/meeting-details.component';
 
 @NgModule({
-  declarations: [MeetingsComponent, ListComponent, MeetingItemComponent, CeateMeetingComponent],
+  declarations: [
+    MeetingsComponent,
+    ListComponent,
+    MeetingItemComponent,
+    CeateMeetingComponent,
+    MeetingDetailsComponent,
+  ],
   imports: [CommonModule, MeetingsRoutingModule, SharedModule],
 })
 export class MeetingsModule {}

src/assets/images/file_icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.914" height="13.913" viewBox="0 0 13.914 13.913">
+  <g id="_60ce36723c17bbac504f2ef4c8a46995" data-name="60ce36723c17bbac504f2ef4c8a46995" transform="translate(-9.975 -9.975)">
+    <g id="Group_141" data-name="Group 141" transform="translate(9.975 9.975)">
+      <path id="Path_1278" data-name="Path 1278" d="M406.656,10.907a3.19,3.19,0,0,0-4.506,0h0l-1.965,1.966.907.907,1.966-1.966h0a1.9,1.9,0,0,1,2.69,2.693l-2.95,2.949a1.9,1.9,0,0,1-2.692,0l-.907.907a3.187,3.187,0,0,0,4.506,0l2.95-2.95A3.19,3.19,0,0,0,406.656,10.907Z" transform="translate(-393.674 -9.975)" fill="#2f2c83"/>
+      <path id="Path_1279" data-name="Path 1279" d="M14.506,341.056h0a1.9,1.9,0,0,1-2.692-2.692l2.95-2.95a1.9,1.9,0,0,1,2.692,0l.907-.907a3.19,3.19,0,0,0-4.506,0l-2.95,2.95a3.186,3.186,0,0,0,4.506,4.506h0L17.379,340l-.907-.907Z" transform="translate(-9.975 -328.981)" fill="#2f2c83"/>
+    </g>
+  </g>
+</svg>

src/styles.scss

@@ -246,3 +246,7 @@ input.mat-input-element {
 .fz-13 {
   font-size: 13px;
 }
+
+.fs-15 {
+  font-size: 15px;
+}