fix: master type-member

app/Http/Controllers/TypeMemberController.php

@@ -4,7 +4,11 @@ namespace App\Http\Controllers;
 
 use App\Http\Requests\TypeMember\StoreTypeMemberRequest;
 use App\Http\Requests\TypeMember\UpdateTypeMemberRequest;
+use App\Models\MaxVehicle;
 use App\Models\TypeMember;
+use App\Models\TypeVehicle;
+use Illuminate\Database\QueryException;
+use Illuminate\Support\Facades\DB;
 
 class TypeMemberController extends Controller
 {
@@ -22,7 +26,7 @@ class TypeMemberController extends Controller
                 'type' => $typeMember->type,
                 'description' => $typeMember->description,
                 'price' => $typeMember->price,
-                'max' => $typeMember->max,
+                'max' => $typeMember->maxVehicleDetail(),
             ]),
         ]);
     }
@@ -34,7 +38,12 @@ class TypeMemberController extends Controller
      */
     public function create()
     {
-        return inertia('typemember/Create');
+        return inertia('typemember/Create', [
+            'typeVehicles' => TypeVehicle::get()->transform(fn($typeVehicle) => [
+                'value' => $typeVehicle->id,
+                'label' => $typeVehicle->type,
+            ]),
+        ]);
     }
 
     /**
@@ -45,9 +54,26 @@ class TypeMemberController extends Controller
      */
     public function store(StoreTypeMemberRequest $request)
     {
-        TypeMember::create($request->validated());
+        DB::beginTransaction();
+
+        try {
+            $typeMember = TypeMember::create($request->validated());
+
+            foreach ($request->maxVehicles as $maxVehicle) {
+                $typeMember->maxVehicles()->create([
+                    'max' => $maxVehicle['max'],
+                    'type_vehicle_id' => $maxVehicle['typeVehicleId'],
+                ]);
+            }
+
+            DB::commit();
 
-        return back()->with('success', __('messages.success.store.type_member'));
+            return back()->with('success', __('messages.success.store.type_member'));
+        } catch (QueryException $qe) {
+            DB::rollBack();
+
+            return back()->with('error', __('messages.error.store.type_member'));
+        }
     }
 
     /**
@@ -75,8 +101,17 @@ class TypeMemberController extends Controller
                 'type' => $typeMember->type,
                 'description' => $typeMember->description,
                 'price' => $typeMember->getRawOriginal('price'),
-                'max' => $typeMember->max,
+                'availableToMember' => $typeMember->member()->exists(),
             ],
+            'typeVehicles' => TypeVehicle::get()->transform(fn($typeVehicle) => [
+                'value' => $typeVehicle->id,
+                'label' => $typeVehicle->type,
+            ]),
+            'maxVehicles' => $typeMember->maxVehicles->transform(fn($maxVehicle) => [
+                'max' => $maxVehicle->max,
+                'type' => $maxVehicle->typeVehicle->type,
+                'typeVehicleId' => $maxVehicle->type_vehicle_id,
+            ]),
         ]);
     }
 
@@ -89,19 +124,43 @@ class TypeMemberController extends Controller
      */
     public function update(UpdateTypeMemberRequest $request, TypeMember $typeMember)
     {
-        $typeMember->update($request->validated());
+        DB::beginTransaction();
+
+        try {
+            $typeMember->update($request->validated());
 
-        return back()->with('success', __('messages.success.update.type_member'));
+            MaxVehicle::where('type_member_id', $typeMember->id)->delete();
+
+            foreach ($request->maxVehicles as $maxVehicle) {
+                $typeMember->maxVehicles()->create([
+                    'max' => $maxVehicle['max'],
+                    'type_vehicle_id' => $maxVehicle['typeVehicleId'],
+                ]);
+            }
+
+            DB::commit();
+
+            return back()->with('success', __('messages.success.update.type_member'));
+
+        } catch (QueryException $qe) {
+            DB::rollBack();
+
+            return back()->with('error', __('messages.error.update.type_member'));
+        }
     }
 
     /**
      * Remove the specified resource from storage.
      *
-     * @param  int  $id
+     * @param  TypeMember  $typeMember
      * @return \Illuminate\Http\Response
      */
-    public function destroy($id)
+    public function destroy(TypeMember $typeMember)
     {
-        //
+        if (!$typeMember->member()->exists()) {
+            $typeMember->delete();
+
+            return to_route('users.index')->with('success', __('messages.success.destroy.type_member'));
+        }
     }
 }

app/Http/Requests/TypeMember/StoreTypeMemberRequest.php

@@ -25,9 +25,8 @@ class StoreTypeMemberRequest extends FormRequest
     {
         return [
             'type' => 'required|string',
-            'description' => 'required|string',
+            'description' => 'nullable',
             'price' => 'required|numeric',
-            'max' => 'required|numeric',
         ];
     }
 }

app/Http/Requests/TypeMember/UpdateTypeMemberRequest.php

@@ -25,9 +25,8 @@ class UpdateTypeMemberRequest extends FormRequest
     {
         return [
             'type' => 'required|string',
-            'description' => 'required|string',
+            'description' => 'nullable',
             'price' => 'required|numeric',
-            'max' => 'required|numeric',
         ];
     }
 }

app/Models/MaxVehicle.php

@@ -11,7 +11,12 @@ class MaxVehicle extends Model
 
     protected $fillable = [
         'max',
-        'member_id',
+        'type_member_id',
         'type_vehicle_id',
     ];
+
+    public function typeVehicle()
+    {
+        return $this->belongsTo(TypeVehicle::class);
+    }
 }

app/Models/TypeMember.php

@@ -2,6 +2,8 @@
 
 namespace App\Models;
 
+use App\Models\MaxVehicle;
+use App\Models\Member;
 use App\Services\CurrencyFormatService;
 use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Casts\Attribute;
@@ -39,10 +41,27 @@ class TypeMember extends Model
         );
     }
 
+    public function maxVehicles()
+    {
+        return $this->hasMany(MaxVehicle::class);
+    }
+
+    public function member()
+    {
+        return $this->hasOne(Member::class);
+    }
+
     public function scopeFilter($query, $id)
     {
         $query->when($id ?? null, function ($query, $id) {
             $query->where('id', $id);
         });
     }
+
+    public function maxVehicleDetail()
+    {
+        $maxVehicle = $this->maxVehicles->transform(fn($maxVehicle) => $maxVehicle->typeVehicle->type . ', ' . 'Maksimal Kendaraan ' . $maxVehicle->max)->toArray();
+
+        return implode(". ", $maxVehicle);
+    }
 }

database/migrations/2022_04_20_031727_create_type_members_table.php

@@ -16,7 +16,7 @@ return new class extends Migration
         Schema::create('type_members', function (Blueprint $table) {
             $table->id();
             $table->string('type');
-            $table->text('description');
+            $table->text('description')->nullable()->default(null);
             $table->unsignedInteger('price');
             $table->timestamps();
         });

database/migrations/2022_04_28_111602_create_max_vehicles_table.php

@@ -16,7 +16,7 @@ return new class extends Migration
         Schema::create('max_vehicles', function (Blueprint $table) {
             $table->id();
             $table->unsignedInteger('max');
-            $table->foreignId('member_id')->constrained();
+            $table->foreignId('type_member_id')->constrained()->cascadeOnDelete();
             $table->foreignId('type_vehicle_id')->constrained();
             $table->timestamps();
         });

designs/diagrams/database.puml

@@ -77,7 +77,7 @@ entity MaxVehicle {
   * id
   __
   * max
-  * member_id
+  * type_member_id
   * type_vehicle_id
 }
 

lang/en/messages.php

