feat: add membership activable toggle & change password

src/pages/Membership/Membership.js

@@ -51,6 +51,9 @@ export const Membership = observer(() => {
   const changeStatus = async (id, isActive) => {
     const status = isActive ? "inactive" : "active";
     const status2 = isActive ? "Inactivating" : "Activating";
+
+    console.log(status);
+
     try {
       const response = await store.membership.changeStatus(id, status);
 
@@ -80,11 +83,10 @@ export const Membership = observer(() => {
       key: "status",
       render: (text, record) => (
         <Tag
-          color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B", cursor: "pointer" }}
-          onClick={() => changeStatus(record?.id, record?.status)}
+          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B" }}
         >
-          {record?.status === true ? " ACTIVE" : "INACTIVE"}
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
       ),
     },
@@ -93,27 +95,45 @@ export const Membership = observer(() => {
       key: "action",
       render: (text, record) => (
         <Space size="middle">
+          <Button onClick={() => changeStatus(record?.id, record?.isActive)}>
+            {record?.isActive === true ? "Inactive" : "Active"}
+          </Button>
           <Button
             onClick={() => {
-              setVisibleModal(true);
+              let record2 = record;
+              delete record2.password;
+              record2.isChangePassword = false;
+
               setInitialData({
-                ...record,
-                roleId: record.roles.id,
+                ...record2,
+                // roleId: record.roles.id,
               });
+              setVisibleModal(true);
             }}
           >
             Edit
           </Button>
           <Button
+            onClick={() => {
+              let record2 = record;
+              delete record2.password;
+              record2.isChangePassword = true;
+
+              setInitialData({
+                ...record2,
+                // roleId: record.roles.id,
+              });
+              setVisibleModal(true);
+            }}
+          >
+            Ganti Password
+          </Button>
+          {/* <Button
             onClick={async () => {
               handleDelete(record.id);
             }}
           >
             Delete
-          </Button>
-          {/* <Button onClick={showModal}
-          >
-            Role
           </Button> */}
         </Space>
       ),
@@ -132,13 +152,19 @@ export const Membership = observer(() => {
   ];
 
   const onSubmit = async (data) => {
+    data.superior = true;
+
     if (initialData.id) {
       setInitialData({});
       setConfirmLoading(true);
       try {
         console.log(data);
         await store.membership.update(initialData.id, data);
-        message.success("Success Update Data Member");
+        message.success(
+          initialData.isChangePassword
+            ? "Success Change Member Password"
+            : "Success Update Data Member"
+        );
         await store.membership.getData();
       } catch (e) {
         message.error("Failed Update Data Member");

src/pages/Membership/MembershipModal.js

@@ -28,7 +28,10 @@ export const MembershipModal = ({
         form
           .validateFields()
           .then((values) => {
-            onCreate(values);
+            let input = values;
+            input.username = initialData.username;
+
+            onCreate(input);
             form.resetFields();
           })
           .catch((info) => {
@@ -42,58 +45,39 @@ export const MembershipModal = ({
         name="form_in_modal"
         initialValues={initialData}
       >
-        <Form.Item
-          name="username"
-          label="Username"
-          rules={[{ required: true, message: "Please input Username!" }]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="password"
-          label="Password"
-          rules={[{ required: false, message: "Please input password!" }]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="roleId"
-          label="Role"
-          rules={[{ required: true, message: "Please input role id!" }]}
-        >
-          <Select>
-            {store.role.data.map((item) => (
-              <Option key={item.id} value={item.id}>
-                {item.name}
-              </Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item
-          name="superior"
-          label="Superior"
-          rules={[
-            { required: true, message: "Please select superior status!" },
-          ]}
-        >
-          <Select
-            showSearch
-            placeholder="Select Status"
-            optionFilterProp="children"
-            filterOption={(input, option) =>
-              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }
-            filterSort={(optionA, optionB) =>
-              optionA.children
-                .toLowerCase()
-                .localeCompare(optionB.children.toLowerCase())
-            }
+        {initialData.id && !initialData.isChangePassword && (
+          <Form.Item
+            name="username"
+            label="Username"
+            rules={[{ required: true, message: "Please input Username!" }]}
           >
-            {dataStatus.map((it, idx) => {
-              return <Option value={it} key={idx}>{capitalize(it)}</Option>;
-            })}
-          </Select>
-        </Form.Item>
+            <Input />
+          </Form.Item>
+        )}
+        {initialData.id && initialData.isChangePassword && (
+          <Form.Item
+            name="password"
+            label="Password"
+            rules={[{ required: false, message: "Please input password!" }]}
+          >
+            <Input />
+          </Form.Item>
+        )}
+        {initialData.id && !initialData.isChangePassword && (
+          <Form.Item
+            name="roleId"
+            label="Role"
+            rules={[{ required: true, message: "Please input role id!" }]}
+          >
+            <Select>
+              {store.role.data.map((item) => (
+                <Option key={item.id} value={item.id}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+        )}
       </Form>
     </Modal>
   );

src/store/commission.js

@@ -26,8 +26,11 @@ export class Commission {
 
     async getData() {
         const response = await http.get(`/config/commission?page=${this.page}&pageSize=${this.pageSize}`);
-        console.log(response)
-        this.data = response.body.data ?? []
+        this.data = response.body.data.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
+        
         this.total_data = response.body.total_data ?? 0
     }
     async create(data) {

src/store/membership.js

@@ -47,6 +47,8 @@ export class Membership {
     }
 
     async changeStatus(id, status) {
+        console.log(`/users/${id}/${status}`);
+        
         const response = await http.get(`/users/${id}/${status}`);
         await this.getData();
         return response;