feat: master supplier

app/Http/Controllers/SupplierController.php

 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\Supplier\StoreSupplierRequest;
+use App\Http\Requests\Supplier\UpdateSupplierRequest;
 use App\Models\Supplier;
-use Illuminate\Http\Request;
 
 class SupplierController extends Controller
 {
      */
     public function index()
     {
-        return inertia('Suppliers/Index.vue');
+        return inertia('Suppliers/Index.vue', [
+            'initialSearch' => request('search'),
+            'suppliers' => Supplier::filter(request()->only('search'))
+                ->latest()
+                ->paginate(10)
+                ->withQueryString()
+                ->through(fn($customer) => [
+                    'id' => $customer->id,
+                    'name' => $customer->name,
+                    'address' => $customer->address,
+                    'email' => $customer->email,
+                    'phone' => $customer->phone,
+                    'npwp' => $customer->npwp
+                ])
+        ]);
     }
 
     /**
      */
     public function create()
     {
-        //
+        return inertia('Suppliers/Create');
     }
 
     /**
      * @param  \Illuminate\Http\Request  $request
      * @return \Illuminate\Http\Response
      */
-    public function store(Request $request)
+    public function store(StoreSupplierRequest $request)
     {
-        //
+        Supplier::create($request->validated());
+
+        return back()->with('success', __('messages.success.store.supplier'));
     }
 
     /**
      * Display the specified resource.
      *
-     * @param  int  $id
+     * @param  Supplier $supplier
      * @return \Illuminate\Http\Response
      */
-    public function show($id)
+    public function show(Supplier $supplier)
     {
         //
     }
     /**
      * Show the form for editing the specified resource.
      *
-     * @param  int  $id
+     * @param  Supplier $supplier
      * @return \Illuminate\Http\Response
      */
-    public function edit($id)
+    public function edit(Supplier $supplier)
     {
-        //
+        return inertia('Suppliers/Edit.vue', compact('supplier'));
     }
 
     /**
      * Update the specified resource in storage.
      *
      * @param  \Illuminate\Http\Request  $request
-     * @param  int  $id
+     * @param  Supplier $supplier
      * @return \Illuminate\Http\Response
      */
-    public function update(Request $request, $id)
+    public function update(UpdateSupplierRequest $request, Supplier $supplier)
     {
-        //
+        $supplier->update($request->validated());
+
+        return back()->with('success', __('messages.success.update.supplier'));
     }
 
     /**
      * Remove the specified resource from storage.
      *
-     * @param  int  $id
+     * @param  Supplier $supplier
      * @return \Illuminate\Http\Response
      */
-    public function destroy($id)
+    public function destroy(Supplier $supplier)
     {
         //
     }

app/Http/Requests/Supplier/StoreSupplierRequest.php

+<?php
+
+namespace App\Http\Requests\Supplier;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreSupplierRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, mixed>
+     */
+    public function rules()
+    {
+        return [
+            'name' => 'required|string|max:50',
+            'address' => 'required|string',
+            'email' => 'required|string|email|unique:suppliers,email',
+            'phone' => 'required|numeric|digits_between:12,15|unique:suppliers,phone',
+            'npwp' => 'required|numeric|digits_between:15,20|unique:suppliers,npwp'
+        ];
+    }
+}

app/Http/Requests/Supplier/UpdateSupplierRequest.php

+<?php
+
+namespace App\Http\Requests\Supplier;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateSupplierRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, mixed>
+     */
+    public function rules()
+    {
+        return [
+            'name' => 'required|string|max:50',
+            'address' => 'required|string',
+            'email' => 'required|string|email|unique:suppliers,email,' . $this->supplier->id,
+            'phone' => 'required|numeric|digits_between:12,15|unique:suppliers,phone,' . $this->supplier->id,
+            'npwp' => 'required|numeric|digits_between:15,20|unique:suppliers,npwp,' . $this->supplier->id
+        ];
+    }
+}

app/Models/Supplier.php

         'email',
         'npwp'
     ];
+
+    protected $hidden = ['created_at', 'updated_at'];
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['search'] ?? null, function ($query, $search) {
+            $query->where(function ($query) use ($search) {
+                $query->where('name', 'like', '%' . $search . '%')
+                    ->orWhere('phone', 'like', '%' . $search . '%')
+                    ->orWhere('npwp', 'like', '%' . $search . '%');
+            });
+        });
+    }
 }

lang/en/messages.php

             'transaction' => 'Transaction successfully added',
             'user' => 'User Account successfully added',
             'reset_password' => 'Password successfully reset',
-            'customer' => 'Customer successfully addedd'
+            'customer' => 'Customer successfully addedd',
+            'supplier' => 'Supplier successfully addedd'
         ],
         'update' => [
             'type_vehicle' => 'Type vehicle successfully changed',
             'change_password' => 'Password successfully changed',
             'transaction_status' => 'Transaction Status successfully changed',
             'user' => 'User Account successfully changed',
-            'customer' => 'Customer successfully changed'
+            'customer' => 'Customer successfully changed',
+            'supplier' => 'Supplier successfully changed'
         ],
         'destroy' => [
             'type_member' => 'Jenis member successfully deleted',

lang/id/messages.php

             'transaction' => 'Transaksi berhasil ditambahkan',
             'user' => 'Akun user berhasil ditambahkan',
             'reset_password' => 'Kata sandi berhasil di reset',
-            'customer' => 'Pelanggan berhasil ditambahkan'
+            'customer' => 'Pelanggan berhasil ditambahkan',
+            'supplier' => 'Supplier berhasil ditambahkan'
         ],
         'update' => [
             'type_vehicle' => 'Jenis kendaraan berhasil diubah',
             'change_password' => 'Password berhasil diubah',
             'transaction_status' => 'Status transaksi berhasil diubah',
             'user' => 'Akun user berhasil diubah',
-            'customer' => 'Pelanggan berhasil diubah'
+            'customer' => 'Pelanggan berhasil diubah',
+            'supplier' => 'Supplier berhasil diubah'
         ],
         'destroy' => [
             'type_member' => 'Jenis member berhasil dihapus',

public/js/resources_js_pages_Customers_Index_vue.js

                 href: _ctx.route('customers.edit', data.id)
               }, null, 8
               /* PROPS */
-              , ["href"]), [[_directive_tooltip, 'Ubah User', void 0, {
+              , ["href"]), [[_directive_tooltip, 'Ubah Pelanggan', void 0, {
                 bottom: true
               }]])];
             }),

public/js/resources_js_pages_Suppliers_tableHeader_js.js

+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_Suppliers_tableHeader_js"],{
+
+/***/ "./resources/js/pages/Suppliers/tableHeader.js":
+/*!*****************************************************!*\
+  !*** ./resources/js/pages/Suppliers/tableHeader.js ***!
+  \*****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'name',
+  header: 'Nama'
+}, {
+  field: 'address',
+  header: 'Alamat'
+}, {
+  field: 'email',
+  header: 'Surel'
+}, {
+  field: 'phone',
+  header: 'No HP'
+}, {
+  field: 'npwp',
+  header: 'NPWP'
+}]);
+
+/***/ })
+
+}]);

public/js/vue.js

 		"./resources/js/pages/StockProducts/Index.vue",
 		"resources_js_pages_StockProducts_Index_vue"
 	],
+	"./Suppliers/Create": [
+		"./resources/js/pages/Suppliers/Create.vue",
+		"resources_js_pages_Suppliers_Create_vue"
+	],
+	"./Suppliers/Create.vue": [
+		"./resources/js/pages/Suppliers/Create.vue",
+		"resources_js_pages_Suppliers_Create_vue"
+	],
+	"./Suppliers/Edit": [
+		"./resources/js/pages/Suppliers/Edit.vue",
+		"resources_js_pages_Suppliers_Edit_vue"
+	],
+	"./Suppliers/Edit.vue": [
+		"./resources/js/pages/Suppliers/Edit.vue",
+		"resources_js_pages_Suppliers_Edit_vue"
+	],
 	"./Suppliers/Index": [
 		"./resources/js/pages/Suppliers/Index.vue",
 		"resources_js_pages_Suppliers_Index_vue"
 		"./resources/js/pages/Suppliers/Index.vue",
 		"resources_js_pages_Suppliers_Index_vue"
 	],
+	"./Suppliers/tableHeader": [
+		"./resources/js/pages/Suppliers/tableHeader.js",
+		"resources_js_pages_Suppliers_tableHeader_js"
+	],
+	"./Suppliers/tableHeader.js": [
+		"./resources/js/pages/Suppliers/tableHeader.js",
+		"resources_js_pages_Suppliers_tableHeader_js"
+	],
 	"./Users/Create": [
 		"./resources/js/pages/Users/Create.vue",
 		"resources_js_pages_Users_Create_vue"
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"9296b829a7757dee","resources_js_pages_Auth_Login_vue":"8e53429f130c83f5","resources_js_pages_Customers_Create_vue":"1ec93aefdbb7bac8","resources_js_pages_Customers_Edit_vue":"31ae025a81e11ec5","resources_js_pages_Customers_Index_vue":"e46ee9e1139b2c88","resources_js_pages_Customers_tableHeader_js":"7a40a3d5ad60171c","resources_js_pages_Dashboards_Index_vue":"7f4150c836fe81d8","resources_js_pages_Purchases_Index_vue":"41fddd7f79c7a85d","resources_js_pages_Sales_Index_vue":"1da65c4ce926abbc","resources_js_pages_StockProducts_Index_vue":"74a65be5ec079b3f","resources_js_pages_Suppliers_Index_vue":"0f2fb6e79fdbec94","resources_js_pages_Users_Create_vue":"290f8cea7ecbd8da","resources_js_pages_Users_Edit_vue":"4f8b3ff98efb4ef3","resources_js_pages_Users_Index_vue":"575b2403097c7e16","resources_js_pages_Users_Show_vue":"5561027a65c32ca4","resources_js_pages_Users_tableHeader_js":"48f19bd820caf015"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"9296b829a7757dee","resources_js_pages_Auth_Login_vue":"8e53429f130c83f5","resources_js_pages_Customers_Create_vue":"1ec93aefdbb7bac8","resources_js_pages_Customers_Edit_vue":"31ae025a81e11ec5","resources_js_pages_Customers_Index_vue":"38b34ca5e7058678","resources_js_pages_Customers_tableHeader_js":"7a40a3d5ad60171c","resources_js_pages_Dashboards_Index_vue":"7f4150c836fe81d8","resources_js_pages_Purchases_Index_vue":"41fddd7f79c7a85d","resources_js_pages_Sales_Index_vue":"1da65c4ce926abbc","resources_js_pages_StockProducts_Index_vue":"74a65be5ec079b3f","resources_js_pages_Suppliers_Create_vue":"10b828cfed1d6462","resources_js_pages_Suppliers_Edit_vue":"97ca7516c6fa5b2e","resources_js_pages_Suppliers_Index_vue":"ac418f3dc1b81891","resources_js_pages_Suppliers_tableHeader_js":"500bc29ff0dbddce","resources_js_pages_Users_Create_vue":"290f8cea7ecbd8da","resources_js_pages_Users_Edit_vue":"4f8b3ff98efb4ef3","resources_js_pages_Users_Index_vue":"575b2403097c7e16","resources_js_pages_Users_Show_vue":"5561027a65c32ca4","resources_js_pages_Users_tableHeader_js":"48f19bd820caf015"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/Customers/Index.vue

           <AppButtonLink
             icon="pi pi-pencil"
             class="p-button-icon-only p-button-rounded p-button-text"
-            v-tooltip.bottom="'Ubah User'"
+            v-tooltip.bottom="'Ubah Pelanggan'"
             :href="route('customers.edit', data.id)"
           />
         </template>

resources/js/pages/Suppliers/Create.vue

+<script setup>
+import { useForm, Head } from '@inertiajs/inertia-vue3'
+import { useFormErrorReset } from '@/components/useFormErrorReset'
+import AppInputText from '@/components/AppInputText.vue'
+import DashboardLayout from '@/layouts/DashboardLayout.vue'
+
+const form = useForm({
+  name: null,
+  address: null,
+  email: null,
+  phone: null,
+  npwp: null,
+})
+
+useFormErrorReset(form)
+
+const onSubmit = () => {
+  form.post(route('suppliers.store'), { onSuccess: () => form.reset() })
+}
+</script>
+
+<template>
+  <Head title="Tambah Supplier" />
+
+  <DashboardLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #title> Tambah Supplier </template>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Nama"
+                  placeholder="nama"
+                  :error="form.errors.name"
+                  v-model="form.name"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Alamat"
+                  placeholder="alamat"
+                  :error="form.errors.address"
+                  v-model="form.address"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Surel"
+                  placeholder="surel"
+                  :error="form.errors.email"
+                  v-model="form.email"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="No HP"
+                  placeholder="no hp"
+                  type="number"
+                  :error="form.errors.phone"
+                  v-model="form.phone"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="NPWP"
+                  placeholder="npwp"
+                  type="number"
+                  :error="form.errors.npwp"
+                  v-model="form.npwp"
+                />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <Button
+                label="Simpan"
+                icon="pi pi-check"
+                class="p-button-outlined"
+                :disabled="form.processing"
+                @click="onSubmit"
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </DashboardLayout>
+</template>

resources/js/pages/Suppliers/Edit.vue

+<script setup>
+import { useForm, Head } from '@inertiajs/inertia-vue3'
+import { useFormErrorReset } from '@/components/useFormErrorReset'
+import AppInputText from '@/components/AppInputText.vue'
+import DashboardLayout from '@/layouts/DashboardLayout.vue'
+
+const props = defineProps({
+  supplier: Object,
+})
+
+const form = useForm({
+  name: props.supplier.name,
+  address: props.supplier.address,
+  email: props.supplier.email,
+  phone: props.supplier.phone,
+  npwp: props.supplier.npwp,
+})
+
+useFormErrorReset(form)
+
+const onSubmit = () => {
+  form.put(route('suppliers.update', props.supplier.id))
+}
+</script>
+
+<template>
+  <Head title="Ubah Supplier" />
+
+  <DashboardLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #title> Ubah Supplier </template>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Nama"
+                  placeholder="nama"
+                  :error="form.errors.name"
+                  v-model="form.name"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Alamat"
+                  placeholder="alamat"
+                  :error="form.errors.address"
+                  v-model="form.address"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Surel"
+                  placeholder="surel"
+                  :error="form.errors.email"
+                  v-model="form.email"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="No HP"
+                  placeholder="no hp"
+                  type="number"
+                  :error="form.errors.phone"
+                  v-model="form.phone"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="NPWP"
+                  placeholder="npwp"
+                  type="number"
+                  :error="form.errors.npwp"
+                  v-model="form.npwp"
+                />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <Button
+                label="Simpan"
+                icon="pi pi-check"
+                class="p-button-outlined"
+                :disabled="form.processing"
+                @click="onSubmit"
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </DashboardLayout>
+</template>

resources/js/pages/Suppliers/Index.vue

 <script setup>
+import { watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
 import { Head } from '@inertiajs/inertia-vue3'
+import { pickBy } from 'lodash'
+import tableHeader from './tableHeader'
+import { useSearchText } from '@/components/useSearchText'
 import DashboardLayout from '@/layouts/DashboardLayout.vue'
+import AppButtonLink from '@/components/AppButtonLink.vue'
+import AppPagination from '@/components/AppPagination.vue'
+
+const props = defineProps({
+  suppliers: Object,
+  initialSearch: String,
+})
+
+const { search } = useSearchText(props)
+
+watch(search, () => {
+  Inertia.get('/suppliers', pickBy({ search: search.value }), {
+    preserveState: true,
+  })
+})
 </script>
 
 <template>
-  <Head title="Halaman Supplier" />
+  <Head title="Daftar Supplier" />
+
+  <DashboardLayout>
+    <DataTable
+      responsiveLayout="scroll"
+      columnResizeMode="expand"
+      :value="suppliers.data"
+      :rowHover="true"
+      :stripedRows="true"
+    >
+      <template #header>
+        <h1>Supplier</h1>
+
+        <div class="grid">
+          <div class="col-12 md:col-8">
+            <div class="flex align-items-center">
+              <InputText
+                class="w-full md:w-27rem"
+                placeholder="cari, contoh: tina, 08xx, 0x"
+                v-model="search"
+              />
+            </div>
+          </div>
+
+          <div
+            class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end"
+          >
+            <AppButtonLink
+              label="Tambah Supplier"
+              icon="pi pi-pencil"
+              class="p-button-outlined"
+              :href="route('suppliers.create')"
+            />
+          </div>
+        </div>
+      </template>
+
+      <Column
+        v-for="value in tableHeader"
+        :field="value.field"
+        :header="value.header"
+        :key="value.field"
+      />
+
+      <Column>
+        <template #body="{ data }">
+          <AppButtonLink
+            icon="pi pi-pencil"
+            class="p-button-icon-only p-button-rounded p-button-text"
+            v-tooltip.bottom="'Ubah Supplier'"
+            :href="route('suppliers.edit', data.id)"
+          />
+        </template>
+      </Column>
+    </DataTable>
 
-  <DashboardLayout> Halaman Supplier </DashboardLayout>
+    <AppPagination :links="suppliers.links" />
+  </DashboardLayout>
 </template>

resources/js/pages/Suppliers/tableHeader.js

+export default [
+  { field: 'name', header: 'Nama' },
+  { field: 'address', header: 'Alamat' },
+  { field: 'email', header: 'Surel' },
+  { field: 'phone', header: 'No HP' },
+  { field: 'npwp', header: 'NPWP' },
+]