From 4924eebc62fbbb6cd7db51ef68cbca868c91ae2e Mon Sep 17 00:00:00 2001
From: devendra <devendra@devendras-MacBook-Pro.local>
Date: Wed, 9 Nov 2022 11:40:34 +0530
Subject: [PATCH] Feat- Delete user: Added confirm dialog
---
public/css/new.css | 4 ++++
src/components/modal/ConfirmModal.tsx | 34 +++++++++++++++++++++++++++
src/components/modal/index.ts | 1 +
src/helpers/auth.js | 10 ++++++++
src/layouts/reviewer/Users.tsx | 32 +++++++++++++++++++++++++
5 files changed, 81 insertions(+)
create mode 100644 src/components/modal/ConfirmModal.tsx
diff --git a/public/css/new.css b/public/css/new.css
index 2a25066..93bc798 100644
--- a/public/css/new.css
+++ b/public/css/new.css
@@ -596,3 +596,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
.item-container > hr {
margin-top: 6px;
}
+
+.modal-title {
+ color: black;
+}
diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx
new file mode 100644
index 0000000..ca5c99d
--- /dev/null
+++ b/src/components/modal/ConfirmModal.tsx
@@ -0,0 +1,34 @@
+
+
+interface ConfirmModalProps {
+ title: string;
+ children: any;
+ onConfirm: () => void;
+ onCancel: () => void;
+}
+
+export const ConfirmModal = ({title, children, onConfirm, onCancel}: ConfirmModalProps) => {
+ return (
+ <>
+ <div className="modal fade show" id="staticBackdrop" data-backdrop="static" data-keyboard="false" aria-labelledby="staticBackdropLabel" style={{display: 'block'}}>
+ <div className="modal-dialog">
+ <div className="modal-content">
+ <div className="modal-header">
+ <h5 className="modal-title" id="staticBackdropLabel">{title}</h5>
+ </div>
+ <div className="modal-body">
+ {children}
+ </div>
+ <div className="modal-footer">
+ <button type="button" className="btn btn-secondary" onClick={onCancel}>No</button>
+ <button type="button" className="btn btn-primary" onClick={onConfirm}>Yes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="modal-backdrop fade show"></div>
+ </>
+ )
+
+}
+
diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts
index 7afc632..92b422a 100644
--- a/src/components/modal/index.ts
+++ b/src/components/modal/index.ts
@@ -1,3 +1,4 @@
export { ModalOne } from "./ModalOne";
export { ModalTwo } from "./ModalTwo";
export { InspectionScheduleModal } from "./InspectionScheduleModal";
+export { ConfirmModal } from './ConfirmModal';
diff --git a/src/helpers/auth.js b/src/helpers/auth.js
index 470e841..8eda5c8 100644
--- a/src/helpers/auth.js
+++ b/src/helpers/auth.js
@@ -1,3 +1,4 @@
+import { APP } from "../constants";
const Auth = {
get(item) {
const user = JSON.parse(localStorage.getItem("user"));
@@ -21,6 +22,15 @@ const Auth = {
return ''
}
return user.roles[0].name;
+ },
+
+ isSuperAdmin() {
+ const userRole = this.getUserRole();
+ if(userRole === APP.ROLE.SUPER_ADMIN) {
+ return true;
+ } else {
+ return false;
+ }
}
};
diff --git a/src/layouts/reviewer/Users.tsx b/src/layouts/reviewer/Users.tsx
index ec18762..6e14369 100644
--- a/src/layouts/reviewer/Users.tsx
+++ b/src/layouts/reviewer/Users.tsx
@@ -4,9 +4,11 @@ import { Fragment, useEffect, useState } from "react";
// import { useHistory } from "react-router"
import { Link } from "react-router-dom";
import { BtnTwo } from "../../components/buttons";
+import {ConfirmModal } from "../../components/modal";
import { APP } from "../../constants";
import Notify from "../../helpers/notify";
import Util from "../../helpers/util";
+import Helper from "../../helpers/auth";
import { UserService } from "../../services/user.service";
interface userProps {
@@ -64,6 +66,10 @@ export const Users = ({ data }: userProps) => {
// let history = useHistory();
let [users, setUsers] = useState<Iuser[]>([]);
let [filteredUsers, setFilteredUsers] = useState<Iuser[]>([]);
+ const isSuperAdmin = Helper.isSuperAdmin();
+ let [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
+ let [userToDelete, setUserToDelete] = useState<Iuser>();
+
const handleSearch = (event: any) => {
let value = event.target.value.toLowerCase();
@@ -83,6 +89,12 @@ export const Users = ({ data }: userProps) => {
setFilteredUsers(result);
};
+ const deleteUser = () => {
+ console.log(userToDelete);
+ //Make api call to soft delete user
+ setShowConfirmModal(false);
+ }
+
useEffect(() => {
// get users
UserService.getAllUsers().then(
@@ -171,6 +183,16 @@ export const Users = ({ data }: userProps) => {
>
Edit
</Link>
+ {isSuperAdmin && (
+ <span
+ className="ml-3 text-danger pointer"
+ onClick={
+ () => {
+ setUserToDelete(user);
+ setShowConfirmModal(true);
+ }
+ }>Delete</span>
+ )}
</td>
</tr>
))}
@@ -178,6 +200,16 @@ export const Users = ({ data }: userProps) => {
</table>
</div>
</div>
+ {showConfirmModal && (
+ <ConfirmModal
+ title="Delete User"
+ onConfirm={deleteUser}
+ onCancel={() => {
+ setUserToDelete(undefined);
+ setShowConfirmModal(false)}
+ }
+ > Do you want to delete {userToDelete?.firstName} ?</ConfirmModal>
+ )}
</Fragment>
);
};
--
GitLab