Merge pull request #420 from Aryex82/develop

Change UI of tasks card
Real-Dev-Squad · Jul 6, 2023 · b59a113 · b59a113
2 parents 470ba99 + 7aa0f2b
commit b59a113
Show file tree

Hide file tree

Showing 8 changed files with 474 additions and 164 deletions.
diff --git a/app/components/task-details.hbs b/app/components/task-details.hbs
@@ -1,12 +1,47 @@
-<div class="task-details">
-  <p class="task-details__title"><b>Title: </b>{{@task.title}}</p>
-  <p class="task-details__purpose"><b>Purpose: </b>{{@task.purpose}}</p>
-  <div class="dates-info">
-    <div class="dates-info__end">
-      <p><b>Deadline: </b>{{convertDate @task.endsOn end_date=1}}</p>
+<div class='task-details'>
+  <div class='task-details__title-container'>
+    <p class='task-details__title'>{{@task.title}}</p>
+    <div class='task-card__progress-bar-container'>
+      <div class='task-card__progress-bar-container__progress-bar'>
+        <Input
+          data-test-task-progress-bar
+          class='progress-bar__input {{@progressBarClass}}'
+          id='input'
+          type='range'
+          name='percentCompleted'
+          value={{@percentCompleted}}
+          min='0'
+          max='100'
+          step='10'
+          {{on 'change' @onPercentageChange}}
+          {{on 'change' (fn @onTaskUpdate @task.id)}}
+          disabled={{@isProgressBarDisabled}}
+        />
+        {{@percentCompleted}}%
+      </div>
     </div>
-    <div class="dates-info__start">
-      <p><b>Started: </b> {{convertDate @task.startedOn end_date=0}}</p>
+  </div>
+  <div class='task-details__status-purpose-container'>
+    <div class='status-details'>
+      <div>
+        <span class='status-details__dates-info__end'>{{if
+            (eq @task.status 'VERIFIED')
+            'Completed'
+            'Estimated completion'
+          }}</span>
+        <span class='status-details__dates-info__end-date'>{{convertDate
+            @task.endsOn
+            end_date=1
+          }}</span>
+      </div>
+      <div class='status-details__dates-info__start'>
+        <span class='status-details__dates-info__start'>Started
+          {{convertDate @task.startedOn end_date=0}}</span>
+      </div>
     </div>
