playing with generic select

vue3/src/apps/tandoor/main.ts

@@ -12,12 +12,13 @@ import RecipeSearchPage from "@/pages/RecipeSearchPage.vue";
 import RecipeViewPage from "@/pages/RecipeViewPage.vue";
 import luxonPlugin from "@/plugins/luxonPlugin";
 import RecipeEditPage from "@/pages/RecipeEditPage.vue";
+import MealPlanPage from "@/pages/MealPlanPage.vue";
 
 const routes = [
     {path: '/', redirect: '/search', name: 'index'},
     {path: '/search', component: RecipeSearchPage, name: 'view_search'},
     {path: '/shopping', component: ShoppingListPage, name: 'view_shopping'},
-    {path: '/mealplan', component: ShoppingListPage, name: 'view_mealplan'},
+    {path: '/mealplan', component: MealPlanPage, name: 'view_mealplan'},
     {path: '/books', component: ShoppingListPage, name: 'view_books'},
     {path: '/recipe/:id', component: RecipeViewPage, name: 'view_recipe', props: true},
     {path: '/recipe/edit/:recipe_id', component: RecipeEditPage, name: 'edit_recipe', props: true},

vue3/src/components/inputs/ModelSelect.vue

@@ -0,0 +1,90 @@
+<template>
+    <template v-if="allow_create">
+        Combobox
+        <v-combobox
+            label="Combobox"
+            :items="items"
+            item-title="name"
+            item-value="id"
+            chips
+            @update:search="search"
+        ></v-combobox>
+
+    </template>
+    <template v-else>
+        Autocomplete
+        <v-autocomplete
+            label="Autocomplete"
+            :items="items"
+            item-title="name"
+            item-value="id"
+            chips
+        ></v-autocomplete>
+    </template>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted} from 'vue'
+import {ApiApi} from "@/openapi/index.js";
+
+const props = defineProps(
+    {
+        placeholder: {type: String, default: undefined},
+        model: {
+            type: String,
+            required: true,
+        },
+        label: {type: String, default: "name"},
+        parent_variable: {type: String, default: undefined},
+        limit: {type: Number, default: 25},
+        sticky_options: {
+            type: Array,
+            default() {
+                return []
+            },
+        },
+        initial_selection: {
+            type: Array,
+            default() {
+                return []
+            },
+        },
+        initial_single_selection: {
+            type: Object,
+            default: undefined,
+        },
+        search_on_load: {type: Boolean, default: true},
+        multiple: {type: Boolean, default: true},
+        allow_create: {type: Boolean, default: false},
+        create_placeholder: {type: String, default: "You Forgot to Add a Tag Placeholder"},
+        clear: {type: Number},
+        disabled: {type: Boolean, default: false,},
+    }
+)
+
+const items = ref([])
+
+function genericApiCall(model: string, query: string) {
+    // TODO make mode an enum
+    // TODO make model an enum as well an manually "clear" allowed types?
+    const api = new ApiApi()
+
+    api[`api${model}List`]({page: 1, query: query}).then(r => {
+        this.items = r.results
+    })
+}
+
+function search(query: string) {
+
+}
+
+// lifecycle hooks
+onMounted(() => {
+    console.log(`The initial count is ${items}.`)
+})
+</script>
+
+
+<style scoped>
+
+</style>

vue3/src/openapi/apis/ApiApi.ts

