fix: general bug fixes (#1547)

* grouped "instructions" header with first section

* fixed sort by last updated date

* somewhat-hacky bugfix for large screens

* modified page size to be divisible by 4

* fixed missing export for new data forms

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -248,7 +248,7 @@ export default defineComponent({
     }
 
     const page = ref(1);
-    const perPage = ref(30);
+    const perPage = ref(32);
     const hasMore = ref(true);
     const ready = ref(false);
     const loading = ref(false);
@@ -259,10 +259,16 @@ export default defineComponent({
       if (props.usePagination) {
         const newRecipes = await fetchMore(
           page.value,
-          perPage.value,
+
+          // we double-up the first call to avoid a bug with large screens that render the entire first page without scrolling, preventing additional loading
+          perPage.value*2,
           preferences.value.orderBy,
           preferences.value.orderDirection
         );
+
+        // since we doubled the first call, we also need to advance the page
+        page.value = page.value + 1;
+
         context.emit(REPLACE_RECIPES_EVENT, newRecipes);
         ready.value = true;
       }
@@ -325,7 +331,7 @@ export default defineComponent({
           setter("created_at", $globals.icons.sortCalendarAscending, $globals.icons.sortCalendarDescending);
           break;
         case EVENTS.updated:
-          setter("updated_at", $globals.icons.sortClockAscending, $globals.icons.sortClockDescending);
+          setter("update_at", $globals.icons.sortClockAscending, $globals.icons.sortClockDescending);
           break;
         default:
           console.log("Unknown Event", sortType);

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -35,12 +35,12 @@
 
     <!-- Instructions -->
     <section>
-      <v-card-title class="headline pl-0">{{ $t("recipe.instructions") }}</v-card-title>
       <div
         v-for="(instructionSection, sectionIndex) in instructionSections"
         :key="`instruction-section-${sectionIndex}`"
         :class="{ 'print-section': instructionSection.sectionName }"
       >
+        <v-card-title v-if="!sectionIndex" class="headline pl-0">{{ $t("recipe.instructions") }}</v-card-title>
         <div v-for="(step, stepIndex) in instructionSection.instructions" :key="`instruction-${stepIndex}`">
           <div class="print-section">
             <h4 v-if="step.title" :key="`instruction-title-${stepIndex}`" class="instruction-title mb-2">

frontend/pages/group/data/foods.vue

@@ -92,7 +92,7 @@
       @submit="editSaveFood"
     >
       <v-card-text v-if="editTarget">
-        <v-form ref="domNewFoodForm">
+        <v-form ref="domEditFoodForm">
           <v-text-field v-model="editTarget.name" label="Name" :rules="[validators.required]"></v-text-field>
           <v-text-field v-model="editTarget.description" label="Description"></v-text-field>
           <v-autocomplete
@@ -324,6 +324,7 @@ export default defineComponent({
       validators,
       // Create
       createDialog,
+      domNewFoodForm,
       createEventHandler,
       createFood,
       createTarget,

frontend/pages/group/data/units.vue

@@ -55,7 +55,7 @@
       @submit="editSaveUnit"
     >
       <v-card-text v-if="editTarget">
-        <v-form ref="domCreateUnitForm">
+        <v-form ref="domEditUnitForm">
           <v-text-field v-model="editTarget.name" label="Name" :rules="[validators.required]"></v-text-field>
           <v-text-field v-model="editTarget.abbreviation" label="Abbreviation"></v-text-field>
           <v-text-field v-model="editTarget.description" label="Description"></v-text-field>
@@ -329,6 +329,7 @@ export default defineComponent({
       validators,
       // Create
       createDialog,
+      domNewUnitForm,
       createEventHandler,
       createUnit,
       createTarget,