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

Feature update

Browse Source 
-- added option to edit task title and description in admin page
This commit is contained in:
sairaj mote 2021-08-03 15:30:43 +05:30
parent 56006d81cf
commit 02f15ab652
4 changed files with 95 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/main.css
View File

@ -549,7 +549,7 @@ ul {
opacity: 1; opacity: 1;
} }
} }
.title { .task-title {
font-weight: 500; font-weight: 500;
} }
@ -744,11 +744,11 @@ ul {
} }
.branch-button { .branch-button {
margin-bottom: 0.5rem;
display: flex; display: flex;
border-radius: 0; border-radius: 0;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.2rem; border-radius: 0.2rem;
margin: 0.5rem 0.5rem 0.5rem 0;
text-transform: capitalize; text-transform: capitalize;
justify-self: start; justify-self: start;
align-items: center; align-items: center;
@ -768,7 +768,7 @@ ul {
} }
#task_list { #task_list {
padding-bottom: 1.5rem; padding: 1rem 0 1.5rem 0;
} }
.task-list-item { .task-list-item {
@ -790,7 +790,7 @@ ul {
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
} }
.task-list-item .title { .task-list-item .task-title {
grid-area: title; grid-area: title;
line-height: 1.6; line-height: 1.6;
} }
@ -808,6 +808,7 @@ ul {
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
padding-left: 2rem; padding-left: 2rem;
margin: 0.5rem 0;
} }
.task__branch_container .branch-button::before { .task__branch_container .branch-button::before {
position: absolute; position: absolute;
@ -1226,6 +1227,8 @@ ul {
} }
input[type=date] { input[type=date] {
display: flex;
width: 100%;
padding: 0.5rem; padding: 0.5rem;
border: rgba(var(--text-color), 0.2) solid thin; border: rgba(var(--text-color), 0.2) solid thin;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -1322,6 +1325,7 @@ input[type=date]:focus {
#main_nav { #main_nav {
padding: 0.5rem; padding: 0.5rem;
background-color: rgba(var(--background-color), 1);
flex-direction: column; flex-direction: column;
} }
#main_nav theme-toggle { #main_nav theme-toggle {
@ -1351,6 +1355,10 @@ input[type=date]:focus {
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.1);
} }
.page {
background-color: var(--foreground-color);
}
#sign_in { #sign_in {
width: 24rem; width: 24rem;
height: auto; height: auto;
@ -1393,7 +1401,7 @@ input[type=date]:focus {
grid-template-areas: "left right"; grid-template-areas: "left right";
} }
#project_explorer #left { #project_explorer__left {
grid-area: left; grid-area: left;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -1402,14 +1410,14 @@ input[type=date]:focus {
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
} }
#project_explorer #left h4 { #project_explorer__left h4 {
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: var(--accent-color); color: var(--accent-color);
font-size: 0.9rem; font-size: 0.9rem;
} }
#project_explorer #project_explorer__right { #project_explorer__right {
grid-area: right; grid-area: right;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -1477,6 +1485,8 @@ input[type=date]:focus {
} }
#settings_page { #settings_page {
height: 100%;
align-items: flex-start;
padding: 1rem 2rem; padding: 1rem 2rem;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

23
css/main.scss
View File

