fix: type member

app/Http/Controllers/TypeMemberController.php

@@ -20,6 +20,7 @@ class TypeMemberController extends Controller
                 'id' => $typeMember->id,
                 'updatedAt' => $typeMember->updated_at,
                 'type' => $typeMember->type,
+                'description' => $typeMember->description,
                 'price' => $typeMember->price,
             ]),
         ]);
@@ -71,6 +72,7 @@ class TypeMemberController extends Controller
             'typeMember' => [
                 'id' => $typeMember->id,
                 'type' => $typeMember->type,
+                'description' => $typeMember->description,
                 'price' => $typeMember->getRawOriginal('price'),
             ],
         ]);

app/Http/Requests/TypeMember/StoreTypeMemberRequest.php

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

app/Http/Requests/TypeMember/UpdateTypeMemberRequest.php

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

app/Models/TypeMember.php

@@ -14,6 +14,7 @@ class TypeMember extends Model
 
     protected $fillable = [
         'type',
+        'description',
         'price',
     ];
 

database/migrations/2022_04_20_031727_create_type_members_table.php

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

designs/diagrams/database.puml

@@ -70,6 +70,7 @@ entity TypeMember {
   * id
   __
   * type
+  * description
   * price
 }
 

public/js/resources_js_pages_typemember_Create_vue.js

@@ -383,6 +383,77 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./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/AppTextArea.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/AppTextArea.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
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    placeholder: {
+      type: String,
+      required: true
+    },
+    error: {
+      type: String,
+      "default": null
+    },
+    rows: {
+      type: Number,
+      "default": 5
+    },
+    cols: {
+      type: Number,
+      "default": 30
+    },
+    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.toLowerCase().replace(/\s+/g, '-');
+    });
+    var ariaDescribedbyLabel = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.label.toLowerCase().replace(/\s+/g, '-') + '-help';
+    });
+    var __returned__ = {
+      props: props,
+      isError: isError,
+      forLabel: forLabel,
+      ariaDescribedbyLabel: ariaDescribedbyLabel,
+      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/AppTopBar.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/AppTopBar.vue?vue&type=script&setup=true&lang=js ***!
@@ -545,6 +616,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+
 
 
 
@@ -562,6 +635,7 @@ __webpack_require__.r(__webpack_exports__);
     });
     var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm)({
       type: null,
+      description: null,
       price: null
     });
 
@@ -584,7 +658,8 @@ __webpack_require__.r(__webpack_exports__);
       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"]
+      AppInputNumber: _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
+      AppTextArea: _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_5__["default"]
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
@@ -1022,6 +1097,61 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./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/AppTextArea.vue?vue&type=template&id=90cee400":
+/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/AppTextArea.vue?vue&type=template&id=90cee400 ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__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 = ["id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Textarea = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Textarea");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("label", {
+    "for": $setup.forLabel
+  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 9
+  /* TEXT, PROPS */
+  , _hoisted_2), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Textarea, {
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["w-full", {
+      'p-invalid': $setup.isError
+    }]),
+    id: $setup.forLabel,
+    "aria-describedby": $setup.ariaDescribedbyLabel,
+    "model-value": $props.modelValue,
+    value: $props.modelValue,
+    placeholder: $props.placeholder,
+    disabled: $props.disabled,
+    "auto-resize": true,
+    rows: $props.rows,
+    cols: $props.cols,
+    onInput: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('update:modelValue', $event.target.value);
+    })
+  }, null, 8
+  /* PROPS */
+  , ["class", "id", "aria-describedby", "model-value", "value", "placeholder", "disabled", "rows", "cols"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
+    key: 0,
+    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_3)) : (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/AppTopBar.vue?vue&type=template&id=42bf62a4":
 /*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./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/AppTopBar.vue?vue&type=template&id=42bf62a4 ***!
@@ -1239,6 +1369,9 @@ var _hoisted_6 = {
   "class": "col-12 md:col-6"
 };
 var _hoisted_7 = {
+  "class": "col-12 sm:col-6"
+};
+var _hoisted_8 = {
   "class": "flex flex-column md:flex-row justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1275,10 +1408,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             error: $setup.form.errors.price
           }, null, 8
           /* PROPS */
+          , ["modelValue", "error"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppTextArea"], {
+            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"])])])];
         }),
         footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
             label: "Simpan",
             icon: "pi pi-check",
             "class": "p-button-outlined",
