geonizeli/progress-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

split appbar code

Browse Source
This commit is contained in:
João Geonizeli
2022-08-10 20:31:42 +00:00
parent 20555f642b
commit 838075c3d9
7 changed files with 286 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
app/javascript/components/Appbar/Appbar.tsx
View File

@@ -1,239 +1,17 @@
import React, { FC, Fragment, useState } from 'react' import React from 'react';
import { useHistory, useLocation } from 'react-router';
import { Menu, Transition } from '@headlessui/react'
import { ChartBarIcon, ClipboardListIcon } from '@heroicons/react/outline'
import { Dialog } from '../Dialog' import { AppbarLogo } from './AppbarLogo';
import { useDispatch, useSelector } from 'react-redux'; import { AppbarTabs } from './AppbarTabs';
import { useCurrentUser } from '../../contexts'; import { AppbarUserMenu } from './AppbarUserMenu';
import { RootState } from '../../services/store';
import { classNames } from '../../utils';
import { DashboardRoutePaths, QuestionRoutePaths, SessionRoutePaths } from '../../routes'
import { turnOff } from '../../services/store/unsavedChanges';
import { CurrentUserAvatar } from "../CurrentUserAvatar";
import { localFetch } from '../../utils/localFetch';
import { notEmpty } from '../../utils/notEmpty';
import { UserRole } from '../../__generated__/graphql-schema';
const UserMenu: FC = () => {
const { user } = useCurrentUser();
const history = useHistory();
const [confirmLogout, setConfirmLogout] = useState(false)
const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges)
const dispatch = useDispatch()
const doLogout = () => {
setConfirmLogout(false)
dispatch(turnOff())
localFetch('/users/sign_out', {
method: 'DELETE'
}).then(() => {
window.location.href = '/'
})
}
const handleLogout = () => {
if (unsavedChanges && !confirmLogout) {
setConfirmLogout(true)
} else {
doLogout()
}
}
const [newPath, setNewPath] = useState<string>()
const handleForcedRedirect = () => {
if (!newPath) return
dispatch(turnOff())
setNewPath(undefined)
history.push(newPath)
}
const handleLinkClick = (pathname: string) => {
if (unsavedChanges) {
setNewPath(pathname)
} else {
history.push(pathname)
}
}
type MenuItem = {
onClick: Function
label: string
}
const menuItems: MenuItem[] = [
(user?.roles.includes(UserRole.Admin) && {
onClick: () => { window.location.href = '/admin'},
label: 'Painel de Administração'
}),
{
onClick: () => { handleLinkClick(SessionRoutePaths.show) },
label: 'Perfil'
},
{
onClick: handleLogout,
label: 'Sair'
}
].filter(notEmpty)
return (
<>
<Dialog
isOpen={!!newPath}
setIsOpen={(value) => setNewPath(value ? newPath : undefined)}
onConfirmation={handleForcedRedirect}
title="Modificações não Salvas"
text="Todas as alterações serão descartadas. Deseja continuar?"
/>
<Dialog
isOpen={confirmLogout}
setIsOpen={setConfirmLogout}
onConfirmation={handleLogout}
title="Modificações não Salvas"
text="Todas as alterações serão descartadas. Deseja continuar?"
/>
<Menu as="div" className="relative h-full">
{({ open }) => (
<>
<Menu.Button
className="h-full flex flex-row px-2 items-center hover:bg-primary-dark text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
>
<span className="hidden md:block pr-2">
{user?.name}
</span>
<div className="w-12">
<CurrentUserAvatar />
</div>
</Menu.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
static
className="z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none cursor-pointer"
>
{menuItems.map((item) => (
<Menu.Item key={`menu-item-${item.label}`} onClick={item.onClick}>
{({ active }) => (
<span
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-900'
)}
>
{item.label}
</span>
)}
</Menu.Item>
))}
</Menu.Items>
</Transition>
</>
)}
</Menu>
</>
)
}
const Links: FC = () => {
const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges)
const dispatch = useDispatch()
const location = useLocation()
const history = useHistory()
const [newPath, setNewPath] = useState<string>()
const handleForcedRedirect = () => {
if (!newPath) return
dispatch(turnOff())
setNewPath(undefined)
history.push(newPath)
}
const handleLinkClick = (pathname: string) => {
if (unsavedChanges) {
setNewPath(pathname)
} else {
history.push(pathname)
}
}
const links = [{
icon: <ChartBarIcon className="w-6" />,
tabel: 'Painel',
pathname: DashboardRoutePaths.index,
isCurrent: location.pathname.includes('dashboard'),
},
{
icon: <ClipboardListIcon className="w-6" />,
tabel: 'Edição',
pathname: QuestionRoutePaths.index,
isCurrent: location.pathname.includes('question'),
}]
return (
<>
<Dialog
isOpen={!!newPath}
setIsOpen={(value) => setNewPath(value ? newPath : undefined)}
onConfirmation={handleForcedRedirect}
title="Modificações não Salvas"
text="Todas as alterações serão descartadas. Deseja continuar?"
/>
<div className="h-full flex items-center pl-4">
{links.map((link) => (
<button
className={`h-full flex items-center px-2 mx-2 text-gray-300 hover:bg-primary-dark ${link.isCurrent ? 'underline bg-primary-dark' : ''}`}
key={`navbar-link-${link.pathname}`}
onClick={() => handleLinkClick(link.pathname)}
>
<span className="pr-2 ">
{link.icon}
</span>
{link.tabel}
</button>
))}
</div>
</>
)
}
const Logo: FC = () => (
<div className="h-full grid place-items-center">
<img
alt="Símbolo do Unifeso"
className="hidden md:block h-12 w-auto"
src={'https://www.unifeso.edu.br/images/logo/UNIFESO-BRANCO.png'}
/>
<img
alt="Logotipo do Unifeso"
className="md:hidden h-12 w-12 object-cover object-left"
src={'https://www.unifeso.edu.br/images/logo/UNIFESO-BRANCO.png'}
/>
</div>
)
export const Appbar = () => { export const Appbar = () => {
return ( return (
<div className="px-4 bg-primary-normal flex items-center justify-between h-16 shadow-md"> <div className="px-4 bg-primary-normal flex items-center justify-between h-16 shadow-md">
<div className="flex h-full"> <div className="flex h-full">
<Logo /> <AppbarLogo />
<Links /> <AppbarTabs />
</div> </div>
<UserMenu /> <AppbarUserMenu />
</div> </div>
) )
} }

