Changes to UI and other stuff
This commit is contained in:
@@ -4,6 +4,8 @@ import { router } from "@inertiajs/vue3";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { PlusIcon } from "@/Utilities/Icons";
|
||||
import { faUser, faMapMarkerAlt, faPhone, faEnvelope, faUniversity } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import PersonUpdateForm from "./PersonUpdateForm.vue";
|
||||
import AddressCreateForm from "./AddressCreateForm.vue";
|
||||
import AddressUpdateForm from "./AddressUpdateForm.vue";
|
||||
@@ -298,13 +300,21 @@ const switchToTab = (tab) => {
|
||||
<template>
|
||||
<Tabs v-model="activeTab" class="mt-2">
|
||||
<TabsList class="flex w-full bg-white gap-2 p-1">
|
||||
<TabsTrigger value="person" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2">Oseba</TabsTrigger>
|
||||
<TabsTrigger value="person" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<FontAwesomeIcon :icon="faUser" class="h-4 w-4" />
|
||||
<span>Oseba</span>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="addresses" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
|
||||
<div class="flex items-center justify-between gap-2 w-full">
|
||||
<span>Naslovi</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<FontAwesomeIcon :icon="faMapMarkerAlt" class="h-4 w-4" />
|
||||
<span>Naslovi</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="addressesCount > 0"
|
||||
class="h-5 min-w-[20px] px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
|
||||
class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
|
||||
>
|
||||
{{ formatBadgeCount(addressesCount) }}
|
||||
</span>
|
||||
@@ -312,10 +322,13 @@ const switchToTab = (tab) => {
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="phones" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
|
||||
<div class="flex items-center justify-between gap-2 w-full">
|
||||
<span>Telefonske</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<FontAwesomeIcon :icon="faPhone" class="h-4 w-4" />
|
||||
<span>Telefonske</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="phonesCount > 0"
|
||||
class="h-5 min-w-[20px] px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
|
||||
class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
|
||||
>
|
||||
{{ formatBadgeCount(phonesCount) }}
|
||||
</span>
|
||||
@@ -323,10 +336,13 @@ const switchToTab = (tab) => {
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="emails" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
|
||||
<div class="flex items-center justify-between gap-2 w-full">
|
||||
<span>Email</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<FontAwesomeIcon :icon="faEnvelope" class="h-4 w-4" />
|
||||
<span>Email</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="emailsCount > 0"
|
||||
class="h-5 min-w-[20px] px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
|
||||
class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
|
||||
>
|
||||
{{ formatBadgeCount(emailsCount) }}
|
||||
</span>
|
||||
@@ -334,10 +350,13 @@ const switchToTab = (tab) => {
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="trr" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
|
||||
<div class="flex items-center justify-between gap-2 w-full">
|
||||
<span>TRR</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<FontAwesomeIcon :icon="faUniversity" class="h-4 w-4" />
|
||||
<span>TRR</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="trrsCount > 0"
|
||||
class="h-5 min-w-[20px] px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
|
||||
class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
|
||||
>
|
||||
{{ formatBadgeCount(trrsCount) }}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user