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

Changed intern search logic

Browse Source
This commit is contained in:
sairaj mote 2021-07-29 01:06:17 +05:30
parent f15e874b92
commit 0eccc4ffe4
4 changed files with 94 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css/main.css
View File

@ -868,7 +868,7 @@ ul {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: 0 2rem; margin: -1rem 1rem 0 1rem;
list-style: none; list-style: none;
padding: 0.5rem 0; padding: 0.5rem 0;
width: max-content; width: max-content;
@ -896,12 +896,11 @@ ul {
margin: 1rem 0; margin: 1rem 0;
} }
#interns_list { #intern_list_popup {
flex-direction: column; flex-direction: column;
min-width: 20rem;
} }
#interns_list #interns_list_container { #intern_list_popup #interns_list_container {
min-height: 50vh; min-height: 50vh;
max-height: 50vh; max-height: 50vh;
overflow-y: auto; overflow-y: auto;
@ -1035,17 +1034,13 @@ ul {
#admin_page { #admin_page {
position: relative; position: relative;
display: grid; display: grid;
gap: 1rem; padding: 0;
gap: 0;
height: 100%; height: 100%;
} }
#admin_page__header {
gap: 1rem;
align-items: center;
grid-template-columns: 1fr auto;
}
#project_editing_panel { #project_editing_panel {
position: relative;
padding: 1rem; padding: 1rem;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -1096,6 +1091,7 @@ ul {
} }
.fab-actions__item .icon { .fab-actions__item .icon {
fill: var(--accent-color); fill: var(--accent-color);
margin-left: 0.5rem;
} }
.fab { .fab {
@ -1103,9 +1099,9 @@ ul {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0.8rem; padding: 1rem;
height: 3rem; height: 3.2rem;
width: 3rem; width: 3.2rem;
border-radius: 50%; border-radius: 50%;
background-color: var(--accent-color); background-color: var(--accent-color);
box-shadow: 0 0.5rem 0.8remrgba 0, 0, 0, 0.3; box-shadow: 0 0.5rem 0.8remrgba 0, 0, 0, 0.3;
@ -1237,16 +1233,6 @@ ul {
.hide-page-on-mobile { .hide-page-on-mobile {
display: none; display: none;
} }
#admin_page {
gap: 0;
padding: 0;
grid-template-rows: auto 1fr;
}
#admin_page__header {
padding: 1rem;
}
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.hide-on-desktop { .hide-on-desktop {
@ -1312,18 +1298,16 @@ ul {
#admin_page { #admin_page {
grid-template-columns: 18rem minmax(0, 1fr); grid-template-columns: 18rem minmax(0, 1fr);
grid-template-rows: auto 1fr; grid-template-rows: 1fr;
grid-template-areas: "admin-header admin-header" ". .";
} }
#admin_page__header { #admin_page__left {
grid-area: admin-header; background-color: var(--foreground-color);
} }
#admin_page__left, #admin_page__left,
#project_editing_panel { #project_editing_panel {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color);
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3); box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

41
css/main.scss
View File