16
app/javascript/components/Appbar/AppbarLogo.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react'
export const AppbarLogo = () => (
<div className="h-full grid place-items-center">
<img
alt="Símbolo do Unifeso"
className="hidden md:block h-12 w-auto"
src={'https://www.unifeso.edu.br/images/logo/UNIFESO-BRANCO.png'}
/>
<img
alt="Logotipo do Unifeso"
className="md:hidden h-12 w-12 object-cover object-left"
src={'https://www.unifeso.edu.br/images/logo/UNIFESO-BRANCO.png'}
/>
</div>
)

75
app/javascript/components/Appbar/AppbarTabs.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { ChartBarIcon, ClipboardListIcon } from "@heroicons/react/outline";
import React, { useState } from 'react';
import { useDispatch, useSelector } from "react-redux";
import { useHistory, useLocation } from 'react-router';
import { DashboardRoutePaths, QuestionRoutePaths } from "../../routes";
import { RootState } from "../../services/store";
import { turnOff } from "../../services/store/unsavedChanges";
import { Dialog } from '../Dialog';
export const AppbarTabs = () => {
const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges)
const dispatch = useDispatch()
const location = useLocation()
const history = useHistory()
const [newPath, setNewPath] = useState<string>()
const handleForcedRedirect = () => {
if (!newPath) return
dispatch(turnOff())
setNewPath(undefined)
history.push(newPath)
}
const handleLinkClick = (pathname: string) => {
if (unsavedChanges) {
setNewPath(pathname)
} else {
history.push(pathname)
}
}
const links = [{
icon: <ChartBarIcon className="w-6" />,
tabel: 'Painel',
pathname: DashboardRoutePaths.index,
isCurrent: location.pathname.includes('dashboard'),
},
{
icon: <ClipboardListIcon className="w-6" />,
tabel: 'Edição',
pathname: QuestionRoutePaths.index,
isCurrent: location.pathname.includes('question'),
}]
return (
<>
<Dialog
isOpen={!!newPath}
setIsOpen={(value) => setNewPath(value ? newPath : undefined)}
onConfirmation={handleForcedRedirect}
title="Modificações não Salvas"
text="Todas as alterações serão descartadas. Deseja continuar?"
/>
<div className="h-full flex items-center pl-4">
{links.map((link) => (
<button
className={`h-full flex items-center px-2 mx-2 text-gray-300 hover:bg-primary-dark ${link.isCurrent ? 'underline bg-primary-dark' : ''}`}
key={`navbar-link-${link.pathname}`}
onClick={() => handleLinkClick(link.pathname)}
>
<span className="pr-2 ">
{link.icon}
</span>
{link.tabel}
</button>
))}
</div>
</>
)
}

