Changes

resources/js/Components/PersonInfoGrid.vue

@@ -1,12 +1,18 @@
 <script setup>
 import { FwbBadge } from 'flowbite-vue';
-import { EditIcon, PlusIcon, UserEditIcon } from '@/Utilities/Icons';
+import { EditIcon, PlusIcon, UserEditIcon, TrashBinIcon } from '@/Utilities/Icons';
 import CusTab from './CusTab.vue';
 import CusTabs from './CusTabs.vue';
 import { provide, ref, watch } from 'vue';
+import axios from 'axios';
 import PersonUpdateForm from './PersonUpdateForm.vue';
 import AddressCreateForm from './AddressCreateForm.vue';
 import PhoneCreateForm from './PhoneCreateForm.vue';
+import EmailCreateForm from './EmailCreateForm.vue';
+import EmailUpdateForm from './EmailUpdateForm.vue';
+import TrrCreateForm from './TrrCreateForm.vue';
+import TrrUpdateForm from './TrrUpdateForm.vue';
+import ConfirmDialog from './ConfirmDialog.vue';
 
 
 const props = defineProps({
@@ -32,12 +38,38 @@ const props = defineProps({
 const drawerUpdatePerson = ref(false);
 const drawerAddAddress = ref(false);
 const drawerAddPhone = ref(false);
+const drawerAddEmail = ref(false);
+const drawerAddTrr = ref(false);
 
 const editAddress = ref(false);
 const editAddressId = ref(0);
 
 const editPhone = ref(false);
 const editPhoneId = ref(0);
+const editEmail = ref(false);
+const editEmailId = ref(0);
+const editTrr = ref(false);
+const editTrrId = ref(0);
+
+// Confirm dialog state
+const confirm = ref({
+    show: false,
+    title: 'Potrditev brisanja',
+    message: '',
+    type: '', // 'email' | 'trr' | 'address' | 'phone'
+    id: 0,
+});
+
+const openConfirm = (type, id, label = '') => {
+    confirm.value = {
+        show: true,
+        title: 'Potrditev brisanja',
+        message: label ? `Ali res želite izbrisati “${label}”?` : 'Ali res želite izbrisati izbran element?',
+        type,
+        id,
+    };
+}
+const closeConfirm = () => { confirm.value.show = false; };
 
 const getMainAddress = (adresses) => {
     const addr = adresses.filter( a => a.type.id === 1 )[0] ?? '';
@@ -77,6 +109,70 @@ const operDrawerAddPhone = (edit = false, id = 0) => {
     editPhoneId.value = id;
 }
 
+const openDrawerAddEmail = (edit = false, id = 0) => {
+    drawerAddEmail.value = true;
+    editEmail.value = edit;
+    editEmailId.value = id;
+}
+
+const openDrawerAddTrr = (edit = false, id = 0) => {
+    drawerAddTrr.value = true;
+    editTrr.value = edit;
+    editTrrId.value = id;
+}
+
+// Delete handlers (expects routes: person.email.delete, person.trr.delete)
+const deleteEmail = async (emailId, label = '') => {
+    if (!emailId) return;
+    openConfirm('email', emailId, label || 'email');
+}
+
+const deleteTrr = async (trrId, label = '') => {
+    if (!trrId) return;
+    openConfirm('trr', trrId, label || 'TRR');
+}
+
+const onConfirmDelete = async () => {
+    const { type, id } = confirm.value;
+    try {
+        if (type === 'email') {
+            await axios.delete(route('person.email.delete', { person: props.person, email_id: id }));
+            const list = props.person.emails || [];
+            const idx = list.findIndex(e => e.id === id);
+            if (idx !== -1) list.splice(idx, 1);
+        } else if (type === 'trr') {
+            await axios.delete(route('person.trr.delete', { person: props.person, trr_id: id }));
+            let list = props.person.trrs || props.person.bank_accounts || props.person.accounts || props.person.bankAccounts || [];
+            const idx = list.findIndex(a => a.id === id);
+            if (idx !== -1) list.splice(idx, 1);
+        } else if (type === 'address') {
+            await axios.delete(route('person.address.delete', { person: props.person, address_id: id }));
+            const list = props.person.addresses || [];
+            const idx = list.findIndex(a => a.id === id);
+            if (idx !== -1) list.splice(idx, 1);
+        } else if (type === 'phone') {
+            await axios.delete(route('person.phone.delete', { person: props.person, phone_id: id }));
+            const list = props.person.phones || [];
+            const idx = list.findIndex(p => p.id === id);
+            if (idx !== -1) list.splice(idx, 1);
+        }
+        closeConfirm();
+    } catch (e) {
+        console.error('Delete failed', e?.response || e);
+        closeConfirm();
+    }
+}
+
+// Safe accessors for optional collections
+const getEmails = (p) => Array.isArray(p?.emails) ? p.emails : []
+const getTRRs = (p) => {
+    if (Array.isArray(p?.trrs)) return p.trrs
+    if (Array.isArray(p?.bank_accounts)) return p.bank_accounts
+    if (Array.isArray(p?.accounts)) return p.accounts
+    if (Array.isArray(p?.bankAccounts)) return p.bankAccounts
+    return []
+}
+
 </script>
 
 <template>
@@ -133,7 +229,10 @@ const operDrawerAddPhone = (edit = false, id = 0) => {
                             <FwbBadge type="yellow">{{ address.country }}</FwbBadge>
                             <FwbBadge>{{ address.type.name }}</FwbBadge>
                         </div>
-                        <button><EditIcon @click="openDrawerAddAddress(true, address.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
+                        <div class="flex items-center gap-2">
+                            <button><EditIcon @click="openDrawerAddAddress(true, address.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
+                            <button @click="openConfirm('address', address.id, address.address)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
+                        </div>
                     </div>
                     <p class="text-sm md:text-base leading-7 text-gray-900">{{ address.address }}</p>
                 </div>
@@ -152,12 +251,72 @@ const operDrawerAddPhone = (edit = false, id = 0) => {
                             <FwbBadge title type="yellow">+{{ phone.country_code }}</FwbBadge>
                             <FwbBadge>{{ phone.type.name }}</FwbBadge>
                         </div>
-                        <button><EditIcon @click="operDrawerAddPhone(true, phone.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
+                        <div class="flex items-center gap-2">
+                            <button><EditIcon @click="operDrawerAddPhone(true, phone.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
+                            <button @click="openConfirm('phone', phone.id, phone.nu)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
+                        </div>
                     </div>
                     <p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p>
                 </div>
             </div>
         </CusTab>
+        <CusTab name="emails" title="Email">
+            <div class="flex justify-end mb-2">
+                <span class="border-b-2 border-gray-500 hover:border-gray-800">
+                    <button><PlusIcon @click="openDrawerAddEmail(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button>
+                </span>
+            </div>
+            <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
+                <template v-if="getEmails(person).length">
+                    <div class="rounded p-2 shadow" v-for="(email, idx) in getEmails(person)" :key="idx">
+                        <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
+                            <div class="flex gap-2">
+                                <FwbBadge v-if="email?.label">{{ email.label }}</FwbBadge>
+                                <FwbBadge v-else type="indigo">Email</FwbBadge>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <button><EditIcon @click="openDrawerAddEmail(true, email.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
+                                <button @click="deleteEmail(email.id, email?.value || email?.email || email?.address)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
+                            </div>
+                        </div>
+                        <p class="text-sm md:text-base leading-7 text-gray-900">
+                            {{ email?.value || email?.email || email?.address || '-' }}
+                        </p>
+                        <p v-if="email?.note" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">{{ email.note }}</p>
+                    </div>
+                </template>
+                <p v-else class="p-2 text-sm text-gray-500">Ni e-poštnih naslovov.</p>
+            </div>
+        </CusTab>
+        <CusTab name="trr" title="TRR">
+            <div class="flex justify-end mb-2">
+                <span class="border-b-2 border-gray-500 hover:border-gray-800">
+                    <button><PlusIcon @click="openDrawerAddTrr(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button>
+                </span>
+            </div>
+            <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
+                <template v-if="getTRRs(person).length">
+                    <div class="rounded p-2 shadow" v-for="(acc, idx) in getTRRs(person)" :key="idx">
+                        <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
+                            <div class="flex gap-2">
+                                <FwbBadge v-if="acc?.bank_name">{{ acc.bank_name }}</FwbBadge>
+                                <FwbBadge v-if="acc?.holder_name" type="indigo">{{ acc.holder_name }}</FwbBadge>
+                                <FwbBadge v-if="acc?.currency" type="yellow">{{ acc.currency }}</FwbBadge>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <button><EditIcon @click="openDrawerAddTrr(true, acc.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
+                                <button @click="deleteTrr(acc.id, acc?.iban || acc?.account_number)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
+                            </div>
+                        </div>
+                        <p class="text-sm md:text-base leading-7 text-gray-900">
+                            {{ acc?.iban || acc?.account_number || acc?.account || acc?.nu || acc?.number || '-' }}
+                        </p>
+                        <p v-if="acc?.notes" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">{{ acc.notes }}</p>
+                    </div>
+                </template>
+                <p v-else class="p-2 text-sm text-gray-500">Ni TRR računov.</p>
+            </div>
+        </CusTab>
         <CusTab name="other" title="Drugo"> 
             ssss4
         </CusTab>
@@ -185,5 +344,50 @@ const operDrawerAddPhone = (edit = false, id = 0) => {
         :id="editPhoneId"
         :edit="editPhone"
     />
+    <!-- Email dialogs -->
+    <EmailCreateForm
+        :show="drawerAddEmail && !editEmail"
+        @close="drawerAddEmail = false"
+        :person="person"
+        :types="types.email_types ?? []"
+    />
+    <EmailUpdateForm
+        :show="drawerAddEmail && editEmail"
+        @close="drawerAddEmail = false"
+        :person="person"
+        :types="types.email_types ?? []"
+        :id="editEmailId"
+    />
+
+    <!-- TRR dialogs -->
+    <TrrCreateForm
+        :show="drawerAddTrr && !editTrr"
+        @close="drawerAddTrr = false"
+        :person="person"
+        :types="types.trr_types ?? []"
+        :banks="types.banks ?? []"
+        :currencies="types.currencies ?? ['EUR']"
+    />
+    <TrrUpdateForm
+        :show="drawerAddTrr && editTrr"
+        @close="drawerAddTrr = false"
+        :person="person"
+        :types="types.trr_types ?? []"
+        :banks="types.banks ?? []"
+        :currencies="types.currencies ?? ['EUR']"
+        :id="editTrrId"
+    />
+    
+    <!-- Confirm deletion dialog -->
+    <ConfirmDialog
+        :show="confirm.show"
+        :title="confirm.title"
+        :message="confirm.message"
+        confirm-text="Izbriši"
+        cancel-text="Prekliči"
+        :danger="true"
+        @close="closeConfirm"
+        @confirm="onConfirmDelete"
+    />
     
 </template>