@ -896,7 +896,7 @@ ul {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: 0 2rem; margin: -1rem 1rem 0 1rem;
list-style: none; list-style: none;
padding: 0.5rem 0; padding: 0.5rem 0;
width: max-content; width: max-content;
@ -928,12 +928,11 @@ ul {
margin: 1rem 0; margin: 1rem 0;
} }
#interns_list { #intern_list_popup {
flex-direction: column; flex-direction: column;
min-width: 20rem;
} }
#interns_list #interns_list_container { #intern_list_popup #interns_list_container {
min-height: 50vh; min-height: 50vh;
max-height: 50vh; max-height: 50vh;
overflow-y: auto; overflow-y: auto;
@ -1067,17 +1066,13 @@ ul {
#admin_page { #admin_page {
position: relative; position: relative;
display: grid; display: grid;
gap: 1rem; padding: 0;
gap: 0;
height: 100%; height: 100%;
} }
#admin_page__header {
gap: 1rem;
align-items: center;
grid-template-columns: 1fr auto;
}
#project_editing_panel { #project_editing_panel {
position: relative;
padding: 1rem; padding: 1rem;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -1133,6 +1128,7 @@ ul {
} }
.icon{ .icon{
fill: var(--accent-color); fill: var(--accent-color);
margin-left: 0.5rem;
} }
} }
.fab{ .fab{
@ -1140,9 +1136,9 @@ ul {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0.8rem; padding: 1rem;
height: 3rem; height: 3.2rem;
width: 3rem; width: 3.2rem;
border-radius: 50%; border-radius: 50%;
background-color: var(--accent-color); background-color: var(--accent-color);
box-shadow: 0 0.5rem 0.8remrgba(0, 0, 0, 0.3); box-shadow: 0 0.5rem 0.8remrgba(0, 0, 0, 0.3);
@ -1277,14 +1273,6 @@ ul {
.hide-page-on-mobile { .hide-page-on-mobile {
display: none; display: none;
} }
#admin_page{
gap: 0;
padding: 0;
grid-template-rows: auto 1fr;
}
#admin_page__header{
padding: 1rem;
}
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.hide-on-desktop { .hide-on-desktop {
@ -1355,17 +1343,14 @@ ul {
#admin_page { #admin_page {
grid-template-columns: 18rem minmax(0, 1fr); grid-template-columns: 18rem minmax(0, 1fr);
grid-template-rows: auto 1fr; grid-template-rows: 1fr;
grid-template-areas: 'admin-header admin-header' '. .';
} }
#admin_page__left{
#admin_page__header { background-color: var(--foreground-color);
grid-area: admin-header;
} }
#admin_page__left, #admin_page__left,
#project_editing_panel{ #project_editing_panel{
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color);
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3); box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
} }

100
new.html
View File

