180 lines
8.7 KiB
PHP
180 lines
8.7 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
|
{{ __('customer.Customers') }}
|
|
</h2>
|
|
</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">
|
|
{{ __('customer.Add new customer') }}
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ __("customer.Add new customer by clicking add") }}
|
|
</p>
|
|
</header>
|
|
<a class="mt-6 inline-block" href="{{ route('customer.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="customerForm()">
|
|
<section>
|
|
<header class="grid grid-cols-2">
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('customer.Existing customers') }}
|
|
</h2>
|
|
<div class="flex flex-row items-center gap-8">
|
|
<x-input-label for="search_customer" :value="__('common.Search')"/>
|
|
<x-text-input id="search_customer" name="search_customer" type="text"
|
|
class="mt-1 block w-full"
|
|
x-ref="search_customer"
|
|
autofocus
|
|
placeholder="{{ __('customer.Search customer') }}"
|
|
x-on:keydown.window.prevent.slash="$refs.search_customer.focus()"
|
|
x-model="search_customer"/>
|
|
</div>
|
|
</header>
|
|
|
|
<p class="text-red-600 font-bold" x-text="message" x-show="error"></p>
|
|
<p x-show="success" x-transition
|
|
class="text-sm text-green-600 dark:text-green-400">{{ __('form.Saved') }}</p>
|
|
|
|
<div class="flex flex-row mt-4">
|
|
<div class="w-11/12 grid grid-cols-3">
|
|
<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">{{ __('common.Created at') }}</div>
|
|
</div>
|
|
<div class="w-1/12 border-b-2"></div>
|
|
</div>
|
|
|
|
<template x-for="(customer, index) in getFilteredCustomers()">
|
|
<div class="even:bg-gray-100 odd:bg-white hover:bg-gray-400 flex flex-row">
|
|
<div class="w-11/12 grid grid-cols-3"
|
|
:class="(customer.deleted_at == null) ? 'cursor-pointer' : 'line-through';"
|
|
x-on:click="(customer.deleted_at == null) ? window.location.href='/customer/' + customer.id : ''">
|
|
<div x-text="customer.name"></div>
|
|
<div x-text="customer.email"></div>
|
|
<div x-text="customer.created"></div>
|
|
</div>
|
|
<div class="w-1/12 place-items-end" x-data="{ tooltip: false }" x-show="customer.deleted_at == null" >
|
|
<x-trash-icon class="cursor-pointer h-6"
|
|
x-on:click="deleteCustomer(index);"
|
|
x-on:mouseover="tooltip = true"
|
|
x-on:mouseleave="tooltip = false"
|
|
/>
|
|
<div x-show="tooltip"
|
|
class="text-sm text-white absolute bg-gray-900 rounded-lg p-2 transform -translate-y-16 translate-x-8">
|
|
{{ __('form.Delete') }}
|
|
</div>
|
|
</div>
|
|
<div class="w-1/12 place-items-end" x-data="{ tooltip: false }" x-show="customer.deleted_at != null" >
|
|
<x-restore-icon class="cursor-pointer h-6"
|
|
x-on:click="restoreCustomer(index);"
|
|
x-on:mouseover="tooltip = true"
|
|
x-on:mouseleave="tooltip = false"
|
|
/>
|
|
<div x-show="tooltip"
|
|
class="text-sm text-white absolute bg-gray-900 rounded-lg p-2 transform -translate-y-16 translate-x-8">
|
|
{{ __('form.Restore') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</x-app-layout>
|
|
|
|
<script>
|
|
function customerForm() {
|
|
return {
|
|
customers: [],
|
|
search_customer: '',
|
|
|
|
success: false,
|
|
error: false,
|
|
message: '',
|
|
|
|
init() {
|
|
let vm = this;
|
|
axios.get('/customer-with-trashed')
|
|
.then(function (response) {
|
|
vm.customers = response.data;
|
|
})
|
|
.catch(function (error) {
|
|
vm.error = true;
|
|
vm.message = error.response.data.message;
|
|
})
|
|
|
|
},
|
|
|
|
getFilteredCustomers() {
|
|
if (this.search_customer === '') {
|
|
return this.customers;
|
|
}
|
|
return this.customers.filter((customer) => {
|
|
return customer.name
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.search_customer.replace(/ /g, '').toLowerCase())
|
|
});
|
|
},
|
|
deleteCustomer(index) {
|
|
let vm = this;
|
|
let customer_key = Object.keys(this.customers).find(key => (this.customers[key].id == this.getFilteredCustomers()[index].id));
|
|
axios.delete('/customer/' + this.customers[customer_key].id)
|
|
.then(function (response) {
|
|
vm.error = false;
|
|
vm.success = true;
|
|
vm.message = '';
|
|
vm.customers[customer_key].deleted_at = 0;
|
|
window.setTimeout(function () {
|
|
vm.success = false;
|
|
}, 1000);
|
|
})
|
|
.catch(function (error) {
|
|
vm.error = true;
|
|
vm.success = false;
|
|
vm.message = error.response.data.message;
|
|
});
|
|
},
|
|
|
|
restoreCustomer(index) {
|
|
let vm = this;
|
|
let customer_key = Object.keys(this.customers).find(key => (this.customers[key].id == this.getFilteredCustomers()[index].id));
|
|
axios.get('/customer/' + this.customers[customer_key].id + '/restore')
|
|
.then(function (response) {
|
|
vm.error = false;
|
|
vm.success = true;
|
|
vm.message = '';
|
|
vm.customers[customer_key].deleted_at = null;
|
|
window.setTimeout(function () {
|
|
vm.success = false;
|
|
}, 1000);
|
|
})
|
|
.catch(function(error) {
|
|
vm.error = true;
|
|
vm.success = false;
|
|
vm.message = error.response.data.message;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|