Create routes and views for suppliers.

resources/views/supplier/index.blade.php

@@ -0,0 +1,103 @@
+<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>