implement fetching apps from BE
impl install modal
This commit is contained in:
Davor
parent
a3adcfc3da
commit
5b728d35d7
24 changed files with 649 additions and 163 deletions
|
|
@ -22,6 +22,38 @@ export const AdvancedTab = () => {
|
|||
<h1 className="text-2xl leading-6 font-medium text-gray-900">Configuration</h1>
|
||||
</div>
|
||||
<div className="grid grid-flow-col grid-cols-2 gap-8">
|
||||
<div>
|
||||
<div className="bg-gray-100 overflow-hidden rounded-lg">
|
||||
<div className="px-4 h-16 sm:px-6 bg-gray-200 flex items-center">
|
||||
<span className="text-gray-600 text-lg leading-6 font-medium">Current Configuration</span>
|
||||
</div>
|
||||
<div className="px-4 py-5 sm:p-6 overflow-x-auto">
|
||||
<pre className="font-mono text-sm font-light">
|
||||
{`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`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div className="px-4 h-16 sm:px-6 bg-gray-200 flex justify-between items-center rounded-t-lg">
|
||||
|
|
@ -102,38 +134,6 @@ export const AdvancedTab = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bg-gray-100 overflow-hidden rounded-lg">
|
||||
<div className="px-4 h-16 sm:px-6 bg-gray-200 flex items-center">
|
||||
<span className="text-gray-600 text-lg leading-6 font-medium">Current Configuration</span>
|
||||
</div>
|
||||
<div className="px-4 py-5 sm:p-6 overflow-x-auto">
|
||||
<pre className="font-mono text-sm font-light">
|
||||
{`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`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end mt-10">
|
||||
<button
|
||||
|
|
|
|||
136
src/modules/apps/components/AppInstallModal/AppInstallModal.tsx
Normal file
136
src/modules/apps/components/AppInstallModal/AppInstallModal.tsx
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import Editor from 'react-simple-code-editor';
|
||||
import { highlight, languages } from 'prismjs';
|
||||
import _ from 'lodash';
|
||||
import { useApps } from 'src/services/apps';
|
||||
import { Modal, Tabs } from 'src/components';
|
||||
import { AppInstallModalProps } from './types';
|
||||
|
||||
const initialCode = `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 AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps) => {
|
||||
const [code, setCode] = useState(initialCode);
|
||||
const { app, appLoading, loadApp } = useApps();
|
||||
|
||||
useEffect(() => {
|
||||
if (appSlug) {
|
||||
loadApp(appSlug);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [appSlug, open]);
|
||||
|
||||
const handleSave = async () => {
|
||||
_.noop();
|
||||
// todo: implement
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: any) => {
|
||||
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
||||
handleSave();
|
||||
}
|
||||
};
|
||||
|
||||
const renderSubdomain = () => {
|
||||
return (
|
||||
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
|
||||
<div className="sm:col-span-3">
|
||||
<input name="subdomain" placeholder="Subdomain" onKeyPress={handleKeyPress} required={false} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderConfiguration = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="bg-gray-100 overflow-hidden rounded-lg">
|
||||
<div className="px-4 h-16 sm:px-6 bg-gray-200 flex items-center">
|
||||
<span className="text-gray-600 text-lg leading-6 font-medium">Current Configuration</span>
|
||||
</div>
|
||||
<div className="px-4 py-5 sm:p-6 overflow-x-auto">
|
||||
<Editor
|
||||
value={code}
|
||||
onValueChange={(value) => setCode(value)}
|
||||
highlight={(value) => highlight(value, languages.js, 'yaml')}
|
||||
preClassName="font-mono whitespace-normal font-light"
|
||||
textareaClassName="font-mono overflow-auto font-light"
|
||||
className="font-mono text-sm font-light"
|
||||
/>
|
||||
<pre className="font-mono text-sm font-light">
|
||||
{`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`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ name: 'Subdomain', component: renderSubdomain() },
|
||||
{ name: 'Advanced Configuration', component: renderConfiguration() },
|
||||
];
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={appLoading} useCancelButton>
|
||||
<div className="bg-white px-4">
|
||||
<div className="space-y-10 divide-y divide-gray-200">
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">Install app {_.get(app, 'name')}</h3>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<Tabs tabs={tabs} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
1
src/modules/apps/components/AppInstallModal/index.ts
Normal file
1
src/modules/apps/components/AppInstallModal/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { AppInstallModal } from './AppInstallModal';
|
||||
5
src/modules/apps/components/AppInstallModal/types.ts
Normal file
5
src/modules/apps/components/AppInstallModal/types.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export type AppInstallModalProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
appSlug: string | null;
|
||||
};
|
||||
|
|
@ -1,13 +1,16 @@
|
|||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { Switch } from '@headlessui/react';
|
||||
|
||||
function classNames(...classes: any) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
export const GeneralTab = () => {
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
interface GeneralTabProps {
|
||||
automaticUpdates: boolean;
|
||||
onChange: () => void;
|
||||
}
|
||||
|
||||
export const GeneralTab = ({ automaticUpdates, onChange }: GeneralTabProps) => {
|
||||
return (
|
||||
<div className="py-4">
|
||||
<div className="md:grid md:grid-cols-3 md:gap-6">
|
||||
|
|
@ -20,17 +23,17 @@ export const GeneralTab = () => {
|
|||
</div>
|
||||
<div className="my-auto ml-auto">
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={setEnabled}
|
||||
checked={automaticUpdates}
|
||||
onChange={onChange}
|
||||
className={classNames(
|
||||
enabled ? 'bg-primary-600' : 'bg-gray-200',
|
||||
automaticUpdates ? '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',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={classNames(
|
||||
enabled ? 'translate-x-5' : 'translate-x-0',
|
||||
automaticUpdates ? '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',
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
export { GeneralTab } from './GeneralTab';
|
||||
export { AdvancedTab } from './AdvancedTab';
|
||||
export { AppInstallModal } from './AppInstallModal';
|
||||
|
|
|
|||
Reference in a new issue