mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: init org settings
This commit is contained in:
swve
parent
838a94eec1
commit
55c097a50e
6 changed files with 227 additions and 16 deletions
|
|
@ -0,0 +1,154 @@
|
|||
"use client";
|
||||
import React, { use, useEffect, useState } from 'react'
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import { updateOrganization, uploadOrganizationLogo } from '@services/settings/org';
|
||||
import { UploadCloud } from 'lucide-react';
|
||||
import { revalidateTags } from '@services/utils/ts/requests';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useOrg } from '@components/Contexts/OrgContext';
|
||||
|
||||
interface OrganizationValues {
|
||||
name: string;
|
||||
description: string;
|
||||
slug: string;
|
||||
logo: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
function OrgEditGeneral(props: any) {
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const router = useRouter();
|
||||
const org = useOrg() as any;
|
||||
// ...
|
||||
|
||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files && event.target.files.length > 0) {
|
||||
const file = event.target.files[0];
|
||||
setSelectedFile(file);
|
||||
}
|
||||
};
|
||||
|
||||
const uploadLogo = async () => {
|
||||
if (selectedFile) {
|
||||
let org_id = org.id;
|
||||
await uploadOrganizationLogo(org_id, selectedFile);
|
||||
setSelectedFile(null); // Reset the selected file
|
||||
await revalidateTags(['organizations'], org.slug);
|
||||
router.refresh();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
let orgValues: OrganizationValues = {
|
||||
name: org?.name,
|
||||
description: org?.description,
|
||||
slug: org?.slug,
|
||||
logo: org?.logo,
|
||||
email: org?.email
|
||||
}
|
||||
|
||||
const updateOrg = async (values: OrganizationValues) => {
|
||||
let org_id = org.id;
|
||||
await updateOrganization(org_id, values);
|
||||
|
||||
// Mutate the org
|
||||
await revalidateTags(['organizations'], org.slug);
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}
|
||||
, [org])
|
||||
|
||||
return (
|
||||
<div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
|
||||
<Formik
|
||||
enableReinitialize
|
||||
initialValues={orgValues}
|
||||
onSubmit={(values, { setSubmitting }) => {
|
||||
setTimeout(() => {
|
||||
alert(JSON.stringify(values, null, 2));
|
||||
setSubmitting(false);
|
||||
updateOrg(values)
|
||||
}, 400);
|
||||
}}
|
||||
>
|
||||
{({ 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"
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrgEditGeneral
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import { useCourse } from '@components/Contexts/CourseContext'
|
||||
import { Book, ChevronRight, User } from 'lucide-react'
|
||||
import { Book, ChevronRight, School, User } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import React, { use, useEffect } from 'react'
|
||||
|
||||
type BreadCrumbsProps = {
|
||||
type: 'courses' | 'user' | 'users',
|
||||
type: 'courses' | 'user' | 'users' | 'org'
|
||||
last_breadcrumb?: string
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ function BreadCrumbs(props: BreadCrumbsProps) {
|
|||
<div className='flex items-center space-x-1'>
|
||||
{props.type == 'courses' ? <div className='flex space-x-2 items-center'> <Book className='text-gray' size={14}></Book><Link href='/dash/courses'>Courses</Link></div> : ''}
|
||||
{props.type == 'user' ? <div className='flex space-x-2 items-center'> <User className='text-gray' size={14}></User><Link href='/dash/user/settings/general'>Account Settings</Link></div> : ''}
|
||||
|
||||
{props.type == 'org' ? <div className='flex space-x-2 items-center'> <School className='text-gray' size={14}></School><Link href='/dash/users'>Organization Settings</Link></div> : ''}
|
||||
<div className='flex items-center space-x-1 first-letter:uppercase'>
|
||||
{props.last_breadcrumb ? <ChevronRight size={17} /> : ''}
|
||||
<div className='first-letter:uppercase'> {props.last_breadcrumb}</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { useAuth } from '@components/Security/AuthContext';
|
|||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
|
||||
import LearnHouseDashboardLogo from '@public/dashLogo.png';
|
||||
import Avvvatars from 'avvvatars-react';
|
||||
import { ArrowLeft, Book, Home, Settings } from 'lucide-react'
|
||||
import { ArrowLeft, Book, Home, School, Settings } from 'lucide-react'
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link'
|
||||
import React, { use, useEffect } from 'react'
|
||||
|
|
@ -32,26 +32,34 @@ function LeftMenu() {
|
|||
return (
|
||||
<div
|
||||
style={{ background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.00) 100%), #2E2D2D" }}
|
||||
className='flex flex-col w-24 bg-black h-screen text-white shadow-xl'>
|
||||
className='flex flex-col w-28 bg-black h-screen text-white shadow-xl'>
|
||||
<div className='flex flex-col h-full'>
|
||||
<div className='flex h-20 mt-6'>
|
||||
<Link className='flex flex-col items-center mx-auto space-y-1' href={"/dash"}>
|
||||
<Image alt="Learnhouse logo" width={40} src={LearnHouseDashboardLogo} />
|
||||
<Link className='flex flex-col items-center mx-auto space-y-3' href={"/"}>
|
||||
<ToolTip content={'Back to Home'} slateBlack sideOffset={8} side='right' >
|
||||
<Image alt="Learnhouse logo" width={40} src={LearnHouseDashboardLogo} />
|
||||
</ToolTip>
|
||||
<ToolTip content={'Your Organization'} slateBlack sideOffset={8} side='right' >
|
||||
<div className='py-1 px-3 bg-black/40 opacity-40 rounded-md text-[10px] justify-center text-center'>{org?.name}</div>
|
||||
</ToolTip>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='flex grow flex-col justify-center space-y-5 items-center mx-auto'>
|
||||
<ToolTip content={"Back to " + org?.name + "'s Home"} slateBlack sideOffset={8} side='right' >
|
||||
{/* <ToolTip content={"Back to " + org?.name + "'s Home"} slateBlack sideOffset={8} side='right' >
|
||||
<Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
|
||||
</ToolTip>
|
||||
</ToolTip> */}
|
||||
<ToolTip content={"Home"} slateBlack sideOffset={8} side='right' >
|
||||
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash`} ><Home size={18} /></Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={"Courses"} slateBlack sideOffset={8} side='right' >
|
||||
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18} /></Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={"Organization"} slateBlack sideOffset={8} side='right' >
|
||||
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/org/settings/general`} ><School size={18} /></Link>
|
||||
</ToolTip>
|
||||
</div>
|
||||
<div className='flex flex-col mx-auto pb-7 space-y-2'>
|
||||
<ToolTip content={auth.user.username+ "'s Settings"} slateBlack sideOffset={8} side='right' >
|
||||
<ToolTip content={auth.user.username + "'s Settings"} slateBlack sideOffset={8} side='right' >
|
||||
<Link href={'/dash/user/settings/general'} className='py-3'>
|
||||
<Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
|
||||
</Link>
|
||||
|
|
@ -63,7 +71,7 @@ function LeftMenu() {
|
|||
</div>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Learnhouse Version'} slateBlack sideOffset={8} side='right' >
|
||||
<div className='py-1 px-3 bg-white/10 opacity-40 rounded-full text-[10px] uppercase justify-center text-center'>alpha</div>
|
||||
<div className='py-1 px-3 bg-white/10 opacity-40 rounded-full text-[10px] uppercase justify-center text-center'>alpha</div>
|
||||
</ToolTip>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@ import { HeaderProfileBox } from "@components/Security/HeaderProfileBox";
|
|||
import MenuLinks from "./MenuLinks";
|
||||
import { getOrgLogoMediaDirectory } from "@services/media/media";
|
||||
import { MessageSquareIcon } from "lucide-react";
|
||||
import { Tooltip } from "@radix-ui/react-tooltip";
|
||||
import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
|
||||
import Modal from "@components/StyledElements/Modal/Modal";
|
||||
import FeedbackModal from "../Modals/Feedback/Feedback";
|
||||
import useSWR from "swr";
|
||||
|
|
@ -39,9 +37,9 @@ export const Menu = (props: any) => {
|
|||
<div className="logo flex ">
|
||||
<Link href={getUriWithOrg(orgslug, "/")}>
|
||||
<div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center" >
|
||||
{org?.logo ? (
|
||||
{org?.logo_image ? (
|
||||
<img
|
||||
src={`${getOrgLogoMediaDirectory(org.org_id, org?.logo)}`}
|
||||
src={`${getOrgLogoMediaDirectory(org.org_uuid, org?.logo_image)}`}
|
||||
alt="Learnhouse"
|
||||
style={{ width: "auto", height: "100%" }}
|
||||
className="rounded-md"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue