@byu-oit/vue-decision-processing-components 8.25.4 → 8.27.1

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/ApplicantInfo.vue

@@ -16,7 +16,10 @@
 <template>
   <div class="applicant" slot="applicantInfo">
     <em>{{ applicantType }}</em>
-    <div>
+    <div v-if="compact">
+      {{ netId }}
+    </div>
+    <div v-else>
       {{ netId }}
       |
       {{ byuId }}
@@ -29,7 +32,12 @@
       |
       {{ religion }}
     </div>
-    <div>
+    <div v-if="compact">
+      {{ admitPeriod | yearTerm }}
+      |
+      {{ applicationStatus }}
+    </div>
+    <div v-else>
       {{ admitPeriod | yearTerm }}
       |
       {{ applicantMajor }}
@@ -45,6 +53,12 @@ import { mapState } from 'vuex'
 export default {
   name: 'ApplicantInfo',
   filters: { dateFormat },
+  props: {
+    compact: {
+      type: Boolean,
+      default: false
+    }
+  },
   computed: {
     ...mapState({
       applicantType: state => state.packet.applicantType ? state.packet.applicantType : state.application.applicantType,

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 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.27.1](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.27.0...v8.27.1) (2022-06-15)
+
+
+### Bug Fixes
+
+* styling and errors due to (sometimes) missing ref element ([28784c3](https://github.com/byu-oit/vue-decision-processing-components/commit/28784c386f464659a2897242c18f944c8c63f5aa))
+
+## [8.27.0](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.26.1...v8.27.0) (2022-06-07)
+
+
+### Features
+
+* add compact option ([f9b5d98](https://github.com/byu-oit/vue-decision-processing-components/commit/f9b5d986155ccb5aca813466cdf150124b1a2a99))
+
+### [8.26.1](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.26.0...v8.26.1) (2022-06-03)
+
+
+### Bug Fixes
+
+* scroll flicker ([3614ced](https://github.com/byu-oit/vue-decision-processing-components/commit/3614ced02822db8e9d6d97b6df0910e1d25a0484))
+
+## [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)
 
 

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 text-body">
+        <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,15 @@ export default {
       type: String
     }
   },
+  data () {
+    return {
+      compact: false,
+      justShrank: false,
+      shrinkYLimit: 0,
+      justGrew: false,
+      hovering: false
+    }
+  },
   computed: {
     ...mapState({
       userInfo: 'userInfo',
@@ -81,20 +114,78 @@ export default {
         flagValue: 'S-' + this.userInfo.byuId,
         flagState: userFlagSet ? 'clear' : 'set'
       })
+    },
+    handleScroll () {
+      if (!this.hovering) {
+        const containerElem = this.$refs.container
+        if (!containerElem || !containerElem.getBoundingClientRect) {
+          return
+        }
+        const containerTopY = containerElem.getBoundingClientRect().top
+        // Prevent flickering when just over the scroll threshold
+        if (this.justShrank) {
+          if (containerTopY > 0) {
+            this.shrinkYLimit = containerTopY
+            this.justShrank = false
+          }
+        } else if (containerTopY < this.shrinkYLimit) {
+          this.shrinkYLimit = containerTopY
+        }
+        if (this.justGrew) {
+          if (containerTopY > 0) {
+            this.justGrew = false
+          }
+        }
+        if (this.compact) {
+          if (containerTopY > this.shrinkYLimit) {
+            this.compact = false
+            this.justGrew = true
+          }
+        } else {
+          if (!this.justGrew && containerTopY <= 0) {
+            this.justShrank = true
+            this.compact = true
+          }
+        }
+      }
+    },
+    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 +208,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/package.json

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