refactor(frontend): ♻️ split user profile/management (#670)

* refactor(frontend): ♻️ major rewrite/improvement of use-profile pages

* refactor(frontend): ♻️ split webhooks into their own page

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

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -102,9 +102,9 @@
 </template>
 
 <script>
-import { utils } from "@/utils";
 import RecipeCard from "./RecipeCard";
 import RecipeCardMobile from "./RecipeCardMobile";
+import { useSorter } from "~/composables/use-recipes";
 const SORT_EVENT = "sort";
 
 export default {
@@ -142,6 +142,11 @@ export default {
       default: () => [],
     },
   },
+  setup() {
+    const utils = useSorter();
+
+    return { utils };
+  },
   data() {
     return {
       sortLoading: false,
@@ -197,7 +202,7 @@ export default {
       this.loading = false;
     },
     navigateRandom() {
-      const recipe = utils.recipe.randomRecipe(this.recipes);
+      const recipe = this.utils.recipe.randomRecipe(this.recipes);
       this.$router.push(`/recipe/${recipe.slug}`);
     },
     sortRecipes(sortType) {
@@ -205,19 +210,19 @@ export default {
       const sortTarget = [...this.recipes];
       switch (sortType) {
         case this.EVENTS.az:
-          utils.recipe.sortAToZ(sortTarget);
+          this.utils.sortAToZ(sortTarget);
           break;
         case this.EVENTS.rating:
-          utils.recipe.sortByRating(sortTarget);
+          this.utils.sortByRating(sortTarget);
           break;
         case this.EVENTS.created:
-          utils.recipe.sortByCreated(sortTarget);
+          this.utils.sortByCreated(sortTarget);
           break;
         case this.EVENTS.updated:
-          utils.recipe.sortByUpdated(sortTarget);
+          this.utils.sortByUpdated(sortTarget);
           break;
         case this.EVENTS.shuffle:
-          utils.recipe.shuffle(sortTarget);
+          this.utils.shuffle(sortTarget);
           break;
         default:
           console.log("Unknown Event", sortType);

frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue

@@ -18,6 +18,7 @@
   >
     <template #selection="data">
       <v-chip
+        v-if="showSelected"
         :key="data.index"
         class="ma-1"
         :input-value="data.selected"
@@ -78,6 +79,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showSelected: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   setup() {

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -41,7 +41,6 @@
 </template>
 
 <script>
-import { utils } from "@/utils";
 import { defineComponent, ref } from "@nuxtjs/composition-api";
 import { useApiSingleton } from "~/composables/use-api";
 export default defineComponent({
@@ -203,7 +202,6 @@ export default defineComponent({
       navigator.clipboard.writeText(copyText).then(
         () => {
           console.log("Copied to Clipboard", copyText);
-          utils.notify.success("Copied to Clipboard");
         },
         () => console.log("Copied Failed", copyText)
       );

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -2,7 +2,7 @@
   <div v-if="value && value.length > 0">
     <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
     <div>
-      <div v-for="(ingredient, index) in value" :key="generateKey('ingredient', index)">
+      <div v-for="(ingredient, index) in value" :key="'ingredient' + index">
         <h3 v-if="showTitleEditor[index]" class="mt-2">{{ ingredient.title }}</h3>
         <v-divider v-if="showTitleEditor[index]"></v-divider>
         <v-list-item dense @click="toggleChecked(index)">
@@ -20,7 +20,6 @@
 <script>
 import VueMarkdown from "@adapttive/vue-markdown";
 import { useFraction } from "@/composables/use-fraction";
-import { utils } from "@/utils";
 export default {
   components: {
     VueMarkdown,
@@ -87,10 +86,6 @@ export default {
     this.showTitleEditor = this.value.map((x) => this.validateTitle(x.title));
   },
   methods: {
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
-
     toggleChecked(index) {
       this.$set(this.checked, index, !this.checked[index]);
     },

frontend/components/Domain/Recipe/RecipeInstructions.vue

@@ -88,7 +88,6 @@
 <script>
 import draggable from "vuedraggable";
 import VueMarkdown from "@adapttive/vue-markdown";
-import { utils } from "@/utils";
 export default {
   components: {
     VueMarkdown,
@@ -126,9 +125,6 @@ export default {
   },
 
   methods: {
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
     removeByIndex(list, index) {
       list.splice(index, 1);
     },

frontend/components/Domain/Recipe/RecipeNotes.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="value.length > 0 || edit">
     <h2 class="my-4">{{ $t("recipe.note") }}</h2>
-    <v-card v-for="(note, index) in value" :key="generateKey('note', index)" class="mt-1">
+    <v-card v-for="(note, index) in value" :key="'note' + index" class="mt-1">
       <div v-if="edit">
         <v-card-text>
           <v-row align="center">
@@ -35,7 +35,6 @@
 
 <script>
 import VueMarkdown from "@adapttive/vue-markdown";
-import { utils } from "@/utils";
 export default {
   components: {
     VueMarkdown,
@@ -52,9 +51,6 @@ export default {
     },
   },
   methods: {
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
     addNote() {
       this.value.push({ title: "", text: "" });
     },