Feature/group based notifications (#918)

* fix group page

* setup group notification for backend

* update type generators

* script to auto-generate schema exports

* setup frontend CRUD interface

* remove old notifications UI

* drop old events api

* add test functionality

* update naming for fields

* add event dispatcher functionality

* bump to python 3.10

* bump python version

* purge old event code

* use-async apprise

* set mealie logo as image

* unify styles for buttons rows

* add links to banners

frontend/components/Domain/Recipe/RecipeInstructions.vue

@@ -107,19 +107,43 @@
 
               {{ $t("recipe.step-index", { step: index + 1 }) }}
 
-              <div class="ml-auto">
-                <BaseOverflowButton
-                  v-if="edit"
-                  small
-                  mode="event"
-                  :items="actionEvents || []"
-                  @merge-above="mergeAbove(index - 1, index)"
-                  @toggle-section="toggleShowTitle(step.id)"
-                  @link-ingredients="openDialog(index, step.ingredientReferences, step.text)"
-                >
-                </BaseOverflowButton>
-              </div>
-              <v-icon v-if="edit" class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
+              <template v-if="edit">
+                <v-icon class="handle ml-auto mr-2">{{ $globals.icons.arrowUpDown }}</v-icon>
+                <div>
+                  <BaseButtonGroup
+                    :buttons="[
+                      {
+                        icon: $globals.icons.dotsVertical,
+                        text: $t('general.delete'),
+                        children: [
+                          {
+                            text: 'Toggle Section',
+                            event: 'toggle-section',
+                          },
+                          {
+                            text: 'Link Ingredients',
+                            event: 'link-ingredients',
+                          },
+                          {
+                            text: 'Merge Above',
+                            event: 'merge-above',
+                          },
+                        ],
+                      },
+                      {
+                        icon: previewStates[index] ? $globals.icons.edit : $globals.icons.eye,
+                        text: previewStates[index] ? $t('general.edit') : 'Preview Markdown',
+                        event: 'preview-step',
+                      },
+                    ]"
+                    @merge-above="mergeAbove(index - 1, index)"
+                    @toggle-section="toggleShowTitle(step.id)"
+                    @link-ingredients="openDialog(index, step.ingredientReferences, step.text)"
+                    @preview-step="togglePreviewState(index)"
+                  />
+                </div>
+              </template>
+
               <v-fade-transition>
                 <v-icon v-show="isChecked(index)" size="24" class="ml-auto" color="success">
                   {{ $globals.icons.checkboxMarkedCircle }}
@@ -127,7 +151,11 @@
               </v-fade-transition>
             </v-card-title>
             <v-card-text v-if="edit">
-              <MarkdownEditor v-model="value[index]['text']" />
+              <MarkdownEditor
+                v-model="value[index]['text']"
+                :preview.sync="previewStates[index]"
+                :display-preview="false"
+              />
               <div
                 v-for="ing in step.ingredientReferences"
                 :key="ing.referenceId"
@@ -410,7 +438,17 @@ export default defineComponent({
       }
     }
 
+    const previewStates = ref<boolean[]>([]);
+
+    function togglePreviewState(index: number) {
+      const temp = [...previewStates.value];
+      temp[index] = !temp[index];
+      previewStates.value = temp;
+    }
+
     return {
+      togglePreviewState,
+      previewStates,
       ...toRefs(state),
       actionEvents,
       activeRefs,

frontend/components/Domain/User/UserProfileLinkCard.vue

@@ -1,9 +1,9 @@
 <template>
   <v-card outlined nuxt :to="link.to" height="100%" class="d-flex flex-column">
     <div v-if="$vuetify.breakpoint.smAndDown" class="pa-2 mx-auto">
-      <v-img max-width="150px" max-height="125" :src="image"></v-img>
+      <v-img max-width="150px" max-height="125" :src="image" />
     </div>
-    <div class="d-flex align-center justify-space-between">
+    <div class="d-flex justify-space-between">
       <div>
         <v-card-title class="headline pb-0">
           <slot name="title"> </slot>
@@ -14,7 +14,7 @@
           </v-card-text>
         </div>
       </div>
-      <div v-if="$vuetify.breakpoint.mdAndUp" class="px-10">
+      <div v-if="$vuetify.breakpoint.mdAndUp" class="py-2 px-10 my-auto">
         <v-img max-width="150px" max-height="125" :src="image"></v-img>
       </div>
     </div>

frontend/components/Layout/AppSidebar.vue

@@ -189,7 +189,7 @@ export default defineComponent({
     return {
       ...toRefs(state),
       drawer,
-    }
+    };
   },
 });
 </script>

frontend/components/global/BannerExperimental.vue

@@ -2,5 +2,21 @@
   <v-alert border="left" colored-border type="warning" elevation="2" :icon="$globals.icons.alert">
     <b>Experimental Feature</b>
     <div>This page contains experimental or still-baking features. Please excuse the mess.</div>
+    <div v-if="issue != ''" class="py-2">
+      <a :href="issue" target="_blank"> Track our progress here</a>
+    </div>
   </v-alert>
 </template>
+
+
+<script lang="ts">
+export default {
+  props: {
+    issue: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+};
+</script>

frontend/components/global/MarkdownEditor.vue

@@ -1,17 +1,19 @@
 <template>
   <div>
-    <v-tabs v-model="tab" height="30px" class="my-1">
-      <v-tab>
-        <v-icon small left> {{ $globals.icons.edit }}</v-icon>
-        Edit
-      </v-tab>
-      <v-tab>
-        <v-icon small left> {{ $globals.icons.eye }}</v-icon>
-        Preview
-      </v-tab>
-    </v-tabs>
+    <div v-if="displayPreview" class="d-flex justify-end">
+      <BaseButtonGroup
+        :buttons="[
+          {
+            icon: previewState ? $globals.icons.edit : $globals.icons.eye,
+            text: previewState ? $t('general.edit') : 'Preview Markdown',
+            event: 'toggle',
+          },
+        ]"
+        @toggle="previewState = !previewState"
+      />
+    </div>
     <v-textarea
-      v-if="tab == 0"
+      v-if="!previewState"
       v-model="inputVal"
       :class="label == '' ? '' : 'mt-5'"
       :label="label"
@@ -27,7 +29,7 @@
 // @ts-ignore
 import VueMarkdown from "@adapttive/vue-markdown";
 
-import { defineComponent, reactive, toRefs, computed } from "@nuxtjs/composition-api";
+import { defineComponent, computed, ref } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   name: "MarkdownEditor",
@@ -43,10 +45,28 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    preview: {
+      type: Boolean,
+      default: undefined,
+    },
+    displayPreview: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup(props, context) {
-    const state = reactive({
-      tab: 0,
+    const fallbackPreview = ref(false);
+    const previewState = computed({
+      get: () => {
+        return props.preview ?? fallbackPreview.value;
+      },
+      set: (val) => {
+        if (props.preview) {
+          context.emit("input:preview", val);
+        } else {
+          fallbackPreview.value = val;
+        }
+      },
     });
 
     const inputVal = computed({
@@ -58,10 +78,11 @@ export default defineComponent({
       },
     });
     return {
+      previewState,
       inputVal,
-      ...toRefs(state),
     };
   },
 });
 </script>
 
+