feat: Improve auto-form layout (#7150)

frontend/composables/partials/use-actions-factory.ts

@@ -26,8 +26,10 @@ export function useReadOnlyActions<T extends BoundT>(
   api: BaseCRUDAPIReadOnly<T>,
   allRef: Ref<T[] | null> | null,
   loading: Ref<boolean>,
+  defaultQueryParams: Record<string, QueryValue> = {},
 ): ReadOnlyStoreActions<T> {
   function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params = { ...defaultQueryParams, ...params };
     params.orderBy ??= "name";
     params.orderDirection ??= "asc";
 
@@ -56,6 +58,7 @@ export function useReadOnlyActions<T extends BoundT>(
   }
 
   async function refresh(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params = { ...defaultQueryParams, ...params };
     params.orderBy ??= "name";
     params.orderDirection ??= "asc";
 
@@ -86,8 +89,10 @@ export function useStoreActions<T extends BoundT>(
   api: BaseCRUDAPI<unknown, T, unknown>,
   allRef: Ref<T[] | null> | null,
   loading: Ref<boolean>,
+  defaultQueryParams: Record<string, QueryValue> = {},
 ): StoreActions<T> {
   function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params = { ...defaultQueryParams, ...params };
     params.orderBy ??= "name";
     params.orderDirection ??= "asc";
 
@@ -116,6 +121,7 @@ export function useStoreActions<T extends BoundT>(
   }
 
   async function refresh(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params = { ...defaultQueryParams, ...params };
     params.orderBy ??= "name";
     params.orderDirection ??= "asc";
 

frontend/composables/use-group-recipe-actions.ts

@@ -78,7 +78,13 @@ export const useGroupRecipeActions = function (
   };
 
   const actions = {
-    ...useStoreActions<GroupRecipeActionOut>("group-recipe-actions", api.groupRecipeActions, groupRecipeActions, loading),
+    ...useStoreActions<GroupRecipeActionOut>(
+      "group-recipe-actions",
+      api.groupRecipeActions,
+      groupRecipeActions,
+      loading,
+      { orderBy: orderBy },
+    ),
     flushStore() {
       groupRecipeActions.value = [];
     },

frontend/composables/use-users/user-form.ts

@@ -26,6 +26,7 @@ export const useUserForm = () => {
       rules: [validators.required],
     },
     {
+      cols: 6,
       label: i18n.t("user.password"),
       varName: "password",
       disableUpdate: true,
@@ -33,6 +34,7 @@ export const useUserForm = () => {
       rules: [validators.required, validators.minLength(8)],
     },
     {
+      cols: 6,
       label: i18n.t("user.authentication-method"),
       varName: "authMethod",
       type: fieldTypes.SELECT,
@@ -42,36 +44,42 @@ export const useUserForm = () => {
     },
     {
       section: i18n.t("user.permissions"),
+      cols: 6,
       label: i18n.t("user.administrator"),
       varName: "admin",
       type: fieldTypes.BOOLEAN,
       rules: [validators.required],
     },
     {
+      cols: 6,
       label: i18n.t("user.user-can-invite-other-to-group"),
       varName: "canInvite",
       type: fieldTypes.BOOLEAN,
       rules: [validators.required],
     },
     {
+      cols: 6,
       label: i18n.t("user.user-can-manage-group"),
       varName: "canManage",
       type: fieldTypes.BOOLEAN,
       rules: [validators.required],
     },
     {
+      cols: 6,
       label: i18n.t("user.user-can-organize-group-data"),
       varName: "canOrganize",
       type: fieldTypes.BOOLEAN,
       rules: [validators.required],
     },
     {
+      cols: 6,
       label: i18n.t("user.user-can-manage-household"),
       varName: "canManageHousehold",
       type: fieldTypes.BOOLEAN,
       rules: [validators.required],
     },
     {
+      cols: 6,
       label: i18n.t("user.enable-advanced-features"),
       varName: "advanced",
       type: fieldTypes.BOOLEAN,