details tabs

src/app/modules/task-management/components/attachements/attachements.component.html

@@ -0,0 +1,30 @@
+<section class="attachements">
+  <table>
+    <thead>
+      <tr>
+        <th>File Name</th>
+        <th>File Size</th>
+        <th>Upload Date</th>
+        <th>Upload By</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Mohamed-cv.doc</td>
+        <td>1.8 BM</td>
+        <td>17-5-2022</td>
+        <td fxLayout="row" fxLayoutAlign="start start">
+          <img src="../../../../../assets/images/avatar.png" alt="" title="" />
+          <span>Franky Schmidt</span>
+        </td>
+      </tr>
+      <tr>
+        <td>February</td>
+        <td>$80</td>
+        <td>January</td>
+        <td>$100</td>
+      </tr>
+    </tbody>
+  </table>
+  <button class="upload-btn">Upload File</button>
+</section>

src/app/modules/task-management/components/attachements/attachements.component.spec.ts

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

src/app/modules/task-management/components/attachements/attachements.component.ts

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

src/app/modules/task-management/components/comments/comments.component.html

@@ -0,0 +1,50 @@
+<section class="comments">
+  <form fxLayout="row" fxLayoutAlign="start center" class="gap-10">
+    <input type="text" placeholder="Comments" fxFlex="80" />
+    <button fxFlex="20" class="publish">Publish</button>
+  </form>
+
+  <div>
+    <ul>
+      <li fxLayout="row" fxLayoutAlign="start start" class="gap-10">
+        <div fxFlex="10">
+          <img
+            src="../../../../../assets/images/market_info_avatar.png"
+            alt=""
+            title=""
+          />
+        </div>
+        <div fxFlex="90" class="mt-5">
+          <p>Annie Schmidt <span class="bold">. 30 Min ago</span></p>
+          <p class="comment">Please, can you fix the issue?</p>
+        </div>
+      </li>
+      <li fxLayout="row" fxLayoutAlign="start start" class="gap-10">
+        <div fxFlex="10">
+          <img
+            src="../../../../../assets/images/market_info_avatar.png"
+            alt=""
+            title=""
+          />
+        </div>
+        <div fxFlex="90" class="mt-5">
+          <p>Annie Schmidt <span class="bold">. 30 Min ago</span></p>
+          <p class="comment">Please, can you fix the issue?</p>
+        </div>
+      </li>
+      <li fxLayout="row" fxLayoutAlign="start start" class="gap-10">
+        <div fxFlex="10">
+          <img
+            src="../../../../../assets/images/market_info_avatar.png"
+            alt=""
+            title=""
+          />
+        </div>
+        <div fxFlex="90" class="mt-5">
+          <p>Annie Schmidt <span class="bold">. 30 Min ago</span></p>
+          <p class="comment">Please, can you fix the issue?</p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</section>

src/app/modules/task-management/components/comments/comments.component.spec.ts

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

src/app/modules/task-management/components/comments/comments.component.ts

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

src/app/modules/task-management/components/description/description.component.html

@@ -0,0 +1,28 @@
+<section class="description">
+  <h1 class="bold">Home Page Design</h1>
+  <p>
+    Designing a home page containing meetings, messages, tasks and calendar
+    Designing a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendar Designing a home page containing meetings, messages, tasks and
+    calendar Designing a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendar Designing a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendar Designing a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendar Designing a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendar Designing a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendar Designing a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendarDesigning a home page containing meetings, messages, tasks and
+    calendar.
+  </p>
+</section>

src/app/modules/task-management/components/description/description.component.spec.ts

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

src/app/modules/task-management/components/description/description.component.ts

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

src/app/modules/task-management/task-details/task-details.component.html

@@ -30,4 +30,20 @@
       ></app-progess>
     </div> -->
   </main>
+  <mat-tab-group
+    animationDuration="300ms"
+    mat-stretch-tabs="false"
+    mat-align-tabs="start"
+    class="mt-3"
+  >
+    <mat-tab label="Comments">
+      <app-comments></app-comments>
+    </mat-tab>
+    <mat-tab label="Discription">
+      <app-description></app-description>
+    </mat-tab>
+    <mat-tab label="Attachements">
+      <app-attachements></app-attachements>
+    </mat-tab>
+  </mat-tab-group>
 </section>

