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

UI/UX and functionality changes

Browse Source 
-- moving object data fetching to mid startup
-- adding more fields to task creation
-- code refactoring
This commit is contained in:
sairaj mote 2022-10-10 19:12:36 +05:30
parent e7e58628d8
commit 73b23101a4
6 changed files with 388 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.js
View File

File diff suppressed because one or more lines are too long

76
css/main.css
View File

@ -302,6 +302,10 @@ sm-select {
--padding: 0.8rem; --padding: 0.8rem;
font-size: 0.9rem; font-size: 0.9rem;
--min-width: fit-content; --min-width: fit-content;
--select-border-radius: 0.5rem;
}
sm-select[open] {
z-index: 10;
} }
sm-option { sm-option {
@ -334,10 +338,6 @@ sm-button[disabled] .icon {
fill: rgba(var(--text-color), 0.6); fill: rgba(var(--text-color), 0.6);
} }
sm-select[open] {
z-index: 10;
}
ul { ul {
list-style: none; list-style: none;
} }
@ -390,6 +390,10 @@ ul {
flex: 1; flex: 1;
} }
.flex-shrink-0 {
flex-shrink: 0;
}
.grid { .grid {
display: grid; display: grid;
} }
@ -1025,6 +1029,7 @@ ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
gap: 0.7rem;
} }
.task .right .apply-cont { .task .right .apply-cont {
width: 100%; width: 100%;
@ -1034,9 +1039,11 @@ ul {
.task .right .apply-cont h4 { .task .right .apply-cont h4 {
flex: 1; flex: 1;
} }
.task .right:last-child {
margin-bottom: 1rem;
}
.task h4 { .task h4 {
margin-top: 0.4rem; margin-top: 0.4rem;
margin-bottom: 1rem;
} }
.task .assigned-interns .assigned-intern { .task .assigned-interns .assigned-intern {
padding: 0.4rem; padding: 0.4rem;
@ -1288,8 +1295,7 @@ ul {
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
} }
.branch-button--active {
.active-branch {
opacity: 1; opacity: 1;
color: white; color: white;
background: var(--accent-color); background: var(--accent-color);
@ -1371,7 +1377,6 @@ ul {
.assigned-interns { .assigned-interns {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 1rem;
gap: 0.5rem; gap: 0.5rem;
} }
.assigned-interns .assigned-intern { .assigned-interns .assigned-intern {
@ -1483,6 +1488,9 @@ ul {
align-content: flex-start; align-content: flex-start;
padding: 1rem; padding: 1rem;
} }
#project_explorer__right p {
line-height: 1.7;
}
#pin_project_button { #pin_project_button {
margin-left: 1rem; margin-left: 1rem;
@ -1491,15 +1499,16 @@ ul {
#admin_page { #admin_page {
position: relative; position: relative;
display: grid; display: grid;
gap: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
overflow: hidden;
grid-template-rows: auto 1fr;
} }
#admin_views { #admin_views {
display: grid; display: grid;
gap: 1rem;
height: 100%; height: 100%;
overflow-y: hidden;
} }
#admin_views > * { #admin_views > * {
grid-area: 1/1; grid-area: 1/1;
@ -1507,29 +1516,14 @@ ul {
#project_editing_panel { #project_editing_panel {
position: relative; position: relative;
padding: max(4vw, 1rem);
height: 100%; height: 100%;
padding: 0 max(4vw, 1rem);
overflow-y: auto; overflow-y: auto;
padding-bottom: 3rem; padding-bottom: 2rem;
flex: 1;
} }
#project_editing_panel p {
.fab { line-height: 1.7;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
right: 0;
bottom: 0;
background-color: var(--accent-color);
box-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.3);
transition: transform 0.3s;
-webkit-tap-highlight-color: transparent;
color: rgba(var(--background-color), 1);
margin: 1rem;
}
.fab .icon {
fill: rgba(var(--background-color), 1);
} }
#update_of_project { #update_of_project {
@ -1596,6 +1590,12 @@ ul {
fill: var(--accent-color); fill: var(--accent-color);
} }
.temp-task {
padding: 1rem;
background-color: rgba(var(--foreground-color), 1);
border-radius: 0.5rem;
}
#internship_requests_list { #internship_requests_list {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
@ -1628,16 +1628,22 @@ ul {
fill: var(--yellow); fill: var(--yellow);
} }
#admin_page__left { #projects_container {
display: flex;
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
} }
#admin_page__left .list-container {
#projects_container__left {
height: 100%;
overflow-y: auto;
}
#projects_container__left .list-container {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
#admin_page__left .empty-state { #projects_container__left .empty-state {
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
} }
@ -1817,9 +1823,9 @@ input[type=date]:focus {
} }
#admin_page { #admin_page {
padding: 0; padding: 0;
grid-template-columns: 18rem minmax(0, 1fr);
} }
#admin_page__left { #projects_container__left {
width: 18rem;
background-color: rgba(var(--foreground-color), 0.5); background-color: rgba(var(--foreground-color), 0.5);
} }
#edit_data_fig { #edit_data_fig {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

81
css/main.scss
View File

