daftar praktisi
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
</script>
|
||||
<template>
|
||||
<ListElement
|
||||
name="contact"
|
||||
:rules="['min:1']"
|
||||
:min="1"
|
||||
:max="1"
|
||||
:initial="1"
|
||||
>
|
||||
<template #default="{ index }">
|
||||
<ObjectElement
|
||||
:name="index"
|
||||
>
|
||||
<GroupElement name="container2">
|
||||
<GroupElement name="column1" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<FormLibRelationship/>
|
||||
</GroupElement>
|
||||
<GroupElement name="column_2" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<FormLibHumanName/>
|
||||
</GroupElement>
|
||||
</GroupElement>
|
||||
<FormLibTelecom/>
|
||||
<FormLibAddress/>
|
||||
<FormLibGender/>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<RadiogroupElement
|
||||
name="gender"
|
||||
view="tabs"
|
||||
label="Jenis Kelamin"
|
||||
:items="[
|
||||
{
|
||||
value: 'male',
|
||||
label: 'Laki-Laki',
|
||||
},
|
||||
{
|
||||
value: 'female',
|
||||
label: 'female',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
// import items from '~/assets/data/contact/relationship.json'
|
||||
</script>
|
||||
<template>
|
||||
<ListElement
|
||||
name="relationship"
|
||||
:rules="['min:1']"
|
||||
:min="1"
|
||||
:max="1"
|
||||
:initial="1"
|
||||
>
|
||||
<template #default="{ index }">
|
||||
<ObjectElement
|
||||
:name="index"
|
||||
>
|
||||
<SelectElement
|
||||
name="code"
|
||||
:search="true"
|
||||
:native="false"
|
||||
input-type="search"
|
||||
autocomplete="off"
|
||||
placeholder="Hubungan Dengan Pasien"
|
||||
:columns="{
|
||||
container: 12,
|
||||
}"
|
||||
:items="[
|
||||
{
|
||||
value: 'BP',
|
||||
label: 'Billing contact person',
|
||||
},
|
||||
{
|
||||
value: 'CP',
|
||||
label: 'Contact person',
|
||||
},
|
||||
{
|
||||
value: 'EP',
|
||||
label: 'Emergency contact person',
|
||||
},
|
||||
{
|
||||
value: 'PR',
|
||||
label: 'Person preparing referral',
|
||||
},
|
||||
{
|
||||
value: 'E',
|
||||
label: 'Employer',
|
||||
},
|
||||
{
|
||||
value: 'C',
|
||||
label: 'Emergency Contact',
|
||||
},
|
||||
{
|
||||
value: 'F',
|
||||
label: 'Federal Agency',
|
||||
},
|
||||
{
|
||||
value: 'I',
|
||||
label: 'Insurance Company',
|
||||
},
|
||||
{
|
||||
value: 'N',
|
||||
label: 'Next-of-Kin',
|
||||
},
|
||||
{
|
||||
value: 'S',
|
||||
label: 'State Agency',
|
||||
},
|
||||
{
|
||||
value: 'U',
|
||||
label: 'Unknown',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { FormLibAddress, FormLibHumanName, FormLibTelecom } from '#components'
|
||||
<script setup lang="ts">
|
||||
import { FormLibAddress, FormLibContact, FormLibHumanName, FormLibTelecom } from '#components'
|
||||
import Identifier from '../Lib/Identifier.vue'
|
||||
|
||||
const data = ref('')
|
||||
@@ -84,14 +84,15 @@ const handleResponse = (response, form$) => {
|
||||
<GroupElement name="column1" :columns="{
|
||||
container: 6,
|
||||
}">
|
||||
<RadiogroupElement name="gender" view="tabs" label="Jenis Kelamin" :items="[
|
||||
<FormLibGender />
|
||||
<!-- <RadiogroupElement name="gender" view="tabs" label="Jenis Kelamin" :items="[
|
||||
{
|
||||
value: 'male',
|
||||
label: 'Laki-laki',
|
||||
},
|
||||
{
|
||||
value: 'female',
|
||||
label: 'Perempuan',
|
||||
label: 'female',
|
||||
},
|
||||
// {
|
||||
// value: 'other',
|
||||
@@ -101,7 +102,7 @@ const handleResponse = (response, form$) => {
|
||||
// value: 'unknown',
|
||||
// label: ' ',
|
||||
// },
|
||||
]" default="unknown" />
|
||||
]" default="unknown" /> -->
|
||||
</GroupElement>
|
||||
<GroupElement name="column_2" :columns="{
|
||||
container: 6,
|
||||
@@ -177,14 +178,18 @@ const handleResponse = (response, form$) => {
|
||||
}" />
|
||||
<StaticElement name="divider_1" tag="hr" />
|
||||
<StaticElement name="addressTitle" tag="h2" content="Alamat" />
|
||||
<FormLibAddress />
|
||||
<FormLibAddress class="mt"/>
|
||||
|
||||
<StaticElement name="divider_2" tag="hr" />
|
||||
<StaticElement name="contactTitle" tag="h4" content="Kontak" />
|
||||
<FormLibTelecom />
|
||||
<StaticElement name="contactTitle" tag="h2" content="Kontak" />
|
||||
<FormLibTelecom class="mt"/>
|
||||
<StaticElement name="divider_2" tag="hr" />
|
||||
<StaticElement name="contactTitle" tag="h2" content="Kontak Penanggung Jawab" />
|
||||
<FormLibContact class="mt"/>
|
||||
|
||||
<StaticElement name="divider_3" tag="hr" />
|
||||
<StaticElement name="communicationTitle" tag="h2" content="Komunikasi" />
|
||||
<FormLibCommunication />
|
||||
<FormLibCommunication class="mt"/>
|
||||
<GroupElement name="container" :columns="{
|
||||
default: {
|
||||
container: 7,
|
||||
@@ -219,4 +224,10 @@ const handleResponse = (response, form$) => {
|
||||
</GroupElement>
|
||||
</GroupElement>
|
||||
</Vueform>
|
||||
<p>{{ data }}</p>
|
||||
</template>
|
||||
<style>
|
||||
.mt{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user