156
app/javascript/components/Appbar/AppbarUserMenu.tsx Normal file
View File

@@ -0,0 +1,156 @@
import { Menu, Transition } from '@headlessui/react';
import React, { Fragment, useState } from 'react';
import { useHistory } from 'react-router';
import { useDispatch, useSelector } from 'react-redux';
import { useCurrentUser } from '../../contexts';
import { SessionRoutePaths } from '../../routes';
import { RootState } from '../../services/store';
import { turnOff } from '../../services/store/unsavedChanges';
import { classNames } from '../../utils';
import { localFetch } from '../../utils/localFetch';
import { notEmpty } from '../../utils/notEmpty';
import { UserRole } from '../../__generated__/graphql-schema';
import { CurrentUserAvatar } from "../CurrentUserAvatar";
import { Dialog } from '../Dialog';
export const AppbarUserMenu = () => {
const { user } = useCurrentUser();
const history = useHistory();
const [confirmLogout, setConfirmLogout] = useState(false)
const [newPath, setNewPath] = useState<string>()
const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges)
const dispatch = useDispatch()
const doLogout = () => {
setConfirmLogout(false)
dispatch(turnOff())
localFetch('/users/sign_out', {
method: 'DELETE'
}).then(() => {
window.location.href = '/'
})
}
const handleLogout = () => {
if (unsavedChanges && !confirmLogout) {
setConfirmLogout(true)
} else {
doLogout()
}
}
const handleForcedRedirect = () => {
if (!newPath) return
dispatch(turnOff())
setNewPath(undefined)
history.push(newPath)
}
const handleLinkClick = (pathname: string) => {
if (unsavedChanges) {
setNewPath(pathname)
} else {
history.push(pathname)
}
}
type MenuItem = {
onClick: Function
label: string
}
const menuItems: MenuItem[] = [
{
onClick: () => { handleLinkClick(SessionRoutePaths.show) },
label: 'Perfil'
},
{
onClick: handleLogout,
label: 'Sair'
}
]
if (user?.roles.includes(UserRole.Admin)) {
menuItems.push({
onClick: () => { window.location.href = '/admin'},
label: 'Painel de Administração'
})
}
return (
<>
<Dialog
isOpen={!!newPath}
setIsOpen={(value) => setNewPath(value ? newPath : undefined)}
onConfirmation={handleForcedRedirect}
title="Modificações não Salvas"
text="Todas as alterações serão descartadas. Deseja continuar?"
/>
<Dialog
isOpen={confirmLogout}
setIsOpen={setConfirmLogout}
onConfirmation={handleLogout}
title="Modificações não Salvas"
text="Todas as alterações serão descartadas. Deseja continuar?"
/>
<Menu as="div" className="relative h-full">
{({ open }) => (
<>
<Menu.Button
className="h-full flex flex-row px-2 items-center hover:bg-primary-dark text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
>
<span className="hidden md:block pr-2">
{user?.name}
</span>
<div className="w-12">
<CurrentUserAvatar />
</div>
</Menu.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
static
className="z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none cursor-pointer"
>
{menuItems.map((item) => (
<div
key={`menu-item-${item.label}`}
onClick={() => {
item.onClick()
}}
>
<Menu.Item>
{({ active }) => (
<span
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-900'
)}
>
{item.label}
</span>
)}
</Menu.Item>
</div>
))}
</Menu.Items>
</Transition>
</>
)}
</Menu>
</>
)
}

