asadiqbal08/Added Approve and Reset button to Refine Admin (#603)

* Added Approve and Reset button to Refine Admin * Black formatting
mitodl · Jun 7, 2022 · 88d1597 · 88d1597
1 parent 2fc6d51
commit 88d1597
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 8 deletions.
diff --git a/flexiblepricing/views/v0/__init__.py b/flexiblepricing/views/v0/__init__.py
@@ -1,11 +1,11 @@
 """
 MITxOnline Flexible Pricing/Financial Aid views
 """
-from rest_framework import mixins, status
 from rest_framework.viewsets import ModelViewSet
 from rest_framework.authentication import SessionAuthentication, TokenAuthentication
 from rest_framework.permissions import IsAuthenticated, IsAdminUser
 from django_filters.rest_framework import DjangoFilterBackend
+from django.db import transaction
 from main.views import RefinePagination
 from django.db.models import Q
 
@@ -60,3 +60,9 @@ def get_queryset(self):
             queryset = queryset.filter(status=status_search)
 
         return queryset
+
+    def update(self, request, *args, **kwargs):
+        """Update the flexible pricing status"""
+        with transaction.atomic():
+            update_result = super().update(request, *args, **kwargs)
+            return update_result
diff --git a/frontend/staff-dashboard/src/interfaces/index.d.ts b/frontend/staff-dashboard/src/interfaces/index.d.ts
@@ -32,6 +32,7 @@ export interface IFlexiblePriceRequest {
     date_documents_sent: Date;
     justification: string;
     country_of_residence: string;
+    action: string
 }
 
 export interface IFlexiblePriceStatus {

diff --git a/frontend/staff-dashboard/src/pages/flexible_pricing/list.tsx b/frontend/staff-dashboard/src/pages/flexible_pricing/list.tsx
@@ -1,26 +1,27 @@
-import { IResourceComponentsProps, useMany, CrudFilters, HttpError } from "@pankod/refine-core";
+import { useUpdate, CrudFilters, HttpError } from "@pankod/refine-core";
+import React from "react"
+const {  useState  } = React;
 import {
+    Button,
     List,
     DateField,
-    ShowButton,
     Table,
     useTable,
     Space, 
-    EditButton,
     FilterDropdown,
     Select,
     useSelect,
     FormProps,
     Form,
     Input, 
-    Button,
     Icons,
     Row,
     Col,
     Card,
+    Modal
 } from "@pankod/refine-antd";
 
-import { IFlexiblePriceRequest, IFlexiblePriceStatus, IFlexiblePriceRequestFilters } from "interfaces";
+import { IFlexiblePriceRequest, IFlexiblePriceRequestFilters } from "interfaces";
 
 const FlexiblePricingStatuses = [
     {
@@ -97,6 +98,34 @@ export const FlexiblePricingList: React.FC = () => {
             return filters;
         }
     });
+    const [modaldata, setmodaldata] = useState({} as IFlexiblePriceRequest);
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const mutationResult = useUpdate<IFlexiblePriceRequest>();
+    const { mutate, isLoading: mutateIsLoading } = mutationResult;
+    const handleUpdate = (item: IFlexiblePriceRequest, status: string) => {
+        mutate({ 
+            resource: "flexible_pricing/applications_admin",
+            id: item.id,
+            mutationMode: "undoable",
+            values: { ...item, status }
+        });
+    };
+
+    const showModal = (record: IFlexiblePriceRequest, action: string) => {
+        const newRecord = {...record, 'action': action}
+        setmodaldata(newRecord);
+        setIsModalVisible(true);
+    };
+
+    const handleOk = () => {
+        handleUpdate(modaldata, modaldata.action)
+        setIsModalVisible(false);
+    };
+
+    const handleCancel = () => {
+        setIsModalVisible(false);
+    };
+
 
     return (
         <div>
@@ -151,10 +180,60 @@ export const FlexiblePricingList: React.FC = () => {
                                 title="Created At"
                                 render={(value) => <DateField format="LLL" value={value} />}
                             />
+                            <Table.Column<IFlexiblePriceRequest>
+                                title="Actions"
+                                dataIndex="actions"
+                                render={(index, record) => {
+                                    return (
+                                        <div>
+                                            <Space>
+                                                <Button
+                                                    type="primary"
+                                                    onClick={() => showModal(record, "approved")}
+                                                >
+                                                    Approve
+                                                </Button>
+                                                <Button
+                                                    type="dashed"
+                                                    onClick={() => showModal(record, "reset")}
+                                                >
+                                                    Reset
+                                                </Button>
+                                            </Space>
+                                            <Modal title="Flexible Pricing | Management" visible={isModalVisible} onOk={() => handleOk()} onCancel={handleCancel}>
+                                                    <div>
+                                                        <strong>Are you sure to perform the <u>{modaldata.action}</u> action?</strong>
+                                                    </div>
+                                                    <br></br>
+                                                    <p>
+                                                        <strong>Current Status:</strong>
+                                                        <div>{modaldata.status}</div>
+                                                    </p>
+                                                    <p>
+                                                        <strong>Income USD:</strong>
+                                                        <div>{modaldata.income_usd}</div>
+                                                    </p>
+                                                    <p>
+                                                        <strong>Original Income:</strong>
+                                                        <div>{modaldata.original_income}</div>
+                                                    </p>
+                                                    <p>
+                                                        <strong>Original Currency:</strong>
+                                                        <div>{modaldata.original_currency}</div>
+                                                    </p>
+                                                    <p>
+                                                        <strong>Country of Income:</strong>
+                                                        <div>{modaldata.country_of_income}</div>
+                                                    </p>
+                                                </Modal>
+                                        </div>
+                                    );
+                                }}
+                            />
                         </Table>
                     </List>
                 </Col>
             </Row>
-        </div>        
+        </div>
     );
-};
+};