Reorganize Group/User Page Routes (#1084)

* Consolidate group routes

* Update doc migration link

frontend/pages/group/webhooks.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-webhooks.svg')"></v-img>
+      </template>
+      <template #title> Webhooks </template>
+      The webhooks defined below will be executed when a meal is defined for the day. At the scheduled time the webhooks
+      will be sent with the data from the recipe that is scheduled for the day
+    </BasePageTitle>
+
+    <BaseButton create @click="actions.createOne()" />
+    <v-expansion-panels class="mt-2">
+      <v-expansion-panel v-for="(webhook, index) in webhooks" :key="index" class="my-2 left-border rounded">
+        <v-expansion-panel-header disable-icon-rotate class="headline">
+          <div class="d-flex align-center">
+            <v-icon large left :color="webhook.enabled ? 'info' : null">
+              {{ $globals.icons.webhook }}
+            </v-icon>
+            {{ webhook.name }} - {{ webhook.time }}
+          </div>
+          <template #actions>
+            <v-btn small icon class="ml-2">
+              <v-icon>
+                {{ $globals.icons.edit }}
+              </v-icon>
+            </v-btn>
+          </template>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-card-text>
+            <v-switch v-model="webhook.enabled" label="Enabled"></v-switch>
+            <v-text-field v-model="webhook.name" label="Webhook Name"></v-text-field>
+            <v-text-field v-model="webhook.url" label="Webhook Url"></v-text-field>
+            <v-time-picker v-model="webhook.time" class="elevation-2" ampm-in-title format="ampm"></v-time-picker>
+          </v-card-text>
+          <v-card-actions class="py-0 justify-end">
+            <BaseButtonGroup
+              :buttons="[
+                {
+                  icon: $globals.icons.delete,
+                  text: $t('general.delete'),
+                  event: 'delete',
+                },
+                {
+                  icon: $globals.icons.testTube,
+                  text: $t('general.test'),
+                  event: 'test',
+                },
+                {
+                  icon: $globals.icons.save,
+                  text: $t('general.save'),
+                  event: 'save',
+                },
+              ]"
+              @delete="actions.deleteOne(webhook.id)"
+              @save="actions.updateOne(webhook)"
+            />
+          </v-card-actions>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import { useGroupWebhooks } from "~/composables/use-group-webhooks";
+
+export default defineComponent({
+  setup() {
+    const { actions, webhooks } = useGroupWebhooks();
+
+    return {
+      webhooks,
+      actions,
+    };
+  },
+  head() {
+    return {
+      title: this.$t("settings.webhooks.webhooks") as string,
+    };
+  },
+});
+</script>