Merge pull request #32 from ucdavis/feature/CTS2

Feature/cts2

JenkinsFile

@@ -34,21 +34,17 @@ pipeline {
 		  }
 		}
         stage('Clean Previous Build') {
-		  steps {
-			bat '"C:\\Program Files\\dotnet\\dotnet" clean Viper.sln'
-		  }
-		}
-		stage('Build Vue App') {
 			steps {
-				bat 'pushd VueApp && npm install && popd'
-				bat 'npm run --prefix VueApp build'
+				bat '"C:\\Program Files\\dotnet\\dotnet" clean Viper.sln'
 			}
 		}
 		stage('Build for test') {
 			when {
 				expression { params.Branch == 'development' }
 			}
 			steps {
+				bat 'pushd VueApp && npm install && popd'
+				bat 'npm run --prefix VueApp build-test'
 				bat '"C:\\Program Files\\dotnet\\dotnet" publish ./web/Viper.csproj -c "Release" /p:EnvironmentName=Test'
 			}
 		}
@@ -57,6 +53,8 @@ pipeline {
 				expression { params.Branch == 'master' || params.Branch == "main" }
 			}
 			steps {
+				bat 'pushd VueApp && npm install && popd'
+				bat 'npm run --prefix VueApp build'
 				bat '"C:\\Program Files\\dotnet\\dotnet" publish ./web/Viper.csproj -c "Release" /p:EnvironmentName=Production'
 			}
 		}

VueApp/.env

@@ -1,3 +1,4 @@
-VITE_API_URL="/api/"
+VITE_API_URL = "/api/"
 VITE_VIPER_HOME = "/"
-VITE_ENVIRONMENT="DEVELOPMENT"
+VITE_ENVIRONMENT = "DEVELOPMENT"
+VITE_VIPER_1_HOME = "http://localhost/"

VueApp/.env.production

@@ -1,3 +1,4 @@
-VITE_API_URL="/2/api/"
+VITE_API_URL = "/2/api/"
 VITE_VIPER_HOME = "/2/"
-VITE_ENVIRONMENT="PRODUCTION"
+VITE_ENVIRONMENT = "PRODUCTION"
+VITE_VIPER_1_HOME = "/"

VueApp/.env.test

@@ -1,3 +1,4 @@
-VITE_API_URL="/2/api/"
+VITE_API_URL = "/2/api/"
 VITE_VIPER_HOME = "/2/"
-VITE_ENVIRONMENT="TEST"
+VITE_ENVIRONMENT = "TEST"
+VITE_VIPER_1_HOME = "/"

VueApp/package.json

