Feature update
-- added option to edit task title and description in admin page
This commit is contained in:
sairaj mote
parent
56006d81cf
commit
02f15ab652
24
css/main.css
24
css/main.css
@ -549,7 +549,7 @@ ul {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
.task-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -744,11 +744,11 @@ ul {
|
||||
}
|
||||
|
||||
.branch-button {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
border-radius: 0;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.2rem;
|
||||
margin: 0.5rem 0.5rem 0.5rem 0;
|
||||
text-transform: capitalize;
|
||||
justify-self: start;
|
||||
align-items: center;
|
||||
@ -768,7 +768,7 @@ ul {
|
||||
}
|
||||
|
||||
#task_list {
|
||||
padding-bottom: 1.5rem;
|
||||
padding: 1rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
@ -790,7 +790,7 @@ ul {
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
.task-list-item .title {
|
||||
.task-list-item .task-title {
|
||||
grid-area: title;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@ -808,6 +808,7 @@ ul {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
padding-left: 2rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.task__branch_container .branch-button::before {
|
||||
position: absolute;
|
||||
@ -1226,6 +1227,8 @@ ul {
|
||||
}
|
||||
|
||||
input[type=date] {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: rgba(var(--text-color), 0.2) solid thin;
|
||||
border-radius: 0.3rem;
|
||||
@ -1322,6 +1325,7 @@ input[type=date]:focus {
|
||||
|
||||
#main_nav {
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
flex-direction: column;
|
||||
}
|
||||
#main_nav theme-toggle {
|
||||
@ -1351,6 +1355,10 @@ input[type=date]:focus {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
#sign_in {
|
||||
width: 24rem;
|
||||
height: auto;
|
||||
@ -1393,7 +1401,7 @@ input[type=date]:focus {
|
||||
grid-template-areas: "left right";
|
||||
}
|
||||
|
||||
#project_explorer #left {
|
||||
#project_explorer__left {
|
||||
grid-area: left;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
@ -1402,14 +1410,14 @@ input[type=date]:focus {
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
#project_explorer #left h4 {
|
||||
#project_explorer__left h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--accent-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#project_explorer #project_explorer__right {
|
||||
#project_explorer__right {
|
||||
grid-area: right;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
@ -1477,6 +1485,8 @@ input[type=date]:focus {
|
||||
}
|
||||
|
||||
#settings_page {
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -572,7 +572,7 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.task-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -768,11 +768,11 @@ ul {
|
||||
}
|
||||
|
||||
.branch-button {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
border-radius: 0;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.2rem;
|
||||
margin: 0.5rem 0.5rem 0.5rem 0;
|
||||
text-transform: capitalize;
|
||||
justify-self: start;
|
||||
align-items: center;
|
||||
@ -792,7 +792,7 @@ ul {
|
||||
}
|
||||
|
||||
#task_list{
|
||||
padding-bottom: 1.5rem;
|
||||
padding: 1rem 0 1.5rem 0;
|
||||
}
|
||||
.task-list-item {
|
||||
display: grid;
|
||||
@ -816,7 +816,7 @@ ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
.task-title {
|
||||
grid-area: title;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@ -835,6 +835,7 @@ ul {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
padding-left: 2rem;
|
||||
margin: 0.5rem 0;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
@ -1256,6 +1257,8 @@ ul {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
input[type="date"]{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: rgba(var(--text-color), 0.2) solid thin;
|
||||
border-radius: 0.3rem;
|
||||
@ -1345,6 +1348,7 @@ input[type="date"]{
|
||||
|
||||
#main_nav {
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
flex-direction: column;
|
||||
theme-toggle{
|
||||
margin: 1rem;
|
||||
@ -1378,6 +1382,9 @@ input[type="date"]{
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
.page{
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
#sign_in {
|
||||
width: 24rem;
|
||||
@ -1418,7 +1425,7 @@ input[type="date"]{
|
||||
grid-template-columns: 16rem 3fr;
|
||||
grid-template-areas: 'left right';
|
||||
}
|
||||
#project_explorer #left {
|
||||
#project_explorer__left {
|
||||
grid-area: left;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
@ -1427,14 +1434,14 @@ input[type="date"]{
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
#project_explorer #left h4 {
|
||||
#project_explorer__left h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--accent-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#project_explorer #project_explorer__right {
|
||||
#project_explorer__right {
|
||||
grid-area: right;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
@ -1495,6 +1502,8 @@ input[type="date"]{
|
||||
--height: 80vh;
|
||||
}
|
||||
#settings_page {
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
.watchlist_project_card{
|
||||
|
||||
75
new.html
75
new.html
@ -292,6 +292,14 @@
|
||||
Add task
|
||||
</sm-button>
|
||||
<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')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
|
||||
height="24">
|
||||
@ -383,7 +391,7 @@
|
||||
<h4 class="empty-state">No intern found</h4>
|
||||
</section>
|
||||
<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>
|
||||
<div></div>
|
||||
<h4 class="padding intern-option hide-completely">Other projects</h4>
|
||||
@ -597,7 +605,7 @@
|
||||
<template id="task_list_item_template">
|
||||
<li class="task-list-item">
|
||||
<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">
|
||||
<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" />
|
||||
@ -1604,10 +1612,10 @@
|
||||
}
|
||||
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')
|
||||
}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')
|
||||
}
|
||||
break;
|
||||
@ -1756,15 +1764,15 @@
|
||||
return internCard;
|
||||
},
|
||||
taskListItem(taskNo) {
|
||||
const assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo)
|
||||
const card = getRef('task_list_item_template').content.cloneNode(true)
|
||||
const assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo)
|
||||
const frag = document.createDocumentFragment()
|
||||
const { taskTitle, taskDescription } = RIBC.getTaskDetails(currentProject, currentBranch, taskNo)
|
||||
if (RIBC.getTaskStatus(currentProject, currentBranch, taskNo) !== 'incomplete') {
|
||||
card.querySelector('sm-checkbox').setAttribute('checked', '')
|
||||
}
|
||||
card.firstElementChild.setAttribute('id', taskNo)
|
||||
card.querySelector('.title').textContent = `${taskNo}. ${taskTitle}`;
|
||||
card.firstElementChild.dataset.taskId = taskNo
|
||||
card.querySelector('.task-title').textContent = taskTitle;
|
||||
card.querySelector('.task-description').textContent = taskDescription;
|
||||
if (assignedInterns) {
|
||||
assignedInterns.forEach((internFloId) => {
|
||||
@ -1944,7 +1952,7 @@
|
||||
// opens a popup containing various project information
|
||||
function showProjectInfo(projectId) {
|
||||
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.getAttribute('href').includes(projectId))?.classList.add('project-card--active')
|
||||
const { projectName, projectDescription } = RIBC.getProjectDetails(projectId);
|
||||
@ -2046,11 +2054,43 @@
|
||||
})
|
||||
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) => {
|
||||
if (e.target.closest('sm-checkbox')) {
|
||||
currentTask = e.target.closest('.task-list-item');
|
||||
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) => {
|
||||
@ -2100,7 +2140,7 @@
|
||||
else if (e.target.closest('.assigned-intern button')) {
|
||||
getConfirmation('Do you want to unassign this intern from this task?').then((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()
|
||||
notify('Intern removed from the task')
|
||||
}
|
||||
@ -2153,7 +2193,7 @@
|
||||
function removeThisTask() {
|
||||
getConfirmation("Are you sure to delete this task?").then((result) => {
|
||||
if (result) {
|
||||
RIBC.manage.deleteTaskInMap(currentProject, currentBranch, currentTask.id)
|
||||
RIBC.manage.deleteTaskInMap(currentProject, currentBranch, currentTask.dataset.taskId)
|
||||
currentTask.remove();
|
||||
}
|
||||
})
|
||||
@ -2182,7 +2222,7 @@
|
||||
const floId = event.target.closest('.intern-card').dataset.internFloId;
|
||||
const internName = RIBC.getInternList()[floId]
|
||||
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}`)
|
||||
currentTask.querySelector('.assigned-interns').append(render.assignedInternCard(floId, 'yes'))
|
||||
}else{
|
||||
@ -2219,11 +2259,11 @@
|
||||
|
||||
function showNewBranchPopup() {
|
||||
showPopup('create_branch_popup')
|
||||
const startPoint = parseInt(currentTask.id)
|
||||
const startPoint = parseInt(currentTask.dataset.taskId)
|
||||
getRef('branch_start_point').value = startPoint;
|
||||
}
|
||||
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 mergePoint = (userMergePoint === '') ? startPoint : parseInt(userMergePoint)
|
||||
const branchName = RIBC.manage.addBranch(currentProject, currentBranch, startPoint, mergePoint);
|
||||
@ -2379,6 +2419,7 @@
|
||||
getRef('updates_page__project_selector').reset()
|
||||
getRef('updates_page__intern_selector').reset()
|
||||
getRef('updates_page__date_selector').value = ''
|
||||
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() {
|
||||
if(getRef('admin_fab').hasAttribute('open')){
|
||||
getRef('admin_fab').removeAttribute('open')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user