Quellcode durchsuchen

feat: master supplier

Muhammad Iqbal Afandi vor 3 Jahren
Ursprung
Commit
d73d6f2ae0

+ 34
- 15
app/Http/Controllers/SupplierController.php Datei anzeigen

@@ -2,8 +2,9 @@
2 2
 
3 3
 namespace App\Http\Controllers;
4 4
 
5
+use App\Http\Requests\Supplier\StoreSupplierRequest;
6
+use App\Http\Requests\Supplier\UpdateSupplierRequest;
5 7
 use App\Models\Supplier;
6
-use Illuminate\Http\Request;
7 8
 
8 9
 class SupplierController extends Controller
9 10
 {
@@ -19,7 +20,21 @@ class SupplierController extends Controller
19 20
      */
20 21
     public function index()
21 22
     {
22
-        return inertia('Suppliers/Index.vue');
23
+        return inertia('Suppliers/Index.vue', [
24
+            'initialSearch' => request('search'),
25
+            'suppliers' => Supplier::filter(request()->only('search'))
26
+                ->latest()
27
+                ->paginate(10)
28
+                ->withQueryString()
29
+                ->through(fn($customer) => [
30
+                    'id' => $customer->id,
31
+                    'name' => $customer->name,
32
+                    'address' => $customer->address,
33
+                    'email' => $customer->email,
34
+                    'phone' => $customer->phone,
35
+                    'npwp' => $customer->npwp
36
+                ])
37
+        ]);
23 38
     }
24 39
 
25 40
     /**
@@ -29,7 +44,7 @@ class SupplierController extends Controller
29 44
      */
30 45
     public function create()
31 46
     {
32
-        //
47
+        return inertia('Suppliers/Create');
33 48
     }
34 49
 
35 50
     /**
@@ -38,18 +53,20 @@ class SupplierController extends Controller
38 53
      * @param  \Illuminate\Http\Request  $request
39 54
      * @return \Illuminate\Http\Response
40 55
      */
41
-    public function store(Request $request)
56
+    public function store(StoreSupplierRequest $request)
42 57
     {
43
-        //
58
+        Supplier::create($request->validated());
59
+
60
+        return back()->with('success', __('messages.success.store.supplier'));
44 61
     }
45 62
 
46 63
     /**
47 64
      * Display the specified resource.
48 65
      *
49
-     * @param  int  $id
66
+     * @param  Supplier $supplier
50 67
      * @return \Illuminate\Http\Response
51 68
      */
52
-    public function show($id)
69
+    public function show(Supplier $supplier)
53 70
     {
54 71
         //
55 72
     }
@@ -57,33 +74,35 @@ class SupplierController extends Controller
57 74
     /**
58 75
      * Show the form for editing the specified resource.
59 76
      *
60
-     * @param  int  $id
77
+     * @param  Supplier $supplier
61 78
      * @return \Illuminate\Http\Response
62 79
      */
63
-    public function edit($id)
80
+    public function edit(Supplier $supplier)
64 81
     {
65
-        //
82
+        return inertia('Suppliers/Edit.vue', compact('supplier'));
66 83
     }
67 84
 
68 85
     /**
69 86
      * Update the specified resource in storage.
70 87
      *
71 88
      * @param  \Illuminate\Http\Request  $request
72
-     * @param  int  $id
89
+     * @param  Supplier $supplier
73 90
      * @return \Illuminate\Http\Response
74 91
      */
75
-    public function update(Request $request, $id)
92
+    public function update(UpdateSupplierRequest $request, Supplier $supplier)
76 93
     {
77
-        //
94
+        $supplier->update($request->validated());
95
+
96
+        return back()->with('success', __('messages.success.update.supplier'));
78 97
     }
79 98
 
80 99
     /**
81 100
      * Remove the specified resource from storage.
82 101
      *
83
-     * @param  int  $id
102
+     * @param  Supplier $supplier
84 103
      * @return \Illuminate\Http\Response
85 104
      */
86
-    public function destroy($id)
105
+    public function destroy(Supplier $supplier)
87 106
     {
88 107
         //
89 108
     }

+ 34
- 0
app/Http/Requests/Supplier/StoreSupplierRequest.php Datei anzeigen

@@ -0,0 +1,34 @@
1
+<?php
2
+
3
+namespace App\Http\Requests\Supplier;
4
+
5
+use Illuminate\Foundation\Http\FormRequest;
6
+
7
+class StoreSupplierRequest extends FormRequest
8
+{
9
+    /**
10
+     * Determine if the user is authorized to make this request.
11
+     *
12
+     * @return bool
13
+     */
14
+    public function authorize()
15
+    {
16
+        return true;
17
+    }
18
+
19
+    /**
20
+     * Get the validation rules that apply to the request.
21
+     *
22
+     * @return array<string, mixed>
23
+     */
24
+    public function rules()
25
+    {
26
+        return [
27
+            'name' => 'required|string|max:50',
28
+            'address' => 'required|string',
29
+            'email' => 'required|string|email|unique:suppliers,email',
30
+            'phone' => 'required|numeric|digits_between:12,15|unique:suppliers,phone',
31
+            'npwp' => 'required|numeric|digits_between:15,20|unique:suppliers,npwp'
32
+        ];
33
+    }
34
+}

+ 34
- 0
app/Http/Requests/Supplier/UpdateSupplierRequest.php Datei anzeigen

@@ -0,0 +1,34 @@
1
+<?php
2
+
3
+namespace App\Http\Requests\Supplier;
4
+
5
+use Illuminate\Foundation\Http\FormRequest;
6
+
7
+class UpdateSupplierRequest extends FormRequest
8
+{
9
+    /**
10
+     * Determine if the user is authorized to make this request.
11
+     *
12
+     * @return bool
13
+     */
14
+    public function authorize()
15
+    {
16
+        return true;
17
+    }
18
+
19
+    /**
20
+     * Get the validation rules that apply to the request.
21
+     *
22
+     * @return array<string, mixed>
23
+     */
24
+    public function rules()
25
+    {
26
+        return [
27
+            'name' => 'required|string|max:50',
28
+            'address' => 'required|string',
29
+            'email' => 'required|string|email|unique:suppliers,email,' . $this->supplier->id,
30
+            'phone' => 'required|numeric|digits_between:12,15|unique:suppliers,phone,' . $this->supplier->id,
31
+            'npwp' => 'required|numeric|digits_between:15,20|unique:suppliers,npwp,' . $this->supplier->id
32
+        ];
33
+    }
34
+}

+ 13
- 0
app/Models/Supplier.php Datei anzeigen

@@ -16,4 +16,17 @@ class Supplier extends Model
16 16
         'email',
17 17
         'npwp'
18 18
     ];
