Assigned tasks will show a timeline for completion
This commit is contained in:
sairaj mote
parent
b609c25f41
commit
957284bb43
File diff suppressed because one or more lines are too long
60
css/main.css
60
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;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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 {
|
||||
|
||||
52
index.html
52
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 = [];
|
||||
for (const categoryID in floGlobals.taskCategories) {
|
||||
categories.push(html`<sm-option value=${categoryID} ?selected=${categoryID === category}>${floGlobals.taskCategories[categoryID]}</sm-option>`)
|
||||
}
|
||||
const categories = objMap(floGlobals.taskCategories, (categoryName, categoryID) => {
|
||||
return html`<sm-option value=${categoryID} ?selected=${category === categoryID}>${categoryName}</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>
|
||||
${linkifyDescription}
|
||||
<h4 class="task__title">${title}</h4>
|
||||
<div class="task__completion-timeline flex align-center">
|
||||
<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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user