v2 search basics

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -0,0 +1,81 @@
+<template>
+  <div id="app">
+
+    <div class="row">
+      <div class="col-xl-2 d-none d-xl-block">
+
+      </div>
+      <div class="col-xl-8 col-12">
+
+
+        <div class="row">
+          <div class="col col-md-12">
+            <b-input class="form-control" v-model="search_input" @keyup="refreshData"></b-input>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col col-md-12">
+            <ul>
+              <li v-for="r in recipes" v-bind:key="r.id">{{ r.name }}</li>
+            </ul>
+          </div>
+        </div>
+
+      </div>
+      <div class="col-xl-2 d-none d-xl-block">
+
+      </div>
+    </div>
+
+
+  </div>
+
+
+</template>
+
+<script>
+import Vue from 'vue'
+import {BootstrapVue} from 'bootstrap-vue'
+
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import {ResolveUrlMixin} from "@/utils/utils";
+
+import LoadingSpinner from "@/components/LoadingSpinner";
+
+import {ApiApiFactory} from "@/utils/openapi/api.ts";
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'RecipeSearchView',
+  mixins: [],
+  components: {},
+  data() {
+    return {
+      recipes: [],
+      search_input: '',
+    }
+
+  },
+  mounted() {
+    this.refreshData()
+  },
+  methods: {
+    refreshData: function () {
+      let apiClient = new ApiApiFactory()
+
+      apiClient.listRecipes({query: {query: this.search_input, limit: 10}}).then(result => {
+        this.recipes = result.data
+      })
+    }
+  }
+}
+
+</script>
+
+<style>
+
+
+</style>

vue/src/apps/RecipeSearchView/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './RecipeSearchView'
+import i18n from '@/i18n'
+
+Vue.config.productionTip = false
+
+new Vue({
+    i18n,
+    render: h => h(App),
+}).$mount('#app')

vue/vue.config.js

@@ -1,6 +1,10 @@
 const BundleTracker = require("webpack-bundle-tracker");
 
 const pages = {
+    'recipe_search_view': {
+        entry: './src/apps/RecipeSearchView/main.js',
+        chunks: ['chunk-vendors']
+    },
     'recipe_view': {
         entry: './src/apps/RecipeView/main.js',
         chunks: ['chunk-vendors']

vue/webpack-stats.json

@@ -1 +1 @@
-{"status":"done","chunks":{"chunk-vendors":[{"name":"css/chunk-vendors.css","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\css\\chunk-vendors.css"},{"name":"js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"import_response_view":[{"name":"js/import_response_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\import_response_view.js"}],"offline_view":[{"name":"js/offline_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\offline_view.js"}],"recipe_view":[{"name":"js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"}]}}
+{"status":"done","chunks":{"chunk-vendors":[{"name":"css/chunk-vendors.css","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\css\\chunk-vendors.css"},{"name":"js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"import_response_view":[{"name":"js/import_response_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\import_response_view.js"}],"offline_view":[{"name":"js/offline_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\offline_view.js"}],"recipe_search_view":[{"name":"js/recipe_search_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_search_view.js"}],"recipe_view":[{"name":"js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"}]}}