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

85
src/modules/apps/Apps.tsx
View file

@ -1,4 +1,5 @@
import React, { useState, useCallback } from 'react';
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useCallback, useMemo } from 'react';
import { RouteComponentProps, navigate, Link } from '@reach/router';
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { CogIcon, TrashIcon } from '@heroicons/react/outline';
@ -12,11 +13,50 @@ const pages = [{ name: 'Apps', href: '#', current: true }];
export const Apps: React.FC<AppsProps> = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({});
const [deleteModal, setDeleteModal] = useState(false);
const [search, setSearch] = useState('');
const deleteModalOpen = () => setDeleteModal(true);
const deleteModalClose = () => setDeleteModal(false);
const columns: any = React.useMemo(
const handleSearch = useCallback((event: any) => {
setSearch(event.target.value);
}, []);
const data: any[] = useMemo(
() => [
{
id: 1,
name: 'Nextcloud',
status: 'Active for everyone',
assetSrc: './assets/nextcloud.svg',
},
{
id: 2,
name: 'Wekan',
status: 'Active for everyone',
assetSrc: './assets/wekan.svg',
},
{
id: 3,
name: 'Rocketchat',
status: 'Active for everyone',
assetSrc: './assets/rocketchat.svg',
},
{
id: 4,
name: 'Wordpress',
status: 'Active for everyone',
assetSrc: './assets/wordpress.svg',
},
],
[],
);
const filterSearch = useMemo(() => {
return data.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
}, [search]);
const columns: any = useMemo(
() => [
{
Header: 'Name',
@ -70,36 +110,6 @@ export const Apps: React.FC<AppsProps> = () => {
[],
);
const data: any[] = React.useMemo(
() => [
{
id: 1,
name: 'Nextcloud',
status: 'Active for everyone',
assetSrc: './assets/nextcloud.svg',
},
{
id: 2,
name: 'Wekan',
status: 'Active for everyone',
assetSrc: './assets/wekan.svg',
},
{
id: 3,
name: 'Rocketchat',
status: 'Active for everyone',
assetSrc: './assets/rocketchat.svg',
},
{
id: 4,
name: 'Wordpress',
status: 'Active for everyone',
assetSrc: './assets/wordpress.svg',
},
],
[],
);
const selectedRows = useCallback((rows: Record<string, boolean>) => {
setSelectedRowsIds(rows);
}, []);
@ -146,8 +156,8 @@ export const Apps: React.FC<AppsProps> = () => {
</div>
<div className="flex justify-between w-100 my-3 items-center">
<div>
<div className="mr-3 inline-block">
<div className="flex items-center">
{/* <div className="mr-3 inline-block">
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
Location
</label>
@ -162,9 +172,9 @@ export const Apps: React.FC<AppsProps> = () => {
<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>
@ -179,6 +189,7 @@ export const Apps: React.FC<AppsProps> = () => {
id="email"
className="focus:ring-primary-dark focus:border-primary-dark block w-full rounded-md pl-10 sm:text-sm border-gray-200"
placeholder="Search Apps"
onChange={handleSearch}
/>
</div>
</div>
@ -201,7 +212,7 @@ export const Apps: React.FC<AppsProps> = () => {
<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={data} columns={columns} getSelectedRowIds={selectedRows} selectable />
<Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
</div>
</div>
</div>