first commit

pages/pasiens/dataPasien.vue

@@ -0,0 +1,111 @@
+<script>
+
+definePageMeta({
+  title: 'Data Pasien',
+  icon: 'mdi-account-injury-outline',
+  drawerIndex: 0,
+})
+const randomData = ref(generateRandomDataPasien(10));
+
+const headers = [
+  { text: 'No RM' },
+  { text: 'Nama' },
+  { text: 'tanggal Lahir' },
+  { text: 'Alamat' },
+  { text: 'No KTP' },
+  { text: 'No JKN' },
+  { text: 'Kelamin' },
+  { text: 'Aksi' },
+  // { text: 'Aksi' },
+];
+
+
+const searchQuery = ref('');
+const filteredData = computed(() => {
+  if (searchQuery.value.length >= 3) {
+    return randomData.value.filter(item =>
+      item.norm.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      item.no_ktp.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      item.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
+    );
+  }
+  return randomData.value;
+});
+
+console.log(randomData.value)
+console.log(randomData.value.length)
+</script>
+<template>
+  <v-container>
+    <v-card>
+      <div class="py-4 px-3">
+        <div class="d-flex justify-space-between mb-6">
+          <h5 class="text-h5 ">Kunjungan Pasien</h5>
+          <div class="w-sm-25">
+            <v-text-field label="Cari" v-model="searchField" variant="outlined" density="compact" type="text"
+              hide-details color="primary"></v-text-field>
+          </div>
+        </div>
+        <v-row>
+          <div class="d-flex flex-wrap">
+            <!-- <v-col v-for="item in filteredData" :key="item.id" cols="12" md="4">
+              <v-lazy :min-height="200" :options="{ 'threshold': 1 }" transition="fade-transition">
+                <v-card>
+                  <template v-slot:append>
+                    <h3>{{ item.norm }}</h3>
+                  </template>
+
+<template v-slot:prepend>
+                    <v-avatar size="50" class="rounded-md bg-lightsecondary">
+                      <Icon icon="solar:user-circle-broken" class="text-secondary" height="36" />
+                    </v-avatar>
+                  </template>
+
+<template v-slot:title>
+                    <h4>{{ capitalizeEachWord(item.nama) }}</h4>
+                  </template>
+
+<template v-slot:subtitle>
+                    <p>{{ item.no_ktp }}</p>
+                  </template>
+
+<template v-slot:text>
+                    <p>{{ capitalizeEachWord(item.alamat) }}</p>
+                  </template>
+
+<template v-slot:actions>
+                    <div class="d-flex justify-end">
+                      <v-btn color="primary" @click="editItem(item.norm)">Ubah</v-btn>
+                      <v-btn color="error" @click="deleteItem(item.norm)">Hapus</v-btn>
+
+                    </div>
+                  </template>
+</v-card>
+</v-lazy>
+</v-col> -->
+            <div v-for="(data, i) in filteredData" :key="i">
+              <p>s</p>
+
+            </div>
+            <v-card class="mx-4">
+              <template v-slot:prepend>
+                left
+              </template>
+              <template v-slot:append>
+                right
+              </template>
+            </v-card>
+            <v-card>
+              <template v-slot:prepend>
+                left
+              </template>
+              <template v-slot:append>
+                right
+              </template>
+            </v-card>
+          </div>
+        </v-row>
+      </div>
+    </v-card>
+  </v-container>
+</template>