proper api imports

frontend/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

frontend/src/api/index.js

@@ -12,7 +12,7 @@ import signUps from "./signUps";
 import groups from "./groups";
 import siteSettings from "./siteSettings";
 
-export default {
+export const api = {
   recipes: recipe,
   siteSettings: siteSettings,
   backups: backup,

frontend/src/api/upload.js

@@ -1,7 +1,7 @@
 import { apiReq } from "./api-utils";
 
 export default {
-  // import api from "@/api";
+  // import { api } from "@/api";
   async uploadFile(url, fileObject) {
     let response = await apiReq.post(url, fileObject, {
       headers: {

frontend/src/components/Admin/AdminSidebar.vue

@@ -106,7 +106,7 @@
 import { validators } from "@/mixins/validators";
 import { initials } from "@/mixins/initials";
 import { user } from "@/mixins/user";
-import api from "@/api";
+import { api } from "@/api";
 import axios from "axios";
 export default {
   mixins: [validators, initials, user],

frontend/src/components/Admin/Backup/AvailableBackupCard.vue

@@ -39,7 +39,7 @@
 
 <script>
 import ImportDialog from "./ImportDialog";
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 export default {
   props: {

frontend/src/components/Admin/Backup/BackupCard.vue

@@ -38,7 +38,7 @@
 
 <script>
 import ImportDialog from "./ImportDialog";
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 export default {
   props: {

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

@@ -43,7 +43,7 @@
 
 <script>
 import ImportOptions from "@/components/Admin/Backup/ImportOptions";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   components: { ImportOptions },
   data() {

frontend/src/components/Admin/General/CreatePageDialog.vue

@@ -42,7 +42,7 @@
 
 <script>
 const NEW_PAGE_EVENT = "refresh-page";
-import api from "@/api";
+import { api } from "@/api";
 import CategorySelector from "@/components/FormHelpers/CategorySelector";
 export default {
   components: {

frontend/src/components/Admin/General/CustomPageCreator.vue

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

frontend/src/components/Admin/General/HomePageSettings.vue

@@ -129,7 +129,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import LanguageMenu from "@/components/UI/LanguageMenu";
 import draggable from "vuedraggable";
 

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

@@ -3,7 +3,11 @@
     <Confirmation
       ref="deleteGroupConfirm"
       :title="$t('user.confirm-group-deletion')"
-      :message="$t('user.are-you-sure-you-want-to-delete-the-group', { groupName:group.name })"
+      :message="
+        $t('user.are-you-sure-you-want-to-delete-the-group', {
+          groupName: group.name,
+        })
+      "
       icon="mdi-alert"
       @confirm="deleteGroup"
       :width="450"
@@ -13,7 +17,9 @@
       <v-list dense>
         <v-card-title class="py-1">{{ group.name }}</v-card-title>
         <v-divider></v-divider>
-        <v-subheader>{{ $t('user.group-id-with-value', { groupID: group.id }) }}</v-subheader>
+        <v-subheader>{{
+          $t("user.group-id-with-value", { groupID: group.id })
+        }}</v-subheader>
         <v-list-item-group color="primary">
           <v-list-item v-for="property in groupProps" :key="property.text">
             <v-list-item-icon>
@@ -36,11 +42,11 @@
           @click="confirmDelete"
           :disabled="ableToDelete"
         >
-          {{ $t('general.delete') }}
+          {{ $t("general.delete") }}
         </v-btn>
         <!-- Coming Soon! -->
         <v-btn small color="success" disabled>
-          {{ $t('general.edit') }}
+          {{ $t("general.edit") }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -50,7 +56,7 @@
 <script>
 const RENDER_EVENT = "update";
 import Confirmation from "@/components/UI/Confirmation";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   components: { Confirmation },
   props: {
@@ -94,22 +100,24 @@ export default {
     buildData() {
       this.groupProps = [
         {
-          text: this.$t('user.total-users'),
+          text: this.$t("user.total-users"),
           icon: "mdi-account",
           value: this.group.users.length,
         },
         {
-          text: this.$t('user.total-mealplans'),
+          text: this.$t("user.total-mealplans"),
           icon: "mdi-food",
           value: this.group.mealplans.length,
         },
         {
-          text: this.$t('user.webhooks-enabled'),
+          text: this.$t("user.webhooks-enabled"),
           icon: "mdi-webhook",
-          value: this.group.webhookEnable ? this.$t('general.yes') : this.$t('general.no'),
+          value: this.group.webhookEnable
+            ? this.$t("general.yes")
+            : this.$t("general.no"),
         },
         {
-          text: this.$t('user.webhook-time'),
+          text: this.$t("user.webhook-time"),
           icon: "mdi-clock-outline",
           value: this.group.webhookTime,
         },

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

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

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

@@ -111,7 +111,7 @@
 
 <script>
 import Confirmation from "@/components/UI/Confirmation";
-import api from "@/api";
+import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
   components: { Confirmation },

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

@@ -145,7 +145,7 @@
 
 <script>
 import Confirmation from "@/components/UI/Confirmation";
-import api from "@/api";
+import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
   components: { Confirmation },
@@ -274,7 +274,7 @@ export default {
     },
     resetPassword() {
       console.log(this.activeId);
-      api.users.resetPassword(this.editedItem.id );
+      api.users.resetPassword(this.editedItem.id);
     },
   },
 };

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

@@ -60,7 +60,7 @@
 <script>
 import UploadBtn from "../../UI/UploadBtn";
 import utils from "@/utils";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   props: {
     folder: String,

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

@@ -10,7 +10,10 @@
     />
     <v-card flat outlined class="ma-2">
       <v-card-text class="mb-n5 mt-n2">
-        <h3>{{ theme.name }} {{ current ? $t('general.current-parenthesis') : "" }}</h3>
+        <h3>
+          {{ theme.name }}
+          {{ current ? $t("general.current-parenthesis") : "" }}
+        </h3>
       </v-card-text>
       <v-card-text>
         <v-row flex align-center>
@@ -27,10 +30,14 @@
       </v-card-text>
       <v-divider></v-divider>
       <v-card-actions>
-        <v-btn text color="error" @click="confirmDelete"> {{$t('general.delete')}} </v-btn>
+        <v-btn text color="error" @click="confirmDelete">
+          {{ $t("general.delete") }}
+        </v-btn>
         <v-spacer></v-spacer>
         <!-- <v-btn text color="accent" @click="editTheme">Edit</v-btn> -->
-        <v-btn text color="success" @click="saveThemes">{{$t('general.apply')}}</v-btn>
+        <v-btn text color="success" @click="saveThemes">{{
+          $t("general.apply")
+        }}</v-btn>
       </v-card-actions>
     </v-card>
   </div>
@@ -38,7 +45,7 @@
 
 <script>
 import Confirmation from "@/components/UI/Confirmation";
-import api from "@/api";
+import { api } from "@/api";
 
 const DELETE_EVENT = "delete";
 const APPLY_EVENT = "apply";

frontend/src/components/Debug/LastRecipe.vue

@@ -14,7 +14,7 @@
 
 <script>
 import VJsoneditor from "v-jsoneditor";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   components: { VJsoneditor },
   data() {

frontend/src/components/Login/LoginForm.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 export default {
   props: {},
   data() {

frontend/src/components/Login/SignUpForm.vue

@@ -83,7 +83,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
   mixins: [validators],

frontend/src/components/MealPlan/MealPlanEditor.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 import MealPlanCard from "./MealPlanCard";
 export default {

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -83,7 +83,7 @@
 
 <script>
 const CREATE_EVENT = "created";
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 import MealPlanCard from "./MealPlanCard";
 export default {

frontend/src/components/MealPlan/ShoppingListDialog.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 const levenshtein = require("fast-levenshtein");
 export default {
   data() {

frontend/src/components/Recipe/EditorButtonRow.vue

@@ -21,7 +21,6 @@
           ref="deleteRecipieConfirm"
           v-on:confirm="deleteRecipe()"
         />
-
         <v-btn class="mr-2" fab dark small color="success" @click="save">
           <v-icon>mdi-content-save</v-icon>
         </v-btn>
@@ -37,7 +36,7 @@
 </template>
 
 <script>
-import Confirmation from "../../components/UI/Confirmation";
+import Confirmation from "../../components/UI/Confirmation.vue";
 
 export default {
   props: {
@@ -58,6 +57,7 @@ export default {
     save() {
       this.$emit("save");
     },
+
     deleteRecipeConfrim() {
       this.$refs.deleteRecipieConfirm.open();
     },

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

@@ -254,7 +254,7 @@
 
 <script>
 import draggable from "vuedraggable";
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 import BulkAdd from "./BulkAdd";
 import ExtrasEditor from "./ExtrasEditor";

frontend/src/components/UI/AddRecipeFab.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 
 export default {
   data() {

frontend/src/components/UI/CategorySidebar.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 export default {
   data() {
     return {

frontend/src/components/UI/UploadBtn.vue

@@ -10,7 +10,7 @@
 
 <script>
 const UPLOAD_EVENT = "uploaded";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   props: {
     url: String,

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

@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
 import ImportSummaryDialog from "@/components/Admin/Backup/ImportSummaryDialog";
 import UploadBtn from "@/components/UI/UploadBtn";

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

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

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

@@ -44,7 +44,7 @@
 <script>
 import MigrationCard from "@/components/Admin/Migration/MigrationCard";
 import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   components: {
     MigrationCard,

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

@@ -13,9 +13,9 @@
             >
             </v-progress-circular>
           </span>
-          {{$t('settings.profile')}}
+          {{ $t("settings.profile") }}
           <v-spacer></v-spacer>
-          {{$t('user.user-id-with-value', {id: user.id }) }}
+          {{ $t("user.user-id-with-value", { id: user.id }) }}
         </v-card-title>
         <v-divider></v-divider>
         <v-card-text>
@@ -86,7 +86,7 @@
     <v-col cols="12" md="4" sm="12">
       <v-card height="100%">
         <v-card-title class="headline">
-          {{$t('user.reset-password')}}
+          {{ $t("user.reset-password") }}
           <v-spacer></v-spacer>
         </v-card-title>
         <v-divider></v-divider>
@@ -114,7 +114,8 @@
               prepend-icon="mdi-lock"
               :label="$t('user.confirm-password')"
               :rules="[
-                password.newOne === password.newTwo || $t('user.password-must-match'),
+                password.newOne === password.newTwo ||
+                  $t('user.password-must-match'),
               ]"
               validate-on-blur
               :type="showPassword ? 'text' : 'password'"
@@ -145,7 +146,7 @@
 <script>
 // import AvatarPicker from '@/components/AvatarPicker'
 import UploadBtn from "@/components/UI/UploadBtn";
-import api from "@/api";
+import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 import { initials } from "@/mixins/initials";
 export default {

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

@@ -134,7 +134,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import ColorPickerDialog from "@/components/Admin/Theme/ColorPickerDialog";
 import NewThemeDialog from "@/components/Admin/Theme/NewThemeDialog";
 import ThemeCard from "@/components/Admin/Theme/ThemeCard";

frontend/src/pages/HomePage.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import CardSection from "../components/UI/CardSection";
 import CategorySidebar from "../components/UI/CategorySidebar";
 export default {
@@ -53,8 +53,8 @@ export default {
       await this.$store.dispatch("requestSiteSettings");
       this.siteSettings.categories.forEach(async element => {
         let recipes = await this.getRecipeByCategory(element.slug);
-        if (recipes.recipes.length < 0 ) recipes.recipes = []
-        console.log(recipes)
+        if (recipes.recipes.length < 0) recipes.recipes = [];
+        console.log(recipes);
         this.recipeByCategory.push(recipes);
       });
     },

frontend/src/pages/MealPlan/Planner.vue

@@ -85,7 +85,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 import NewMeal from "@/components/MealPlan/MealPlanNew";
 import EditPlan from "@/components/MealPlan/MealPlanEditor";

frontend/src/pages/MealPlan/ThisWeek.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 export default {
   data() {

frontend/src/pages/Recipe/NewRecipe.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 
 import RecipeEditor from "@/components/Recipe/RecipeEditor";
 import VJsoneditor from "v-jsoneditor";

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 import VJsoneditor from "v-jsoneditor";
 import RecipeViewer from "@/components/Recipe/RecipeViewer";

frontend/src/pages/Recipes/CategoryPage.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import CardSection from "@/components/UI/CardSection";
 import CategorySidebar from "@/components/UI/CategorySidebar";
 export default {

frontend/src/pages/Recipes/CustomPage.vue

@@ -33,7 +33,7 @@
 <script>
 import CardSection from "@/components/UI/CardSection";
 import CategorySidebar from "@/components/UI/CategorySidebar";
-import api from "@/api";
+import { api } from "@/api";
 
 export default {
   components: {

frontend/src/routes/index.js

@@ -11,7 +11,7 @@ import Debug from "@/pages/Debug";
 import LoginPage from "@/pages/LoginPage";
 import SignUpPage from "@/pages/SignUpPage";
 import ThisWeek from "@/pages/MealPlan/ThisWeek";
-import api from "@/api";
+import { api } from "@/api";
 import Admin from "./admin";
 import { store } from "../store";
 

frontend/src/store/index.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import api from "@/api";
+import { api } from "@/api";
 import createPersistedState from "vuex-persistedstate";
 import userSettings from "./modules/userSettings";
 import language from "./modules/language";

frontend/src/store/modules/groups.js

@@ -1,4 +1,4 @@
-import api from "@/api";
+import { api } from "@/api";
 
 const state = {
   groups: [],

frontend/src/store/modules/homePage.js

@@ -1,4 +1,4 @@
-import api from "@/api";
+import { api } from "@/api";
 
 const state = {
   showRecent: true,

frontend/src/store/modules/siteSettings.js

@@ -1,4 +1,4 @@
-import api from "@/api";
+import { api } from "@/api";
 
 const state = {
   siteSettings: {

frontend/src/store/modules/userSettings.js

@@ -1,4 +1,4 @@
-import api from "@/api";
+import { api } from "@/api";
 import Vuetify from "../../plugins/vuetify";
 import axios from "axios";