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

Fix/user apps refactor

Browse source
This commit is contained in:
Valentino 2021-11-24 08:16:45 +00:00
parent 25a82b08c8
commit c8da0322e3
19 changed files with 281 additions and 499 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,8 @@
import React, { useState, useCallback, useEffect } from 'react';
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { RouteComponentProps, Link } from '@reach/router';
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { CogIcon, KeyIcon, TrashIcon } from '@heroicons/react/outline';
import { CogIcon, TrashIcon } from '@heroicons/react/outline';
import { useUsers } from 'src/services/users';
import { Table } from 'src/components';
import { ConfirmationModal } from 'src/components/Modal';
@ -13,8 +14,13 @@ export const Users: React.FC<RouteComponentProps> = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({});
const [deleteModal, setDeleteModal] = useState(false);
const [configureModal, setConfigureModal] = useState(false);
const [search, setSearch] = useState('');
const { loadUsers, users } = useUsers();
const handleSearch = useCallback((event: any) => {
setSearch(event.target.value);
}, []);
// TODO: Check why it needs any
const allUsers: any = users.items;
@ -31,6 +37,10 @@ export const Users: React.FC<RouteComponentProps> = () => {
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, []);
const filterSearch = useMemo(() => {
return allUsers.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
}, [search, allUsers]);
const deleteModalOpen = () => setDeleteModal(true);
const deleteModalClose = () => setDeleteModal(false);
@ -117,6 +127,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
<h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
<div className="mt-3 sm:mt-0 sm:ml-4">
<button
onClick={configureModalOpen}
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"
>
@ -126,9 +137,9 @@ export const Users: React.FC<RouteComponentProps> = () => {
</div>
</div>
<div className="flex justify-between w-100 my-3 items-center">
<div>
<div className="mr-3 inline-block shadow-sm">
<div className="flex justify-between w-100 my-3 items-center mb-5 ">
<div className="flex items-center">
{/* <div className="mr-3 inline-block shadow-sm">
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
Location
</label>
@ -143,9 +154,9 @@ export const Users: React.FC<RouteComponentProps> = () => {
<option>Admins</option>
<option>Members</option>
</select>
</div>
</div> */}
<div className="mb-5 inline-block">
<div className="inline-block">
<label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
Search candidates
</label>
@ -160,6 +171,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
id="email"
className="focus:ring-primary-500 focus:border-primary-500 block w-full rounded-md pl-10 sm:text-sm border-gray-200"
placeholder="Search Users"
onChange={handleSearch}
/>
</div>
</div>
@ -168,14 +180,6 @@ export const Users: React.FC<RouteComponentProps> = () => {
{selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
<div className="flex items-center">
<button
type="button"
className="mr-3 inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
<KeyIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Edit app access
</button>
<button
onClick={deleteModalOpen}
type="button"
@ -192,7 +196,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
<div className="-my-2 sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow border-b border-gray-200 sm:rounded-lg">
<Table data={allUsers} columns={columns} getSelectedRowIds={selectedRows} selectable />
<Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
</div>
</div>
</div>