@@ -1574,6 +1717,33 @@ const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_parkirin_node_mod
 if (false) {}
 
 
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
+/***/ }),
+
+/***/ "./resources/js/components/AppTextArea.vue":
+/*!*************************************************!*\
+  !*** ./resources/js/components/AppTextArea.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 _AppTextArea_vue_vue_type_template_id_90cee400__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AppTextArea.vue?vue&type=template&id=90cee400 */ "./resources/js/components/AppTextArea.vue?vue&type=template&id=90cee400");
+/* harmony import */ var _AppTextArea_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AppTextArea.vue?vue&type=script&setup=true&lang=js */ "./resources/js/components/AppTextArea.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"])(_AppTextArea_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_AppTextArea_vue_vue_type_template_id_90cee400__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/AppTextArea.vue"]])
+/* hot reload */
+if (false) {}
+
+
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
 
 /***/ }),
@@ -1732,6 +1902,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_AppSubSidebar_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]!./AppSubSidebar.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/AppSubSidebar.vue?vue&type=script&setup=true&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/components/AppTextArea.vue?vue&type=script&setup=true&lang=js":
+/*!************************************************************************************!*\
+  !*** ./resources/js/components/AppTextArea.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_AppTextArea_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_AppTextArea_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]!./AppTextArea.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/AppTextArea.vue?vue&type=script&setup=true&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/components/AppTopBar.vue?vue&type=script&setup=true&lang=js":
@@ -1867,6 +2052,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_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppSubSidebar_vue_vue_type_template_id_0addd9bc__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]!./AppSubSidebar.vue?vue&type=template&id=0addd9bc */ "./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/AppSubSidebar.vue?vue&type=template&id=0addd9bc");
 
 
+/***/ }),
+
+/***/ "./resources/js/components/AppTextArea.vue?vue&type=template&id=90cee400":
+/*!*******************************************************************************!*\
+  !*** ./resources/js/components/AppTextArea.vue?vue&type=template&id=90cee400 ***!
+  \*******************************************************************************/
+/***/ ((__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_AppTextArea_vue_vue_type_template_id_90cee400__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_AppTextArea_vue_vue_type_template_id_90cee400__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]!./AppTextArea.vue?vue&type=template&id=90cee400 */ "./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/AppTextArea.vue?vue&type=template&id=90cee400");
+
+
 /***/ }),
 
 /***/ "./resources/js/components/AppTopBar.vue?vue&type=template&id=42bf62a4":

public/js/resources_js_pages_typemember_Edit_vue.js

@@ -383,6 +383,77 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./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/AppTextArea.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/AppTextArea.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
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    placeholder: {
+      type: String,
+      required: true
+    },
+    error: {
+      type: String,
+      "default": null
+    },
+    rows: {
+      type: Number,
+      "default": 5
+    },
+    cols: {
+      type: Number,
+      "default": 30
+    },
+    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.toLowerCase().replace(/\s+/g, '-');
+    });
+    var ariaDescribedbyLabel = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.label.toLowerCase().replace(/\s+/g, '-') + '-help';
+    });
+    var __returned__ = {
+      props: props,
+      isError: isError,
+      forLabel: forLabel,
+      ariaDescribedbyLabel: ariaDescribedbyLabel,
+      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/AppTopBar.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/AppTopBar.vue?vue&type=script&setup=true&lang=js ***!
@@ -545,6 +616,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+
 
 
 
@@ -566,6 +639,7 @@ __webpack_require__.r(__webpack_exports__);
     });
     var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm)({
       type: props.typeMember.type,
+      description: props.typeMember.description,
       price: props.typeMember.price
     });
 
