refactor/page specific components to page folder

frontend/src/App.vue

@@ -9,7 +9,7 @@
       >
 
       <v-slide-x-reverse-transition>
-        <AddRecipeFab v-if="loggedIn" />
+        <TheRecipeFab v-if="loggedIn" />
       </v-slide-x-reverse-transition>
       <router-view></router-view>
     </v-main>
@@ -19,7 +19,7 @@
 
 <script>
 import TheAppBar from "@/components/UI/TheAppBar";
-import AddRecipeFab from "@/components/UI/AddRecipeFab";
+import TheRecipeFab from "@/components/UI/TheRecipeFab";
 import Vuetify from "./plugins/vuetify";
 import { user } from "@/mixins/user";
 
@@ -28,7 +28,7 @@ export default {
 
   components: {
     TheAppBar,
-    AddRecipeFab,
+    TheRecipeFab,
   },
 
   mixins: [user],

frontend/src/components/Debug/LastRecipe.vue

@@ -1,38 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title>Last Scrapped JSON Data</v-card-title>
-    <v-card-text>
-      <VJsoneditor
-        @error="logError()"
-        v-model="lastRecipeJson"
-        height="1500px"
-        :options="jsonEditorOptions"
-      />
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import VJsoneditor from "v-jsoneditor";
-import { api } from "@/api";
-export default {
-  components: { VJsoneditor },
-  data() {
-    return {
-      lastRecipeJson: {},
-      jsonEditorOptions: {
-        mode: "code",
-        search: false,
-        mainMenuBar: false,
-      },
-    };
-  },
-
-  async mounted() {
-    this.lastRecipeJson = await api.meta.getLastJson();
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/Debug/LogFile.vue

@@ -1,37 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title>Last Scrapped JSON Data</v-card-title>
-    <v-card-text>
-      <VJsoneditor
-        @error="logError()"
-        v-model="lastRecipeJson"
-        height="1500px"
-        :options="jsonEditorOptions"
-      />
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import VJsoneditor from "v-jsoneditor";
-export default {
-  components: { VJsoneditor },
-  data() {
-    return {
-      lastRecipeJson: "",
-      jsonEditorOptions: {
-        mode: "code",
-        search: false,
-        mainMenuBar: false,
-      },
-    };
-  },
-
-  async mounted() {
-    this.lastRecipeJson = "Hello \n 123 \n 567"
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/ImportSummaryDialog/index.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import DataTable from "@/components/Admin/Backup/ImportSummaryDialog/DataTable";
+import DataTable from "@/components/ImportSummaryDialog";
 export default {
   components: {
     DataTable,

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -31,11 +31,7 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <DatePicker 
+            <DatePicker v-model="startDate" no-title @input="menu2 = false" />
-              v-model="startDate"
-              no-title
-              @input="menu2 = false"
-              />
           </v-menu>
         </v-col>
         <v-col cols="12" lg="6" md="6" sm="12">
@@ -59,11 +55,7 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <DatePicker 
+            <DatePicker v-model="endDate" no-title @input="menu2 = false" />
-              v-model="endDate"
-              no-title
-              @input="menu2 = false"
-              />
           </v-menu>
         </v-col>
       </v-row>
@@ -87,7 +79,7 @@
 
 <script>
 const CREATE_EVENT = "created";
-import DatePicker from "../UI/DatePicker";
+import DatePicker from "@/components/FormHelpers/DatePicker";
 import { api } from "@/api";
 import utils from "@/utils";
 import MealPlanCard from "./MealPlanCard";

frontend/src/components/Recipe/EditorButtonRow.vue

@@ -7,9 +7,9 @@
       :extension-height="isSticky ? '20' : '0'"
       color="rgb(255, 0, 0, 0.0)"
     >
-      <Confirmation
+      <ConfirmationDialog
         :title="$t('recipe.delete-recipe')"
-        :message="$t('recipe.delete-confirmation')"
+        :message="$t('recipe.delete-ConfirmationDialog')"
         color="error"
         icon="mdi-alert-circle"
         ref="deleteRecipieConfirm"
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import Confirmation from "@/components/UI/Confirmation.vue";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
 
 export default {
   props: {
@@ -56,7 +56,7 @@ export default {
   },
 
   components: {
-    Confirmation,
+    ConfirmationDialog,
   },
   data() {
     return {

frontend/src/components/Recipe/RecipeEditor/ImageUploadBtn.vue

@@ -11,7 +11,7 @@
           <div>
             Recipe Image
           </div>
-          <UploadBtn
+          <TheUploadBtn
             class="ml-auto"
             url="none"
             file-name="image"
@@ -44,12 +44,12 @@
 <script>
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
-import UploadBtn from "@/components/UI/UploadBtn";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import { api } from "@/api";
 // import axios from "axios";
 export default {
   components: {
-    UploadBtn,
+    TheUploadBtn,
   },
   props: {
     slug: String,

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

@@ -8,7 +8,7 @@
     @keydown.esc="cancel"
   >
     <v-card>
-      <v-app-bar v-if="Boolean(title)" :color="color" dense flat 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>
@@ -36,13 +36,13 @@
 const CLOSE_EVENT = "close";
 const OPEN_EVENT = "open";
 /**
- * Confirmation Component used to add a second validaion step to an action.
+ * ConfirmationDialog Component used to add a second validaion step to an action.
  * @version 1.0.1
  * @author [zackbcom](https://github.com/zackbcom)
  * @since Version 1.0.0
  */
 export default {
-  name: "Confirmation",
+  name: "ConfirmationDialog",
   props: {
     /**
      * Message to be in body.

frontend/src/components/UI/SuccessFailureAlert.vue

@@ -1,66 +0,0 @@
-<template>
-  <v-dialog
-    v-model="dialog"
-    max-width="900px"
-    :fullscreen="$vuetify.breakpoint.xsOnly"
-  >
-    <v-card>
-      <v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly">
-        <v-btn icon dark @click="dialog = false">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-        <v-toolbar-title>{{ title }}</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-toolbar-items></v-toolbar-items>
-      </v-toolbar>
-      <v-card-title v-show="$vuetify.breakpoint.smAndUp">
-        {{ title }}
-      </v-card-title>
-      <v-card-text class="mt-3">
-        <v-row>
-          <v-col>
-            <v-alert outlined dense type="success">
-              <h4>{{ successHeader }}</h4>
-              <p v-for="success in this.success" :key="success" class="my-1">
-                - {{ success }}
-              </p>
-            </v-alert>
-          </v-col>
-          <v-col>
-            <v-alert v-if="failed[0]" outlined dense type="error">
-              <h4>{{ failedHeader }}</h4>
-              <p v-for="fail in this.failed" :key="fail" class="my-1">
-                - {{ fail }}
-              </p>
-            </v-alert>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script>
-export default {
-  props: {
-    title: String,
-    successHeader: String,
-    success: Array,
-    failedHeader: String,
-    failed: Array,
-  },
-  data() {
-    return {
-      dialog: false,
-    };
-  },
-  methods: {
-    open() {
-      this.dialog = true;
-    },
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/UI/TheAppBar.vue

@@ -35,7 +35,7 @@
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
 
-      <SiteMenu />
+      <TheSiteMenu />
     </v-app-bar>
     <v-app-bar
       v-else
@@ -67,13 +67,13 @@
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
 
-      <SiteMenu />
+      <TheSiteMenu />
     </v-app-bar>
   </div>
 </template>
 
 <script>
-import SiteMenu from "@/components/UI/SiteMenu";
+import TheSiteMenu from "@/components/UI/TheSiteMenu";
 import SearchBar from "@/components/UI/Search/SearchBar";
 import SearchDialog from "@/components/UI/Search/SearchDialog";
 import { user } from "@/mixins/user";
@@ -82,7 +82,7 @@ export default {
 
   mixins: [user],
   components: {
-    SiteMenu,
+    TheSiteMenu,
     SearchBar,
     SearchDialog,
   },

frontend/src/pages/Admin/About/index.vue

@@ -38,7 +38,7 @@
 
 <script>
 import { api } from "@/api";
-import TheDownloadBtn from "@/components/UI/TheDownloadBtn";
+import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn";
 export default {
   components: { TheDownloadBtn },
   data() {

frontend/src/pages/Admin/Backup/ImportDialog.vue

@@ -58,8 +58,8 @@
 
 
 <script>
-import ImportOptions from "@/components/Admin/Backup/ImportOptions";
+import ImportOptions from "./ImportOptions";
-import TheDownloadBtn from "@/components/UI/TheDownloadBtn.vue";
+import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn.vue";
 import { backupURLs } from "@/api/backup";
 export default {
   components: { ImportOptions, TheDownloadBtn },

frontend/src/pages/Admin/Backup/NewBackupCard.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import ImportOptions from "@/components/Admin/Backup/ImportOptions";
+import ImportOptions from "./ImportOptions";
 import { api } from "@/api";
 export default {
   components: { ImportOptions },

frontend/src/pages/Admin/Backup/index.vue

@@ -20,7 +20,7 @@
       <v-card-title class="mt-n6">
         {{ $t("settings.available-backups") }}
         <span>
-          <UploadBtn
+          <TheUploadBtn
             class="mt-1"
             url="/api/backups/upload"
             @uploaded="getAvailableBackups"
@@ -33,14 +33,7 @@
         @finished="processFinished"
         :backups="availableBackups"
       />
-      <SuccessFailureAlert
+
-        ref="report"
-        :title="$t('settings.backup.backup-restore-report')"
-        :success-header="$t('settings.backup.successfully-imported')"
-        :success="successfulImports"
-        :failed-header="$t('settings.backup.failed-imports')"
-        :failed="failedImports"
-      />
       <ImportSummaryDialog ref="report" :import-data="importData" />
     </v-card-text>
   </v-card>
@@ -48,16 +41,14 @@
 
 <script>
 import { api } from "@/api";
-import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
-import ImportSummaryDialog from "@/components/Admin/Backup/ImportSummaryDialog";
+import ImportSummaryDialog from "@/components/ImportSummaryDialog";
-import UploadBtn from "@/components/UI/UploadBtn";
+import AvailableBackupCard from "@/pages/Admin/Backup/AvailableBackupCard";
-import AvailableBackupCard from "@/components/Admin/Backup/AvailableBackupCard";
+import NewBackupCard from "@/pages/Admin/Backup/NewBackupCard";
-import NewBackupCard from "@/components/Admin/Backup/NewBackupCard";
 
 export default {
   components: {
-    SuccessFailureAlert,
+    TheUploadBtn,
-    UploadBtn,
     AvailableBackupCard,
     NewBackupCard,
     ImportSummaryDialog,

frontend/src/pages/Admin/ManageUsers/GroupCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Confirmation
+    <ConfirmationDialog
       ref="deleteGroupConfirm"
       :title="$t('user.confirm-group-deletion')"
       :message="
@@ -55,10 +55,10 @@
 
 <script>
 const RENDER_EVENT = "update";
-import Confirmation from "@/components/UI/Confirmation";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 export default {
-  components: { Confirmation },
+  components: { ConfirmationDialog },
   props: {
     group: {
       default: {

frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue

@@ -85,7 +85,7 @@
 <script>
 import { validators } from "@/mixins/validators";
 import { api } from "@/api";
-import GroupCard from "@/components/Admin/ManageUsers/GroupCard";
+import GroupCard from "./GroupCard";
 export default {
   components: { GroupCard },
   mixins: [validators],

frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card outlined class="mt-n1">
-    <Confirmation
+    <ConfirmationDialog
       ref="deleteUserDialog"
       :title="$t('user.confirm-link-deletion')"
       :message="
@@ -107,11 +107,11 @@
 </template>
 
 <script>
-import Confirmation from "@/components/UI/Confirmation";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
-  components: { Confirmation },
+  components: { ConfirmationDialog },
   mixins: [validators],
   data() {
     return {

frontend/src/pages/Admin/ManageUsers/TheUserTable.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card outlined class="mt-n1">
-    <Confirmation
+    <ConfirmationDialog
       ref="deleteUserDialog"
       :title="$t('user.confirm-user-deletion')"
       :message="
@@ -144,11 +144,11 @@
 </template>
 
 <script>
-import Confirmation from "@/components/UI/Confirmation";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
-  components: { Confirmation },
+  components: { ConfirmationDialog },
   mixins: [validators],
   data() {
     return {

frontend/src/pages/Admin/ManageUsers/index.vue

@@ -11,17 +11,17 @@
         <v-tabs-slider></v-tabs-slider>
 
         <v-tab>
-          {{$t('user.users')}}
+          {{ $t("user.users") }}
           <v-icon>mdi-account</v-icon>
         </v-tab>
 
         <v-tab>
-          {{$t('user.sign-up-links')}}
+          {{ $t("user.sign-up-links") }}
           <v-icon>mdi-account-plus-outline</v-icon>
         </v-tab>
 
         <v-tab>
-          {{$t('user.groups')}}
+          {{ $t("user.groups") }}
           <v-icon>mdi-account-group</v-icon>
         </v-tab>
       </v-tabs>
@@ -42,9 +42,9 @@
 </template>
 
 <script>
-import TheUserTable from "@/components/Admin/ManageUsers/TheUserTable";
+import TheUserTable from "./TheUserTable";
-import GroupDashboard from "@/components/Admin/ManageUsers/GroupDashboard";
+import GroupDashboard from "./GroupDashboard";
-import TheSignUpTable from "@/components/Admin/ManageUsers/TheSignUpTable";
+import TheSignUpTable from "./TheSignUpTable";
 export default {
   components: { TheUserTable, GroupDashboard, TheSignUpTable },
   data() {

frontend/src/pages/Admin/MealPlanner/index.vue

@@ -82,7 +82,7 @@
 
 <script>
 import { api } from "@/api";
-import TimePickerDialog from "@/components/Admin/MealPlanner/TimePickerDialog";
+import TimePickerDialog from "@/components/FormHelpers/TimePickerDialog";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
 export default {
   components: {

frontend/src/pages/Admin/Migration/MigrationCard.vue

@@ -5,7 +5,7 @@
       {{ title }}
       <v-spacer></v-spacer>
       <span>
-        <UploadBtn
+        <TheUploadBtn
           class="mt-1"
           :url="`/api/migrations/${folder}/upload`"
           fileName="archive"
@@ -66,10 +66,10 @@
 </template>
 
 <script>
-import UploadBtn from "../../UI/UploadBtn";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import utils from "@/utils";
 import { api } from "@/api";
-import MigrationDialog from "@/components/Admin/Migration/MigrationDialog.vue";
+import MigrationDialog from "./MigrationDialog";
 export default {
   props: {
     folder: String,
@@ -78,7 +78,7 @@ export default {
     available: Array,
   },
   components: {
-    UploadBtn,
+    TheUploadBtn,
     MigrationDialog,
   },
   data() {

frontend/src/pages/Admin/Migration/MigrationDialog.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import DataTable from "@/components/Admin/Backup/ImportSummaryDialog/DataTable";
+import DataTable from "@/components/ImportSummaryDialog";
 export default {
   components: {
     DataTable,

frontend/src/pages/Admin/Migration/index.vue

@@ -1,13 +1,5 @@
 <template>
   <div>
-    <SuccessFailureAlert
-      :title="$t('migration.migration-report')"
-      ref="report"
-      :failedHeader="$t('migration.failed-imports')"
-      :failed="failed"
-      :successHeader="$t('migration.successful-imports')"
-      :success="success"
-    />
     <v-card :loading="loading">
       <v-card-title class="headline">
         {{ $t("migration.recipe-migration") }}
@@ -42,13 +34,11 @@
 
 
 <script>
-import MigrationCard from "@/components/Admin/Migration/MigrationCard";
+import MigrationCard from "./MigrationCard";
-import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
 import { api } from "@/api";
 export default {
   components: {
     MigrationCard,
-    SuccessFailureAlert,
   },
   data() {
     return {

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

@@ -68,7 +68,7 @@
         </v-card-text>
 
         <v-card-actions>
-          <UploadBtn
+          <TheUploadBtn
             icon="mdi-image-area"
             :text="$t('user.upload-photo')"
             :url="userProfileImage"
@@ -145,13 +145,13 @@
 
 <script>
 // import AvatarPicker from '@/components/AvatarPicker'
-import UploadBtn from "@/components/UI/UploadBtn";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 import { initials } from "@/mixins/initials";
 export default {
   components: {
-    UploadBtn,
+    TheUploadBtn,
   },
   mixins: [validators, initials],
   data() {

frontend/src/pages/Admin/Settings/CustomPageCreator.vue

@@ -63,7 +63,7 @@
 
 <script>
 import draggable from "vuedraggable";
-import CreatePageDialog from "@/components/Admin/General/CreatePageDialog";
+import CreatePageDialog from "./CreatePageDialog";
 import { api } from "@/api";
 export default {
   components: {

frontend/src/pages/Admin/Settings/index.vue

@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import HomePageSettings from "@/components/Admin/General/HomePageSettings";
+import HomePageSettings from "./HomePageSettings";
-import CustomPageCreator from "@/components/Admin/General/CustomPageCreator";
+import CustomPageCreator from "./CustomPageCreator";
 
 export default {
   components: {

frontend/src/pages/Admin/Theme/ThemeCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Confirmation
+    <ConfirmationDialog
       :title="$t('settings.theme.delete-theme')"
       :message="$t('settings.theme.are-you-sure-you-want-to-delete-this-theme')"
       color="error"
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import Confirmation from "@/components/UI/Confirmation";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 
 const DELETE_EVENT = "delete";
@@ -52,7 +52,7 @@ const APPLY_EVENT = "apply";
 const EDIT_EVENT = "edit";
 export default {
   components: {
-    Confirmation,
+    ConfirmationDialog,
   },
   props: {
     theme: Object,

frontend/src/pages/Admin/Theme/index.vue

@@ -135,9 +135,9 @@
 
 <script>
 import { api } from "@/api";
-import ColorPickerDialog from "@/components/Admin/Theme/ColorPickerDialog";
+import ColorPickerDialog from "@/components/FormHelpers/ColorPickerDialog";
-import NewThemeDialog from "@/components/Admin/Theme/NewThemeDialog";
+import NewThemeDialog from "./NewThemeDialog";
-import ThemeCard from "@/components/Admin/Theme/ThemeCard";
+import ThemeCard from "./ThemeCard";
 
 export default {
   components: {