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

feature update and bug fixes

Browse Source 
-- added search functionality for tasks
This commit is contained in:
sairaj mote 2022-10-25 03:03:29 +05:30
parent dbd501297a
commit 453fa6461d
7 changed files with 85 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components.js
View File

File diff suppressed because one or more lines are too long

26
css/main.css
View File

@ -314,7 +314,7 @@ strip-select {
strip-option { strip-option {
position: relative; position: relative;
font-size: 0.8rem; font-size: 0.9rem;
--border-radius: 0.3rem; --border-radius: 0.3rem;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -826,6 +826,10 @@ ul {
width: min(100%, 48rem); width: min(100%, 48rem);
} }
#display_task_list {
margin-top: 1rem;
}
#sign_in, #sign_in,
#sign_up { #sign_up {
justify-items: center; justify-items: center;
@ -870,15 +874,19 @@ ul {
} }
#task_details > * { #task_details > * {
justify-self: center; justify-self: center;
width: min(64rem, 100%); width: min(48rem, 100%);
} }
#task_details_wrapper { #task_details_wrapper {
padding: 1.5rem; padding: max(1rem, 4vw);
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
border-radius: 0.5rem; border-radius: 0.5rem;
} }
#task_description {
margin-top: 1rem;
}
#main_page { #main_page {
height: 100%; height: 100%;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
@ -1108,7 +1116,7 @@ ul {
#dashboard_page { #dashboard_page {
padding-bottom: 5rem; padding-bottom: 5rem;
grid-template-columns: auto; grid-template-columns: minmax(0, 1fr);
overflow-y: auto; overflow-y: auto;
align-content: flex-start; align-content: flex-start;
} }
@ -1788,6 +1796,9 @@ input[type=date]:focus {
.landing__card:first-of-type img { .landing__card:first-of-type img {
grid-area: 1/1/2/2; grid-area: 1/1/2/2;
} }
#task_search_input {
width: 100%;
}
.hide-on-mobile, .hide-on-mobile,
.hide-page-on-mobile { .hide-page-on-mobile {
display: none; display: none;
@ -1890,16 +1901,17 @@ input[type=date]:focus {
#project_explorer { #project_explorer {
display: grid; display: grid;
height: 100%; height: 100%;
gap: 0;
grid-template-columns: 16rem 3fr; grid-template-columns: 16rem 3fr;
grid-template-areas: "left right"; grid-template-areas: "left right";
background-color: rgba(var(--foreground-color), 0.3);
overflow-y: auto;
} }
#project_explorer__left { #project_explorer__left {
grid-area: left; grid-area: left;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border-right: 1px solid rgba(var(--text-color), 0.06);
background-color: rgba(var(--background-color), 1);
} }
#project_explorer__left h4 { #project_explorer__left h4 {
margin-top: 0; margin-top: 0;
@ -1911,6 +1923,8 @@ input[type=date]:focus {
grid-area: right; grid-area: right;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
padding: 1.5rem 4vw;
background-color: rgba(var(--foreground-color), 0.5);
} }
#main_page { #main_page {
grid-template-columns: 4rem minmax(0, 1fr); grid-template-columns: 4rem minmax(0, 1fr);

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

24
css/main.scss
View File

