steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 22:54:22 +00:00
Code Activity

Change ToolToggleEditing behaviour to "Edit / Save"

Browse source
This commit is contained in:
Steffo 2022-07-18 05:06:39 +02:00
parent 2d63ebeaaf
commit ae79116259
Signed by: steffo
GPG key ID: 6965406171929D01
3 changed files with 11 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/events/toolbar/toolToggleEditing.tsx
View file

@ -1,4 +1,4 @@
import { faBinoculars, faPencil } from "@fortawesome/free-solid-svg-icons" import { faPencil, faSave } from "@fortawesome/free-solid-svg-icons"
import { useTranslation } from "next-i18next" import { useTranslation } from "next-i18next"
import { useDefinedContext } from "../../../utils/definedContext" import { useDefinedContext } from "../../../utils/definedContext"
import { EditingContext, EditingMode } from "../../generic/editable/base" import { EditingContext, EditingMode } from "../../generic/editable/base"
@ -7,42 +7,36 @@ import { Tool } from "../../generic/toolbar/tool"
export type ToolToggleEditingProps = { export type ToolToggleEditingProps = {
onViewStart?: () => void, save: () => void,
onViewEnd?: () => void,
onEditStart?: () => void,
onEditEnd?: () => void,
} }
/** /**
* ToolBar {@link Tool} which switches between {@link EditingMode}s of the surrounding context. * ToolBar {@link Tool} which switches between {@link EditingMode}s of the surrounding context.
*/ */
export function ToolToggleEditing({ onViewStart, onViewEnd, onEditStart, onEditEnd }: ToolToggleEditingProps) { export function ToolToggleEditing({ save }: ToolToggleEditingProps) {
const { t } = useTranslation() const { t } = useTranslation()
const [editing, setEditing] = useDefinedContext(EditingContext) const [editing, setEditing] = useDefinedContext(EditingContext)
if (editing === EditingMode.EDIT) { if (editing === EditingMode.EDIT) {
return ( return (
<Tool <Tool
aria-label={t("toggleEditingView")} aria-label={t("toolToggleEditingSave")}
onClick={() => { onClick={() => {
onEditEnd?.() save()
setEditing(EditingMode.VIEW) setEditing(EditingMode.VIEW)
onViewStart?.()
}} }}
> >
<FestaIcon icon={faBinoculars} /> <FestaIcon icon={faSave} />
</Tool> </Tool>
) )
} }
else { else {
return ( return (
<Tool <Tool
aria-label={t("toggleEditingEdit")} aria-label={t("toolToggleEditingEdit")}
onClick={() => { onClick={() => {
onViewEnd?.()
setEditing(EditingMode.EDIT) setEditing(EditingMode.EDIT)
onEditStart?.()
}} }}
> >
<FestaIcon icon={faPencil} /> <FestaIcon icon={faPencil} />

2
pages/events/[slug].tsx
View file

@ -99,7 +99,7 @@ const PageEvent: NextPage<PageEventProps> = ({ slug }) => {
<ToolToggleVisibility /> <ToolToggleVisibility />
{data && auth?.userId === data?.creatorId && {data && auth?.userId === data?.creatorId &&
<ToolToggleEditing <ToolToggleEditing
onEditEnd={save} save={save}
/> />
} }
</ToolBar> </ToolBar>

4
public/locales/it-IT/common.json
View file

@ -15,5 +15,7 @@
"landingEventsCreateSubmitLabel": "Crea evento", "landingEventsCreateSubmitLabel": "Crea evento",
"landingEventsCreatePending": "Creazione dell'evento in corso...", "landingEventsCreatePending": "Creazione dell'evento in corso...",
"landingEventsCreateRejected": "Creazione dell'evento fallita:", "landingEventsCreateRejected": "Creazione dell'evento fallita:",
"landingEventsCreateFulfilled": "Evento creato con successo! Trasferimento alla pagina dell'evento in corso..." "landingEventsCreateFulfilled": "Evento creato con successo! Trasferimento alla pagina dell'evento in corso...",
"toolToggleEditingSave": "Salva modifiche",
"toolToggleEditingEdit": "Modifica"
} }