Added user roles functionality

This commit is contained in:
Valentino K 2022-04-15 14:30:27 +02:00
parent 24bdcd14e0
commit 4e4fb630b4
11 changed files with 117 additions and 92 deletions

View file

@ -2,9 +2,8 @@ import React, { useEffect, useState } from 'react';
import { TrashIcon } from '@heroicons/react/outline';
import { useForm } from 'react-hook-form';
import { Modal, Banner, ConfirmationModal } from 'src/components';
import { Input } from 'src/components/Form';
import { useUsers } from 'src/services/users';
import { CurrentUserState } from 'src/services/users/redux';
import { Input, Select } from 'src/components/Form';
import { User, UserRole, useUsers } from 'src/services/users';
import { useAuth } from 'src/services/auth';
import { appAccessList } from './consts';
import { UserModalProps } from './types';
@ -14,11 +13,12 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById } = useUsers();
const { currentUser } = useAuth();
const { control, reset, handleSubmit } = useForm<CurrentUserState>({
const { control, reset, handleSubmit } = useForm<User>({
defaultValues: {
name: null,
email: null,
id: null,
role_id: null,
status: null,
},
});
@ -117,7 +117,19 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
</div>
<div className="sm:col-span-6">
<Banner title="Editing user status, roles and app access coming soon." titleSm="Comming soon!" />
<Select
control={control}
name="role_id"
label="Role"
options={[
{ value: UserRole.Admin, name: 'Admin' },
{ value: UserRole.User, name: 'User' },
]}
/>
</div>
<div className="sm:col-span-6">
<Banner title="Editing user status and app access coming soon." titleSm="Comming soon!" />
</div>
<div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
@ -137,23 +149,6 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
</select>
</div>
</div>
<div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
<label htmlFor="status" className="block text-sm font-medium text-gray-700">
Role
</label>
<div className="mt-1">
<select
id="status"
name="status"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
>
<option>User</option>
<option>Admin</option>
<option>Super Admin</option>
</select>
</div>
</div>
</div>
</div>