@@ -41,6 +41,7 @@ return [
             'user' => 'User Account successfully changed',
         ],
         'destroy' => [
+            'type_member' => 'Jenis member successfully deleted',
             'type_vehicle' => 'Type vehicle successfully deleted',
             'top_up' => 'Top Up successfully deleted',
             'member' => 'Member Account successfully deleted',
@@ -50,10 +51,14 @@ return [
 
     'error' => [
         'store' => [
+            'type_member' => 'Type member failed to be added',
             'member' => 'member failed to be added',
             'change_password' => 'Password invalid',
             'expense' => 'Expense failed to be added',
             'transaction' => 'Transaction failed to be added',
         ],
+        'update' => [
+            'type_member' => 'Type member failed to be changed',
+        ],
     ],
 ];

lang/id/messages.php

@@ -41,6 +41,7 @@ return [
             'user' => 'Akun user berhasil diubah',
         ],
         'destroy' => [
+            'type_member' => 'Jenis member berhasil dihapus',
             'type_vehicle' => 'Jenis kendaraan berhasil dihapus',
             'top_up' => 'Top Up berhasil dihapus',
             'member' => 'Akun member berhasil dihapus',
@@ -50,10 +51,14 @@ return [
 
     'error' => [
         'store' => [
-            'member' => 'member gagal ditambahkan',
+            'type_member' => 'Jenis member gagal ditambahkan',
+            'member' => 'Member gagal ditambahkan',
             'change_password' => 'Password lama salah',
             'expense' => 'Pengeluaran gagal ditambahkan',
             'transaction' => 'Transaksi gagal ditambahkan',
         ],
+        'update' => [
+            'type_member' => 'Jenis member gagal diubah',
+        ],
     ],
 ];

public/js/resources_js_pages_typemember_Create_vue.js

@@ -1,6 +1,97 @@
 "use strict";
 (self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_typemember_Create_vue"],{
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js":
+/*!****************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=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 import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    optionLabel: {
+      type: String,
+      "default": 'label'
+    },
+    optionValue: {
+      type: String,
+      "default": 'value'
+    },
+    optionDisabled: {
+      type: String,
+      "default": 'disabled'
+    },
+    options: {
+      type: Array,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    error: {
+      type: String,
+      "default": null
+    },
+    modelValue: null
+  },
+  emits: ['update:modelValue'],
+  setup: function setup(__props, _ref) {
+    var expose = _ref.expose;
+    expose();
+    var props = __props;
+    var isError = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.error ? true : false;
+    });
+    var forLabel = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.label ? props.label.toLowerCase().replace(/\s+/g, '-') : null;
+    });
+    var ariaDescribedbyLabel = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.label ? props.label.toLowerCase().replace(/\s+/g, '-') + '-help' : null;
+    });
+
+    var selectedDropdownLabel = function selectedDropdownLabel(value) {
+      var result = props.options.find(function (option) {
+        return option[props.optionValue] == value;
+      });
+
+      if (result) {
+        return result[props.optionLabel];
+      }
+    };
+
+    var __returned__ = {
+      props: props,
+      isError: isError,
+      forLabel: forLabel,
+      ariaDescribedbyLabel: ariaDescribedbyLabel,
+      selectedDropdownLabel: selectedDropdownLabel,
+      computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed
+    };
+    Object.defineProperty(__returned__, '__isScriptSetup', {
+      enumerable: false,
+      value: true
+    });
+    return __returned__;
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppInputNumber.vue?vue&type=script&setup=true&lang=js":
 /*!*******************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppInputNumber.vue?vue&type=script&setup=true&lang=js ***!
@@ -615,8 +706,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
 /* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
 /* harmony import */ var _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/components/AppInputText.vue */ "./resources/js/components/AppInputText.vue");
-/* harmony import */ var _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/components/AppInputNumber.vue */ "./resources/js/components/AppInputNumber.vue");
-/* harmony import */ var _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/components/AppTextArea.vue */ "./resources/js/components/AppTextArea.vue");
+/* harmony import */ var _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/components/AppDropdown.vue */ "./resources/js/components/AppDropdown.vue");
+/* harmony import */ var _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/components/AppInputNumber.vue */ "./resources/js/components/AppInputNumber.vue");
+/* harmony import */ var _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/components/AppTextArea.vue */ "./resources/js/components/AppTextArea.vue");
+/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/typemember/TableHeader.js");
+
+
 
 
 
@@ -624,43 +719,107 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  props: {
+    typeVehicles: Object
+  },
   setup: function setup(__props, _ref) {
     var expose = _ref.expose;
     expose();
+    var props = __props;
     var errors = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
       return (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage)().props.value.errors;
     });
     (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(errors, function () {
       form.clearErrors();
     });
+    var listVehicle = (0,vue__WEBPACK_IMPORTED_MODULE_0__.reactive)([]);
+
+    var vehicleClear = function vehicleClear() {
+      listVehicle.splice(0);
+    };
+
+    var vehicleOnDelete = function vehicleOnDelete(index) {
+      listVehicle.splice(index, 1);
+    };
+
+    var vehicleOnAdd = function vehicleOnAdd() {
+      form.clearErrors('type_vehicle_id', 'max_vehicle');
+
+      if (!form.type_vehicle_id) {
+        form.setError('type_vehicle_id', 'Tidak boleh kosong');
+        return;
+      }
+
+      if (!form.max_vehicle) {
+        form.setError('max_vehicle', 'Tidak boleh kosong');
+        return;
+      }
+
+      var listVehicleExist = listVehicle.filter(function (val) {
+        return val.typeVehicleId === form.type_vehicle_id;
+      });
+
+      if (listVehicleExist.length) {
+        form.setError('type_vehicle_id', 'Jenis Kendaraan sudah ada');
+        return;
+      }
+
+      var typeVehicle = props.typeVehicles.filter(function (val) {
+        return val.value === form.type_vehicle_id;
+      })[0];
+      listVehicle.push({
+        max: form.max_vehicle,
+        type: typeVehicle.label,
+        typeVehicleId: typeVehicle.value
+      });
+      form.reset('type_vehicle_id', 'max_vehicle');
+    };
+
     var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm)({
       type: null,
       description: null,
       price: null,
-      max: null
+      type_vehicle_id: null,
+      max_vehicle: null
     });
 
     var submit = function submit() {
-      form.post(route('type-members.store'), {
+      form.transform(function (data) {
+        return {
+          type: data.type,
+          description: data.description,
+          price: data.price,
+          maxVehicles: listVehicle
+        };
+      }).post(route('type-members.store'), {
         onSuccess: function onSuccess() {
-          return form.reset();
+          vehicleClear();
+          form.reset();
         }
       });
     };
 
     var __returned__ = {
+      props: props,
       errors: errors,
+      listVehicle: listVehicle,
+      vehicleClear: vehicleClear,
+      vehicleOnDelete: vehicleOnDelete,
+      vehicleOnAdd: vehicleOnAdd,
       form: form,
       submit: submit,
       computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed,
+      reactive: vue__WEBPACK_IMPORTED_MODULE_0__.reactive,
       watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.Head,
       useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm,
       usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage,
       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
       AppInputText: _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
-      AppInputNumber: _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
-      AppTextArea: _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_5__["default"]
+      AppDropdown: _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
+      AppInputNumber: _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_5__["default"],
+      AppTextArea: _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_6__["default"],
+      Vehicle: _TableHeader__WEBPACK_IMPORTED_MODULE_7__.Vehicle
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
@@ -672,6 +831,87 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992":
+/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992 ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+var _hoisted_1 = {
+  "class": "field"
+};
+var _hoisted_2 = ["for"];
+var _hoisted_3 = {
+  key: 0
+};
+var _hoisted_4 = {
+  key: 1
+};
+var _hoisted_5 = ["id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Dropdown = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Dropdown");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [$props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("label", {
+    key: 0,
+    "for": $setup.forLabel
+  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 9
+  /* TEXT, PROPS */
+  , _hoisted_2)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Dropdown, {
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["w-full", {
+      'p-invalid': $setup.isError
+    }]),
+    id: $setup.forLabel,
+    "aria-describedby": $setup.ariaDescribedbyLabel,
+    "option-disabled": $props.optionDisabled,
+    "option-label": $props.optionLabel,
+    "option-value": $props.optionValue,
+    placeholder: $props.placeholder,
+    options: $props.options,
+    "model-value": $props.modelValue,
+    disabled: $props.disabled,
+    onChange: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('update:modelValue', $event.value);
+    })
+  }, {
+    value: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function (slotProps) {
+      return [slotProps.value ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.selectedDropdownLabel(slotProps.value)), 1
+      /* TEXT */
+      )) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.placeholder), 1
+      /* TEXT */
+      ))];
+    }),
+    option: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function (_ref) {
+      var option = _ref.option,
+          index = _ref.index;
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "option", {
+        option: option,
+        index: index
+      })];
+    }),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["class", "id", "aria-describedby", "option-disabled", "option-label", "option-value", "placeholder", "options", "model-value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
+    key: 1,
+    id: $setup.ariaDescribedbyLabel,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)({
+      'p-error': $setup.isError
+    })
+  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.error), 11
+  /* TEXT, CLASS, PROPS */
+  , _hoisted_5)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
+}
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppFooter.vue?vue&type=template&id=4ab6097e":
 /*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppFooter.vue?vue&type=template&id=4ab6097e ***!
@@ -1370,18 +1610,46 @@ var _hoisted_6 = {
   "class": "col-12 md:col-6"
 };
 var _hoisted_7 = {
-  "class": "col-12 sm:col-6"
+  "class": "col-12"
 };
 var _hoisted_8 = {
-  "class": "col-12 md:col-6"
+  "class": "grid"
 };
 var _hoisted_9 = {
-  "class": "flex flex-column md:flex-row justify-content-end"
+  "class": "col-12 md:col-8"
+};
+var _hoisted_10 = {
+  "class": "grid"
+};
+var _hoisted_11 = {
+  "class": "col-12 md:col-6"
+};
+var _hoisted_12 = {
+  "class": "col-12 md:col-6"
+};
+var _hoisted_13 = {
+  "class": "col-12"
+};
+var _hoisted_14 = {
+  "class": "flex flex-column md:flex-row md:justify-content-end"
+};
+var _hoisted_15 = {
+  "class": "col-12 md-col-6"
+};
+var _hoisted_16 = {
+  "class": "flex justify-content-end"
+};
+var _hoisted_17 = {
+  "class": "flex flex-column md:flex-row md:justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
+
   var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
 
-  var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
+  var _component_Column = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Column");
+
+  var _component_DataTable = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("DataTable");
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["Head"], {
     title: "Tambah Jenis Member"
@@ -1422,24 +1690,89 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             error: $setup.form.errors.description
           }, null, 8
           /* PROPS */