@@ -585,7 +659,8 @@ __webpack_require__.r(__webpack_exports__);
       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"]
+      AppInputNumber: _components_AppInputNumber_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
+      AppTextArea: _components_AppTextArea_vue__WEBPACK_IMPORTED_MODULE_5__["default"]
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
@@ -1023,6 +1098,61 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./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/AppTextArea.vue?vue&type=template&id=90cee400":
+/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/AppTextArea.vue?vue&type=template&id=90cee400 ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__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 = ["id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Textarea = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Textarea");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("label", {
+    "for": $setup.forLabel
+  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 9
+  /* TEXT, PROPS */
+  , _hoisted_2), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Textarea, {
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["w-full", {
+      'p-invalid': $setup.isError
+    }]),
+    id: $setup.forLabel,
+    "aria-describedby": $setup.ariaDescribedbyLabel,
+    "model-value": $props.modelValue,
+    value: $props.modelValue,
+    placeholder: $props.placeholder,
+    disabled: $props.disabled,
+    "auto-resize": true,
+    rows: $props.rows,
+    cols: $props.cols,
+    onInput: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('update:modelValue', $event.target.value);
+    })
+  }, null, 8
+  /* PROPS */
+  , ["class", "id", "aria-describedby", "model-value", "value", "placeholder", "disabled", "rows", "cols"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
+    key: 0,
+    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_3)) : (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/AppTopBar.vue?vue&type=template&id=42bf62a4":
 /*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./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/AppTopBar.vue?vue&type=template&id=42bf62a4 ***!
@@ -1240,6 +1370,9 @@ var _hoisted_6 = {
   "class": "col-12 md:col-6"
 };
 var _hoisted_7 = {
+  "class": "col-12 sm:col-6"
+};
+var _hoisted_8 = {
   "class": "flex flex-column md:flex-row justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1276,10 +1409,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             error: $setup.form.errors.price
           }, 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;
+            }),
+            placeholder: "tulis keterangan disini",
+            error: $setup.form.errors.description
+          }, null, 8
+          /* PROPS */
           , ["modelValue", "error"])])])];
         }),
         footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
             label: "Simpan",
             icon: "pi pi-check",
             "class": "p-button-outlined",
@@ -1575,6 +1718,33 @@ const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_parkirin_node_mod
 if (false) {}
 
 
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
+/***/ }),
+
+/***/ "./resources/js/components/AppTextArea.vue":
+/*!*************************************************!*\
+  !*** ./resources/js/components/AppTextArea.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 _AppTextArea_vue_vue_type_template_id_90cee400__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AppTextArea.vue?vue&type=template&id=90cee400 */ "./resources/js/components/AppTextArea.vue?vue&type=template&id=90cee400");
+/* harmony import */ var _AppTextArea_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AppTextArea.vue?vue&type=script&setup=true&lang=js */ "./resources/js/components/AppTextArea.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"])(_AppTextArea_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_AppTextArea_vue_vue_type_template_id_90cee400__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/AppTextArea.vue"]])
+/* hot reload */
+if (false) {}
+
+
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
 
 /***/ }),
