Feature update

-- added option to edit task title and description in admin page

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;
   }
 

css/main.scss

@@ -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{

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.firstElementChild.dataset.taskId = taskNo
-                card.querySelector('.title').textContent = `${taskNo}. ${taskTitle}`;
+                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')