diff --git a/src/App.tsx b/src/App.tsx index b9797b0..83fedd3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ import { Routes, Route, Navigate, Outlet } from 'react-router-dom'; import { Toaster } from 'react-hot-toast'; import { useAuth } from 'src/services/auth'; -import { Dashboard, Users, Login } from './modules'; +import { Dashboard, Users, Login, Apps } from './modules'; import { Layout } from './components'; import { LoginCallback } from './modules/login/LoginCallback'; @@ -43,7 +43,10 @@ function App() { } /> }> - } /> + } /> + + }> + } /> } /> diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 97a24ed..0c783e1 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -14,6 +14,7 @@ const HYDRA_LOGOUT_URL = `${process.env.REACT_APP_HYDRA_PUBLIC_URL}/oauth2/sessi const navigation = [ { name: 'Dashboard', to: '/dashboard', requiresAdmin: false }, { name: 'Users', to: '/users', requiresAdmin: true }, + { name: 'Apps', to: '/apps', requiresAdmin: true }, ]; function classNames(...classes: any[]) { diff --git a/src/modules/apps/Apps.tsx b/src/modules/apps/Apps.tsx index 48d244f..f29b377 100644 --- a/src/modules/apps/Apps.tsx +++ b/src/modules/apps/Apps.tsx @@ -1,160 +1,28 @@ /* eslint-disable react-hooks/exhaustive-deps */ import React, { useState, useCallback, useMemo } from 'react'; -import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid'; -import { CogIcon, TrashIcon } from '@heroicons/react/outline'; -import { ConfirmationModal } from 'src/components/Modal'; -import { Table, Banner } from 'src/components'; -import { Link } from 'react-router-dom'; - -const pages = [{ name: 'Apps', href: '#', current: true }]; +import { SearchIcon, PlusIcon } from '@heroicons/react/solid'; +import { Table } from 'src/components'; +import { columns, data } from './consts'; export const Apps: React.FC = () => { - const [selectedRowsIds, setSelectedRowsIds] = useState({}); - const [deleteModal, setDeleteModal] = useState(false); const [search, setSearch] = useState(''); - const deleteModalOpen = () => setDeleteModal(true); - const deleteModalClose = () => setDeleteModal(false); - 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', - accessor: 'name', - Cell: (e: any) => { - return ( -
-
- -
-
-
{e.cell.row.original.name}
-
-
- ); - }, - width: 'auto', - }, - { - Header: 'Status', - accessor: 'status', - Cell: (e: any) => { - return ( -
-
-
{e.cell.row.original.status}
-
- ); - }, - width: 'auto', - }, - { - Header: ' ', - Cell: () => { - return ( -
- -
- ); - }, - width: 'auto', - }, - ], - [], - ); - - const selectedRows = useCallback((rows: Record) => { - setSelectedRowsIds(rows); - }, []); - return ( - <> -
- -
- -
- -
- -
-
+
+
+

Apps

+
- - {selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && ( - - )}
- +
- - - + ); }; diff --git a/src/modules/apps/consts.ts b/src/modules/apps/consts.ts deleted file mode 100644 index 0a85e78..0000000 --- a/src/modules/apps/consts.ts +++ /dev/null @@ -1,23 +0,0 @@ -export const initialEditorYaml = () => { - return `luck: except -natural: still -near: though -search: - - feature - - - 1980732354.689713 - - hour - - butter: - ordinary: 995901949.8974948 - teeth: true - whole: - - -952367353 - - - talk: -1773961379 - temperature: false - oxygen: true - laugh: - flag: - in: 2144751662 - hospital: -1544066384.1973226 - law: congress - great: stomach`; -}; diff --git a/src/modules/apps/consts.tsx b/src/modules/apps/consts.tsx new file mode 100644 index 0000000..0930407 --- /dev/null +++ b/src/modules/apps/consts.tsx @@ -0,0 +1,104 @@ +import React from 'react'; +import { CogIcon } from '@heroicons/react/outline'; + +export const initialEditorYaml = () => { + return `luck: except +natural: still +near: though +search: + - feature + - - 1980732354.689713 + - hour + - butter: + ordinary: 995901949.8974948 + teeth: true + whole: + - -952367353 + - - talk: -1773961379 + temperature: false + oxygen: true + laugh: + flag: + in: 2144751662 + hospital: -1544066384.1973226 + law: congress + great: stomach`; +}; + +export const columns: any = [ + { + Header: 'Name', + accessor: 'name', + Cell: (e: any) => { + return ( +
+
+ +
+
+
{e.cell.row.original.name}
+
+
+ ); + }, + width: 'auto', + }, + { + Header: 'Status', + accessor: 'status', + Cell: (e: any) => { + return ( +
+
+
{e.cell.row.original.status}
+
+ ); + }, + width: 'auto', + }, + { + Header: ' ', + Cell: () => { + return ( +
+ +
+ ); + }, + width: 'auto', + }, +]; + +export const data: any[] = [ + { + 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: 'Zulip', + status: 'Active for everyone', + assetSrc: './assets/zulip.svg', + }, + { + id: 4, + name: 'Wordpress', + status: 'Active for everyone', + assetSrc: './assets/wordpress.svg', + }, +];