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

Feat/dashboard modals

Browse source
This commit is contained in:
Valentino 2021-11-02 15:22:53 +00:00 • committed by Tin Geber
parent 88a4367b64
commit c4a8f323e6
18 changed files with 896 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/components/Modal/Modal/Modal.tsx Normal file
View file

@ -0,0 +1,68 @@
import React, { Fragment, useRef } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { XIcon } from '@heroicons/react/solid';
import { ModalProps } from './types';
export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, title = '' }) => {
const cancelButtonRef = useRef(null);
return (
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" initialFocus={cancelButtonRef} onClose={() => {}}>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
<div>{title}</div>
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
>
<XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</button>
</div>
<div className="bg-white px-4 p-6">{children}</div>
{onSave && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onSave}
>
Save Changes
</button>
</div>
)}
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
);
};

1
src/components/Modal/Modal/index.ts Normal file
View file

@ -0,0 +1 @@
export { Modal } from './Modal';

6
src/components/Modal/Modal/types.ts Normal file
View file

@ -0,0 +1,6 @@
export type ModalProps = {
open: boolean;
onClose: () => void;
title?: string;
onSave?: () => void;
};

1
src/components/Modal/index.ts
View file

@ -1 +1,2 @@
export { ConfirmationModal } from './ConfirmationModal';
export { Modal } from './Modal';

1
src/components/index.ts
View file

@ -2,3 +2,4 @@ export { Layout } from './Layout';
export { Header } from './Header';
export { Table } from './Table';
export { Tabs } from './Tabs';
export { Modal, ConfirmationModal } from './Modal';

44
src/modules/dashboard/Dashboard.tsx
View file

@ -1,11 +1,12 @@
import React from 'react';
import { Link, navigate, RouteComponentProps } from '@reach/router';
import { Link, RouteComponentProps } from '@reach/router';
import clsx from 'clsx';
import { DASHBOARD_APPS, DASHBOARD_QUICK_ACCESS } from './consts';
import { DashboardCard } from './components';
export const Dashboard: React.FC<RouteComponentProps> = () => {
return (
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
<div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
<nav className="flex mb-8" aria-label="Breadcrumb">
<ol className="flex items-center space-x-4">
<li>
@ -17,42 +18,15 @@ export const Dashboard: React.FC<RouteComponentProps> = () => {
</li>
</ol>
</nav>
<div className="pb-5 sm:flex sm:items-center sm:justify-between">
<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">Dashboard</h1>
</div>
<div className="grid grid-cols-3 gap-4 my-10">
{DASHBOARD_APPS.map((app) => {
return (
<div className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100" key={app.name}>
<div className="px-4 py-5 sm:p-6">
<div className="mr-4 flex items-center">
<img className="h-16 w-16 rounded-md overflow-hidden mr-4" src={app.assetSrc} alt="Nextcloud" />
<div>
<h2 className="text-2xl leading-8 font-bold">{app.name}</h2>
<div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
</div>
</div>
</div>
<div className="px-4 py-4 sm:px-6 flex justify-end">
<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 justify-center"
>
View Documentation
</button>
<button
onClick={() => navigate(`/apps/${app.id}`)}
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
Configure
</button>
</div>
</div>
);
})}
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-3 my-10">
{DASHBOARD_APPS.map((app) => (
<DashboardCard app={app} key={app.name} />
))}
</div>
<div className="max-w-4xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">

58
src/modules/dashboard/components/DashboardCard/DashboardCard.tsx Normal file
View file

@ -0,0 +1,58 @@
import React, { useState, useEffect } from 'react';
import { navigate } from '@reach/router';
import { Modal } from 'src/components';
import ReactMarkdown from 'react-markdown';
export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
const [readMoreVisible, setReadMoreVisible] = useState(false);
const [content, setContent] = useState('');
const onReadMoreClick = () => setReadMoreVisible(true);
const onReadMoreCloseClick = () => setReadMoreVisible(false);
useEffect(() => {
fetch(app.markdownSrc)
.then((res) => res.text())
.then((md) => {
return setContent(md);
})
.catch(() => {});
}, [app.markdownSrc]);
return (
<>
<div className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100 mb-4 md:mb-0" key={app.name}>
<div className="px-4 py-5 sm:p-6">
<div className="mr-4 flex items-center">
<img className="h-16 w-16 rounded-md overflow-hidden mr-4" src={app.assetSrc} alt="Nextcloud" />
<div>
<h2 className="text-2xl leading-8 font-bold">{app.name}</h2>
<div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
</div>
</div>
</div>
<div className="px-2.5 py-2.5 sm:px-4 flex justify-end">
<button
type="button"
onClick={onReadMoreClick}
className="mr-3 inline-flex items-center px-2.5 py-1.5 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 justify-center"
>
Read more
</button>
<button
onClick={() => navigate(`/apps/${app.id}`)}
type="button"
className="inline-flex items-center px-2.5 py-1.5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
Configure
</button>
</div>
</div>
<Modal open={readMoreVisible} onClose={onReadMoreCloseClick} title={app.name}>
<ReactMarkdown className="prose">{content}</ReactMarkdown>
</Modal>
</>
);
};

1
src/modules/dashboard/components/DashboardCard/index.ts Normal file
View file

@ -0,0 +1 @@
export { DashboardCard } from './DashboardCard';

1
src/modules/dashboard/components/index.ts Normal file
View file

@ -0,0 +1 @@
export { DashboardCard } from './DashboardCard';

4
src/modules/dashboard/consts.ts
View file

@ -14,21 +14,25 @@ export const DASHBOARD_APPS = [
id: 1,
name: 'Nextcloud',
assetSrc: '/assets/nextcloud.svg',
markdownSrc: '/markdown/nextcloud.md',
},
{
id: 2,
name: 'Wekan',
assetSrc: '/assets/wekan.svg',
markdownSrc: '/markdown/wekan.md',
},
{
id: 3,
name: 'Rocketchat',
assetSrc: '/assets/rocketchat.svg',
markdownSrc: '/markdown/rocket.md',
},
{
id: 4,
name: 'Wordpress',
assetSrc: '/assets/wordpress.svg',
markdownSrc: '/markdown/wordpress.md',
},
];