Changed intern search logic

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

View File

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

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -896,7 +896,7 @@ ul {
position: absolute;
top: 0;
right: 0;
margin: 0 2rem;
margin: -1rem 1rem 0 1rem;
list-style: none;
padding: 0.5rem 0;
width: max-content;
@ -928,12 +928,11 @@ ul {
margin: 1rem 0;
}
#interns_list {
#intern_list_popup {
flex-direction: column;
min-width: 20rem;
}
#interns_list #interns_list_container {
#intern_list_popup #interns_list_container {
min-height: 50vh;
max-height: 50vh;
overflow-y: auto;
@ -1067,17 +1066,13 @@ ul {
#admin_page {
position: relative;
display: grid;
gap: 1rem;
padding: 0;
gap: 0;
height: 100%;
}
#admin_page__header {
gap: 1rem;
align-items: center;
grid-template-columns: 1fr auto;
}
#project_editing_panel {
position: relative;
padding: 1rem;
height: 100%;
overflow-y: auto;
@ -1133,6 +1128,7 @@ ul {
}
.icon{
fill: var(--accent-color);
margin-left: 0.5rem;
}
}
.fab{
@ -1140,9 +1136,9 @@ ul {
display: flex;
justify-content: center;
align-items: center;
padding: 0.8rem;
height: 3rem;
width: 3rem;
padding: 1rem;
height: 3.2rem;
width: 3.2rem;
border-radius: 50%;
background-color: var(--accent-color);
box-shadow: 0 0.5rem 0.8remrgba(0, 0, 0, 0.3);
@ -1277,14 +1273,6 @@ ul {
.hide-page-on-mobile {
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) {
.hide-on-desktop {
@ -1355,17 +1343,14 @@ ul {
#admin_page {
grid-template-columns: 18rem minmax(0, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas: 'admin-header admin-header' '. .';
grid-template-rows: 1fr;
}
#admin_page__header {
grid-area: admin-header;
#admin_page__left{
background-color: var(--foreground-color);
}
#admin_page__left,
#project_editing_panel{
border-radius: 0.5rem;
background-color: var(--foreground-color);
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 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">
<sm-tab-header target="admin_tabs">
<sm-tab>Projects</sm-tab>
@ -241,7 +238,7 @@
Add task
</sm-button>
<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"
height="24">
<path fill="none" d="M0 0h24v24H0z" />
@ -273,19 +270,25 @@
<section id="admin_fab" class="fab-actions">
<ul id="admin_fab__options" class="grid gap-0-5 hide-completely">
<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>
Add project
<span class="fab-actions__item-name">
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 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>
Add intern
<span class="fab-actions__item-name">
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 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>
Commit changes
<span class="fab-actions__item-name">
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>
</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="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>
@ -359,7 +362,7 @@
</div>
</sm-popup>
<sm-popup id="interns_list">
<sm-popup id="intern_list_popup">
<header slot="header" class="popup__header">
<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">
@ -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" />
</svg>
</sm-input>
<div id="interns_list_container"></div>
<ul id="interns_list_container"></ul>
</sm-popup>
<sm-popup id="project_info">
@ -613,14 +616,14 @@
</li>
</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>
<h4 class="intern-card__name capitalize"></h4>
<div class="intern-card__score-wrapper flex align-center">
<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>
</div>
</div>
</li>
</template>
<template id="timeline_task_card">
<div class="task">
@ -10358,7 +10361,7 @@
// creates cards containing intern information
const card = getRef('intern_card_template').content.cloneNode(true)
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__name').textContent = internName;
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
@ -10640,7 +10650,8 @@
currentTask = e.target.closest('.task-list-item');
}
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').animate([
{
@ -10784,11 +10795,8 @@
for (intern in allInternsList) {
frag.append(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern)))
}
getRef('interns_list_container').innerHTML = ''
getRef('all_interns_list').innerHTML = ''
const fragClone = frag.cloneNode(true)
getRef('interns_list_container').append(frag)
getRef('all_interns_list').append(fragClone)
getRef('all_interns_list').append(frag)
}
function changeScore(scoreUpdate) {
@ -10924,7 +10932,7 @@
}
}
async function renderFilteredUpdates(options = {}) {
const renderFilteredUpdates = debounce(async (options = {}) => {
const {lazyLoad = false} = options
const selectedProject = getRef('updates_page__project_selector').value
const selectedintern = getRef('updates_page__intern_selector').value
@ -10943,7 +10951,7 @@
matchedUpdates = await getUpdatesByIntern(selectedintern, matchedUpdates)
renderInternUpdates({updates: matchedUpdates, lazyLoad})
}
}
}, 100)
function clearFilter(){
getRef('updates_page__project_selector').reset()
@ -11051,7 +11059,7 @@
getRef('loading_page').classList.add('hide-completely')
}
}
let myInput = function () {
function myInput() {
return new Promise((resolve, reject) => {
loader('hide')
getRef('sign_in_page').classList.remove('hide-completely');
@ -11071,14 +11079,14 @@
function toggleFab() {
if(getRef('admin_fab').hasAttribute('open')){
getRef('admin_fab').toggleAttribute('open')
getRef('admin_fab').removeAttribute('open')
setTimeout(() => {
getRef('admin_fab__options').classList.toggle('hide-completely')
getRef('admin_fab__options').classList.add('hide-completely')
}, 300);
}else{
getRef('admin_fab__options').classList.toggle('hide-completely')
getRef('admin_fab__options').classList.remove('hide-completely')
setTimeout(() => {
getRef('admin_fab').toggleAttribute('open')
getRef('admin_fab').setAttribute('open', '')
}, 0);
}
}
@ -11101,6 +11109,25 @@
if (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 = {}
@ -11304,11 +11331,18 @@
showTasksOfBranch(event.target.closest('.branch-btn'), 'project_editing_panel', 'task_list')
}
})
document.getElementById('intern_search_field').addEventListener('input', (event) => {
let container = document.getElementById('interns_list_container'),
inputField = document.getElementById('intern_search_field');
})
const searchInterns = debounce((e) => {
const searchKey = e.target.value.trim()
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', () => {
const { projectId, projectName, projectBranch, task } = internAssignedTasks[currentTaskId]