-          , ["modelValue", "error"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputNumber"], {
-            modelValue: $setup.form.max,
+          , ["modelValue", "error"])])])];
+        }),
+        _: 1
+        /* STABLE */
+
+      })])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+        content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDropdown"], {
+            label: "Jenis Kendaraan",
+            placeholder: "jenis kendaraan",
+            modelValue: $setup.form.type_vehicle_id,
             "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
-              return $setup.form.max = $event;
+              return $setup.form.type_vehicle_id = $event;
+            }),
+            options: $props.typeVehicles,
+            error: $setup.form.errors.type_vehicle_id
+          }, null, 8
+          /* PROPS */
+          , ["modelValue", "options", "error"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputNumber"], {
+            modelValue: $setup.form.max_vehicle,
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
+              return $setup.form.max_vehicle = $event;
             }),
             label: "Maksimal Kendaraan",
             placeholder: "maksimal kendaraan",
-            error: $setup.form.errors.max
+            error: $setup.form.errors.max_vehicle
           }, null, 8
           /* PROPS */
-          , ["modelValue", "error"])])])];
+          , ["modelValue", "error"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+            label: "Tambah",
+            icon: "pi pi-car",
+            "class": "p-button-outlined",
+            onClick: $setup.vehicleOnAdd
+          })])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_DataTable, {
+            "striped-rows": "",
+            "row-hover": "",
+            "responsive-layout": "scroll",
+            "column-resize-mode": "expand",
+            "edit-mode": "cell",
+            value: $setup.listVehicle
+          }, {
+            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+              return [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.Vehicle, function (vehicle) {
+                return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Column, {
+                  field: vehicle.field,
+                  header: vehicle.header,
+                  key: vehicle.field
+                }, null, 8
+                /* PROPS */
+                , ["field", "header"]);
+              }), 128
+              /* KEYED_FRAGMENT */
+              )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Column, null, {
+                body: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function (_ref) {
+                  var index = _ref.index;
+                  return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+                    icon: "pi pi-trash",
+                    "class": "p-button-rounded p-button-text",
+                    onClick: function onClick($event) {
+                      return $setup.vehicleOnDelete(index);
+                    }
+                  }, null, 8
+                  /* PROPS */
+                  , ["onClick"])])];
+                }),
+                _: 1
+                /* STABLE */
+
+              })];
+            }),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["value"])])])];
         }),
         footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
             label: "Simpan",
             icon: "pi pi-check",
             "class": "p-button-outlined",
-            disabled: $setup.form.processing,
+            disabled: $setup.form.processing || $setup.listVehicle.length === 0,
             onClick: $setup.submit
           }, null, 8
           /* PROPS */
@@ -1460,6 +1793,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./resources/js/pages/typemember/TableHeader.js":
+/*!******************************************************!*\
+  !*** ./resources/js/pages/typemember/TableHeader.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "IndexTable": () => (/* binding */ IndexTable),
+/* harmony export */   "Vehicle": () => (/* binding */ Vehicle)
+/* harmony export */ });
+var IndexTable = [{
+  field: 'updatedAt',
+  header: 'Diperbaharui'
+}, {
+  field: 'type',
+  header: 'Jenis Member'
+}, {
+  field: 'description',
+  header: 'Keterangan'
+}, {
+  field: 'price',
+  header: 'Tarif Member'
+}, {
+  field: 'max',
+  header: 'Maksimal Kendaraan'
+}];
+var Vehicle = [{
+  field: 'type',
+  header: 'Jenis Kendaraan'
+}, {
+  field: 'max',
+  header: 'Maksimal Kendaraan'
+}];
+
+/***/ }),
+
 /***/ "./resources/js/utils/menu.js":
 /*!************************************!*\
   !*** ./resources/js/utils/menu.js ***!
@@ -1571,6 +1941,33 @@ exports["default"] = (sfc, props) => {
 };
 
 
+/***/ }),
+
+/***/ "./resources/js/components/AppDropdown.vue":
+/*!*************************************************!*\
+  !*** ./resources/js/components/AppDropdown.vue ***!
+  \*************************************************/
+/***/ ((__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 import */ var _AppDropdown_vue_vue_type_template_id_ce0d1992__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AppDropdown.vue?vue&type=template&id=ce0d1992 */ "./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992");
+/* harmony import */ var _AppDropdown_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AppDropdown.vue?vue&type=script&setup=true&lang=js */ "./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js");
+/* harmony import */ var _home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+
+
+
+
+;
+const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_AppDropdown_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_AppDropdown_vue_vue_type_template_id_ce0d1992__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/AppDropdown.vue"]])
+/* hot reload */
+if (false) {}
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
 /***/ }),
 
 /***/ "./resources/js/components/AppFooter.vue":
@@ -1839,6 +2236,21 @@ if (false) {}
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
 
+/***/ }),
+
+/***/ "./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js":
+/*!************************************************************************************!*\
+  !*** ./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js ***!
+  \************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDropdown_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"])
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDropdown_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppDropdown.vue?vue&type=script&setup=true&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/components/AppInputNumber.vue?vue&type=script&setup=true&lang=js":
@@ -1974,6 +2386,21 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Create_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Create.vue?vue&type=script&setup=true&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/typemember/Create.vue?vue&type=script&setup=true&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992":
+/*!*******************************************************************************!*\
+  !*** ./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992 ***!
+  \*******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDropdown_vue_vue_type_template_id_ce0d1992__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDropdown_vue_vue_type_template_id_ce0d1992__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppDropdown.vue?vue&type=template&id=ce0d1992 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992");
+
+
 /***/ }),
 
 /***/ "./resources/js/components/AppFooter.vue?vue&type=template&id=4ab6097e":

