Patrick/medassist-ng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align desktop intake labels and form field pairing (#368)

Browse Source 
* fix: align desktop intake labels and form field pairing

* chore: align frontend lockfile version and include remaining local changes
This commit is contained in:
Daniel Volz
2026-03-02 01:33:28 +01:00
committed by GitHub
parent e6a097d81d
commit cd8263e607
5 changed files with 135 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "medassist-ng-frontend",
"version": "1.17.0",
"version": "1.18.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "medassist-ng-frontend",
"version": "1.17.0",
"version": "1.18.0",
"dependencies": {
"i18next": "^25.8.13",
"i18next-browser-languagedetector": "^8.2.1",
frontend/src/pages/MedicationsPage.tsx
+24 -19
View File
@@ -279,16 +279,21 @@ export function MedicationsPage() {
return form.pillForm === "tablet";
}, [form.packageType, form.medicationForm, form.pillForm]);
const usageLabel = useMemo(() => {
if (form.packageType === "liquid_container") {
return t("form.blisters.usageMl");
}
if (form.packageType === "tube") {
return form.medicationForm === "liquid" ? t("form.blisters.usageMl") : t("form.blisters.usageApplication");
}
if (form.pillForm === "capsule") return t("form.blisters.usageCapsules");
return t("form.blisters.usageTablets");
}, [form.packageType, form.medicationForm, form.pillForm, t]);
const getUsageLabel = useCallback(
(intakeUnit: "ml" | "tsp" | "tbsp") => {
if (form.packageType === "liquid_container") {
if (intakeUnit === "tsp") return t("form.blisters.usageTsp");
if (intakeUnit === "tbsp") return t("form.blisters.usageTbsp");
return t("form.blisters.usageMl");
}
if (form.packageType === "tube") {
return form.medicationForm === "liquid" ? t("form.blisters.usageMl") : t("form.blisters.usageApplication");
}
if (form.pillForm === "capsule") return t("form.blisters.usageCapsules");
return t("form.blisters.usageTablets");
},
[form.packageType, form.medicationForm, form.pillForm, t]
);
const usesAmountLabels = form.packageType === "tube" || form.packageType === "liquid_container";
const totalCapacityLabel = usesAmountLabels ? t("form.totalAmount") : t("form.totalCapacity");
@@ -1255,6 +1260,14 @@ export function MedicationsPage() {
<option value="liquid_container">{t("form.packageTypeLiquidContainer")}</option>
</select>
</label>
<label>
{t("form.medicationEndDate")}
<DateInput
value={form.medicationEndDate}
onChange={(e) => handleValueChange("medicationEndDate", e.target.value)}
placeholder={t("common.optional")}
/>
</label>
{form.packageType !== "tube" && form.packageType !== "liquid_container" && (
<label>
{t("form.pillForm")}
@@ -1283,14 +1296,6 @@ export function MedicationsPage() {
</select>
</label>
)}
<label>
{t("form.medicationEndDate")}
<DateInput
value={form.medicationEndDate}
onChange={(e) => handleValueChange("medicationEndDate", e.target.value)}
placeholder={t("common.optional")}
/>
</label>
{form.medicationEndDate && (
<label className="full">
{t("form.autoMarkObsoleteAfterEndDate")}
@@ -1703,7 +1708,7 @@ export function MedicationsPage() {
<div key={idx} className="blister-row">
<div className="blister-inputs">
<label>
{usageLabel}
{getUsageLabel(intake.intakeUnit)}
<FormNumberStepper
value={intake.usage}
onChange={(nextValue) => setIntakeValue(idx, "usage", nextValue)}