86 lines
5.4 KiB
HTML
86 lines
5.4 KiB
HTML
internTaskCard(taskId) {
|
|
const [projectCode, branch, task] = taskId.split('_');
|
|
const { title, description, duration, durationType } = RIBC.getTaskDetails(taskId);
|
|
const projectName = RIBC.getProjectDetails(projectCode).projectName;
|
|
|
|
// per-intern state
|
|
const { assignedTasks, completedTasks, failedTasks } = RIBC.getInternRecord(floGlobals.myFloID);
|
|
const isCompleted = !!completedTasks?.[taskId];
|
|
const isFailed = !!failedTasks?.[taskId];
|
|
const showUpdateButton = !isCompleted && !isFailed;
|
|
|
|
const linkifyDescription = createElement('p', {
|
|
innerHTML: DOMPurify.sanitize(linkify(description)),
|
|
className: `timeline-task__description ws-pre-line wrap-around`
|
|
});
|
|
|
|
// existing deadline/progress logic (used only for active/overdue)
|
|
const { hasDeadlinePassed, taskDeadline, elapsedPercentage } = getTaskDeadline(taskId);
|
|
|
|
// status/timeline block
|
|
const timelineBlock = isCompleted
|
|
? html`
|
|
<div class="task__completion-timeline flex align-center">
|
|
<span class="assigned-intern assigned-intern--completed">
|
|
<span class="task-status task-status--completed">Completed</span>
|
|
</span>
|
|
</div>
|
|
`
|
|
: (isFailed
|
|
? html`
|
|
<div class="task__completion-timeline flex align-center">
|
|
<span class="assigned-intern assigned-intern--failed">
|
|
<span class="task-status task-status--failed">Failed</span>
|
|
</span>
|
|
</div>
|
|
`
|
|
: html`
|
|
<div class=${`task__completion-timeline flex align-center ${hasDeadlinePassed ? 'deadline-passed' : ''}`}>
|
|
${hasDeadlinePassed ? html`
|
|
<h3>Overdue</h3>
|
|
` : html`
|
|
<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?.[taskId]?.assignedOn, 'date-only')}
|
|
</time>
|
|
</div>
|
|
<div class="task__completion-timeline__progress" role="progressbar">
|
|
<div class="task__completion-timeline__progress__bar" style=${`--progress: ${elapsedPercentage}%`}></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;">Due</span>
|
|
</div>
|
|
<time style="font-size: 0.9rem;font-weight: 500; white-space: nowrap">
|
|
${getFormattedTime(taskDeadline, 'date-only')}
|
|
</time>
|
|
</div>
|
|
`}
|
|
</div>
|
|
`);
|
|
|
|
return html`
|
|
<li class="task-card" data-unique-id="${taskId}">
|
|
<span class="task__project-title">${projectName}</span>
|
|
<h4 class="task__title">${title}</h4>
|
|
${timelineBlock}
|
|
${linkifyDescription}
|
|
${showUpdateButton ? html`
|
|
<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
|
|
</button>
|
|
` : ''}
|
|
</li>
|
|
`;
|
|
},
|