updated Vue2 pages to work with drf_spectacular schemas

vue/src/apps/CookbookView/CookbookView.vue

@@ -154,10 +154,9 @@ export default {
     },
     methods: {
         refreshData: function () {
-            let apiClient = new ApiApiFactory()
             
-            apiClient.listRecipeBooks().then((result) => {
-                this.cookbooks = result.data
+            this.genericAPI(this.Models.RECIPE_BOOK, this.Actions.LIST).then((result) => {
+                this.cookbooks = result.data.results
             })
         },
         openBook: function (book, keepopen = false) {
@@ -174,8 +173,8 @@ export default {
                 return b.id == book
             })[0]
 
-            apiClient.listRecipeBookEntrys({ query: { book: book } }).then((result) => {
-                this.recipes = result.data
+            this.genericAPI(this.Models.RECIPE_BOOK_ENTRY, this.Actions.LIST, { book: book }).then((result) => {
+                this.recipes = result.data.results
                 if (book_contents.filter) this.appendRecipeFilter(1, book_contents)
                 this.loading = false
             })
@@ -214,15 +213,14 @@ export default {
             })
         },
         orderBy: function(order_field,order_direction){
-            let apiClient = new ApiApiFactory()
             const options = {
                 order_field: order_field,
                 order_direction: order_direction
             }
             this.activeSortField = order_field
             this.activeSortDirection = order_direction
-            apiClient.listRecipeBooks(options).then((result) => {
-                this.cookbooks = result.data
+            this.genericAPI(this.Models.RECIPE_BOOK, this.Actions.LIST, options).then((result) => {
+                this.cookbooks = result.data.results
             })
         },
         isActiveSort: function(field, direction) {

vue/src/apps/IngredientEditorView/IngredientEditorView.vue

@@ -240,15 +240,14 @@ export default {
                 this.ingredients = []
             } else {
                 this.loading = true
-                let apiClient = new ApiApiFactory()
-                let params = {'query': {'simple': 1,}}
+                let params = {'page': this.current_page, 'pageSize': this.page_size, 'query': {'simple': 1,}}
                 if (this.food !== null) {
-                    params.query.food = this.food.id
+                    params.food = this.food.id
                 }
                 if (this.unit !== null) {
-                    params.query.unit = this.unit.id
+                    params.unit = this.unit.id
                 }
-                apiClient.listIngredients(this.current_page, this.page_size, params).then(result => {
+                this.genericAPI(this.Models.INGREDIENT, this.Actions.LIST, params).then(result => {
                     this.ingredients = result.data.results
                     this.total_object_count = result.data.count
                     this.loading = false

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -249,7 +249,7 @@ import moment from "moment"
 import draggable from "vuedraggable"
 import VueCookies from "vue-cookies"
 
-import {ApiMixin, StandardToasts, ResolveUrlMixin} from "@/utils/utils"
+import {ApiMixin, StandardToasts, ResolveUrlMixin, resolveDjangoUrl} from "@/utils/utils"
 import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle"
 import {ApiApiFactory} from "@/utils/openapi/api"
 import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
@@ -317,7 +317,6 @@ export default {
             current_period: null,
             entryEditing: null,
             mealplan_default_date: null,
-            ical_url: window.ICAL_URL,
             image_placeholder: window.IMAGE_PLACEHOLDER,
         }
     },
@@ -350,7 +349,7 @@ export default {
             if (this.current_period !== null) {
                 let start = moment(this.current_period.periodStart).format("YYYY-MM-DD")
                 let end = moment(this.current_period.periodEnd).format("YYYY-MM-DD")
-                return this.ical_url.replace(/12345/, start).replace(/6789/, end)
+                return this.resolveDjangoUrl('api:mealplan-ical', start, end)
             } else {
                 return ""
             }
@@ -561,10 +560,10 @@ export default {
             let apiClient = new ApiApiFactory()
 
             apiClient.listMealTypes().then((result) => {
-                result.data.forEach((meal_type) => {
+                result.data.results.forEach((meal_type) => {
                     meal_type.editing = false
                 })
-                this.meal_types = result.data
+                this.meal_types = result.data.results
             })
         },
         saveEntry(entry) {

vue/src/apps/PropertyEditorView/PropertyEditorView.vue

@@ -195,7 +195,7 @@ export default {
             let apiClient = new ApiApiFactory()
 
             apiClient.listPropertyTypes().then(result => {
-                this.property_types = result.data
+                this.property_types = result.data.results
 
                 apiClient.retrieveRecipe(window.RECIPE_ID).then(result => {
                     this.recipe = result.data

vue/src/apps/SpaceManageView/SpaceManageView.vue

@@ -325,7 +325,7 @@ export default {
         apiFactory.retrieveSpace(window.ACTIVE_SPACE_ID).then(r => {
             this.space = r.data
         })
-        apiFactory.listUserSpaces(1, 25).then(r => { //TODO build proper pagination
+        apiFactory.listUserSpaces(undefined, 1, 25).then(r => { //TODO build proper pagination
             this.user_spaces = r.data.results
         })
         this.loadInviteLinks()

vue/src/components/AddRecipeToBook.vue

@@ -1,118 +0,0 @@
-<template>
-    <div>
-        <b-modal class="modal" :id="`id_modal_add_book_${modal_id}`" :title="$t('Manage_Books')" :ok-title="$t('Add')" :cancel-title="$t('Close')" @ok="addToBook()" @shown="loadBookEntries">
-            <ul class="list-group">
-                <li class="list-group-item d-flex justify-content-between align-items-center" v-for="be in this.recipe_book_list" v-bind:key="be.id">
-                    {{ be.book_content.name }} <span class="btn btn-sm btn-danger" @click="removeFromBook(be)"><i class="fa fa-trash-alt"></i></span>
-                </li>
-            </ul>
-
-            <multiselect
-                style="margin-top: 1vh"
-                v-model="selected_book"
-                :options="books_filtered"
-                :taggable="true"
-                @tag="createBook"
-                v-bind:tag-placeholder="$t('Create')"
-                :placeholder="$t('Select_Book')"
-                label="name"
-                track-by="id"
-                id="id_books"
-                :multiple="false"
-                :internal-search="false"
-                :loading="books_loading"
-                @search-change="loadBooks"
-            >
-            </multiselect>
-        </b-modal>
-    </div>
-</template>
-
-<script>
-import Multiselect from "vue-multiselect"
-
-import moment from "moment"
-
-Vue.prototype.moment = moment
-
-import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
-import { ApiApiFactory } from "@/utils/openapi/api"
-import { makeStandardToast, StandardToasts } from "@/utils/utils"
-
-Vue.use(BootstrapVue)
-
-export default {
-    name: "AddRecipeToBook",
-    components: {
-        Multiselect,
-    },
-    props: {
-        recipe: Object,
-        modal_id: Number,
-    },
-    data() {
-        return {
-            books: [],
-            books_loading: false,
-            recipe_book_list: [],
-            selected_book: null,
-        }
-    },
-    computed: {
-        books_filtered: function () {
-            let books_filtered = []
-
-            this.books.forEach((b) => {
-                if (this.recipe_book_list.filter((e) => e.book === b.id).length === 0) {
-                    books_filtered.push(b)
-                }
-            })
-
-            return books_filtered
-        },
-    },
-    mounted() {},
-    methods: {
-        loadBooks: function (query) {
-            this.books_loading = true
-            let apiFactory = new ApiApiFactory()
-            apiFactory.listRecipeBooks({ query: { query: query } }).then((results) => {
-                this.books = results.data.filter((e) => this.recipe_book_list.indexOf(e) === -1)
-                this.books_loading = false
-            })
-        },
-        createBook: function (name) {
-            let apiFactory = new ApiApiFactory()
-            apiFactory.createRecipeBook({ name: name }).then((r) => {
-                this.books.push(r.data)
-                this.selected_book = r.data
-                StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE)
-            })
-        },
-        addToBook: function () {
-            let apiFactory = new ApiApiFactory()
-            apiFactory.createRecipeBookEntry({ book: this.selected_book.id, recipe: this.recipe.id }).then((r) => {
-                this.recipe_book_list.push(r.data)
-                StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE)
-            })
-        },
-        removeFromBook: function (book_entry) {
-            let apiFactory = new ApiApiFactory()
-            apiFactory.destroyRecipeBookEntry(book_entry.id).then((r) => {
-                this.recipe_book_list = this.recipe_book_list.filter((e) => e.id !== book_entry.id)
-                StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE)
-            })
-        },
-        loadBookEntries: function () {
-            let apiFactory = new ApiApiFactory()
-            apiFactory.listRecipeBookEntrys({ query: { recipe: this.recipe.id } }).then((r) => {
-                this.recipe_book_list = r.data
-                this.loadBooks("")
-            })
-        },
-    },
-}
-</script>
-
-<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

vue/src/components/AutoMealPlanModal.vue

@@ -191,7 +191,7 @@ export default {
             let apiClient = new ApiApiFactory()
 
             Promise.resolve(apiClient.listMealTypes().then((result) => {
-                result.data.forEach((meal_type) => {
+                result.data.results.forEach((meal_type) => {
                     meal_type.editing = false
                 })
                 this.AutoPlan.meal_types = result.data

vue/src/components/FoodEditor.vue

@@ -384,7 +384,7 @@ export default {
         addAllProperties: function () {
             let apiClient = new ApiApiFactory()
             apiClient.listPropertyTypes().then(r => {
-                r.data.forEach(x => {
+                r.data.results.forEach(x => {
                     this.food.properties.push({property_type: x, property_amount: 0})
                 })
             }).catch(err => {
@@ -400,7 +400,7 @@ export default {
         loadUnitConversions: function () {
             let apiClient = new ApiApiFactory()
             apiClient.listUnitConversions(this.food.id).then(r => {
-                this.unit_conversions = r.data
+                this.unit_conversions = r.data.results
             })
         },
         addUnitConversion: function () {

vue/src/components/Modals/AddRecipeToBook.vue

@@ -39,12 +39,13 @@ Vue.prototype.moment = moment
 import Vue from "vue";
 import {BootstrapVue} from "bootstrap-vue";
 import {ApiApiFactory} from "@/utils/openapi/api";
-import {makeStandardToast, StandardToasts} from "@/utils/utils";
+import {makeStandardToast, StandardToasts, ApiMixin} from "@/utils/utils";
 
 Vue.use(BootstrapVue)
 
 export default {
   name: 'AddRecipeToBook',
+  mixins: [ApiMixin],
   components: {
     Multiselect
   },
@@ -79,9 +80,8 @@ export default {
   methods: {
     loadBooks: function (query) {
       this.books_loading = true
-      let apiFactory = new ApiApiFactory()
-      apiFactory.listRecipeBooks({query: {query: query}}).then(results => {
-        this.books = results.data.filter(e => this.recipe_book_list.indexOf(e) === -1)
+      this.genericAPI(this.Models.RECIPE_BOOK, this.Actions.LIST, {'query': query}).then(results => {
+        this.books = results.data.results.filter(e => this.recipe_book_list.indexOf(e) === -1)
         this.books_loading = false
       })
     },
@@ -111,9 +111,8 @@ export default {
     },
     loadBookEntries: function () {
 
-      let apiFactory = new ApiApiFactory()
-      apiFactory.listRecipeBookEntrys({query: {recipe: this.recipe.id}}).then(r => {
-        this.recipe_book_list = r.data
+      this.genericAPI(this.Models.RECIPE_BOOK_ENTRY, this.Actions.LIST, {recipe: this.recipe.id}).then(r => {
+        this.recipe_book_list = r.data.results
         this.loadBooks('')
       })
     }

vue/src/components/Settings/MealPlanSettingsComponent.vue

@@ -4,7 +4,7 @@
         <b-form-group :label="$t('Share')" :description="$t('plan_share_desc')">
             <generic-multiselect
                 @change="user_preferences.plan_share = $event.val;updateSettings(false)"
-                :model="Models.USER"
+                :model="Models.USER_NAME"
                 :initial_selection="user_preferences.plan_share"
                 label="display_name"
                 :multiple="true"
@@ -125,7 +125,7 @@ export default {
         this.loadSettings()
 
         this.settings = useMealPlanStore().client_settings
-        
+
 
         this.loadMealTypes()
     },
@@ -159,7 +159,7 @@ export default {
         loadMealTypes: function () {
             let apiClient = new ApiApiFactory()
             apiClient.listMealTypes().then(result => {
-                this.meal_types = result.data
+                this.meal_types = result.data.results
             }).catch(err => {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
             })
@@ -192,4 +192,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>

vue/src/components/Settings/ShoppingSettingsComponent.vue

@@ -3,7 +3,7 @@
         <b-form-group :label="$t('shopping_share')" :description="$t('shopping_share_desc')">
             <generic-multiselect
                 @change="useUserPreferenceStore().user_settings.shopping_share = $event.val; updateSettings(false)"
-                :model="Models.USER"
+                :model="Models.USER_NAME"
                 :initial_selection="useUserPreferenceStore().user_settings.shopping_share"
                 label="display_name"
                 :multiple="true"

vue/src/stores/ShoppingListStore.js

@@ -1,6 +1,7 @@
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 import {ApiApiFactory} from "@/utils/openapi/api";
-import {StandardToasts} from "@/utils/utils";
+import {ApiMixin, StandardToasts} from "@/utils/utils";
+import {Models, Actions} from "@/utils/models"
 import _ from 'lodash';
 import moment from "moment/moment";
 import {defineStore} from "pinia";
@@ -188,7 +189,7 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 apiClient.listShoppingListEntrys().then((r) => {
                     this.entries = {}
 
-                    r.data.forEach((e) => {
+                    r.data.results.forEach((e) => {
                         Vue.set(this.entries, e.id, e)
                     })
                     this.currently_updating = false
@@ -198,13 +199,13 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 })
 
                 apiClient.listSupermarketCategorys().then(r => {
-                    this.supermarket_categories = r.data
+                    this.supermarket_categories = r.data.results
                 }).catch((err) => {
                     StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
                 })
 
                 apiClient.listSupermarkets().then(r => {
-                    this.supermarkets = r.data
+                    this.supermarkets = r.data.results
                 }).catch((err) => {
                     StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
                 })
@@ -223,10 +224,11 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 let previous_autosync = this.last_autosync
                 this.last_autosync = new Date().getTime();
 
-                let apiClient = new ApiApiFactory()
-                apiClient.listShoppingListEntrys(undefined, undefined, undefined, {'query': {'last_autosync': previous_autosync}
+                let GenericAPI = ApiMixin.methods.genericAPI
+
+                GenericAPI(Models.SHOPPING_LIST, Actions.LIST, {'options': {'last_autosync': previous_autosync}
                 }).then((r) => {
-                    r.data.forEach((e) => {
+                    r.data.results.forEach((e) => {
                         // dont update stale client data
                         if (!(Object.keys(this.entries).includes(e.id.toString())) || Date.parse(this.entries[e.id].updated_at) < Date.parse(e.updated_at)) {
                             console.log('auto sync updating entry ', e)

vue/src/utils/models.js

@@ -342,6 +342,15 @@ export class Models {
     merge: true,
   }
 
+  static INGREDIENT = {
+    name: "Ingredient",
+    apiName: "Ingredient",
+    paginated: true,
+    list: {
+      params: ["food", "page", "pageSize", "unit", "options"],
+    },
+  }
+
   static SHOPPING_LIST = {
     name: "Shopping_list",
     apiName: "ShoppingListEntry",
@@ -410,6 +419,15 @@ export class Models {
     },
   }
 
+  static RECIPE_BOOK_ENTRY = {
+    name: "Recipe_Book_Entry",
+    apiName: "RecipeBookEntry",
+    paginated: true,
+    list: {
+      params: ["book", "page", "pageSize", "recipe",  "options"],
+    }
+  }
+
   static SHOPPING_CATEGORY = {
     name: "Shopping_Category",
     apiName: "SupermarketCategory",
@@ -1080,6 +1098,7 @@ export class Models {
   static USER_NAME = {
     name: "User",
     apiName: "User",
+    paginated: false,
     list: {
       params: ["filter_list", "options"],
     },
@@ -1088,6 +1107,7 @@ export class Models {
   static MEAL_TYPE = {
     name: "Meal_Type",
     apiName: "MealType",
+    paginated: true,
     list: {
       params: ["page", "pageSize", "options"],
     },
@@ -1234,12 +1254,6 @@ export class Models {
     },
   }
 
-  static USER = {
-    name: "User",
-    apiName: "User",
-    paginated: false,
-  }
-
   static GROUP = {
     name: "Group",
     apiName: "Group",