@ -297,6 +297,10 @@ sm-select {
--padding: 0.8rem; --padding: 0.8rem;
font-size: 0.9rem; font-size: 0.9rem;
--min-width: fit-content; --min-width: fit-content;
--select-border-radius: 0.5rem;
&[open] {
z-index: 10;
}
} }
sm-option { sm-option {
@ -332,11 +336,6 @@ sm-button {
} }
} }
} }
sm-select {
&[open] {
z-index: 10;
}
}
ul { ul {
list-style: none; list-style: none;
@ -387,6 +386,9 @@ ul {
.flex-1 { .flex-1 {
flex: 1; flex: 1;
} }
.flex-shrink-0 {
flex-shrink: 0;
}
.grid { .grid {
display: grid; display: grid;
@ -1032,6 +1034,7 @@ ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
gap: 0.7rem;
.apply-cont { .apply-cont {
width: 100%; width: 100%;
display: flex; display: flex;
@ -1040,11 +1043,13 @@ ul {
flex: 1; flex: 1;
} }
} }
&:last-child {
margin-bottom: 1rem;
}
} }
h4 { h4 {
margin-top: 0.4rem; margin-top: 0.4rem;
margin-bottom: 1rem;
} }
.assigned-interns .assigned-intern { .assigned-interns .assigned-intern {
@ -1288,12 +1293,11 @@ ul {
user-select: none; user-select: none;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
} &--active {
opacity: 1;
.active-branch { color: white;
opacity: 1; background: var(--accent-color);
color: white; }
background: var(--accent-color);
} }
#task_list { #task_list {
@ -1374,7 +1378,6 @@ ul {
.assigned-interns { .assigned-interns {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 1rem;
gap: 0.5rem; gap: 0.5rem;
.assigned-intern { .assigned-intern {
user-select: none; user-select: none;
@ -1476,6 +1479,9 @@ ul {
align-items: flex-start; align-items: flex-start;
align-content: flex-start; align-content: flex-start;
padding: 1rem; padding: 1rem;
p {
line-height: 1.7;
}
} }
#pin_project_button { #pin_project_button {
margin-left: 1rem; margin-left: 1rem;
@ -1484,41 +1490,28 @@ ul {
#admin_page { #admin_page {
position: relative; position: relative;
display: grid; display: grid;
gap: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
overflow: hidden;
grid-template-rows: auto 1fr;
} }
#admin_views { #admin_views {
display: grid; display: grid;
gap: 1rem;
height: 100%; height: 100%;
overflow-y: hidden;
& > * { & > * {
grid-area: 1/1; grid-area: 1/1;
} }
} }
#project_editing_panel { #project_editing_panel {
position: relative; position: relative;
padding: max(4vw, 1rem);
height: 100%; height: 100%;
padding: 0 max(4vw, 1rem);
overflow-y: auto; overflow-y: auto;
padding-bottom: 3rem; padding-bottom: 2rem;
} flex: 1;
.fab { p {
position: absolute; line-height: 1.7;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
right: 0;
bottom: 0;
background-color: var(--accent-color);
box-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.3);
transition: transform 0.3s;
-webkit-tap-highlight-color: transparent;
color: rgba(var(--background-color), 1);
margin: 1rem;
.icon {
fill: rgba(var(--background-color), 1);
} }
} }
@ -1583,6 +1576,12 @@ ul {
} }
} }
.temp-task {
padding: 1rem;
background-color: rgba(var(--foreground-color), 1);
border-radius: 0.5rem;
}
#internship_requests_list { #internship_requests_list {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
@ -1620,10 +1619,14 @@ ul {
} }
} }
} }
#projects_container {
#admin_page__left { display: flex;
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
}
#projects_container__left {
height: 100%;
overflow-y: auto;
.list-container { .list-container {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -1815,9 +1818,9 @@ input[type="date"] {
#admin_page { #admin_page {
padding: 0; padding: 0;
grid-template-columns: 18rem minmax(0, 1fr);
} }
#admin_page__left { #projects_container__left {
width: 18rem;
background-color: rgba(var(--foreground-color), 0.5); background-color: rgba(var(--foreground-color), 0.5);
} }
@ -1897,6 +1900,8 @@ input[type="date"] {
font-size: 0.9rem; font-size: 0.9rem;
grid-template-columns: 6rem 1fr 8rem; grid-template-columns: 6rem 1fr 8rem;
} }
#project_editing_panel {
}
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {

545
index.html
View File

@ -36,6 +36,13 @@
routeTo('loading') routeTo('loading')
document.body.classList.remove('hidden') document.body.classList.remove('hidden')
floDapps.setCustomPrivKeyInput(getSignedIn); floDapps.setCustomPrivKeyInput(getSignedIn);
floDapps.setMidStartup(() =>
new Promise((resolve) => {
RIBC.refreshObjectData().then(() => {
resolve()
})
})
)
floDapps.launchStartUp().then(result => { floDapps.launchStartUp().then(result => {
console.log(result) console.log(result)
console.log(`Welcome FLO_ID: ${myFloID}`) console.log(`Welcome FLO_ID: ${myFloID}`)
@ -438,15 +445,26 @@
</div> </div>
</section> </section>
<section id="admin_page" class="inner-page hidden"> <section id="admin_page" class="inner-page hidden">
<section id="admin_page__left" class="flex flex-direction-column"> <div class="flex align-center space-between">
<strip-select id="admin_view_selector"> <strip-select id="admin_view_selector">
<strip-option value="0" selected>Projects</strip-option> <strip-option value="0" selected>Projects</strip-option>
<strip-option value="1">Interns</strip-option> <strip-option value="1">Interns</strip-option>
<strip-option value="2">Requests</strip-option> <strip-option value="2">Requests</strip-option>
</strip-select> </strip-select>
<div id="admin_views"> <button class="button button--small button--primary admin-option" onclick="commitToChanges()">
<section id="projects_container" class="flex flex-direction-column"> <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
<button class="button button--small margin-left-auto margin-block-0-5" 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>
Save changes
</button>
</div>
<div id="admin_views">
<section id="projects_container">
<div id="projects_container__left" class="flex flex-direction-column">
<button class="button button--colored justify-content-start margin-block-0-5"
onclick="openPopup('add_project_popup')"> onclick="openPopup('add_project_popup')">
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="24" height="24"> viewBox="0 0 24 24" width="24" height="24">
@ -459,120 +477,115 @@
</button> </button>
<div id="admin_page__project_list" class="list-container observe-empty-state"></div> <div id="admin_page__project_list" class="list-container observe-empty-state"></div>
<h4 class="empty-state">No project added</h4> <h4 class="empty-state">No project added</h4>
</section> </div>
<section id="interns_container" class="flex flex-direction-column hidden"> <section id="project_editing_panel" class="hidden">
<button class="button button--small margin-left-auto margin-block-0-5" <div id="project_details_wrapper"
onclick="openPopup('add_intern_popup')"> class="flex flex-direction-column gap-1 margin-bottom-2 align-items-start">
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" <a class="button icon-only hide-on-desktop" href="#/admin_page">
viewBox="0 0 24 24" width="24" height="24"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"></path>
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z">
</path>
</svg>
</a>
<div class="flex flex-wrap align-items-start">
<h2 id="editing_panel__title" data-editable></h2>
<button class="button button--small button--transparent admin-option"
title="Edit this title" onclick="makeEditable(this.previousElementSibling)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />
</svg>
</button>
</div>
<div class="flex flex-wrap align-items-start">
<p id="editing_panel__description" data-editable></p>
<button class="button button--small button--transparent admin-option"
title="Edit this description"
onclick="makeEditable(this.previousElementSibling)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />
</svg>
</button>
</div>
</div>
<div class="grid gap-0-3">
<h4>Branches</h4>
<div id="branch_container"></div>
</div>
<h4>Tasks</h4>
<ul id="task_list" class="grid observe-empty-state"></ul>
<h4 class="empty-state padding-block-1">No tasks added yet, tasks will appear here after
adding
them.</h4>
<button id="add_task" class="button " onclick="addPlaceholderTask()">
<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" />
<path <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
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> </svg>
Add intern Add task
</button> </button>
<ul id="admin_page__intern_list" class="list-container observe-empty-state"></ul> <ul id="task_context" class="hidden">
<h4 class="empty-state">No interns added</h4> <li 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 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 onclick="showNewBranchPopup()" tabindex="0" class="interact">
<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.105 15.21A3.001 3.001 0 1 1 5 15.17V8.83a3.001 3.001 0 1 1 2 0V12c.836-.628 1.874-1 3-1h4a3.001 3.001 0 0 0 2.895-2.21 3.001 3.001 0 1 1 2.032.064A5.001 5.001 0 0 1 14 13h-4a3.001 3.001 0 0 0-2.895 2.21zM6 17a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
</svg>
Create new Branch
</li>
</ul>
</section> </section>
<section class="flex flex-direction-column hidden"> </section>
<strip-select id="request_type_selector" class="margin-left-auto margin-block-0-5"> <section id="interns_container" class="flex flex-direction-column hidden">
<strip-option value="task" selected>Task</strip-option> <button class="button justify-content-start margin-block-0-5"
<strip-option value="intern">Internship</strip-option> onclick="openPopup('add_intern_popup')">
</strip-select> <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
<ul id="requests_list" class="list-container observe-empty-state"></ul> width="24" height="24">
<h4 class="empty-state">No pending requests</h4>
</section>
</div>
</section>
<section id="project_editing_panel" class="hidden">
<div id="project_details_wrapper"
class="flex flex-direction-column gap-1 margin-bottom-2 align-items-start">
<a class="button icon-only hide-on-desktop" href="#/admin_page">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"></path>
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
</svg>
</a>
<div class="flex flex-wrap align-items-start">
<h2 id="editing_panel__title" data-editable></h2>
<button class="button button--small button--transparent admin-option"
title="Edit this title" onclick="makeEditable(this.previousElementSibling)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />
</svg>
</button>
</div>
<div class="flex flex-wrap align-items-start">
<p id="editing_panel__description" data-editable></p>
<button class="button button--small button--transparent admin-option"
title="Edit this description" onclick="makeEditable(this.previousElementSibling)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />
</svg>
</button>
</div>
</div>
<div class="grid gap-0-3">
<h4>Branches</h4>
<div id="branch_container"></div>
</div>
<h4>Tasks</h4>
<ul id="task_list" class="grid observe-empty-state"></ul>
<h4 class="empty-state padding-block-1">No tasks added yet, tasks will appear here after adding
them.</h4>
<button id="add_task" class="button " onclick="addPlaceholderTask()">
<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="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
</svg>
Add task
</button>
<ul id="task_context" class="hidden">
<li 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 fill="none" d="M0 0h24v24H0z" />
<path <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" /> 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> </svg>
Edit title Add intern
</li> </button>
<li tabindex="0" class="interact" onclick="toggleEditing()"> <ul id="admin_page__intern_list" class="list-container observe-empty-state"></ul>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" <h4 class="empty-state">No interns added</h4>
height="24"> </section>
<path fill="none" d="M0 0h24v24H0z" /> <section class="flex flex-direction-column hidden">
<path <strip-select id="request_type_selector" class="margin-left-auto margin-block-0-5">
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" /> <strip-option value="task" selected>Task</strip-option>
</svg> <strip-option value="intern">Internship</strip-option>
Edit description </strip-select>
</li> <ul id="requests_list" class="list-container observe-empty-state"></ul>
<li onclick="showNewBranchPopup()" tabindex="0" class="interact"> <h4 class="empty-state">No pending requests</h4>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" </section>
height="24"> </div>
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M7.105 15.21A3.001 3.001 0 1 1 5 15.17V8.83a3.001 3.001 0 1 1 2 0V12c.836-.628 1.874-1 3-1h4a3.001 3.001 0 0 0 2.895-2.21 3.001 3.001 0 1 1 2.032.064A5.001 5.001 0 0 1 14 13h-4a3.001 3.001 0 0 0-2.895 2.21zM6 17a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
</svg>
Create new Branch
</li>
</ul>
</section>
<button class="fab admin-option" onclick="commitToChanges()">
<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="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
</button>
</section> </section>
<section id="updates_page" class="inner-page hidden"> <section id="updates_page" class="inner-page hidden">
<button class="button hide-on-desktop justify-self-end" onclick="toggleFilter()">Filter</button> <button class="button hide-on-desktop justify-self-end" onclick="toggleFilter()">Filter</button>
@ -661,31 +674,15 @@
<h4>FLO address</h4> <h4>FLO address</h4>
<sm-copy id="user_flo_id"></sm-copy> <sm-copy id="user_flo_id"></sm-copy>
</div> </div>
<div class="flex gap-0-5 flex-wrap"> <button id="logout" class="justify-self-start button button--danger" onclick="signOut()">
<button class="button" onclick="downloadCredentials()"> <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" <path fill="none" d="M0 0h24v24H0z" />
fill="#000000"> <path
<g> d="M4 18h2v2h12V4H6v2H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3zm2-7h7v2H6v3l-5-4 5-4v3z" />
<rect fill="none" height="24" width="24" /> </svg>
</g> Sign out
<g> </button>
<path
d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z" />
</g>
</svg>
Download credentials
</button>
<button id="logout" class="justify-self-start button button--danger" onclick="signOut()">
<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="M4 18h2v2h12V4H6v2H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3zm2-7h7v2H6v3l-5-4 5-4v3z" />
</svg>
Sign out
</button>
</div>
</section> </section>
<div class="grid gap-1 card"> <div class="grid gap-1 card">
<div class="grid gap-0-5"> <div class="grid gap-0-5">
@ -943,27 +940,86 @@
<!-- Templates --> <!-- Templates -->
<template id="placeholder_task_card_template"> <template id="placeholder_task_card_template">
<div class="temp-task grid gap-0-5"> <div class="temp-task grid gap-0-5">
<sm-input class="placeholder-task__title" placeholder="Title"></sm-input> <sm-form style="--gap: 0.5rem;">
<sm-textarea class="placeholder-task__description" placeholder="Description" rows="4"></sm-textarea> <sm-input class="temp-task__title" placeholder="Title" animate required></sm-input>
<div class="flex align-center gap-0-3"> <sm-textarea class="temp-task__description" placeholder="Description" rows="4" required>
<button class="button cancel-task-button"> </sm-textarea>
<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" <tags-input class="temp-task__links" placeholder="Related links(separate by comma)"></tags-input>
height="24"> <div class="grid gap-0-5" style="grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));">
<path fill="none" d="M0 0h24v24H0z" /> <sm-select class="temp-task__category" label="Category: ">
<path <sm-option value="creative-writing" selected>Creative Writing</sm-option>
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" /> <sm-option value="marketing">Marketing</sm-option>
</svg> <sm-option value="design">Design</sm-option>
Cancel <sm-option value="development">Development</sm-option>
</button> <sm-option value="social-media-management">Social Media Management</sm-option>
<button class="button button--primary add-task-button"> <sm-option value="video-making">Video Making</sm-option>
<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" </sm-select>
height="24"> <sm-input class="temp-task__max-slots flex-1" placeholder="Max slots available" type="number"
<path fill="none" d="M0 0h24v24H0z" /> animate>
<path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" /> </sm-input>
</svg> <div class="flex flex-1">
Add <sm-input class="temp-task__duration flex-1" placeholder="Duration" type="number"
</button> style="--border-radius: 0.5rem 0 0 0.5rem; border-right: thin solid rgba(var(--text-color), 0.3);"
</div> animate>
<svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<g>
<g>
<path
d="M15,1H9v2h6V1z M11,14h2V8h-2V14z M19.03,7.39l1.42-1.42c-0.43-0.51-0.9-0.99-1.41-1.41l-1.42,1.42 C16.07,4.74,14.12,4,12,4c-4.97,0-9,4.03-9,9s4.02,9,9,9s9-4.03,9-9C21,10.88,20.26,8.93,19.03,7.39z M12,20c-3.87,0-7-3.13-7-7 s3.13-7,7-7s7,3.13,7,7S15.87,20,12,20z" />
</g>
</g>
</g>
</svg>
</sm-input>
<sm-select class="temp-task__duration-type flex-shrink-0"
style="--select-border-radius: 0 0.5rem 0.5rem 0;">
<sm-option value="days" selected>Days</sm-option>
<sm-option value="months">Months</sm-option>
</sm-select>
</div>
<sm-input class="temp-task__reward flex-1" type="number" placeholder="Reward" animate>
<svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<g>
<rect fill="none" height="24" width="24"></rect>
</g>
<g>
<g>
<path
d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z">
</path>
</g>
</g>
</svg>
</sm-input>
</div>
<div class="flex align-center gap-0-3">
<button class="button cancel-task-button">
<svg class="icon margin-right-0-3" 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>
Cancel
</button>
<button type="submit" class="button button--primary add-task-button">
<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
</svg>
Add
</button>
</div>
</sm-form>
</div> </div>
</template> </template>
<script> <script>
@ -1343,11 +1399,11 @@
if (branch) { if (branch) {
renderBranchTasks() renderBranchTasks()
} }
getRef('admin_page__left').classList.add('hide-on-mobile') getRef('projects_container__left').classList.add('hide-on-mobile')
getRef('project_editing_panel').classList.remove('hidden') getRef('project_editing_panel').classList.remove('hidden')
} }
} else { } else {
getRef('admin_page__left').classList.remove('hide-on-mobile') getRef('projects_container__left').classList.remove('hide-on-mobile')
getRef('project_editing_panel').classList.add('hidden') getRef('project_editing_panel').classList.add('hidden')
history.replaceState(null, '', '#/admin_page') history.replaceState(null, '', '#/admin_page')
} }
@ -1636,6 +1692,14 @@
target.type = target.type === 'password' ? 'text' : 'password'; target.type = target.type === 'password' ? 'text' : 'password';
target.focusIn() target.focusIn()
} }
function filteredMap(array, mapFn) {
const result = [];
array.forEach((element, index) => {
const mapped = mapFn(element, index)
if (mapped) result.push(mapped)
})
return result;
}
</script> </script>
<script id="UI_functions"> <script id="UI_functions">
// Method object for creating various UI elements // Method object for creating various UI elements
@ -1646,33 +1710,30 @@
return html.for(ref, projectCode)`<a class="project-card flex align-center interact" title="Project information" href=${`#/${page}/project?id=${projectCode}&branch=mainLine`}>${projectName}</a>` return html.for(ref, projectCode)`<a class="project-card flex align-center interact" title="Project information" href=${`#/${page}/project?id=${projectCode}&branch=mainLine`}>${projectName}</a>`
}, },
taskCard(taskNo) { taskCard(taskNo) {
const { taskTitle, taskDescription } = RIBC.getTaskDetails(appState.params.id, appState.params.branch, taskNo) const projectId = appState.params.id.replaceAll('_', '-')
const branches = getAllBranches(appState.params.id) const taskDetails = { taskTitle, taskDescription, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(projectId, appState.params.branch, taskNo)
const frag = document.createDocumentFragment() const branches = getAllBranches(projectId)
for (const branch of branches) { const branchesButtons = filteredMap(branches, (branch) => {
const { branchName, parentBranch, startPoint, endPoint } = branch const { branchName, parentBranch, startPoint, endPoint } = branch
if (parentBranch === appState.params.branch && startPoint === taskNo) { if (parentBranch === appState.params.branch && startPoint === taskNo) {
frag.append( return render.branchButton({
render.branchButton({ projectId,
projectId: appState.params.id, branch: branchName,
branch: branchName, page: 'project_explorer'
page: 'project_explorer' })
})
)
} }
} })
const assignedInterns = RIBC.getAssignedInterns(appState.params.id, appState.params.branch, taskNo).filter(v => v) const assignedInterns = RIBC.getAssignedInterns(projectId, appState.params.branch, taskNo) || []
const assignedInternsCards = assignedInterns.map((internFloId) => render.assignedInternCard(internFloId)); const assignedInternsCards = filteredMap(assignedInterns, (internFloId) => render.assignedInternCard(internFloId));
const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, taskNo) const status = RIBC.getTaskStatus(projectId, appState.params.branch, taskNo)
let applyButton let applyButton
if (typeOfUser === 'intern' && !assignedInterns.includes(myFloID)) { if (typeOfUser === 'intern' && !assignedInterns.includes(myFloID)) {
console.log(assignedInterns, myFloID)
const taskRequests = RIBC.getTaskRequests(); const taskRequests = RIBC.getTaskRequests();
const hasApplied = [...taskRequests, ...sessionTaskRequests].find(({ projectCode, branch, task }) => { const hasApplied = [...taskRequests, ...sessionTaskRequests].find(({ projectCode, branch, task }) => {
return `${projectCode}_${branch}_${task}` === `${appState.params.id}_${appState.params.branch}_${taskNo}` return `${projectCode}_${branch}_${task}` === `${projectId}_${appState.params.branch}_${taskNo}`
}) })
applyButton = html` applyButton = html`
<button class="button apply-button" .dataset=${{ projectCode: appState.params.id, branch: appState.params.branch, taskNo }} ?disabled=${hasApplied}> <button class="button button--primary apply-button" .dataset=${{ projectCode: projectId, branch: appState.params.branch, taskNo }} ?disabled=${hasApplied}>
${hasApplied ? 'Applied' : 'Apply'} ${hasApplied ? 'Applied' : 'Apply'}
</button>`; </button>`;
} }
@ -1687,9 +1748,9 @@
<h4 class="timeline-task__title capitalize">${taskTitle}</h4> <h4 class="timeline-task__title capitalize">${taskTitle}</h4>
${applyButton} ${applyButton}
</div> </div>
<div class="assigned-interns">${assignedInternsCards}</div> ${assignedInternsCards.length ? html`<div class="assigned-interns">${assignedInternsCards}</div>` : ''}
<p class="timeline-task__description">${taskDescription}</p> <p class="timeline-task__description">${taskDescription}</p>
<div class="task__branch_container">${frag}</div> ${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''}
</div> </div>
</div> </div>
`; `;
@ -1741,10 +1802,10 @@
</li>`; </li>`;
}, },
branchButton(obj = {}) { branchButton(obj = {}) {
const { projectId, branch, page, innerHTML } = obj const { projectId, branch, page, active = false } = obj
return html.node` return html`
<a class="branch-button" href=${`#/${page}/project?id=${projectId}&branch=${branch}`}> <a class=${`branch-button ${active ? 'branch-button--active' : ''}`} href=${`#/${page}/project?id=${projectId}&branch=${branch}`}>
${innerHTML ? html`${innerHTML}` : branch} ${branch}
</a> </a>
`; `;
}, },
@ -1764,26 +1825,23 @@
}, },
taskListItem(taskNo, ref) { taskListItem(taskNo, ref) {
const assignedInterns = RIBC.getAssignedInterns(appState.params.id, appState.params.branch, taskNo) const assignedInterns = RIBC.getAssignedInterns(appState.params.id, appState.params.branch, taskNo)
const frag = document.createDocumentFragment() const taskDetails = { taskTitle, taskDescription, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(appState.params.id, appState.params.branch, taskNo)
const { taskTitle, taskDescription } = RIBC.getTaskDetails(appState.params.id, appState.params.branch, taskNo)
const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, taskNo) const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, taskNo)
let assignedInternsCards let assignedInternsCards
if (assignedInterns) { if (assignedInterns) {
assignedInternsCards = assignedInterns.filter(v => v).map((internFloId) => render.assignedInternCard(internFloId, true)) assignedInternsCards = filteredMap(assignedInterns, (internFloId) => render.assignedInternCard(internFloId, true))
} }
const branches = getAllBranches(appState.params.id) const branches = getAllBranches(appState.params.id)
for (const branch of branches) { const branchesButtons = filteredMap(branches, (branch) => {
const { branchName, parentBranch, startPoint, endPoint } = branch const { branchName, parentBranch, startPoint, endPoint } = branch
if (parentBranch === appState.params.branch && startPoint === taskNo) { if (parentBranch === appState.params.branch && startPoint === taskNo) {
frag.append( return render.branchButton({
render.branchButton({ projectId: appState.params.id,
projectId: appState.params.id, branch: branchName,
branch: branchName, page: 'admin_page'
page: 'admin_page' })
})
)
} }
} })
return html.for(ref, `${appState.params.id}_${appState.params.branch}_${taskNo}`)` return html.for(ref, `${appState.params.id}_${appState.params.branch}_${taskNo}`)`
<li class="task-list-item" .dataset=${{ taskId: taskNo }}> <li class="task-list-item" .dataset=${{ taskId: taskNo }}>
<div class="flex align-center gap-0-3"> <div class="flex align-center gap-0-3">
@ -1809,7 +1867,7 @@
${assignedInternsCards} ${assignedInternsCards}
</div> </div>
<p class="task-description" data-editable>${taskDescription}</p> <p class="task-description" data-editable>${taskDescription}</p>
<div class="task__branch_container">${frag}</div> <div class="task__branch_container">${branchesButtons}</div>
</li> </li>
`; `;
}, },
@ -2088,47 +2146,37 @@
// 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 { projectName, projectDescription } = RIBC.getProjectDetails(projectId); const { projectName, projectDescription } = RIBC.getProjectDetails(projectId);
getRef('project_explorer__project_title').textContent = projectName; // project name getRef('project_explorer__project_title').textContent = projectName; // project name
getRef('project_explorer__project_description').textContent = projectDescription; getRef('project_explorer__project_description').textContent = projectDescription;
getRef('project_explorer__project_updates').href = `#/updates_page?projectId=${projectId}&internId=all`; getRef('project_explorer__project_updates').href = `#/updates_page?projectId=${projectId}&internId=all`;
getRef('explorer_branch_container').innerHTML = ``; renderBranches();
RIBC.getProjectBranches(projectId).forEach((branch) => {
frag.append(render.branchButton({ projectId, branch, page: 'project_explorer' }))
})
getRef('explorer_branch_container').append(frag);
} }
let currentTask = ''; let currentTask = '';
function renderAdminProjectView(projectId) { function renderAdminProjectView(projectId) {
const allProjects = getRef('admin_page__project_list').querySelectorAll('.project-card'); const allProjects = getRef('admin_page__project_list').querySelectorAll('.project-card');
const branchList = document.querySelectorAll('.branch-button');
const frag = document.createDocumentFragment();
allProjects.forEach(project => project.classList.remove('project-card--active')) allProjects.forEach(project => project.classList.remove('project-card--active'))
const targetProject = Array.from(allProjects).find(project => project.getAttribute('href').includes(projectId)) const targetProject = Array.from(allProjects).find(project => project.getAttribute('href').includes(projectId))
if (targetProject) if (targetProject)
targetProject.classList.add('project-card--active') targetProject.classList.add('project-card--active')
getRef('branch_container').innerHTML = '';
branchList.forEach((branch) => {
branch.classList.remove('active-branch')
})
const { projectName, projectDescription } = RIBC.getProjectDetails(projectId); const { projectName, projectDescription } = RIBC.getProjectDetails(projectId);
getRef('editing_panel__title').textContent = projectName; getRef('editing_panel__title').textContent = projectName;
getRef('editing_panel__description').textContent = projectDescription; getRef('editing_panel__description').textContent = projectDescription;
RIBC.getProjectBranches(appState.params.id).forEach((branch) => { renderBranches()
frag.append(render.branchButton({ projectId: appState.params.id, branch, page: 'admin_page' })) }
function renderBranches() {
const { id: projectId, branch } = appState.params
const taskListContainer = appState.openPage === 'admin_page' ? 'branch_container' : 'explorer_branch_container';
const branchList = filteredMap(RIBC.getProjectBranches(appState.params.id), (branch) => {
return render.branchButton({ projectId, branch, page: appState.openPage, active: branch === appState.params.branch })
}) })
getRef('branch_container').appendChild(frag) renderElem(getRef(taskListContainer), html`${branchList}`)
} }
function renderBranchTasks() { function renderBranchTasks() {
const { id: projectId, branch } = appState.params const { id: projectId, branch } = appState.params
const taskListContainer = appState.openPage === 'admin_page' ? 'task_list' : 'explorer_task_list'; const taskListContainer = appState.openPage === 'admin_page' ? 'task_list' : 'explorer_task_list';
let branchTasks = RIBC.getProjectMap(appState.params.id)[appState.params.branch]; let branchTasks = RIBC.getProjectMap(appState.params.id)[appState.params.branch];
getRef(appState.openPage).querySelectorAll('.branch-button').forEach((branchButton) => {
branchButton.classList.remove('active-branch')
})
getRef(appState.openPage).querySelector(`.branch-button[href="#/${appState.openPage}/project?id=${projectId}&branch=${branch}"]`).classList.add('active-branch')
if (branchTasks[1] && !taskListContainer === 'task_list') { if (branchTasks[1] && !taskListContainer === 'task_list') {
getRef(taskListContainer).textContent = "No tasks added yet, Please explore other projects" getRef(taskListContainer).textContent = "No tasks added yet, Please explore other projects"
} else { } else {
@ -2150,19 +2198,15 @@
function getAllBranches(projectId) { function getAllBranches(projectId) {
const projectMap = RIBC.getProjectMap(projectId) const projectMap = RIBC.getProjectMap(projectId)
const projectBranches = RIBC.getProjectBranches(projectId) const projectBranches = RIBC.getProjectBranches(projectId)
const branchPoints = [] return projectBranches.slice(1).map((branchName, index) => {
projectBranches.forEach((branch, index) => { const [parentBranch, , startPoint, endPoint] = projectMap[branchName]
if (index > 0) { return {
const [parentBranch, , startPoint, endPoint] = projectMap[branch] branchName,
branchPoints.push({ parentBranch,
branchName: branch, startPoint,
parentBranch, endPoint
startPoint,
endPoint
})
} }
}) })
return branchPoints
} }
let currentViewIndex = 0; let currentViewIndex = 0;
@ -2269,18 +2313,34 @@
} }
else if (e.target.closest('.add-task-button')) { else if (e.target.closest('.add-task-button')) {
const card = e.target.closest('.temp-task') const card = e.target.closest('.temp-task')
const titleContent = card.querySelector('.placeholder-task__title').value.trim(), const taskTitle = card.querySelector('.temp-task__title').value.trim();
descriptionContent = card.querySelector('.placeholder-task__description').value.trim(); const taskDescription = card.querySelector('.temp-task__description').value.trim();
if (titleContent === '') { const links = card.querySelector('.temp-task__links').value
notify('Please enter task title', 'error') const category = card.querySelector('.temp-task__category').value.trim();
return const maxSlots = parseInt(card.querySelector('.temp-task__max-slots').value.trim());
const duration = parseInt(card.querySelector('.temp-task__duration').value.trim());
const durationType = card.querySelector('.temp-task__duration-type').value.trim();
const reward = parseInt(card.querySelector('.temp-task__reward').value.trim());
if (taskTitle === '') {
return notify('Please enter task title', 'error')
} }
if (descriptionContent === '') { if (taskDescription === '') {
notify('Please enter description of the task', 'error') return notify('Please enter description of the task', 'error')
return
} }
const taskDetails = {
taskTitle,
taskDescription,
links,
category,
maxSlots,
duration,
durationType,
reward
}
console.log(taskDetails)
const taskNo = RIBC.admin.addTaskInMap(appState.params.id, appState.params.branch) const taskNo = RIBC.admin.addTaskInMap(appState.params.id, appState.params.branch)
RIBC.admin.editTaskDetails({ taskTitle: titleContent, taskDescription: descriptionContent }, appState.params.id, appState.params.branch, taskNo) RIBC.admin.editTaskDetails(taskDetails, appState.params.id, appState.params.branch, taskNo)
RIBC.admin.putTaskStatus('incomplete', appState.params.id, appState.params.branch, taskNo) RIBC.admin.putTaskStatus('incomplete', appState.params.id, appState.params.branch, taskNo)
card.remove() card.remove()
renderBranchTasks() renderBranchTasks()
@ -2292,7 +2352,7 @@
const placeholderTask = getRef('placeholder_task_card_template').content.cloneNode(true) const placeholderTask = getRef('placeholder_task_card_template').content.cloneNode(true)
getRef('task_list').append(placeholderTask) getRef('task_list').append(placeholderTask)
getRef('task_list').lastElementChild.scrollIntoView({ behavior: 'smooth' }) getRef('task_list').lastElementChild.scrollIntoView({ behavior: 'smooth' })
getRef('task_list').querySelector('.placeholder-task__title').focusIn() getRef('task_list').querySelector('.temp-task__title').focusIn()
getRef('add_task').classList.add('hidden') getRef('add_task').classList.add('hidden')
} }
function commitToChanges() { function commitToChanges() {
@ -2358,7 +2418,7 @@
const mergePoint = (userMergePoint === '') ? startPoint : parseInt(userMergePoint) const mergePoint = (userMergePoint === '') ? startPoint : parseInt(userMergePoint)
const branchName = RIBC.admin.addBranch(appState.params.id, appState.params.branch, startPoint, mergePoint); const branchName = RIBC.admin.addBranch(appState.params.id, appState.params.branch, startPoint, mergePoint);
notify(`Branch added ${branchName}`, 'success') notify(`Branch added ${branchName}`, 'success')
currentTask.querySelector('.task__branch_container').append(render.branchButton({ projectId: appState.params.id, branch: branchName, page: 'admin_page' })) renderBranches()
closePopup() closePopup()
} }
@ -2922,17 +2982,6 @@
} }
}); });
} }
async function downloadCredentials() {
try {
if (floDapps.user.id) {
const privKey = await floDapps.user.private;
generateTxtFile(`FLO address: ${floDapps.user.id}\n\nFLO Private Key: ${privKey} `, 'FLO credentials');
}
} catch (err) {
notify(err, 'error');
}
}
function downloadGeneratedCredentials() { function downloadGeneratedCredentials() {
const floAddress = getRef('generated_flo_address').value; const floAddress = getRef('generated_flo_address').value;
const privKey = getRef('generated_private_key').value; const privKey = getRef('generated_private_key').value;

6
scripts/ribc.js
View File

@ -4,13 +4,13 @@
Ribc.init = function (isSubAdmin = false) { Ribc.init = function (isSubAdmin = false) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
Promise.all([refreshObjectData(), refreshGeneralData(isSubAdmin)]) Ribc.refreshGeneralData(isSubAdmin)
.then(results => resolve(results)) .then(results => resolve(results))
.catch(error => reject(error)) .catch(error => reject(error))
}) })
} }
function refreshObjectData() { Ribc.refreshObjectData = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
floCloudAPI.requestObjectData("RIBC").then(result => { floCloudAPI.requestObjectData("RIBC").then(result => {
if (!floGlobals.appObjects.RIBC) if (!floGlobals.appObjects.RIBC)
@ -28,7 +28,7 @@
}) })
} }
function refreshGeneralData(isSubAdmin) { Ribc.refreshGeneralData = (isSubAdmin) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var generalDataList = ["InternUpdates"], var generalDataList = ["InternUpdates"],
subAdminOnlyList = [], subAdminOnlyList = [],