98 lines
3.3 KiB
Vue
98 lines
3.3 KiB
Vue
<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> |