devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the ability to change the status and type of a user

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-11-15 19:54:16 +00:00
parent d412c1616f
commit c28f7bb024
5 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/UserCard.tsx
View File

@@ -29,14 +29,18 @@ const expirationDateColor = (date: Date) => {
interface Props {
user: User;
loggedInUser: User;
onClose: (reload?: boolean) => void;
onViewStudents?: () => void;
onViewTeachers?: () => void;
}
const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}: Props) => {
const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent);
const [type, setType] = useState(user.type);
const [status, setStatus] = useState(user.status);
const {stats} = useStats(user.id);
const {users} = useUsers();
@@ -44,7 +48,7 @@ const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
axios
.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, subscriptionExpirationDate: expiryDate})
.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, subscriptionExpirationDate: expiryDate, type, status})
.then(() => {
toast.success("User updated successfully!");
onClose(true);
@@ -216,7 +220,12 @@ const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
expirationDateColor(expiryDate),
"transition duration-300 ease-in-out",
)}
filterDate={(date) => moment(date).isAfter(new Date())}
filterDate={(date) =>
moment(date).isAfter(new Date()) &&
(loggedInUser.subscriptionExpirationDate
? moment(date).isBefore(moment(loggedInUser.subscriptionExpirationDate))
: true)
}
dateFormat="dd/MM/yyyy"
selected={moment(expiryDate).toDate()}
onChange={(date) => setExpiryDate(date)}
@@ -225,6 +234,38 @@ const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
</div>
</div>
</div>
{(loggedInUser.type === "developer" || loggedInUser.type === "owner") && (
<>
<Divider className="w-full" />
<div className="flex flex-col md:flex-row gap-8 w-full">
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Status</label>
<select
defaultValue={user.status}
onChange={(e) => setStatus(e.target.value as typeof user.status)}
className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
<option value="active">Active</option>
<option value="disabled">Disabled</option>
<option value="paymentDue">Payment Due</option>
</select>
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Type</label>
<select
defaultValue={user.type}
onChange={(e) => setType(e.target.value as typeof user.type)}
className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="corporate">Corporate</option>
<option value="agent">Country Agent</option>
<option value="owner">Owner</option>
<option value="developer">Developer</option>
</select>
</div>
</div>
</>
)}
{user.type === "corporate" && (
<>
<Divider className="w-full" />