public/js/resources_js_pages_typemember_Edit_vue.js

@@ -1,6 +1,141 @@
 "use strict";
 (self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_typemember_Edit_vue"],{
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js":
+/*!**************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=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__ = ({
+  props: {
+    message: {
+      type: String,
+      "default": null
+    },
+    header: {
+      type: String,
+      "default": 'Peringatan'
+    },
+    cancelLabel: {
+      type: String,
+      "default": 'Tidak'
+    },
+    agreeLabel: {
+      type: String,
+      "default": 'Ya'
+    }
+  },
+  emits: ['cancel', 'agree'],
+  setup: function setup(__props, _ref) {
+    var expose = _ref.expose;
+    expose();
+    var __returned__ = {};
+    Object.defineProperty(__returned__, '__isScriptSetup', {
+      enumerable: false,
+      value: true
+    });
+    return __returned__;
+  }
+});
+
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js":
+/*!****************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=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 import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    optionLabel: {
+      type: String,
+      "default": 'label'
+    },
+    optionValue: {
+      type: String,
+      "default": 'value'
+    },
+    optionDisabled: {
+      type: String,
+      "default": 'disabled'
+    },
+    options: {
+      type: Array,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    error: {
+      type: String,
+      "default": null
+    },
+    modelValue: null
+  },
+  emits: ['update:modelValue'],
+  setup: function setup(__props, _ref) {
+    var expose = _ref.expose;
+    expose();
+    var props = __props;
+    var isError = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.error ? true : false;
+    });
+    var forLabel = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.label ? props.label.toLowerCase().replace(/\s+/g, '-') : null;
+    });
+    var ariaDescribedbyLabel = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.label ? props.label.toLowerCase().replace(/\s+/g, '-') + '-help' : null;
+    });
+
+    var selectedDropdownLabel = function selectedDropdownLabel(value) {
+      var result = props.options.find(function (option) {
+        return option[props.optionValue] == value;
+      });
+
+      if (result) {
+        return result[props.optionLabel];
+      }
+    };
+
+    var __returned__ = {
+      props: props,
+      isError: isError,
+      forLabel: forLabel,
+      ariaDescribedbyLabel: ariaDescribedbyLabel,
+      selectedDropdownLabel: selectedDropdownLabel,
+      computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed
+    };
+    Object.defineProperty(__returned__, '__isScriptSetup', {
+      enumerable: false,
+      value: true
+    });
+    return __returned__;
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppInputNumber.vue?vue&type=script&setup=true&lang=js":
 /*!*******************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppInputNumber.vue?vue&type=script&setup=true&lang=js ***!
@@ -612,11 +747,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
-/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
-/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
-/* harmony import */ var _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/components/AppInputText.vue */ "./resources/js/components/AppInputText.vue");
-/* harmony import */ var _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/components/AppInputNumber.vue */ "./resources/js/components/AppInputNumber.vue");
-/* harmony import */ var _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/components/AppTextArea.vue */ "./resources/js/components/AppTextArea.vue");
+/* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js");
+/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
+/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
+/* harmony import */ var _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/components/AppInputText.vue */ "./resources/js/components/AppInputText.vue");
+/* harmony import */ var _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/components/AppDropdown.vue */ "./resources/js/components/AppDropdown.vue");
+/* harmony import */ var _components_AppDialog_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/components/AppDialog.vue */ "./resources/js/components/AppDialog.vue");
+/* harmony import */ var _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/components/AppInputNumber.vue */ "./resources/js/components/AppInputNumber.vue");
+/* harmony import */ var _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/components/AppTextArea.vue */ "./resources/js/components/AppTextArea.vue");
+/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/typemember/TableHeader.js");
+
+
+
+
 
 
 
