@byu-oit/vue-decision-processing-components 8.25.2 → 8.26.0

package/AdmitPeriodConfig.vue

@@ -61,6 +61,7 @@ export default {
 	accept: 'application/json',
 	'content-type': 'application/json'
       }
+      // This config is hosted in the domain-common-admit-periods repository
       const url = `https://admit-period-vocab-cdn.ces-admissionssupport-prd.amazon.byu.edu/${this.school}-admit-periods.json`
       const options = { headers, url }
       const r = await window.byu.auth.request(options)

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [8.26.0](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.25.4...v8.26.0) (2022-06-03)
+
+
+### Features
+
+* collapsing DetailsHeader - when scrolling and not mouseover - header collapses to a smaller size. ([05ef93a](https://github.com/byu-oit/vue-decision-processing-components/commit/05ef93aaaee0c05c0a6a1651b72d35f0a7cd2773))
+
+### [8.25.4](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.25.3...v8.25.4) (2022-06-01)
+
+
+### Bug Fixes
+
+* adjust active admit periods ([31793d0](https://github.com/byu-oit/vue-decision-processing-components/commit/31793d09f1e67a6656a68cd1c9cf7cb83741b7c8))
+
+### [8.25.3](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.25.2...v8.25.3) (2022-05-09)
+
+
+### Bug Fixes
+
+* add date processed to the test scores table ([43bee99](https://github.com/byu-oit/vue-decision-processing-components/commit/43bee99552378bb21d841d951f8beec1b8ba0ca4))
+
 ### [8.25.2](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.25.1...v8.25.2) (2022-03-25)
 
 

package/DetailsHeader.vue

@@ -14,24 +14,48 @@
    limitations under the License.
 -->
 <template>
-  <div class="applicant-details">
-    <div class="star" v-if="!hideStar && appId" :title="userFlag.isActive ? 'Remove from Tracking List' : 'Add to Tracking List'">
-      <starred-indicator :set="userFlag.isActive" @click="toggleApplicationStar" />
-    </div>
+  <div ref="container" class="header-container bg-secondary text-white" @mouseenter="mouseenter" @mouseleave="mouseleave">
 
-    <div class="name">
-      <slot name="applicantName">
-        <h2>{{application.applicantName}}</h2>
-      </slot>
+    <transition name="scale">
+    <div v-if="compact" class="applicant-details compact" key="compact">
+      <div class="star" v-if="!hideStar && appId" :title="userFlag.isActive ? 'Remove from Tracking List' : 'Add to Tracking List'">
+        <starred-indicator :set="userFlag.isActive" @click="toggleApplicationStar" />
+      </div>
+      <div class="name">
+        <slot name="applicantNameCompact"></slot>
+      </div>
+      <div class="applicant">
+        <slot name="applicantInfoCompact"></slot>
+      </div>
+      <div class="additional">
+        <slot name="additionalInfoCompact"></slot>
+      </div>
+      <div class="actions bg-light">
+        <slot name="actionsCompact"></slot>
+      </div>
     </div>
-    <div class="applicant">
-      <slot name="applicantInfo">
+    <div v-else class="applicant-details" key="expanded">
+      <div class="star" v-if="!hideStar && appId" :title="userFlag.isActive ? 'Remove from Tracking List' : 'Add to Tracking List'">
+        <starred-indicator :set="userFlag.isActive" @click="toggleApplicationStar" />
+      </div>
+      <div class="name">
+        <slot name="applicantName">
+        <h2>{{application.applicantName}}</h2>
+        </slot>
+      </div>
+      <div class="applicant">
+        <slot name="applicantInfo">
         <ApplicantInfo/>
-      </slot>
-    </div>
-    <div class="additional">
-      <slot name="additionalInfo"></slot>
+        </slot>
+      </div>
+      <div class="additional">
+        <slot name="additionalInfo"></slot>
+      </div>
+      <div class="actions bg-light text-body">
+        <slot name="actions"></slot>
+      </div>
     </div>
+    </transition>
   </div>
 </template>
 <script>
@@ -56,6 +80,12 @@ export default {
       type: String
     }
   },
+  data () {
+    return {
+      compact: false,
+      hovering: false
+    }
+  },
   computed: {
     ...mapState({
       userInfo: 'userInfo',
@@ -81,20 +111,56 @@ export default {
         flagValue: 'S-' + this.userInfo.byuId,
         flagState: userFlagSet ? 'clear' : 'set'
       })
+    },
+    handleScroll (event) {
+      if (!this.hovering) {
+        const containerElem = this.$refs.container
+        const containerTopY = containerElem.getBoundingClientRect().top
+        // Prevent flickering when just over the scroll threshold
+        if (this.compact) {
+          this.compact = containerTopY < 50
+        } else {
+          this.compact = containerTopY <= 0
+        }
+      }
+    },
+    mouseenter () {
+      this.compact = false
+      this.hovering = true
+    },
+    mouseleave (event) {
+      this.hovering = false
+      this.handleScroll(event)
     }
   },
-  filters: { yearTermFormat }
+  filters: { yearTermFormat },
+  mounted () {
+    window.addEventListener("scroll", this.handleScroll)
+  },
+  beforeUnmount () {
+    window.removeEventListener("scroll", this.handleScroll)
+  }
 }
 </script>
 <style scoped>
+.header-container {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.header-container > * {
+  grid-column: 1/2;
+  grid-row: 1/2;
+}
+
 .applicant-details {
   display: grid;
-  grid-template-columns: 3rem 2fr 1fr;
+  grid-template-columns: 3rem minmax(40vw, 2fr) minmax(20vw, 1fr) minmax(auto, 30vw);
   grid-template-rows: repeat(2, auto);
   grid-column-gap: 0.5rem;
   grid-template-areas:
-  "star name additional"
-  "star applicant additional";
+  "star name additional actions"
+  "star applicant additional actions";
 }
 
 .star {
@@ -117,4 +183,24 @@ export default {
   padding: 0.5rem;
 }
 
+.actions {
+  grid-area: actions;
+  padding: 0.5rem;
+}
+
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.scale-enter {
+  opacity: 0;
+  transform: scaleY(0.5) translateY(0.5rem);
+}
+
+.scale-leave-to {
+  opacity: 0;
+  transform: scaleY(0.5) translateY(-0.5rem);
+}
+
 </style>

package/DetailsTestScores.vue

@@ -18,7 +18,8 @@
     <thead>
       <tr>
         <th>Test Name</th>
-        <th>Date</th>
+        <th>Test Date</th>
+        <th>Date Processed</th>
         <th class="composite">Composite Score</th>
         <th>Scores</th>
       </tr>
@@ -37,6 +38,7 @@
           </template>
         </td>
         <td>{{ts.testDate | dateFormat}}</td>
+        <td>{{ts.dateProcessed | dateFormat}}</td>
         <td v-if="/^SAT/.test(ts.testName)" class="composite">
           <span class="badge badge-primary x-lg">{{ts.compositeScore}}</span>
           <br>

package/FilterButtonAdmitPeriod.vue

@@ -50,9 +50,11 @@ export default {
       type: Array,
       default() {
         return [
-          '20221',
           '20223',
           '20225',
+          '20231',
+          '20233',
+          '20235',
         ]
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byu-oit/vue-decision-processing-components",
-  "version": "8.25.2",
+  "version": "8.26.0",
   "description": "Vue components shared between decision processing systems for the CES schools.",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",

package/parsers/application.js

@@ -214,6 +214,7 @@ export const parseTestScores = a => {
   const testScores = get(a, 'values', []).map(t => {
     return {
       testDate: get(t, 'test_date.value'),
+      dateProcessed: get(t, 'date_time_reported.value'),
       testName: get(t, 'test_name.value'),
       testComponents: get(t, 'test_components').map(parseTestComponents),
       compositeScore: get(t, 'composite_score.value'),

package/vuexModules/application/testScores.js

@@ -2,6 +2,7 @@
  * shape of test scores:
  * {
  *   testDate: '',
+ *   dateProcessed: '',
  *   testName: '',
  *   testComponents: '',
  *   compositeScore: '',