@@ -17,10 +17,11 @@
     "build-only-test": "vite build --mode test"
   },
   "dependencies": {
-    "@quasar/extras": "^1.16.11",
+    "@quasar/extras": "^1.16.12",
+    "@vueuse/core": "^11.1.0",
     "chart.js": "^4.4.3",
     "pinia": "^2.1.7",
-    "quasar": "^2.16.4",
+    "quasar": "^2.16.11",
     "vue": "^3.4.21",
     "vue-chartjs": "^5.3.1",
     "vue-router": "^4.3.3",

VueApp/src/CTS/assets/cts.css

@@ -0,0 +1,110 @@
+.assessmentGroup {
+    border-top: 1px solid silver;
+}
+/*
+.assessmentbubble {
+    width: 15px;
+    height: 15px;
+    margin-left: 5px;
+    margin-right: 5px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.assessmentbubble.ab5_1 {
+    background-color: rgba(174,235,255,1);
+}
+
+.assessmentbubble.ab5_2 {
+    background-color: rgba(134,198,255,1);
+}
+
+.assessmentbubble.ab5_3 {
+    background-color: rgba(62,127,238,1);
+}
+
+.assessmentbubble.ab5_4 {
+    background-color: rgba(0,44,219,1);
+}
+
+.assessmentbubble.ab5_5 {
+    background-color: rgba(11,3,139,1);
+}
+
+.assessmentIcon.ab5_1 {
+    color: rgba(174,235,255,1);
+}
+
+.assessmentIcon.ab5_2 {
+    color: rgba(134,198,255,1);
+}
+
+.assessmentIcon.ab5_3 {
+    color: rgba(62,127,238,1);
+}
+
+.assessmentIcon.ab5_4 {
+    color: rgba(0,44,219,1);
+}
+
+.assessmentIcon.ab5_5 {
+    color: rgba(11,3,139,1);
+}
+*/
+.assessmentBubble5_1 {
+    color: rgba(62,127,238,.3);
+}
+
+.assessmentBubble5_2 {
+    color: rgba(62,127,238,.7);
+}
+
+.assessmentBubble5_3 {
+    color: rgba(62,127,238,1);
+}
+
+.assessmentBubble5_4 {
+    color: rgba(0,44,175,.8);
+}
+
+.assessmentBubble5_5 {
+    color: rgba(11,3,139,1);
+}
+
+.assessmentBubbleCloser5_1 {
+    color: rgba(2,40,150,.7);
+}
+
+.assessmentBubbleCloser5_2 {
+    color: rgba(2,40,150,.8);
+}
+
+.assessmentBubbleCloser5_3 {
+    color: rgba(2,40,150,.9);
+}
+
+.assessmentBubbleCloser5_4 {
+    color: rgba(2,40,150,.95);
+}
+
+.assessmentBubbleCloser5_5 {
+    color: rgba(2,40,150,1);
+}
+
+/*
+.assessmentbubble.ab5_1 {
+    background-color: rgb(169, 208, 255)
+}
+.assessmentbubble.ab5_2 {
+    background-color: rgb(121, 158, 223)
+}
+.assessmentbubble.ab5_3 {
+    background-color: rgb(78, 108, 189)
+}
+.assessmentbubble.ab5_4 {
+    background-color: rgb(42, 60, 152)
+}
+.assessmentbubble.ab5_5 {
+    background-color: rgb(0, 11, 113) 
+}
+*/

VueApp/src/CTS/components/AssessmentBubble.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+    import { defineProps, defineEmits, ref, watch } from 'vue'
+
+    const props = defineProps({
+        maxValue: {
+            type: Number,
+            required: true
+        },
+        value: {
+            type: Number,
+            required: true
+        },
+        text: {
+            type: String
+        },
+        type: {
+            type: String,
+            default: "bubble"
+        },
+        id: {
+            type: Number,
+            required: false
+        },
+    })
+
+    const emit = defineEmits(["bubbleClick"])
+
+    const classes5 = ["assessmentBubble5_1", "assessmentBubble5_2", "assessmentBubble5_3", "assessmentBubble5_4", "assessmentBubble5_5"]
+    const classes5_closer = ["assessmentBubbleCloser5_1", "assessmentBubbleCloser5_2", "assessmentBubbleCloser5_3", "assessmentBubbleCloser5_4", "assessmentBubbleCloser5_5"]
+    const clockIcons5 = ["sym_o_clock_loader_10", "sym_o_clock_loader_40", "sym_o_clock_loader_60", "sym_o_clock_loader_80", "circle"]
+    const barIcons5 = ["horizontal_rule", "density_large", "density_medium", "desnity_small", "format_align_justify"]
+    
+    const bubbleClass = ref("")
+    const bubbleIcon = ref("")
+
+    watch(props, () => {
+        setBubbleAttrs()
+    })
+
+    function clickBubble() {
+        if (props.id !== undefined) {
+            emit("bubbleClick", props.id)
+        }
+    }
+
+    function setBubbleAttrs() {
+        if (props.maxValue == 5 && props.value <= 5 && props.value > 0) {
+            switch(props.type) {
+                case "clock":
+                    bubbleIcon.value = clockIcons5[props.value - 1]
+                    bubbleClass.value = classes5_closer[props.value - 1]
+                    break;
+                case "bar":
+                    bubbleIcon.value = barIcons5[props.value - 1]
+                    bubbleClass.value = classes5_closer[props.value - 1]
+                    break;
+                case "bubble":
+                default:
+                    bubbleIcon.value = "circle"
+                    bubbleClass.value = classes5[props.value - 1]
+                    break;
+
+            }
+        }
+    }
+
+    setBubbleAttrs()
+</script>
+<template>
+    <q-icon :name="bubbleIcon" size="sm" :class="'assessmentIcon ' + bubbleClass" :title="props?.text" @click="clickBubble"></q-icon>
+</template>

VueApp/src/CTS/cts.ts

@@ -7,17 +7,21 @@ import App from './App.vue'
 import { Quasar, Loading, QSpinnerOval } from 'quasar'
 // Import icon libraries
 import '@quasar/extras/material-icons/material-icons.css'
+import '@quasar/extras/material-symbols-outlined/material-symbols-outlined.css'
+import IconSet from 'quasar/icon-set/material-symbols-outlined.js'
 
 // Import Quasar css
 import 'quasar/dist/quasar.css'
 import { useQuasarConfig } from '@/composables/QuasarConfig'
 
 //import our css
 import '@/assets/site.css'
+import '@/cts/assets/cts.css'
 
 const { quasarConfig } = useQuasarConfig()
 const pinia = createPinia()
 const app = createApp(App)
+Quasar.iconSet.set(IconSet)
 app.provide("apiURL", import.meta.env.VITE_API_URL)
 
 app.use(pinia)

VueApp/src/CTS/pages/AssessmentList.vue

@@ -16,6 +16,7 @@
     const assessmentTypes = [{ label: "EPA", value: "EPA" }]
     const paging = ref({ page: 1, sortBy: "enteredOn", descending: true, rowsPerPage: 25, rowsNumber: 100 }) as Ref<any>
     const loading = ref(false)
+    const canViewAll = ref(null) as Ref<boolean | null>
 
     const searchForm = ref({
         service: null as Service | null,
@@ -59,7 +60,15 @@
         await loadAssessments(1, paging.value.rowsPerPage, paging.value.sortBy, paging.value.descending)
     }
 
+    async function getCanViewAllAssessments() {
+        let result = await get(baseUrl + "permissions?access=ViewAllAssessments")
+        canViewAll.value = result.result
+    }
+
     async function loadAssessments(page: number, perPage: number, sortBy: string, descending: boolean) {
+        if (canViewAll.value == null) {
+            await getCanViewAllAssessments()
+        }
         const p = createUrlSearchParams({
             "serviceId": searchForm.value.service?.serviceId,
             "enteredById": searchForm.value.enteredBy?.personId,
@@ -68,6 +77,10 @@
             "dateTo": searchForm.value.dateTo,
         })
 
+        if (!canViewAll.value) {
+            p.set("enteredById", userStore.userInfo.userId != null ? userStore.userInfo.userId.toString() : "")
+        }
+
         switch (assessmentType.value) {
             case "EPA":
                 p.append("type", "1")
@@ -134,7 +147,7 @@
                     </template>
                 </q-select>
             </div>
-            <div class="col-12 col-md-6 col-lg-3">
+            <div class="col-12 col-md-6 col-lg-3" v-if="canViewAll">
                 <q-select outlined dense options-dense label="Entered By" v-model="searchForm.enteredBy" :options="assessors"
                           option-label="fullNameLastFirst" option-value="personId" clearable></q-select>
             </div>
@@ -186,7 +199,8 @@
         </template>
         <template v-slot:body-cell-studentName="props">
             <q-td :props="props">
-                <RouterLink :to="'MyAssessments?student=' + props.row.studentUserId">{{ props.row.studentName }}</RouterLink>
+                <RouterLink :to="'MyAssessments?student=' + props.row.studentUserId" v-if="canViewAll">{{ props.row.studentName }}</RouterLink>
+                <span v-else>{{ props.row.studentName }}</span>
             </q-td>
         </template>
         <template v-slot:body-cell-level="props">

VueApp/src/CTS/pages/CourseList.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+
+</script>
+<template>
+
+</template>