@ -572,7 +572,7 @@ ul {
} }
} }
.title { .task-title {
font-weight: 500; font-weight: 500;
} }
@ -768,11 +768,11 @@ ul {
} }
.branch-button { .branch-button {
margin-bottom: 0.5rem;
display: flex; display: flex;
border-radius: 0; border-radius: 0;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.2rem; border-radius: 0.2rem;
margin: 0.5rem 0.5rem 0.5rem 0;
text-transform: capitalize; text-transform: capitalize;
justify-self: start; justify-self: start;
align-items: center; align-items: center;
@ -792,7 +792,7 @@ ul {
} }
#task_list{ #task_list{
padding-bottom: 1.5rem; padding: 1rem 0 1.5rem 0;
} }
.task-list-item { .task-list-item {
display: grid; display: grid;
@ -816,7 +816,7 @@ ul {
margin: 0; margin: 0;
} }
.title { .task-title {
grid-area: title; grid-area: title;
line-height: 1.6; line-height: 1.6;
} }
@ -835,6 +835,7 @@ ul {
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
padding-left: 2rem; padding-left: 2rem;
margin: 0.5rem 0;
&::before{ &::before{
position: absolute; position: absolute;
content: ''; content: '';
@ -1256,6 +1257,8 @@ ul {
gap: 1.5rem; gap: 1.5rem;
} }
input[type="date"]{ input[type="date"]{
display: flex;
width: 100%;
padding: 0.5rem; padding: 0.5rem;
border: rgba(var(--text-color), 0.2) solid thin; border: rgba(var(--text-color), 0.2) solid thin;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -1345,6 +1348,7 @@ input[type="date"]{
#main_nav { #main_nav {
padding: 0.5rem; padding: 0.5rem;
background-color: rgba(var(--background-color), 1);
flex-direction: column; flex-direction: column;
theme-toggle{ theme-toggle{
margin: 1rem; margin: 1rem;
@ -1378,6 +1382,9 @@ input[type="date"]{
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.1);
} }
} }
.page{
background-color: var(--foreground-color);
}
#sign_in { #sign_in {
width: 24rem; width: 24rem;
@ -1418,7 +1425,7 @@ input[type="date"]{
grid-template-columns: 16rem 3fr; grid-template-columns: 16rem 3fr;
grid-template-areas: 'left right'; grid-template-areas: 'left right';
} }
#project_explorer #left { #project_explorer__left {
grid-area: left; grid-area: left;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -1427,14 +1434,14 @@ input[type="date"]{
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
} }
#project_explorer #left h4 { #project_explorer__left h4 {
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: var(--accent-color); color: var(--accent-color);
font-size: 0.9rem; font-size: 0.9rem;
} }
#project_explorer #project_explorer__right { #project_explorer__right {
grid-area: right; grid-area: right;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -1495,6 +1502,8 @@ input[type="date"]{
--height: 80vh; --height: 80vh;
} }
#settings_page { #settings_page {
height: 100%;
align-items: flex-start;
padding: 1rem 2rem; padding: 1rem 2rem;
} }
.watchlist_project_card{ .watchlist_project_card{

75
new.html
View File

@ -292,6 +292,14 @@
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="toggleEditing('title')">
<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="M15.728 9.686l-1.414-1.414L5 17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 21z"/></svg>
Edit title
</li>
<li id="assign_intern" tabindex="0" class="interact" onclick="toggleEditing()">
<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="M15.728 9.686l-1.414-1.414L5 17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 21z"/></svg>
Edit description
</li>
<li id="assign_intern" tabindex="0" class="interact" onclick="showPopup('intern_list_popup')"> <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">
@ -383,7 +391,7 @@
<h4 class="empty-state">No intern found</h4> <h4 class="empty-state">No intern found</h4>
</section> </section>
<section id="project_explorer" class="page hide-completely"> <section id="project_explorer" class="page hide-completely">
<div id="left" class="list-container"> <div id="project_explorer__left" class="list-container">
<h4 class="padding intern-option hide-completely">My projects</h4> <h4 class="padding intern-option hide-completely">My projects</h4>
<div></div> <div></div>
<h4 class="padding intern-option hide-completely">Other projects</h4> <h4 class="padding intern-option hide-completely">Other projects</h4>
@ -597,7 +605,7 @@
<template id="task_list_item_template"> <template id="task_list_item_template">
<li class="task-list-item"> <li class="task-list-item">
<sm-checkbox title="Mark this task as completed"></sm-checkbox> <sm-checkbox title="Mark this task as completed"></sm-checkbox>
<h4 class="title capitalize"></h4> <h4 class="task-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">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
@ -1604,10 +1612,10 @@
} }
showTasksOfBranch(branchDetails) showTasksOfBranch(branchDetails)
} }
getRef('left').classList.add('hide-on-mobile') getRef('project_explorer__left').classList.add('hide-on-mobile')
getRef('project_explorer__right').classList.remove('hide-on-mobile') getRef('project_explorer__right').classList.remove('hide-on-mobile')
}else{ }else{
getRef('left').classList.remove('hide-on-mobile') getRef('project_explorer__left').classList.remove('hide-on-mobile')
getRef('project_explorer__right').classList.add('hide-on-mobile') getRef('project_explorer__right').classList.add('hide-on-mobile')
} }
break; break;
@ -1756,15 +1764,15 @@
return internCard; return internCard;
}, },
taskListItem(taskNo) { taskListItem(taskNo) {
const assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo)
const card = getRef('task_list_item_template').content.cloneNode(true) const card = getRef('task_list_item_template').content.cloneNode(true)
const assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo)
const 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', '')
} }
card.firstElementChild.setAttribute('id', taskNo) card.firstElementChild.dataset.taskId = taskNo
card.querySelector('.title').textContent = `${taskNo}. ${taskTitle}`; card.querySelector('.task-title').textContent = taskTitle;
card.querySelector('.task-description').textContent = taskDescription; card.querySelector('.task-description').textContent = taskDescription;
if (assignedInterns) { if (assignedInterns) {
assignedInterns.forEach((internFloId) => { assignedInterns.forEach((internFloId) => {
@ -1944,7 +1952,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 frag = document.createDocumentFragment();
const allProjects = getRef('left').querySelectorAll('.project-card'); const allProjects = getRef('project_explorer__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')
const { projectName, projectDescription } = RIBC.getProjectDetails(projectId); const { projectName, projectDescription } = RIBC.getProjectDetails(projectId);
@ -2046,11 +2054,43 @@
}) })
return branchPoints return branchPoints
} }
function toggleEditing(target){
if(target === 'title'){
currentTask.querySelector('.task-title').contentEditable = true
currentTask.querySelector('.task-title').focus()
}else{
currentTask.querySelector('.task-description').contentEditable = true
currentTask.querySelector('.task-description').focus()
}
}
getRef('task_list').addEventListener('change', (e) => { getRef('task_list').addEventListener('change', (e) => {
if (e.target.closest('sm-checkbox')) { if (e.target.closest('sm-checkbox')) {
currentTask = e.target.closest('.task-list-item'); currentTask = e.target.closest('.task-list-item');
const taskStatus = e.target.closest('sm-checkbox').checked ? 'completed' : 'incomplete' const taskStatus = e.target.closest('sm-checkbox').checked ? 'completed' : 'incomplete'
RIBC.manage.putTaskStatus(taskStatus, currentProject, currentBranch, currentTask.id) RIBC.manage.putTaskStatus(taskStatus, currentProject, currentBranch, currentTask.dataset.taskId)
}
})
getRef('task_list').addEventListener('focusout', (e) => {
if(e.target.isContentEditable){
e.target.contentEditable = false
const {taskTitle, taskDescription} = RIBC.getTaskDetails(currentProject, currentBranch, currentTask.dataset.taskId)
const taskDetails = {}
if(e.target.closest('.task-description')){
taskDetails['taskTitle'] = taskTitle
taskDetails['taskDescription'] = DOMPurify.sanitize(e.target.textContent.trim())
}else if(e.target.closest('.task-title')){
taskDetails['taskTitle'] = DOMPurify.sanitize(e.target.textContent.trim())
taskDetails['taskDescription'] = taskDescription
}
RIBC.manage.editTaskDetails(taskDetails, currentProject, currentBranch, currentTask.dataset.taskId)
notify('Changes saved', 'success')
}
})
getRef('task_list').addEventListener('dblclick', (e) => {
if(e.target.closest('.task-description') && !e.target.isContentEditable){
toggleEditing()
}else if(e.target.closest('.task-title') && !e.target.isContentEditable){
toggleEditing('title')
} }
}) })
getRef('task_list').addEventListener('click', (e) => { getRef('task_list').addEventListener('click', (e) => {
@ -2100,7 +2140,7 @@
else if (e.target.closest('.assigned-intern button')) { else if (e.target.closest('.assigned-intern button')) {
getConfirmation('Do you want to unassign this intern from this task?').then((result) => { getConfirmation('Do you want to unassign this intern from this task?').then((result) => {
if (result) { if (result) {
RIBC.manage.unassignInternFromTask(e.target.closest('.assigned-intern').dataset.floid, currentProject, currentBranch, currentTask.id) RIBC.manage.unassignInternFromTask(e.target.closest('.assigned-intern').dataset.floid, currentProject, currentBranch, currentTask.dataset.taskId)
e.target.closest('.assigned-intern').remove() e.target.closest('.assigned-intern').remove()
notify('Intern removed from the task') notify('Intern removed from the task')
} }
@ -2153,7 +2193,7 @@
function removeThisTask() { function removeThisTask() {
getConfirmation("Are you sure to delete this task?").then((result) => { getConfirmation("Are you sure to delete this task?").then((result) => {
if (result) { if (result) {
RIBC.manage.deleteTaskInMap(currentProject, currentBranch, currentTask.id) RIBC.manage.deleteTaskInMap(currentProject, currentBranch, currentTask.dataset.taskId)
currentTask.remove(); currentTask.remove();
} }
}) })
@ -2182,7 +2222,7 @@
const floId = event.target.closest('.intern-card').dataset.internFloId; const floId = event.target.closest('.intern-card').dataset.internFloId;
const internName = RIBC.getInternList()[floId] const internName = RIBC.getInternList()[floId]
const {projectName} = RIBC.getProjectDetails(currentProject) const {projectName} = RIBC.getProjectDetails(currentProject)
if (RIBC.manage.assignInternToTask(floId, currentProject, currentBranch, currentTask.id)) { if (RIBC.manage.assignInternToTask(floId, currentProject, currentBranch, currentTask.dataset.taskId)) {
notify(`${internName} assigned to ${projectName}`) notify(`${internName} assigned to ${projectName}`)
currentTask.querySelector('.assigned-interns').append(render.assignedInternCard(floId, 'yes')) currentTask.querySelector('.assigned-interns').append(render.assignedInternCard(floId, 'yes'))
}else{ }else{
@ -2219,11 +2259,11 @@
function showNewBranchPopup() { function showNewBranchPopup() {
showPopup('create_branch_popup') showPopup('create_branch_popup')
const startPoint = parseInt(currentTask.id) const startPoint = parseInt(currentTask.dataset.taskId)
getRef('branch_start_point').value = startPoint; getRef('branch_start_point').value = startPoint;
} }
getRef('create_branch_btn').onclick = () => { getRef('create_branch_btn').onclick = () => {
const startPoint = parseInt(currentTask.id) const startPoint = parseInt(currentTask.dataset.taskId)
const userMergePoint = getRef('branch_merge_point').value.trim() const userMergePoint = getRef('branch_merge_point').value.trim()
const mergePoint = (userMergePoint === '') ? startPoint : parseInt(userMergePoint) const mergePoint = (userMergePoint === '') ? startPoint : parseInt(userMergePoint)
const branchName = RIBC.manage.addBranch(currentProject, currentBranch, startPoint, mergePoint); const branchName = RIBC.manage.addBranch(currentProject, currentBranch, startPoint, mergePoint);
@ -2379,6 +2419,7 @@
getRef('updates_page__project_selector').reset() getRef('updates_page__project_selector').reset()
getRef('updates_page__intern_selector').reset() getRef('updates_page__intern_selector').reset()
getRef('updates_page__date_selector').value = '' getRef('updates_page__date_selector').value = ''
renderFilteredUpdates()
} }
getRef('updates_page__project_selector').addEventListener('change', renderFilteredUpdates) getRef('updates_page__project_selector').addEventListener('change', renderFilteredUpdates)
@ -2458,6 +2499,12 @@
}) })
} }
getRef('admin_fab__options').addEventListener('click', e => {
if(e.target.closest('.fab-actions__item')){
toggleFab()
}
})
function toggleFab() { function toggleFab() {
if(getRef('admin_fab').hasAttribute('open')){ if(getRef('admin_fab').hasAttribute('open')){
getRef('admin_fab').removeAttribute('open') getRef('admin_fab').removeAttribute('open')