tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/task/task.component.html

@@ -0,0 +1,322 @@
+<div class="daterange my-4 d-flex justify-content-between W-100">
+    <!-- <span class="mt-3"> Data for the date range - Jan 06 to Jan 13, 2022 across all stores</span> -->
+    <span class="mt-3">Last refreshed at {{reloadDate}}</span>
+    <div class="nav-group nav-group-outline border-1 btn-group p-0">
+        <button class="btn btn-outline"
+        [ngClass]="{
+            'activePlanBtn': type === 'Checklist',
+            'inactivePlanBtn': type !== 'Checklist',
+        }"
+            (click)="selectPlan('Checklist')"
+            [routerLink]="'/manage/trax/dashboard'"
+           >
+           Checklist
+        </button>
+        <button class="btn btn-outline px-6 py-3"
+        [ngClass]="{
+            'activePlanBtn': type === 'Task',
+            'inactivePlanBtn': type !== 'Task',
+        }"
+            (click)="selectPlan('Task')"
+            [routerLink]="'/manage/trax/dashboard/task'">
+           Task
+        </button>
+    </div>
+    </div>
+<div class="col-md-12">
+    <div class="row">
+        <div class="col-12">
+            <div class="card card-border pt-2 h-100">
+                <ng-container>
+                    <div class="card-header ellipse1 border-0 px-3">
+                        <div class="card-title d-flex align-items-start flex-column">
+                            <div class="d-flex">
+                                <div class="cardcount">
+                                    {{ overallCardsData.TotalTasks?.count ? overallCardsData.TotalTasks?.count.toLocaleString('en-US', {
+                                        minimumFractionDigits: 0 }) : '--' }}
+                                </div>
+                                <div class="cardtext mx-3 mt-3">Total Tasks</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="row g-0 h-100px py-5">
+                            <div class="col-12">
+                                <div class="row justify-content-between w-100 pt-3">
+                                    <div class="col-md-2">
+                                        <div class="d-flex flex-column align-items-center">
+                                            <div class="cardsubcount">{{ overallCardsData.open?.count ? overallCardsData.open?.count.toLocaleString('en-US', {
+                                                minimumFractionDigits: 0 }) : '--' }}</div>
+                                            <div class="cardtext ">Open</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-2">
+                                        <div class="d-flex flex-column align-items-center">
+                                            <div class="cardsubcount">{{ overallCardsData.inprogress?.count ? overallCardsData.inprogress?.count.toLocaleString('en-US', {
+                                                minimumFractionDigits: 0 }) : '--' }}</div>
+                                            <div class="cardtext">Inprogress</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-2">
+                                        <div class="d-flex flex-column align-items-center">
+                                            <div class="cardsubcount">{{ overallCardsData.reopen?.count ? overallCardsData.reopen?.count.toLocaleString('en-US', {
+                                                minimumFractionDigits: 0 }) : '--'  }}</div>
+                                            <div class="cardtext ">Re-Open</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-2">
+                                        <div class="d-flex flex-column align-items-center">
+                                            <div class="cardsubcount">{{ overallCardsData.submitted?.count ? overallCardsData.submitted?.count.toLocaleString('en-US', {
+                                                minimumFractionDigits: 0 }) : '--'  }}</div>
+                                            <div class="cardtext">Submitted</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-2">
+                                        <div class="d-flex flex-column align-items-center">
+                                            <div class="cardsubcount">{{ overallCardsData.closed?.count ? overallCardsData.closed?.count.toLocaleString('en-US', {
+                                                minimumFractionDigits: 0 }) : '--'  }}</div>
+                                            <div class="cardtext ">Closed</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </ng-container>
+            </div>
+        </div>
+        <div class="col-lg-12 mt-4">
+            <div class="card">
+            <div class="card-header border-0 pt-3">
+                <h3 class="card-title align-items-start flex-column">
+                    <span class="card-label mb-2">Task Info <span class="badge badge-light-primary">{{totalItems}} Total</span></span>
+                    <span class="text-sub mb-2"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{
+                        headerData?.date?.endDate | date: 'MMM d, y' }}
+                    </span>
+                </h3>
+                <div class="card-toolbar">
+                    <div class="d-flex">
+                        <div class="d-flex align-items-center  position-relative my-1">
+                            <span class="svg-icon footfallsearch svg-icon-1 position-absolute  ms-8">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="none">
+                                    <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
+                                        transform="rotate(45 17.0365 15.1223)" fill="currentColor">
+                                    </rect>
+                                    <path
+                                        d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
+                                        fill="currentColor"></path>
+                                </svg>
+                            </span>
+                            <input [(ngModel)]="searchInput" type="text" class="form-control ps-14 mx-2 footfallsearch"
+                                placeholder="Search" autocomplete="off" (keyup.enter)="searchField()" />
+                                <lib-filters [dataObject]="dataObject" (appliedFilters)="applyFilters($event)"></lib-filters>
+                            <button type="button" (click)="onExport()"
+                                class="btn-outline btn align-items-end text-nowrap invheader mx-2"
+                                >
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                    fill="none">
+                                    <path
+                                        d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5"
+                                        stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                        stroke-linejoin="round"></path>
+                                </svg>
+                                <span class="ms-2"></span> Export
+                            </button>
+                            <a *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isAdd" routerLink="/manage/trax/create-task" type="button"
+                                class="btn btn-primary ms-2 rounded-3 text-nowrap ng-star-inserted" tabindex="0"><svg
+                                    xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                    fill="none">
+                                    <path d="M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334" stroke="white"
+                                        stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </svg><span class="ms-2 text-white">Create Task</span></a>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body p-0">
+                <div class="table-responsive">
+                    <table *ngIf="!taskLoading && !taskNoData" class="table text-nowrap bottom-border">
+                        <thead>
+                            <tr>
+                                <th>Task Name</th>
+                               
+                                <!-- <th>Coverage</th> -->
+                                <th class="cursor-pointer" (click)="sortData('createdByName')">Created by<svg
+                                        [ngClass]="sortColumName === 'createdByName' && sortDirection === 1 ? 'rotate' : ''"
+                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                        fill="none">
+                                        <path
+                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                            [attr.stroke]="sortColumName === 'createdByName' ? '#00A3FF' : '#667085'"
+                                            stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                </th>
+                                <th>Created On</th>
+                                <th>Priority</th>
+                                <th class="cursor-pointer" (click)="sortData('storeCount')">Assigned To<svg
+                                    [ngClass]="sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''"
+                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                    fill="none">
+                                    <path
+                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                        [attr.stroke]="sortColumName === 'storeCount' ? '#00A3FF' : '#667085'"
+                                        stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                            </th>
+                                <th class="cursor-pointer" (click)="sortData('submitCount')">Submitted<svg
+                                        [ngClass]="sortColumName === 'submitCount' && sortDirection === 1 ? 'rotate' : ''"
+                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                        fill="none">
+                                        <path
+                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                            [attr.stroke]="sortColumName === 'submitCount' ? '#00A3FF' : '#667085'"
+                                            stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                </th>
+                                <th class="cursor-pointer" (click)="sortData('redoCount')">Redo<svg
+                                    [ngClass]="sortColumName === 'redoCount' && sortDirection === 1 ? 'rotate' : ''"
+                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                    fill="none">
+                                    <path
+                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                        [attr.stroke]="sortColumName === 'redoCount' ? '#00A3FF' : '#667085'"
+                                        stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                            </th>
+                                <th>Due on</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let task of taskTableData">
+                                <td>
+                                    <span [routerLink]="['/manage/trax/dashboard/taskinfo']"
+                                    [queryParams]="{ taskId: task._id,taskName:task.checkListName }"
+                                        class="table-title-primary cursor-pointer"> {{ task.checkListName || '--' }}</span>
+                                </td>
+                                <td>
+                                    <div class="symbol symbol-35px symbol-circle">
+                                        <span class="symbol-label bg-light-primary text-primary me-2">
+                                            {{ task.checkListChar || '--' }}
+                                        </span>
+                                    </div>
+                                    <span 
+                                        class="table-title">{{ task.createdByName || '--' }}</span>
+                                </td>
+                                <td>
+                                    <div 
+                                        class="table-title">{{ task.publishDate | date:"dd MMM YYYY" }}</div>
+                                </td>
+                                <td>
+                                    <div class="table-title">{{task.priorityType?.charAt(0)?.toUpperCase() + task.priorityType?.slice(1).toLowerCase() || '--'}}</div>
+                                </td>
+                                <!-- <td>
+                                        <div class="table-title">
+                                            Store
+                                        </div>  
+                                </td> -->
+                                <td>
+                                    <div  class="table-title">{{ task.storeCount !==null ? task.storeCount?.toLocaleString('en-US', {
+                                        minimumFractionDigits: 0 }) :
+                                        '--' }}</div>
+                                </td>
+                                <td>
+                                    <div *ngIf="task.submitCount; else noDataSubmitted" [routerLink]="['/manage/trax/dashboard/taskinfo']" [queryParams]="{ type: 'task', taskId: task._id,  status: 'submit', taskName:task.checkListName }" class="table-title-primary cursor-pointer">{{ task.submitCount !==null ? task.submitCount?.toLocaleString('en-US', {
+                                        minimumFractionDigits: 0 }) :
+                                        '--' }}</div>
+                                        <ng-template #noDataSubmitted>
+                                            <div class="table-title">--</div>
+                                          </ng-template>
+                                </td>
+                                <td>
+                                    <div *ngIf="task.redoCount; else noDataRedo" [routerLink]="['/manage/trax/dashboard/taskinfo']" [queryParams]="{ type: 'task', taskId: task._id,  status: 'redo', taskName:task.checkListName }" class="table-title-primary cursor-pointer">{{ task.redoCount !==null ? task.redoCount?.toLocaleString('en-US', {
+                                        minimumFractionDigits: 0 }) :
+                                        '--' }}</div>
+                                        <ng-template #noDataRedo>
+                                            <div class="table-title">--</div>
+                                          </ng-template>
+                                </td>
+                               
+                                <td>
+                                    <div 
+                                        class="table-title">{{ dateFormat(task.scheduleEndTime_iso) }}</div>
+                                </td>
+                                <td>
+                                    <!-- (click)="navigateToTaskConfig(task)" -->
+                                    <div class="d-flex">
+                                    <a *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit"  [routerLink]="['/manage/trax/dashboard/taskinfo']"
+                                    [queryParams]="{ taskId: task._id,taskName:task.checkListName}"  class="cursor-pointer table-title">
+                                        <span>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                <path d="M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                                                <path d="M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                                                </svg>
+                                        </span></a>
+                                        <!-- <a *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit" (click)="navigateToTaskEdit(task)" class="cursor-pointer ms-6 table-title">
+                                        <span>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                <g clip-path="url(#clip0_5271_17556)">
+                                                <path d="M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                                                </g>
+                                                <defs>
+                                                <clipPath id="clip0_5271_17556">
+                                                <rect width="20" height="20" fill="white"/>
+                                                </clipPath>
+                                                </defs>
+                                                </svg>
+                                        </span></a>  
+                                        <a *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit" (click)="taskDelete(task._id)" class="cursor-pointer ms-6 table-title">
+                                            <span>
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                    <path d="M2.5 5.00008H4.16667M4.16667 5.00008H17.5M4.16667 5.00008V16.6667C4.16667 17.1088 4.34226 17.5327 4.65482 17.8453C4.96738 18.1578 5.39131 18.3334 5.83333 18.3334H14.1667C14.6087 18.3334 15.0326 18.1578 15.3452 17.8453C15.6577 17.5327 15.8333 17.1088 15.8333 16.6667V5.00008H4.16667ZM6.66667 5.00008V3.33341C6.66667 2.89139 6.84226 2.46746 7.15482 2.1549C7.46738 1.84234 7.89131 1.66675 8.33333 1.66675H11.6667C12.1087 1.66675 12.5326 1.84234 12.8452 2.1549C13.1577 2.46746 13.3333 2.89139 13.3333 3.33341V5.00008M8.33333 9.16675V14.1667M11.6667 9.16675V14.1667" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                                                    </svg>
+                                            </span></a>   -->
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <ng-container *ngIf="taskLoading">
+                        <div class="row loader  d-flex justify-content-center align-items-center">
+                            <div class="shimmer">
+                                <div class="wrapper">
+                                    <div class="stroke animate title"></div>
+                                    <div class="stroke animate link"></div>
+                                    <div class="stroke animate description"></div>
+                                </div>
+                            </div>
+                            <div class="shimmer">
+                                <div class="wrapper">
+                                    <div class="stroke animate title"></div>
+                                    <div class="stroke animate link"></div>
+                                    <div class="stroke animate description"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </ng-container>
+                    <ng-container *ngIf="taskNoData && !taskLoading">
+                        <div class="row">
+                            <div class="col-lg-12 my-6">
+                                <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                                    <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                                    <div class="nodatamaintext mt-3">No data found</div>
+                                    <div class="nodatasubtext">There is no result for Task Info</div>
+                                </div>
+                            </div>
+                        </div>
+                    </ng-container>
+
+                </div>
+                <div *ngIf="!taskLoading && !taskNoData">
+                    <lib-pagination class="text-start" [itemsPerPage]="itemsPerPage" [currentPage]="currentPage"
+                        [totalItems]="totalItems" [paginationSizes]="paginationSizes" [pageSize]="pageSize"
+                        (pageChange)="onPageChange($event)"
+                        (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>

package/src/lib/components/task/task.component.scss

@@ -0,0 +1,169 @@
+.ellipse1 {
+    border-radius: 6px;
+    border-bottom: 2px solid var(--Gray-200, #EAECF0);
+    background: radial-gradient(206.89% 107.47% at 16.16% 32.77%, rgba(255, 255, 255, 0.40) 0%, rgba(69, 187, 254, 0.20) 100%), #F2F4F7;
+
+    /* Shadow/Soft Shadow */
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.card-border {
+    padding: 8px;
+    border-radius: 12px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White, #FFF);
+}
+
+.cardcount {
+    color: var(--Black, #101828);
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 38px; /* 126.667% */
+}
+
+.cardtext {
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+.cardsubcount{
+    color: var(--Black, #101828);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 30px; /* 150% */
+}
+.card-border {
+    padding: 8px;
+    border-radius: 12px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White, #FFF);
+  }
+  .table-title{
+    color: var(--Gray-500, #667085);
+font-size: 14px;
+font-style: normal;
+font-weight: 500;
+line-height: 20px; /* 142.857% */
+}
+.table-title-primary{
+    color: var(--Primary-700, #009BF3) !important;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px; /* 142.857% */
+    text-decoration-line: underline;
+}
+.card .card-header{
+    padding: 0px 1.50rem;
+}
+.nav-group-outline {
+    border-radius: 8px;
+    border: 1px solid var(--Primary-300, #6BCAFF);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+.nav-group .btn.activePlanBtn {
+    border-right: 1px solid var(--Primary-300, #6BCAFF);
+    background: var(--Primary-600, #00A3FF);
+    color: white;
+}
+.nav-group .btn.inactivePlanBtn {
+    background-color: white;
+    color: #333;
+    border: 1px solid #dcdcdc;
+}
+.daterange {
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    /* 150% */
+}
+.nodatamaintext {
+    font-family: 'Inter';
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    text-align: center;
+    color: #101828;
+}
+
+.nodatasubtext {
+    font-family: 'Inter';
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #667085;
+}
+
+.rotate {
+    transform: rotate(180deg);
+}
+
+.loader {
+    .title {
+        width: 65%;
+    }
+
+    .link {
+        width: 85%;
+    }
+
+    .description {
+        width: 95%;
+    }
+
+    .shimmer {
+        padding: 15px;
+        width: 95%;
+        height: 120px;
+        margin: 10px auto;
+        background: #ffffff;
+    }
+
+    .shimmer .image-card {
+        height: 90px;
+        width: 90px;
+        float: right;
+        border-radius: 8px;
+    }
+
+    .stroke {
+        height: 15px;
+        background: #777;
+        margin-top: 20px;
+    }
+
+    .wrapper {
+        width: 0px;
+        animation: fullView 0.5s forwards linear;
+    }
+
+    @keyframes fullView {
+        100% {
+            width: 100%;
+        }
+    }
+
+    .animate {
+        animation: shimmer 3s;
+        animation-iteration-count: infinite;
+        background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
+        background-size: 1000px 100%;
+    }
+
+    @keyframes shimmer {
+        from {
+            background-position: -1000px 0;
+        }
+
+        to {
+            background-position: 1000px 0;
+        }
+    }
+}

package/src/lib/components/task/task.component.spec.ts

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