RanchiMall/ribc
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring intern update filter logic

Browse Source
This commit is contained in:
sairaj mote 2021-07-31 16:07:32 +05:30
parent dcd48da076
commit ec506592b5
5 changed files with 162 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.js
View File

@ -231,7 +231,6 @@ smCheckbox.innerHTML = `
</style> </style>
<label class="checkbox"> <label class="checkbox">
<svg class="icon" viewBox="0 0 64 64"> <svg class="icon" viewBox="0 0 64 64">
<title>checkbox</title>
<path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" /> <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
</svg> </svg>
<slot></slot> <slot></slot>

70
css/main.css
View File

@ -23,8 +23,8 @@ body,
body * { body * {
--accent-color: #5D54A4; --accent-color: #5D54A4;
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--background-color: 246, 246, 246; --background-color: 240, 240, 255;
--foreground-color: white; --foreground-color: rgb(248, 248, 255);
--danger-color: red; --danger-color: red;
scrollbar-width: thin; scrollbar-width: thin;
} }
@ -974,14 +974,14 @@ ul {
#admin_page { #admin_page {
position: relative; position: relative;
display: grid; display: grid;
padding: 0;
gap: 0; gap: 0;
padding: 0;
height: 100%; height: 100%;
} }
#project_editing_panel { #project_editing_panel {
position: relative; position: relative;
padding: 1rem; padding: 1rem 0;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
@ -999,6 +999,7 @@ ul {
margin: 1rem; margin: 1rem;
justify-items: end; justify-items: end;
text-align: end; text-align: end;
z-index: 5;
} }
.fab-actions[open] .fab-actions__item { .fab-actions[open] .fab-actions__item {
transform: translateY(0); transform: translateY(0);
@ -1010,6 +1011,10 @@ ul {
.fab-actions[open] .fab .icon:nth-of-type(2) { .fab-actions[open] .fab .icon:nth-of-type(2) {
transform: scale(1) rotate(0); transform: scale(1) rotate(0);
} }
.fab-actions[open] ~ #fab_backdrop {
opacity: 1;
clip-path: circle(100%);
}
.fab-actions__item { .fab-actions__item {
display: flex; display: flex;
@ -1071,6 +1076,19 @@ ul {
transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg);
} }
#fab_backdrop {
position: fixed;
z-index: 3;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
clip-path: circle(0% at 100% 100%);
transition: clip-path 0.5s, opacity 0.5s;
background-color: rgba(0, 0, 0, 0.5);
}
#update_of_project { #update_of_project {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
@ -1185,11 +1203,26 @@ ul {
width: 1.2rem; width: 1.2rem;
} }
#user_role {
justify-self: start;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.4rem 0.8rem;
border-radius: 0.3rem;
border: solid var(--accent-color) thin;
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.hide-on-mobile, .hide-on-mobile,
.hide-page-on-mobile { .hide-page-on-mobile {
display: none; display: none;
} }
#project_editing_panel {
padding: 1rem;
}
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.hide-on-desktop { .hide-on-desktop {
@ -1235,10 +1268,6 @@ ul {
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.1);
} }
#settings_page {
padding: 1rem 2rem;
}
#sign_in { #sign_in {
width: 24rem; width: 24rem;
height: auto; height: auto;
@ -1246,7 +1275,7 @@ ul {
} }
#dashboard_page { #dashboard_page {
grid-template-columns: 3fr 24rem; grid-template-columns: 3fr 20rem;
} }
#dashboard_page #status_map_container { #dashboard_page #status_map_container {
@ -1254,7 +1283,7 @@ ul {
} }
#admin_page { #admin_page {
padding: 1rem; padding: 1rem 0 1rem 1rem;
gap: 1rem; gap: 1rem;
grid-template-columns: 18rem minmax(0, 1fr); grid-template-columns: 18rem minmax(0, 1fr);
grid-template-rows: 1fr; grid-template-rows: 1fr;
@ -1267,7 +1296,6 @@ ul {
#admin_page__left, #admin_page__left,
#project_editing_panel { #project_editing_panel {
border-radius: 0.5rem; border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
} }
#edit_data_fig { #edit_data_fig {
@ -1335,23 +1363,39 @@ ul {
} }
#all_interns_list { #all_interns_list {
gap: 1.5rem; gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
} }
#all_interns_list .intern-card { #all_interns_list .intern-card {
gap: 1rem 0.5rem; gap: 1.5rem 0.5rem;
padding: 1.5rem; padding: 1.5rem;
grid-template-columns: 1fr; grid-template-columns: 1fr;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: var(--foreground-color);
} }
#all_interns_list .intern-card__initials { #all_interns_list .intern-card__initials {
position: relative;
grid-column: 1/3; grid-column: 1/3;
z-index: 1;
}
#all_interns_list .intern-card__initials::after {
content: "";
position: absolute;
background-color: inherit;
border-radius: inherit;
height: calc(100% + 1rem);
width: calc(100% + 1rem);
opacity: 0.3;
z-index: -1;
} }
#intern_list_popup { #intern_list_popup {
--height: 80vh; --height: 80vh;
} }
#settings_page {
padding: 1rem 2rem;
}
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
#main_page { #main_page {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

66
css/main.scss
View File

@ -21,8 +21,8 @@ body {
* { * {
--accent-color: #5D54A4; --accent-color: #5D54A4;
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--background-color: 246, 246, 246; --background-color: 240, 240, 255;
--foreground-color: white; --foreground-color: rgb(248, 248, 255);
--danger-color: red; --danger-color: red;
scrollbar-width: thin; scrollbar-width: thin;
} }
@ -999,14 +999,14 @@ ul {
#admin_page { #admin_page {
position: relative; position: relative;
display: grid; display: grid;
padding: 0;
gap: 0; gap: 0;
padding: 0;
height: 100%; height: 100%;
} }
#project_editing_panel { #project_editing_panel {
position: relative; position: relative;
padding: 1rem; padding: 1rem 0;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
@ -1023,6 +1023,7 @@ ul {
margin: 1rem; margin: 1rem;
justify-items: end; justify-items: end;
text-align: end; text-align: end;
z-index: 5;
&[open]{ &[open]{
.fab-actions__item{ .fab-actions__item{
transform: translateY(0); transform: translateY(0);
@ -1038,6 +1039,10 @@ ul {
} }
} }
} }
& ~ #fab_backdrop{
opacity: 1;
clip-path: circle(100%);
}
} }
} }
.fab-actions__item{ .fab-actions__item{
@ -1099,6 +1104,18 @@ ul {
} }
} }
} }
#fab_backdrop{
position: fixed;
z-index: 3;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
clip-path: circle(0% at 100% 100%);
transition: clip-path 0.5s, opacity 0.5s;
background-color: rgba(0, 0, 0, 0.5);
}
#update_of_project { #update_of_project {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
@ -1214,12 +1231,25 @@ ul {
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;
} }
#user_role{
justify-self: start;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.4rem 0.8rem;
border-radius: 0.3rem;
border: solid var(--accent-color) thin;
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.hide-on-mobile, .hide-on-mobile,
.hide-page-on-mobile { .hide-page-on-mobile {
display: none; display: none;
} }
#project_editing_panel{
padding: 1rem;
}
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.hide-on-desktop { .hide-on-desktop {
@ -1270,10 +1300,6 @@ ul {
} }
} }
#settings_page {
padding: 1rem 2rem;
}
#sign_in { #sign_in {
width: 24rem; width: 24rem;
height: auto; height: auto;
@ -1281,7 +1307,7 @@ ul {
} }
#dashboard_page { #dashboard_page {
grid-template-columns: 3fr 24rem; grid-template-columns: 3fr 20rem;
} }
#dashboard_page #status_map_container { #dashboard_page #status_map_container {
@ -1289,7 +1315,7 @@ ul {
} }
#admin_page { #admin_page {
padding: 1rem; padding: 1rem 0 1rem 1rem;
gap: 1rem; gap: 1rem;
grid-template-columns: 18rem minmax(0, 1fr); grid-template-columns: 18rem minmax(0, 1fr);
grid-template-rows: 1fr; grid-template-rows: 1fr;
@ -1300,7 +1326,6 @@ ul {
#admin_page__left, #admin_page__left,
#project_editing_panel{ #project_editing_panel{
border-radius: 0.5rem; border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
} }
#edit_data_fig { #edit_data_fig {
@ -1362,22 +1387,37 @@ ul {
grid-area: updates; grid-area: updates;
} }
#all_interns_list{ #all_interns_list{
gap: 1.5rem; gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(14rem ,1fr)); grid-template-columns: repeat(auto-fill, minmax(14rem ,1fr));
.intern-card{ .intern-card{
gap: 1rem 0.5rem; gap: 1.5rem 0.5rem;
padding: 1.5rem; padding: 1.5rem;
grid-template-columns: 1fr; grid-template-columns: 1fr;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: var(--foreground-color);
&__initials{ &__initials{
position: relative;
grid-column: 1/3; grid-column: 1/3;
z-index: 1;
}
&__initials::after{
content: '';
position: absolute;
background-color: inherit;
border-radius: inherit;
height: calc(100% + 1rem);
width: calc(100% + 1rem);
opacity: 0.3;
z-index: -1;
} }
} }
} }
#intern_list_popup { #intern_list_popup {
--height: 80vh; --height: 80vh;
} }
#settings_page {
padding: 1rem 2rem;
}
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {

103
new.html
View File

@ -40,6 +40,7 @@
generalVC: {} generalVC: {}
} }
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@2.3.0/dist/purify.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script> <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
</head> </head>
@ -152,7 +153,8 @@
</svg> </svg>
</button> </button>
</div> </div>
<div id="status_map"></div> <div id="status_map" class="observe-empty-state"></div>
<h4 class="empty-state">No project added to watch list.</h4>
</div> </div>
<section id="intern_view" class="hide-completely intern-option"> <section id="intern_view" class="hide-completely intern-option">
<h2>My tasks</h2> <h2>My tasks</h2>
@ -190,6 +192,7 @@
<section id="settings_page" class="page hide-completely"> <section id="settings_page" class="page hide-completely">
<section class="grid gap-0-5"> <section class="grid gap-0-5">
<h2 id="username" class="capitalize"></h2> <h2 id="username" class="capitalize"></h2>
<div id="user_role"></div>
<sm-copy id="user_flo_id"></sm-copy> <sm-copy id="user_flo_id"></sm-copy>
<sm-button id="logout" variant="primary" class="justify-self-start" <sm-button id="logout" variant="primary" class="justify-self-start"
onclick="logout()"> onclick="logout()">
@ -294,6 +297,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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg> <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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button> </button>
</section> </section>
<div id="fab_backdrop" onclick="toggleFab()"></div>
</section> </section>
<section id="updates_page" class="page hide-completely"> <section id="updates_page" class="page hide-completely">
<sm-button class="hide-on-desktop justify-self-end" onclick="toggleFilter()">Filter</sm-button> <sm-button class="hide-on-desktop justify-self-end" onclick="toggleFilter()">Filter</sm-button>
@ -339,7 +343,7 @@
Watch Watch
</sm-button> </sm-button>
</header> </header>
<p class="project_explorer__project_description"></p> <p id="project_explorer__project_description"></p>
<div id="explorer_branch_container"></div> <div id="explorer_branch_container"></div>
<h4></h4> <h4></h4>
<div id="explorer_task_list"></div> <div id="explorer_task_list"></div>
@ -589,7 +593,7 @@
</template> </template>
<template id="task_list_item_template"> <template id="task_list_item_template">
<li class="task-list-item"> <li class="task-list-item">
<sm-checkbox></sm-checkbox> <sm-checkbox title="Mark this task as completed"></sm-checkbox>
<h4 class="title capitalize"></h4> <h4 class="title capitalize"></h4>
<button class="task-option"> <button class="task-option">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
@ -9979,7 +9983,7 @@
if (textContent) if (textContent)
elem.textContent = textContent elem.textContent = textContent
if (innerHTML) if (innerHTML)
elem.innerHTML = innerHTML elem.innerHTML = DOMPurify.sanitize(innerHTML)
return elem return elem
} }
@ -10298,7 +10302,6 @@
</script> </script>
<script id="UI_functions"> <script id="UI_functions">
// Method object for creating various UI elements // Method object for creating various UI elements
const render = { const render = {
projectCard(projectName, projectCode, isAdmin = false) { // creates cards containing project information projectCard(projectName, projectCode, isAdmin = false) { // creates cards containing project information
@ -10392,9 +10395,9 @@
return thisIntern; return thisIntern;
}, },
taskListItem(taskNo) { taskListItem(taskNo) {
let card = getRef('task_list_item_template').content.cloneNode(true), const assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo)
assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo), const card = getRef('task_list_item_template').content.cloneNode(true)
frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
const { taskTitle, taskDescription } = RIBC.getTaskDetails(currentProject, currentBranch, taskNo) const { taskTitle, taskDescription } = RIBC.getTaskDetails(currentProject, currentBranch, taskNo)
if (RIBC.getTaskStatus(currentProject, currentBranch, taskNo) !== 'incomplete') { if (RIBC.getTaskStatus(currentProject, currentBranch, taskNo) !== 'incomplete') {
card.querySelector('sm-checkbox').setAttribute('checked', '') card.querySelector('sm-checkbox').setAttribute('checked', '')
@ -10429,10 +10432,10 @@
timeline.textContent = 'Timeline'; timeline.textContent = 'Timeline';
mapBody.id = `${projectCode}_map_body` mapBody.id = `${projectCode}_map_body`
RIBC.getProjectBranches(projectCode).forEach((branch) => { RIBC.getProjectBranches(projectCode).forEach((branch) => {
frag.appendChild(render.branchBtn(projectCode, branch)) frag.append(render.branchBtn(projectCode, branch))
}) })
branchContainer.appendChild(frag); branchContainer.append(frag);
header.appendChild(title) header.append(title)
card.append(header, para, branchContainer, timeline, mapBody) card.append(header, para, branchContainer, timeline, mapBody)
mapItems.push(card, card.id, branchContainer.id, mapBody.id) mapItems.push(card, card.id, branchContainer.id, mapBody.id)
return mapItems; return mapItems;
@ -10466,21 +10469,21 @@
internTaskCard(taskObj) { internTaskCard(taskObj) {
const { uniqueId, projectId, projectName, projectBranch, task } = taskObj const { uniqueId, projectId, projectName, projectBranch, task } = taskObj
const { taskTitle, taskDescription } = RIBC.getTaskDetails(projectId, projectBranch, task) const { taskTitle, taskDescription } = RIBC.getTaskDetails(projectId, projectBranch, task)
const card = document.createElement('li') return createElement('li', {
card.className = "task-card" className: "task-card",
card.dataset.uniqueId = uniqueId attributes: {uniqueId},
card.innerHTML = ` innerHTML: `
<div class="task__header"> <div class="task__header">
<h5 class="task__project-title">${projectName}</h5> <h5 class="task__project-title">${projectName}</h5>
<h5 class="task__title">${taskTitle}</h5> <h5 class="task__title">${taskTitle}</h5>
<sm-button class="send-update-button"> <sm-button class="send-update-button">
<svg class="icon button__icon--left" 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> <svg class="icon button__icon--left" 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 Post
</sm-button> </sm-button>
</div> </div>
<p class="task__description">${taskDescription}</p> <p class="task__description">${taskDescription}</p>
` `
return card })
}, },
} }
@ -10518,7 +10521,7 @@
} }
let allInternsList = [], highPerformingInterns = [], let allInternsList = [], highPerformingInterns = [],
frag = document.createDocumentFragment(), watchList = [], currentIntern, dashboardProject, currentTaskId, watchList = [], currentIntern, dashboardProject, currentTaskId,
typeOfUser = 'general'; typeOfUser = 'general';
// Adds interns to the database **Only SubAdmins can add interns // Adds interns to the database **Only SubAdmins can add interns
@ -10563,6 +10566,7 @@
// opens a popup containing various project information // opens a popup containing various project information
function showProjectInfo(projectId) { function showProjectInfo(projectId) {
const frag = document.createDocumentFragment();
const allProjects = getRef('left').querySelectorAll('.project-card'); const allProjects = getRef('left').querySelectorAll('.project-card');
Array.from(allProjects).find(project => project.classList.contains('project-card--active'))?.classList.remove('project-card--active') Array.from(allProjects).find(project => project.classList.contains('project-card--active'))?.classList.remove('project-card--active')
Array.from(allProjects).find(project => project.getAttribute('href').includes(projectId))?.classList.add('project-card--active') Array.from(allProjects).find(project => project.getAttribute('href').includes(projectId))?.classList.add('project-card--active')
@ -10577,7 +10581,7 @@
getRef('project_explorer__project_description').textContent = projectDescription; getRef('project_explorer__project_description').textContent = projectDescription;
getRef('explorer_branch_container').innerHTML = ``; getRef('explorer_branch_container').innerHTML = ``;
RIBC.getProjectBranches(projectId).forEach((branch) => { RIBC.getProjectBranches(projectId).forEach((branch) => {
frag.appendChild(render.branchBtn(projectId, branch)) frag.append(render.branchBtn(projectId, branch))
}) })
getRef('explorer_branch_container').append(frag); getRef('explorer_branch_container').append(frag);
getRef('explorer_branch_container').children[0].click() getRef('explorer_branch_container').children[0].click()
@ -10611,26 +10615,25 @@
function showTasksOfBranch(btn, destination, taskListContainer) { function showTasksOfBranch(btn, destination, taskListContainer) {
currentProject = btn.dataset.projectCode; currentProject = btn.dataset.projectCode;
currentBranch = btn.textContent; currentBranch = btn.textContent;
const frag = document.createDocumentFragment();
let content = RIBC.getProjectMap(currentProject)[currentBranch], let content = RIBC.getProjectMap(currentProject)[currentBranch],
taskList = document.getElementById(taskListContainer), taskList = document.getElementById(taskListContainer),
frag = document.createDocumentFragment(),
allbranches = document.getElementById(destination).querySelectorAll('.branch-btn'); allbranches = document.getElementById(destination).querySelectorAll('.branch-btn');
console.log(content)
taskList.innerHTML = ''; taskList.innerHTML = '';
allbranches.forEach((branchBtn) => { allbranches.forEach((branchBtn) => {
branchBtn.classList.remove('active-branch') branchBtn.classList.remove('active-branch')
}) })
btn.classList.add('active-branch') btn.classList.add('active-branch')
if (!content[1] && !taskListContainer === 'task_list') { if (!content[1] && !taskListContainer === 'task_list') {
taskList.textContent = "No tasks added yet, Please explore other projects :)" taskList.textContent = "No tasks added yet, Please explore other projects"
} }else {
else {
if (taskListContainer === 'task_list') { if (taskListContainer === 'task_list') {
showInnerPage('project_editing_panel') showInnerPage('project_editing_panel')
content.slice(4).forEach((taskNo) => { content.slice(4).forEach((taskNo) => {
frag.appendChild(render.taskListItem(taskNo)) frag.appendChild(render.taskListItem(taskNo))
}) })
} }else {
else {
content.slice(4).forEach((taskNo) => { content.slice(4).forEach((taskNo) => {
frag.appendChild(render.taskCard(currentProject, currentBranch, taskNo)) frag.appendChild(render.taskCard(currentProject, currentBranch, taskNo))
}) })
@ -10820,6 +10823,7 @@
function renderProjectSelectorOptions() { function renderProjectSelectorOptions() {
// Render All the projects inside updates page // Render All the projects inside updates page
const frag = document.createDocumentFragment();
getRef('updates_page__project_selector').innerHTML = ``; getRef('updates_page__project_selector').innerHTML = ``;
const stripOption = createElement('sm-option', { const stripOption = createElement('sm-option', {
textContent: 'All', textContent: 'All',
@ -10837,6 +10841,7 @@
} }
function renderInternSelectorOptions() { function renderInternSelectorOptions() {
// Render All the projects inside updates page // Render All the projects inside updates page
const frag = document.createDocumentFragment();
getRef('updates_page__intern_selector').innerHTML = ``; getRef('updates_page__intern_selector').innerHTML = ``;
const stripOption = createElement('sm-option', { const stripOption = createElement('sm-option', {
textContent: 'All', textContent: 'All',
@ -10892,6 +10897,7 @@
}) })
function renderInternUpdates(options = {}) { function renderInternUpdates(options = {}) {
let {updates, lazyLoad = false} = options let {updates, lazyLoad = false} = options
const frag = document.createDocumentFragment();
if(!updates){ if(!updates){
updates = RIBC.getInternUpdates(); updates = RIBC.getInternUpdates();
} }
@ -10925,21 +10931,15 @@
const {lazyLoad = false} = options const {lazyLoad = false} = options
const selectedProject = getRef('updates_page__project_selector').value const selectedProject = getRef('updates_page__project_selector').value
const selectedintern = getRef('updates_page__intern_selector').value const selectedintern = getRef('updates_page__intern_selector').value
if(selectedProject === 'all' && selectedintern === 'all'){ let matchedUpdates
renderInternUpdates({lazyLoad}) if(selectedProject !== 'all'){
}else if(selectedProject !== 'all' && selectedintern === 'all'){
const projectName = RIBC.getProjectDetails(selectedProject).projectName const projectName = RIBC.getProjectDetails(selectedProject).projectName
const matchedUpdates = await getUpdatesByProject(projectName) matchedUpdates = await getUpdatesByProject(projectName)
renderInternUpdates({updates: matchedUpdates, lazyLoad})
}else if(selectedProject === 'all' && selectedintern !== 'all'){
const matchedUpdates = await getUpdatesByIntern(selectedintern)
renderInternUpdates({updates: matchedUpdates, lazyLoad})
}else{
const projectName = RIBC.getProjectDetails(selectedProject).projectName
let matchedUpdates = await getUpdatesByProject(projectName)
matchedUpdates = await getUpdatesByIntern(selectedintern, matchedUpdates)
renderInternUpdates({updates: matchedUpdates, lazyLoad})
} }
if(selectedintern !== 'all'){
matchedUpdates = await getUpdatesByIntern(selectedintern, matchedUpdates)
}
renderInternUpdates({updates: matchedUpdates, lazyLoad})
}, 100) }, 100)
function clearFilter(){ function clearFilter(){
@ -10962,9 +10962,6 @@
else { else {
watchList.splice(watchList.indexOf(currentProject), 1) watchList.splice(watchList.indexOf(currentProject), 1)
thisBtn.textContent = 'Watch' thisBtn.textContent = 'Watch'
if (watchList.length === 0) {
document.getElementById('status_map').innerHTML = '<h3>No project added to watch list.</h3>'
}
localStorage.setItem('watchList', JSON.stringify(watchList)) localStorage.setItem('watchList', JSON.stringify(watchList))
notify(`${RIBC.getProjectDetails(currentProject).projectName} removed from your watch list.`) notify(`${RIBC.getProjectDetails(currentProject).projectName} removed from your watch list.`)
} }
@ -11123,8 +11120,8 @@
function renderAllElements() { function renderAllElements() {
let frag = document.createDocumentFragment(), const frag = document.createDocumentFragment()
allProjectsList = RIBC.getProjectList(); let allProjectsList = RIBC.getProjectList();
//creates cards for highest performing interns //creates cards for highest performing interns
//sort interns earned points //sort interns earned points
@ -11375,11 +11372,13 @@
let greetings = getInternDetails(myFloID)[0] !== undefined ? `Hi, ${getInternDetails(myFloID)[0].split(':')[1]}` : `Hi, there!` let greetings = getInternDetails(myFloID)[0] !== undefined ? `Hi, ${getInternDetails(myFloID)[0].split(':')[1]}` : `Hi, there!`
getRef('username').textContent = greetings; getRef('username').textContent = greetings;
getRef('user_flo_id').value = myFloID; getRef('user_flo_id').value = myFloID;
getRef('user_role').textContent = typeOfUser;
console.log(typeOfUser) console.log(typeOfUser)
} }
function filterInterns(searchKey, options = {}){ function filterInterns(searchKey, options = {}){
const {sortByRating = false} = options const {sortByRating = false} = options
const frag = document.createDocumentFragment();
const allInterns = RIBC.getInternList() const allInterns = RIBC.getInternList()
const arrayOfInterns = [] const arrayOfInterns = []
for (const intern in allInterns) { for (const intern in allInterns) {