104 lines
4.6 KiB
PHP
104 lines
4.6 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<div class="flex flex-row w-full items-center">
|
|
<h2 class="shrinḱ-0 font-semibold pr-12 text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
|
{{ __('supplier.Suppliers') }}
|
|
</h2>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
|
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="max-w-xl">
|
|
<section>
|
|
<header>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('supplier.Add new supplier') }}
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ __("supplier.Add new supplier by clicking add") }}
|
|
</p>
|
|
</header>
|
|
<a class="mt-6 inline-block" href="{{ route('supplier.create') }}"><x-primary-button>{{ __('form.Add') }}</x-primary-button></a>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="max-w" x-data="supplierForm()">
|
|
<section>
|
|
<header class="grid grid-cols-2">
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('supplier.Existing suppliers') }}
|
|
</h2>
|
|
<div class="flex flex-row items-center gap-8">
|
|
<x-input-label for="search_supplier" :value="__('common.Search')"/>
|
|
<x-text-input id="search_supplier" name="search_supplier" type="text"
|
|
class="mt-1 block w-full"
|
|
x-ref="search_supplier"
|
|
autofocus
|
|
placeholder="{{ __('supplier.Search supplier') }}"
|
|
x-on:keydown.window.prevent.slash="$refs.search_supplier.focus()"
|
|
x-model="search_supplier"/>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div class="cursor-pointer grid grid-cols-4 mt-4">
|
|
<div class="font-bold border-b-2">{{ __('common.Name') }}</div>
|
|
<div class="font-bold border-b-2">{{ __('common.Email') }}</div>
|
|
<div class="font-bold border-b-2 text-right">{{ __('invoice.Invoices') }}</div>
|
|
<div class="font-bold border-b-2 text-right">{{ __('common.Created at') }}</div>
|
|
</div>
|
|
|
|
<template x-for="(supplier, index) in getFilteredSuppliers()">
|
|
<div class="even:bg-gray-100 odd:bg-white hover:bg-gray-400">
|
|
<div class="cursor-pointer grid grid-cols-4" x-on:click="window.location.href='/supplier/' + supplier.id;">
|
|
<div x-text="supplier.name"></div>
|
|
<div x-text="supplier.email"></div>
|
|
<div class="text-right" x-text="supplier.invoices.length"></div>
|
|
<div class="text-right" x-text="supplier.created"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</x-app-layout>
|
|
|
|
<script>
|
|
function supplierForm() {
|
|
return {
|
|
suppliers: [],
|
|
search_supplier: '',
|
|
|
|
init() {
|
|
let vm = this;
|
|
axios.get('/supplier')
|
|
.then(function(response) {
|
|
vm.suppliers = response.data;
|
|
})
|
|
},
|
|
|
|
getFilteredSuppliers() {
|
|
if (this.search_supplier === '') {
|
|
return this.suppliers;
|
|
}
|
|
return this.suppliers.filter((supplier) => {
|
|
return supplier.name
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.search_supplier.replace(/ /g, '').toLowerCase())
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|