From 69a4be1318e84a115474a54b5522dd4f505b12d1 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 14 Jun 2022 12:12:08 +0200
Subject: [PATCH] Card mockup

---
 src/components/SmartCard.vue             |  19 ++++
 src/pages/Customer/Card/CustomerCard.vue | 128 +++++++++++++++++++++--
 src/pages/Customer/CustomerList.vue      |  10 +-
 3 files changed, 145 insertions(+), 12 deletions(-)
 create mode 100644 src/components/SmartCard.vue

diff --git a/src/components/SmartCard.vue b/src/components/SmartCard.vue
new file mode 100644
index 0000000000..f3bf56b1d8
--- /dev/null
+++ b/src/components/SmartCard.vue
@@ -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>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 7ac41ebf4b..576ecde7e1 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -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">
-            <router-link :to="{ path: '/customer/list' }">
-                <q-icon name="arrow_back" size="md" color="primary" />
-            </router-link>
-            <div>Customer ID: {{ entityId }}</div>
+    <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-btn round flat dense size="md" icon="view_list" color="white">
+                        <q-tooltip>Customer list</q-tooltip>
+                    </q-btn>
+                </router-link>
+                <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>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 5e0cd51626..b4ace86b48 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -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>