19
+
20
+    protected $hidden = ['created_at', 'updated_at'];
21
+
22
+    public function scopeFilter($query, array $filters)
23
+    {
24
+        $query->when($filters['search'] ?? null, function ($query, $search) {
25
+            $query->where(function ($query) use ($search) {
26
+                $query->where('name', 'like', '%' . $search . '%')
27
+                    ->orWhere('phone', 'like', '%' . $search . '%')
28
+                    ->orWhere('npwp', 'like', '%' . $search . '%');
29
+            });
30
+        });
31
+    }
19 32
 }

+ 4
- 2
lang/en/messages.php Datei anzeigen

@@ -32,7 +32,8 @@ return [
32 32
             'transaction' => 'Transaction successfully added',
33 33
             'user' => 'User Account successfully added',
34 34
             'reset_password' => 'Password successfully reset',
35
-            'customer' => 'Customer successfully addedd'
35
+            'customer' => 'Customer successfully addedd',
36
+            'supplier' => 'Supplier successfully addedd'
36 37
         ],
37 38
         'update' => [
38 39
             'type_vehicle' => 'Type vehicle successfully changed',
@@ -42,7 +43,8 @@ return [
42 43
             'change_password' => 'Password successfully changed',
43 44
             'transaction_status' => 'Transaction Status successfully changed',
44 45
             'user' => 'User Account successfully changed',
45
-            'customer' => 'Customer successfully changed'
46
+            'customer' => 'Customer successfully changed',
47
+            'supplier' => 'Supplier successfully changed'
46 48
         ],
47 49
         'destroy' => [
48 50
             'type_member' => 'Jenis member successfully deleted',

+ 4
- 2
lang/id/messages.php Datei anzeigen

@@ -32,7 +32,8 @@ return [
32 32
             'transaction' => 'Transaksi berhasil ditambahkan',
33 33
             'user' => 'Akun user berhasil ditambahkan',
34 34
             'reset_password' => 'Kata sandi berhasil di reset',
35
-            'customer' => 'Pelanggan berhasil ditambahkan'
35
+            'customer' => 'Pelanggan berhasil ditambahkan',
36
+            'supplier' => 'Supplier berhasil ditambahkan'
36 37
         ],
37 38
         'update' => [
38 39
             'type_vehicle' => 'Jenis kendaraan berhasil diubah',
@@ -42,7 +43,8 @@ return [
42 43
             'change_password' => 'Password berhasil diubah',
43 44
             'transaction_status' => 'Status transaksi berhasil diubah',
44 45
             'user' => 'Akun user berhasil diubah',
45
-            'customer' => 'Pelanggan berhasil diubah'
46
+            'customer' => 'Pelanggan berhasil diubah',
47
+            'supplier' => 'Supplier berhasil diubah'
46 48
         ],
47 49
         'destroy' => [
48 50
             'type_member' => 'Jenis member berhasil dihapus',

+ 1
- 1
public/js/resources_js_pages_Customers_Index_vue.js Datei anzeigen

@@ -1039,7 +1039,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
1039 1039
                 href: _ctx.route('customers.edit', data.id)
1040 1040
               }, null, 8
1041 1041
               /* PROPS */
1042
-              , ["href"]), [[_directive_tooltip, 'Ubah User', void 0, {
1042
+              , ["href"]), [[_directive_tooltip, 'Ubah Pelanggan', void 0, {
1043 1043
                 bottom: true
1044 1044
               }]])];
1045 1045
             }),

