#2490: hooked up of saving and reloading projects; configured dashboa…

…rd for reporting inception events

dashboard-prime/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed, nextTick } from 'vue'
+import { ref, onMounted, computed, nextTick, watch } from 'vue'
 import { useStore } from 'vuex'
 import { RouterView, useRoute } from 'vue-router'
 import { SkillsConfiguration, SkillsReporter } from '@skilltree/skills-client-js'
@@ -9,6 +9,7 @@ import router from '@/router/index.js'
 import PageVisitService from '@/PageVisitService.js'
 import SkillsSpinner from '@/components/utils/SkillsSpinner.vue'
 import { useCustomGlobalValidators } from '@/validators/UseCustomGlobalValidators.js'
+import { useInceptionConfigurer } from '@/components/utils/UseInceptionConfigurer.js'
 
 const store = useStore()
 const isSupervisor = ref(false)
@@ -46,6 +47,14 @@ const getLandingPage = () => {
   return landingPage
 }
 
+const inceptionConfigurer = useInceptionConfigurer()
+watch(store.getters.userInfo, async (newUserInfo) => {
+  if (newUserInfo) {
+    inceptionConfigurer.configure()
+  }
+})
+
+
 const addNavGuards = () => {
   const beforeEachNavGuard = (to, from, next) => {
     if (to.query) {
@@ -173,6 +182,7 @@ onMounted(() => {
   store.dispatch('loadConfigState').finally(() => {
     customGlobalValidators.addValidators()
     store.dispatch('restoreSessionIfAvailable').finally(() => {
+      inceptionConfigurer.configure()
       addNavGuards()
       if (isAuthenticatedUser.value) {
         store.dispatch('access/isSupervisor').then((result) => {

dashboard-prime/src/components/projects/EditProject.vue

@@ -13,6 +13,7 @@ import MarkdownEditor from '@/common-components/utilities/markdown/MarkdownEdito
 
 const model = defineModel()
 const props = defineProps(['project', 'isEdit', 'isCopy'])
+const emit = defineEmits(['project-saved'])
 const modalTitle = computed(() => {
   if (props.isCopy) {
     return 'Copy Project'
@@ -86,7 +87,13 @@ function close() {
 }
 
 const onSubmit = handleSubmit(values => {
-  console.log(JSON.stringify(values, null, 2))
+    // this.publishHidden({ updated: true });
+    const projToSave  = {...values,
+      name: InputSanitizer.sanitize(values.name),
+      projectId: InputSanitizer.sanitize(values.projectId)
+    }
+    emit('project-saved', projToSave);
+    close()
 })
 
 </script>
@@ -98,12 +105,6 @@ const onSubmit = handleSubmit(values => {
           :header="modalTitle"
           class="w-11 lg:w-10 xl:w-9"
   >
-<!--    <template #header>-->
-<!--      <div class="inline-flex align-items-center justify-content-center gap-2 text-xl">-->
-<!--        <i class="fas fa-cogs"></i>-->
-<!--        <span class="font-bold white-space-nowrap">{{ modalTitle }}</span>-->
-<!--      </div>-->
-<!--    </template>-->
     <skills-spinner :is-loading="loadingComponent" />
 
     <div v-if="!loadingComponent" v-focustrap>

dashboard-prime/src/components/projects/MyProjects.vue

@@ -1,15 +1,18 @@
 <script setup>
 import { ref, computed, onMounted, nextTick } from 'vue';
 import { useStore } from 'vuex';
+import { useSkillsAnnouncer } from '@/common-components/utilities/UseSkillsAnnouncer.js'
 import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue';
 import LoadingContainer from '@/components/utils/LoadingContainer.vue';
 import SkillsSpinner from '@/components/utils/SkillsSpinner.vue';
 import ProjectService from '@/components/projects/ProjectService';
 import SettingsService from '@/components/settings/SettingsService';
 import MyProject from '@/components/projects/MyProject.vue';
 import EditProject from '@/components/projects/EditProject.vue'
+import { SkillsReporter } from '@skilltree/skills-client-js'
 
 const store = useStore();
+const announcer = useSkillsAnnouncer()
 
 onMounted(() => {
   loadProjects();
@@ -116,21 +119,21 @@ const projectAdded = (project) => {
   isLoading.value = true;
   return ProjectService.saveProject(project)
       .then(() => {
-        const loadProjects = () => {
+        const loadProjectsInternal = () => {
           SkillsReporter.reportSkill('CreateProject');
           loadProjects()
               .then(() => {
-                // nextTick(() => this.$announcer.polite(`Project ${project.name} has been created`));
+                announcer.polite(`Project ${project.name} has been created`);
               });
         };
 
         if (isRootUser) {
           SettingsService.pinProject(project.projectId)
               .then(() => {
-                loadProjects();
+                loadProjectsInternal();
               });
         } else {
-          loadProjects();
+          loadProjectsInternal();
         }
       });
 };
@@ -220,19 +223,21 @@ const focusOnProjectCard = (projectId) => {
 <template>
   <div>
     <SubPageHeader title="Projects" action="Project">
-      <Button v-if="isRootUser" outlined ref="pinProjectsButton"
-                @click="showSearchProjectModal=true"
-                aria-label="Pin projects to your Project page"
-                role="button"
-                size="small"
-                class="mr-2">
-        <span class="d-none d-sm-inline mr-1">Pin</span> <i class="fas fa-thumbtack" aria-hidden="true"/>
+      <Button v-if="isRootUser"
+              outlined
+              ref="pinProjectsButton"
+              @click="showSearchProjectModal=true"
+              aria-label="Pin projects to your Project page"
+              role="button"
+              size="small"
+              class="mr-2 bg-primary-reverse">
+        <span class="d-none d-sm-inline mr-1">Pin</span> <i class="fas fa-thumbtack" aria-hidden="true" />
       </Button>
       <Button id="newProjectBtn" ref="newProjButton" @click="newProject.show = true"
-              outlined size="small"
-                :disabled="addProjectDisabled"
-                data-cy="newProjectButton" aria-label="Create new Project" role="button">
-        <span class="d-none d-sm-inline  mr-1">Project</span> <i class="fas fa-plus-circle" aria-hidden="true"/>
+              outlined class="bg-primary-reverse" size="small"
+              :disabled="addProjectDisabled"
+              data-cy="newProjectButton" aria-label="Create new Project" role="button">
+        <span class="d-none d-sm-inline  mr-1">Project</span> <i class="fas fa-plus-circle" aria-hidden="true" />
       </Button>
     </SubPageHeader>
 
@@ -275,7 +280,10 @@ const focusOnProjectCard = (projectId) => {
       </div>
     </LoadingContainer>
 
-    <edit-project v-model="newProject.show" :project="newProject.project"/>
+    <edit-project
+      v-model="newProject.show"
+      :project="newProject.project"
+      @project-saved="projectAdded"/>
   </div>
 </template>
 

dashboard-prime/src/components/utils/UseInceptionConfigurer.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2020 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useStore } from 'vuex'
+
+export const useInceptionConfigurer = () => {
+
+  const store = useStore()
+  function configure() {
+    if (store.getters.userInfo && !store.getters.config.needToBootstrap) {
+      store.dispatch('configureSkillsClientForInception')
+    }
+  }
+
+  return {
+    configure
+  }
+}