mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: init org thumbnails creation & edition & redesign dash org config page
This commit is contained in:
swve
parent
41a11c5f83
commit
aecf03404f
17 changed files with 661 additions and 99 deletions
|
|
@ -4,12 +4,16 @@ import { Field, Form, Formik } from 'formik'
|
|||
import {
|
||||
updateOrganization,
|
||||
uploadOrganizationLogo,
|
||||
uploadOrganizationThumbnail,
|
||||
} from '@services/settings/org'
|
||||
import { UploadCloud } from 'lucide-react'
|
||||
import { UploadCloud, Info, Check, FileWarning } from 'lucide-react'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getOrgLogoMediaDirectory, getOrgThumbnailMediaDirectory } from '@services/media/media'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Toaster, toast } from 'react-hot-toast';
|
||||
|
||||
interface OrganizationValues {
|
||||
name: string
|
||||
|
|
@ -17,32 +21,54 @@ interface OrganizationValues {
|
|||
slug: string
|
||||
logo: string
|
||||
email: string
|
||||
thumbnail: string
|
||||
}
|
||||
|
||||
function OrgEditGeneral(props: any) {
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||
const router = useRouter();
|
||||
const session = useLHSession() as any;
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
function OrgEditGeneral() {
|
||||
const router = useRouter()
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token
|
||||
const org = useOrg() as any
|
||||
// ...
|
||||
const [selectedTab, setSelectedTab] = useState<'logo' | 'thumbnail'>('logo');
|
||||
const [localLogo, setLocalLogo] = useState<string | null>(null);
|
||||
const [localThumbnail, setLocalThumbnail] = useState<string | null>(null);
|
||||
|
||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files && event.target.files.length > 0) {
|
||||
const file = event.target.files[0]
|
||||
setSelectedFile(file)
|
||||
setLocalLogo(URL.createObjectURL(file))
|
||||
const loadingToast = toast.loading('Uploading logo...');
|
||||
try {
|
||||
await uploadOrganizationLogo(org.id, file, access_token)
|
||||
await new Promise((r) => setTimeout(r, 1500))
|
||||
toast.success('Logo Updated', { id: loadingToast });
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error('Failed to upload logo', { id: loadingToast });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const uploadLogo = async () => {
|
||||
if (selectedFile) {
|
||||
let org_id = org.id
|
||||
await uploadOrganizationLogo(org_id, selectedFile, access_token)
|
||||
setSelectedFile(null) // Reset the selected file
|
||||
await revalidateTags(['organizations'], org.slug)
|
||||
router.refresh()
|
||||
const handleThumbnailChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files && event.target.files.length > 0) {
|
||||
const file = event.target.files[0];
|
||||
setLocalThumbnail(URL.createObjectURL(file));
|
||||
const loadingToast = toast.loading('Uploading thumbnail...');
|
||||
try {
|
||||
await uploadOrganizationThumbnail(org.id, file, access_token);
|
||||
await new Promise((r) => setTimeout(r, 1500));
|
||||
toast.success('Thumbnail Updated', { id: loadingToast });
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error('Failed to upload thumbnail', { id: loadingToast });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageButtonClick = (inputId: string) => (event: React.MouseEvent) => {
|
||||
event.preventDefault(); // Prevent form submission
|
||||
document.getElementById(inputId)?.click();
|
||||
};
|
||||
|
||||
let orgValues: OrganizationValues = {
|
||||
name: org?.name,
|
||||
|
|
@ -50,21 +76,25 @@ function OrgEditGeneral(props: any) {
|
|||
slug: org?.slug,
|
||||
logo: org?.logo,
|
||||
email: org?.email,
|
||||
thumbnail: org?.thumbnail,
|
||||
}
|
||||
|
||||
const updateOrg = async (values: OrganizationValues) => {
|
||||
let org_id = org.id
|
||||
await updateOrganization(org_id, values, access_token)
|
||||
|
||||
// Mutate the org
|
||||
await revalidateTags(['organizations'], org.slug)
|
||||
router.refresh()
|
||||
const loadingToast = toast.loading('Updating organization...');
|
||||
try {
|
||||
await updateOrganization(org.id, values, access_token)
|
||||
await revalidateTags(['organizations'], org.slug)
|
||||
toast.success('Organization Updated', { id: loadingToast });
|
||||
} catch (err) {
|
||||
toast.error('Failed to update organization', { id: loadingToast });
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { }, [org])
|
||||
useEffect(() => {}, [org])
|
||||
|
||||
return (
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
|
||||
<Toaster />
|
||||
<Formik
|
||||
enableReinitialize
|
||||
initialValues={orgValues}
|
||||
|
|
@ -77,71 +107,127 @@ function OrgEditGeneral(props: any) {
|
|||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<label className="block mb-2 font-bold" htmlFor="name">
|
||||
Name
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="text"
|
||||
name="name"
|
||||
/>
|
||||
<div className="flex space-x-8">
|
||||
<div className="max-w-md flex-grow">
|
||||
<label className="block mb-2 font-bold" htmlFor="name">
|
||||
Name
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="text"
|
||||
name="name"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="description">
|
||||
Description
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="text"
|
||||
name="description"
|
||||
/>
|
||||
<label className="block mb-2 font-bold" htmlFor="description">
|
||||
Description
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="text"
|
||||
name="description"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="slug">
|
||||
Logo
|
||||
</label>
|
||||
<label className="block mb-2 font-bold" htmlFor="slug">
|
||||
Slug
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg bg-gray-200 cursor-not-allowed"
|
||||
disabled
|
||||
type="text"
|
||||
name="slug"
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-center w-full ">
|
||||
<input
|
||||
className="w-full px-4 py-2 mr-1 border rounded-lg bg-gray-200 cursor-not-allowed"
|
||||
type="file"
|
||||
name="logo"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={uploadLogo}
|
||||
disabled={isSubmitting || selectedFile === null}
|
||||
className="px-6 py-3 text-white bg-gray-500 rounded-lg hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-black"
|
||||
>
|
||||
<UploadCloud size={24} />
|
||||
</button>
|
||||
<label className="block mb-2 font-bold" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="email"
|
||||
name="email"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col grow space-y-3">
|
||||
<Tabs defaultValue="logo" className="w-full ">
|
||||
<TabsList className="grid w-full grid-cols-2 mb-20">
|
||||
<TabsTrigger value="logo">Logo</TabsTrigger>
|
||||
<TabsTrigger value="thumbnail">Thumbnail</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="logo">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
|
||||
<div className="flex flex-col justify-center items-center mt-10">
|
||||
<div
|
||||
className="w-[200px] h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
style={{ backgroundImage: `url(${localLogo || getOrgLogoMediaDirectory(org?.org_uuid, org?.logo_image)})` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-center items-center">
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 py-2 mt-4 flex"
|
||||
onClick={handleImageButtonClick('fileInput')}
|
||||
>
|
||||
<UploadCloud size={16} className="mr-2" />
|
||||
<span>Change Logo</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex text-xs space-x-2 items-center text-gray-500 justify-center">
|
||||
<Info size={13} />
|
||||
<p>Accepts PNG , JPG</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="thumbnail">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
|
||||
<div className="flex flex-col justify-center items-center mt-10">
|
||||
<div
|
||||
className="w-[200px] h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
style={{ backgroundImage: `url(${localThumbnail || getOrgThumbnailMediaDirectory(org?.org_uuid, org?.thumbnail_image)})` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-center items-center">
|
||||
<input
|
||||
type="file"
|
||||
id="thumbnailInput"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleThumbnailChange}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 py-2 mt-4 flex"
|
||||
onClick={handleImageButtonClick('thumbnailInput')}
|
||||
>
|
||||
<UploadCloud size={16} className="mr-2" />
|
||||
<span>Change Thumbnail</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex text-xs space-x-2 items-center text-gray-500 justify-center">
|
||||
<Info size={13} />
|
||||
<p>Accepts PNG, JPG</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="slug">
|
||||
Slug
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg bg-gray-200 cursor-not-allowed"
|
||||
disabled
|
||||
type="text"
|
||||
name="slug"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="email"
|
||||
name="email"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
|
|
|
|||
55
apps/web/components/ui/tabs.tsx
Normal file
55
apps/web/components/ui/tabs.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Tabs = TabsPrimitive.Root
|
||||
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsList.displayName = TabsPrimitive.List.displayName
|
||||
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
|
||||
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
Loading…
Add table
Add a link
Reference in a new issue