From 8c0c8be6592fbf134526c0547273e618eef2c6d4 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Thu, 17 Mar 2022 10:30:10 -0800
Subject: [PATCH] Feature/group items editor (#1064)

* update types

* remove toolbox routes

* remove unused ""

* add generic crud table

* update calls for type safety

* recreate food/unit editors

* fix type error

* remove shopping list link

* add transition

* add basic search box

* conditional show-select

* styling + basic download support

* generic download as json function

* add fraction support

* add export option

* add label text
---
 frontend/api/class-interfaces/recipe-units.ts |  14 +-
 .../components/Domain/Recipe/RecipeTools.vue  |   5 +-
 frontend/components/global/CrudTable.vue      | 187 ++++++++++++++++++
 .../composables/recipes/use-recipe-units.ts   |  12 +-
 frontend/composables/use-utils.ts             |  11 ++
 frontend/layouts/admin.vue                    |  17 --
 frontend/layouts/default.vue                  |   8 -
 frontend/pages/admin/toolbox/foods.vue        | 171 ----------------
 frontend/pages/admin/toolbox/units.vue        | 142 -------------
 frontend/pages/group/data.vue                 |  83 ++++++++
 frontend/pages/group/data/foods.vue           | 176 +++++++++++++++++
 frontend/pages/group/data/index.vue           |  24 +++
 frontend/pages/group/data/units.vue           | 167 ++++++++++++++++
 frontend/pages/group/mealplan/settings.vue    |   4 +-
 frontend/pages/user/profile/index.vue         |   9 +
 frontend/types/api-types/admin.ts             |   2 +-
 frontend/types/components.d.ts                |   6 +-
 17 files changed, 674 insertions(+), 364 deletions(-)
 create mode 100644 frontend/components/global/CrudTable.vue
 delete mode 100644 frontend/pages/admin/toolbox/foods.vue
 delete mode 100644 frontend/pages/admin/toolbox/units.vue
 create mode 100644 frontend/pages/group/data.vue
 create mode 100644 frontend/pages/group/data/foods.vue
 create mode 100644 frontend/pages/group/data/index.vue
 create mode 100644 frontend/pages/group/data/units.vue

diff --git a/frontend/api/class-interfaces/recipe-units.ts b/frontend/api/class-interfaces/recipe-units.ts
index 7d9d14860633..a63f8a055bb2 100644
--- a/frontend/api/class-interfaces/recipe-units.ts
+++ b/frontend/api/class-interfaces/recipe-units.ts
@@ -1,24 +1,14 @@
 import { BaseCRUDAPI } from "../_base";
+import { CreateIngredientUnit, IngredientUnit } from "~/types/api-types/recipe";
 
 const prefix = "/api";
 
-export interface CreateUnit {
-  name: string;
-  abbreviation: string;
-  fraction: boolean;
-  description: string;
-}
-
-export interface Unit extends CreateUnit {
-  id: number;
-}
-
 const routes = {
   unit: `${prefix}/units`,
   unitsUnit: (tag: string) => `${prefix}/units/${tag}`,
 };
 
-export class UnitAPI extends BaseCRUDAPI<Unit, CreateUnit> {
+export class UnitAPI extends BaseCRUDAPI<IngredientUnit, CreateIngredientUnit> {
   baseRoute: string = routes.unit;
   itemRoute = routes.unitsUnit;
 }
diff --git a/frontend/components/Domain/Recipe/RecipeTools.vue b/frontend/components/Domain/Recipe/RecipeTools.vue
index 1ab1e1c1ea77..622b72a8b628 100644
--- a/frontend/components/Domain/Recipe/RecipeTools.vue
+++ b/frontend/components/Domain/Recipe/RecipeTools.vue
@@ -27,7 +27,7 @@
             {{ data.item.name || data.item }}
           </v-chip>
         </template>
-        <template #append-outer="">
+        <template #append-outer>
           <BaseDialog v-model="createDialog" title="Create New Tool" @submit="actions.createOne()">
             <template #activator>
               <v-btn icon @click="createDialog = true">
@@ -86,5 +86,4 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
diff --git a/frontend/components/global/CrudTable.vue b/frontend/components/global/CrudTable.vue
new file mode 100644
index 000000000000..393d944bdb4b
--- /dev/null
+++ b/frontend/components/global/CrudTable.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <v-card-actions>
+      <v-menu v-if="tableConfig.hideColumns" offset-y bottom nudge-bottom="6" :close-on-content-click="false">
+        <template #activator="{ on, attrs }">
+          <v-btn color="accent" class="mr-1" dark v-bind="attrs" v-on="on">
+            <v-icon>
+              {{ $globals.icons.cog }}
+            </v-icon>
+          </v-btn>
+        </template>
+        <v-card>
+          <v-card-text>
+            <v-checkbox
+              v-for="itemValue in headers"
+              :key="itemValue.text + itemValue.show"
+              v-model="filteredHeaders"
+              :value="itemValue.value"
+              dense
+              flat
+              inset
+              :label="itemValue.text"
+              hide-details
+            ></v-checkbox>
+          </v-card-text>
+        </v-card>
+      </v-menu>
+      <BaseOverflowButton
+        v-if="bulkActions.length > 0"
+        :disabled="selected.length < 1"
+        mode="event"
+        color="info"
+        :items="bulkActions"
+        v-on="bulkActionListener"
+      >
+      </BaseOverflowButton>
+      <slot name="button-row"> </slot>
+    </v-card-actions>
+    <div class="mx-2 clip-width">
+      <v-text-field v-model="search" :label="$tc('search.search')"></v-text-field>
+    </div>
+    <v-data-table
+      v-model="selected"
+      item-key="id"
+      :show-select="bulkActions.length > 0"
+      :headers="activeHeaders"
+      :items="data || []"
+      :items-per-page="15"
+      :search="search"
+      class="elevation-2"
+    >
+      <template v-for="header in activeHeaders" #[`item.${header.value}`]="{ item }">
+        <slot :name="'item.' + header.value" v-bind="{ item }"> {{ item[header.value] }}</slot>
+      </template>
+      <template #item.actions="{ item }">
+        <BaseButtonGroup
+          :buttons="[
+            {
+              icon: $globals.icons.edit,
+              text: 'Edit',
+              event: 'edit',
+            },
+            {
+              icon: $globals.icons.delete,
+              text: 'Delete',
+              event: 'delete',
+            },
+          ]"
+          @delete="$emit('delete-one', item)"
+          @edit="$emit('edit-one', item)"
+        />
+      </template>
+    </v-data-table>
+    <v-card-actions class="justify-end">
+      <slot name="button-bottom"> </slot>
+      <BaseButton color="info" @click="downloadAsJson(data, 'export.json')">
+        <template #icon>
+          {{ $globals.icons.download }}
+        </template>
+        {{ $tc("general.download") }}
+      </BaseButton>
+    </v-card-actions>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from "@nuxtjs/composition-api";
+import { downloadAsJson } from "~/composables/use-utils";
+
+export interface TableConfig {
+  hideColumns: boolean;
+  canExport: boolean;
+}
+
+export interface TableHeaders {
+  text: string;
+  value: string;
+  show: boolean;
+  align?: string;
+}
+
+export interface BulkAction {
+  icon: string;
+  text: string;
+  event: string;
+}
+
+export default defineComponent({
+  props: {
+    tableConfig: {
+      type: Object as () => TableConfig,
+      default: () => ({
+        hideColumns: false,
+        canExport: false,
+      }),
+    },
+    headers: {
+      type: Array as () => TableHeaders[],
+      required: true,
+    },
+    data: {
+      type: Array as () => any[],
+      required: true,
+    },
+    bulkActions: {
+      type: Array as () => BulkAction[],
+      default: () => [],
+    },
+  },
+  setup(props, context) {
+    // ===========================================================
+    // Reactive Headers
+    const filteredHeaders = ref<string[]>([]);
+
+    // Set default filtered
+    filteredHeaders.value = (() => {
+      const filtered: string[] = [];
+      props.headers.forEach((element) => {
+        if (element.show) {
+          filtered.push(element.value);
+        }
+      });
+      return filtered;
+    })();
+
+    const activeHeaders = computed(() => {
+      const filtered = props.headers.filter((header) => filteredHeaders.value.includes(header.value));
+      filtered.push({ text: "", value: "actions", show: true, align: "right" });
+      return filtered;
+    });
+
+    const selected = ref<any[]>([]);
+
+    // ===========================================================
+    // Bulk Action Event Handler
+
+    const bulkActionListener = computed(() => {
+      const handlers: { [key: string]: () => void } = {};
+
+      props.bulkActions.forEach((action) => {
+        handlers[action.event] = () => {
+          context.emit(action.event, selected.value);
+        };
+      });
+
+      return handlers;
+    });
+
+    const search = ref("");
+
+    return {
+      selected,
+      filteredHeaders,
+      activeHeaders,
+      bulkActionListener,
+      search,
+      downloadAsJson,
+    };
+  },
+});
+</script>
+
+<style>
+.clip-width {
+  max-width: 400px;
+}
+</style>
diff --git a/frontend/composables/recipes/use-recipe-units.ts b/frontend/composables/recipes/use-recipe-units.ts
index b8a88c8b480c..ea12a7b2991f 100644
--- a/frontend/composables/recipes/use-recipe-units.ts
+++ b/frontend/composables/recipes/use-recipe-units.ts
@@ -1,10 +1,10 @@
 import { useAsync, ref, reactive, Ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { useUserApi } from "~/composables/api";
-import { Unit } from "~/api/class-interfaces/recipe-units";
 import { VForm } from "~/types/vuetify";
+import { IngredientUnit } from "~/types/api-types/recipe";
 
-let unitStore: Ref<Unit[] | null> | null = null;
+let unitStore: Ref<IngredientUnit[] | null> | null = null;
 
 export const useUnits = function () {
   const api = useUserApi();
@@ -12,8 +12,8 @@ export const useUnits = function () {
   const deleteTargetId = ref(0);
   const validForm = ref(true);
 
-  const workingUnitData = reactive({
-    id: 0,
+  const workingUnitData: IngredientUnit = reactive({
+    id: "",
     name: "",
     fraction: true,
     abbreviation: "",
@@ -79,12 +79,12 @@ export const useUnits = function () {
       }
     },
     resetWorking() {
-      workingUnitData.id = 0;
+      workingUnitData.id = "";
       workingUnitData.name = "";
       workingUnitData.abbreviation = "";
       workingUnitData.description = "";
     },
-    setWorking(item: Unit) {
+    setWorking(item: IngredientUnit) {
       workingUnitData.id = item.id;
       workingUnitData.name = item.name;
       workingUnitData.fraction = item.fraction;
diff --git a/frontend/composables/use-utils.ts b/frontend/composables/use-utils.ts
index fde5504db575..05ad53c96831 100644
--- a/frontend/composables/use-utils.ts
+++ b/frontend/composables/use-utils.ts
@@ -96,3 +96,14 @@ export function deepCopy<T>(obj: T): T {
   }
   return rv as T;
 }
+
+export function downloadAsJson(data: any, filename: string) {
+  const content = JSON.stringify(data);
+  const blob = new Blob([content], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.download = filename;
+  a.href = url;
+  a.click();
+  URL.revokeObjectURL(url);
+}
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index d92e174ed2c7..195462aafa0d 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -54,23 +54,6 @@ export default defineComponent({
         to: "/admin/site-settings",
         title: i18n.t("sidebar.site-settings"),
       },
-      {
-        icon: $globals.icons.tools,
-        to: "/admin/toolbox",
-        title: i18n.t("sidebar.toolbox"),
-        children: [
-          {
-            icon: $globals.icons.foods,
-            to: "/admin/toolbox/foods",
-            title: "Manage Foods",
-          },
-          {
-            icon: $globals.icons.units,
-            to: "/admin/toolbox/units",
-            title: "Manage Units",
-          },
-        ],
-      },
       {
         icon: $globals.icons.user,
         to: "/admin/manage/users",
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index bc3a40d3fe51..23ff5bbafb74 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -123,14 +123,6 @@ export default defineComponent({
           to: "/user/group/cookbooks",
           restricted: true,
         },
-        { divider: true },
-        {
-          icon: this.$globals.icons.cartCheck,
-          title: "Shopping List",
-          subtitle: "Create a new shopping list",
-          to: "/user/group/shopping-lists/create",
-          restricted: true,
-        },
       ],
       bottomLink: [
         {
diff --git a/frontend/pages/admin/toolbox/foods.vue b/frontend/pages/admin/toolbox/foods.vue
deleted file mode 100644
index 80a9128352d2..000000000000
--- a/frontend/pages/admin/toolbox/foods.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <v-container fluid>
-    <BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
-    <v-toolbar flat color="background">
-      <!-- New/Edit Food Dialog -->
-      <BaseDialog
-        v-model="newFoodDialog"
-        :title="dialog.title"
-        :icon="$globals.icons.units"
-        :submit-text="dialog.text"
-        :keep-open="!validForm"
-        @submit="create ? actions.createOne(domCreateFoodForm) : actions.updateOne()"
-      >
-        <v-card-text>
-          <v-form ref="domCreateFoodForm">
-            <v-text-field v-model="workingFoodData.name" label="Name" :rules="[validators.required]"></v-text-field>
-            <v-text-field v-model="workingFoodData.description" label="Description"></v-text-field>
-            <v-autocomplete
-              v-model="workingFoodData.labelId"
-              clearable
-              :items="allLabels"
-              item-value="id"
-              item-text="name"
-            >
-            </v-autocomplete>
-          </v-form>
-        </v-card-text>
-      </BaseDialog>
-
-      <!-- Delete Food Dialog -->
-      <BaseDialog
-        v-model="deleteFoodDialog"
-        :title="$t('general.confirm')"
-        color="error"
-        @confirm="actions.deleteOne(deleteTarget)"
-      >
-        <template #activator> </template>
-        <v-card-text>
-          {{ $t("general.confirm-delete-generic") }}
-        </v-card-text>
-      </BaseDialog>
-
-      <BaseButton
-        class="mr-1"
-        @click="
-          create = true;
-          actions.resetWorking();
-          newFoodDialog = true;
-        "
-      ></BaseButton>
-      <BaseButton secondary @click="filter = !filter"> Filter </BaseButton>
-    </v-toolbar>
-
-    <v-expand-transition>
-      <div v-show="filter">
-        <v-text-field v-model="search" style="max-width: 500px" label="Filter" class="ml-4"> </v-text-field>
-      </div>
-    </v-expand-transition>
-
-    <v-data-table :headers="headers" :items="foods || []" item-key="id" class="elevation-0" :search="search">
-      <template #item.label="{ item }">
-        <v-chip v-if="item.label" label>
-          {{ item.label.name }}
-        </v-chip>
-      </template>
-      <template #item.actions="{ item }">
-        <div class="d-flex justify-end">
-          <BaseButton
-            edit
-            small
-            class="mr-2"
-            @click="
-              create = false;
-              actions.setWorking(item);
-              newFoodDialog = true;
-            "
-          ></BaseButton>
-          <BaseButton
-            delete
-            small
-            @click="
-              deleteFoodDialog = true;
-              deleteTarget = item.id;
-            "
-          ></BaseButton>
-        </div>
-      </template>
-    </v-data-table>
-    <v-divider></v-divider>
-  </v-container>
-</template>
-    
-<script lang="ts">
-import { defineComponent, reactive, toRefs, ref, computed } from "@nuxtjs/composition-api";
-import { useUserApi } from "~/composables/api";
-import { useFoods } from "~/composables/recipes";
-import { validators } from "~/composables/use-validators";
-import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
-export default defineComponent({
-  layout: "admin",
-  setup() {
-    const { foods, actions, workingFoodData, validForm } = useFoods();
-
-    const domCreateFoodForm = ref(null);
-    const domFoodDialog = ref(null);
-
-    const dialog = computed(() => {
-      if (state.create) {
-        return {
-          title: "Create Food",
-          text: "Create",
-        };
-      } else {
-        return {
-          title: "Edit Food",
-          text: "Update",
-        };
-      }
-    });
-
-    const state = reactive({
-      deleteFoodDialog: false,
-      newFoodDialog: false,
-      deleteTarget: 0,
-      headers: [
-        { text: "Id", value: "id" },
-        { text: "Name", value: "name" },
-        { text: "Description", value: "description" },
-        { text: "Label", value: "label" },
-        { text: "", value: "actions", sortable: false },
-      ],
-      filter: false,
-      create: true,
-      search: "",
-    });
-
-    const userApi = useUserApi();
-
-    const allLabels = ref([] as MultiPurposeLabelSummary[]);
-
-    async function refreshLabels() {
-      const { data } = await userApi.multiPurposeLabels.getAll();
-      allLabels.value = data ?? [];
-    }
-
-    refreshLabels();
-
-    return {
-      allLabels,
-      refreshLabels,
-      ...toRefs(state),
-      actions,
-      dialog,
-      domCreateFoodForm,
-      domFoodDialog,
-      foods,
-      validators,
-      validForm,
-      workingFoodData,
-    };
-  },
-  head() {
-    return {
-      title: "Foods",
-    };
-  },
-});
-</script>
-    
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/frontend/pages/admin/toolbox/units.vue b/frontend/pages/admin/toolbox/units.vue
deleted file mode 100644
index 1d2dcda332db..000000000000
--- a/frontend/pages/admin/toolbox/units.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <v-container fluid>
-    <!-- Create/Edit Unit Dialog -->
-    <BaseDialog
-      v-model="createUnitDialog"
-      :title="dialog.title"
-      :icon="$globals.icons.units"
-      :submit-text="dialog.text"
-      :keep-open="!validForm"
-      @submit="create ? actions.createOne(domCreateUnitForm) : actions.updateOne()"
-    >
-      <v-card-text>
-        <v-form ref="domCreateUnitForm">
-          <v-text-field v-model="workingUnitData.name" label="Name" :rules="[validators.required]"></v-text-field>
-          <v-text-field v-model="workingUnitData.abbreviation" label="Abbreviation"></v-text-field>
-          <v-text-field v-model="workingUnitData.description" label="Description"></v-text-field>
-        </v-form>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Delete Unit Dialog -->
-    <BaseDialog
-      v-model="deleteUnitDialog"
-      :title="$t('general.confirm')"
-      color="error"
-      @confirm="actions.deleteOne(item.id)"
-    >
-      <v-card-text>
-        {{ $t("general.confirm-delete-generic") }}
-      </v-card-text>
-    </BaseDialog>
-    <BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
-    <v-toolbar flat color="background">
-      <BaseButton
-        class="mr-1"
-        @click="
-          create = true;
-          actions.resetWorking();
-          createUnitDialog = true;
-        "
-      ></BaseButton>
-      <BaseButton secondary @click="filter = !filter"> Filter </BaseButton>
-    </v-toolbar>
-
-    <v-expand-transition>
-      <div v-show="filter">
-        <v-text-field v-model="search" style="max-width: 500px" label="Filter" class="ml-4"> </v-text-field>
-      </div>
-    </v-expand-transition>
-
-    <v-data-table :headers="headers" :items="units || []" item-key="id" class="elevation-0" :search="search">
-      <template #item.actions="{ item }">
-        <div class="d-flex justify-end">
-          <BaseButton
-            edit
-            small
-            class="mr-2"
-            @click="
-              create = false;
-              actions.setWorking(item);
-              createUnitDialog = true;
-            "
-          ></BaseButton>
-          <BaseButton
-            delete
-            small
-            @click="
-              deleteUnitDialog = true;
-              deleteUnitTarget = item.id;
-            "
-          ></BaseButton>
-        </div>
-      </template>
-    </v-data-table>
-    <v-divider></v-divider>
-  </v-container>
-</template>
-    
-<script lang="ts">
-import { defineComponent, reactive, toRefs, ref, computed } from "@nuxtjs/composition-api";
-import { useUnits } from "~/composables/recipes";
-import { validators } from "~/composables/use-validators";
-export default defineComponent({
-  layout: "admin",
-  setup() {
-    const { units, actions, workingUnitData, validForm } = useUnits();
-
-    const domCreateUnitForm = ref(null);
-    const domUnitDialog = ref(null);
-
-    const dialog = computed(() => {
-      if (state.create) {
-        return {
-          title: "Create Unit",
-          text: "Create",
-        };
-      } else {
-        return {
-          title: "Edit Unit",
-          text: "Update",
-        };
-      }
-    });
-
-    const state = reactive({
-      createUnitDialog: false,
-      deleteUnitDialog: false,
-      deleteUnitTarget: 0,
-      headers: [
-        { text: "Id", value: "id" },
-        { text: "Name", value: "name" },
-        { text: "Abbreviation", value: "abbreviation" },
-        { text: "Description", value: "description" },
-        { text: "", value: "actions", sortable: false },
-      ],
-      filter: false,
-      create: true,
-      search: "",
-    });
-
-    return {
-      ...toRefs(state),
-      actions,
-      dialog,
-      domCreateUnitForm,
-      domUnitDialog,
-      units,
-      validators,
-      validForm,
-      workingUnitData,
-    };
-  },
-  head() {
-    return {
-      title: "Units",
-    };
-  },
-});
-</script>
-    
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/frontend/pages/group/data.vue b/frontend/pages/group/data.vue
new file mode 100644
index 000000000000..3b81e4dd2c45
--- /dev/null
+++ b/frontend/pages/group/data.vue
@@ -0,0 +1,83 @@
+<template>
+  <v-container>
+    <BasePageTitle>
+      <template #header>
+        <v-img max-height="175" max-width="175" :src="require('~/static/svgs/manage-recipes.svg')"></v-img>
+      </template>
+      <template #title> Data Management </template>
+      Select which data set you want to make changes to.
+      <BannerExperimental class="mt-5"></BannerExperimental>
+      <template #content>
+        <div>
+          <BaseOverflowButton
+            :btn-text="buttonText"
+            mode="link"
+            rounded
+            :items="[
+              {
+                text: 'Foods',
+                value: 'url',
+                to: '/group/data/foods',
+              },
+              {
+                text: 'Units',
+                value: 'new',
+                to: '/group/data/units',
+              },
+              // {
+              //   text: 'Labels',
+              //   value: 'new',
+              //   to: '/group/data/labels',
+              // },
+            ]"
+          >
+          </BaseOverflowButton>
+        </div>
+      </template>
+    </BasePageTitle>
+    <section>
+      <v-scroll-x-transition>
+        <NuxtChild />
+      </v-scroll-x-transition>
+    </section>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, useRoute } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    const buttonLookup: { [key: string]: string } = {
+      foods: "Foods",
+      units: "Units",
+      labels: "Labels",
+    };
+
+    const route = useRoute();
+
+    const buttonText = computed(() => {
+      const last = route.value.path.split("/").pop();
+
+      if (last) {
+        return buttonLookup[last];
+      }
+
+      return "Select Data";
+    });
+
+    return {
+      buttonText,
+    };
+  },
+  head: {
+    title: "Data Management",
+  },
+});
+</script>
diff --git a/frontend/pages/group/data/foods.vue b/frontend/pages/group/data/foods.vue
new file mode 100644
index 000000000000..1fa3efe2c8f5
--- /dev/null
+++ b/frontend/pages/group/data/foods.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-model="editDialog"
+      :icon="$globals.icons.foods"
+      title="Edit Food"
+      :submit-text="$tc('general.save')"
+      @submit="editSaveFood"
+    >
+      <v-card-text v-if="editTarget">
+        <v-form ref="domCreateFoodForm">
+          <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
+            v-model="editTarget.labelId"
+            clearable
+            :items="allLabels"
+            item-value="id"
+            item-text="name"
+            label="Food Label"
+          >
+          </v-autocomplete>
+        </v-form> </v-card-text
+    ></BaseDialog>
+
+    <!-- Delete Dialog -->
+    <BaseDialog
+      v-model="deleteDialog"
+      :title="$tc('general.delete')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteFood"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Recipe Data Table -->
+    <BaseCardSectionTitle :icon="$globals.icons.foods" section title="Food Data"> </BaseCardSectionTitle>
+    <CrudTable
+      :table-config="tableConfig"
+      :headers.sync="tableHeaders"
+      :data="foods"
+      :bulk-actions="[]"
+      @delete-one="deleteEventHandler"
+      @edit-one="editEventHandler"
+    >
+      <template #button-row>
+        <BaseButton :disabled="true">
+          <template #icon> {{ $globals.icons.foods }} </template>
+          Combine
+        </BaseButton>
+      </template>
+      <template #item.label="{ item }">
+        <MultiPurposeLabel v-if="item.label" :label="item.label">
+          {{ item.label.name }}
+        </MultiPurposeLabel>
+      </template>
+    </CrudTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
+import { validators } from "~/composables/use-validators";
+import { useUserApi } from "~/composables/api";
+import { IngredientFood } from "~/types/api-types/recipe";
+import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
+import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
+
+export default defineComponent({
+  components: { MultiPurposeLabel },
+  setup() {
+    const userApi = useUserApi();
+    const tableConfig = {
+      hideColumns: true,
+      canExport: true,
+    };
+    const tableHeaders = [
+      {
+        text: "Id",
+        value: "id",
+        show: false,
+      },
+      {
+        text: "Name",
+        value: "name",
+        show: true,
+      },
+      {
+        text: "Description",
+        value: "description",
+        show: true,
+      },
+      {
+        text: "Label",
+        value: "label",
+        show: true,
+      },
+    ];
+    const foods = ref<IngredientFood[]>([]);
+    async function refreshFoods() {
+      const { data } = await userApi.foods.getAll();
+      foods.value = data ?? [];
+    }
+    onMounted(() => {
+      refreshFoods();
+    });
+    const editDialog = ref(false);
+    const editTarget = ref<IngredientFood | null>(null);
+    function editEventHandler(item: IngredientFood) {
+      editTarget.value = item;
+      editDialog.value = true;
+    }
+    async function editSaveFood() {
+      if (!editTarget.value) {
+        return;
+      }
+
+      const { data } = await userApi.foods.updateOne(editTarget.value.id, editTarget.value);
+      if (data) {
+        refreshFoods();
+      }
+
+      editDialog.value = false;
+    }
+    const deleteDialog = ref(false);
+    const deleteTarget = ref<IngredientFood | null>(null);
+    function deleteEventHandler(item: IngredientFood) {
+      deleteTarget.value = item;
+      deleteDialog.value = true;
+    }
+    async function deleteFood() {
+      if (!deleteTarget.value) {
+        return;
+      }
+
+      const { data } = await userApi.foods.deleteOne(deleteTarget.value.id);
+      if (data) {
+        refreshFoods();
+      }
+      deleteDialog.value = false;
+    }
+
+    // ============================================================
+    // Labels
+
+    const allLabels = ref([] as MultiPurposeLabelSummary[]);
+
+    async function refreshLabels() {
+      const { data } = await userApi.multiPurposeLabels.getAll();
+      allLabels.value = data ?? [];
+    }
+
+    refreshLabels();
+    return {
+      tableConfig,
+      tableHeaders,
+      foods,
+      allLabels,
+      validators,
+      // Edit
+      editDialog,
+      editEventHandler,
+      editSaveFood,
+      editTarget,
+      // Delete
+      deleteEventHandler,
+      deleteDialog,
+      deleteFood,
+    };
+  },
+});
+</script>
diff --git a/frontend/pages/group/data/index.vue b/frontend/pages/group/data/index.vue
new file mode 100644
index 000000000000..d19fb6126f5c
--- /dev/null
+++ b/frontend/pages/group/data/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, useRouter } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    const router = useRouter();
+    onMounted(() => {
+      // Force redirect to first valid page
+      router.push("/group/data/foods");
+    });
+    return {};
+  },
+});
+</script>
diff --git a/frontend/pages/group/data/units.vue b/frontend/pages/group/data/units.vue
new file mode 100644
index 000000000000..fa1387669328
--- /dev/null
+++ b/frontend/pages/group/data/units.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-model="editDialog"
+      :icon="$globals.icons.units"
+      title="Edit Food"
+      :submit-text="$tc('general.save')"
+      @submit="editSaveFood"
+    >
+      <v-card-text v-if="editTarget">
+        <v-form ref="domCreateFoodForm">
+          <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>
+          <v-checkbox v-model="editTarget.fraction" hide-details label="Display as Fraction"></v-checkbox>
+        </v-form>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Delete Dialog -->
+    <BaseDialog
+      v-model="deleteDialog"
+      :title="$tc('general.delete')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteFood"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Recipe Data Table -->
+    <BaseCardSectionTitle :icon="$globals.icons.units" section title="Unit Data"> </BaseCardSectionTitle>
+    <CrudTable
+      :table-config="tableConfig"
+      :headers.sync="tableHeaders"
+      :data="units"
+      :bulk-actions="[]"
+      @delete-one="deleteEventHandler"
+      @edit-one="editEventHandler"
+    >
+      <template #item.fraction="{ item }">
+        <v-icon :color="item.fraction ? 'success' : undefined">
+          {{ item.fraction ? $globals.icons.check : $globals.icons.close }}
+        </v-icon>
+      </template>
+    </CrudTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
+import { validators } from "~/composables/use-validators";
+import { useUserApi } from "~/composables/api";
+import { IngredientUnit } from "~/types/api-types/recipe";
+import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
+
+export default defineComponent({
+  setup() {
+    const userApi = useUserApi();
+    const tableConfig = {
+      hideColumns: true,
+      canExport: true,
+    };
+    const tableHeaders = [
+      {
+        text: "Id",
+        value: "id",
+        show: false,
+      },
+      {
+        text: "Name",
+        value: "name",
+        show: true,
+      },
+      {
+        text: "Abbreviation",
+        value: "abbreviation",
+        show: true,
+      },
+      {
+        text: "Description",
+        value: "description",
+        show: true,
+      },
+      {
+        text: "Fraction",
+        value: "fraction",
+        show: true,
+      },
+    ];
+    const units = ref<IngredientUnit[]>([]);
+    async function refreshFoods() {
+      const { data } = await userApi.units.getAll();
+      units.value = data ?? [];
+    }
+    onMounted(() => {
+      refreshFoods();
+    });
+    const editDialog = ref(false);
+    const editTarget = ref<IngredientUnit | null>(null);
+    function editEventHandler(item: IngredientUnit) {
+      editTarget.value = item;
+      editDialog.value = true;
+    }
+    async function editSaveFood() {
+      if (!editTarget.value) {
+        return;
+      }
+
+      const { data } = await userApi.units.updateOne(editTarget.value.id, editTarget.value);
+      if (data) {
+        refreshFoods();
+      }
+
+      editDialog.value = false;
+    }
+    const deleteDialog = ref(false);
+    const deleteTarget = ref<IngredientUnit | null>(null);
+    function deleteEventHandler(item: IngredientUnit) {
+      deleteTarget.value = item;
+      deleteDialog.value = true;
+    }
+    async function deleteFood() {
+      if (!deleteTarget.value) {
+        return;
+      }
+
+      const { data } = await userApi.units.deleteOne(deleteTarget.value.id);
+      if (data) {
+        refreshFoods();
+      }
+      deleteDialog.value = false;
+    }
+
+    // ============================================================
+    // Labels
+
+    const allLabels = ref([] as MultiPurposeLabelSummary[]);
+
+    async function refreshLabels() {
+      const { data } = await userApi.multiPurposeLabels.getAll();
+      allLabels.value = data ?? [];
+    }
+
+    refreshLabels();
+    return {
+      tableConfig,
+      tableHeaders,
+      units,
+      allLabels,
+      validators,
+      // Edit
+      editDialog,
+      editEventHandler,
+      editSaveFood,
+      editTarget,
+      // Delete
+      deleteEventHandler,
+      deleteDialog,
+      deleteFood,
+    };
+  },
+});
+</script>
diff --git a/frontend/pages/group/mealplan/settings.vue b/frontend/pages/group/mealplan/settings.vue
index 9b6a326869ec..73bddebad858 100644
--- a/frontend/pages/group/mealplan/settings.vue
+++ b/frontend/pages/group/mealplan/settings.vue
@@ -45,12 +45,12 @@
                   :buttons="[
                     {
                       icon: $globals.icons.edit,
-                      text: $t('general.edit'),
+                      text: $tc('general.edit'),
                       event: 'edit',
                     },
                     {
                       icon: $globals.icons.delete,
-                      text: $t('general.delete'),
+                      text: $tc('general.delete'),
                       event: 'delete',
                     },
                   ]"
diff --git a/frontend/pages/user/profile/index.vue b/frontend/pages/user/profile/index.vue
index f70435899bc1..4158957450df 100644
--- a/frontend/pages/user/profile/index.vue
+++ b/frontend/pages/user/profile/index.vue
@@ -125,6 +125,15 @@
             Manage your recipe data and make bulk changes
           </UserProfileLinkCard>
         </v-col>
+        <v-col v-if="user.advanced" cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage Data', to: '/group/data/foods' }"
+            :image="require('~/static/svgs/manage-recipes.svg')"
+          >
+            <template #title> Manage Data </template>
+            Manage your Food and Units (more options coming soon)
+          </UserProfileLinkCard>
+        </v-col>
         <v-col v-if="user.advanced" cols="12" sm="12" md="6">
           <UserProfileLinkCard
             :link="{ text: 'Manage Data Migrations', to: '/user/group/data/migrations' }"
diff --git a/frontend/types/api-types/admin.ts b/frontend/types/api-types/admin.ts
index 646b0c83d1ba..5f4e74864f5c 100644
--- a/frontend/types/api-types/admin.ts
+++ b/frontend/types/api-types/admin.ts
@@ -14,7 +14,7 @@ export interface AdminAboutInfo {
   apiPort: number;
   apiDocs: boolean;
   dbType: string;
-  dbUrl: string;
+  dbUrl?: string;
   defaultGroup: string;
 }
 export interface AllBackups {
diff --git a/frontend/types/components.d.ts b/frontend/types/components.d.ts
index 0c2432d3076d..ed87cdc2d567 100644
--- a/frontend/types/components.d.ts
+++ b/frontend/types/components.d.ts
@@ -16,6 +16,7 @@
  import InputQuantity from "@/components/global/InputQuantity.vue";
  import ToggleState from "@/components/global/ToggleState.vue";
  import AppButtonCopy from "@/components/global/AppButtonCopy.vue";
+ import CrudTable from "@/components/global/CrudTable.vue";
  import InputColor from "@/components/global/InputColor.vue";
  import BaseDivider from "@/components/global/BaseDivider.vue";
  import AutoForm from "@/components/global/AutoForm.vue";
@@ -49,6 +50,7 @@ declare module "vue" {
      InputQuantity: typeof InputQuantity;
      ToggleState: typeof ToggleState;
      AppButtonCopy: typeof AppButtonCopy;
+     CrudTable: typeof CrudTable;
      InputColor: typeof InputColor;
      BaseDivider: typeof BaseDivider;
      AutoForm: typeof AutoForm;
@@ -60,8 +62,8 @@ declare module "vue" {
      AppHeader: typeof AppHeader;
      AppSidebar: typeof AppSidebar;
      AppFooter: typeof AppFooter;
-    
+
   }
 }
 
-export {};
\ No newline at end of file
+export {};