@@ -625,43 +768,125 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
-    typeMember: Object
+    typeMember: Object,
+    typeVehicles: Object,
+    maxVehicles: Object
   },
   setup: function setup(__props, _ref) {
     var expose = _ref.expose;
     expose();
     var props = __props;
     var errors = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
-      return (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage)().props.value.errors;
+      return (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage)().props.value.errors;
     });
     (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(errors, function () {
       form.clearErrors();
     });
-    var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm)({
+    var visibleDialog = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(false);
+
+    var confirmDialog = function confirmDialog() {
+      visibleDialog.value = true;
+    };
+
+    var onAgree = function onAgree() {
+      return _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia["delete"](route('type-members.destroy', props.typeMember.id));
+    };
+
+    var onCancel = function onCancel() {
+      return visibleDialog.value = false;
+    };
+
+    var listVehicle = (0,vue__WEBPACK_IMPORTED_MODULE_0__.reactive)([]);
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(function () {
+      props.maxVehicles.forEach(function (val) {
+        return listVehicle.push(val);
+      });
+    });
+
+    var vehicleOnDelete = function vehicleOnDelete(index) {
+      listVehicle.splice(index, 1);
+    };
+
+    var vehicleOnAdd = function vehicleOnAdd() {
+      form.clearErrors('type_vehicle_id', 'max_vehicle');
+
+      if (!form.type_vehicle_id) {
+        form.setError('type_vehicle_id', 'Tidak boleh kosong');
+        return;
+      }
+
+      if (!form.max_vehicle) {
+        form.setError('max_vehicle', 'Tidak boleh kosong');
+        return;
+      }
+
+      var listVehicleExist = listVehicle.filter(function (val) {
+        return val.typeVehicleId === form.type_vehicle_id;
+      });
+
+      if (listVehicleExist.length) {
+        form.setError('type_vehicle_id', 'Jenis Kendaraan sudah ada');
+        return;
+      }
+
+      var typeVehicle = props.typeVehicles.filter(function (val) {
+        return val.value === form.type_vehicle_id;
+      })[0];
+      listVehicle.push({
+        max: form.max_vehicle,
+        type: typeVehicle.label,
+        typeVehicleId: typeVehicle.value
+      });
+      form.reset('type_vehicle_id', 'max_vehicle');
+    };
+
+    var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm)({
       type: props.typeMember.type,
       description: props.typeMember.description,
       price: props.typeMember.price,
-      max: props.typeMember.max
+      type_vehicle_id: null,
+      max_vehicle: null
     });
 
     var submit = function submit() {
-      form.put(route('type-members.update', props.typeMember.id));
+      form.transform(function (data) {
+        return {
+          type: data.type,
+          description: data.description,
+          price: data.price,
+          maxVehicles: listVehicle
+        };
+      }).put(route('type-members.update', props.typeMember.id));
     };
 
     var __returned__ = {
       props: props,
       errors: errors,
+      visibleDialog: visibleDialog,
+      confirmDialog: confirmDialog,
+      onAgree: onAgree,
+      onCancel: onCancel,
+      listVehicle: listVehicle,
+      vehicleOnDelete: vehicleOnDelete,
+      vehicleOnAdd: vehicleOnAdd,
       form: form,
       submit: submit,
       computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed,
       watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
-      Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.Head,
-      useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm,
-      usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage,
-      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
-      AppInputText: _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
-      AppInputNumber: _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
-      AppTextArea: _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_5__["default"]
+      reactive: vue__WEBPACK_IMPORTED_MODULE_0__.reactive,
+      onMounted: vue__WEBPACK_IMPORTED_MODULE_0__.onMounted,
+      ref: vue__WEBPACK_IMPORTED_MODULE_0__.ref,
+      Inertia: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia,
+      Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.Head,
+      useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm,
+      usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage,
+      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
+      AppInputText: _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
+      AppDropdown: _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_5__["default"],
+      AppDialog: _components_AppDialog_vue__WEBPACK_IMPORTED_MODULE_6__["default"],
+      AppInputNumber: _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_7__["default"],
+      AppTextArea: _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_8__["default"],
+      Vehicle: _TableHeader__WEBPACK_IMPORTED_MODULE_9__.Vehicle
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
@@ -673,6 +898,166 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e":
+/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e ***!
+  \*******************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+var _hoisted_1 = {
+  "class": "flex align-items-center justify-content-center"
+};
+
+var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+  "class": "pi pi-exclamation-triangle mr-3",
+  style: {
+    "font-size": "2rem"
+  }
+}, null, -1
+/* HOISTED */
+);
+
+var _hoisted_3 = {
+  key: 0
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
+
+  var _component_Dialog = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Dialog");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Dialog, {
+    header: $props.header,
+    style: {
+      width: '450px'
+    },
+    modal: true,
+    breakpoints: {
+      '960px': '75vw'
+    }
+  }, {
+    footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+        label: $props.cancelLabel,
+        icon: "pi pi-times",
+        "class": "p-button-text",
+        onClick: _cache[0] || (_cache[0] = function ($event) {
+          return _ctx.$emit('cancel');
+        })
+      }, null, 8
+      /* PROPS */
+      , ["label"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+        label: $props.agreeLabel,
+        icon: "pi pi-check",
+        "class": "p-button-text",
+        onClick: _cache[1] || (_cache[1] = function ($event) {
+          return _ctx.$emit('agree');
+        })
+      }, null, 8
+      /* PROPS */
+      , ["label"])];
+    }),
+    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_1, [_hoisted_2, $props.message ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("p", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.message), 1
+      /* TEXT */
+      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])];
+    }),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["header"]);
+}
+
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992":
+/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992 ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+var _hoisted_1 = {
+  "class": "field"
+};
+var _hoisted_2 = ["for"];
+var _hoisted_3 = {
+  key: 0
+};
+var _hoisted_4 = {
+  key: 1
+};
+var _hoisted_5 = ["id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Dropdown = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Dropdown");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [$props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("label", {
+    key: 0,
+    "for": $setup.forLabel
+  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 9
+  /* TEXT, PROPS */
+  , _hoisted_2)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Dropdown, {
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["w-full", {
+      'p-invalid': $setup.isError
+    }]),
+    id: $setup.forLabel,
+    "aria-describedby": $setup.ariaDescribedbyLabel,
+    "option-disabled": $props.optionDisabled,
+    "option-label": $props.optionLabel,
+    "option-value": $props.optionValue,
+    placeholder: $props.placeholder,
+    options: $props.options,
+    "model-value": $props.modelValue,
+    disabled: $props.disabled,
+    onChange: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('update:modelValue', $event.value);
+    })
+  }, {
+    value: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function (slotProps) {
+      return [slotProps.value ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.selectedDropdownLabel(slotProps.value)), 1
+      /* TEXT */
+      )) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.placeholder), 1
+      /* TEXT */
+      ))];
+    }),
+    option: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function (_ref) {
+      var option = _ref.option,
+          index = _ref.index;
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "option", {
+        option: option,
+        index: index
+      })];
+    }),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["class", "id", "aria-describedby", "option-disabled", "option-label", "option-value", "placeholder", "options", "model-value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
+    key: 1,
+    id: $setup.ariaDescribedbyLabel,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)({
+      'p-error': $setup.isError
+    })
+  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.error), 11
+  /* TEXT, CLASS, PROPS */
+  , _hoisted_5)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
+}
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppFooter.vue?vue&type=template&id=4ab6097e":
 /*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppFooter.vue?vue&type=template&id=4ab6097e ***!
@@ -1371,18 +1756,59 @@ var _hoisted_6 = {
   "class": "col-12 md:col-6"
 };
 var _hoisted_7 = {
-  "class": "col-12 sm:col-6"
+  "class": "col-12"
 };
 var _hoisted_8 = {
-  "class": "col-12 md:col-6"
+  "class": "grid"
 };
 var _hoisted_9 = {
-  "class": "flex flex-column md:flex-row justify-content-end"
+  "class": "col-12 md:col-8"
+};
+var _hoisted_10 = {
+  "class": "grid"
+};
+var _hoisted_11 = {
+  "class": "col-12 md:col-6"
+};
+var _hoisted_12 = {
+  "class": "col-12 md:col-6"
+};
+var _hoisted_13 = {
+  "class": "col-12"
+};
+var _hoisted_14 = {
+  "class": "flex flex-column md:flex-row md:justify-content-end"
+};
+var _hoisted_15 = {
+  "class": "col-12 md-col-6"
+};
+var _hoisted_16 = {
+  "class": "flex justify-content-end"
+};
+var _hoisted_17 = {
+  "class": "grid"
+};
+var _hoisted_18 = {
+  "class": "col-12 md:col-6"
+};
+var _hoisted_19 = {
+  key: 0,
+  "class": "flex flex-column md:flex-row justify-content-center md:justify-content-start"
+};
+var _hoisted_20 = {
+  "class": "col-12 md:col-6"
+};
+var _hoisted_21 = {
+  "class": "flex flex-column md:flex-row md:justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
+
   var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
 
-  var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
+  var _component_Column = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Column");
+
+  var _component_DataTable = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("DataTable");
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["Head"], {
     title: "Ubah Jenis Member"
@@ -1414,37 +1840,117 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8
           /* PROPS */
           , ["modelValue", "error"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppTextArea"], {
-            label: "Keterangan",
             modelValue: $setup.form.description,
             "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
               return $setup.form.description = $event;
             }),
+            label: "Keterangan",
             placeholder: "tulis keterangan disini",
             error: $setup.form.errors.description
           }, null, 8
           /* PROPS */
-          , ["modelValue", "error"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputNumber"], {
-            modelValue: $setup.form.max,
+          , ["modelValue", "error"])])])];
+        }),
+        _: 1
+        /* STABLE */
+
+      })])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+        content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDropdown"], {
+            label: "Jenis Kendaraan",
+            placeholder: "jenis kendaraan",
+            modelValue: $setup.form.type_vehicle_id,
             "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
-              return $setup.form.max = $event;
+              return $setup.form.type_vehicle_id = $event;
+            }),
+            options: $props.typeVehicles,
+            error: $setup.form.errors.type_vehicle_id
+          }, null, 8
+          /* PROPS */
+          , ["modelValue", "options", "error"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputNumber"], {
+            modelValue: $setup.form.max_vehicle,
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
+              return $setup.form.max_vehicle = $event;
             }),
             label: "Maksimal Kendaraan",
             placeholder: "maksimal kendaraan",
-            error: $setup.form.errors.max
+            error: $setup.form.errors.max_vehicle
           }, null, 8
           /* PROPS */
-          , ["modelValue", "error"])])])];
+          , ["modelValue", "error"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+            label: "Tambah",
+            icon: "pi pi-car",
+            "class": "p-button-outlined",
+            onClick: $setup.vehicleOnAdd
+          })])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_DataTable, {
+            "striped-rows": "",
+            "row-hover": "",
+            "responsive-layout": "scroll",
+            "column-resize-mode": "expand",
+            "edit-mode": "cell",
+            value: $setup.listVehicle
+          }, {
+            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+              return [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.Vehicle, function (vehicle) {
+                return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Column, {
+                  field: vehicle.field,
+                  header: vehicle.header,
+                  key: vehicle.field
+                }, null, 8
+                /* PROPS */
+                , ["field", "header"]);
+              }), 128
+              /* KEYED_FRAGMENT */
+              )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Column, null, {
+                body: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function (_ref) {
+                  var index = _ref.index;
+                  return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+                    icon: "pi pi-trash",
+                    "class": "p-button-rounded p-button-text",
+                    onClick: function onClick($event) {
+                      return $setup.vehicleOnDelete(index);
+                    }
+                  }, null, 8
+                  /* PROPS */
+                  , ["onClick"])])];
+                }),
+                _: 1
+                /* STABLE */
+
+              })];
+            }),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["value"])])])];
         }),
         footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_18, [!$props.typeMember.availableToMember ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_19, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDialog"], {
+            message: "Yakin akan menghapus data ini?",
+            visible: $setup.visibleDialog,
+            "onUpdate:visible": _cache[5] || (_cache[5] = function ($event) {
+              return $setup.visibleDialog = $event;
+            }),
+            onAgree: $setup.onAgree,
+            onCancel: $setup.onCancel
+          }, null, 8
+          /* PROPS */
+          , ["visible"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+            label: "Hapus",
+            icon: "pi pi-trash",
+            "class": "p-button-outlined p-button-danger",
+            onClick: $setup.confirmDialog
+          })])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_20, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_21, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
             label: "Simpan",
             icon: "pi pi-check",
             "class": "p-button-outlined",