@@ -539,8 +539,12 @@ export interface ApiFoodInheritFieldRetrieveRequest {
 }
 
 export interface ApiFoodListRequest {
+    limit?: string;
     page?: number;
     pageSize?: number;
+    query?: string;
+    random?: string;
+    updatedAt?: string;
 }
 
 export interface ApiFoodMergeUpdateRequest {
@@ -947,15 +951,6 @@ export interface ApiOpenDataVersionUpdateRequest {
     openDataVersion: OpenDataVersion;
 }
 
-export interface ApiPlanIcalRetrieve2Request {
-    fromDate: string;
-}
-
-export interface ApiPlanIcalRetrieve3Request {
-    fromDate: string;
-    toDate: string;
-}
-
 export interface ApiRecipeBookCreateRequest {
     recipeBook: RecipeBook;
 }
@@ -3135,6 +3130,10 @@ export class ApiApi extends runtime.BaseAPI {
     async apiFoodListRaw(requestParameters: ApiFoodListRequest): Promise<runtime.ApiResponse<PaginatedFoodList>> {
         const queryParameters: any = {};
 
+        if (requestParameters.limit !== undefined) {
+            queryParameters['limit'] = requestParameters.limit;
+        }
+
         if (requestParameters.page !== undefined) {
             queryParameters['page'] = requestParameters.page;
         }
@@ -3143,6 +3142,18 @@ export class ApiApi extends runtime.BaseAPI {
             queryParameters['page_size'] = requestParameters.pageSize;
         }
 
+        if (requestParameters.query !== undefined) {
+            queryParameters['query'] = requestParameters.query;
+        }
+
+        if (requestParameters.random !== undefined) {
+            queryParameters['random'] = requestParameters.random;
+        }
+
+        if (requestParameters.updatedAt !== undefined) {
+            queryParameters['updated_at'] = requestParameters.updatedAt;
+        }
+
         const headerParameters: runtime.HTTPHeaders = {};
 
         if (this.configuration && (this.configuration.username !== undefined || this.configuration.password !== undefined)) {
@@ -6590,70 +6601,6 @@ export class ApiApi extends runtime.BaseAPI {
         await this.apiPlanIcalRetrieveRaw();
     }
 
-    /**
-     */
-    async apiPlanIcalRetrieve2Raw(requestParameters: ApiPlanIcalRetrieve2Request): Promise<runtime.ApiResponse<void>> {
-        if (requestParameters.fromDate === null || requestParameters.fromDate === undefined) {
-            throw new runtime.RequiredError('fromDate','Required parameter requestParameters.fromDate was null or undefined when calling apiPlanIcalRetrieve2.');
-        }
-
-        const queryParameters: any = {};
-
-        const headerParameters: runtime.HTTPHeaders = {};
-
-        if (this.configuration && (this.configuration.username !== undefined || this.configuration.password !== undefined)) {
-            headerParameters["Authorization"] = "Basic " + btoa(this.configuration.username + ":" + this.configuration.password);
-        }
-        const response = await this.request({
-            path: `/api/plan-ical/{from_date}/`.replace(`{${"from_date"}}`, encodeURIComponent(String(requestParameters.fromDate))),
-            method: 'GET',
-            headers: headerParameters,
-            query: queryParameters,
-        });
-
-        return new runtime.VoidApiResponse(response);
-    }
-
-    /**
-     */
-    async apiPlanIcalRetrieve2(requestParameters: ApiPlanIcalRetrieve2Request): Promise<void> {
-        await this.apiPlanIcalRetrieve2Raw(requestParameters);
-    }
-
-    /**
-     */
-    async apiPlanIcalRetrieve3Raw(requestParameters: ApiPlanIcalRetrieve3Request): Promise<runtime.ApiResponse<void>> {
-        if (requestParameters.fromDate === null || requestParameters.fromDate === undefined) {
-            throw new runtime.RequiredError('fromDate','Required parameter requestParameters.fromDate was null or undefined when calling apiPlanIcalRetrieve3.');
-        }
-
-        if (requestParameters.toDate === null || requestParameters.toDate === undefined) {
-            throw new runtime.RequiredError('toDate','Required parameter requestParameters.toDate was null or undefined when calling apiPlanIcalRetrieve3.');
-        }
-
-        const queryParameters: any = {};
-
-        const headerParameters: runtime.HTTPHeaders = {};
-
-        if (this.configuration && (this.configuration.username !== undefined || this.configuration.password !== undefined)) {
-            headerParameters["Authorization"] = "Basic " + btoa(this.configuration.username + ":" + this.configuration.password);
-        }
-        const response = await this.request({
-            path: `/api/plan-ical/{from_date}/{to_date}/`.replace(`{${"from_date"}}`, encodeURIComponent(String(requestParameters.fromDate))).replace(`{${"to_date"}}`, encodeURIComponent(String(requestParameters.toDate))),
-            method: 'GET',
-            headers: headerParameters,
-            query: queryParameters,
-        });
-
-        return new runtime.VoidApiResponse(response);
-    }
-
-    /**
-     */
-    async apiPlanIcalRetrieve3(requestParameters: ApiPlanIcalRetrieve3Request): Promise<void> {
-        await this.apiPlanIcalRetrieve3Raw(requestParameters);
-    }
-
     /**
      */
     async apiRecipeBookCreateRaw(requestParameters: ApiRecipeBookCreateRequest): Promise<runtime.ApiResponse<RecipeBook>> {

vue3/src/openapi/models/DefaultPageEnum.ts

@@ -16,13 +16,15 @@
  * * `SEARCH` - Search
 * `PLAN` - Meal-Plan
 * `BOOKS` - Books
+* `SHOPPING` - Shopping
  * @export
  * @enum {string}
  */
 export enum DefaultPageEnum {
     Search = 'SEARCH',
     Plan = 'PLAN',
-    Books = 'BOOKS'
+    Books = 'BOOKS',
+    Shopping = 'SHOPPING'
 }
 
 export function DefaultPageEnumFromJSON(json: any): DefaultPageEnum {

vue3/src/pages/MealPlanPage.vue

@@ -0,0 +1,24 @@
+<template>
+
+  <model-select model="Food" allow_create></model-select>
+
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import ModelSelect from "@/components/inputs/ModelSelect.vue";
+
+export default defineComponent({
+    name: "MealPlanPage",
+    components: {ModelSelect},
+    data(){
+        return {
+
+        }
+    }
+})
+</script>
+
+<style scoped>
+
+</style>