148 lines
3.9 KiB
Vue
148 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
// import { ref } from 'vue'
|
|
// import dataSample from '~/assets/data/coba.json'
|
|
const cari = ref()
|
|
const practitionerlist = ref([])
|
|
const loading = ref(false)
|
|
const data = async () => {
|
|
try {
|
|
loading.value= true
|
|
const response = await fetch("/api/practitioner/list")
|
|
const data = await response.json();
|
|
// console.log(data)
|
|
// console.log(response)
|
|
practitionerlist.value = data
|
|
// console.log(practitioners.value)
|
|
} catch (error) {
|
|
console.log(error)
|
|
}finally{
|
|
loading.value=false
|
|
}
|
|
}
|
|
onMounted(() =>{
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
}, 2000);
|
|
loading.value= true
|
|
data()
|
|
})
|
|
const Search = () => {
|
|
// console.log(cari)
|
|
}
|
|
// onM
|
|
</script>
|
|
|
|
<template>
|
|
<v-container fluid>
|
|
<h1>Daftar Praktisi</h1>
|
|
|
|
<v-row>
|
|
<v-col class="mt-5">
|
|
<v-text-field
|
|
v-model="cari"
|
|
prepend-inner-icon="mdi-magnify"
|
|
label="Search"
|
|
variant="solo"
|
|
style="width: 400px"
|
|
@change="Search"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<template v-if="loading">
|
|
<v-col
|
|
v-for="(practitioner, index) in practitionerlist"
|
|
:key="index"
|
|
cols="6"
|
|
sm="6"
|
|
md="3"
|
|
>
|
|
<v-skeleton-loader
|
|
type="card"
|
|
height="300"
|
|
class="mx-auto"
|
|
/>
|
|
</v-col>
|
|
</template>
|
|
<template v-else>
|
|
<v-col
|
|
v-for="(practitioner, index) in practitionerlist"
|
|
:key="index"
|
|
cols="6"
|
|
sm="6"
|
|
md="3"
|
|
>
|
|
<v-lazy
|
|
:min-height="200"
|
|
:options="{'threshold':0.5}"
|
|
transition="fade-transition"
|
|
>
|
|
<v-card
|
|
max-width="300"
|
|
elevation="3"
|
|
height="350"
|
|
class="hover-card d-flex flex-column justify-space-between"
|
|
|
|
shaped
|
|
>
|
|
<v-card-text class="text-center">
|
|
<v-row justify="center" class="mt-2">
|
|
<!-- <v-avatar v-if="practitioner.gender == ''" size="100">
|
|
<v-img
|
|
alt="image"
|
|
src="https://cdn.vuetifyjs.com/images/john.png"
|
|
/>
|
|
</v-avatar>
|
|
<v-avatar v-else size="100">
|
|
<v-img
|
|
alt="image"
|
|
src=""
|
|
/>
|
|
</v-avatar> -->
|
|
<DivAvatar
|
|
size="80"
|
|
class="mr-3"
|
|
:gender="practitioner.Jenis_kelamin == 'Laki-laki'? 'male':practitioner.Jenis_kelamin == 'Perempuan'?'female':''"
|
|
/>
|
|
</v-row>
|
|
<!-- {{ console.log(practitioner.Jenis_kelamin) }} -->
|
|
<v-row class="justify-center">
|
|
<div class="text-h6 mb-0 mx-4">{{ practitioner.nama_lengkap }}</div>
|
|
</v-row>
|
|
<v-row class="justify-center">
|
|
<div>
|
|
<div class="text-overline mb-1">Dokter | {{ practitioner.Jenis_kelamin }}</div>
|
|
<DivIconText
|
|
icon="mdi-map-marker"
|
|
:text="'Jl. Belakang Rumah Sakit Arief'"
|
|
/>
|
|
<DivIconText
|
|
icon="mdi-calendar"
|
|
:text="'01-01-2000'"
|
|
/>
|
|
<DivIconText
|
|
icon="mdi-phone"
|
|
:text="'081983293784'"
|
|
/>
|
|
</div>
|
|
</v-row>
|
|
</v-card-text>
|
|
<v-card-actions class="d-flex justify-end mb-2">
|
|
<v-btn
|
|
color="deep-purple-accent-4"
|
|
variant="text"
|
|
>Detail <v-icon small class="ml-1">mdi-arrow-right</v-icon></v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-lazy>
|
|
</v-col>
|
|
</template>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
<style>
|
|
.hover-card:hover{
|
|
transform: translateY(-10px);
|
|
}
|
|
</style>
|