backend-events + code-cleanup (#395)

* additional server events

* sort 'recent recipes' by updated

* remove duplicate code

* fixes #396

* set color

* consolidate tag/category pages

* set colors

* list unorganized recipes

* cleanup old code

* remove flash message, switch to global snackbar

* cancel to close

* cleanup

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

frontend/src/pages/Admin/Dashboard/BackupViewer.vue

@@ -12,7 +12,7 @@
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
           <h2 class="body-3 grey--text font-weight-light">
-            {{$t('settings.backup-and-exports')}}
+            {{ $t("settings.backup-and-exports") }}
           </h2>
 
           <h3 class="display-2 font-weight-light text--primary">
@@ -23,15 +23,15 @@
       <div class="d-flex row py-3 justify-end">
         <TheUploadBtn url="/api/backups/upload" @uploaded="getAvailableBackups">
           <template v-slot="{ isSelecting, onButtonClick }">
-            <v-btn :loading="isSelecting" class="mx-2" small :color="color" @click="onButtonClick">
-              <v-icon left> mdi-cloud-upload </v-icon> {{$t('general.upload')}}
+            <v-btn :loading="isSelecting" class="mx-2" small color="info" @click="onButtonClick">
+              <v-icon left> mdi-cloud-upload </v-icon> {{ $t("general.upload") }}
             </v-btn>
           </template>
         </TheUploadBtn>
         <BackupDialog :color="color" />
 
-        <v-btn :loading="loading" class="mx-2" small :color="color" @click="createBackup">
-          <v-icon left> mdi-plus </v-icon> {{$t('general.create')}}
+        <v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup">
+          <v-icon left> mdi-plus </v-icon> {{ $t("general.create") }}
         </v-btn>
       </div>
       <template v-slot:bottom>

frontend/src/pages/Admin/Dashboard/EventViewer.vue

@@ -4,7 +4,7 @@
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
           <h2 class="body-3 grey--text font-weight-light">
-            {{$t('settings.events')}}
+            {{ $t("settings.events") }}
           </h2>
 
           <h3 class="display-2 font-weight-light text--primary">
@@ -13,8 +13,8 @@
         </div>
       </template>
       <div class="d-flex row py-3 justify-end">
-        <v-btn class="mx-2" small :color="color" @click="deleteAll">
-          <v-icon left> mdi-notification-clear-all </v-icon> {{$t('general.clear')}}
+        <v-btn class="mx-2" small color="error lighten-1" @click="deleteAll">
+          <v-icon left> mdi-notification-clear-all </v-icon> {{ $t("general.clear") }}
         </v-btn>
       </div>
       <template v-slot:bottom>
@@ -69,7 +69,7 @@ export default {
           color: "primary",
         },
         backup: {
-          icon: "mdi-backup-restore",
+          icon: "mdi-database",
           color: "primary",
         },
         schedule: {
@@ -80,9 +80,13 @@ export default {
           icon: "mdi-database-import",
           color: "primary",
         },
-        signup: {
+        user: {
           icon: "mdi-account",
-          color: "primary",
+          color: "accent",
+        },
+        group: {
+          icon: "mdi-account-group-outline",
+          color: "accent",
         },
       },
     };

frontend/src/pages/Admin/Profile/ProfileThemeCard.vue

@@ -74,7 +74,7 @@
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer class="mx-2"></v-spacer>
-          <v-btn class="my-1 mb-n1" :color="color" @click="createTheme">
+          <v-btn class="my-1 mb-n1" color="success" @click="createTheme">
             <v-icon left> mdi-plus </v-icon> {{ $t("general.create") }}
           </v-btn>
         </v-card-actions>

frontend/src/pages/Admin/Profile/UserCard.vue

@@ -27,7 +27,7 @@
         :top="true"
       >
         <template v-slot:open="{ open }">
-          <v-btn color="primary" class="mr-1" small @click="open">
+          <v-btn color="info" class="mr-1" small @click="open">
             <v-icon left>mdi-lock</v-icon>
             Change Password
           </v-btn>
@@ -99,7 +99,6 @@
 </template>
 
 <script>
-
 import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
 import StatCard from "@/components/UI/StatCard";
 import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";

frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue

@@ -1,9 +1,10 @@
 <template>
   <v-card outlined class="mt-n1">
-    <base-dialog
+    <BaseDialog
       ref="renameDialog"
       title-icon="mdi-tag"
       :title="renameTarget.title"
+      :submit-text="$t('general.update')"
       modal-width="800"
       @submit="renameFromDialog(renameTarget.slug, renameTarget.newName)"
     >
@@ -32,7 +33,7 @@
           :tags="recipe.tags"
         />
       </template>
-    </base-dialog>
+    </BaseDialog>
 
     <div class="d-flex justify-center align-center pa-2 flex-wrap">
       <new-category-tag-dialog ref="newDialog" :tag-dialog="isTags">

frontend/src/pages/Admin/ToolBox/RecipeOrganizer.vue

@@ -13,38 +13,45 @@
         </v-btn>
       </v-btn-toggle>
       <v-spacer v-if="!isMobile"> </v-spacer>
-
-      <FuseSearchBar :raw-data="allItems" @results="filterItems" :search="searchString">
-        <v-text-field
-          v-model="searchString"
-          clearable
-          solo
-          dense
-          class="mx-2"
-          hide-details
-          single-line
-          :placeholder="$t('search.search')"
-          prepend-inner-icon="mdi-magnify"
-        >
-        </v-text-field>
-      </FuseSearchBar>
     </div>
+    <v-card-text>
+      <CardSection :sortable="true" title="Unorganized" :recipes="shownRecipes" @sort="assignSorted" />
+    </v-card-text>
   </v-card>
 </template>
 
 <script>
-import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
+import { api } from "@/api";
+import CardSection from "@/components/UI/CardSection";
 export default {
-  components: { FuseSearchBar },
+  components: {
+    // FuseSearchBar,
+    CardSection,
+  },
   data() {
     return {
       buttonToggle: 0,
-      allItems: [],
+      tagRecipes: [],
+      categoryRecipes: [],
       searchString: "",
-      searchResults: [],
+      sortedResults: [],
     };
   },
   computed: {
+    shownRecipes() {
+      if (this.sortedResults.length > 0) {
+        return this.sortedResults;
+      } else {
+        switch (this.filter) {
+          case "category":
+            return this.categoryRecipes;
+          case "tag":
+            return this.tagRecipes;
+          default:
+            return [];
+        }
+      }
+    },
     isMobile() {
       return this.$vuetify.breakpoint.name === "xs";
     },
@@ -60,10 +67,22 @@ export default {
       },
     },
   },
+  mounted() {
+    this.refreshUnorganized();
+  },
   methods: {
     filterItems(val) {
       this.searchResults = val.map(x => x.item);
     },
+    async refreshUnorganized() {
+      this.loading = true;
+      this.tagRecipes = await api.recipes.allUntagged();
+      this.categoryRecipes = await api.recipes.allUnategorized();
+      this.loading = false;
+    },
+    assignSorted(val) {
+      this.sortedResults = val;
+    },
   },
 };
 </script>