@ -309,7 +309,7 @@ strip-select {
strip-option { strip-option {
position: relative; position: relative;
font-size: 0.8rem; font-size: 0.9rem;
--border-radius: 0.3rem; --border-radius: 0.3rem;
user-select: none; user-select: none;
} }
@ -815,7 +815,8 @@ ul {
margin: 0 auto; margin: 0 auto;
width: min(100%, 48rem); width: min(100%, 48rem);
} }
#display_task_search_wrapper { #display_task_list {
margin-top: 1rem;
} }
#sign_in, #sign_in,
#sign_up { #sign_up {
@ -860,14 +861,17 @@ ul {
padding-bottom: 3rem; padding-bottom: 3rem;
& > * { & > * {
justify-self: center; justify-self: center;
width: min(64rem, 100%); width: min(48rem, 100%);
} }
} }
#task_details_wrapper { #task_details_wrapper {
padding: 1.5rem; padding: max(1rem, 4vw);
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
border-radius: 0.5rem; border-radius: 0.5rem;
} }
#task_description {
margin-top: 1rem;
}
#main_page { #main_page {
height: 100%; height: 100%;
@ -1105,7 +1109,7 @@ ul {
#dashboard_page { #dashboard_page {
padding-bottom: 5rem; padding-bottom: 5rem;
grid-template-columns: auto; grid-template-columns: minmax(0, 1fr);
overflow-y: auto; overflow-y: auto;
align-content: flex-start; align-content: flex-start;
} }
@ -1764,6 +1768,9 @@ input[type="date"] {
} }
} }
} }
#task_search_input {
width: 100%;
}
.hide-on-mobile, .hide-on-mobile,
.hide-page-on-mobile { .hide-page-on-mobile {
display: none; display: none;
@ -1880,16 +1887,17 @@ input[type="date"] {
#project_explorer { #project_explorer {
display: grid; display: grid;
height: 100%; height: 100%;
gap: 0;
grid-template-columns: 16rem 3fr; grid-template-columns: 16rem 3fr;
grid-template-areas: "left right"; grid-template-areas: "left right";
background-color: rgba(var(--foreground-color), 0.3);
overflow-y: auto;
} }
#project_explorer__left { #project_explorer__left {
grid-area: left; grid-area: left;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border-right: 1px solid rgba(var(--text-color), 0.06);
background-color: rgba(var(--background-color), 1);
} }
#project_explorer__left h4 { #project_explorer__left h4 {
@ -1903,6 +1911,8 @@ input[type="date"] {
grid-area: right; grid-area: right;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
padding: 1.5rem 4vw;
background-color: rgba(var(--foreground-color), 0.5);
} }
#main_page { #main_page {
grid-template-columns: 4rem minmax(0, 1fr); grid-template-columns: 4rem minmax(0, 1fr);

83
index.html
View File

