Card mockup
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
parent
2b1060236a
commit
69a4be1318
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue