feat: Improve auto-form layout (#7150)

frontend/pages/group/data/categories.vue

@@ -3,6 +3,8 @@
     <GroupDataPage
       :icon="$globals.icons.categories"
       :title="$t('data-pages.categories.category-data')"
+      :create-title="$t('data-pages.categories.new-category')"
+      :edit-title="$t('data-pages.categories.edit-category')"
       :table-headers="tableHeaders"
       :table-config="tableConfig"
       :data="categoryStore.store.value || []"

frontend/pages/group/data/foods.vue

@@ -130,6 +130,8 @@
     <GroupDataPage
       :icon="$globals.icons.foods"
       :title="$t('data-pages.foods.food-data')"
+      :create-title="$t('data-pages.foods.create-food')"
+      :edit-title="$t('data-pages.foods.edit-food')"
       :table-headers="tableHeaders"
       :table-config="tableConfig"
       :data="foods || []"

frontend/pages/group/data/labels.vue

@@ -45,6 +45,8 @@
     <GroupDataPage
       :icon="$globals.icons.tags"
       :title="$t('data-pages.labels.labels')"
+      :create-title="$t('data-pages.labels.new-label')"
+      :edit-title="$t('data-pages.labels.edit-label')"
       :table-headers="tableHeaders"
       :table-config="tableConfig"
       :data="labelStore.store.value || []"
@@ -66,7 +68,11 @@
       </template>
 
       <template #create-dialog-top>
-        <MultiPurposeLabel :label="createForm.data" class="my-2" />
+        <MultiPurposeLabel v-if="createForm.data.name" :label="createForm.data" class="my-2" />
+      </template>
+
+      <template #edit-dialog-top>
+        <MultiPurposeLabel v-if="editForm.data.name" :label="editForm.data" class="my-2" />
       </template>
 
       <template #table-button-bottom>

frontend/pages/group/data/recipe-actions.vue

@@ -3,6 +3,8 @@
     <GroupDataPage
       :icon="$globals.icons.categories"
       :title="$t('data-pages.categories.category-data')"
+      :create-title="$t('data-pages.recipe-actions.new-recipe-action')"
+      :edit-title="$t('data-pages.recipe-actions.edit-recipe-action')"
       :table-headers="tableHeaders"
       :table-config="tableConfig"
       :data="actionStore.recipeActions.value || []"
@@ -57,11 +59,11 @@ const tableHeaders: TableHeaders[] = [
   },
 ];
 
-const actionStore = useGroupRecipeActions(null, null);
+const actionStore = useGroupRecipeActions();
 
 // ============================================================
 // Form items (shared)
-const formItems: AutoFormItems = [
+const formItems = computed<AutoFormItems>(() => [
   {
     label: i18n.t("general.title"),
     varName: "title",
@@ -78,10 +80,14 @@ const formItems: AutoFormItems = [
     label: i18n.t("data-pages.recipe-actions.action-type"),
     varName: "actionType",
     type: fieldTypes.SELECT,
-    options: [{ text: "link" }, { text: "post" }],
+    options: [
+      { text: i18n.t("data-pages.recipe-actions.action-types.link"), value: "link" },
+      { text: i18n.t("data-pages.recipe-actions.action-types.post"), value: "post" },
+    ],
+    selectReturnValue: "value",
     rules: [validators.required],
   },
-];
+]);
 
 // ============================================================
 // Create

frontend/pages/group/data/tags.vue

@@ -3,6 +3,8 @@
     <GroupDataPage
       :icon="$globals.icons.tags"
       :title="$t('data-pages.tags.tag-data')"
+      :create-title="$t('data-pages.tags.new-tag')"
+      :edit-title="$t('data-pages.tags.edit-tag')"
       :table-headers="tableHeaders"
       :table-config="tableConfig"
       :data="tagStore.store.value || []"

frontend/pages/group/data/tools.vue

@@ -3,6 +3,8 @@
     <GroupDataPage
       :icon="$globals.icons.tools"
       :title="$t('data-pages.tools.tool-data')"
+      :create-title="$t('data-pages.tools.new-tool')"
+      :edit-title="$t('data-pages.tools.edit-tool')"
       :table-headers="tableHeaders"
       :table-config="tableConfig"
       :data="tools || []"

frontend/pages/group/data/units.vue

@@ -95,6 +95,8 @@
     <GroupDataPage
       :icon="$globals.icons.units"
       :title="$t('general.units')"
+      :create-title="$t('data-pages.units.create-unit')"
+      :edit-title="$t('data-pages.units.edit-unit')"
       :table-headers="tableHeaders"
       :table-config="tableConfig"
       :data="unitStore || []"
@@ -231,22 +233,26 @@ const { store: unitStore, actions: unitActions } = useUnitStore();
 // Form items (shared)
 const formItems: AutoFormItems = [
   {
+    cols: 8,
     label: i18n.t("general.name"),
     varName: "name",
     type: fieldTypes.TEXT,
     rules: [validators.required],
   },
   {
-    label: i18n.t("general.plural-name"),
-    varName: "pluralName",
-    type: fieldTypes.TEXT,
-  },
-  {
+    cols: 4,
     label: i18n.t("data-pages.units.abbreviation"),
     varName: "abbreviation",
     type: fieldTypes.TEXT,
   },
   {
+    cols: 8,
+    label: i18n.t("general.plural-name"),
+    varName: "pluralName",
+    type: fieldTypes.TEXT,
+  },
+  {
+    cols: 4,
     label: i18n.t("data-pages.units.plural-abbreviation"),
     varName: "pluralAbbreviation",
     type: fieldTypes.TEXT,
@@ -257,11 +263,14 @@ const formItems: AutoFormItems = [
     type: fieldTypes.TEXT,
   },
   {
+    section: i18n.t("general.settings"),
+    cols: 4,
     label: i18n.t("data-pages.units.use-abbv"),
     varName: "useAbbreviation",
     type: fieldTypes.BOOLEAN,
   },
   {
+    cols: 4,
     label: i18n.t("data-pages.units.fraction"),
     varName: "fraction",
     type: fieldTypes.BOOLEAN,