local-it/dashboard
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

modify frontend for add multiple users

Browse source
This commit is contained in:
Davor 2022-07-17 20:00:50 +02:00
parent f4a888ad26
commit 4431d72e09
13 changed files with 265 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/modules/users/Users.tsx
View file

@ -1,10 +1,10 @@
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { SearchIcon, PlusIcon, ViewGridAddIcon } from '@heroicons/react/solid';
import { CogIcon, TrashIcon } from '@heroicons/react/outline';
import { useUsers } from 'src/services/users';
import { Table } from 'src/components';
import _, { debounce } from 'lodash';
import { debounce } from 'lodash';
import { useAuth } from 'src/services/auth';
import { UserModal } from '../../components/UserModal';
@ -41,8 +41,11 @@ export const Users: React.FC = () => {
setUserId(id);
setConfigureModal(true);
};
const configureModalClose = () => setConfigureModal(false);
const multipleUsersModalClose = () => setMultipleUsersModal(false);
const columns: any = React.useMemo(
() => [
{
@ -103,7 +106,7 @@ export const Users: React.FC = () => {
<button
onClick={() => configureModalOpen(null)}
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800 mx-5 "
>
<PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Add new user
@ -113,7 +116,7 @@ export const Users: React.FC = () => {
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
>
<PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
<ViewGridAddIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Add new users
</button>
</div>
@ -176,13 +179,7 @@ export const Users: React.FC = () => {
{configureModal && (
<UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
)}
{multipleUsersModal && (
<MultipleUsersModal
open={multipleUsersModal}
onClose={() => setMultipleUsersModal(false)}
onUpload={_.noop}
/>
)}
{multipleUsersModal && <MultipleUsersModal open={multipleUsersModal} onClose={multipleUsersModalClose} />}
</div>
</div>
);

200
src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
View file

@ -1,76 +1,31 @@
import React, { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
import React from 'react';
import _ from 'lodash';
// import { TrashIcon } from '@heroicons/react/outline';
// import { useFieldArray, useForm, useWatch } from 'react-hook-form';
import { useFieldArray, useForm } from 'react-hook-form';
import { Modal, Tabs } from 'src/components';
// import { Input, Select } from 'src/components/Form';
import { useUsers } from 'src/services/users';
import { useAuth } from 'src/services/auth';
import { MultipleUsersModalProps } from './types';
import { csvFileToArray } from './utils';
import { Select, TextArea } from 'src/components/Form';
import { MultipleUsersData, UserRole, useUsers } from 'src/services/users';
import { allAppAccessList } from 'src/components/UserModal/consts';
import { initialMultipleUsersForm, MultipleUsersModalProps } from './types';
export const MultipleUsersModal = ({ open, onClose, onUpload }: MultipleUsersModalProps) => {
const [file, setFile] = useState<File>();
const { userModalLoading } = useUsers();
const { currentUser, isAdmin } = useAuth();
export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) => {
const { createUsers, userModalLoading } = useUsers();
const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
setFile(_.get(e.target, 'files[0]'));
console.log(_.get(e.target, 'files[0]'));
};
const { control, handleSubmit } = useForm<MultipleUsersData>({
defaultValues: initialMultipleUsersForm,
});
const handleSubmit = () => {
// e.preventDefault();
if (file) {
const formData = new FormData();
formData.append('image', file, file.name);
// console.log('csv to array', csvFileToArray(file));
console.log('submit', formData);
} else {
console.log('nothing in file?');
}
};
const renderUpload = () => {
return (
<div>
<div>Please upload CSV file using , as a delimiter</div>
<div>
<input type="file" id="csvFileInput" accept=".csv" onChange={handleOnChange} />
<button onClick={handleSubmit}>IMPORT CSV</button>
</div>
</div>
);
};
const renderMultilineInput = () => {
return (
<div>
<textarea
rows={5}
name="description"
className="w-full rounded-md border-gray-700 focus:border-gray-700 shadow-none focus:shadow-slate-800"
>
Enter details here...
</textarea>
</div>
);
};
const { fields } = useFieldArray({
control,
name: 'appRoles',
});
const handleSave = async () => {
// try {
// if (userId) {
// await handleSubmit((data) => editUserById(data))();
// } else {
// await handleSubmit((data) => createNewUser(data))();
// }
// } catch (e: any) {
// // Continue
// }
onUpload();
try {
await handleSubmit((data) => createUsers(data))();
} catch (e: any) {
// Continue
}
onClose();
};
@ -79,46 +34,87 @@ export const MultipleUsersModal = ({ open, onClose, onUpload }: MultipleUsersMod
onClose();
};
const renderUsersCsvDataInput = () => {
return (
<div>
<TextArea
control={control}
name="csvUserData"
label="CSV user data"
placeholder="Please paste users in CSV format: email,name"
rows={15}
required
/>
</div>
);
};
const renderAppAccess = () => {
return (
<div>
<div className="mt-8">
<h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
</div>
<div>
<div className="flow-root mt-6">
<ul className="-my-5 divide-y divide-gray-200 ">
{fields.map((item, index) => {
return (
<li className="py-4" key={item.name}>
<div className="flex items-center space-x-4">
<div className="flex-shrink-0 flex-1 flex items-center">
<img
className="h-10 w-10 rounded-md overflow-hidden"
src={_.find(allAppAccessList, ['name', item.name!])?.image}
alt={item.name ?? 'Image'}
/>
<h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
{_.find(allAppAccessList, ['name', item.name!])?.label}
</h3>
</div>
<div>
<Select
key={item.id}
control={control}
name={`appRoles.${index}.role`}
options={[
{ value: UserRole.NoAccess, name: 'No Access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}
/>
</div>
</div>
</li>
);
})}
</ul>
</div>
</div>
</div>
);
};
return (
<>
<Modal
onClose={handleClose}
open={open}
onSave={handleSave}
isLoading={userModalLoading}
// leftActions={
// userId &&
// user.email !== currentUser?.email && (
// <button
// onClick={deleteModalOpen}
// type="button"
// className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
// >
// <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
// Delete
// </button>
// )
// }
useCancelButton
>
<div className="bg-white px-4">
<div className="space-y-10 divide-y divide-gray-200">
<Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={userModalLoading} useCancelButton>
<div className="bg-white px-4">
<div className="space-y-10 divide-y divide-gray-200">
<div>
<div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Add new users</h3>
</div>
<div className="sm:p-6">
<Tabs
tabs={[
{ name: 'Add users', component: renderMultilineInput() },
{ name: 'Import from file', component: renderUpload() },
]}
/>
</div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Add new users</h3>
</div>
<div className="sm:p-6">
<Tabs
tabs={[
{ name: 'Add users', component: renderUsersCsvDataInput() },
{ name: 'App access roles', component: renderAppAccess() },
]}
/>
</div>
</div>
</div>
</Modal>
</>
</div>
</Modal>
);
};

7
src/modules/users/components/MultipleUsersModal/types.ts
View file

@ -1,5 +1,10 @@
import { initialAppRoles } from 'src/components/UserModal/consts';
export type MultipleUsersModalProps = {
open: boolean;
onClose: () => void;
onUpload: () => void;
};
export const initialMultipleUsersForm = {
appRoles: initialAppRoles,
};

14
src/modules/users/components/MultipleUsersModal/utils.ts
View file

@ -1,14 +0,0 @@
import { User } from 'src/services/users';
export const csvFileToArray = (csvData: string) => {
const csvRows = csvData.slice(csvData.indexOf('\n') + 1).split('\n');
const array = csvRows.map((i) => {
const values = i.split(',');
const email = values[0];
const name = values[1];
return { email, name, app_roles: [], preferredUsername: '', status: '', id: '' } as User;
});
return array;
};