remove dashboard filter disclousere

This commit is contained in:
2022-10-17 11:17:09 -03:00
parent 69b5812386
commit 0721977bb6
2 changed files with 53 additions and 81 deletions

View File

@@ -1,12 +1,12 @@
import React, {FC, Fragment} from 'react' import React, { FC, Fragment } from 'react'
import {Disclosure, Transition} from "@headlessui/react" import { Disclosure, Transition } from "@headlessui/react"
import {ChevronDownIcon, XIcon} from "@heroicons/react/outline" import { ChevronDownIcon, XIcon } from "@heroicons/react/outline"
import {useForm} from "react-hook-form" import { useForm } from "react-hook-form"
import {QuestionWhereInput} from "../../__generated__/graphql-schema" import { QuestionWhereInput } from "../../__generated__/graphql-schema"
import {useDashboardContext, whereDefaultState} from "./DashboardContext" import { useDashboardContext, whereDefaultState } from "./DashboardContext"
import {useCurrentUser} from "../../contexts" import { useCurrentUser } from "../../contexts"
import {Button, Input} from "../../components" import { Button, Input } from "../../components"
type FilterBarForm = { type FilterBarForm = {
fromOtherUsers?: boolean fromOtherUsers?: boolean
@@ -36,12 +36,12 @@ const mapFilter = (values: FilterBarForm, userId?: string): QuestionWhereInput =
}) })
const FiltersForm: FC = () => { const FiltersForm: FC = () => {
const {register, handleSubmit, reset, getValues, formState} = useForm({ const { register, handleSubmit, reset, getValues, formState } = useForm({
defaultValues: formDefaultValues, defaultValues: formDefaultValues,
}) })
const {setWhere} = useDashboardContext() const { setWhere } = useDashboardContext()
const userContext = useCurrentUser() const userContext = useCurrentUser()
const {user, isOnlyTeacher} = userContext const { user, isOnlyTeacher } = userContext
const onSubmit = (values: FilterBarForm) => { const onSubmit = (values: FilterBarForm) => {
reset(getValues()) reset(getValues())
@@ -64,7 +64,7 @@ const FiltersForm: FC = () => {
<Input <Input
type="date" type="date"
placeholder="createDate.startAt" placeholder="createDate.startAt"
{...register('createDate.startAt',{ {...register('createDate.startAt', {
maxLength: 10, maxLength: 10,
minLength: 10, minLength: 10,
})} })}
@@ -101,7 +101,7 @@ const FiltersForm: FC = () => {
<div> <div>
<Button type={'tertiary'} onClick={handleClean}> <Button type={'tertiary'} onClick={handleClean}>
<span className={"flex"}> <span className={"flex"}>
<XIcon className={"w-5 h-5 text-gray-800"}/> <XIcon className={"w-5 h-5 text-gray-800"} />
Limpar filtro Limpar filtro
</span> </span>
</Button> </Button>
@@ -117,35 +117,7 @@ const FiltersForm: FC = () => {
} }
export const Filters: FC = () => ( export const Filters: FC = () => (
<Disclosure> <div className="p-4 m-auto bg-white rounded-md shadow-sm hover:shadow transition-shadow duration-300">
{({open}) => ( <FiltersForm />
<div className="m-auto bg-white rounded-md shadow-sm hover:shadow transition-shadow duration-300">
<Disclosure.Button as={Fragment}>
<button className="flex p-2 w-full justify-between">
<div className="grid place-items-center pl-4">
Filtros
</div> </div>
<div className={"pr-4"}>
<ChevronDownIcon
className={`${open ? 'transform rotate-180' : ''} w-5 h-5 text-gray-800`}
/>
</div>
</button>
</Disclosure.Button>
<Transition
show={open}
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel className={"p-4"}>
<FiltersForm/>
</Disclosure.Panel>
</Transition>
</div>
)}
</Disclosure>
) )

View File

@@ -13,8 +13,8 @@ type Props = {
export const Pie: FC<Props> = ({title, data}) => { export const Pie: FC<Props> = ({title, data}) => {
return ( return (
<div <div
className="m-auto bg-white rounded-md p-4 shadow-sm hover:shadow transition-shadow duration-300" className="m-auto bg-white rounded-md p-4 shadow-sm hover:shadow transition-shadow duration-300 w-full"
style={{ height: '36rem', width: '36rem' }} style={{ height: '36rem' }}
> >
<h3 className="text-lg leading-6 font-medium text-gray-900">{title}</h3> <h3 className="text-lg leading-6 font-medium text-gray-900">{title}</h3>
{data.length ? ( {data.length ? (