Add CToolIntro for course home page using vue

assets/vue/router/ctoolintro.js

@@ -12,6 +12,7 @@ export default {
     },
     {
       name: 'ToolIntroUpdate',
+      //path: ':id/edit',
       path: 'edit',
       component: () => import('../views/ctoolintro/Update.vue')
     },

assets/vue/views/course/Home.vue

@@ -58,14 +58,14 @@
       <div v-if="intro" class="p-10 text-center">
         <span v-html="intro.introText" />
 
-        <router-link
-            v-if="introTool"
-            :to="{ name: 'ToolIntroUpdate', params: {'id': intro['@id']} }"
-            tag="button"
-            class="mt-2 btn btn-info">
+        <button
+            class="mt-2 btn btn-info"
+            @click="updateIntro(intro)"
+        >
           <v-icon>mdi-pencil</v-icon>
           {{ $t('Update') }}
-        </router-link>
+        </button>
+
       </div>
       <div v-else>
           <div>
@@ -83,14 +83,23 @@
 	     {{ $t('Add a course introduction to display to your students') }}
           </div>
 
-          <router-link
-              v-if="introTool"
-              :to="{ name: 'ToolIntroCreate', params: {'courseTool': introTool.iid} }"
-              tag="button"
-              class="mt-2 btn btn-info">
-            <v-icon>mdi-plus</v-icon>
-            {{ $t('Course introduction') }}
-          </router-link>
+<!--          <router-link-->
+<!--              v-if="introTool"-->
+<!--              :to="{ name: 'ToolIntroCreate', params: {'courseTool': introTool.iid, cid: course.id, sid: route.query.sid} }"-->
+<!--              tag="button"-->
+<!--              class="mt-2 btn btn-info">-->
+<!--            <v-icon>mdi-plus</v-icon>-->
+<!--            {{ $t('Course introduction') }}-->
+<!--          </router-link>-->
+
+        <button
+            class="mt-2 btn btn-info"
+            v-if="introTool"
+            @click="addIntro(course, introTool)"
+        >
+          <v-icon>mdi-plus</v-icon>
+          {{ $t('Course introduction') }}
+        </button>
       </div>
     </div>
 
@@ -153,7 +162,7 @@ import CourseToolList from '../../components/course/CourseToolList.vue';
 import ShortCutList from '../../components/course/ShortCutList.vue';
 
 import isEmpty from "lodash/isEmpty";
-import {useRoute} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
 import axios from "axios";
 import {ENTRYPOINT} from '../../config/entrypoint';
 import {computed, onMounted, reactive, toRefs} from 'vue'
@@ -179,10 +188,13 @@ export default {
       goToCourseTool,
       changeVisibility,
       goToSettingCourseTool,
-      goToShortCut
+      goToShortCut,
+      addIntro,
+      updateIntro,
     });
     const route = useRoute()
     const store = useStore();
+    const router = useRouter();
 
     let courseId = route.params.id;
     let sessionId = route.query.sid ?? 0;
@@ -214,6 +226,30 @@ export default {
       });
     }
 
+    function addIntro(course, introTool) {
+      return router.push({
+        name: 'ToolIntroCreate',
+        params: {'courseTool': introTool.iid },
+        query: {
+          'cid': courseId,
+          'sid': sessionId,
+          'parentResourceNodeId': course.resourceNode.id
+        }
+      });
+    }
+
+    function updateIntro(intro) {
+      return router.push({
+        name: 'ToolIntroUpdate',
+        params: {'id': intro['@id'] },
+        query: {
+          'cid': courseId,
+          'sid': sessionId,
+          'id': intro['@id']
+        }
+      });
+    }
+
     function goToSettingCourseTool(course, tool) {
       return '/course/' + courseId + '/settings/' + tool.tool.name + '?sid=' + sessionId;
     }

assets/vue/views/ctoolintro/Create.vue

@@ -18,13 +18,15 @@ import ToolIntroForm from '../../components/ctoolintro/Form.vue';
 import Loading from '../../components/Loading.vue';
 import Toolbar from '../../components/Toolbar.vue';
 import CreateMixin from '../../mixins/CreateMixin';