+ 1910
- 0
public/js/resources_js_pages_Suppliers_Create_vue.js
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 1911
- 0
public/js/resources_js_pages_Suppliers_Edit_vue.js
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 19315
- 0
public/js/resources_js_pages_Suppliers_Index_copy_vue.js
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 17784
- 43
public/js/resources_js_pages_Suppliers_Index_vue.js
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 33
- 0
public/js/resources_js_pages_Suppliers_tableHeader_js.js Datei anzeigen

@@ -0,0 +1,33 @@
1
+"use strict";
2
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_Suppliers_tableHeader_js"],{
3
+
4
+/***/ "./resources/js/pages/Suppliers/tableHeader.js":
5
+/*!*****************************************************!*\
6
+  !*** ./resources/js/pages/Suppliers/tableHeader.js ***!
7
+  \*****************************************************/
8
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
9
+
10
+__webpack_require__.r(__webpack_exports__);
11
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
12
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
13
+/* harmony export */ });
14
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
15
+  field: 'name',
16
+  header: 'Nama'
17
+}, {
18
+  field: 'address',
19
+  header: 'Alamat'
20
+}, {
21
+  field: 'email',
22
+  header: 'Surel'
23
+}, {
24
+  field: 'phone',
25
+  header: 'No HP'
26
+}, {
27
+  field: 'npwp',
28
+  header: 'NPWP'
29
+}]);
30
+
31
+/***/ })
32
+
33
+}]);

+ 25
- 1
public/js/vue.js Datei anzeigen

@@ -58372,6 +58372,22 @@ var map = {
58372 58372
 		"./resources/js/pages/StockProducts/Index.vue",
58373 58373
 		"resources_js_pages_StockProducts_Index_vue"
58374 58374
 	],
58375
+	"./Suppliers/Create": [
58376
+		"./resources/js/pages/Suppliers/Create.vue",
58377
+		"resources_js_pages_Suppliers_Create_vue"
58378
+	],
58379
+	"./Suppliers/Create.vue": [
58380
+		"./resources/js/pages/Suppliers/Create.vue",
58381
+		"resources_js_pages_Suppliers_Create_vue"
58382
+	],
58383
+	"./Suppliers/Edit": [
58384
+		"./resources/js/pages/Suppliers/Edit.vue",
58385
+		"resources_js_pages_Suppliers_Edit_vue"
58386
+	],
58387
+	"./Suppliers/Edit.vue": [
58388
+		"./resources/js/pages/Suppliers/Edit.vue",
58389
+		"resources_js_pages_Suppliers_Edit_vue"
58390
+	],
58375 58391
 	"./Suppliers/Index": [
58376 58392
 		"./resources/js/pages/Suppliers/Index.vue",
58377 58393
 		"resources_js_pages_Suppliers_Index_vue"
@@ -58380,6 +58396,14 @@ var map = {
58380 58396
 		"./resources/js/pages/Suppliers/Index.vue",
58381 58397
 		"resources_js_pages_Suppliers_Index_vue"
58382 58398
 	],
58399
+	"./Suppliers/tableHeader": [
58400
+		"./resources/js/pages/Suppliers/tableHeader.js",
58401
+		"resources_js_pages_Suppliers_tableHeader_js"
58402
+	],
58403
+	"./Suppliers/tableHeader.js": [
58404
+		"./resources/js/pages/Suppliers/tableHeader.js",
58405
+		"resources_js_pages_Suppliers_tableHeader_js"
58406
+	],
58383 58407
 	"./Users/Create": [
58384 58408
 		"./resources/js/pages/Users/Create.vue",
58385 58409
 		"resources_js_pages_Users_Create_vue"
@@ -58537,7 +58561,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
58537 58561
 /******/ 		// This function allow to reference async chunks
58538 58562
 /******/ 		__webpack_require__.u = (chunkId) => {
58539 58563
 /******/ 			// return url for filenames based on template
58540
-/******/ 			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] + "";
58564
+/******/ 			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] + "";
58541 58565
 /******/ 		};
58542 58566
 /******/ 	})();
58543 58567
 /******/ 	

+ 1
- 1
resources/js/pages/Customers/Index.vue Datei anzeigen