+    {{#if @task.purpose}}
+      <p class='task-details__purpose'><b>Purpose: </b><span
+        >{{@task.purpose}}</span></p>
+    {{/if}}
   </div>
 </div>
diff --git a/app/components/task/holder.hbs b/app/components/task/holder.hbs
@@ -1,30 +1,15 @@
-<div class='task-card' tabindex='0'>
-  <Task-Details @task={{@task}} />
-  {{#if (eq @task.status this.TASK_KEYS.IN_PROGRESS)}}
-    <div class='task-card__progress-bar-container'>
-      <div class='task-card__progress-bar-container__progress-bar'>
-        <input
-          id='input'
-          type='range'
-          name='percentCompleted'
-          disabled={{@disabled}}
-          value={{this.percentCompleted}}
-          min='0'
-          max='100'
-          step='25'
-          {{on 'change' this.onPercentageChange}}
-          {{on 'change' (fn @onTaskUpdate @task.id)}}
-        />
-      </div>
-    </div>
-  {{/if}}
-  <div>
-    {{#if (eq @userSelectedTask.key this.TASK_KEYS.ALL)}}
-      <div class='task-card__current-task-status'>
-        <strong>Current task status:</strong>
-        {{@task.status}}
-      </div>
-    {{/if}}
+<div data-test-task-card class='task-card {{this.taskStyleClass}}' tabindex='0'>
+  <Task-Details
+    @task={{@task}}
+    @disabled={{@disabled}}
+    @onTaskUpdate={{@onTaskUpdate}}
+    @onPercentageChange={{this.onPercentageChange}}
+    @percentCompleted={{this.percentCompleted}}
+    @progressBarClass={{this.progressBarClass}}
+    @isProgressBarDisabled={{this.isProgressBarDisabled}}
+  />
+
+  <div class='task-card__status-update-container'>
 
     {{#if this.extensionFormOpened}}
       <Task::ExtensionForm
@@ -36,24 +21,35 @@
     {{/if}}
 
     {{#if (not-eq @task.status this.TASK_KEYS.VERIFIED)}}
-      <label for='task-update'>Change task status:</label>
-      <select
-        id='task-update'
-        {{on 'change' this.onStatusChange}}
-        {{on 'change' (fn @onTaskUpdate @task.id)}}
-      >
-        {{#each this.availabletaskStatusList as |taskStatus|}}
-          {{#if (not-eq taskStatus.key this.TASK_KEYS.ALL)}}
-            <option value={{taskStatus.key}}>
-              {{taskStatus.displayLabel}}
-            </option>
-          {{/if}}
-        {{/each}}
-      </select>
+      <div class='task-update-container'>
+        <label id='task-update-label' for='task-update'><b>Status:</b></label>
+        <select
+          id='task-update'
+          {{on 'change' this.onStatusChange}}
+          {{on 'change' (fn @onTaskUpdate @task.id)}}
+        >
+          {{#each this.availabletaskStatusList as |taskStatus|}}
+            {{#if (not-eq taskStatus.key this.TASK_KEYS.ALL)}}
+              {{#if (eq taskStatus.key @task.status)}}
+                <option value={{taskStatus.key}} selected>
+                  {{taskStatus.displayLabel}}
+                </option>
+              {{else}}
+                <option value={{taskStatus.key}}>
+                  {{taskStatus.displayLabel}}
+                </option>
+              {{/if}}
+            {{/if}}
+          {{/each}}
+        </select>
+      </div>
     {{/if}}
 
     <button
-      class='task-card__extensionForm-button' data-test-task-extensionForm-button type="button" {{on 'click' this.toggleExtensionForm}}
+      class='task-card__extensionForm-button'
+      data-test-task-extensionForm-button
+      type='button'
+      {{on 'click' this.toggleExtensionForm}}
     >Extension Status</button>
 
     {{#if @isLoading}}

diff --git a/app/components/task/holder.js b/app/components/task/holder.js
@@ -10,6 +10,64 @@ export default class TasksHolderComponent extends Component {
 
   TASK_KEYS = TASK_KEYS;
   availabletaskStatusList = TASK_STATUS_LIST;
+
+  get taskStyleClass() {
+    const statusNotOverDueList = [
+      TASK_KEYS.COMPLETED,
+      TASK_KEYS.VERIFIED,
+      TASK_KEYS.AVAILABLE,
+    ];
+    if (
+      this.args.task.endsOn * 1000 < Date.now() &&
+      !statusNotOverDueList.includes(this.args.task.status)
+    ) {
+      return 'task-late';
+    } else return '';
+  }
+
+  get progressBarClass() {
+    const startDate = this.args.task.startedOn * 1000;
+    const endDate = this.args.task.endsOn * 1000;
+    if (!startDate || !endDate) {
+      return 'progress-bar-yellow';
+    }
+    // It provides us with total days that are there for the the project and number of days left
+    const totalDays = endDate - startDate;
+
+    const daysLeft = endDate - Date.now();
+
+    let percentageOfDaysLeft = 0;
+    if (daysLeft > 0) {
+      percentageOfDaysLeft = (daysLeft / totalDays) * 100;
+    }
+
+    const percentIncomplete = 100 - this.percentCompleted;
+
+    if (
+      this.percentCompleted === 100 ||
+      percentageOfDaysLeft >= percentIncomplete
+    ) {
+      return 'progress-bar-green';
+    }
+
+    if (
+      (percentageOfDaysLeft < 25 && percentIncomplete > 35) ||
+      (percentageOfDaysLeft <= 0 && percentIncomplete > 0)
+    ) {
+      return 'progress-bar-red';
+    }
+
+    if (percentageOfDaysLeft < 50 && percentIncomplete > 75) {
+      return 'progress-bar-orange';
+    }
+
+    return 'progress-bar-yellow';
+  }
+
+  get isProgressBarDisabled() {
+    return this.args.task.status !== TASK_KEYS.IN_PROGRESS;
+  }
+
   @action
   onPercentageChange(e) {
     const { value } = e.target;

diff --git a/app/controllers/tasks.js b/app/controllers/tasks.js
@@ -11,7 +11,6 @@ import {
 import { TASK_MESSAGES, TASK_PERCENTAGE } from '../constants/tasks';
 import { inject as service } from '@ember/service';
 import { toastNotificationTimeoutOptions } from '../constants/toast-notification';
-
 const API_BASE_URL = ENV.BASE_API_URL;
 
 export default class TasksController extends Controller {
@@ -147,6 +146,7 @@ export default class TasksController extends Controller {
     const taskData = this.taskFields;
     this.isLoading = true;
     const cleanBody = this.constructReqBody(taskData);
+
     if (taskData.status || taskData.percentCompleted) {
       try {
         const response = await fetch(

diff --git a/app/helpers/convertDate.js b/app/helpers/convertDate.js
@@ -43,11 +43,12 @@ const timeDifference = (timestamp, timeNow) => {
 };
 
 function convertDate([timestamp], { end_date, timeNow = Date.now() }) {
+  if (!timestamp) return 'TBD';
   if (end_date == 1 && timestamp * 1000 < timeNow) {
     const time_value = timeDifference(timestamp, timeNow);
-    return `Overdue by ${time_value.result} ${time_value.cycle}${
+    return `${time_value.result} ${time_value.cycle}${
       time_value.result > 1 ? 's' : ''
-    }`;
+    } ago`;
   }
   const time_value = timeDifference(timestamp, timeNow);
   if (timestamp * 1000 < timeNow)