15
app/javascript/pages/question/Form/steps/FeaturesFromStep/FeaturesFormStep.tsx
View File

@@ -9,7 +9,7 @@ import { SubjectFragment, SubjectSelect } from "./SubjectSelect";
import { import {
BLOOM_TAXONOMY, BLOOM_TAXONOMY,
CHECK_TYPE, CHECK_TYPE,
DIFFICULTY, DIFFICULTY
} from "../../../../../utils/types"; } from "../../../../../utils/types";
export const FeaturesFragment = gql` export const FeaturesFragment = gql`
@@ -27,20 +27,20 @@ export const FeaturesFragment = gql`
} }
`; `;
const CURRENT_YEAR = new Date().getFullYear();
export const FeaturesFormStep: FC = () => { export const FeaturesFormStep: FC = () => {
const { const {
hooks: { setValue, register, getValues }, hooks: { setValue, register, watch },
} = useFormProvider(); } = useFormProvider();
const currentYear = new Date().getFullYear(); const authorship = watch("authorship");
const authorship = getValues("authorship");
const [ownQuestion, setOwnQuestion] = useState(authorship === "UNIFESO"); const [ownQuestion, setOwnQuestion] = useState(authorship === "UNIFESO");
const handleOwnCheck = (value: string) => { const handleOwnCheck = (value: string) => {
if (value === "UNIFESO") { if (value === "UNIFESO") {
setOwnQuestion(true); setOwnQuestion(true);
setValue("authorship", "UNIFESO"); setValue("authorship", "UNIFESO");
setValue("authorshipYear", currentYear.toString()); setValue("authorshipYear", CURRENT_YEAR.toString());
} else { } else {
setOwnQuestion(false); setOwnQuestion(false);
setValue("authorship", ""); setValue("authorship", "");
@@ -59,6 +59,7 @@ export const FeaturesFormStep: FC = () => {
<div className="my-auto"> <div className="my-auto">
<input <input
{...register("authorshipType", { required: true })} {...register("authorshipType", { required: true })}
checked={authorship === "UNIFESO"}
value="UNIFESO" value="UNIFESO"
className="my-auto" className="my-auto"
type="radio" type="radio"
@@ -104,7 +105,7 @@ export const FeaturesFormStep: FC = () => {
className="w-full rounded p-1 border-gray-400 border shadow-sm" className="w-full rounded p-1 border-gray-400 border shadow-sm"
type="number" type="number"
min="1999" min="1999"
max={currentYear} max={CURRENT_YEAR}
step="1" step="1"
readOnly={!!ownQuestion} readOnly={!!ownQuestion}
/> />

2
package.json
View File

@@ -32,6 +32,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.15", "@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"@types/react-router": "^5.1.18",
"@types/react-router-dom": "^5.3.3",
"autoprefixer": "^9.8.5", "autoprefixer": "^9.8.5",
"postcss": "^7.0.32", "postcss": "^7.0.32",
"postcss-cli": "^7.1.1", "postcss-cli": "^7.1.1",

22
yarn.lock
View File

@@ -366,6 +366,11 @@
redux-thunk "^2.4.1" redux-thunk "^2.4.1"
reselect "^4.1.5" reselect "^4.1.5"
"@types/history@^4.7.11":
version "4.7.11"
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
"@types/hoist-non-react-statics@^3.3.1": "@types/hoist-non-react-statics@^3.3.1":
version "3.3.1" version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -386,6 +391,23 @@
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@types/react-router-dom@^5.3.3":
version "5.3.3"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
dependencies:
"@types/history" "^4.7.11"
"@types/react" "*"
"@types/react-router" "*"
"@types/react-router@*", "@types/react-router@^5.1.18":
version "5.1.18"
resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3"
integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==
dependencies:
"@types/history" "^4.7.11"
"@types/react" "*"
"@types/react@*", "@types/react@^18.0.15": "@types/react@*", "@types/react@^18.0.15":
version "18.0.15" version "18.0.15"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"