@@ -73,7 +73,7 @@ watch(search, () => {
73 73
           <AppButtonLink
74 74
             icon="pi pi-pencil"
75 75
             class="p-button-icon-only p-button-rounded p-button-text"
76
-            v-tooltip.bottom="'Ubah User'"
76
+            v-tooltip.bottom="'Ubah Pelanggan'"
77 77
             :href="route('customers.edit', data.id)"
78 78
           />
79 79
         </template>

+ 96
- 0
resources/js/pages/Suppliers/Create.vue Datei anzeigen

@@ -0,0 +1,96 @@
1
+<script setup>
2
+import { useForm, Head } from '@inertiajs/inertia-vue3'
3
+import { useFormErrorReset } from '@/components/useFormErrorReset'
4
+import AppInputText from '@/components/AppInputText.vue'
5
+import DashboardLayout from '@/layouts/DashboardLayout.vue'
6
+
7
+const form = useForm({
8
+  name: null,
9
+  address: null,
10
+  email: null,
11
+  phone: null,
12
+  npwp: null,
13
+})
14
+
15
+useFormErrorReset(form)
16
+
17
+const onSubmit = () => {
18
+  form.post(route('suppliers.store'), { onSuccess: () => form.reset() })
19
+}
20
+</script>
21
+
22
+<template>
23
+  <Head title="Tambah Supplier" />
24
+
25
+  <DashboardLayout>
26
+    <div class="grid">
27
+      <div class="col-12 lg:col-8">
28
+        <Card>
29
+          <template #title> Tambah Supplier </template>
30
+          <template #content>
31
+            <div class="grid">
32
+              <div class="col-12 md:col-6">
33
+                <AppInputText
34
+                  label="Nama"
35
+                  placeholder="nama"
36
+                  :error="form.errors.name"
37
+                  v-model="form.name"
38
+                />
39
+              </div>
40
+
41
+              <div class="col-12 md:col-6">
42
+                <AppInputText
43
+                  label="Alamat"
44
+                  placeholder="alamat"
45
+                  :error="form.errors.address"
46
+                  v-model="form.address"
47
+                />
48
+              </div>
49
+
50
+              <div class="col-12 md:col-6">
51
+                <AppInputText
52
+                  label="Surel"
53
+                  placeholder="surel"
54
+                  :error="form.errors.email"
55
+                  v-model="form.email"
56
+                />
57
+              </div>
58
+
59
+              <div class="col-12 md:col-6">
60
+                <AppInputText
61
+                  label="No HP"
62
+                  placeholder="no hp"
63
+                  type="number"
64
+                  :error="form.errors.phone"
65
+                  v-model="form.phone"
66
+                />
67
+              </div>
68
+
69
+              <div class="col-12 md:col-6">
70
+                <AppInputText
71
+                  label="NPWP"
72
+                  placeholder="npwp"
73
+                  type="number"
74
+                  :error="form.errors.npwp"
75
+                  v-model="form.npwp"
76
+                />
77
+              </div>
78
+            </div>
79
+          </template>
80
+
81
+          <template #footer>
82
+            <div class="flex flex-column md:flex-row justify-content-end">
83
+              <Button
84
+                label="Simpan"
85
+                icon="pi pi-check"
86
+                class="p-button-outlined"
87
+                :disabled="form.processing"
88
+                @click="onSubmit"
89
+              />
90
+            </div>
91
+          </template>
92
+        </Card>
93
+      </div>
94
+    </div>
95
+  </DashboardLayout>
96
+</template>

+ 100
- 0
resources/js/pages/Suppliers/Edit.vue Datei anzeigen

@@ -0,0 +1,100 @@
1
+<script setup>
2
+import { useForm, Head } from '@inertiajs/inertia-vue3'
3
+import { useFormErrorReset } from '@/components/useFormErrorReset'
4
+import AppInputText from '@/components/AppInputText.vue'
5
+import DashboardLayout from '@/layouts/DashboardLayout.vue'
6
+
7
+const props = defineProps({
8
+  supplier: Object,
9
+})
10
+
11
+const form = useForm({
12
+  name: props.supplier.name,
13
+  address: props.supplier.address,
14
+  email: props.supplier.email,
15
+  phone: props.supplier.phone,
16
+  npwp: props.supplier.npwp,
17
+})
18
+
19
+useFormErrorReset(form)
20
+
21
+const onSubmit = () => {
22
+  form.put(route('suppliers.update', props.supplier.id))
23
+}
24
+</script>
25
+
26
+<template>
27
+  <Head title="Ubah Supplier" />
28
+
29
+  <DashboardLayout>
30
+    <div class="grid">
31
+      <div class="col-12 lg:col-8">
32
+        <Card>
33
+          <template #title> Ubah Supplier </template>
34
+          <template #content>
35
+            <div class="grid">
36
+              <div class="col-12 md:col-6">
37
+                <AppInputText
38
+                  label="Nama"
39
+                  placeholder="nama"
40
+                  :error="form.errors.name"
41
+                  v-model="form.name"
42
+                />
43
+              </div>
44
+
45
+              <div class="col-12 md:col-6">
46
+                <AppInputText
47
+                  label="Alamat"
48
+                  placeholder="alamat"
49
+                  :error="form.errors.address"
50
+                  v-model="form.address"
51
+                />
52
+              </div>
53
+
54
+              <div class="col-12 md:col-6">
55
+                <AppInputText
56
+                  label="Surel"
57
+                  placeholder="surel"
58
+                  :error="form.errors.email"
59
+                  v-model="form.email"
60
+                />
61
+              </div>
62
+
63
+              <div class="col-12 md:col-6">
64
+                <AppInputText
65
+                  label="No HP"
66
+                  placeholder="no hp"
67
+                  type="number"
68
+                  :error="form.errors.phone"
69
+                  v-model="form.phone"
70
+                />
71
+              </div>
72
+
73
+              <div class="col-12 md:col-6">
74
+                <AppInputText
75
+                  label="NPWP"
76
+                  placeholder="npwp"
77
+                  type="number"
78
+                  :error="form.errors.npwp"
79
+                  v-model="form.npwp"
80
+                />
81
+              </div>
82
+            </div>
83
+          </template>
84
+
85
+          <template #footer>
86
+            <div class="flex flex-column md:flex-row justify-content-end">
87
+              <Button
88
+                label="Simpan"
89
+                icon="pi pi-check"
90
+                class="p-button-outlined"
91
+                :disabled="form.processing"
92
+                @click="onSubmit"
93
+              />
94
+            </div>
95
+          </template>
96
+        </Card>
97
+      </div>
98
+    </div>
99
+  </DashboardLayout>
100
+</template>

+ 77
- 2
resources/js/pages/Suppliers/Index.vue Datei anzeigen

@@ -1,10 +1,85 @@
1 1
 <script setup>
2
+import { watch } from 'vue'
3
+import { Inertia } from '@inertiajs/inertia'
2 4
 import { Head } from '@inertiajs/inertia-vue3'
5
+import { pickBy } from 'lodash'
6
+import tableHeader from './tableHeader'
7
+import { useSearchText } from '@/components/useSearchText'
3 8
 import DashboardLayout from '@/layouts/DashboardLayout.vue'
9
+import AppButtonLink from '@/components/AppButtonLink.vue'
10
+import AppPagination from '@/components/AppPagination.vue'
11
+
12
+const props = defineProps({
13
+  suppliers: Object,
14
+  initialSearch: String,
15
+})
16
+
17
+const { search } = useSearchText(props)
18
+
19
+watch(search, () => {
20
+  Inertia.get('/suppliers', pickBy({ search: search.value }), {
21
+    preserveState: true,
22
+  })
23
+})
4 24
 </script>
5 25
 
6 26
 <template>
7
-  <Head title="Halaman Supplier" />
27
+  <Head title="Daftar Supplier" />
28
+
29
+  <DashboardLayout>
30
+    <DataTable
31
+      responsiveLayout="scroll"
32
+      columnResizeMode="expand"
33
+      :value="suppliers.data"
34
+      :rowHover="true"
35
+      :stripedRows="true"
36
+    >
37
+      <template #header>
38
+        <h1>Supplier</h1>
39
+
40
+        <div class="grid">
41
+          <div class="col-12 md:col-8">
42
+            <div class="flex align-items-center">
43
+              <InputText
44
+                class="w-full md:w-27rem"
45
+                placeholder="cari, contoh: tina, 08xx, 0x"
46
+                v-model="search"
47
+              />
48
+            </div>
49
+          </div>
50
+
51
+          <div
52
+            class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end"
53
+          >
54
+            <AppButtonLink
55
+              label="Tambah Supplier"
56
+              icon="pi pi-pencil"
57
+              class="p-button-outlined"
58
+              :href="route('suppliers.create')"
59
+            />
60
+          </div>
61
+        </div>
62
+      </template>
63
+
64
+      <Column
65
+        v-for="value in tableHeader"
66
+        :field="value.field"
67
+        :header="value.header"
68
+        :key="value.field"
69
+      />
70
+
71
+      <Column>
72
+        <template #body="{ data }">
73
+          <AppButtonLink
74
+            icon="pi pi-pencil"
75
+            class="p-button-icon-only p-button-rounded p-button-text"
76
+            v-tooltip.bottom="'Ubah Supplier'"
77
+            :href="route('suppliers.edit', data.id)"
78
+          />
79
+        </template>
80
+      </Column>
81
+    </DataTable>
8 82
 
9
-  <DashboardLayout> Halaman Supplier </DashboardLayout>
83
+    <AppPagination :links="suppliers.links" />
84
+  </DashboardLayout>
10 85
 </template>

+ 7
- 0
resources/js/pages/Suppliers/tableHeader.js Datei anzeigen

@@ -0,0 +1,7 @@
1
+export default [
2
+  { field: 'name', header: 'Nama' },
3
+  { field: 'address', header: 'Alamat' },
4
+  { field: 'email', header: 'Surel' },
5
+  { field: 'phone', header: 'No HP' },
6
+  { field: 'npwp', header: 'NPWP' },
7
+]