@@ -1733,6 +1903,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_AppSubSidebar_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]!./AppSubSidebar.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/AppSubSidebar.vue?vue&type=script&setup=true&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/components/AppTextArea.vue?vue&type=script&setup=true&lang=js":
+/*!************************************************************************************!*\
+  !*** ./resources/js/components/AppTextArea.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_AppTextArea_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_AppTextArea_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]!./AppTextArea.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/AppTextArea.vue?vue&type=script&setup=true&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/components/AppTopBar.vue?vue&type=script&setup=true&lang=js":
@@ -1868,6 +2053,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_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppSubSidebar_vue_vue_type_template_id_0addd9bc__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]!./AppSubSidebar.vue?vue&type=template&id=0addd9bc */ "./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/AppSubSidebar.vue?vue&type=template&id=0addd9bc");
 
 
+/***/ }),
+
+/***/ "./resources/js/components/AppTextArea.vue?vue&type=template&id=90cee400":
+/*!*******************************************************************************!*\
+  !*** ./resources/js/components/AppTextArea.vue?vue&type=template&id=90cee400 ***!
+  \*******************************************************************************/
+/***/ ((__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_AppTextArea_vue_vue_type_template_id_90cee400__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_AppTextArea_vue_vue_type_template_id_90cee400__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]!./AppTextArea.vue?vue&type=template&id=90cee400 */ "./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/AppTextArea.vue?vue&type=template&id=90cee400");
+
+
 /***/ }),
 
 /***/ "./resources/js/components/AppTopBar.vue?vue&type=template&id=42bf62a4":

public/js/resources_js_pages_typemember_Index_vue.js

@@ -1078,6 +1078,9 @@ __webpack_require__.r(__webpack_exports__);
 }, {
   field: 'type',
   header: 'Jenis Member'
+}, {
+  field: 'description',
+  header: 'Keterangan'
 }, {
   field: 'price',
   header: 'Tarif Member'

public/js/resources_js_pages_typemember_TableHeader_js.js

@@ -17,6 +17,9 @@ __webpack_require__.r(__webpack_exports__);
 }, {
   field: 'type',
   header: 'Jenis Member'
+}, {
+  field: 'description',
+  header: 'Keterangan'
 }, {
   field: 'price',
   header: 'Tarif Member'

public/js/vue.js

@@ -57920,7 +57920,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":"4a7b931b4964795f","resources_js_pages_expense_Index_vue":"35c7886edd28eb55","resources_js_pages_expense_Show_vue":"a51849c1de3c7bbe","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"4e7a9fc8eae40eb0","resources_js_pages_member_Create_vue":"340f646d9409d1c8","resources_js_pages_member_Edit_vue":"2a3f798ea1832dda","resources_js_pages_member_Index_vue":"5eb3fa0a2ef05c44","resources_js_pages_member_TableHeader_js":"5148a502565e8023","resources_js_pages_topup_Create_vue":"5fd3953be1769bcb","resources_js_pages_topup_Edit_vue":"258c3b0746574dc0","resources_js_pages_topup_Index_vue":"2869db3c172e005a","resources_js_pages_topup_Show_vue":"cb35ad21e9ce163f","resources_js_pages_topup_TableHeader_js":"c803a04362b71855","resources_js_pages_typemember_Create_vue":"80038a0a1aaa73e4","resources_js_pages_typemember_Edit_vue":"453084c1e0409302","resources_js_pages_typemember_Index_vue":"d2b9d657af215b8b","resources_js_pages_typemember_TableHeader_js":"8d2fb11e94b09b43","resources_js_pages_user_Create_vue":"17ea473e3abc2b3e","resources_js_pages_user_Edit_vue":"89968c34a0158d4b","resources_js_pages_user_Index_vue":"f32902a7e33cc070","resources_js_pages_user_Show_vue":"54f34c86208cd845","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":"4a7b931b4964795f","resources_js_pages_expense_Index_vue":"35c7886edd28eb55","resources_js_pages_expense_Show_vue":"a51849c1de3c7bbe","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"4e7a9fc8eae40eb0","resources_js_pages_member_Create_vue":"340f646d9409d1c8","resources_js_pages_member_Edit_vue":"2a3f798ea1832dda","resources_js_pages_member_Index_vue":"5eb3fa0a2ef05c44","resources_js_pages_member_TableHeader_js":"5148a502565e8023","resources_js_pages_topup_Create_vue":"5fd3953be1769bcb","resources_js_pages_topup_Edit_vue":"258c3b0746574dc0","resources_js_pages_topup_Index_vue":"2869db3c172e005a","resources_js_pages_topup_Show_vue":"cb35ad21e9ce163f","resources_js_pages_topup_TableHeader_js":"c803a04362b71855","resources_js_pages_typemember_Create_vue":"68805b34963c06c9","resources_js_pages_typemember_Edit_vue":"43c53b3539f1c021","resources_js_pages_typemember_Index_vue":"f24fe1639970cec3","resources_js_pages_typemember_TableHeader_js":"643072277f5ef362","resources_js_pages_user_Create_vue":"17ea473e3abc2b3e","resources_js_pages_user_Edit_vue":"89968c34a0158d4b","resources_js_pages_user_Index_vue":"f32902a7e33cc070","resources_js_pages_user_Show_vue":"54f34c86208cd845","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/components/AppTextArea.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  error: {
+    type: String,
+    default: null,
+  },
+  rows: {
+    type: Number,
+    default: 5,
+  },
+  cols: {
+    type: Number,
+    default: 30,
+  },
+  modelValue: null,
+})
+
+defineEmits(['update:modelValue'])
+
+const isError = computed(() => (props.error ? true : false))
+
+const forLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-'))
+
+const ariaDescribedbyLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-') + '-help')
+</script>
+
+<template>
+  <div class="field">
+    <label :for="forLabel">{{ label }}</label>
+
+    <Textarea
+      class="w-full"
+      :class="{ 'p-invalid': isError }"
+      :id="forLabel"
+      :aria-describedby="ariaDescribedbyLabel"
+      :model-value="modelValue"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :auto-resize="true"
+      :rows="rows"
+      :cols="cols"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+
+    <small v-if="error" :id="ariaDescribedbyLabel" :class="{ 'p-error': isError }">
+      {{ error }}
+    </small>
+  </div>
+</template>

