fix profile
This commit is contained in:
@@ -36,7 +36,7 @@
|
||||
<td scope="col">Harga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5" class="text-center">Tiada Data</td>
|
||||
<td colspan="5" class="text-center text-500">Tiada Data</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<td>Tarikh</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="text-center">Tiada Data</td>
|
||||
<td colspan="4" class="text-center text-500">Tiada Data</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<td>Masa Tamat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="100" class="text-center">Tiada Data</td>
|
||||
<td colspan="100" class="text-center text-500">Tiada Data</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,69 +1,93 @@
|
||||
<template>
|
||||
<the-template>
|
||||
<base-card>
|
||||
<div v-if="loading" class="fadein animation-duration-400">
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
class="flex align-items-center justify-content-center container-height"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="container">
|
||||
<h5>PROFIL</h5>
|
||||
<div class="card-body">
|
||||
<!-- <img
|
||||
src="../../assets/profile.png"
|
||||
alt="profile photo"
|
||||
style="width: 225px; height: 230px"
|
||||
/> -->
|
||||
<div v-if="this.status">
|
||||
<div class="row justify-content-center mt-4 mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Nama
|
||||
</div>
|
||||
<div else style="min-height: 70vh">
|
||||
<div v-if="status">
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
align-items-center
|
||||
justify-content-center
|
||||
container-height
|
||||
fadein
|
||||
animation-duration-400
|
||||
"
|
||||
>
|
||||
<Card>
|
||||
<template #title>
|
||||
<div class="text-center">Profil Pengguna</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="text-center">
|
||||
<Avatar icon="pi pi-user" size="xlarge" />
|
||||
<div class="mt-3">
|
||||
<div
|
||||
class="
|
||||
grid
|
||||
col-11 col-offset-1
|
||||
lg:col-8 lg:col-offset-2
|
||||
justify-content-center
|
||||
"
|
||||
>
|
||||
<div class="col-12 lg:col-5 text-start text-400">Nama</div>
|
||||
<div class="col-12 lg:col-6 text-start value-form">
|
||||
{{ data.name }}
|
||||
</div>
|
||||
<div class="col-12 lg:col-5 text-start text-400">
|
||||
Username
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 text-start value-form">
|
||||
{{ data.username }}
|
||||
</div>
|
||||
<div class="col-12 lg:col-5 text-start text-400">
|
||||
No Kad Pengenalan
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 text-start value-form">
|
||||
{{ data.nokp }}
|
||||
</div>
|
||||
<div class="col-12 lg:col-5 text-start text-400">
|
||||
No Tel Bimbit
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 text-start value-form">
|
||||
{{ data.notelbimbit }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.name }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Username
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.username }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
No Kad Pengenalan
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.nokp }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
No Tel Bimbit
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.notelbimbit }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Front IC
|
||||
</div>
|
||||
<div class="col-5 text_border" style="height: 200px">
|
||||
{{ data.filename }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Rear IC
|
||||
</div>
|
||||
<div class="col-5 text_border" style="height: 200px">
|
||||
{{ data_2.filename }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>Tiada Data</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</base-card>
|
||||
<div v-else>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
align-items-center
|
||||
justify-content-center
|
||||
container-height
|
||||
fadein
|
||||
animation-duration-400
|
||||
"
|
||||
>
|
||||
<div class="grid justify-content-center">
|
||||
<div class="col-12 mb-4 text-center">
|
||||
<i class="pi pi-discord text-8xl text-400"></i>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<span class="text-400">Profil tidak lengkap.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</the-template>
|
||||
</template>
|
||||
|
||||
@@ -100,7 +124,6 @@ export default {
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.status = false;
|
||||
console.log(response.data.message);
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
@@ -114,14 +137,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text_border {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
.container-height {
|
||||
min-height: 70vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
.value-form {
|
||||
border: 1px solid #ced4da;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -36,6 +36,7 @@ import RadioButton from 'primevue/radiobutton';
|
||||
import Accordion from 'primevue/accordion';
|
||||
import AccordionTab from 'primevue/accordiontab';
|
||||
import Dialog from 'primevue/dialog';
|
||||
import Avatar from 'primevue/avatar';
|
||||
|
||||
import TheTemplate from './components/layouts/TheTemplate.vue'
|
||||
import BaseCard from './components/base/BaseCard.vue'
|
||||
@@ -67,6 +68,7 @@ app.component('RadioButton', RadioButton);
|
||||
app.component('Accordion', Accordion);
|
||||
app.component('AccordionTab', AccordionTab);
|
||||
app.component('Dialog', Dialog);
|
||||
app.component('Avatar', Avatar);
|
||||
|
||||
app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
|
||||
// app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');
|
||||
|
||||
Reference in New Issue
Block a user