first boilerplate for new import view

cookbook/templates/test.html

@@ -1,26 +1,33 @@
 {% extends "base.html" %}
-{% load crispy_forms_filters %}
-{% load i18n %}
+{% load render_bundle from webpack_loader %}
 {% load static %}
+{% load i18n %}
+{% load l10n %}
+
+
+{% block title %}Test{% endblock %}
+
+
+{% block content_fluid %}
+
+    <div id="app">
+        <import-view></import-view>
+    </div>
 
-{% block title %}{% trans 'Import Recipes' %}{% endblock %}
 
-{% block extra_head %}
-    {{ form.media }}
 {% endblock %}
 
 
-{% block content %}
-    <h2>{% trans 'Import' %}</h2>
-    <div class="row">
-        <div class="col col-md-12">
-            <form action="." method="post" enctype="multipart/form-data">
-                {% csrf_token %}
-                {{ form|crispy }}
-                <button class="btn btn-success" type="submit"><i class="fas fa-file-import"></i> {% trans 'Import' %}
-                </button>
-            </form>
-        </div>
-    </div>
+{% block script %}
+    {% if debug %}
+        <script src="{% url 'js_reverse' %}"></script>
+    {% else %}
+        <script src="{% static 'django_js_reverse/reverse.js' %}"></script>
+    {% endif %}
 
+    <script type="application/javascript">
+        window.CUSTOM_LOCALE = '{{ request.LANGUAGE_CODE }}'
+    </script>
+
+    {% render_bundle 'import_view' %}
 {% endblock %}

cookbook/views/views.py

@@ -647,11 +647,7 @@ def test(request):
     if not settings.DEBUG:
         return HttpResponseRedirect(reverse('index'))
 
-    with scopes_disabled():
-        result = ShoppingList.objects.filter(
-            Q(created_by=request.user) | Q(shared=request.user)).filter(
-            space=request.space).values().distinct()
-    return JsonResponse(list(result), safe=False, json_dumps_params={'indent': 2})
+    return render(request, 'test.html', {})
 
 
 def test2(request):

vue/src/apps/ImportView/ImportView.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="app">
+        Test
+  </div>
+
+
+</template>
+
+<script>
+import Vue from 'vue'
+import {BootstrapVue} from 'bootstrap-vue'
+
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import {ResolveUrlMixin, ToastMixin} from "@/utils/utils";
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'ImportView',
+  mixins: [
+    ResolveUrlMixin,
+    ToastMixin,
+  ],
+  components: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+
+
+  },
+  methods: {
+
+  }
+}
+
+</script>
+
+<style>
+
+
+</style>

vue/src/apps/ImportView/main.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import App from './ImportView.vue'
+import i18n from '@/i18n'
+
+Vue.config.productionTip = false
+
+// TODO move this and other default stuff to centralized JS file (verify nothing breaks)
+let publicPath = localStorage.STATIC_URL + 'vue/'
+if (process.env.NODE_ENV === 'development') {
+    publicPath = 'http://localhost:8080/'
+}
+export default __webpack_public_path__ = publicPath // eslint-disable-line
+
+
+new Vue({
+    i18n,
+    render: h => h(App),
+}).$mount('#app')

vue/vue.config.js

@@ -13,6 +13,10 @@ const pages = {
         entry: "./src/apps/OfflineView/main.js",
         chunks: ["chunk-vendors"],
     },
+    import_view: {
+        entry: "./src/apps/ImportView/main.js",
+        chunks: ["chunk-vendors"],
+    },
     import_response_view: {
         entry: "./src/apps/ImportResponseView/main.js",
         chunks: ["chunk-vendors"],