resources/js/pages/typemember/Create.vue

@@ -4,6 +4,7 @@ import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppInputText from '@/components/AppInputText.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
+import AppTextArea from '@/components/AppTextArea.vue'
 
 const errors = computed(() => usePage().props.value.errors)
 
@@ -13,6 +14,7 @@ watch(errors, () => {
 
 const form = useForm({
   type: null,
+  description: null,
   price: null,
 })
 
@@ -48,6 +50,15 @@ const submit = () => {
                   :error="form.errors.price"
                 />
               </div>
+
+              <div class="col-12 sm:col-6">
+                <AppTextArea
+                  v-model="form.description"
+                  label="Keterangan"
+                  placeholder="tulis keterangan disini"
+                  :error="form.errors.description"
+                />
+              </div>
             </div>
           </template>
 

resources/js/pages/typemember/Edit.vue

@@ -4,6 +4,7 @@ import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppInputText from '@/components/AppInputText.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
+import AppTextArea from '@/components/AppTextArea.vue'
 
 const props = defineProps({
   typeMember: Object,
@@ -17,6 +18,7 @@ watch(errors, () => {
 
 const form = useForm({
   type: props.typeMember.type,
+  description: props.typeMember.description,
   price: props.typeMember.price,
 })
 
@@ -52,6 +54,15 @@ const submit = () => {
                   :error="form.errors.price"
                 />
               </div>
+
+              <div class="col-12 sm:col-6">
+                <AppTextArea
+                  label="Keterangan"
+                  v-model="form.description"
+                  placeholder="tulis keterangan disini"
+                  :error="form.errors.description"
+                />
+              </div>
             </div>
           </template>
 

resources/js/pages/typemember/TableHeader.js

@@ -1,5 +1,6 @@
 export default [
   { field: 'updatedAt', header: 'Diperbaharui' },
   { field: 'type', header: 'Jenis Member' },
+  { field: 'description', header: 'Keterangan' },
   { field: 'price', header: 'Tarif Member' },
 ]