@ -204,9 +204,6 @@
</section> </section>
</section> </section>
<section id="admin_page" class="page hide-completely"> <section id="admin_page" class="page hide-completely">
<header id="admin_page__header" class="grid">
<p>Don't forget to commit changes</p>
</header>
<section id="admin_page__left" class="flex direction-column"> <section id="admin_page__left" class="flex direction-column">
<sm-tab-header target="admin_tabs"> <sm-tab-header target="admin_tabs">
<sm-tab>Projects</sm-tab> <sm-tab>Projects</sm-tab>
@ -241,7 +238,7 @@
Add task Add task
</sm-button> </sm-button>
<ul id="task_context" class="hide-completely"> <ul id="task_context" class="hide-completely">
<li id="assign_intern" tabindex="0" class="interact" onclick="showPopup('interns_list')"> <li id="assign_intern" tabindex="0" class="interact" onclick="showPopup('intern_list_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
height="24"> height="24">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
@ -273,19 +270,25 @@
<section id="admin_fab" class="fab-actions"> <section id="admin_fab" class="fab-actions">
<ul id="admin_fab__options" class="grid gap-0-5 hide-completely"> <ul id="admin_fab__options" class="grid gap-0-5 hide-completely">
<li class="fab-actions__item interact" onclick="showPopup('add_project_popup')"> <li class="fab-actions__item interact" onclick="showPopup('add_project_popup')">
<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="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg> <span class="fab-actions__item-name">
Add project Add project
</span>
<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.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2zM4 5v14h16V7h-8.414l-2-2H4zm7 7V9h2v3h3v2h-3v3h-2v-3H8v-2h3z"/></svg>
</li> </li>
<li class="fab-actions__item interact" onclick="showPopup('add_intern_popup')"> <li class="fab-actions__item interact" onclick="showPopup('add_intern_popup')">
<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="M14 14.252v2.09A6 6 0 0 0 6 22l-2-.001a8 8 0 0 1 10-7.748zM12 13c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm6 6v-3h2v3h3v2h-3v3h-2v-3h-3v-2h3z"/></svg> <span class="fab-actions__item-name">
Add intern Add intern
</span>
<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="M14 14.252v2.09A6 6 0 0 0 6 22l-2-.001a8 8 0 0 1 10-7.748zM12 13c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm6 6v-3h2v3h3v2h-3v3h-2v-3h-3v-2h3z"/></svg>
</li> </li>
<li class="fab-actions__item interact" onclick="commitToChanges()"> <li class="fab-actions__item interact" onclick="commitToChanges()">
<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="M7 19v-6h10v6h2V7.828L16.172 5H5v14h2zM4 3h13l4 4v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5 12v4h6v-4H9z"/></svg> <span class="fab-actions__item-name">
Commit changes Commit changes
</span>
<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="M7 19v-6h10v6h2V7.828L16.172 5H5v14h2zM4 3h13l4 4v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5 12v4h6v-4H9z"/></svg>
</li> </li>
</ul> </ul>
<button onclick="toggleFab()" class="fab"> <button class="fab" onclick="toggleFab()">
<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="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z"/></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="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z"/></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> <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>
@ -359,7 +362,7 @@
</div> </div>
</sm-popup> </sm-popup>
<sm-popup id="interns_list"> <sm-popup id="intern_list_popup">
<header slot="header" class="popup__header"> <header slot="header" class="popup__header">
<button class="popup__header__close" onclick="hidePopup()"> <button class="popup__header__close" onclick="hidePopup()">
<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">
@ -377,7 +380,7 @@
d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" /> d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" />
</svg> </svg>
</sm-input> </sm-input>
<div id="interns_list_container"></div> <ul id="interns_list_container"></ul>
</sm-popup> </sm-popup>
<sm-popup id="project_info"> <sm-popup id="project_info">
@ -613,14 +616,14 @@
</li> </li>
</template> </template>
<template id="intern_card_template"> <template id="intern_card_template">
<div class="intern-card grid align-center interact"> <li class="intern-card grid align-center interact">
<div class="intern-card__initials"></div> <div class="intern-card__initials"></div>
<h4 class="intern-card__name capitalize"></h4> <h4 class="intern-card__name capitalize"></h4>
<div class="intern-card__score-wrapper flex align-center"> <div class="intern-card__score-wrapper flex align-center">
<h4 class="intern-card__score"></h4> <h4 class="intern-card__score"></h4>
<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 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z"/></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 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z"/></svg>
</div> </div>
</div> </li>
</template> </template>
<template id="timeline_task_card"> <template id="timeline_task_card">
<div class="task"> <div class="task">
@ -10358,7 +10361,7 @@
// creates cards containing intern information // creates cards containing intern information
const card = getRef('intern_card_template').content.cloneNode(true) const card = getRef('intern_card_template').content.cloneNode(true)
setAttributes(card.firstElementChild, { 'data-intern-id': internFLOID, 'title': 'Intern Information' }) setAttributes(card.firstElementChild, { 'data-intern-id': internFLOID, 'title': 'Intern Information' })
card.querySelector('.intern-card__initials').style.backgroundColor = randomColor() card.querySelector('.intern-card__initials').style.backgroundColor = getInternColor(internFLOID)
card.querySelector('.intern-card__initials').textContent = internName.split(' ').map(v => v.charAt(0)).join(''); card.querySelector('.intern-card__initials').textContent = internName.split(' ').map(v => v.charAt(0)).join('');
card.querySelector('.intern-card__name').textContent = internName; card.querySelector('.intern-card__name').textContent = internName;
card.querySelector('.intern-card__score').textContent = internPoints; card.querySelector('.intern-card__score').textContent = internPoints;
@ -10488,6 +10491,13 @@
}, },
} }
const renderedIntensColor = {}
function getInternColor(floId){
if(!renderedIntensColor[floId]){
renderedIntensColor[floId] = randomColor()
}
return renderedIntensColor[floId]
}
//helper functions //helper functions
@ -10640,7 +10650,8 @@
currentTask = e.target.closest('.task-list-item'); currentTask = e.target.closest('.task-list-item');
} }
if (e.target.closest('.task-option')) { if (e.target.closest('.task-option')) {
getRef('task_context').setAttribute('style', `top: ${e.target.closest('.task-option').offsetTop}px`) const optionButton = e.target.closest('.task-option')
getRef('task_context').setAttribute('style', `top: ${optionButton.offsetTop}px`)
getRef('task_context').classList.remove('hide-completely') getRef('task_context').classList.remove('hide-completely')
getRef('task_context').animate([ getRef('task_context').animate([
{ {
@ -10784,11 +10795,8 @@
for (intern in allInternsList) { for (intern in allInternsList) {
frag.append(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern))) frag.append(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern)))
} }
getRef('interns_list_container').innerHTML = ''
getRef('all_interns_list').innerHTML = '' getRef('all_interns_list').innerHTML = ''
const fragClone = frag.cloneNode(true) getRef('all_interns_list').append(frag)
getRef('interns_list_container').append(frag)
getRef('all_interns_list').append(fragClone)
} }
function changeScore(scoreUpdate) { function changeScore(scoreUpdate) {
@ -10924,7 +10932,7 @@
} }
} }
async function renderFilteredUpdates(options = {}) { const renderFilteredUpdates = debounce(async (options = {}) => {
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
@ -10943,7 +10951,7 @@
matchedUpdates = await getUpdatesByIntern(selectedintern, matchedUpdates) matchedUpdates = await getUpdatesByIntern(selectedintern, matchedUpdates)
renderInternUpdates({updates: matchedUpdates, lazyLoad}) renderInternUpdates({updates: matchedUpdates, lazyLoad})
} }
} }, 100)
function clearFilter(){ function clearFilter(){
getRef('updates_page__project_selector').reset() getRef('updates_page__project_selector').reset()
@ -11051,7 +11059,7 @@
getRef('loading_page').classList.add('hide-completely') getRef('loading_page').classList.add('hide-completely')
} }
} }
let myInput = function () { function myInput() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
loader('hide') loader('hide')
getRef('sign_in_page').classList.remove('hide-completely'); getRef('sign_in_page').classList.remove('hide-completely');
@ -11071,14 +11079,14 @@
function toggleFab() { function toggleFab() {
if(getRef('admin_fab').hasAttribute('open')){ if(getRef('admin_fab').hasAttribute('open')){
getRef('admin_fab').toggleAttribute('open') getRef('admin_fab').removeAttribute('open')
setTimeout(() => { setTimeout(() => {
getRef('admin_fab__options').classList.toggle('hide-completely') getRef('admin_fab__options').classList.add('hide-completely')
}, 300); }, 300);
}else{ }else{
getRef('admin_fab__options').classList.toggle('hide-completely') getRef('admin_fab__options').classList.remove('hide-completely')
setTimeout(() => { setTimeout(() => {
getRef('admin_fab').toggleAttribute('open') getRef('admin_fab').setAttribute('open', '')
}, 0); }, 0);
} }
} }
@ -11101,6 +11109,25 @@
if (event.target.closest('.intern-card')) if (event.target.closest('.intern-card'))
showInternInfo(event.target.closest('.intern-card')) showInternInfo(event.target.closest('.intern-card'))
}) })
document.addEventListener('popupopened', e => {
switch(e.detail.popup.id){
case 'intern_list_popup':
allInternsList = RIBC.getInternList();
for (intern in allInternsList) {
frag.append(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern)))
}
getRef('interns_list_container').innerHTML = ''
getRef('interns_list_container').append(frag)
break;
}
})
document.addEventListener('popupclosed', e => {
switch(e.detail.popup.id){
case 'intern_list_popup':
getRef('interns_list_container').innerHTML = ''
break;
}
})
const internAssignedTasks = {} const internAssignedTasks = {}
@ -11304,11 +11331,18 @@
showTasksOfBranch(event.target.closest('.branch-btn'), 'project_editing_panel', 'task_list') showTasksOfBranch(event.target.closest('.branch-btn'), 'project_editing_panel', 'task_list')
} }
}) })
document.getElementById('intern_search_field').addEventListener('input', (event) => { const searchInterns = debounce((e) => {
let container = document.getElementById('interns_list_container'), const searchKey = e.target.value.trim()
inputField = document.getElementById('intern_search_field'); const allInterns = RIBC.getInternList()
}) for (const intern in allInterns) {
if(allInternsList[intern].toLowerCase().includes(searchKey.toLowerCase()))
frag.append(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern)))
}
getRef('interns_list_container').innerHTML = ''
getRef('interns_list_container').append(frag)
}, 150)
getRef('intern_search_field').addEventListener('input', searchInterns)
getRef('post_update_btn').addEventListener('click', () => { getRef('post_update_btn').addEventListener('click', () => {
const { projectId, projectName, projectBranch, task } = internAssignedTasks[currentTaskId] const { projectId, projectName, projectBranch, task } = internAssignedTasks[currentTaskId]