feat: bulk recipe settings update (#1557)

* extract switches from menu component

* implement bulk updater for settings

* fix browser cache api calls issue

* add frontend for bulk settings modifications

frontend/api/class-interfaces/recipe-bulk-actions.ts

@@ -1,11 +1,10 @@
 import { BaseAPI } from "../_base";
-import { AssignCategories, AssignTags, DeleteRecipes, ExportRecipes } from "~/types/api-types/recipe";
+import { AssignCategories, AssignSettings, AssignTags, DeleteRecipes, ExportRecipes } from "~/types/api-types/recipe";
 import { GroupDataExport } from "~/types/api-types/group";
 
 // Many bulk actions return nothing
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface BulkActionResponse {
-}
+interface BulkActionResponse {}
 
 const prefix = "/api";
 
@@ -15,6 +14,7 @@ const routes = {
   bulkCategorize: prefix + "/recipes/bulk-actions/categorize",
   bulkTag: prefix + "/recipes/bulk-actions/tag",
   bulkDelete: prefix + "/recipes/bulk-actions/delete",
+  bulkSettings: prefix + "/recipes/bulk-actions/settings",
 };
 
 export class BulkActionsAPI extends BaseAPI {
@@ -26,6 +26,10 @@ export class BulkActionsAPI extends BaseAPI {
     return await this.requests.post<BulkActionResponse>(routes.bulkCategorize, payload);
   }
 
+  async bulkSetSettings(payload: AssignSettings) {
+    return await this.requests.post<BulkActionResponse>(routes.bulkSettings, payload);
+  }
+
   async bulkTag(payload: AssignTags) {
     return await this.requests.post<BulkActionResponse>(routes.bulkTag, payload);
   }

frontend/components/Domain/Recipe/RecipeSettingsMenu.vue

@@ -17,17 +17,7 @@
         </v-card-title>
         <v-divider class="mx-2"></v-divider>
         <v-card-text class="mt-n5 pt-6 pb-2">
-          <v-switch
-            v-for="(itemValue, key) in value"
-            :key="key"
-            v-model="value[key]"
-            xs
-            dense
-            :disabled="key == 'locked' && !isOwner"
-            class="my-1"
-            :label="labels[key]"
-            hide-details
-          ></v-switch>
+          <RecipeSettingsSwitches v-model="value" :is-owner="isOwner" />
         </v-card-text>
       </v-card>
     </v-menu>
@@ -35,9 +25,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext } from "@nuxtjs/composition-api";
+import { defineComponent } from "@nuxtjs/composition-api";
+import RecipeSettingsSwitches from "./RecipeSettingsSwitches.vue";
 
 export default defineComponent({
+  components: { RecipeSettingsSwitches },
   props: {
     value: {
       type: Object,
@@ -48,22 +40,6 @@ export default defineComponent({
       required: false,
     },
   },
-  setup() {
-    const { i18n } = useContext();
-    const labels = {
-      public: i18n.t("recipe.public-recipe"),
-      showNutrition: i18n.t("recipe.show-nutrition-values"),
-      showAssets: i18n.t("asset.show-assets"),
-      landscapeView: i18n.t("recipe.landscape-view-coming-soon"),
-      disableComments: i18n.t("recipe.disable-comments"),
-      disableAmount: i18n.t("recipe.disable-amount"),
-      locked: i18n.t("recipe.locked"),
-    };
-
-    return {
-      labels,
-    };
-  },
 });
 </script>
 

frontend/components/Domain/Recipe/RecipeSettingsSwitches.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <v-switch
+      v-for="(_, key) in value"
+      :key="key"
+      v-model="value[key]"
+      xs
+      dense
+      :disabled="key == 'locked' && !isOwner"
+      class="my-1"
+      :label="labels[key]"
+      hide-details
+    ></v-switch>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, useContext } from "@nuxtjs/composition-api";
+import { RecipeSettings } from "~/types/api-types/recipe";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Object as () => RecipeSettings,
+      required: true,
+    },
+    isOwner: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  setup() {
+    const { i18n } = useContext();
+    const labels: Record<keyof RecipeSettings, string> = {
+      public: i18n.tc("recipe.public-recipe"),
+      showNutrition: i18n.tc("recipe.show-nutrition-values"),
+      showAssets: i18n.tc("asset.show-assets"),
+      landscapeView: i18n.tc("recipe.landscape-view-coming-soon"),
+      disableComments: i18n.tc("recipe.disable-comments"),
+      disableAmount: i18n.tc("recipe.disable-amount"),
+      locked: i18n.tc("recipe.locked"),
+    };
+
+    return {
+      labels,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

frontend/pages/group/data/recipes.vue

@@ -55,6 +55,15 @@
           </v-virtual-scroll>
         </v-card>
       </v-card-text>
+      <v-card-text v-else-if="dialog.mode == MODES.updateSettings" class="px-12">
+        <p>Settings chosen here, excluding the locked option, will be applied to all selected recipes.</p>
+        <div class="mx-auto">
+          <RecipeSettingsSwitches v-model="recipeSettings" />
+        </div>
+        <p class="text-center mb-0">
+          <i>{{ selected.length }} recipe(s) settings will be updated.</i>
+        </p>
+      </v-card-text>
     </BaseDialog>
     <section>
       <!-- Recipe Data Table -->
@@ -100,6 +109,7 @@
           @tag-selected="openDialog(MODES.tag)"
           @categorize-selected="openDialog(MODES.category)"
           @delete-selected="openDialog(MODES.delete)"
+          @update-settings="openDialog(MODES.updateSettings)"
         >
         </BaseOverflowButton>
 
@@ -152,20 +162,22 @@ import RecipeDataTable from "~/components/Domain/Recipe/RecipeDataTable.vue";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
 import { useUserApi } from "~/composables/api";
 import { useRecipes, allRecipes } from "~/composables/recipes";
-import { Recipe } from "~/types/api-types/recipe";
+import { Recipe, RecipeSettings } from "~/types/api-types/recipe";
 import GroupExportData from "~/components/Domain/Group/GroupExportData.vue";
 import { GroupDataExport } from "~/types/api-types/group";
 import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
+import RecipeSettingsSwitches from "~/components/Domain/Recipe/RecipeSettingsSwitches.vue";
 
-const MODES = {
-  tag: "tag",
-  category: "category",
-  export: "export",
-  delete: "delete",
-};
+enum MODES {
+  tag = "tag",
+  category = "category",
+  export = "export",
+  delete = "delete",
+  updateSettings = "updateSettings",
+}
 
 export default defineComponent({
-  components: { RecipeDataTable, RecipeOrganizerSelector, GroupExportData },
+  components: { RecipeDataTable, RecipeOrganizerSelector, GroupExportData, RecipeSettingsSwitches },
   scrollToTop: true,
   setup() {
     const { getAllRecipes, refreshRecipes } = useRecipes(true, true);
@@ -217,6 +229,11 @@ export default defineComponent({
         text: "Categorize",
         event: "categorize-selected",
       },
+      {
+        icon: $globals.icons.cog,
+        text: "Update Settings",
+        event: "update-settings",
+      },
       {
         icon: $globals.icons.delete,
         text: "Delete",
@@ -307,6 +324,29 @@ export default defineComponent({
       resetAll();
     }
 
+    const recipeSettings = reactive<RecipeSettings>({
+      public: false,
+      showNutrition: false,
+      showAssets: false,
+      landscapeView: false,
+      disableComments: false,
+      disableAmount: false,
+      locked: false,
+    });
+
+    async function updateSettings() {
+      loading.value = true;
+
+      const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
+
+      const { response, data } = await api.bulk.bulkSetSettings({ recipes, settings: recipeSettings });
+
+      console.log(response, data);
+
+      await refreshRecipes();
+      resetAll();
+    }
+
     // ============================================================
     // Dialog Management
 
@@ -322,26 +362,29 @@ export default defineComponent({
       icon: $globals.icons.tags,
     });
 
-    function openDialog(mode: string) {
-      const titles = {
+    function openDialog(mode: MODES) {
+      const titles: Record<MODES, string> = {
         [MODES.tag]: "Tag Recipes",
         [MODES.category]: "Categorize Recipes",
         [MODES.export]: "Export Recipes",
         [MODES.delete]: "Delete Recipes",
+        [MODES.updateSettings]: "Update Settings",
       };
 
-      const callbacks = {
+      const callbacks: Record<MODES, () => Promise<void>> = {
         [MODES.tag]: tagSelected,
         [MODES.category]: categorizeSelected,
         [MODES.export]: exportSelected,
         [MODES.delete]: deleteSelected,
+        [MODES.updateSettings]: updateSettings,
       };
 
-      const icons = {
+      const icons: Record<MODES, string> = {
         [MODES.tag]: $globals.icons.tags,
         [MODES.category]: $globals.icons.tags,
         [MODES.export]: $globals.icons.database,
         [MODES.delete]: $globals.icons.delete,
+        [MODES.updateSettings]: $globals.icons.cog,
       };
 
       dialog.mode = mode;
@@ -352,6 +395,7 @@ export default defineComponent({
     }
 
     return {
+      recipeSettings,
       selectAll,
       loading,
       actions,

frontend/types/api-types/recipe.ts

@@ -18,6 +18,19 @@ export interface CategoryBase {
   id: string;
   slug: string;
 }
+export interface AssignSettings {
+  recipes: string[];
+  settings: RecipeSettings;
+}
+export interface RecipeSettings {
+  public?: boolean;
+  showNutrition?: boolean;
+  showAssets?: boolean;
+  landscapeView?: boolean;
+  disableComments?: boolean;
+  disableAmount?: boolean;
+  locked?: boolean;
+}
 export interface AssignTags {
   recipes: string[];
   tags: TagBase[];
@@ -214,15 +227,6 @@ export interface RecipeStep {
   text: string;
   ingredientReferences?: IngredientReferences[];
 }
-export interface RecipeSettings {
-  public?: boolean;
-  showNutrition?: boolean;
-  showAssets?: boolean;
-  landscapeView?: boolean;
-  disableComments?: boolean;
-  disableAmount?: boolean;
-  locked?: boolean;
-}
 export interface RecipeAsset {
   name: string;
   icon: string;

frontend/types/api-types/response.ts

@@ -5,8 +5,6 @@
 /* Do not modify it by hand - just update the pydantic models and then re-run the script
 */
 
-export type OrderDirection = "asc" | "desc";
-
 export interface ErrorResponse {
   message: string;
   error?: boolean;
@@ -15,13 +13,6 @@ export interface ErrorResponse {
 export interface FileTokenResponse {
   fileToken: string;
 }
-export interface PaginationQuery {
-  page?: number;
-  perPage?: number;
-  orderBy?: string;
-  orderDirection?: OrderDirection & string;
-  queryFilter?: string;
-}
 export interface SuccessResponse {
   message: string;
   error?: boolean;