feat: Improve auto-form layout (#7150)

frontend/pages/admin/manage/users/[id].vue

@@ -27,92 +27,102 @@
         variant="outlined"
         style="border-color: lightgrey;"
       >
-        <v-card-text>
-          <div class="d-flex">
-            <p> {{ $t("user.user-id-with-value", { id: user.id }) }}</p>
-          </div>
-          <!-- This is disabled since we can't properly handle changing the user's group in most scenarios -->
-          <v-select
-            v-if="groups"
-            v-model="user.group"
-            disabled
-            :items="groups"
-            variant="solo-filled"
-            flat
-            item-title="name"
-            item-value="name"
-            :return-object="false"
-            :label="$t('group.user-group')"
-            :rules="[validators.required]"
-          />
-          <v-select
-            v-if="households"
-            v-model="user.household"
-            :items="households"
-            variant="solo-filled"
-            flat
-            item-title="name"
-            item-value="name"
-            :return-object="false"
-            :label="$t('household.user-household')"
-            :rules="[validators.required]"
-          />
-          <div class="d-flex py-2 pr-2">
-            <BaseButton
-              type="button"
-              :loading="generatingToken"
-              create
-              @click.prevent="handlePasswordReset"
-            >
-              {{ $t("user.generate-password-reset-link") }}
-            </BaseButton>
-          </div>
-          <div
-            v-if="resetUrl"
-            class="mb-2"
-          >
-            <v-card-text>
-              <p class="text-center pb-0">
-                {{ resetUrl }}
-              </p>
-            </v-card-text>
-            <v-card-actions
-              class="align-center pt-0"
-              style="gap: 4px"
-            >
-              <BaseButton
-                cancel
-                @click="resetUrl = ''"
-              >
-                {{ $t("general.close") }}
-              </BaseButton>
-              <v-spacer />
-              <BaseButton
-                v-if="user.email"
-                color="info"
-                class="mr-1"
-                @click="sendResetEmail"
-              >
-                <template #icon>
-                  {{ $globals.icons.email }}
-                </template>
-                {{ $t("user.email") }}
-              </BaseButton>
-              <AppButtonCopy
-                :icon="false"
-                color="info"
-                :copy-text="resetUrl"
-              />
-            </v-card-actions>
-          </div>
+        <v-sheet class="pt-4">
+          <v-card-text>
+            <div class="d-flex">
+              <p> {{ $t("user.user-id-with-value", { id: user.id }) }}</p>
+            </div>
+            <!-- This is disabled since we can't properly handle changing the user's group in most scenarios -->
 
-          <AutoForm
-            v-model="user"
-            :items="userForm"
-            update-mode
-            :disabled-fields="disabledFields"
-          />
-        </v-card-text>
+            <v-row>
+              <v-col cols="6">
+                <v-select
+                  v-if="groups"
+                  v-model="user.group"
+                  disabled
+                  :items="groups"
+                  variant="solo-filled"
+                  flat
+                  item-title="name"
+                  item-value="name"
+                  :return-object="false"
+                  :label="$t('group.user-group')"
+                  :rules="[validators.required]"
+                />
+              </v-col>
+              <v-col cols="6">
+                <v-select
+                  v-if="households"
+                  v-model="user.household"
+                  :items="households"
+                  variant="solo-filled"
+                  flat
+                  item-title="name"
+                  item-value="name"
+                  :return-object="false"
+                  :label="$t('household.user-household')"
+                  :rules="[validators.required]"
+                />
+              </v-col>
+            </v-row>
+            <div class="d-flex py-2 pr-2">
+              <BaseButton
+                type="button"
+                :loading="generatingToken"
+                create
+                @click.prevent="handlePasswordReset"
+              >
+                {{ $t("user.generate-password-reset-link") }}
+              </BaseButton>
+            </div>
+
+            <div
+              v-if="resetUrl"
+              class="mb-2"
+            >
+              <v-card-text>
+                <p class="text-center pb-0">
+                  {{ resetUrl }}
+                </p>
+              </v-card-text>
+              <v-card-actions
+                class="align-center pt-0"
+                style="gap: 4px"
+              >
+                <BaseButton
+                  cancel
+                  @click="resetUrl = ''"
+                >
+                  {{ $t("general.close") }}
+                </BaseButton>
+                <v-spacer />
+                <BaseButton
+                  v-if="user.email"
+                  color="info"
+                  class="mr-1"
+                  @click="sendResetEmail"
+                >
+                  <template #icon>
+                    {{ $globals.icons.email }}
+                  </template>
+                  {{ $t("user.email") }}
+                </BaseButton>
+                <AppButtonCopy
+                  :icon="false"
+                  color="info"
+                  :copy-text="resetUrl"
+                />
+              </v-card-actions>
+            </div>
+
+            <AutoForm
+              v-model="user"
+              :items="userForm"
+              update-mode
+              :disabled-fields="disabledFields"
+            />
+          </v-card-text>
+        </v-sheet>
       </v-card>
       <div class="d-flex pa-2">
         <BaseButton

frontend/pages/admin/manage/users/create.vue

@@ -20,27 +20,35 @@
     >
       <v-card variant="outlined">
         <v-card-text>
-          <v-select
-            v-model="selectedGroup"
-            :items="groups || []"
-            item-title="name"
-            return-object
-            variant="filled"
-            :label="$t('group.user-group')"
-            :rules="[validators.required]"
-          />
-          <v-select
-            v-model="newUserData.household"
-            :disabled="!selectedGroup"
-            :items="households"
-            item-title="name"
-            item-value="name"
-            variant="filled"
-            :label="$t('household.user-household')"
-            :hint="selectedGroup ? '' : $t('group.you-must-select-a-group-before-selecting-a-household')"
-            persistent-hint
-            :rules="[validators.required]"
-          />
+          <v-sheet>
+            <v-row>
+              <v-col cols="6">
+                <v-select
+                  v-model="selectedGroup"
+                  :items="groups || []"
+                  item-title="name"
+                  return-object
+                  variant="filled"
+                  :label="$t('group.user-group')"
+                  :rules="[validators.required]"
+                />
+              </v-col>
+              <v-col cols="6">
+                <v-select
+                  v-model="newUserData.household"
+                  :disabled="!selectedGroup"
+                  :items="households"
+                  item-title="name"
+                  item-value="name"
+                  variant="filled"
+                  :label="$t('household.user-household')"
+                  :hint="selectedGroup ? '' : $t('group.you-must-select-a-group-before-selecting-a-household')"
+                  persistent-hint
+                  :rules="[validators.required]"
+                />
+              </v-col>
+            </v-row>
+          </v-sheet>
           <AutoForm
             v-model="newUserData"
             :items="userForm"

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,