Assigned tasks will show a timeline for completion

css/main.css

@@ -958,19 +958,6 @@ ul {
   border-radius: 0.5rem;
 }
 
-#sign_in_page {
-  display: grid;
-  position: fixed;
-  z-index: 5;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  place-content: center;
-  background-color: rgba(var(--foreground-color), 1);
-  gap: 1rem;
-}
-
 .display-task {
   display: flex;
   flex-direction: column;
@@ -1396,7 +1383,6 @@ ul {
 }
 
 .intern_profile__task {
-  display: grid;
   align-items: center;
   width: 100%;
   gap: 0.3rem;
@@ -1404,10 +1390,6 @@ ul {
   padding: 1rem;
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
-  grid-template-columns: minmax(0, 1fr) auto;
-}
-.intern_profile__task h4 {
-  grid-column: 1/-1;
 }
 .intern_profile__task p {
   font-weight: 500;
@@ -1416,6 +1398,18 @@ ul {
   font-size: 0.9rem;
   color: rgba(var(--text-color), 0.8);
 }
+.intern_profile__task--assigned {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.intern_profile__task--completed {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+.intern_profile__task--completed h4 {
+  grid-column: 1/-1;
+}
 
 #commit_changes_button[data-badge]::after {
   content: attr(data-badge);
@@ -1838,6 +1832,36 @@ ul {
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
 }
+.task-card .task__completion-timeline {
+  gap: 1rem;
+  background-color: rgba(var(--text-color), 0.04);
+  padding: 0.5rem 1rem;
+  margin: 0 -1rem 0.5rem -1rem;
+  border: solid thin rgba(var(--text-color), 0.1);
+}
+.task-card .task__completion-timeline__progress {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 0.2rem;
+  background-color: rgba(var(--text-color), 0.2);
+  border-radius: 0.5rem;
+}
+.task-card .task__completion-timeline__progress__bar {
+  height: 0.2rem;
+  background-color: var(--accent-color);
+  border-radius: inherit;
+  width: var(--progress);
+}
+.task-card .task__completion-timeline__progress__disc {
+  display: flex;
+  height: 0.8rem;
+  aspect-ratio: 1/1;
+  background-color: var(--accent-color);
+  border-radius: 0.5rem;
+  z-index: 1;
+  margin-left: -0.4rem;
+}
 
 .task__project-title {
   font-size: 0.8rem;

css/main.scss

@@ -930,19 +930,6 @@ ul {
   border-radius: 0.5rem;
 }
 
-#sign_in_page {
-  display: grid;
-  position: fixed;
-  z-index: 5;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  place-content: center;
-  background-color: rgba(var(--foreground-color), 1);
-  gap: 1rem;
-}
-
 .display-task {
   display: flex;
   flex-direction: column;
@@ -1364,7 +1351,6 @@ ul {
   }
 }
 .intern_profile__task {
-  display: grid;
   align-items: center;
   width: 100%;
   gap: 0.3rem;
@@ -1372,10 +1358,6 @@ ul {
   padding: 1rem;
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
-  grid-template-columns: minmax(0, 1fr) auto;
-  h4 {
-    grid-column: 1/-1;
-  }
   p {
     font-weight: 500;
   }
@@ -1383,6 +1365,18 @@ ul {
     font-size: 0.9rem;
     color: rgba(var(--text-color), 0.8);
   }
+  &--assigned {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  &--completed {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    h4 {
+      grid-column: 1/-1;
+    }
+  }
 }
 #commit_changes_button {
   &[data-badge] {
@@ -1777,6 +1771,36 @@ ul {
   padding: 1rem;
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
+  .task__completion-timeline {
+    gap: 1rem;
+    background-color: rgba(var(--text-color), 0.04);
+    padding: 0.5rem 1rem;
+    margin: 0 -1rem 0.5rem -1rem;
+    border: solid thin rgba(var(--text-color), 0.1);
+    &__progress {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 0.2rem;
+      background-color: rgba(var(--text-color), 0.2);
+      border-radius: 0.5rem;
+      &__bar {
+        height: 0.2rem;
+        background-color: var(--accent-color);
+        border-radius: inherit;
+        width: var(--progress);
+      }
+      &__disc {
+        display: flex;
+        height: 0.8rem;
+        aspect-ratio: 1/1;
+        background-color: var(--accent-color);
+        border-radius: 0.5rem;
+        z-index: 1;
+        margin-left: -0.4rem;
+      }
+    }
+  }
 }
 .task {
   &__project-title {

index.html

@@ -1054,7 +1054,10 @@
             const newObj = [];
             for (var key in obj) {
                 if (obj.hasOwnProperty(key)) {
-                    newObj.push(callback(key, obj[key]))
+                    const value = callback(obj[key], key)
+                    if (value) {
+                        newObj.push(value)
+                    }
                 }
             }
             return newObj
@@ -1780,8 +1783,8 @@
             },
             displayTasks(category = 'all', searchQuery) {
                 // render tasks
-                if (!RIBC) return html``;
                 const allTasks = RIBC.getAllTasks();
+                if (!allTasks) return;
                 const displayedTasks = RIBC.getDisplayedTasks()
                 const filterCategory = category === 'all' ? false : category;
                 const filtered = []
@@ -2019,7 +2022,7 @@
                     const { assignedOn } = assignedTasks[task];
                     const { title } = RIBC.getAllTasks()[task];
                     assignedTasksList.push(html`
-                        <div class="intern_profile__task">
+                        <div class="intern_profile__task intern_profile__task--assigned">
                             <h4>${title}</h4>
                             <time>${getFormattedTime(assignedOn || assignedTasks[task], 'date-only')}</time>
                         </div>`)
@@ -2033,7 +2036,7 @@
                     const { points, completionDate } = completedTasks[task];
                     const { title } = RIBC.getAllTasks()[task];
                     return html`
-                        <div class="intern_profile__task">
+                        <div class="intern_profile__task intern_profile__task--completed">
                             <h4>${title}</h4>
                             <time>${getFormattedTime(completionDate, 'date-only')}</time>
                             <p class="flex align-center gap-0-3">
@@ -2067,10 +2070,9 @@
                         },
                         innerHTML: DOMPurify.sanitize(description)
                     })
-                    const categories = [];
+                    const categories = objMap(floGlobals.taskCategories, (categoryName, categoryID) => {
-                    for (const categoryID in floGlobals.taskCategories) {
+                        return html`<sm-option value=${categoryID} ?selected=${category === categoryID}>${categoryName}</sm-option>`
-                        categories.push(html`<sm-option value=${categoryID} ?selected=${categoryID === category}>${floGlobals.taskCategories[categoryID]}</sm-option>`)
+                    })
-                    }
                     return html`
                     <li class=${`admin-task ${status}`} .dataset=${{ taskId: task }}>
                         <div class="flex align-center gap-0-3">
@@ -2088,7 +2090,7 @@
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /> </svg>
                             </button>
                         </div>
-                        <h4 class="task-title" data-editable  data-edit-field="title">${title}</h4>
+                        <h4 class="task-title" data-editable data-edit-field="title">${title}</h4>
                         <div class="assigned-interns">
                             <button class="button button--small button--colored" onclick="currentTask=this.closest('.admin-task');openPopup('intern_list_popup')">
                                 <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z"/></g></svg>
@@ -2161,7 +2163,6 @@
                 }
             },
             taskRequestCard(request) {
-                console.log(request);
                 const { details: { taskId, name, brief, contact, portfolioLink }, floID, vectorClock } = request
                 const internName = RIBC.getInternList()[floID];
                 const [projectCode, branch, task] = taskId.split('_');
@@ -2213,19 +2214,42 @@
             },
             internTaskCard(uniqueId) {
                 const [projectCode, branch, task] = uniqueId.split('_');
-                const { title, description } = RIBC.getTaskDetails(projectCode, branch, task)
+                const { title, description, duration, durationType } = RIBC.getTaskDetails(projectCode, branch, task)
                 const projectName = RIBC.getProjectDetails(projectCode).projectName
+                const { assignedTasks } = RIBC.getInternRecord(floDapps.user.id)
                 const linkifyDescription = createElement('p', {
                     innerHTML: DOMPurify.sanitize(linkify(description)),
                     className: `timeline-task__description ws-pre-line wrap-around`
                 })
+                // add days to milliseconds
+                const durationMilliseconds = durationType === 'days' ? duration * 24 * 60 * 60 * 1000 : duration * 60 * 60 * 1000
+                const taskDeadline = assignedTasks[uniqueId].assignedOn + durationMilliseconds
+                const completionPercentage = Math.round((Date.now() - assignedTasks[uniqueId].assignedOn) / durationMilliseconds * 100)
                 return html`
                     <li class="task-card" data-unique-id="${uniqueId}">
                         <span class="task__project-title">${projectName}</span>
-                        <div>
+                        <h4 class="task__title">${title}</h4>
-                            <h4 class="task__title">${title}</h4>
+                        <div class="task__completion-timeline flex align-center">
-                            ${linkifyDescription}
+                            <div class="flex flex-direction-column gap-0-3">
+                                <div class="flex align-center gap-0-3">
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.36 6l.4 2H18v6h-3.36l-.4-2H7V6h5.36M14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6L14 4z"/></svg>
+                                    <span style="font-size: 0.8rem; white-space: nowrap">Assigned</span>
+                                </div>
+                                <time style="font-size: 0.9rem;font-weight: 500; white-space: nowrap">${getFormattedTime(assignedTasks[uniqueId].assignedOn, 'date-only')}</time>
+                            </div>    
+                            <div class="task__completion-timeline__progress" role="progressbar">
+                                <div class="task__completion-timeline__progress__bar" style=${`--progress: ${completionPercentage}%`}></div>    
+                                <div class="task__completion-timeline__progress__disc"></div>    
+                            </div>
+                            <div class="flex flex-direction-column gap-0-3">
+                                <div class="flex align-center gap-0-3">
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M11,6H9V4h2V6z M15,4h-2v2h2V4z M9,14h2v-2H9V14z M19,10V8h-2v2H19z M19,14v-2h-2v2H19z M13,14h2v-2h-2V14z M19,4h-2v2h2 V4z M13,8V6h-2v2H13z M7,10V8h2V6H7V4H5v16h2v-8h2v-2H7z M15,12h2v-2h-2V12z M11,10v2h2v-2H11z M9,8v2h2V8H9z M13,10h2V8h-2V10z M15,6v2h2V6H15z"/></g></g></svg>
+                                    <span style="font-size: 0.8rem;">Deadline</span>
+                                </div>
+                                <time style="font-size: 0.9rem;font-weight: 500; white-space: nowrap">${getFormattedTime(taskDeadline, 'date-only')}</time>
+                            </div>    
                         </div>
+                        ${linkifyDescription}
                         <button class="send-update-button button--small button--colored margin-left-auto" onclick=${initTaskUpdate}>
                             <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>    
                             Post an update