Skip to content

Commit

Permalink
Merge pull request #157 from icefoganalytics/test
Browse files Browse the repository at this point in the history 
ECert UI format improvements
  • Loading branch information
@datajohnson
datajohnson authored Sep 26, 2023
2 parents 42d400f + 953dc17 commit 3fc270e
Show file tree
Hide file tree
Showing 9 changed files with 404 additions and 334 deletions.
4 changes: 2 additions & 2 deletions src/web/src/assets/yk-style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ a {
.v-main .v-btn,
.v-dialog__content .v-btn {
text-transform: none;
color: #ffffff;
/* color: #ffffff; */
/* border: 1px #000 solid !important; */
/* margin: 15px 0; */
text-decoration: none;
margin: 15px 0;
box-shadow: none;
font-size: 16px;
font-weight: 400;
Expand Down
189 changes: 107 additions & 82 deletions src/web/src/components/adminHome/SideBarAdmin.vue
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,125 @@
<template>
<v-navigation-drawer
permanent
clipped
:app="show"
:class="{ 'd-none': !show }"
color="bgAdminBar"
>
<v-list-item>
<v-list-item-content class="my-5 d-flex justify-center align-center">
<v-list-item-title class="text-h6 ml-5">
Administration
</v-list-item-title>
<v-list-item-subtitle class="ml-5">
SFA
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-navigation-drawer permanent clipped :app="show" :class="{ 'd-none': !show }" color="bgAdminBar" width="350">
<v-list-item>
<v-list-item-content class="my-5 d-flex justify-center align-center">
<v-list-item-title class="text-h6 ml-5">
Administration
</v-list-item-title>
<v-list-item-subtitle class="ml-5">
SFA
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>

<div class="line"></div>
<div class="line"></div>

<v-list
dense
nav
<v-list dense nav>
<v-list-item
v-for="(item, index) in itemsList"
:key="item.title"
link
:to="item.path"
:light="true"
@click="setPosition(index)"
color="rgba(0,0,0,0)"
>
<v-list-item
v-for="item, index in itemsList"
:key="item.title"
link
:to="item.path"
:light="true"
@click="setPosition(index)"
color="rgba(0,0,0,0)"
>
<template v-slot:default="props">
<div class="flex-column" id="itemsContainer">
<div class="d-flex justify-center align-center w-100" id="itemsList">
<v-list-item-icon class="headline my-5 ml-5">
<!-- <v-icon>{{ item.icon }}</v-icon> -->
<font-awesome-icon :icon="item.icon" />
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">{{ item.title }}</v-list-item-title>
</v-list-item-content>
</div>
<div v-if=" item?.subItems?.length && position === index" id="sub-list">
<div v-if="item?.subItems?.length && position === index" id="sub-list">
<v-list-item
v-for="itm,idx in item.subItems"
:key="idx"
link
:to="itm.path"
@click="setCurrentLink(index, itm.path)"
>
<template v-slot:default="vals">
<v-list-item-title id="sub-list-item" class="ml-5 subtitle-3">{{ itm.title}}</v-list-item-title>
</template>
v-for="(itm, idx) in item.subItems"
:key="idx"
link
:to="itm.path"
@click="setCurrentLink(index, itm.path)"
>
<template v-slot:default="vals">
<v-list-item-title id="sub-list-item" class="ml-5 subtitle-3">{{ itm.title }}</v-list-item-title>
</template>
</v-list-item>
</div>
</div>
</template>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>

<script>
import { mdiTownHall } from '@mdi/js';
import SubRoutesSideBar from './SubRoutesSideBar';
import SubRoutesSideBar from "./SubRoutesSideBar";
export default {
name: "SideBarAdmin",
data () {
data() {
return {
drawer: true,
items: [
{ icon: 'fa-solid fa-users', title: 'Students', path:'/administration/students',
subItems: SubRoutesSideBar.students},
{ icon: 'fa-solid fa-school', title: 'Institutions', path:'/administration/institutions',
subItems: SubRoutesSideBar.institutions},
{ icon: 'fa-solid fa-location-pin', title: 'Location', path:'/administration/province', subItems: SubRoutesSideBar.location},
{ icon: 'fa-solid fa-list-check', title: 'Assessment', path:'/administration/assessment-type', subItems: SubRoutesSideBar.assessment},
{ icon: 'fa-solid fa-clipboard-check', title: 'Application', path:'/administration/study-field', subItems: SubRoutesSideBar.application},
{ icon: 'fa-solid fa-calendar-days', title: 'Academic Year', path:''},
{ icon: 'fa-solid fa-user', title: 'Officer Table', path:'/administration/officers'},
{ icon: 'fa-solid fa-file-import', title: 'CSL MSFAA Receive', path:'/administration/csl-msfaa-receive'},
{ icon: 'fa-solid fa-comments', title: 'CSL Entitlement Feedback', path:'/administration/csl-entitlement-feedback'},
{ icon: 'fa-solid fa-file', title: 'CSL Certificate Audit Report', path:'/administration/csl-certificate-audit-report'},
{ icon: 'fa-solid fa-file-export', title: 'CSL Certificate Export', path:'/administration/csl-certificate-export'},
{ icon: 'fa-solid fa-paper-plane', title: 'CSL MSFAA Send', path:'/administration/csl-msfaa-send'},
{ icon: 'fa-solid fa-file-shield', title: 'CSL Restricted Data', path:'/administration/csl-restricted-data'},
{ icon: 'fa-solid fa-money-check', title: 'Cheque Req List', path:'/administration/cheque-req-list'},
{ icon: 'fa-solid fa-chart-simple', title: 'Reports', path:'/administration/reports'},
{
icon: "fa-solid fa-users",
title: "Students",
path: "/administration/students",
subItems: SubRoutesSideBar.students,
},
{
icon: "fa-solid fa-school",
title: "Institutions",
path: "/administration/institutions",
subItems: SubRoutesSideBar.institutions,
},
{
icon: "fa-solid fa-location-pin",
title: "Location",
path: "/administration/province",
subItems: SubRoutesSideBar.location,
},
{
icon: "fa-solid fa-list-check",
title: "Assessment",
path: "/administration/assessment-type",
subItems: SubRoutesSideBar.assessment,
},
{
icon: "fa-solid fa-clipboard-check",
title: "Application",
path: "/administration/study-field",
subItems: SubRoutesSideBar.application,
},
{ icon: "fa-solid fa-calendar-days", title: "Academic Year", path: "" },
{ icon: "fa-solid fa-user", title: "Officer Table", path: "/administration/officers" },
{ icon: "fa-solid fa-file-import", title: "CSL MSFAA Receive", path: "/administration/csl-msfaa-receive" },
{
icon: "fa-solid fa-comments",
title: "CSL Entitlement Feedback",
path: "/administration/csl-entitlement-feedback",
},
{
icon: "fa-solid fa-file",
title: "CSL Certificate Audit Report",
path: "/administration/csl-certificate-audit-report",
},
{
icon: "fa-solid fa-file-export",
title: "CSL Certificate Export",
path: "/administration/csl-certificate-export",
},
{ icon: "fa-solid fa-paper-plane", title: "CSL MSFAA Send", path: "/administration/csl-msfaa-send" },
{ icon: "fa-solid fa-file-shield", title: "CSL Restricted Data", path: "/administration/csl-restricted-data" },
{ icon: "fa-solid fa-money-check", title: "Cheque Req List", path: "/administration/cheque-req-list" },
{ icon: "fa-solid fa-chart-simple", title: "Reports", path: "/administration/reports" },
],
currentLink: null,
position: null
}
},
position: null,
};
},
props: {
show: Boolean,
},
Expand All @@ -104,52 +129,52 @@ export default {
setA.active = true;
},
setCurrentLink(idx, path) {
this.currentLink = path;
this.position = idx;
this.currentLink = path;
this.position = idx;
},
setPosition(idx) {
this.position = idx;
this.currentLink = null
this.position = idx;
this.currentLink = null;
},
},
computed: {
itemsList() {
const newItems = JSON.parse(JSON.stringify([...this.items]));
if(this.position >= 0 && this.currentLink) {
if (this.position >= 0 && this.currentLink) {
newItems[this.position].path = this.currentLink;
}
return newItems;
},
}
};
},
};
</script>

<style scoped>
.line {
box-sizing: border-box;
height: 2px;
width: 100%;
border: 1px solid #F3B228;
border: 1px solid #f3b228;
}
#sub-list .v-list-item--active{
#sub-list .v-list-item--active {
background: transparent !important;
color: transparent !important;
}
#itemsList {
color: #212121 !important;
}
#itemsContainer{
#itemsContainer {
width: 100%;
}
#sub-list .v-list-item--active #sub-list-item{
#sub-list .v-list-item--active #sub-list-item {
background: transparent !important;
color: #0097a9 !important;
color: #0097a9 !important;
}
#sub-list #sub-list-item{
#sub-list #sub-list-item {
background: transparent !important;
color: #8A8885 !important;
color: #8a8885 !important;
}
</style>
</style>
Loading

0 comments on commit 3fc270e

Please sign in to comment.