sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-12-18 02:27:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 23

Fix automations mobile view by using a wrapper component that chooses a dialog or a drawer

Browse source
This commit is contained in:
sabaimran 2024-08-03 13:44:17 +05:30
parent 4ce17acd00
commit 261f62e353
1 changed files with 147 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

260
src/interface/web/app/automations/page.tsx
View file

@ -1,10 +1,9 @@
'use client' 'use client'
import useSWR from 'swr'; import useSWR from 'swr';
import Loading, { InlineLoading } from '../components/loading/loading'; import { InlineLoading } from '../components/loading/loading';
import { import {
Card, Card,
CardDescription,
CardContent, CardContent,
CardFooter, CardFooter,
CardHeader, CardHeader,
@ -54,7 +53,7 @@ import { useToast } from '@/components/ui/use-toast';
import { ToastAction } from '@/components/ui/toast'; import { ToastAction } from '@/components/ui/toast';
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import SidePanel from '../components/sidePanel/chatHistorySidePanel'; import SidePanel from '../components/sidePanel/chatHistorySidePanel';
import NavMenu from '../components/navMenu/navMenu'; import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
const automationsFetcher = () => window.fetch('/api/automations').then(res => res.json()).catch(err => console.log(err)); const automationsFetcher = () => window.fetch('/api/automations').then(res => res.json()).catch(err => console.log(err));
@ -219,6 +218,7 @@ function sendAPreview(automationId: string, setToastMessage: (toastMessage: stri
interface AutomationsCardProps { interface AutomationsCardProps {
automation: AutomationsData; automation: AutomationsData;
isMobileWidth: boolean;
locationData?: LocationData | null; locationData?: LocationData | null;
suggestedCard?: boolean; suggestedCard?: boolean;
setNewAutomationData?: (data: AutomationsData) => void; setNewAutomationData?: (data: AutomationsData) => void;
@ -303,30 +303,17 @@ function AutomationsCard(props: AutomationsCardProps) {
<Trash className='h-4 w-4 mr-2' />Delete <Trash className='h-4 w-4 mr-2' />Delete
</Button> </Button>
{ {
!props.suggestedCard && ( (!props.suggestedCard && props.locationData) && (
<Dialog <AutomationComponentWrapper
open={isEditing} isMobileWidth={props.isMobileWidth}
onOpenChange={(open) => { callToAction='Edit'
setIsEditing(open); createNew={false}
}} setIsCreating={setIsEditing}
>
<DialogTrigger asChild>
<Button variant="outline" className="justify-start">
<Pencil className='h-4 w-4 mr-2' />Edit
</Button>
</DialogTrigger>
<DialogContent>
<DialogTitle>Edit Automation</DialogTitle>
<EditCard
authenticatedData={props.authenticatedData}
automation={automation}
setIsEditing={setIsEditing}
isLoggedIn={props.isLoggedIn}
setShowLoginPrompt={props.setShowLoginPrompt} setShowLoginPrompt={props.setShowLoginPrompt}
setUpdatedAutomationData={setUpdatedAutomationData} setNewAutomationData={setUpdatedAutomationData}
locationData={props.locationData} /> authenticatedData={props.authenticatedData}
</DialogContent> isCreating={isEditing}
</Dialog> ipLocationData={props.locationData} />
) )
} }
{ {
@ -375,31 +362,17 @@ function AutomationsCard(props: AutomationsCardProps) {
</div> </div>
{ {
props.suggestedCard && props.setNewAutomationData && ( props.suggestedCard && props.setNewAutomationData && (
<Dialog <AutomationComponentWrapper
open={isEditing} isMobileWidth={props.isMobileWidth}
onOpenChange={(open) => { callToAction='Add'
setIsEditing(open);
}}
>
<DialogTrigger asChild>
<Button variant="outline">
<Plus className='h-4 w-4 mr-2' />
Add
</Button>
</DialogTrigger>
<DialogContent>
<DialogTitle>Add Automation</DialogTitle>
<EditCard
authenticatedData={props.authenticatedData}
createNew={true} createNew={true}
automation={automation} setIsCreating={setIsEditing}
setIsEditing={setIsEditing}
isLoggedIn={props.isLoggedIn}
setShowLoginPrompt={props.setShowLoginPrompt} setShowLoginPrompt={props.setShowLoginPrompt}
setUpdatedAutomationData={props.setNewAutomationData} setNewAutomationData={props.setNewAutomationData}
locationData={props.locationData} /> authenticatedData={props.authenticatedData}
</DialogContent> isCreating={isEditing}
</Dialog> automation={automation}
ipLocationData={props.locationData} />
) )
} }
</CardFooter> </CardFooter>
@ -413,6 +386,7 @@ interface SharedAutomationCardProps {
isLoggedIn: boolean; isLoggedIn: boolean;
setShowLoginPrompt: (showLoginPrompt: boolean) => void; setShowLoginPrompt: (showLoginPrompt: boolean) => void;
authenticatedData: UserProfile | null; authenticatedData: UserProfile | null;
isMobileWidth: boolean;
} }
function SharedAutomationCard(props: SharedAutomationCardProps) { function SharedAutomationCard(props: SharedAutomationCardProps) {
@ -438,30 +412,19 @@ function SharedAutomationCard(props: SharedAutomationCardProps) {
} }
return ( return (
<Dialog isCreating ?
open={isCreating} <AutomationComponentWrapper
onOpenChange={(open) => { isMobileWidth={props.isMobileWidth}
setIsCreating(open); callToAction='Shared'
}}
>
<DialogTrigger>
</DialogTrigger>
<DialogContent>
<DialogTitle className='py-0'>
<Plus className='h-4 w-4 mr-2' />
Create Automation
</DialogTitle>
<EditCard
authenticatedData={props.authenticatedData}
createNew={true} createNew={true}
setIsEditing={setIsCreating} setIsCreating={setIsCreating}
setUpdatedAutomationData={props.setNewAutomationData}
isLoggedIn={props.isLoggedIn}
setShowLoginPrompt={props.setShowLoginPrompt} setShowLoginPrompt={props.setShowLoginPrompt}
setNewAutomationData={props.setNewAutomationData}
authenticatedData={props.authenticatedData}
isCreating={isCreating}
automation={automation} automation={automation}
locationData={props.locationData} /> ipLocationData={props.locationData} />
</DialogContent> : null
</Dialog>
) )
} }
@ -596,8 +559,6 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
const { errors } = props.form.formState; const { errors } = props.form.formState;
console.log(errors);
function recommendationPill(recommendationText: string, onChange: (value: any, event: React.MouseEvent<HTMLButtonElement>) => void) { function recommendationPill(recommendationText: string, onChange: (value: any, event: React.MouseEvent<HTMLButtonElement>) => void) {
return ( return (
<Button <Button
@ -867,10 +828,10 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
function metadataMap(ipLocationData: LocationData, authenticatedData: UserProfile | null) { function metadataMap(ipLocationData: LocationData, authenticatedData: UserProfile | null) {
return ( return (
<div className='flex flex-wrap gap-2 items-center md:justify-start justify-end'> <div className='flex flex-wrap gap-2 items-center justify-start md:justify-end'>
{ {
authenticatedData ? ( authenticatedData ? (
<span className='rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm' ><Envelope className='h-4 w-4 mr-2 inline text-orange-500' shadow-s />{authenticatedData.email}</span> <span className='rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm' ><Envelope className='h-4 w-4 mr-2 inline text-orange-500 shadow-sm' />{authenticatedData.email}</span>
) )
: null : null
} }
@ -889,6 +850,82 @@ function metadataMap(ipLocationData: LocationData, authenticatedData: UserProfil
) )
} }
interface AutomationComponentWrapperProps {
isMobileWidth: boolean;
callToAction: string;
createNew: boolean;
setIsCreating: (completed: boolean) => void;
setShowLoginPrompt: (showLoginPrompt: boolean) => void;
setNewAutomationData: (data: AutomationsData) => void;
authenticatedData: UserProfile | null;
isCreating: boolean;
ipLocationData: LocationData | null | undefined;
automation?: AutomationsData;
}
function AutomationComponentWrapper(props: AutomationComponentWrapperProps) {
return (
props.isMobileWidth ? (
<Drawer
open={props.isCreating}
onOpenChange={(open) => {
props.setIsCreating(open);
}}>
<DrawerTrigger asChild>
<Button
className='shadow-sm'
variant="outline">
<Plus className='h-4 w-4 mr-2' />
{props.callToAction}
</Button>
</DrawerTrigger>
<DrawerContent className='p-2'>
<DrawerTitle>Automation</DrawerTitle>
<EditCard
createNew={props.createNew}
automation={props.automation}
setIsEditing={props.setIsCreating}
isLoggedIn={props.authenticatedData ? true : false}
authenticatedData={props.authenticatedData}
setShowLoginPrompt={props.setShowLoginPrompt}
setUpdatedAutomationData={props.setNewAutomationData}
locationData={props.ipLocationData} />
</DrawerContent>
</Drawer>
) :
(
<Dialog
open={props.isCreating}
onOpenChange={(open) => {
props.setIsCreating(open);
}}
>
<DialogTrigger asChild>
<Button
className='shadow-sm'
variant="outline">
<Plus className='h-4 w-4 mr-2' />
{props.callToAction}
</Button>
</DialogTrigger>
<DialogContent>
<DialogTitle>Automation</DialogTitle>
<EditCard
automation={props.automation}
createNew={props.createNew}
setIsEditing={props.setIsCreating}
isLoggedIn={props.authenticatedData ? true : false}
authenticatedData={props.authenticatedData}
setShowLoginPrompt={props.setShowLoginPrompt}
setUpdatedAutomationData={props.setNewAutomationData}
locationData={props.ipLocationData} />
</DialogContent>
</Dialog>
)
);
}
export default function Automations() { export default function Automations() {
const authenticatedData = useAuthenticatedData(); const authenticatedData = useAuthenticatedData();
@ -932,7 +969,7 @@ export default function Automations() {
} }
}, [personalAutomations, allNewAutomations]); }, [personalAutomations, allNewAutomations]);
if (error) return <div>Failed to load</div>; if (error) return <InlineLoading message='Oops, something went wrong. Please refresh the page.' />;
return ( return (
<main className={`${styles.main} w-full ml-auto mr-auto`}> <main className={`${styles.main} w-full ml-auto mr-auto`}>
@ -950,7 +987,7 @@ export default function Automations() {
<div className='flex flex-wrap gap-2 items-center justify-start'> <div className='flex flex-wrap gap-2 items-center justify-start'>
{ {
authenticatedData ? ( authenticatedData ? (
<span className='rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm' ><Envelope className='h-4 w-4 mr-2 inline text-orange-500' shadow-s />{authenticatedData.email}</span> <span className='rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm' ><Envelope className='h-4 w-4 mr-2 inline text-orange-500 shadow-sm' />{authenticatedData.email}</span>
) )
: null : null
} }
@ -986,34 +1023,18 @@ export default function Automations() {
Your Creations Your Creations
</h3> </h3>
{ {
authenticatedData ? ( authenticatedData ?
<Dialog <AutomationComponentWrapper
open={isCreating} isMobileWidth={isMobileWidth}
onOpenChange={(open) => { callToAction="Create Automation"
setIsCreating(open);
}}
>
<DialogTrigger asChild>
<Button
className='shadow-sm'
variant="outline">
<Plus className='h-4 w-4 mr-2' />
Create Automation
</Button>
</DialogTrigger>
<DialogContent>
<DialogTitle>Create Automation</DialogTitle>
<EditCard
createNew={true} createNew={true}
setIsEditing={setIsCreating} setIsCreating={setIsCreating}
isLoggedIn={authenticatedData ? true : false}
authenticatedData={authenticatedData}
setShowLoginPrompt={setShowLoginPrompt} setShowLoginPrompt={setShowLoginPrompt}
setUpdatedAutomationData={setNewAutomationData} setNewAutomationData={setNewAutomationData}
locationData={ipLocationData} /> authenticatedData={authenticatedData}
</DialogContent> isCreating={isCreating}
</Dialog> ipLocationData={ipLocationData}
) />
: ( : (
<Button <Button
className='shadow-sm' className='shadow-sm'
@ -1027,6 +1048,7 @@ export default function Automations() {
</div> </div>
<Suspense> <Suspense>
<SharedAutomationCard <SharedAutomationCard
isMobileWidth={isMobileWidth}
authenticatedData={authenticatedData} authenticatedData={authenticatedData}
locationData={ipLocationData} locationData={ipLocationData}
isLoggedIn={authenticatedData ? true : false} isLoggedIn={authenticatedData ? true : false}
@ -1039,29 +1061,18 @@ export default function Automations() {
So empty! Create your own automation to get started. So empty! Create your own automation to get started.
<div className='mt-4'> <div className='mt-4'>
{ {
authenticatedData ? ( authenticatedData ?
<Dialog <AutomationComponentWrapper
open={isCreating} isMobileWidth={isMobileWidth}
onOpenChange={(open) => { callToAction="Design Automation"
setIsCreating(open);
}}
>
<DialogTrigger asChild>
<Button variant="default">Design</Button>
</DialogTrigger>
<DialogContent>
<DialogTitle>Create Automation</DialogTitle>
<EditCard
authenticatedData={authenticatedData}
createNew={true} createNew={true}
isLoggedIn={authenticatedData ? true : false} setIsCreating={setIsCreating}
setShowLoginPrompt={setShowLoginPrompt} setShowLoginPrompt={setShowLoginPrompt}
setIsEditing={setIsCreating} setNewAutomationData={setNewAutomationData}
setUpdatedAutomationData={setNewAutomationData} authenticatedData={authenticatedData}
locationData={ipLocationData} /> isCreating={isCreating}
</DialogContent> ipLocationData={ipLocationData}
</Dialog> />
)
: ( : (
<Button <Button
onClick={() => setShowLoginPrompt(true)} onClick={() => setShowLoginPrompt(true)}
@ -1084,6 +1095,7 @@ export default function Automations() {
{ {
personalAutomations && personalAutomations.map((automation) => ( personalAutomations && personalAutomations.map((automation) => (
<AutomationsCard <AutomationsCard
isMobileWidth={isMobileWidth}
key={automation.id} key={automation.id}
authenticatedData={authenticatedData} authenticatedData={authenticatedData}
automation={automation} automation={automation}
@ -1094,6 +1106,7 @@ export default function Automations() {
{ {
allNewAutomations.map((automation) => ( allNewAutomations.map((automation) => (
<AutomationsCard <AutomationsCard
isMobileWidth={isMobileWidth}
key={automation.id} key={automation.id}
authenticatedData={authenticatedData} authenticatedData={authenticatedData}
automation={automation} automation={automation}
@ -1112,6 +1125,7 @@ export default function Automations() {
{ {
suggestedAutomations.map((automation) => ( suggestedAutomations.map((automation) => (
<AutomationsCard <AutomationsCard
isMobileWidth={isMobileWidth}
setNewAutomationData={setNewAutomationData} setNewAutomationData={setNewAutomationData}
key={automation.id} key={automation.id}
authenticatedData={authenticatedData} authenticatedData={authenticatedData}