-            disabled: $setup.form.processing,
+            disabled: $setup.form.processing || $setup.listVehicle.length === 0,
             onClick: $setup.submit
           }, null, 8
           /* PROPS */
-          , ["disabled"])])];
+          , ["disabled"])])])])];
         }),
         _: 1
         /* STABLE */
@@ -1461,6 +1967,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./resources/js/pages/typemember/TableHeader.js":
+/*!******************************************************!*\
+  !*** ./resources/js/pages/typemember/TableHeader.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "IndexTable": () => (/* binding */ IndexTable),
+/* harmony export */   "Vehicle": () => (/* binding */ Vehicle)
+/* harmony export */ });
+var IndexTable = [{
+  field: 'updatedAt',
+  header: 'Diperbaharui'
+}, {
+  field: 'type',
+  header: 'Jenis Member'
+}, {
+  field: 'description',
+  header: 'Keterangan'
+}, {
+  field: 'price',
+  header: 'Tarif Member'
+}, {
+  field: 'max',
+  header: 'Maksimal Kendaraan'
+}];
+var Vehicle = [{
+  field: 'type',
+  header: 'Jenis Kendaraan'
+}, {
+  field: 'max',
+  header: 'Maksimal Kendaraan'
+}];
+
+/***/ }),
+
 /***/ "./resources/js/utils/menu.js":
 /*!************************************!*\
   !*** ./resources/js/utils/menu.js ***!
@@ -1572,6 +2115,60 @@ exports["default"] = (sfc, props) => {
 };
 
 
+/***/ }),
+
+/***/ "./resources/js/components/AppDialog.vue":
+/*!***********************************************!*\
+  !*** ./resources/js/components/AppDialog.vue ***!
+  \***********************************************/
+/***/ ((__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 import */ var _AppDialog_vue_vue_type_template_id_336aa46e__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AppDialog.vue?vue&type=template&id=336aa46e */ "./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e");
+/* harmony import */ var _AppDialog_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AppDialog.vue?vue&type=script&setup=true&lang=js */ "./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js");
+/* harmony import */ var _home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+
+
+
+
+;
+const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_AppDialog_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_AppDialog_vue_vue_type_template_id_336aa46e__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/AppDialog.vue"]])
+/* hot reload */
+if (false) {}
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
+/***/ }),
+
+/***/ "./resources/js/components/AppDropdown.vue":
+/*!*************************************************!*\
+  !*** ./resources/js/components/AppDropdown.vue ***!
+  \*************************************************/
+/***/ ((__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 import */ var _AppDropdown_vue_vue_type_template_id_ce0d1992__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AppDropdown.vue?vue&type=template&id=ce0d1992 */ "./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992");
+/* harmony import */ var _AppDropdown_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AppDropdown.vue?vue&type=script&setup=true&lang=js */ "./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js");
+/* harmony import */ var _home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+
+
+
+
+;
+const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_AppDropdown_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_AppDropdown_vue_vue_type_template_id_ce0d1992__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/AppDropdown.vue"]])
+/* hot reload */
+if (false) {}
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
 /***/ }),
 
 /***/ "./resources/js/components/AppFooter.vue":
@@ -1840,6 +2437,36 @@ if (false) {}
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
 
+/***/ }),
+
+/***/ "./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js":
+/*!**********************************************************************************!*\
+  !*** ./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js ***!
+  \**********************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDialog_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"])
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDialog_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppDialog.vue?vue&type=script&setup=true&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js");
+ 
+
+/***/ }),
+
+/***/ "./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js":
+/*!************************************************************************************!*\
+  !*** ./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js ***!
+  \************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDropdown_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"])
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDropdown_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppDropdown.vue?vue&type=script&setup=true&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/components/AppInputNumber.vue?vue&type=script&setup=true&lang=js":
@@ -1975,6 +2602,36 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Edit_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Edit.vue?vue&type=script&setup=true&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/typemember/Edit.vue?vue&type=script&setup=true&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e":
+/*!*****************************************************************************!*\
+  !*** ./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e ***!
+  \*****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDialog_vue_vue_type_template_id_336aa46e__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDialog_vue_vue_type_template_id_336aa46e__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppDialog.vue?vue&type=template&id=336aa46e */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e");
+
+
+/***/ }),
+
+/***/ "./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992":
+/*!*******************************************************************************!*\
+  !*** ./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992 ***!
+  \*******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDropdown_vue_vue_type_template_id_ce0d1992__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDropdown_vue_vue_type_template_id_ce0d1992__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppDropdown.vue?vue&type=template&id=ce0d1992 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992");
+
+
 /***/ }),
 
 /***/ "./resources/js/components/AppFooter.vue?vue&type=template&id=4ab6097e":

public/js/resources_js_pages_typemember_Index_vue.js

@@ -399,7 +399,7 @@ __webpack_require__.r(__webpack_exports__);
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__.Head,
       AppButton: _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
-      TableHeader: _TableHeader__WEBPACK_IMPORTED_MODULE_3__["default"]
+      IndexTable: _TableHeader__WEBPACK_IMPORTED_MODULE_3__.IndexTable
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
@@ -990,7 +990,10 @@ var _hoisted_2 = {
   "class": "grid"
 };
 var _hoisted_3 = {
-  "class": "col-12 flex flex-column md:flex-row justify-content-end"
+  "class": "col-12"
+};
+var _hoisted_4 = {
+  "class": "flex flex-column md:flex-row justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_Column = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Column");
@@ -1009,21 +1012,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "striped-rows": true
       }, {
         header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
+          return [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
             label: "Tambah Jenis Member",
             "class": "p-button-outlined",
             icon: "pi pi-pencil",
             href: _ctx.route('type-members.create')
           }, null, 8
           /* PROPS */
-          , ["href"])])])];
+          , ["href"])])])])];
         }),
         "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.TableHeader, function (tableHeader) {
+          return [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.IndexTable, function (indexTable) {
             return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Column, {
-              field: tableHeader.field,
-              header: tableHeader.header,
-              key: tableHeader.field
+              field: indexTable.field,
+              header: indexTable.header,
+              key: indexTable.field
             }, null, 8
             /* PROPS */
             , ["field", "header"]);
@@ -1070,9 +1073,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   "IndexTable": () => (/* binding */ IndexTable),
+/* harmony export */   "Vehicle": () => (/* binding */ Vehicle)
 /* harmony export */ });
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+var IndexTable = [{
   field: 'updatedAt',
   header: 'Diperbaharui'
 }, {
@@ -1087,7 +1091,14 @@ __webpack_require__.r(__webpack_exports__);
 }, {
   field: 'max',
   header: 'Maksimal Kendaraan'
-}]);
+}];
+var Vehicle = [{
+  field: 'type',
+  header: 'Jenis Kendaraan'
+}, {
+  field: 'max',
+  header: 'Maksimal Kendaraan'
+}];
 
 /***/ }),
 

public/js/resources_js_pages_typemember_TableHeader_js.js

@@ -9,9 +9,10 @@
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   "IndexTable": () => (/* binding */ IndexTable),
+/* harmony export */   "Vehicle": () => (/* binding */ Vehicle)
 /* harmony export */ });
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+var IndexTable = [{
   field: 'updatedAt',
   header: 'Diperbaharui'
 }, {
@@ -26,7 +27,14 @@ __webpack_require__.r(__webpack_exports__);
 }, {
   field: 'max',
   header: 'Maksimal Kendaraan'
-}]);
+}];
+var Vehicle = [{
+  field: 'type',
+  header: 'Jenis Kendaraan'
+}, {
+  field: 'max',
+  header: 'Maksimal Kendaraan'
+}];
 
 /***/ })
 

public/js/vue.js

