|
1 | 1 | <template> |
2 | | - |
3 | | - <header class="bg-white p-4 flex justify-between items-center"> |
| 2 | + <header class="bg-white p-4 flex justify-between items-center border-b border-gray-200"> |
4 | 3 | <router-link to="/" class="flex items-center cursor-pointer"> |
5 | | - <img :src="imagePath" alt="Logo" class="ml-20 w-40 h-15 mr-2"> |
| 4 | + <img :src="imagePath" alt="Logo" class="ml-20 w-40 h-15 mr-2"> |
6 | 5 | </router-link> |
7 | | - <div class="flex items-center"> |
| 6 | + <div class="flex items-center gap-4"> |
| 7 | + <button |
| 8 | + class="flex justify-center items-center h-12 w-12 rounded-xl hover:bg-slate-200 transition-colors text-blue-800" |
| 9 | + @click="reloadKOT" |
| 10 | + > |
| 11 | + <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20"> |
| 12 | + <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/> |
| 13 | + </svg> |
| 14 | + </button> |
8 | 15 |
|
| 16 | + <!-- Reused POS User Dropdown --> |
| 17 | + <div class="relative" ref="userMenuRef"> |
| 18 | + <button |
| 19 | + @click="toggleUserMenu" |
| 20 | + class="flex items-center gap-2 px-4 h-12 rounded-xl hover:bg-slate-200 transition-colors text-gray-700 hover:text-gray-900" |
| 21 | + > |
| 22 | + <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center"> |
| 23 | + <svg class="w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 24 | + <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/> |
| 25 | + <circle cx="12" cy="7" r="4"/> |
| 26 | + </svg> |
| 27 | + </div> |
| 28 | + <span class="text-sm font-semibold">{{ userName }}</span> |
| 29 | + <svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| 30 | + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
| 31 | + </svg> |
| 32 | + </button> |
9 | 33 |
|
10 | | - <button class=" hover:bg-slate-300 text-blue font-semibold px-6 py-1 rounded-md" @click="reloadKOT"> |
11 | | - <svg class="w-6 h-6 text-blue-800 dark:text-blue" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20"> |
12 | | - <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/> Refresh |
13 | | - </svg> |
| 34 | + <div v-if="showUserMenu" class="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50"> |
| 35 | + <div class="p-4 border-b border-gray-200"> |
| 36 | + <p class="text-sm font-semibold text-gray-900">{{ userName }}</p> |
| 37 | + <p class="text-sm font-semibold text-gray-500">{{ userId }}</p> |
| 38 | + </div> |
| 39 | + <div class="py-2"> |
| 40 | + <button |
| 41 | + @click="switchToDashboard" |
| 42 | + class="flex justify-start items-center w-full px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 transition-colors" |
| 43 | + > |
| 44 | + <svg class="w-4 h-4 mr-3 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 45 | + <rect width="20" height="14" x="2" y="3" rx="2"/> |
| 46 | + <line x1="8" x2="16" y1="21" y2="21"/> |
| 47 | + <line x1="12" x2="12" y1="17" y2="21"/> |
| 48 | + </svg> |
| 49 | + Switch to Dashboard |
| 50 | + </button> |
14 | 51 |
|
15 | | - </button> |
| 52 | + <button |
| 53 | + @click="logout" |
| 54 | + class="flex justify-start items-center w-full px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 hover:text-red-700 transition-colors" |
| 55 | + > |
| 56 | + <svg class="w-4 h-4 mr-3 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 57 | + <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/> |
| 58 | + <polyline points="16 17 21 12 16 7"/> |
| 59 | + <line x1="21" x2="9" y1="12" y2="12"/> |
| 60 | + </svg> |
| 61 | + Logout |
| 62 | + </button> |
| 63 | + </div> |
| 64 | + </div> |
| 65 | + </div> |
16 | 66 | </div> |
17 | | -</header> |
18 | | - |
19 | | - |
| 67 | + </header> |
20 | 68 | </template> |
21 | 69 |
|
22 | 70 | <script> |
23 | | -
|
24 | 71 | import urimosaicImage from "@/assets/logos/mosaic.jpg"; |
25 | | -// import KOT from './kot.vue'; |
26 | 72 |
|
27 | 73 | export default { |
28 | 74 | name: "Header", |
29 | | - setup() { |
30 | | - |
31 | | - }, |
32 | 75 | data() { |
33 | 76 | return { |
34 | 77 | imagePath: urimosaicImage, |
| 78 | + showUserMenu: false, |
| 79 | + userName: "User", |
| 80 | + userId: "user@example.com" |
35 | 81 | }; |
36 | 82 | }, |
37 | | - methods:{ |
38 | | - reloadKOT(){ |
39 | | - // KOT.methods.fetchKOT(this); |
| 83 | + methods: { |
| 84 | + reloadKOT() { |
40 | 85 | window.location.reload(); |
| 86 | + }, |
| 87 | + toggleUserMenu() { |
| 88 | + this.showUserMenu = !this.showUserMenu; |
| 89 | + }, |
| 90 | + switchToDashboard() { |
| 91 | + this.showUserMenu = false; |
| 92 | + window.location.href = '/ury/dashboard'; |
| 93 | + }, |
| 94 | + async logout() { |
| 95 | + this.showUserMenu = false; |
| 96 | + try { |
| 97 | + await fetch('/api/method/logout', { method: 'POST' }); |
| 98 | + } catch (e) { |
| 99 | + console.error(e); |
| 100 | + } |
| 101 | + window.location.href = '/login?redirect-to=%2Fmosaic'; |
| 102 | + }, |
| 103 | + handleClickOutside(event) { |
| 104 | + if (this.$refs.userMenuRef && !this.$refs.userMenuRef.contains(event.target)) { |
| 105 | + this.showUserMenu = false; |
| 106 | + } |
| 107 | + }, |
| 108 | + async fetchUser() { |
| 109 | + try { |
| 110 | + const res = await fetch('/api/method/frappe.auth.get_logged_user'); |
| 111 | + const data = await res.json(); |
| 112 | + if (data.message) { |
| 113 | + this.userId = data.message; |
| 114 | + const userRes = await fetch(`/api/method/frappe.client.get_value?doctype=User&filters={"name":"${data.message}"}&fieldname=full_name`); |
| 115 | + const userData = await userRes.json(); |
| 116 | + if (userData.message && userData.message.full_name) { |
| 117 | + this.userName = userData.message.full_name; |
| 118 | + } else { |
| 119 | + this.userName = data.message; |
| 120 | + } |
| 121 | + } |
| 122 | + } catch (err) { |
| 123 | + console.error("Failed to fetch user", err); |
| 124 | + } |
41 | 125 | } |
42 | 126 | }, |
43 | | - computed: { |
44 | | - |
| 127 | + mounted() { |
| 128 | + document.addEventListener('mousedown', this.handleClickOutside); |
| 129 | + this.fetchUser(); |
45 | 130 | }, |
| 131 | + unmounted() { |
| 132 | + document.removeEventListener('mousedown', this.handleClickOutside); |
| 133 | + } |
46 | 134 | }; |
47 | 135 | </script> |
0 commit comments