106 lines
4.3 KiB
Vue
106 lines
4.3 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
|
|
const customers = [
|
|
{
|
|
id: 1101,
|
|
name: 'Bruce Wayne',
|
|
username: 'batman',
|
|
email: 'batman@gotham',
|
|
phone: '555-555-5555',
|
|
expanded: ref(false),
|
|
},
|
|
{
|
|
id: 1102,
|
|
name: 'James Gordon',
|
|
username: 'jamesgordon',
|
|
email: 'jamesgordon@gotham',
|
|
phone: '555-555-1111',
|
|
expanded: ref(false),
|
|
},
|
|
];
|
|
|
|
function navigate(id) {
|
|
router.push({ path: `/customer/${id}` });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-page class="q-pa-md">
|
|
<div class="column items-center q-gutter-y-md">
|
|
<q-card v-for="customer in customers" :key="customer.id" class="card">
|
|
<!-- v-ripple :to="{ path: '/dashboard' }" -->
|
|
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
|
|
<q-item-section class="q-pa-md">
|
|
<div class="text-h6">{{ customer.name }}</div>
|
|
<q-item-label caption>@{{ customer.username }}</q-item-label>
|
|
<div class="q-mt-md">
|
|
<q-list>
|
|
<q-item class="q-pa-none">
|
|
<q-item-section>
|
|
<q-item-label caption>Email</q-item-label>
|
|
<q-item-label>{{ customer.email }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item class="q-pa-none">
|
|
<q-item-section>
|
|
<q-item-label caption>Phone</q-item-label>
|
|
<q-item-label>{{ customer.phone }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
</q-item-section>
|
|
<q-btn color="grey-7" round flat icon="more_vert">
|
|
<q-menu cover auto-close>
|
|
<q-list>
|
|
<q-item clickable>
|
|
<q-item-section>Action 1</q-item-section>
|
|
</q-item>
|
|
<q-item clickable>
|
|
<q-item-section>Action 2</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
<q-separator vertical />
|
|
<q-card-actions vertical class="justify-between">
|
|
<q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
|
|
<q-btn flat round color="accent" icon="preview" />
|
|
<q-btn flat round color="accent" icon="vn:ticket" />
|
|
<q-card-actions>
|
|
<q-btn color="grey" round flat dense
|
|
:icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
|
|
@click="customer.expanded.value = !customer.expanded.value" />
|
|
</q-card-actions>
|
|
</q-card-actions>
|
|
</q-item>
|
|
<q-slide-transition>
|
|
<div v-show="customer.expanded.value">
|
|
<q-separator />
|
|
<q-card-section class="text-subitle2">
|
|
<q-list>
|
|
<q-item clickable>
|
|
<q-item-section>
|
|
<q-item-label>Address</q-item-label>
|
|
<q-item-label caption>Avenue 11</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
</div>
|
|
</q-slide-transition>
|
|
</q-card>
|
|
</div>
|
|
</q-page>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
width: 100%;
|
|
max-width: 60em;
|
|
}
|
|
</style>
|