sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-01-02 18:38:47 +01:00
parent 0c3bbfe18f
commit 0f8cfd3f16
41 changed files with 2013 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/PersonInfoGrid.vue
+181 -35
View File
@@ -1,43 +1,189 @@
<script setup>
import { FwbBadge } from 'flowbite-vue';
import { EditIcon, PlusIcon, UserEditIcon } from '@/Utilities/Icons';
import CusTab from './CusTab.vue';
import CusTabs from './CusTabs.vue';
import { provide, ref, watch } from 'vue';
import PersonUpdateForm from './PersonUpdateForm.vue';
import AddressCreateForm from './AddressCreateForm.vue';
import PhoneCreateForm from './PhoneCreateForm.vue';
const props = defineProps({
person: Object
})
person: Object,
edit: {
type: Boolean,
default: false
},
tabColor: {
type: String,
default: 'blue-600'
},
types: {
type: Object,
default: {
address_types: [],
phone_types: []
}
}
});
const drawerUpdatePerson = ref(false);
const drawerAddAddress = ref(false);
const drawerAddPhone = ref(false);
const editAddress = ref(false);
const editAddressId = ref(0);
const editPhone = ref(false);
const editPhoneId = ref(0);
const getMainAddress = (adresses) => {
const addr = adresses.filter( a => a.type.id === 1 )[0] ?? '';
if( addr !== '' ){
const country = addr.country !== '' ? ` - ${addr.country}` : '';
return addr.address !== '' ? addr.address + country : '';
}
return '';
}
const getMainPhone = (phones) => {
const pho = phones.filter( a => a.type.id === 1 )[0] ?? '';
if( pho !== '' ){
const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : '';
return pho.nu !== '' ? countryCode + pho.nu: '';
}
return '';
}
const openDrawerUpdateClient = () => {
drawerUpdatePerson.value = true;
}
const openDrawerAddAddress = (edit = false, id = 0) => {
drawerAddAddress.value = true;
editAddress.value = edit;
editAddressId.value = id;
}
const operDrawerAddPhone = (edit = false, id = 0) => {
drawerAddPhone.value = true;
editPhone.value = edit;
editPhoneId.value = id;
}
</script>
<template>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
<div class="rounded p-2 shadow">
<p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.full_name }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.tax_number }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.social_security_number }}</p>
</div>
</div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Address</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.main_address }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Phone</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.main_phone }}</p>
</div>
<div class="md:col-span-full lg:col-span-1 rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Description</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.description }}</p>
</div>
</div>
<CusTabs :selected-color="tabColor">
<CusTab name="person" title="Oseba">
<div class="flex justify-end mb-2">
<span class=" border-b-2 border-gray-500 hover:border-gray-800">
<button @click="openDrawerUpdateClient"><UserEditIcon 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-4 gap-2">
<div class="rounded p-2 shadow">
<p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.full_name }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.tax_number }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.social_security_number }}</p>
</div>
</div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Address</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ getMainAddress(person.addresses) }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Phone</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ getMainPhone(person.phones) }}</p>
</div>
<div class="md:col-span-full lg:col-span-1 rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Description</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.description }}</p>
</div>
</div>
</CusTab >
<CusTab name="addresses" title="Naslovi">
<div class="flex justify-end mb-2">
<span class="border-b-2 border-gray-500 hover:border-gray-800">
<button><PlusIcon @click="openDrawerAddAddress(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">
<div class="rounded p-2 shadow" v-for="address in person.addresses">
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex ">
<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>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ address.address }}</p>
</div>
</div>
</CusTab>
<CusTab name="phones" title="Telefonske">
<div class="flex justify-end mb-2">
<span class="border-b-2 border-gray-500 hover:border-gray-800">
<button><PlusIcon @click="operDrawerAddPhone(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">
<div class="rounded p-2 shadow" v-for="phone in person.phones">
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex ">
<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>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p>
</div>
</div>
</CusTab>
<CusTab name="other" title="Drugo">
ssss4
</CusTab>
</CusTabs>
<PersonUpdateForm
:show="drawerUpdatePerson"
@close="drawerUpdatePerson = false"
:person="person"
/>
<AddressCreateForm
:show="drawerAddAddress"
@close="drawerAddAddress = false"
:person="person"
:types="types.address_types"
:id="editAddressId"
:edit="editAddress"
/>
<PhoneCreateForm
:show="drawerAddPhone"
@close="drawerAddPhone = false"
:person="person"
:types="types.phone_types"
:id="editPhoneId"
:edit="editPhone"
/>
</template>