120 lines
5.3 KiB
TypeScript
120 lines
5.3 KiB
TypeScript
import InputError from '@/components/input-error';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
|
import { Label } from '@/components/ui/label';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { SharedData } from '@/types/global';
|
|
import { Link, useForm } from '@inertiajs/react';
|
|
import React, { ReactNode, useState } from 'react';
|
|
import Layout from './Partials/Layout';
|
|
import Message from './Partials/Message';
|
|
import StepNavigator from './Partials/StepNavigator';
|
|
|
|
const Install = ({ flash }: SharedData) => {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
const { data, errors, post, processing, setData } = useForm({
|
|
course_creation: 'collaborative',
|
|
});
|
|
|
|
const handleConfirm = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
setShowModal(true);
|
|
|
|
post(route('install.store-processing'), {
|
|
onFinish() {
|
|
setIsLoading(false);
|
|
setShowModal(false);
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{/* Step Navigator */}
|
|
<StepNavigator step1="fill" step2="fill" step3="fill" step4="fill" step5="active" />
|
|
|
|
{/* Loading Message */}
|
|
{isLoading && (
|
|
<div id="loader" className="mb-4 rounded-md bg-green-100 px-5 py-3 text-center text-sm font-medium text-green-500">
|
|
Loading...
|
|
</div>
|
|
)}
|
|
|
|
<Message success={flash.success} error={flash.error} />
|
|
|
|
<form onSubmit={handleConfirm}>
|
|
<div>
|
|
<Label>Select Course Creation Mode</Label>
|
|
<RadioGroup
|
|
required
|
|
defaultValue={data.course_creation}
|
|
className="flex items-center space-x-4 pt-2 pb-1"
|
|
onValueChange={(value) => setData('course_creation', value)}
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem className="cursor-pointer" id="collaborative" value="collaborative" />
|
|
<Label htmlFor="collaborative">Collaborative</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem className="cursor-pointer" id="administrative" value="administrative" />
|
|
<Label htmlFor="administrative">Administrative</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
<InputError message={errors.course_creation} />
|
|
|
|
{data.course_creation === 'collaborative' ? (
|
|
<div className="mt-3 rounded-md border border-orange-200 bg-orange-50 p-4">
|
|
<p className="text-sm leading-relaxed text-gray-700">
|
|
<span className="mb-1 block font-medium text-orange-600">Collaborative Mode:</span>
|
|
Enable a collaborative platform where qualified users can become instructors and create their own courses. The platform
|
|
administrator will receive a percentage of revenue from each instructor's course sales.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="mt-3 rounded-md border border-orange-200 bg-orange-50 p-4">
|
|
<p className="text-sm leading-relaxed text-gray-700">
|
|
<span className="mb-1 block font-medium text-orange-600">Administrative Mode:</span>
|
|
Centralize course management where only administrators can create and publish educational content. Students can enroll in
|
|
these official courses, with all revenue flowing directly to the platform administration.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-12 flex w-full items-center justify-end gap-4">
|
|
<Link href={route('install.show-step4')}>
|
|
<Button type="button" variant="outline" className="border border-orange-500 !bg-transparent !text-orange-500 uppercase">
|
|
Previous Step
|
|
</Button>
|
|
</Link>
|
|
|
|
<Button type="submit" className="bg-orange-500 px-6 py-3 text-white uppercase hover:bg-orange-600/90">
|
|
Confirm
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
|
|
<Dialog open={showModal} onOpenChange={setShowModal}>
|
|
<DialogContent>
|
|
<div className="modal-box ! !rounded-md !bg-orange-50 !p-4 md:max-w-md">
|
|
<p className="!mb-6 !text-justify !font-medium">
|
|
Your app is currently undergoing an automatic installation. This process will take a few minutes. Please don't refresh your page
|
|
or turn off your device. Just stay with this process.
|
|
</p>
|
|
<div className="relative mt-6 w-full rounded-full bg-gray-200">
|
|
<div id="shim-blue" className="absolute h-2 animate-pulse rounded-full bg-blue-500" style={{ width: '100%' }}></div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Install.layout = (page: ReactNode) => <Layout children={page} />;
|
|
|
|
export default Install;
|