Card mockup
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Joan Sanchez 2022-06-14 12:12:08 +02:00
parent 2b1060236a
commit 69a4be1318
3 changed files with 145 additions and 12 deletions

View File

@ -0,0 +1,19 @@
<script setup>
import { onMounted, ref } from 'vue';
const $props = defineProps({
columns: {
type: Array,
default: new Array(),
required: true,
},
});
onMounted();
console.log($props);
</script>
<template>
<q-table v-bind="$attrs"></q-table>
</template>

View File

@ -1,24 +1,138 @@
<script setup>
import { computed } from 'vue';
import { computed, ref, onMounted } from 'vue';
import { useState } from 'src/composables/useState';
import { useRouter } from 'vue-router';
import axios from 'axios';
const state = useState();
const router = useRouter();
onMounted(async () => {
await fetch();
});
const entityId = computed(function () {
return router.currentRoute.value.params.id;
});
const customer = ref({});
async function fetch() {
const { data } = await axios.get(`/api/Clients/${entityId.value}`);
if (data) customer.value = data;
}
</script>
<template>
<q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
<q-scroll-area class="fit text-grey-8">
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
<q-scroll-area class="fit text-grey-8 descriptor">
<div class="header bg-orange q-pa-sm">
<router-link :to="{ path: '/customer/list' }">
<q-icon name="arrow_back" size="md" color="primary" />
<q-btn round flat dense size="md" icon="view_list" color="white">
<q-tooltip>Customer list</q-tooltip>
</q-btn>
</router-link>
<div>Customer ID: {{ entityId }}</div>
<router-link :to="{ path: '/customer/list' }">
<q-btn round flat dense size="md" icon="launch" color="white">
<q-tooltip>Customer preview</q-tooltip>
</q-btn>
</router-link>
<q-btn round flat dense size="md" icon="more_vert" color="white">
<q-tooltip>More options</q-tooltip>
<q-menu>
<q-list>
<q-item clickable v-ripple>Option 1</q-item>
<q-item clickable v-ripple>Option 2</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<h5>{{ customer.name }}</h5>
<q-list>
<q-item>
<q-item-section>
<q-item-label caption>Customer ID</q-item-label>
<q-item-label>#{{ customer.id }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<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-list>
<q-card-actions>
<q-btn size="md" icon="vn:ticket" color="orange">
<q-tooltip>Ticket list</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:invoice-out" color="orange">
<q-tooltip>Invoice Out list</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:basketadd" color="orange">
<q-tooltip>Order list</q-tooltip>
</q-btn>
<q-btn size="md" icon="face" color="orange">
<q-tooltip>View user</q-tooltip>
</q-btn>
<q-btn size="md" icon="expand_more" color="orange">
<q-tooltip>More options</q-tooltip>
</q-btn>
</q-card-actions>
<q-separator />
<q-list>
<q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
<q-item-section avatar>
<q-icon name="person" />
</q-item-section>
<q-item-section>Basic data</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="notes" />
</q-item-section>
<q-item-section>Notes</q-item-section>
</q-item>
<q-expansion-item icon="more" label="More options" expand-icon-toggle expand-separator>
<q-list>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="person" />
</q-item-section>
<q-item-section>Option</q-item-section>
</q-item>
</q-list>
</q-expansion-item>
</q-list>
</q-scroll-area>
</q-drawer>
<q-page-container>
<router-view></router-view>
</q-page-container>
</template>
<style lang="scss" scoped>
.descriptor {
h5 {
margin: 0 15px;
}
.header {
display: flex;
justify-content: space-between;
}
.q-card__actions {
justify-content: center;
}
}
</style>

View File

@ -1,8 +1,8 @@
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
// import { useRouter } from 'vue-router';
// const router = useRouter();
import { useRouter } from 'vue-router';
const router = useRouter();
const fabPos = ref([18, 18]);
const draggingFab = ref(false);
@ -119,9 +119,9 @@ function moveFab(ev) {
fabPos.value = [fabPos.value[0] - ev.delta.x, fabPos.value[1] - ev.delta.y];
}
// function navigate(id) {
// router.push({ path: `/customer/${id}` });
// }
function navigate(id) {
router.push({ path: `/customer/${id}` });
}
</script>
<template>