Start including apollo

aleksis/core/settings.py

@@ -586,6 +586,9 @@ YARN_INSTALLED_APPS = [
     "vue@^2.6.14",
     "vuetify@^2.6.5",
     "@mdi/font",
+    "vue-apollo@^3",
+    "apollo-boost",
+    "graphql",
 ]
 
 merge_app_settings("YARN_INSTALLED_APPS", YARN_INSTALLED_APPS, True)
@@ -627,7 +630,16 @@ ANY_JS = {
         "css_url": JS_URL + "/vuetify/dist/vuetify.min.css",
         "js_url": JS_URL + "/vuetify/dist/vuetify.min.js",
     },
-    "mdi-font": {"css_url": JS_URL + "/@mdi/font/css/materialdesignicons.css"}
+    "vue-apollo": {
+        "js_url": JS_URL + "/vue-apollo/dist/vue-apollo.min.js",
+    },
+    "apollo-boost": {
+        "js_url": JS_URL + "/apollo-boost/lib/bundle.cjs.js",
+    },
+    "graphql": {
+        "js_url": JS_URL + "/graphql/index.mjs",
+    },
+    "mdi-font": {"css_url": JS_URL + "/@mdi/font/css/materialdesignicons.css"},
 }
 
 merge_app_settings("ANY_JS", ANY_JS, True)

aleksis/core/static/js/vue/app.js

@@ -38,6 +38,10 @@ const vuetify = new Vuetify({
     }
 })
 
+const apolloClient = new ApolloClient({
+  uri: JSON.parse(document.getElementById("graphql-url").textContent)
+})
+
 
 import CacheNotification from "./components/core/CacheNotification.js";
 import LanguageForm from "./components/core/LanguageForm.js";
@@ -49,6 +53,8 @@ Vue.component(MessageBox.name, MessageBox); // Load MessageBox globally as other
 
 const app = new Vue({
     el: '#app',
+    apolloProvider,
+    render: h => h(App),
     vuetify: vuetify,
     // delimiters: ["<%","%>"] // FIXME: discuss new delimiters, [[ <% [{ {[ <[ (( …
     data: () => ({
@@ -65,3 +71,9 @@ const app = new Vue({
         "sidenav-search": SidenavSearch,
     },
 })
+
+Vue.use(VueApollo)
+
+const apolloProvider = new VueApollo({
+  defaultClient: apolloClient,
+})

aleksis/core/templates/core/vue_base.html

 {# -*- engine:django -*- #}
 
-{% load i18n menu_generator static sass_tags any_js rules %}
+{% load i18n menu_generator static sass_tags any_js rules html_helpers %}
 {% get_current_language as LANGUAGE_CODE %}
 {% get_available_languages as LANGUAGES %}
 
@@ -169,13 +169,13 @@
       </v-container>
     </v-main>
 
-    <v-footer app absolute inset color="primary" class="white--text">
+    <v-footer app absolute inset class="white--text">
       <v-container>
         <v-row>
           <v-col cols="12" lg="6">
             {% include "core/partials/vue_footer_menu.html" %}
           </v-col>
-          <v-col cols="12" class="text-white-darken-1">
+          <v-col cols="12" >
             <v-row>
               <v-btn plain rounded href="{% url "about_aleksis" %}" color="white">
                 {% trans "About AlekSIS® — The Free School Information System" %}
@@ -208,9 +208,15 @@
 {#{% include_js "materialize" %}#}
 {% include_js "vue" %}
 {% include_js "vuetify" %}
+<script type="module" src="{% static 'apollo-boost/lib/bundle.esm.js' %}"></script>
+<script type="module" src="{% static 'vue-apollo/dist/vue-apollo.esm.js' %}"></script>
+<script type="module" src="{% static 'graphql-tag/lib/index.js' %}"></script>
+<script type="module" src="{% static 'graphql/index.mjs' %}"></script>
 {% include_js "sortablejs" %}
 {# Fixme: das muss weg ↓ #}
 {% include_js "jquery-sortablejs" %}
+{% absolute_url "graphql" as GRAPHQL_URL %}
+{{ GRAPHQL_URL|json_script:"graphql-url" }}
 {{ request.user.person.preferences.theme__design|json_script:"design-mode" }}
 {{ request.site.preferences.theme__primary|json_script:"primary-color" }}
 {{ request.site.preferences.theme__secondary|json_script:"secondary-color" }}