Teams implemented panel added in Task Description page

Author: ptechofficial

src/app/component/task-description/task-description.component.css

@@ -1,14 +1,17 @@
 .content-box {
-    margin: 20px;
-    width: 95%;
-    /*height: 100%;*/
-    /*background-color: paleturquoise;*/
-  }
+  margin: 20px;
+  width: 95%;
+  /*height: 100%;*/
+  /*background-color: paleturquoise;*/
+}
 
 .mat-form-field + .mat-form-field {
   margin-left: 8px;
 }
 
-.mat-raised-button{
+.mat-raised-button {
   margin-right: 8px;
-}
+}
+.teams-implemented-list {
+  list-style: none;
+}

src/app/component/task-description/task-description.component.html

@@ -179,13 +179,28 @@ <h1>
     <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <b>Implemented</b>
+          <b>Implemented By</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
       <div
-        *ngIf="currentTask.isImplemented; then thenBlock; else elseBlock"></div>
-      <ng-template #thenBlock> Implemented </ng-template>
-      <ng-template #elseBlock> Not Implemented </ng-template>
+        *ngIf="
+          currentTask.teamsImplemented;
+          then thenBlock;
+          else elseBlock
+        "></div>
+      <ng-template #thenBlock>
+        <ul class="teams-implemented-list">
+          <li *ngFor="let item of currentTask.teamsImplemented | keyvalue">
+            <b>{{ item.key }}</b
+            >:{{ item.value }}
+          </li>
+        </ul>
+      </ng-template>
+      <ng-template #elseBlock
+        >teamsImplemented variable not present <br />
+        <p *ngIf="currentTask.isImplemented === false">Not Implemented</p>
+        <p *ngIf="currentTask.isImplemented === true">Implemented</p>
+      </ng-template>
     </mat-expansion-panel>
     <mat-expansion-panel>
       <mat-expansion-panel-header>

src/app/component/task-description/task-description.component.ts

@@ -33,6 +33,7 @@ export interface taskDescription {
   assessment: string;
   comments: string;
   isImplemented: boolean;
+  teamsImplemented: Object;
 }
 
 @Component({
@@ -64,6 +65,7 @@ export class TaskDescriptionComponent implements OnInit {
     evidence: '',
     comments: '',
     isImplemented: false,
+    teamsImplemented: {},
   };
 
   YamlObject: any;
@@ -184,6 +186,7 @@ export class TaskDescriptionComponent implements OnInit {
         data['isImplemented'],
         false
       );
+      this.currentTask.teamsImplemented = data['teamsImplemented'];
       this.openall();
     });
   }
@@ -263,6 +266,7 @@ export class TaskDescriptionComponent implements OnInit {
     this.accordion.forEach(element => {
       element.openAll();
     });
+    console.log(this.currentTask.teamsImplemented);
   }
 
   // Close all function