Faculty

{source}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.vsu-thumbnail {
display: relative;
min-width: 384px;
min-height: 288px;
width: auto;
height: auto;
}
.btn-vsu {
color: #090; display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
}
.brand-header {
background-color: #004101;
color: palegoldenrod;
}
.brand-font-body {
font-family: 'Roboto';
font-weight: 300;
}
.brand-font-header {
font-family: 'Montserrat';
font-weight: 400;
background-color: #004101;
color: white;
}
.panel-vsu {
padding: 15px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
box-shadow: 0px 0px 13px -1px rgb(0 0 0 / 23%);
display: flex;
flex-direction: column
}
.panel-heading.panel-custom {
padding: 10px 15px;
margin: -15px -15px 15px;
font-size: 17.5px;
font-weight: 500;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
background-color: #004101;
color: palegoldenrod;
}
.card-img {
display: block;
object-fit: cover;
max-width: 100%;
max-height: 100%;
margin-right: auto;
margin-left: auto;
width: 90%;
padding-bottom: 13px;
}
.form-container {
display: flex;
flex-flow: row wrap;
padding-bottom: 7px;
padding-top: 3px;
}
.form-container .form-item {
margin-bottom: 5px;
margin-top: 5px;
}
.form-container .pull-right {
margin-left: auto;
}
.form-container .pull-left {
margin-right: auto;
}
.hero-vsu {
padding: 60px;
font-size: 18px;
font-weight: 200;
line-height: 30px;
color: #fdc530;
background-color: #004101;
/* -webkit-border-radius: 6px;
-moz-border-radius: 6px; */
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.f-inline {
display: flex;
}
.f-inline-list {
margin-left: 10px;
}
.name {
line-height: 70px;
}
.table-vsu {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0px 0px 13px -1px rgb(0 0 0 / 23%);
border: 1px solid #52a74a24;
}
.thumbs {
width: 70px;
height: 70px;
position: relative;
overflow: hidden;
border-radius: 50%;
}

.dean-thumbs {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
</style>

<div id="faculty" class="brand-font-body">
<div v-if="showTable">
<div class="animate__animated animate__fadeIn">
<section class="container-fluid">
<!-- <div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs" v-for="college in allColleges">
<li><a :href="# + college.id" data-toggle="tab">{{ college.unit }}</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div> -->
</section>
</div>
</div>
<div v-else>
<faculty-details :faculty="facultyDetails" v-on:toggle_table="toggleTable"></faculty-details>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

const uri = 'https://api.hris.vsu.edu.ph/api/vsu-site/directory/faculty'

new Vue({
el: "#faculty",
data () {
return {
allData: [],
college: null,
colleges: [],
dean: [],
department: '',
deptHead: '',
faculty: [],
facultyDetails: {
name: '',
department: '',
designation: '',
position: '',
email: '',
mobile: '',
tel: '',
thumbnail: '',
},
facultySearch: '',
meta: {
page: 1,
per_page: 12,
total: 0
},
pagination: {
count: 0
},
showTable: true,
unit: [],
validation: {
empty: false,
errored: false,
loading: true
},
url: ''
}
},
created() {
this.searchData()
},
computed: {
sortedFaculty(){
return this.faculty.sort((a, b) => { a.realname - b.realname});
}
},
methods: {
nextPage() {
this.meta.page = (Number(this.meta.page) + 1)
this.facultyData()
},
prevPage() {
this.meta.page = (Number(this.meta.page) - 1)
this.facultyData()
},
searchData() {
this.url = uri + '?per_page=10000' + '&term='
axios.get(this.url)
.then(response => {
const isDataAvailable = response.data
this.meta = isDataAvailable.meta
this.allData = isDataAvailable.personnel
this.pagination.count = Math.ceil(this.meta.total / this.meta.per_page)
this.meta.page = this.meta.page > this.pagination.count ? 1 : this.meta.page
})
.catch(error => {
console.log(error)
this.validation.errored = true
success = false
})
.finally(() => {
let data = []
/* this.allData.filter( item => {
data.push({ id: item.unit.id,
unit: item.unit.fullname
}
)
}) */
let known = new Set()
data = this.allData.map((item) => {
return {
id: item.unit.id,
unit: item.unit.fullname
}
}).filter(item => !known.has(item.unit) && known.add(item.unit))

console.log(data)
// this.colleges = [... new Set(data)]
// console.log(this.colleges)
this.validation.loading = false
})
},
displayDetails (name) {
this.faculty.filter((item) => {
if (item.realname.includes(name)){
this.facultyDetails = {
name: item.realname,
department: item.unit.fullname,
designation: item.designation,
position: item.academic_rank.name,
email: item.email,
mobile: item.mobile,
tel: item.telephone,
thumbnail: item.avatar
}
this.toggleTable(false)
}
})
},
search() {
this.allData.filter((item) => {
if (item.unit.fullname.includes(this.college) && item.designation.includes('College Dean')){
this.dean = {
name: item.realname,
department: item.unit.fullname,
designation: item.designation,
rank: item.academic_rank.name,
email: item.email,
thumbnail: item.avatar
}
}
else {
console.log(item)
}
})
},
toggleTable (bol) {
this.showTable = bol;
}
},
watch: {
meta: {
handler(val){
if ( val.total !== 0 ){
this.validation.empty = false
}
else {
this.validation.empty = true
}
},
deep: true
}
}
})
</script>{/source}