-import {computed, onMounted, ref} from "vue";
+import {computed, onMounted, reactive, ref, toRefs} from "vue";
 import useVuelidate from "@vuelidate/core";
 import {useRoute, useRouter} from "vue-router";
 import isEmpty from "lodash/isEmpty";
 import {RESOURCE_LINK_PUBLISHED} from "../../components/resource_links/visibility.js";
 import axios from 'axios'
 import { ENTRYPOINT } from '../../config/entrypoint'
+import useNotification from "../../components/Notification";
+import {useI18n} from "vue-i18n";
 const servicePrefix = 'ctoolintro';
 
 const { mapFields } = createHelpers({
@@ -45,8 +47,10 @@ export default {
     const users = ref([]);
     const isLoadingSelect = ref(false);
     const item = ref({});
-    const store = useStore();
     const route = useRoute();
+    const router = useRouter();
+    const {showNotification} = useNotification();
+    const { t } = useI18n();
 
     let id = route.params.id;
     if (isEmpty(id)) {
@@ -56,20 +60,28 @@ export default {
     let toolId = route.params.courseTool;
 
     // Get the current intro text.
-    axios.get(ENTRYPOINT + 'c_tool_intros/'+toolId).then(response => {
+    axios.get(ENTRYPOINT + 'c_tool_intros/' + toolId).then(response => {
       let data = response.data;
       item.value['introText'] = data.introText;
     }).catch(function (error) {
       console.log(error);
     });
 
-    const currentUser = computed(() => store.getters['security/getUser']);
-    item.value['parentResourceNodeId'] = currentUser.value.resourceNode['id'];
+    item.value['parentResourceNodeId'] = Number(route.query.parentResourceNodeId);
     item.value['courseTool'] = '/api/c_tools/'+toolId;
 
-    console.log('parentResourceNodeId : ' + item.value['parentResourceNodeId']);
+    item.value['resourceLinkList'] = [{
+      sid: route.query.sid,
+      cid: route.query.cid,
+      visibility: RESOURCE_LINK_PUBLISHED, // visible by default
+    }];
+
+    function onCreated(item) {
+      showNotification(t('Updated'));
+      router.go(-1);
+    }
 
-    return {v$: useVuelidate(), users, isLoadingSelect, item};
+    return {v$: useVuelidate(), users, isLoadingSelect, item, onCreated};
   },
   computed: {
     ...mapFields(['error', 'isLoading', 'created', 'violations']),
@@ -78,16 +90,6 @@ export default {
       'currentUser': 'security/getUser',
     }),
   },
-  created() {
-    /*console.log('In created() : ' + this.$route.params.node);
-    this.item.parentResourceNodeId = this.$route.params.node;
-    this.item.resourceLinkList = JSON.stringify([{
-      gid: this.$route.query.gid,
-      sid: this.$route.query.sid,
-      cid: this.$route.query.cid,
-      visibility: RESOURCE_LINK_PUBLISHED, // visible by default
-    }]);*/
-  },
   methods: {
     ...mapActions('ctoolintro', ['create', 'createWithFormData'])
   }

assets/vue/views/ctoolintro/Update.vue

@@ -20,6 +20,10 @@ import ToolIntroForm from '../../components/ctoolintro/Form.vue';
 import Loading from '../../components/Loading.vue';
 import Toolbar from '../../components/Toolbar.vue';
 import UpdateMixin from '../../mixins/UpdateMixin';
+import useNotification from "../../components/Notification";
+import {useI18n} from "vue-i18n";
+import {useRouter} from "vue-router";
+import {watch} from "vue";
 
 const servicePrefix = 'ctoolintro';
 
@@ -32,7 +36,18 @@ export default {
     Toolbar,
     ToolIntroForm
   },
+  setup() {
+    const {showNotification} = useNotification();
+    const { t } = useI18n();
+    const router = useRouter();
 
+    /*function updated(val) {
+      showNotification(t('Updated'));
+      router.go(-1);
+    }*/
+    //return {updated};
+    return;
+  },
   computed: {
     ...mapFields('ctoolintro', {
       deleteLoading: 'isLoading',