@ -41,7 +41,8 @@
new Promise((resolve) => { new Promise((resolve) => {
RIBC.refreshObjectData().then(() => { RIBC.refreshObjectData().then(() => {
resolve() resolve()
routeTo(window.location.hash); if (!floGlobals.loaded)
routeTo(window.location.hash);
}) })
}) })
) )
@ -49,8 +50,8 @@
console.log(result) console.log(result)
console.log(`Welcome FLO_ID: ${myFloID}`) console.log(`Welcome FLO_ID: ${myFloID}`)
RIBC.init(floGlobals.subAdmins.includes(myFloID)).then(result => { RIBC.init(floGlobals.subAdmins.includes(myFloID)).then(result => {
floGlobals.loaded = true
console.log(result) console.log(result)
renderAllElements()
routeTo(window.location.hash, { firstLoad: true }) routeTo(window.location.hash, { firstLoad: true })
}).catch(error => console.error(error)) }).catch(error => console.error(error))
}).catch(error => console.error(error)) }).catch(error => console.error(error))
@ -102,19 +103,18 @@
<h3> <h3>
Available Tasks Available Tasks
</h3> </h3>
<div class="flex gap-0-3"> <sm-input id="task_search_input" oninput="searchTasks(event)" placeholder="Search keywords"
<sm-input placeholder="Search" type="search" class="flex-1"> type="search">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle> <circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line> <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg> </svg>
</sm-input> </sm-input>
</div>
</div> </div>
<div id="display_task_filters" class="flex gap-1"> <div id="display_task_filters" class="flex gap-1">
<strip-select id="task_category_selector" class="w-100"></strip-select> <strip-select id="task_category_selector"></strip-select>
</div> </div>
</div> </div>
<div class="grid gap-1"> <div class="grid gap-1">
@ -1146,7 +1146,9 @@
categories.push(html`<strip-option value=${categoryID} ?selected=${params.category === categoryID}>${floGlobals.taskCategories[categoryID]}</strip-option>`) categories.push(html`<strip-option value=${categoryID} ?selected=${params.category === categoryID}>${floGlobals.taskCategories[categoryID]}</strip-option>`)
} }
renderElem(getRef('task_category_selector'), html`${categories}`) renderElem(getRef('task_category_selector'), html`${categories}`)
render.displayTasks(params.category) render.displayTasks(params.category, params.search)
if (getRef('task_search_input').value.trim() !== params.search)
getRef('task_search_input').value = params.search || ''
break; break;
case 'task_details': { case 'task_details': {
if (!params || !params.id) return; if (!params || !params.id) return;
@ -1167,10 +1169,7 @@
renderElem(getRef('task_details_wrapper'), html` renderElem(getRef('task_details_wrapper'), html`
<div class="grid gap-1"> <div class="grid gap-1">
<h5 class="capitalize">${floGlobals.taskCategories[category]}</h5> <h5 class="capitalize">${floGlobals.taskCategories[category]}</h5>
<div class="grid gap-0-5"> <h2 id="task_title">${title}</h2>
<h2 id="task_title">${title}</h2>
${descriptionTag}
</div>
<div class="display-task__details flex flex-wrap gap-0-3"> <div class="display-task__details flex flex-wrap gap-0-3">
${duration ? html` ${duration ? html`
<div class="display-task__detail"> <div class="display-task__detail">
@ -1191,6 +1190,7 @@
</div> </div>
`: ''} `: ''}
</div> </div>
${descriptionTag}
</div> </div>
${!hasApplied ? html` ${!hasApplied ? html`
<button class="button button--primary" .dataset=${{ taskId: params.id }} onclick="requestForTask(this)">Apply Now</button> <button class="button button--primary" .dataset=${{ taskId: params.id }} onclick="requestForTask(this)">Apply Now</button>
@ -1263,6 +1263,7 @@
return RIBC.getInternRating(b) - RIBC.getInternRating(a) return RIBC.getInternRating(b) - RIBC.getInternRating(a)
}); });
renderElem(getRef('top_interns'), html`${highPerformingInterns.slice(0, 8).map(floId => render.internCard(floId))}`); renderElem(getRef('top_interns'), html`${highPerformingInterns.slice(0, 8).map(floId => render.internCard(floId))}`);
renderAllElements()
break; break;
case 'updates_page': { case 'updates_page': {
if (!getRef('updates_page__project_selector').children.length) { if (!getRef('updates_page__project_selector').children.length) {
@ -1714,20 +1715,22 @@
</li> </li>
`; `;
}, },
displayTasks(category) { displayTasks(category, searchQuery) {
if (appState.currentPage !== 'landing') return; if (appState.currentPage !== 'landing') return;
const allTasks = RIBC.getAllTasks() const allTasks = RIBC.getAllTasks()
const filterCategory = category === 'all' ? false : category; const filterCategory = category === 'all' ? false : category;
const filtered = [] const filtered = []
for (const taskKey in allTasks) { for (const taskId in allTasks) {
const [projectCode, branch, task] = taskKey.split('_') const [projectCode, branch, task] = taskId.split('_')
const { category } = RIBC.getTaskDetails(projectCode, branch, task) if (filterCategory && allTasks[taskId].category !== filterCategory) continue;
if (RIBC.getTaskStatus(projectCode, branch, task) === 'incomplete') { if (RIBC.getTaskStatus(projectCode, branch, task) !== 'incomplete') continue;
if (filterCategory && category !== filterCategory) continue; if (searchQuery && searchQuery !== '' && !allTasks[taskId].title.toLowerCase().includes(searchQuery.toLowerCase())) continue;
filtered.unshift(render.displayTaskCard(projectCode, branch, task)) filtered.push(render.displayTaskCard(projectCode, branch, task))
} }
renderElem(getRef('display_task_list'), html`${filtered.reverse()}`)
if (searchQuery && filtered.length === 0) {
renderElem(getRef('display_task_list'), html`<p>No tasks related to <b>${searchQuery}</b></p>`)
} }
renderElem(getRef('display_task_list'), html`${filtered}`)
}, },
projectCard(projectCode, isAdmin = false, ref) { projectCard(projectCode, isAdmin = false, ref) {
const projectName = RIBC.getProjectDetails(projectCode).projectName const projectName = RIBC.getProjectDetails(projectCode).projectName
@ -2003,10 +2006,7 @@
<span class="task__project-title">${projectName}</span> <span class="task__project-title">${projectName}</span>
<div> <div>
<h4 class="task__title">${title}</h4> <h4 class="task__title">${title}</h4>
<details> ${linkifyDescription}
<summary>View description</summary>
${linkifyDescription}
</details>
</div> </div>
<button class="send-update-button button--small margin-left-auto"> <button class="send-update-button button--small margin-left-auto">
<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> <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>
@ -2153,9 +2153,12 @@
return renderedIntensColor[floId] return renderedIntensColor[floId]
} }
getRef('task_category_selector').addEventListener('change', (e) => { const searchTasks = debounce((e) => {
window.location.hash = `#/landing?category=${e.target.value}`; const searchQuery = getRef('task_search_input').value.trim();
}) const category = getRef('task_category_selector').value;
window.location.hash = `#/landing?category=${category}${searchQuery !== '' ? `&search=${searchQuery}` : ''}`;
}, 100)
getRef('task_category_selector').addEventListener('change', searchTasks)
let pinnedProjects = []; let pinnedProjects = [];
let currentIntern; let currentIntern;
let currentTaskId; let currentTaskId;
@ -2200,7 +2203,7 @@
} }
function makeEditable(elem) { function makeEditable(elem) {
floGlobals.tempEditableContent = DOMPurify.sanitize(elem.innerText.trim()) floGlobals.tempEditableContent = DOMPurify.sanitize(elem.innerHTML.trim())
elem.contentEditable = true elem.contentEditable = true
elem.focus() elem.focus()
document.execCommand('selectAll', false, null); document.execCommand('selectAll', false, null);
@ -2214,14 +2217,14 @@
getRef('project_details_wrapper').addEventListener('focusout', (e) => { getRef('project_details_wrapper').addEventListener('focusout', (e) => {
if (e.target.isContentEditable) { if (e.target.isContentEditable) {
e.target.contentEditable = false e.target.contentEditable = false
if (e.target.innerText.trim() !== '' && floGlobals.tempEditableContent !== DOMPurify.sanitize(e.target.innerText.trim())) { if (e.target.innerHTML.trim() !== '' && floGlobals.tempEditableContent !== DOMPurify.sanitize(e.target.innerHTML.trim())) {
const newTitle = DOMPurify.sanitize(getRef('editing_panel__title').innerText.trim()) const newTitle = DOMPurify.sanitize(getRef('editing_panel__title').innerHTML.trim())
const newDescription = DOMPurify.sanitize(getRef('editing_panel__description').innerText.trim()) const newDescription = DOMPurify.sanitize(getRef('editing_panel__description').innerHTML.trim())
RIBC.admin.addProjectDetails(appState.params.id, { projectName: newTitle, projectDescription: newDescription }) RIBC.admin.addProjectDetails(appState.params.id, { projectName: newTitle, projectDescription: newDescription })
notify('Changes saved locally, commit the changes to make them permanent', 'success') notify('Changes saved locally, commit the changes to make them permanent', 'success')
render.projectList(getRef('admin_page__project_list'), getSortedProjectList(), true) render.projectList(getRef('admin_page__project_list'), getSortedProjectList(), true)
} else { } else {
e.target.innerText = floGlobals.tempEditableContent e.target.innerHTML = floGlobals.tempEditableContent
} }
} }
}) })
@ -2350,7 +2353,7 @@
let valid = false; let valid = false;
if (e.target.isContentEditable) { if (e.target.isContentEditable) {
e.target.contentEditable = false e.target.contentEditable = false
newTaskDetails[e.target.dataset.editField] = DOMPurify.sanitize(e.target.innerText.trim()) newTaskDetails[e.target.dataset.editField] = DOMPurify.sanitize(e.target.innerHTML.trim())
valid = true; valid = true;
} else if (e.target.closest('sm-input')) { } else if (e.target.closest('sm-input')) {
newTaskDetails[e.target.dataset.editField] = parseInt(e.target.value) newTaskDetails[e.target.dataset.editField] = parseInt(e.target.value)

2
scripts/ribc.js
View File

@ -4,7 +4,7 @@
Ribc.init = function (isSubAdmin = false) { Ribc.init = function (isSubAdmin = false) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
Promise.all([Ribc.refreshGeneralData(isSubAdmin)]) Promise.all([Ribc.refreshObjectData(), Ribc.refreshGeneralData(isSubAdmin)])
.then(results => resolve(results)) .then(results => resolve(results))
.catch(error => reject(error)) .catch(error => reject(error))
}) })

2
scripts/ribc.min.js vendored
View File

File diff suppressed because one or more lines are too long