75 lines
2.5 KiB
Vue
75 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<v-dialog v-model="dialog" width="auto">
|
|
<v-card min-width="600" max-width="750" class="rounded-lg">
|
|
<v-card-item class="bg-primary mb-5">
|
|
<v-card-title>TIMELINE</v-card-title>
|
|
</v-card-item>
|
|
<v-card-text>
|
|
<v-row class="ga-4 mb-5">
|
|
<div class="rounded-lg bg-secondary-lighten" style="width: 80px; height: 80px;"></div>
|
|
<div>
|
|
<h4 class="font-weight-medium">05600027LA</h4>
|
|
<h4 class="font-weight-bold">Ny IMELDA JANICE</h4>
|
|
</div>
|
|
</v-row>
|
|
|
|
<v-timeline side="end" style="align-items: start; align-content: start">
|
|
<v-timeline-item
|
|
v-for="item in items"
|
|
:key="item.id"
|
|
dot-color="white"
|
|
fill-dot="false"
|
|
:icon="item.icon"
|
|
icon-color="primary"
|
|
size="small"
|
|
>
|
|
|
|
</v-timeline-item>
|
|
</v-timeline>
|
|
</v-card-text>
|
|
<template v-slot:actions>
|
|
<v-btn
|
|
class="ms-auto text-primary font-weight-medium"
|
|
text="TUTUP"
|
|
@click="dialog=false"
|
|
></v-btn>
|
|
</template>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "statuspasiendialog",
|
|
components: {},
|
|
mounted() {},
|
|
data() {
|
|
return {
|
|
items: [
|
|
{
|
|
id: 1,
|
|
color: 'info',
|
|
icon: 'mdi-check-circle',
|
|
},
|
|
{
|
|
id: 2,
|
|
color: 'error',
|
|
icon: 'mdi-alert-circle',
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
dialog: {
|
|
get() {
|
|
return this.$store.state.stored.sp_dialog;
|
|
},
|
|
set(bool) {
|
|
this.$store.commit("setDialog", bool);
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script> |