Skip to content

Commit

Permalink
fix: Fixed closing modal bug in chrome/-ium and safari and added stac…
Browse files Browse the repository at this point in the history 
…kable modals (#352)

Signed-off-by: Johannes Groß <mail@gross-johannes.de>
  • Loading branch information
@jo-gross
jo-gross authored Aug 24, 2024
1 parent 6f7f0c4 commit ebba732
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 71 deletions.
59 changes: 34 additions & 25 deletions components/cocktails/CocktailRecipeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
tags: props.cocktailRecipe?.tags ?? [],
glassWithIce: props.cocktailRecipe?.glassWithIce ?? IceType.Without,
image: props.cocktailRecipe?.CocktailRecipeImage[0]?.image ?? undefined,
glassId: props.cocktailRecipe?.glassId ?? null,
glassId: props.cocktailRecipe?.glassId ?? undefined,
glass: glasses.find((g) => g.id == props.cocktailRecipe?.glassId) ?? null,
garnishes: props.cocktailRecipe?.garnishes ?? [],
steps: initSteps,
Expand Down Expand Up @@ -402,7 +402,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
<div className={'divider'}></div>
<div className={'grid grid-cols-2 gap-4'}>
<div className={'col-span-2'}>
<label className={'label'}>
<label className={'label'} htmlFor={'name'}>
<span className={'label-text'}>Name</span>
<span className={'label-text-alt text-error'}>
<>{errors.name && touched.name && errors.name}</> *
Expand All @@ -411,20 +411,23 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
<input
type="text"
name="name"
autoComplete={'off'}
id={'name'}
className={`input input-bordered w-full ${errors.name && touched.name && 'input-error'}`}
onChange={handleChange}
onBlur={handleBlur}
value={values.name}
/>
</div>
<div className={'col-span-2'}>
<label className={'label'}>
<label className={'label'} htmlFor={'description'}>
<span className={'label-text'}>Beschreibung</span>
<span className={'label-text-alt text-error'}>
<>{errors.description && touched.description && errors.description}</>
</span>
</label>
<textarea
id={'description'}
name="description"
className={`textarea textarea-bordered w-full ${errors.description && touched.description && 'textarea-error'}`}
onChange={handleChange}
Expand All @@ -433,14 +436,15 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
/>
</div>
<div className={'col-span-2 md:col-span-1'}>
<label className={'label'}>
<label className={'label'} htmlFor={'price'}>
<span className={'label-text'}>Preis</span>
<span className={'label-text-alt text-error'}>
<>{errors.price && touched.price && errors.price}</>
</span>
</label>
<div className={'join w-full'}>
<input
id={'price'}
type="number"
className={`input join-item input-bordered w-full ${errors.price && touched.price && 'input-error'}`}
name="price"
Expand All @@ -454,34 +458,37 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
</div>
</div>
<div className={'col-span-2 md:col-span-1'}>
<label className={'label'}>
<div className={'label'}>
<span className={'label-text'}>Tags</span>
<span className={'label-text-alt text-error'}>
<>{errors.tags && touched.tags && errors.tags}</>
</span>
</label>
<TagsInput
value={values.tags}
onChange={(tags) =>
setFieldValue(
'tags',
updateTags(tags, (text) => setFieldError('tags', text ?? 'Tag fehlerhaft')),
)
}
name="tags"
beforeAddValidate={(tag, _) => validateTag(tag, (text) => setFieldError('tags', text ?? 'Tag fehlerhaft'))}
onBlur={handleBlur}
/>
</div>
<div id={'tags'}>
<TagsInput
value={values.tags}
onChange={(tags) =>
setFieldValue(
'tags',
updateTags(tags, (text) => setFieldError('tags', text ?? 'Tag fehlerhaft')),
)
}
name="tags"
beforeAddValidate={(tag, _) => validateTag(tag, (text) => setFieldError('tags', text ?? 'Tag fehlerhaft'))}
onBlur={handleBlur}
/>
</div>
</div>
<div>
<label className={'label'}>
<label className={'label'} htmlFor={'glassId'}>
<span className={'label-text'}>Glas</span>
<span className={'label-text-alt text-error'}>
<>{errors.glassId && touched.glassId && errors.glassId}</> *
</span>
</label>
<div className={'join w-full'}>
<select
id={'glassId'}
name="glassId"
className={`join-item select select-bordered w-full ${errors.glassId && touched.glassId && 'select-error'}`}
onChange={(event) => {
Expand Down Expand Up @@ -536,13 +543,14 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
</div>
</div>
<div>
<label className={'label'}>
<label className={'label'} htmlFor={'iceId'}>
<span className={'label-text'}>Eis</span>
<span className={'label-text-alt text-error'}>
<>{errors.glassWithIce && touched.glassWithIce && errors.glassWithIce}</>
</span>
</label>
<select
id={'iceId'}
name="glassWithIce"
className={`select select-bordered w-full ${errors.glassWithIce && touched.glassWithIce && 'select-error'}`}
onChange={handleChange}
Expand Down Expand Up @@ -739,7 +747,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
<div className={'col-span-2 space-y-2'}>
{(values.steps as CocktailRecipeStepFull[]).map((step, indexStep) => (
<div
key={`form-recipe-step-${step.id}-${indexStep}`}
key={`form-recipe-step-${indexStep}`}
className={'flex w-full flex-col justify-between space-y-2 rounded-xl border border-neutral p-4'}
>
<div className={'grid grid-cols-2 gap-2 md:grid-cols-3 md:gap-4'}>
Expand All @@ -762,11 +770,11 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
<option disabled={true}>Lade...</option>
) : (
Object.entries(_.groupBy(actions, 'actionGroup')).map(([group, groupActions]) => (
<optgroup key={`form-recipe-step-${step.id}-action-group-${group}`} label={userContext.getTranslation(group, 'de')}>
<optgroup key={`form-recipe-step-${indexStep}-action-group-${group}`} label={userContext.getTranslation(group, 'de')}>
{groupActions
.sort((a, b) => a.name.localeCompare(b.name))
.map((action) => (
<option key={`form-recipe-step-${step.id}-action-${action.id}`} value={action.id}>
.map((action, indexAction) => (
<option key={`form-recipe-step-${indexStep}-action-${indexAction}`} value={action.id}>
{userContext.getTranslation(action.name, 'de')}
</option>
))}
Expand Down Expand Up @@ -834,7 +842,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
{step.ingredients
.sort((a, b) => a.ingredientNumber - b.ingredientNumber)
.map((ingredient, indexIngredient) => (
<div key={`form-recipe-step-${step.id}-ingredient-${ingredient.id}`} className={'flex flex-row gap-2 pt-2'}>
<div key={`form-recipe-step-${indexStep}-ingredient-${indexIngredient}`} className={'flex flex-row gap-2 pt-2'}>
<div className={'join join-vertical w-min items-center justify-center'}>
<button
type={'button'}
Expand Down Expand Up @@ -885,6 +893,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
<div className={'grid w-full grid-cols-2 gap-1 md:grid-cols-3'}>
<div key={`form-recipe-step${step.id}-ingredient-${ingredient.id}`} className={'join col-span-2 flex w-full flex-row'}>
<input
id={`ingredient-${indexIngredient}-name`}
className={`input join-item input-bordered w-full cursor-pointer ${
((errors.steps as StepError[])?.[indexStep] as any)?.ingredients?.[indexIngredient]?.ingredientId && 'input-error'
}`}
Expand Down
14 changes: 9 additions & 5 deletions components/garnishes/GarnishForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export function GarnishForm(props: GarnishFormProps) {
{({ values, setFieldValue, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<form onSubmit={handleSubmit} className={'flex flex-col gap-2 md:gap-4'}>
<div className={'form-control'}>
<label className={'label'}>
<label className={'label'} htmlFor={'name'}>
<span className={'label-text'}>Name</span>
<span className={'label-text-alt space-x-2 text-error'}>
<span>
Expand All @@ -115,7 +115,9 @@ export function GarnishForm(props: GarnishFormProps) {
</span>
</label>
<input
id={'name'}
type={'text'}
autoComplete={'off'}
placeholder={'Name'}
className={`input input-bordered ${errors.name && touched.name && 'input-error'} w-full`}
onChange={handleChange}
Expand All @@ -126,7 +128,7 @@ export function GarnishForm(props: GarnishFormProps) {
</div>

<div className={'form-control'}>
<label className={'label'}>
<label className={'label'} htmlFor={'description'}>
<span className={'label-text'}>Zubereitungsbeschreibung</span>
<span className={'label-text-alt space-x-2 text-error'}>
<span>
Expand All @@ -135,6 +137,7 @@ export function GarnishForm(props: GarnishFormProps) {
</span>
</label>
<textarea
id={'description'}
className={`textarea textarea-bordered ${errors.description && touched.description && 'textarea-error'} w-full`}
value={values.description}
onChange={handleChange}
Expand All @@ -144,14 +147,15 @@ export function GarnishForm(props: GarnishFormProps) {
</div>

<div className={'form-control'}>
<label className={'label'}>
<label className={'label'} htmlFor={'price'}>
<span className={'label-text'}>Preis</span>
<span className={'label-text-alt space-x-2 text-error'}>
<>{errors.price && touched.price && errors.price}</>
</span>
</label>
<div className={'join'}>
<input
id={'price'}
type={'number'}
placeholder={'Preis'}
className={`input join-item input-bordered ${errors.price && touched.price && 'input-error'} w-full`}
Expand All @@ -165,9 +169,9 @@ export function GarnishForm(props: GarnishFormProps) {
</div>
<div className={'col-span-2'}>
{values.image != undefined ? (
<label className={'label'}>
<div className={'label'}>
<span className={'label-text'}>Zutaten Bild</span>
</label>
</div>
) : (
<></>
)}
Expand Down
14 changes: 9 additions & 5 deletions components/glasses/GlassForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export function GlassForm(props: GlassFormProps) {
{({ values, setFieldValue, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<form onSubmit={handleSubmit} className={'flex flex-col gap-2 md:gap-4'}>
<div className={'form-control'}>
<label className={'label'}>
<label className={'label'} htmlFor={'name'}>
<span className={'label-text'}>Name</span>
<span className={'label-text-alt space-x-2 text-error'}>
<span>
Expand All @@ -118,6 +118,8 @@ export function GlassForm(props: GlassFormProps) {
</span>
</label>
<input
id={'name'}
autoComplete={'off'}
type={'text'}
placeholder={'Name'}
className={`input input-bordered w-full ${errors.name && touched.name && 'input-error'}`}
Expand All @@ -129,7 +131,7 @@ export function GlassForm(props: GlassFormProps) {
</div>

<div className={'form-control'}>
<label className={'label'}>
<label className={'label'} htmlFor={'deposit'}>
<span className={'label-text'}>Pfand</span>
<span className={'label-text-alt space-x-2 text-error'}>
<span>
Expand All @@ -140,6 +142,7 @@ export function GlassForm(props: GlassFormProps) {
</label>
<div className={'join'}>
<input
id={'deposit'}
type={'number'}
placeholder={'Deposit'}
className={`input join-item input-bordered w-full ${errors.deposit && touched.deposit && 'input-error'}}`}
Expand All @@ -152,11 +155,12 @@ export function GlassForm(props: GlassFormProps) {
</div>
</div>
<div className={'form-control'}>
<label className={'label'}>
<label className={'label'} htmlFor={'volume'}>
<span className={'label-text'}>Volumen</span>
</label>
<div className={'join'}>
<input
id={'volume'}
type={'number'}
placeholder={'38cl'}
className={'input join-item input-bordered w-full'}
Expand All @@ -170,9 +174,9 @@ export function GlassForm(props: GlassFormProps) {
</div>
<div className={'form-control'}>
{values.image != undefined ? (
<label className={'label'}>
<div className={'label'}>
<span className={'label-text'}>Vorschau Bild</span>
</label>
</div>
) : (
<></>
)}
Expand Down
Loading

0 comments on commit ebba732

Please sign in to comment.