(refactor) LocationEditForm: update scope wrapped in fieldset

This commit is contained in:
Knee Cola
2025-11-18 11:50:44 +01:00
parent 63096be133
commit 6a4c869fa3
3 changed files with 58 additions and 41 deletions

View File

@@ -66,7 +66,9 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
<TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
</Link>
}
<input id="locationName" name="locationName" type="text" placeholder={t("location-name-placeholder")} className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>
<input id="locationName" name="locationName" type="text" placeholder={t("location-name-placeholder")} className="input input-bordered w-full placeholder:text-gray-600" defaultValue={location?.name ?? ""} />
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.locationName &&
state.errors.locationName.map((error: string) => (
@@ -75,8 +77,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</p>
))}
</div>
<textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block h-[8em]" placeholder={t("notes-placeholder")} defaultValue={location?.notes ?? ""}></textarea>
</fieldset>
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.locationNotes &&
state.errors.locationNotes.map((error: string) => (
@@ -86,7 +87,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
))}
</div>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold">{t("tenant-2d-code-legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase">{t("tenant-2d-code-legend")}</legend>
<InfoBox className="p-1 mb-1">{t("tenant-2d-code-info")}</InfoBox>
@@ -156,7 +157,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold">{t("auto-utility-bill-forwarding-legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase">{t("auto-utility-bill-forwarding-legend")}</legend>
<InfoBox className="p-1 mb-1">{t("auto-utility-bill-forwarding-info")}</InfoBox>
<div className="form-control">
@@ -184,7 +185,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</fieldset>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold">{t("auto-rent-notification-legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase">{t("auto-rent-notification-legend")}</legend>
<InfoBox className="p-1 mb-1">{t("auto-rent-notification-info")}</InfoBox>
<div className="form-control">
@@ -214,7 +215,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
{(autoBillFwd || rentDueNotification) && (
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold">{t("tenant-email-legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase">{t("tenant-email-legend")}</legend>
<input
id="tenantEmail"
name="tenantEmail"
@@ -235,24 +236,34 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</fieldset>
)}
{/* Show different options for add vs edit operations */}
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("scope-legend")}</legend>
{!location ? (
<div className="form-control">
<label className="label cursor-pointer">
<label className="label cursor-pointer justify-start gap-3">
<input
type="checkbox"
name="addToSubsequentMonths"
className="toggle toggle-primary"
/>
<span className="label-text">{t("add-to-subsequent-months")}</span>
<input type="checkbox" name="addToSubsequentMonths" className="toggle toggle-primary" />
</label>
</div>
) : (
<>
<InfoBox className="p-1 mb-1">{t("update-scope-info")}</InfoBox>
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend">{t("update-scope")}</legend>
<legend className="fieldset-legend">{t("update-scope-legend")}</legend>
<select defaultValue="current" className="select input-bordered w-full" name="updateScope">
<option value="current">{t("update-current-month")}</option>
<option value="subsequent">{t("update-subsequent-months")}</option>
<option value="all">{t("update-all-months")}</option>
</select>
</fieldset>
</>
)}
</fieldset>
<div id="status-error" aria-live="polite" aria-atomic="true">
{

View File

@@ -122,7 +122,8 @@
"warning-message": "This operation cannot be undone and will delete the location in all future months!"
},
"location-edit-form": {
"location-name-placeholder": "Realestate name",
"location-name-legend": "Realestate name",
"location-name-placeholder": "enter realestate name",
"notes-placeholder": "Notes",
"tenant-2d-code-legend": "TENANT 2D CODE",
"tenant-2d-code-info": "2D barcode allows the tenant to quickly and easily pay the amount they owe you for paid utility bills to your IBAN. The barcode will be displayed when the tenant opens the link to the statement for the given month.",
@@ -147,8 +148,10 @@
"save-button": "Save",
"cancel-button": "Cancel",
"delete-tooltip": "Delete realestate",
"add-to-subsequent-months": "Add to all subsequent months",
"update-scope": "Which records do you want to update?",
"scope-legend": "Scope of changes",
"add-to-subsequent-months": "add to all subsequent months",
"update-scope-info": "Location records for each month are stored separately. Please choose which records you want to update.",
"update-scope-legend": "I want to update the following records:",
"update-current-month": "current month only",
"update-subsequent-months": "current and all future months",
"update-all-months": "all months",

View File

@@ -121,7 +121,8 @@
"warning-message": "Ova operacija je nepovratna i obrisat će lokaciju u svim mjesecima koji slijede!"
},
"location-edit-form": {
"location-name-placeholder": "Ime nekretnine",
"location-name-legend": "Realestate name",
"location-name-placeholder": "unesite naziv nekretnine",
"notes-placeholder": "Bilješke",
"tenant-2d-code-legend": "2D BARKOD ZA PODSTANARA",
"tenant-2d-code-info": "2D barkod omogućuje podstanaru da brzo i jednostavno na vaš IBAN uplati iznos koji vam duguje za plaćene režije. Barkod će biti prikazan kada podstanar otvori poveznicu na obračun za zadani mjesec.",
@@ -146,11 +147,13 @@
"save-button": "Spremi",
"cancel-button": "Odbaci",
"delete-tooltip": "Brisanje nekretnine",
"add-to-subsequent-months": "Dodaj u sve mjesece koji slijede",
"update-scope": "Koje zapise želite ažurirati?",
"scope-legend": "Opseg promjena",
"add-to-subsequent-months": "dodaj u sve mjesece koji slijede",
"update-scope-info": "Zapisi o lokaciji su za svaki mjesec pohranjeni zasebno. Molimo odaberite koje zapise želite ažurirati.",
"update-scope-legend": "Želim ažurirati sljedeće zapise:",
"update-current-month": "samo trenutni mjesec",
"update-subsequent-months": "trenutni i svi budući mjeseci",
"update-all-months": "svi mjeseci",
"update-subsequent-months": "trenutni i sve buduće mjesece",
"update-all-months": "sve mjesece",
"validation": {
"location-name-required": "Ime nekretnine je obavezno",
"tenant-first-name-required": "nedostaje ime podstanara",