src/app/modules/task-management/task-management.module.ts

@@ -10,6 +10,9 @@ import { ProjecctsComponent } from './components/projeccts/projeccts.component';
 import { TaskComponent } from './components/task/task.component';
 import { ProgessComponent } from './components/progess/progess.component';
 import { TaskDetailsComponent } from './task-details/task-details.component';
+import { CommentsComponent } from './components/comments/comments.component';
+import { DescriptionComponent } from './components/description/description.component';
+import { AttachementsComponent } from './components/attachements/attachements.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +23,9 @@ import { TaskDetailsComponent } from './task-details/task-details.component';
     TaskComponent,
     ProgessComponent,
     TaskDetailsComponent,
+    CommentsComponent,
+    DescriptionComponent,
+    AttachementsComponent,
   ],
   imports: [CommonModule, TaskManagementRoutingModule, SharedModule],
 })

src/app/modules/task-management/task-managemnt-theme.scss

@@ -238,5 +238,120 @@
         }
       }
     }
+
+    .comments {
+      width: 100%;
+      padding: 40px 0;
+      form {
+        width: 50%;
+        input {
+          padding: 10px 20px;
+          background: $white-color 0% 0% no-repeat padding-box;
+          border: 0.5px solid $main-color;
+          border-radius: 10px;
+          outline: none;
+        }
+
+        button {
+          padding: 10px 20px;
+          background: $light-blue 0% 0% no-repeat padding-box;
+          border-radius: 10px;
+          border: none;
+          color: $white-color;
+        }
+      }
+
+      div {
+        ul {
+          padding: 20px 0;
+          width: 50%;
+          li {
+            width: 100%;
+            margin-top: 20px;
+            div {
+              img {
+                width: 100%;
+              }
+              p {
+                font-size: 13px;
+                span {
+                  color: $main-color;
+                }
+              }
+              .comment {
+                background-color: #ebecf2;
+                padding: 10px 20px;
+                margin-top: 5px;
+                border-radius: 10px;
+                margin-top: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .description {
+      padding: 40px 0;
+      h1 {
+        color: $main-color;
+        margin-bottom: 5px;
+      }
+
+      p {
+        color: #707070;
+        font-size: 14px;
+        line-height: 20px;
+      }
+    }
+
+    .attachements {
+      width: 100%;
+      padding: 40px 0;
+      table {
+        width: 100%;
+        border: none;
+        border-spacing: 0;
+        text-align: inherit;
+        thead {
+          tr {
+            background-color: #2f2c8312;
+            border-radius: 20px;
+          }
+          th {
+            text-align: initial;
+            padding: 10px 20px;
+            &:first-child {
+              border-radius: 10px 0 0 10px;
+            }
+
+            &:last-child {
+              border-radius: 0 10px 10px 0;
+            }
+          }
+        }
+
+        tbody {
+          td {
+            padding: 10px 20px;
+            border-bottom: 1px solid #fff;
+          }
+        }
+      }
+
+      .upload-btn {
+        background-color: #28abe3;
+        border: none;
+        padding: 10px 20px;
+        color: $white-color;
+        border-radius: 20px;
+        margin-top: 3rem;
+        cursor: pointer;
+      }
+    }
+
+    .mat-mdc-tab-list {
+      border-bottom: 1px solid #ccc;
+    }
   }
 }

src/app/shared/shared.module.ts

@@ -25,6 +25,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { ErrorFormComponent } from './components/error-form/error-form.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatTabsModule } from '@angular/material/tabs';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -47,6 +48,7 @@ const MATERIAL_MODULES = [
   MatButtonModule,
   MatDialogModule,
   MatProgressBarModule,
+  MatTabsModule,
 ];
 
 const COMPONENTS = [ErrorFormComponent, WarningComponent, FileUploadComponent];

src/styles.scss

@@ -70,6 +70,10 @@ body {
   gap: 36px;
 }
 
+.mt-5 {
+  margin-top: 0.8rem;
+}
+
 .w-100 {
   width: 100%;
 }