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

modifed css on AppSingle

Browse source
This commit is contained in:
Davor 2022-07-25 23:50:23 +02:00
parent 9bb54bce00
commit a3adcfc3da
4 changed files with 74 additions and 218 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.tsx
View file

@ -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, Apps } from './modules';
import { Dashboard, Users, Login, Apps, AppSingle } from './modules';
import { Layout } from './components';
import { LoginCallback } from './modules/login/LoginCallback';
@ -46,6 +46,7 @@ function App() {
<Route index element={<Users />} />
</Route>
<Route path="/apps" element={<ProtectedRoute />}>
<Route path=":slug" element={<AppSingle />} />
<Route index element={<Apps />} />
</Route>
<Route path="*" element={<Navigate to="/dashboard" />} />

74
src/modules/apps/AppSingle.tsx
View file

@ -1,8 +1,9 @@
import React from 'react';
import { ChevronRightIcon } from '@heroicons/react/solid';
import { useParams } from 'react-router-dom';
import _ from 'lodash';
import { XCircleIcon } from '@heroicons/react/outline';
import { Tabs, Banner } from 'src/components';
import { Link } from 'react-router-dom';
import { Tabs } from 'src/components';
import { appAccessList } from 'src/components/UserModal/consts';
import { AdvancedTab, GeneralTab } from './components';
const pages = [
@ -16,57 +17,23 @@ const tabs = [
];
export const AppSingle: React.FC = () => {
const params = useParams();
const appSlug = params.slug;
const appInfo = _.find(appAccessList, { name: appSlug });
return (
<>
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
<nav className="flex" 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" />
<Link
to={page.to}
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
aria-current={page.current ? 'page' : undefined}
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden lg:flex lg:flex-row">
<div
className="block bg-white overflow-hidden shadow rounded-sm basis-4/12 mx-auto sm:px-6 lg:px-8 overflow-hidden block lg:flex-none"
style={{ height: 'fit-content' }}
>
{page.name}
</Link>
</div>
</li>
))}
</ol>
</nav>
</div>
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden">
<Banner title="Managing single app instances coming soon." titleSm="Comming soon!" />
</div>
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden opacity-40 cursor-default pointer-events-none select-none">
<div className="bg-white overflow-hidden shadow rounded-sm mb-5">
<div className="px-4 py-5 sm:p-6 flex justify-between items-center">
<div className="mr-4 flex items-center">
<img
className="h-24 w-24 rounded-md overflow-hidden mr-4"
src="./../assets/nextcloud.svg"
alt="Nextcloud"
/>
<div>
<h2 className="text-2xl leading-8 font-bold">Nextcloud</h2>
<div className="px-4 py-5 sm:p-6 flex flex-col">
<img className="h-24 w-24 rounded-md overflow-hidden mr-4 mb-3" src={appInfo?.image} alt={appInfo?.label} />
<div className="mb-3">
<h2 className="text-2xl leading-8 font-bold">{appInfo?.label}</h2>
<div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
</div>
</div>
<div className="flex flex-col">
<button
type="button"
className="mb-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-yellow-900 bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
@ -74,7 +41,6 @@ export const AppSingle: React.FC = () => {
<XCircleIcon className="-ml-0.5 mr-2 h-4 w-4 text-yellow-900" aria-hidden="true" />
Disable App
</button>
<button
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 justify-center"
@ -83,14 +49,14 @@ export const AppSingle: React.FC = () => {
</button>
</div>
</div>
</div>
<div className="bg-white shadow rounded-sm">
<div className="mx-auto sm:mt-8 lg:mt-0 lg:px-8 overflow-hidden block">
<div className="bg-white sm:px-6 shadow rounded-sm basis-8/12">
<div className="px-4 py-5 sm:p-6">
<Tabs tabs={tabs} />
</div>
</div>
</div>
</>
</div>
);
};

157
src/modules/apps/components/GeneralTab/GeneralTab.tsx
View file

@ -1,159 +1,40 @@
import React, { useState } from 'react';
import { RadioGroup } from '@headlessui/react';
import { Switch } from '@headlessui/react';
function classNames(...classes: any) {
return classes.filter(Boolean).join(' ');
}
const settings = [
{ name: 'Public access', description: 'This project would be available to anyone who has the link' },
{ name: 'Private to Project Members', description: 'Only members of this project would be able to access' },
{ name: 'Private to you', description: 'You are the only one able to access this project' },
];
export const GeneralTab = () => {
const [selected, setSelected] = useState(settings[0]);
const [enabled, setEnabled] = useState(false);
return (
<div className="py-4">
<div>
<div className="md:grid md:grid-cols-3 md:gap-6">
<div className="md:col-span-1">
<h3 className="text-lg font-medium leading-6 text-gray-900">Privacy</h3>
<p className="mt-1 text-sm text-gray-500">Change your app privacy</p>
<div className="md:col-span-2">
<h3 className="text-lg font-medium leading-6 text-gray-900">Automatic updates</h3>
<p className="mt-1 text-sm text-gray-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nibh sit amet mauris faucibus molestie
gravida at orci.
</p>
</div>
<div className="mt-5 md:mt-0 md:col-span-2">
<div className="mt-1">
<RadioGroup value={selected} onChange={setSelected}>
<RadioGroup.Label className="sr-only">Privacy setting</RadioGroup.Label>
<div className="bg-white rounded-md -space-y-px">
{settings.map((setting, settingIdx) => (
<RadioGroup.Option
key={setting.name}
value={setting}
className={({ checked }) =>
classNames(
settingIdx === 0 ? 'rounded-tl-md rounded-tr-md' : '',
settingIdx === settings.length - 1 ? 'rounded-bl-md rounded-br-md' : '',
checked ? 'bg-primary-50 border-primary-400 z-10' : 'border-gray-200',
'relative border p-4 flex cursor-pointer focus:outline-none',
)
}
<div className="my-auto ml-auto">
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-primary-600' : 'bg-gray-200',
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none',
)}
>
{({ active, checked }) => (
<>
<span
className={classNames(
checked ? 'bg-primary-600 border-transparent' : 'bg-white border-gray-300',
active ? 'ring-2 ring-offset-2 ring-primary-100' : '',
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
)}
aria-hidden="true"
>
<span className="rounded-full bg-white w-1.5 h-1.5" />
</span>
<div className="ml-3 flex flex-col">
<RadioGroup.Label
as="span"
className={classNames(
checked ? 'text-primary-900' : 'text-gray-900',
'block text-sm font-medium',
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
)}
>
{setting.name}
</RadioGroup.Label>
<RadioGroup.Description
as="span"
className={classNames(checked ? 'text-primary-900' : 'text-gray-500', 'block text-sm')}
>
{setting.description}
</RadioGroup.Description>
</div>
</>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
</div>
</div>
</div>
</div>
<div className="mt-10">
<div className="md:grid md:grid-cols-3 md:gap-6">
<div className="md:col-span-1">
<h3 className="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
<p className="mt-1 text-sm text-gray-500">Change you notifications settings</p>
</div>
<div className="mt-5 md:mt-0 md:col-span-2">
<fieldset className="space-y-5 -mt-4">
<legend className="sr-only">Notifications</legend>
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
id="comments"
aria-describedby="comments-description"
name="comments"
type="checkbox"
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="comments" className="font-medium text-gray-700">
Comments
</label>
<p id="comments-description" className="text-gray-500">
Get notified when someones posts a comment on a posting.
</p>
</div>
</div>
<div>
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
id="candidates"
aria-describedby="candidates-description"
name="candidates"
type="checkbox"
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="candidates" className="font-medium text-gray-700">
Candidates
</label>
<p id="candidates-description" className="text-gray-500">
Get notified when a candidate applies for a job.
</p>
</div>
</div>
</div>
<div>
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
id="offers"
aria-describedby="offers-description"
name="offers"
type="checkbox"
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="offers" className="font-medium text-gray-700">
Offers
</label>
<p id="offers-description" className="text-gray-500">
Get notified when a candidate accepts or rejects an offer.
</p>
</div>
</div>
</div>
</fieldset>
</div>
</Switch>
</div>
</div>
</div>

12
src/modules/apps/consts.tsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import { CogIcon, PlusCircleIcon } from '@heroicons/react/outline';
import _ from 'lodash';
import { useNavigate } from 'react-router';
export const initialEditorYaml = () => {
return `luck: except
@ -93,14 +94,16 @@ export const columns: any = [
{
Header: ' ',
Cell: (e: any) => {
const navigate = useNavigate();
const appStatus = e.cell.row.original.status as AppStatus;
const appSlug = e.cell.row.original.slug;
if (appStatus === AppStatus.Installing) {
return null;
}
return (
<div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => {}}
onClick={() => navigate(`/apps/${appSlug}`)}
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"
>
@ -118,25 +121,29 @@ export const data: any[] = [
{
id: 1,
name: 'Nextcloud',
slug: 'nextcloud',
status: AppStatus.Installed,
assetSrc: './assets/nextcloud.svg',
},
{
id: 2,
name: 'Wekan',
slug: 'wekan',
status: AppStatus.Installing,
assetSrc: './assets/wekan.svg',
},
{
id: 3,
name: 'Zulip',
slug: 'zulip',
status: AppStatus.NotInstalled,
assetSrc: './assets/zulip.svg',
},
{
id: 4,
name: 'Wordpress',
status: AppStatus.NotInstalled,
slug: 'wordpress',
status: AppStatus.Installed,
assetSrc: './assets/wordpress.svg',
},
];
@ -144,6 +151,7 @@ export const data: any[] = [
export interface AppInfo {
id: number;
name: string;
slug: string;
status: AppStatus;
assetSrc: string;
}