feat: ✨ add bulk actions service and routes (WIP) (#747)

* feat(frontend): ✨ Group level recipe data management

* feat(backend): ✨ add bulk actions service and routes

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -0,0 +1,154 @@
+<template>
+  <v-data-table
+    v-model="selected"
+    item-key="id"
+    show-select
+    :headers="headers"
+    :items="recipes"
+    :items-per-page="15"
+    class="elevation-0"
+    @input="setValue(selected)"
+  >
+    <template #body.preappend>
+      <tr>
+        <td></td>
+        <td>Hello</td>
+        <td colspan="4"></td>
+      </tr>
+    </template>
+    <template #item.tags="{ item }">
+      <RecipeChip small :items="item.tags" />
+    </template>
+    <template #item.recipeCategory="{ item }">
+      <RecipeChip small :items="item.recipeCategory" />
+    </template>
+    <template #item.userId="{ item }">
+      <v-list-item class="justify-start">
+        <v-list-item-avatar>
+          <img src="https://i.pravatar.cc/300" alt="John" />
+        </v-list-item-avatar>
+        <v-list-item-content>
+          <v-list-item-title v-text="getMember(item.userId)"></v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+  </v-data-table>
+</template>
+    
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
+import RecipeChip from "./RecipeChips.vue";
+import { Recipe } from "~/types/api-types/recipe";
+import { useApiSingleton } from "~/composables/use-api";
+import { UserOut } from "~/types/api-types/user";
+
+const INPUT_EVENT = "input";
+
+interface ShowHeaders {
+  id: Boolean;
+  owner: Boolean;
+  tags: Boolean;
+  categories: Boolean;
+  recipeYield: Boolean;
+  dateAdded: Boolean;
+}
+
+export default defineComponent({
+  components: { RecipeChip },
+  props: {
+    value: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    recipes: {
+      type: Array as () => Recipe[],
+      default: () => [],
+    },
+    showHeaders: {
+      type: Object as () => ShowHeaders,
+      required: false,
+      default: () => {
+        return {
+          id: true,
+          owner: false,
+          tags: true,
+          categories: true,
+          recipeYield: true,
+          dateAdded: true,
+        };
+      },
+    },
+  },
+  setup(props, context) {
+    function setValue(value: Recipe[]) {
+      context.emit(INPUT_EVENT, value);
+    }
+
+    const show = props.showHeaders;
+    const headers = computed(() => {
+      const hdrs = [];
+
+      if (show.id) {
+        hdrs.push({ text: "Id", value: "id" });
+      }
+      if (show.owner) {
+        hdrs.push({ text: "Owner", value: "userId", align: "center" });
+      }
+      hdrs.push({ text: "Name", value: "name" });
+      if (show.categories) {
+        hdrs.push({ text: "Categories", value: "recipeCategory" });
+      }
+
+      if (show.tags) {
+        hdrs.push({ text: "Tags", value: "tags" });
+      }
+      if (show.recipeYield) {
+        hdrs.push({ text: "Yield", value: "recipeYield" });
+      }
+      if (show.dateAdded) {
+        hdrs.push({ text: "Date Added", value: "dateAdded" });
+      }
+      return hdrs;
+    });
+
+    // ============
+    // Group Members
+    const api = useApiSingleton();
+    const members = ref<UserOut[] | null[]>([]);
+
+    async function refreshMembers() {
+      const { data } = await api.groups.fetchMembers();
+      if (data) {
+        members.value = data;
+      }
+    }
+
+    onMounted(() => {
+      refreshMembers();
+    });
+
+    function getMember(id: number) {
+      if (members.value[0]) {
+        // @ts-ignore
+        return members.value.find((m) => m.id === id).username;
+      }
+
+      return "None";
+    }
+
+    return { setValue, headers, members, getMember };
+  },
+
+  data() {
+    return {
+      selected: [],
+    };
+  },
+  watch: {
+    value(val) {
+      this.selected = val;
+    },
+  },
+});
+</script>

frontend/components/global/BaseDialog.vue

@@ -132,7 +132,6 @@ export default defineComponent({
       this.submitted = true;
     },
     open() {
-      console.log("Open Dialog");
       this.dialog = true;
     },
     close() {

frontend/components/global/BaseOverflowButton.vue

@@ -1,17 +1,18 @@
   <template>
   <v-menu offset-y>
     <template #activator="{ on, attrs }">
-      <v-btn color="primary" v-bind="attrs" :class="btnClass" v-on="on">
+      <v-btn color="primary" v-bind="attrs" :class="btnClass" :disabled="disabled" v-on="on">
         <v-icon v-if="activeObj.icon" left>
           {{ activeObj.icon }}
         </v-icon>
-        {{ activeObj.text }}
+        {{ mode === MODES.model ? activeObj.text : btnText }}
         <v-icon right>
           {{ $globals.icons.chevronDown }}
         </v-icon>
       </v-btn>
     </template>
-    <v-list>
+    <!--  Model -->
+    <v-list v-if="mode === MODES.model" dense>
       <v-list-item-group v-model="itemGroup">
         <v-list-item v-for="(item, index) in items" :key="index" @click="setValue(item)">
           <v-list-item-icon v-if="item.icon">
@@ -21,6 +22,26 @@
         </v-list-item>
       </v-list-item-group>
     </v-list>
+    <!--  Event -->
+    <v-list v-else-if="mode === MODES.link" dense>
+      <v-list-item-group v-model="itemGroup">
+        <v-list-item v-for="(item, index) in items" :key="index" :to="item.to">
+          <v-list-item-icon v-if="item.icon">
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>{{ item.text }}</v-list-item-title>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+    <!--  Event -->
+    <v-list v-else-if="mode === MODES.event" dense>
+      <v-list-item v-for="(item, index) in items" :key="index" @click="$emit(item.event)">
+        <v-list-item-icon v-if="item.icon">
+          <v-icon>{{ item.icon }}</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>{{ item.text }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
   </v-menu>
 </template>
 
@@ -29,12 +50,28 @@ import { defineComponent, ref } from "@nuxtjs/composition-api";
 
 const INPUT_EVENT = "input";
 
+type modes = "model" | "link" | "event";
+
+const MODES = {
+  model: "model",
+  link: "link",
+  event: "event",
+};
+
 export default defineComponent({
   props: {
+    mode: {
+      type: String as () => modes,
+      default: "model",
+    },
     items: {
       type: Array,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
     value: {
       type: String,
       required: false,
@@ -45,6 +82,11 @@ export default defineComponent({
       required: false,
       default: "",
     },
+    btnText: {
+      type: String,
+      required: false,
+      default: "Actions",
+    },
   },
   setup(props, context) {
     const activeObj = ref({
@@ -70,6 +112,7 @@ export default defineComponent({
     }
 
     return {
+      MODES,
       activeObj,
       itemGroup,
       setValue,