@@ -58101,7 +58101,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
 /******/ 		// 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":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"a7b9a99e5a331088","resources_js_pages_expense_Create_vue":"1772093ec9ad8e1f","resources_js_pages_expense_Index_vue":"51f7facd5c3c3ea6","resources_js_pages_expense_Show_vue":"6200e318fe2f7fed","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"6cd0224828ac8129","resources_js_pages_member_Create_vue":"3ca394fe875a5c72","resources_js_pages_member_Edit_vue":"7b222567b848883e","resources_js_pages_member_Index_vue":"71a31a774bb1b571","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_topup_Create_vue":"24940afcdac09553","resources_js_pages_topup_Edit_vue":"258c3b0746574dc0","resources_js_pages_topup_Index_vue":"70bcf9869c3024d0","resources_js_pages_topup_Show_vue":"cb35ad21e9ce163f","resources_js_pages_topup_TableHeader_js":"c0dc89df0e3b8b7d","resources_js_pages_typemember_Create_vue":"79728a0314d12450","resources_js_pages_typemember_Edit_vue":"94fb9b5b49338c01","resources_js_pages_typemember_Index_vue":"cd93651ebf36d5a5","resources_js_pages_typemember_TableHeader_js":"de81088b132d3e90","resources_js_pages_typevehicle_Create_vue":"0f937d93865a1ea2","resources_js_pages_typevehicle_Edit_vue":"edba97a3715ba957","resources_js_pages_typevehicle_Index_vue":"53c702d33feb6196","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"361bf2589467f820","resources_js_pages_user_Edit_vue":"fdb844cf830ec11c","resources_js_pages_user_Index_vue":"16d93eb7e5210300","resources_js_pages_user_Show_vue":"138fd92d6ae36518","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"a7b9a99e5a331088","resources_js_pages_expense_Create_vue":"1772093ec9ad8e1f","resources_js_pages_expense_Index_vue":"51f7facd5c3c3ea6","resources_js_pages_expense_Show_vue":"6200e318fe2f7fed","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"6cd0224828ac8129","resources_js_pages_member_Create_vue":"3ca394fe875a5c72","resources_js_pages_member_Edit_vue":"7b222567b848883e","resources_js_pages_member_Index_vue":"71a31a774bb1b571","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_topup_Create_vue":"24940afcdac09553","resources_js_pages_topup_Edit_vue":"258c3b0746574dc0","resources_js_pages_topup_Index_vue":"70bcf9869c3024d0","resources_js_pages_topup_Show_vue":"cb35ad21e9ce163f","resources_js_pages_topup_TableHeader_js":"c0dc89df0e3b8b7d","resources_js_pages_typemember_Create_vue":"e9028dd632c51636","resources_js_pages_typemember_Edit_vue":"c51c01c7afe7241d","resources_js_pages_typemember_Index_vue":"3c3878e1d6568226","resources_js_pages_typemember_TableHeader_js":"ac1d31a59f8d464e","resources_js_pages_typevehicle_Create_vue":"0f937d93865a1ea2","resources_js_pages_typevehicle_Edit_vue":"edba97a3715ba957","resources_js_pages_typevehicle_Index_vue":"53c702d33feb6196","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"361bf2589467f820","resources_js_pages_user_Edit_vue":"fdb844cf830ec11c","resources_js_pages_user_Index_vue":"16d93eb7e5210300","resources_js_pages_user_Show_vue":"138fd92d6ae36518","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/typemember/Create.vue

@@ -1,26 +1,89 @@
 <script setup>
-import { computed, watch } from 'vue'
+import { computed, reactive, watch } from 'vue'
 import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppInputText from '@/components/AppInputText.vue'
+import AppDropdown from '@/components/AppDropdown.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
 import AppTextArea from '@/components/AppTextArea.vue'
 
+import { Vehicle } from './TableHeader'
+
+const props = defineProps({
+  typeVehicles: Object,
+})
+
 const errors = computed(() => usePage().props.value.errors)
 
 watch(errors, () => {
   form.clearErrors()
 })
 
+const listVehicle = reactive([])
+
+const vehicleClear = () => {
+  listVehicle.splice(0)
+}
+
+const vehicleOnDelete = (index) => {
+  listVehicle.splice(index, 1)
+}
+
+const vehicleOnAdd = () => {
+  form.clearErrors('type_vehicle_id', 'max_vehicle')
+
+  if (!form.type_vehicle_id) {
+    form.setError('type_vehicle_id', 'Tidak boleh kosong')
+
+    return
+  }
+
+  if (!form.max_vehicle) {
+    form.setError('max_vehicle', 'Tidak boleh kosong')
+
+    return
+  }
+
+  const listVehicleExist = listVehicle.filter((val) => val.typeVehicleId === form.type_vehicle_id)
+  if (listVehicleExist.length) {
+    form.setError('type_vehicle_id', 'Jenis Kendaraan sudah ada')
+
+    return
+  }
+
+  const typeVehicle = props.typeVehicles.filter((val) => val.value === form.type_vehicle_id)[0]
+  listVehicle.push({
+    max: form.max_vehicle,
+    type: typeVehicle.label,
+    typeVehicleId: typeVehicle.value,
+  })
+
+  form.reset('type_vehicle_id', 'max_vehicle')
+}
+
 const form = useForm({
   type: null,
   description: null,
   price: null,
-  max: null,
+  type_vehicle_id: null,
+  max_vehicle: null,
 })
 
 const submit = () => {
-  form.post(route('type-members.store'), { onSuccess: () => form.reset() })
+  form
+    .transform((data) => ({
+      type: data.type,
+      description: data.description,
+      price: data.price,
+      maxVehicles: listVehicle,
+    }))
+    .post(route('type-members.store'), {
+      onSuccess: () => {
+        vehicleClear()
+
+        form.reset()
+      },
+    })
 }
 </script>
 
