219 lines
7.8 KiB
TypeScript
219 lines
7.8 KiB
TypeScript
import React, { useState, useCallback } from 'react';
|
|
import { RouteComponentProps, navigate, Link } from '@reach/router';
|
|
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
|
|
import { CogIcon, TrashIcon } from '@heroicons/react/outline';
|
|
import { ConfirmationModal } from 'src/components/Modal';
|
|
import { Table } from 'src/components';
|
|
|
|
type AppsProps = RouteComponentProps;
|
|
|
|
const pages = [{ name: 'Apps', href: '#', current: true }];
|
|
|
|
export const Apps: React.FC<AppsProps> = () => {
|
|
const [selectedRowsIds, setSelectedRowsIds] = useState({});
|
|
const [deleteModal, setDeleteModal] = useState(false);
|
|
|
|
const deleteModalOpen = () => setDeleteModal(true);
|
|
const deleteModalClose = () => setDeleteModal(false);
|
|
|
|
const columns: any = React.useMemo(
|
|
() => [
|
|
{
|
|
Header: 'Name',
|
|
accessor: 'name',
|
|
Cell: (e: any) => {
|
|
return (
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0 h-10 w-10">
|
|
<img className="h-10 w-10 rounded-md overflow-hidden" src={e.cell.row.original.assetSrc} alt="" />
|
|
</div>
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium text-gray-900">{e.cell.row.original.name}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
width: 'auto',
|
|
},
|
|
{
|
|
Header: 'Status',
|
|
accessor: 'status',
|
|
Cell: (e: any) => {
|
|
return (
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0 h-4 w-4 rounded-full bg-green-600" />
|
|
<div className="ml-2 text-sm text-green-600">{e.cell.row.original.status}</div>
|
|
</div>
|
|
);
|
|
},
|
|
width: 'auto',
|
|
},
|
|
{
|
|
Header: ' ',
|
|
Cell: (e: any) => {
|
|
return (
|
|
<div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
onClick={() => navigate(`/apps/${e.cell.row.original.id}`)}
|
|
type="button"
|
|
className="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"
|
|
>
|
|
<CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
|
Configure
|
|
</button>
|
|
</div>
|
|
);
|
|
},
|
|
width: 'auto',
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
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);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
|
|
<nav className="flex mb-8" aria-label="Breadcrumb">
|
|
<ol className="flex items-center space-x-4">
|
|
<li>
|
|
<div className="flex items-center">
|
|
<Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
|
|
<span>Dashboard</span>
|
|
</Link>
|
|
</div>
|
|
</li>
|
|
{pages.map((page) => (
|
|
<li key={page.name}>
|
|
<div className="flex items-center">
|
|
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
|
|
<a
|
|
href={page.href}
|
|
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
|
aria-current={page.current ? 'page' : undefined}
|
|
>
|
|
{page.name}
|
|
</a>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
|
|
<div className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
|
|
<h1 className="text-3xl leading-6 font-bold text-gray-900">Apps</h1>
|
|
<div className="mt-3 sm:mt-0 sm:ml-4">
|
|
<button
|
|
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" />
|
|
Add new app
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between w-100 my-3 items-center">
|
|
<div>
|
|
<div className="mr-3 inline-block">
|
|
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
|
|
Location
|
|
</label>
|
|
<select
|
|
id="location"
|
|
name="location"
|
|
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-200 focus:outline-none focus:ring-primary-dark focus:border-primary-dark sm:text-sm rounded-md"
|
|
defaultValue="All apps"
|
|
>
|
|
<option>All apps</option>
|
|
<option>Owner</option>
|
|
<option>Admins</option>
|
|
<option>Members</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="mb-5 inline-block">
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
|
|
Search candidates
|
|
</label>
|
|
<div className="mt-1 flex rounded-md shadow-sm">
|
|
<div className="relative flex items-stretch flex-grow focus-within:z-10">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
name="email"
|
|
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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
|
|
<button
|
|
onClick={deleteModalOpen}
|
|
type="button"
|
|
className="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>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<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 />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ConfirmationModal
|
|
open={deleteModal}
|
|
onClose={deleteModalClose}
|
|
title="Delete service"
|
|
body="Are you sure you want to delete this service? All of your data will be permanently removed. This action cannot be undone."
|
|
/>
|
|
</div>
|
|
);
|
|
};
|