feature/recipe-patch-improvements (#382)

* automated docs update

* recipe rating component

* recipe partial updates - closes #25

* use Vue.delete to update store

* format

* arrow functions

* fix tests

* format

* initial context menu

* localize

* add confirmation dialog

* context menu

* fix bare exception

* update line length

* format all file with prettier

* update changelog

* download as json

* update python dependencies

* update javascript dependencies

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

frontend/src/components/UI/Dialogs/BaseDialog.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
     <slot name="open" v-bind="{ open }"> </slot>
-    <v-dialog
-      v-model="dialog"
-      :width="modalWidth + 'px'"
-      :content-class="top ? 'top-dialog' : undefined"
-    >
+    <v-dialog v-model="dialog" :width="modalWidth + 'px'" :content-class="top ? 'top-dialog' : undefined">
       <v-card class="pb-10" height="100%">
         <v-app-bar dark :color="color" class="mt-n1 mb-2">
           <v-icon large left>
@@ -14,20 +10,16 @@
           <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
           <v-spacer></v-spacer>
         </v-app-bar>
-        <v-progress-linear
-          v-if="loading"
-          indeterminate
-          color="primary"
-        ></v-progress-linear>
+        <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
         <slot> </slot>
         <v-card-actions>
           <slot name="card-actions">
             <v-btn text color="grey" @click="dialog = false">
-              {{$t('general.cancel')}}
+              {{ $t("general.cancel") }}
             </v-btn>
             <v-spacer></v-spacer>
             <v-btn color="success" @click="submitEvent">
-              {{$t('general.submit')}}
+              {{ $t("general.submit") }}
             </v-btn>
           </slot>
         </v-card-actions>
@@ -84,4 +76,4 @@ export default {
 .top-dialog {
   align-self: flex-start;
 }
-</style>
+</style>

frontend/src/components/UI/Dialogs/ConfirmationDialog.vue

@@ -1,4 +1,3 @@
-
 <template>
   <v-dialog
     v-model="dialog"
@@ -7,17 +6,16 @@
     @click:outside="cancel"
     @keydown.esc="cancel"
   >
+    <template v-slot:activator="{}">
+      <slot v-bind="{ open }"> </slot>
+    </template>
     <v-card>
-      <v-app-bar v-if="Boolean(title)" :color="color" dense  dark>
+      <v-app-bar v-if="Boolean(title)" :color="color" dense dark>
         <v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
         <v-toolbar-title v-text="title" />
       </v-app-bar>
 
-      <v-card-text
-        v-show="!!message"
-        class="pa-4 text--primary"
-        v-html="message"
-      />
+      <v-card-text v-show="!!message" class="pa-4 text--primary" v-html="message" />
 
       <v-card-actions>
         <v-spacer></v-spacer>
@@ -35,6 +33,7 @@
 <script>
 const CLOSE_EVENT = "close";
 const OPEN_EVENT = "open";
+const CONFIRM_EVENT = "confirm";
 /**
  * ConfirmationDialog Component used to add a second validaion step to an action.
  * @version 1.0.1
@@ -96,13 +95,9 @@ export default {
     dialog: false,
   }),
   methods: {
-    /**
-     * Sets the modal to be visiable.
-     */
     open() {
       this.dialog = true;
     },
-
     /**
      * Cancel button handler.
      */
@@ -129,7 +124,7 @@ export default {
        * @event confirm
        * @property {string} content content of the first prop passed to the event
        */
-      this.$emit("confirm");
+      this.$emit(CONFIRM_EVENT);
 
       //Hide Modal
       this.dialog = false;
@@ -138,5 +133,4 @@ export default {
 };
 </script>
 
-<style>
-</style>
+<style></style>

frontend/src/components/UI/Dialogs/NewCategoryTagDialog.vue

@@ -21,12 +21,7 @@
         <v-card-title> </v-card-title>
         <v-form @submit.prevent="select">
           <v-card-text>
-            <v-text-field
-              dense
-              :label="inputLabel"
-              v-model="itemName"
-              :rules="[rules.required]"
-            ></v-text-field>
+            <v-text-field dense :label="inputLabel" v-model="itemName" :rules="[rules.required]"></v-text-field>
           </v-card-text>
           <v-card-actions>
             <v-spacer></v-spacer>
@@ -103,5 +98,4 @@ export default {
 };
 </script>
 
-<style>
-</style>
+<style></style>