forked from verdnatura/salix-front
Customer list "mockup"
This commit is contained in:
parent
561c4ef187
commit
0d6daa4079
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<q-header class="bg-darker" color="white" elevated>
|
||||
<q-header class="bg-dark" color="white" elevated bordered>
|
||||
<q-toolbar class="q-py-sm q-px-md">
|
||||
<q-btn flat @click="$emit('on-toggle-drawer')" round dense icon="menu" />
|
||||
<router-link to="/">
|
||||
|
|
|
|||
|
|
@ -1 +1,15 @@
|
|||
<template>Customer card...</template>
|
||||
<template>
|
||||
<div class="row fit fixed">
|
||||
<div class="col-2">
|
||||
<q-card square>
|
||||
<router-link :to="{ path: '/customer/list' }">
|
||||
<q-icon name="arrow_back" size="md" color="primary" />
|
||||
</router-link>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-card>asd</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,140 @@
|
|||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<div class="column items-center q-gutter-y-md">
|
||||
<router-link to="/customer/123"></router-link>
|
||||
<q-card v-for="customer in customers" :key="customer.id" class="card">
|
||||
<q-card-section horizontal clickable>
|
||||
<div class="col items-center no-wrap">
|
||||
<div class="col">
|
||||
<div class="text-h6">{{ customer.name }}</div>
|
||||
<div class="text-subtitle2">@{{ customer.username }}</div>
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
||||
<div class="col-auto">
|
||||
<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-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-separator vertical />
|
||||
<q-card-actions vertical class="justify-between">
|
||||
<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-btn flat round color="orange" icon="badge" @click="navigate(customer.id)" />
|
||||
<q-btn flat round color="accent" icon="preview" />
|
||||
<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-section horizontal>
|
||||
<q-card-section vertical class="col">
|
||||
<div class="text-h6">{{ customer.name }}</div>
|
||||
<div class="text-subtitle2">@{{ customer.username }}</div>
|
||||
|
||||
<q-card-section vertical>text</q-card-section>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator vertical />
|
||||
|
||||
<q-card-actions vertical class="justify-around">
|
||||
<q-btn flat round color="red" icon="favorite" />
|
||||
<q-btn flat round color="accent" icon="bookmark" />
|
||||
<q-btn flat round color="primary" icon="share" />
|
||||
<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-card-actions>
|
||||
</q-card-section>
|
||||
</q-card-section> -->
|
||||
</q-card>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const customers = [
|
||||
import { ref, Ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
|
||||
interface Customer {
|
||||
id: number;
|
||||
name: string;
|
||||
username: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
expanded: Ref<boolean>;
|
||||
}
|
||||
const customers: Customer[] = [
|
||||
{
|
||||
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: number) {
|
||||
router.push({ path: `/customer/${id}` });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue