Skip to content

S
sevenpro-frontend
Commit 1e2e278b authored by Wellton Quirino's avatar Wellton Quirino
Browse files
Options

feat: improving pages admin routes

parent 4f7e1d0b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 632 additions and 259 deletions
package-lock.json
View file @ 1e2e278b
......@@ -18,6 +18,7 @@
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-radio-group": "^1.2.1",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
......@@ -1804,6 +1805,81 @@
}
}
},
"node_modules/@radix-ui/react-radio-group": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.1.tgz",
"integrity": "sha512-kdbv54g4vfRjja9DNWPMxKvXblzqbpEC8kspEkZ6dVP7kQksGCn+iZHkcCz2nb00+lPdRvxrqy4WrvvV1cNqrQ==",
"dependencies": {
"@radix-ui/primitive": "1.1.0",
"@radix-ui/react-compose-refs": "1.1.0",
"@radix-ui/react-context": "1.1.1",
"@radix-ui/react-direction": "1.1.0",
"@radix-ui/react-presence": "1.1.1",
"@radix-ui/react-primitive": "2.0.0",
"@radix-ui/react-roving-focus": "1.1.0",
"@radix-ui/react-use-controllable-state": "1.1.0",
"@radix-ui/react-use-previous": "1.1.0",
"@radix-ui/react-use-size": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-roving-focus": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
"integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
"dependencies": {
"@radix-ui/primitive": "1.1.0",
"@radix-ui/react-collection": "1.1.0",
"@radix-ui/react-compose-refs": "1.1.0",
"@radix-ui/react-context": "1.1.0",
"@radix-ui/react-direction": "1.1.0",
"@radix-ui/react-id": "1.1.0",
"@radix-ui/react-primitive": "2.0.0",
"@radix-ui/react-use-callback-ref": "1.1.0",
"@radix-ui/react-use-controllable-state": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
"integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-select": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
......
src/api/categories.ts 0 → 100644
View file @ 1e2e278b
import { api } from '@/lib/axios'
export type CategoriesProps = {
id: string
name: string
}
export async function getCategories() {
const categories = await api.get<CategoriesProps[]>('/categories')
return categories
}
src/app/(home)/page.tsx
View file @ 1e2e278b
......@@ -29,7 +29,8 @@ export default function Home() {
label="O que você quer aprender hoje?"
variant="standard"
type="text"
className="w-full #fafafa"
className="w-full"
themeColor="#fafafa"
/>
<Search size={24} />
</div>
......
src/app/admin/area/[id]/page.tsx
View file @ 1e2e278b
......@@ -3,6 +3,7 @@
import { AreasProps, deleteArea, editArea, getAreasId } from '@/api/areas'
import BreadcrumbComponent from '@/components/breadcrumb-component'
import InputFile from '@/components/input-file'
import { LoadingSpinIcon } from '@/components/loading-spin-icon'
import ModalDialog from '@/components/modal-dialog'
import { AlertDialog, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
......@@ -24,8 +25,8 @@ export default function AreaId() {
const queryClient = useQueryClient()
const { data: area, isLoading, isPending } = useQuery({
queryKey: ['area'],
const { data: area, isLoading } = useQuery({
queryKey: ['area', params.id],
queryFn: () => getAreasId(params.id),
enabled: !!params.id,
})
......@@ -60,14 +61,13 @@ export default function AreaId() {
mutationDelete.mutate(params.id)
}
if(isLoading) {
console.log('isloading')
return <span>isLoading TEST...</span>
}
if(isPending) {
console.log('isPeding')
return <span>isPending TEST...</span>
if (isLoading) {
return (
<div className="flex w-full h-[500px] items-center justify-center">
<LoadingSpinIcon />
<span>Loading...</span>
</div>
)
}
return (
......@@ -76,7 +76,13 @@ export default function AreaId() {
<form onSubmit={handleSubmit(onSubmit)}>
<div className="flex items-center gap-6">
<h1 className="text-3xl font-bold">Editar Área</h1>
<Button variant="secondary" type='submit' className="uppercase rounded-sm">
<Button
variant="secondary"
type="submit"
className="uppercase rounded-sm"
disabled={isLoading}
>
{mutationEdit.isPending && <LoadingSpinIcon />}
Salvar e publicar
</Button>
<AlertDialog>
......
src/app/admin/area/page.tsx
View file @ 1e2e278b
......@@ -2,6 +2,7 @@
import { AreasProps, createAreas } from '@/api/areas'
import InputFile from '@/components/input-file'
import { LoadingSpinIcon } from '@/components/loading-spin-icon'
import { StyledInputs } from '@/components/mui/styled-inputs'
import { Button } from '@/components/ui/button'
import { TextField } from '@mui/material'
......@@ -39,6 +40,7 @@ export default function Area() {
<div className="flex items-center gap-6">
<h1 className="text-3xl font-bold">Criar Área</h1>
<Button variant="secondary" className="uppercase rounded-sm">
{mutation.isPending && <LoadingSpinIcon />}
Salvar e publicar
</Button>
</div>
......
src/app/admin/curso/[id]/page.tsx
View file @ 1e2e278b
......@@ -29,7 +29,7 @@ export default function EditCourse() {
<section className="container py-10">
<form>
<div className="flex items-center gap-6">
<h1 className="text-green-700 text-3xl font-bold">Editar curso</h1>
<h1 className="text-3xl font-bold">Editar curso</h1>
{/* <Button variant="third" className="uppercase">
Salvar como rascunho
</Button> */}
......@@ -50,9 +50,20 @@ export default function EditCourse() {
Informações sobre o curso
</h6>
<InputMui label="Nome do curso" variant="standard" type="text" />
<InputMui
label="Nome do curso"
variant="standard"
type="text"
themeColor="#26AAA7"
/>
<InputMui type="text" variant="standard" label="Área" select>
<InputMui
type="text"
variant="standard"
label="Área"
select
themeColor="#26AAA7"
>
{options.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
......@@ -66,12 +77,14 @@ export default function EditCourse() {
type="text"
multiline
rows={4}
themeColor="#26AAA7"
/>
<InputMui
label="Nome dos(as) Professores(as):"
variant="standard"
type="text"
themeColor="#26AAA7"
/>
<div className="flex justify-between flex-wrap gap-6">
......@@ -119,7 +132,7 @@ export default function EditCourse() {
<Button
variant={'ghost'}
className={cn(
'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0',
'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0 border-green-400',
!date && 'text-muted-foreground',
)}
>
......@@ -159,7 +172,7 @@ export default function EditCourse() {
<Button
variant={'ghost'}
className={cn(
'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0',
'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0 border-green-400',
!date && 'text-muted-foreground',
)}
>
......@@ -189,7 +202,12 @@ export default function EditCourse() {
<h6 className="text-xl text-purple-100 mb-4">Módulos</h6>
<div className="flex flex-col p-4 gap-6 border border-gray-100">
<InputMui label="Título" variant="standard" type="text" />
<InputMui
label="Título"
variant="standard"
type="text"
themeColor="#26AAA7"
/>
<InputMui
label="Descrição"
......@@ -197,6 +215,7 @@ export default function EditCourse() {
type="text"
multiline
rows={4}
themeColor="#26AAA7"
/>
</div>
......@@ -207,6 +226,7 @@ export default function EditCourse() {
<PlusIcon size={20} /> <span>Adicionar Módulo</span>
</Button>
</div>
<div className="w-[380px] pl-6 flex flex-col gap-4">
<h6 className="text-xl text-purple-100 mb-4">
Qual o público alvo?
......
src/app/admin/curso/page.tsx
View file @ 1e2e278b
This diff is collapsed.
src/app/admin/page.tsx
View file @ 1e2e278b
......@@ -115,6 +115,7 @@ export default function Admin() {
type="text"
variant="standard"
className="w-full"
themeColor="#fafafa"
/>
<Search size={24} className="-ml-6" />
</div>
......
src/components/loading-spin-icon.tsx 0 → 100644
View file @ 1e2e278b
import { cn } from '@/lib/utils'
type SpinProps = {
className?: React.HTMLProps<HTMLElement>['className']
}
export function LoadingSpinIcon({ className }: SpinProps) {
return (
<svg
className={cn('animate-spin -ml-1 mr-3 h-5 w-5 text-white', className)}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
)
}
src/components/modal-dialog.tsx
View file @ 1e2e278b
import {
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
......@@ -7,6 +6,7 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from './ui/alert-dialog'
import { Button } from './ui/button'
type AlertDialogProps = {
title: string
......@@ -27,7 +27,13 @@ export default function ModalDialog({
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction onClick={handleClick}>Continue</AlertDialogAction>
<Button
onClick={handleClick}
variant="outline"
className="text-gray-50 bg-red-500 hover:bg-red-500/80"
>
Continue
</Button>
</AlertDialogFooter>
</AlertDialogContent>
)
......
src/components/mui/inputs.tsx
View file @ 1e2e278b
......@@ -7,6 +7,7 @@ import { ReactNode } from 'react'
type InputMuiProps = TextFieldProps & {
label: string
variant: 'standard' | 'filled' | 'outlined'
themeColor?: string
children?: ReactNode
}
......@@ -14,11 +15,12 @@ export function InputMui({
label,
variant,
children,
themeColor = '#fafafa',
...props
}: InputMuiProps) {
const themeConfig = useThemeClient()
const color = themeConfig === 'dark' ? '#fafafa' : '#3C3C3C'
const color = themeConfig === 'dark' ? themeColor : '#3C3C3C'
return (
<TextField
......@@ -44,10 +46,10 @@ export function InputMui({
color: `${color}`,
},
'& input': {
color: `${color}`,
color: `#fafafa`,
},
'& .MuiInputBase-input': {
color: `${color}`,
color: `#fafafa`,
},
'& .MuiInput-underline:before': {
borderBottomColor: color,
......
src/components/ui/radio-group.tsx 0 → 100644
View file @ 1e2e278b
"use client"
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"
import { cn } from "@/lib/utils"
const RadioGroup = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
return (
<RadioGroupPrimitive.Root
className={cn("grid gap-2", className)}
{...props}
ref={ref}
/>
)
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
const RadioGroupItem = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
return (
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
>
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
<Circle className="h-2.5 w-2.5 fill-current text-current" />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
)
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
export { RadioGroup, RadioGroupItem }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment