daftar praktisi

2025-04-24 07:31:36 +07:00
parent 8a2f7d0a05
commit 01435f9fe2
11 changed files with 375 additions and 13 deletions
@@ -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>