setting tampilan belum fix

2025-06-03 10:27:59 +07:00
parent e6a883efe7 87a4bdc1a8
commit 8672491efe
29 changed files with 2635 additions and 83 deletions
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import {Icon} from "@iconify/vue";
+
+withDefaults(
+    defineProps<{
+        item: Object;
+        // type: string;
+    }>(),
+    {
+        item: () => ({}),
+        // type: () => ({}),
+    }
+)
+const emit = defineEmits(["detail"]);
+</script>
+<template>
+    <v-card
+            elevation="10"
+            :class="[
+              'mx-auto',
+              item.status === 'planned'
+                ? ''
+                : item.status === 'in-progress'
+                ? 'bg-info'
+                : item.status === 'completed'
+                ? 'bg-success'
+                : item.status === 'cancelled'
+                ? 'bg-error'
+                : '',
+            ]"
+          >
+            <template v-slot:prepend>
+              <v-avatar
+                size="50"
+                :class="[
+                  'mx-auto rounded-md',
+                  item.status === 'planned'
+                    ? ''
+                    : item.status === 'in-progress'
+                    ? 'bg-info'
+                    : item.status === 'completed'
+                    ? 'bg-success'
+                    : item.status === 'cancelled'
+                    ? 'bg-error'
+                    : '',
+                ]"
+              >
+                <Icon
+                  icon="solar:user-circle-broken"
+                  :class="[
+                    item.status === 'planned'
+                      ? 'text-primary'
+                      : item.status === 'in-progress'
+                      ? 'text-primary'
+                      : item.status === 'completed'
+                      ? 'text-light'
+                      : item.status === 'cancelled'
+                      ? 'text-light'
+                      : '',
+                  ]"
+                  height="36"
+                />
+              </v-avatar>
+            </template>
+            <template v-slot:title>
+                <h3>{{item.display}}</h3>
+              <!-- <h3>{{ item.subject.display }}</h3> -->
+            </template>
+            <template v-slot:subtitle> </template>
+            <template v-slot:text>
+              <div class="pl-3">
+                <div class="align-center d-flex">
+                  <!-- <Icon icon="mdi:doctor" class="text-primary" height="25" />
+                  <h4>actor</h4> -->
+                  <!-- <h4>{{ item.participant[0].actor.display }}</h4> -->
+                </div>
+              </div>
+              <div class="pl-3 pt-2">
+                <div class="align-center d-flex">
+                  <!-- <Icon
+                    icon="mdi:hospital-marker"
+                    class="text-primary"
+                    height="25"
+                  /> -->
+                  <!-- <h4>location</h4> -->
+                  <!-- <h4>Sps. {{ item.location[0].location.display }}</h4> -->
+                </div>
+              </div>
+            </template>
+            <template v-slot:actions>
+              <v-btn color="primary" class="ms-auto" @click="emit('detail', props?.item)">Detail</v-btn>
+               <!-- <v-btn v-for="itemButton in showButtons" @click="$emit(itemButton.tipe, props?.item)" :color="itemButton.color" class="ms-auto">
+                    <v-icon :color="itemButton.color">{{ itemButton.icon }}</v-icon>
+                    {{ itemButton.text }}
+                </v-btn> -->
+            </template>
+          </v-card>
+</template>
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import typeUser from "@/data/dummy/keuangan.type_user.json";
+import role_menu from "@/data/dummy/keuangan.role_menu.json";
+import menu from "@/data/dummy/keuangan.menu.json";
+//misal id = 683d57b2bccc67d467a9e10f
+// const id=ref('683d57b2bccc67d467a9e10f')
+// const { data:role_menu } = await useFetch(`/api/role_menu/${id.value}`)
+
+const props = defineProps({
+    data: {
+        type: Array,
+    },
+    columns: {
+        type: Array,
+    }
+})
+const updateData = (id) => {
+  console.log("update data:", id);
+};
+
+const deleteData = (id) => {
+  console.log("delete data:", id);
+};
+
+</script>
+<template>
+  <!-- {{ data() }} -->
+    <!-- {{props.columns}} -->
+  <v-table density="compact">
+    <thead>
+      <tr>
+        <th class="text-left" v-for="(col,index) in columns" :key="index">{{col.label}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(item,index) in data" :key="index">
+        <td v-for="(col,colIndex) in columns" :key="colIndex">{{item[col.key]}}
+            <template v-if="col.key == 'actions'">
+            <v-btn class="mx-2" @click="updateData(item)">ubah</v-btn>
+            <v-btn @click="deleteData(item)">hapus</v-btn>
+            </template>
+        </td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>