More backend and frontend integrations

Closure_Front_End/package.json

@@ -18,7 +18,10 @@
     "axios": "^0.21.1",
     "bulma": "^0.9.3",
     "core-js": "^3.6.5",
+    "dexie": "^3.0.3",
+    "swrv": "^1.0.0-beta.8",
     "vue": "^3.0.0",
+    "vue-multiselect": "^3.0.0-alpha.2",
     "vue-router": "^4.0.0-0"
   },
   "devDependencies": {

Closure_Front_End/src/App.vue

@@ -6,9 +6,18 @@
       <router-link class="navbar-item" to="/"><b>Closure()</b></router-link>
     </div>
     <div class="navbar-start is-hidden-mobile is-hidden-touch">
+
+      <div v-if="currentCourseplan" class="navbar-item">
+        <span>שם תכנית:
+          {{ currentCourseplan.name}}
+        </span>
+      </div>
+      <save-menu/>
+
       <div class="navbar-item">
         <div class="buttons">
           <router-link
+            v-if="auth.isAuthenticated.value"
             class="button is-small is-dark"
             to="/data-import"
           >
@@ -19,25 +28,25 @@
           </router-link>
           <!-- Check that the SDK client is not currently loading before accessing is methods -->
           <router-link
-            v-if="$auth.isAuthenticated.value"
+            v-if="auth.isAuthenticated.value"
             class="button is-small is-dark"
             to="/settings"
           >
             <span class="icon is-small is-right">
               <i class="fas fa-user-cog"></i>
             </span>
           </router-link>
-          <div v-if="!$auth.loading.value">
+          <div v-if="!auth.loading.value">
             <button
               class="button is-small is-dark menu-label"
-              v-if="!$auth.isAuthenticated.value"
+              v-if="!auth.isAuthenticated.value"
               @click="login"
             >
               Log in
             </button>
             <button
               class="button is-small is-dark menu-label"
-              v-if="$auth.isAuthenticated.value"
+              v-if="auth.isAuthenticated.value"
               @click="logout"
             >
               Log out
@@ -49,41 +58,59 @@
   </nav>
 
   <router-view />
+
+  <save-state-footer />
 </template>
 
 <script>
 import ErrorNotification from './components/ErrorNotification.vue';
+import SaveMenu from './save-load/SaveMenu.vue';
+import SaveStateFooter from './components/SaveStateFooter.vue';
+import { toRefs, reactive, onMounted, provide, inject, readonly} from 'vue';
+import { currentCourseplan } from '@/course-store.js'
 export default {
   name: "App",
-  components: {ErrorNotification},
-  data() {
-    return {
-      username: "",
+  components: {ErrorNotification, SaveMenu, SaveStateFooter},
+  setup() {
+    const state = reactive({
       student: null,
-    };
-  },
-  created() {
-    /** if the user is loged in, then fetching his data from DB, else doing nothing */
-    if (this.$auth.isAuthenticated.value) {
-      this.$auth
-        .getIdTokenClaims()
-        .then((response) => (this.username = response.nickname));
-      this.$http.get(`students/${this.username}`)
-        .then((response) => this.student = response);
-    }
-  },
-  methods: {
-    // Log the user in
-    login() {
-      this.$auth.loginWithRedirect();
-    },
-    // Log the user out
-    logout() {
-      this.$auth.logout({
+      idClaims: null
+    });
+
+    provide("studentAndClaims", readonly(state))
+    provide("setStudent", (newStudent) => {
+      state.student = newStudent;
+    });
+
+
+    const http = inject("http");
+    const auth = inject("auth");
+
+
+    onMounted(async () => {
+      if (auth.isAuthenticated.value) {
+        const claims = await auth.getIdTokenClaims();
+        const student = (await http.get("student/me")).data;
+        window.student = student;
+        window.claims = claims;
+
+        state.idClaims = claims;
+        state.student = student;
+
+        console.log(`Authenticated, got claims and student profile`)
+      }
+    });
+
+    const login = () => auth.loginWithRedirect();
+    const logout = () => auth.logout({
         returnTo: import.meta.env.VITE_AUTH0_REDIRECT_URI
-      });
-    },
-  },
+    });
+
+    return {
+      ...toRefs(state), login, logout, auth, currentCourseplan
+    }
+
+  }
 };
 </script>
 <style src="bulma/css/bulma-rtl.css"></style>

Closure_Front_End/src/auth/index.js

@@ -133,22 +133,21 @@ export const routeGuard = (to, from, next) => {
   })
 }
 
+export const http = axios.create({
+    baseURL: import.meta.env.VITE_API_URL
+});
+window.closureAxios = http;
+
 export const setupAuth = async (options, callbackRedirect) => {
   client = await createAuth0Client({
       ...options,
   });
 
-
-  let http = axios.create({
-      baseURL: import.meta.env.VITE_API_URL
-  });
-
   http.interceptors.response.use((response) => response,
       function (error){
       errorHandler(error);
       return Promise.reject(error);
   });
-  window.closureAxios = http;
 
 
   watchEffect(async () => {

Closure_Front_End/src/components/CopyableLink.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="field">
+    <label v-if="label" class="label">{{ label }}</label>
+    <div class="control">
+      <div class="field has-addons">
+        <div class="control is-expanded">
+          <input class="input" type="text" :value="url" disabled />
+        </div>
+        <div class="control">
+          <button class="button" @click="copy">
+            <i class="fas fa-copy"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+import router from '@/router';
+export default {
+  props: {
+    routeName: String,
+    routeParams: {
+        type: Object, required: false
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+  },
+  setup(props) {
+    const base = import.meta.env.VITE_AUTH0_REDIRECT_URI;
+    const href = computed(() => router.resolve({ name: props.routeName, params: props.routeParams}).href)
+    const url = computed(() => new URL(href.value, base).toString());
+
+    const copy = async () => {
+      await navigator.clipboard.writeText(url.value);
+    };
+
+    return { url, copy };
+  },
+};
+</script>
+
+<style>
+</style>

Closure_Front_End/src/components/CourseBox.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="box box-style">
     <div class="media">
-      <span class="icon is-small is-right is-size-7">
-        <i class="fas fa-circle" :class="colorMatch()"></i>
-      </span>
+      <course-color-circle :courseType="course.type" />
 
       <div class="media-content">
         {{ course.name }}
@@ -23,20 +21,20 @@
 </template>
 
 <script>
-export default {
-  props: ["course"],
+import CourseColorCircle from './CourseColorCircle.vue'
 
-  methods: {
-    colorMatch() {
-      if (this.course.type == 1) return "must";
-      if (this.course.type == 2) return "choose_from_list";
-      return "choice";
-    },
+export default {
+  props: {
+    course: {
+      type: Object, required: true
+    }
   },
+  emits: ['clickclose'],
+  components: { CourseColorCircle },
 };
 </script>
 
-<style>
+<style scoped>
 .box-style {
   padding: 0.25rem;
   box-shadow: 0px 0px 0px 0px;
@@ -54,16 +52,4 @@ export default {
 .fa-times-circle:hover {
   cursor: pointer;
 }
-
-.must {
-  color: #bc87d0;
-}
-
-.choose_from_list {
-  color: #fbaf5d;
-}
-
-.choice {
-  color: #f06eaa;
-}
 </style>