@@ -52,7 +115,7 @@ const submit = () => {
                 />
               </div>
 
-              <div class="col-12 sm:col-6">
+              <div class="col-12">
                 <AppTextArea
                   v-model="form.description"
                   label="Keterangan"
@@ -60,25 +123,80 @@ const submit = () => {
                   :error="form.errors.description"
                 />
               </div>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+
+    <div class="grid">
+      <div class="col-12 md:col-8">
+        <Card>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppDropdown
+                  label="Jenis Kendaraan"
+                  placeholder="jenis kendaraan"
+                  v-model="form.type_vehicle_id"
+                  :options="typeVehicles"
+                  :error="form.errors.type_vehicle_id"
+                />
+              </div>
 
               <div class="col-12 md:col-6">
                 <AppInputNumber
-                  v-model="form.max"
+                  v-model="form.max_vehicle"
                   label="Maksimal Kendaraan"
                   placeholder="maksimal kendaraan"
-                  :error="form.errors.max"
+                  :error="form.errors.max_vehicle"
                 />
               </div>
+
+              <div class="col-12">
+                <div class="flex flex-column md:flex-row md:justify-content-end">
+                  <Button label="Tambah" icon="pi pi-car" class="p-button-outlined" @click="vehicleOnAdd" />
+                </div>
+              </div>
+
+              <div class="col-12 md-col-6">
+                <DataTable
+                  striped-rows
+                  row-hover
+                  responsive-layout="scroll"
+                  column-resize-mode="expand"
+                  edit-mode="cell"
+                  :value="listVehicle"
+                >
+                  <Column
+                    v-for="vehicle in Vehicle"
+                    :field="vehicle.field"
+                    :header="vehicle.header"
+                    :key="vehicle.field"
+                  />
+
+                  <Column>
+                    <template #body="{ index }">
+                      <div class="flex justify-content-end">
+                        <Button
+                          icon="pi pi-trash"
+                          class="p-button-rounded p-button-text"
+                          @click="vehicleOnDelete(index)"
+                        />
+                      </div>
+                    </template>
+                  </Column>
+                </DataTable>
+              </div>
             </div>
           </template>
-
           <template #footer>
-            <div class="flex flex-column md:flex-row justify-content-end">
+            <div class="flex flex-column md:flex-row md:justify-content-end">
               <Button
                 label="Simpan"
                 icon="pi pi-check"
                 class="p-button-outlined"
-                :disabled="form.processing"
+                :disabled="form.processing || listVehicle.length === 0"
                 @click="submit"
               />
             </div>

resources/js/pages/typemember/Edit.vue

@@ -1,13 +1,20 @@
 <script setup>
-import { computed, watch } from 'vue'
+import { computed, watch, reactive, onMounted, ref } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
 import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppInputText from '@/components/AppInputText.vue'
+import AppDropdown from '@/components/AppDropdown.vue'
+import AppDialog from '@/components/AppDialog.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
 import AppTextArea from '@/components/AppTextArea.vue'
 
+import { Vehicle } from './TableHeader'
+
 const props = defineProps({
   typeMember: Object,
+  typeVehicles: Object,
+  maxVehicles: Object,
 })
 
 const errors = computed(() => usePage().props.value.errors)
@@ -16,15 +23,75 @@ watch(errors, () => {
   form.clearErrors()
 })
 
+const visibleDialog = ref(false)
+
+const confirmDialog = () => {
+  visibleDialog.value = true
+}
+
+const onAgree = () => Inertia.delete(route('type-members.destroy', props.typeMember.id))
+
+const onCancel = () => (visibleDialog.value = false)
+
+const listVehicle = reactive([])
+
+onMounted(() => {
+  props.maxVehicles.forEach((val) => listVehicle.push(val))
+})
+
+const vehicleOnDelete = (index) => {
+  listVehicle.splice(index, 1)
+}
+
+const vehicleOnAdd = () => {
+  form.clearErrors('type_vehicle_id', 'max_vehicle')
+
+  if (!form.type_vehicle_id) {
+    form.setError('type_vehicle_id', 'Tidak boleh kosong')
+
+    return
+  }
+
+  if (!form.max_vehicle) {
+    form.setError('max_vehicle', 'Tidak boleh kosong')
+
+    return
+  }
+
+  const listVehicleExist = listVehicle.filter((val) => val.typeVehicleId === form.type_vehicle_id)
+  if (listVehicleExist.length) {
+    form.setError('type_vehicle_id', 'Jenis Kendaraan sudah ada')
+
+    return
+  }
+
+  const typeVehicle = props.typeVehicles.filter((val) => val.value === form.type_vehicle_id)[0]
+  listVehicle.push({
+    max: form.max_vehicle,
+    type: typeVehicle.label,
+    typeVehicleId: typeVehicle.value,
+  })
+
+  form.reset('type_vehicle_id', 'max_vehicle')
+}
+
 const form = useForm({
   type: props.typeMember.type,
   description: props.typeMember.description,
   price: props.typeMember.price,
-  max: props.typeMember.max,
+  type_vehicle_id: null,
+  max_vehicle: null,
 })
 
 const submit = () => {
-  form.put(route('type-members.update', props.typeMember.id))
+  form
+    .transform((data) => ({
+      type: data.type,
+      description: data.description,
+      price: data.price,
+      maxVehicles: listVehicle,
+    }))
+    .put(route('type-members.update', props.typeMember.id))
 }
 </script>
 
@@ -56,35 +123,115 @@ const submit = () => {
                 />
               </div>
 
-              <div class="col-12 sm:col-6">
+              <div class="col-12">
                 <AppTextArea
-                  label="Keterangan"
                   v-model="form.description"
+                  label="Keterangan"
                   placeholder="tulis keterangan disini"
                   :error="form.errors.description"
                 />
               </div>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+
+    <div class="grid">
+      <div class="col-12 md:col-8">
+        <Card>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppDropdown
+                  label="Jenis Kendaraan"
+                  placeholder="jenis kendaraan"
+                  v-model="form.type_vehicle_id"
+                  :options="typeVehicles"
+                  :error="form.errors.type_vehicle_id"
+                />
+              </div>
 
               <div class="col-12 md:col-6">
                 <AppInputNumber
-                  v-model="form.max"
+                  v-model="form.max_vehicle"
                   label="Maksimal Kendaraan"
                   placeholder="maksimal kendaraan"
-                  :error="form.errors.max"
+                  :error="form.errors.max_vehicle"
                 />
               </div>
+
+              <div class="col-12">
+                <div class="flex flex-column md:flex-row md:justify-content-end">
+                  <Button label="Tambah" icon="pi pi-car" class="p-button-outlined" @click="vehicleOnAdd" />
+                </div>
+              </div>
+
+              <div class="col-12 md-col-6">
+                <DataTable
+                  striped-rows
+                  row-hover
+                  responsive-layout="scroll"
+                  column-resize-mode="expand"
+                  edit-mode="cell"
+                  :value="listVehicle"
+                >
+                  <Column
+                    v-for="vehicle in Vehicle"
+                    :field="vehicle.field"
+                    :header="vehicle.header"
+                    :key="vehicle.field"
+                  />
+
+                  <Column>
+                    <template #body="{ index }">
+                      <div class="flex justify-content-end">
+                        <Button
+                          icon="pi pi-trash"
+                          class="p-button-rounded p-button-text"
+                          @click="vehicleOnDelete(index)"
+                        />
+                      </div>
+                    </template>
+                  </Column>
+                </DataTable>
+              </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="submit"
-              />
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <div
+                  v-if="!typeMember.availableToMember"
+                  class="flex flex-column md:flex-row justify-content-center md:justify-content-start"
+                >
+                  <AppDialog
+                    message="Yakin akan menghapus data ini?"
+                    v-model:visible="visibleDialog"
+                    @agree="onAgree"
+                    @cancel="onCancel"
+                  />
+
+                  <Button
+                    label="Hapus"
+                    icon="pi pi-trash"
+                    class="p-button-outlined p-button-danger"
+                    @click="confirmDialog"
+                  />
+                </div>
+              </div>
+
+              <div class="col-12 md:col-6">
+                <div class="flex flex-column md:flex-row md:justify-content-end">
+                  <Button
+                    label="Simpan"
+                    icon="pi pi-check"
+                    class="p-button-outlined"
+                    :disabled="form.processing || listVehicle.length === 0"
+                    @click="submit"
+                  />
+                </div>
+              </div>
             </div>
           </template>
         </Card>

resources/js/pages/typemember/Index.vue

@@ -3,7 +3,7 @@ import { Head } from '@inertiajs/inertia-vue3'
 import AppButton from '@/components/AppButton.vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 
-import TableHeader from './TableHeader'
+import { IndexTable } from './TableHeader'
 
 defineProps({
   typeMembers: Object,
@@ -25,22 +25,24 @@ defineProps({
         <h1>Jenis Member</h1>
 
         <div class="grid">
-          <div class="col-12 flex flex-column md:flex-row justify-content-end">
-            <AppButton
-              label="Tambah Jenis Member"
-              class="p-button-outlined"
-              icon="pi pi-pencil"
-              :href="route('type-members.create')"
-            />
+          <div class="col-12">
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <AppButton
+                label="Tambah Jenis Member"
+                class="p-button-outlined"
+                icon="pi pi-pencil"
+                :href="route('type-members.create')"
+              />
+            </div>
           </div>
         </div>
       </template>
 
       <Column
-        v-for="tableHeader in TableHeader"
-        :field="tableHeader.field"
-        :header="tableHeader.header"
-        :key="tableHeader.field"
+        v-for="indexTable in IndexTable"
+        :field="indexTable.field"
+        :header="indexTable.header"
+        :key="indexTable.field"
       />
 
       <Column>

resources/js/pages/typemember/TableHeader.js

@@ -1,7 +1,12 @@
-export default [
+export const IndexTable = [
   { field: 'updatedAt', header: 'Diperbaharui' },
   { field: 'type', header: 'Jenis Member' },
   { field: 'description', header: 'Keterangan' },
   { field: 'price', header: 'Tarif Member' },
   { field: 'max', header: 'Maksimal Kendaraan' },
 ]
+
+export const Vehicle = [
+  { field: 'type', header: 'Jenis Kendaraan' },
+  { field: 'max', header: 'Maksimal Kendaraan' },
+]