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

add save changes to app general tab

Browse source
This commit is contained in:
Davor 2022-08-02 23:43:18 +02:00
parent 08094e233c
commit 97aa678830
4 changed files with 61 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -58,7 +58,7 @@ export const AppSingle: React.FC = () => {
const tabs = [
{
name: 'General',
component: <GeneralTab automaticUpdates={app.automaticUpdates} onChange={_.noop} />,
component: <GeneralTab />,
},
{ name: 'Advanced Configuration', component: <AdvancedTab /> },
];

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

@ -1,45 +1,61 @@
import React from 'react';
import { Switch } from '@headlessui/react';
import _ from 'lodash';
import React, { useEffect, useRef } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { Switch } from 'src/components/Form';
import { App, useApps } from 'src/services/apps';
function classNames(...classes: any) {
return classes.filter(Boolean).join(' ');
}
export const GeneralTab = () => {
const { app, editApp } = useApps();
const { control, reset, handleSubmit } = useForm<App>({
defaultValues: { automaticUpdates: false },
});
interface GeneralTabProps {
automaticUpdates: boolean;
onChange: () => void;
}
useEffect(() => {
if (!_.isEmpty(app)) {
reset(app);
}
return () => {
reset({ automaticUpdates: false });
};
}, [app, reset]);
const onSubmit: SubmitHandler<App> = (data) => {
try {
editApp(data);
} catch (e: any) {
// continue
}
};
export const GeneralTab = ({ automaticUpdates, onChange }: GeneralTabProps) => {
return (
<div className="py-4">
<div className="md:grid md:grid-cols-3 md:gap-6">
<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>
<>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="py-4">
<div className="md:grid md:grid-cols-3 md:gap-6">
<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="my-auto ml-auto">
<Switch control={control} name="automaticUpdates" />
</div>
</div>
</div>
<div className="my-auto ml-auto">
<Switch
checked={automaticUpdates}
onChange={onChange}
className={classNames(
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(
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',
)}
/>
</Switch>
<div className="py-3 sm:flex">
<div className="ml-auto sm:flex sm:flex-row-reverse">
<button
type="submit"
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"
>
Save changes
</button>
</div>
</div>
</div>
</div>
</form>
</>
);
};