@byu-oit/vue-decision-processing-components 8.35.7 → 8.35.8

package/DetailsHeader.vue

@@ -1,263 +1,263 @@
-<!--
-   Copyright 2018 Brigham Young University
-
-   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
-
-       http://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.
--->
-<template>
-  <div ref="container" class="header-container bg-secondary text-white" @mouseenter="mouseenter" @mouseleave="mouseleave">
-
-    <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 class="bug" v-if="!hideBug">
-        <button class="btn btn-sm btn-outline-warning" title="Submit an incident" @click="openSupportModal">
-          <font-awesome-icon :icon="bug" />
-        </button>
-      </div>
-    </div>
-    <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>
-      </div>
-      <div class="actions bg-light text-body">
-        <slot name="actions"></slot>
-      </div>
-      <div class="bug" v-if="!hideBug">
-        <button class="btn btn-sm btn-outline-warning" @click="openSupportModal">
-          <font-awesome-icon :icon="bug" />
-        </button>
-      </div>
-    </div>
-    </transition>
-    <SupportDialog />
-  </div>
-</template>
-<script>
-import get from 'lodash.get'
-import { mapState, mapGetters, mapActions } from 'vuex'
-import StarredIndicator from './StarredIndicator'
-import ApplicantInfo from './ApplicantInfo'
-import { yearTermFormat } from './dateTimeFormat'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faBug } from '@fortawesome/free-solid-svg-icons'
-import SupportDialog from './SupportDialog'
-
-export default {
-  name: 'DetailsHeader',
-  components: {
-    SupportDialog,
-    ApplicantInfo,
-    StarredIndicator,
-    FontAwesomeIcon
-  },
-  props: {
-    hideStar: {
-      type: Boolean,
-      default: false
-    },
-    hideBug:{
-      type:Boolean,
-      default: false
-    },
-    appId: {
-      type: String
-    }
-  },
-  data () {
-    return {
-      compact: false,
-      justShrank: false,
-      shrinkYLimit: 0,
-      justGrew: false,
-      hovering: false
-    }
-  },
-  computed: {
-    ...mapState({
-      userInfo: 'userInfo',
-      application: 'application'
-    }),
-    ...mapGetters(['flagByValue']),
-    bug() {
-      return faBug
-    },
-    userFlag () {
-      const byuId = get(this.userInfo, 'byuId')
-      if (!byuId) {
-        return null
-      }
-      return this.flagByValue('S-' + byuId)
-    }
-  },
-  methods: {
-    ...mapActions(['flagUpdate']),
-    toggleApplicationStar() {
-      if (!this.appId) return
-      const userFlagSet = this.userFlag.isActive
-      this.flagUpdate({
-        applicationUuid: this.appId,
-        note: userFlagSet ? `Don't track this application` : `Track this application`,
-        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)
-    },
-    openSupportModal () {
-      this.$modal.show('support-modal')
-    }
-  },
-  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 minmax(40vw, 2fr) minmax(20vw, 1fr) minmax(auto, 30vw) 2.5rem;
-  grid-template-rows: repeat(2, auto);
-  grid-column-gap: 0.5rem;
-  grid-template-areas:
-  "star name additional actions bug"
-  "star applicant additional actions bug";
-}
-
-.star {
-  grid-area: star;
-  align-self: center;
-  padding: 0.75rem;
-  cursor: pointer;
-}
-
-.name {
-  grid-area: name;
-  margin-bottom: 0;
-  text-transform: initial;
-}
-
-.applicant { grid-area: applicant; }
-
-.additional {
-  grid-area: additional;
-  padding: 0.5rem;
-}
-
-.actions {
-  grid-area: actions;
-  padding: 0.5rem;
-}
-
-.bug {
-  grid-area: bug;
-  margin-left: -0.5rem;
-  place-self: center;
-}
-
-.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>
+<!--
+   Copyright 2018 Brigham Young University
+
+   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
+
+       http://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.
+-->
+<template>
+  <div ref="container" class="header-container bg-secondary text-white" @mouseenter="mouseenter" @mouseleave="mouseleave">
+
+    <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 class="bug" v-if="!hideBug">
+        <button class="btn btn-sm btn-outline-warning" title="Submit an incident" @click="openSupportModal">
+          <font-awesome-icon :icon="bug" />
+        </button>
+      </div>
+    </div>
+    <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>
+      </div>
+      <div class="actions bg-light text-body">
+        <slot name="actions"></slot>
+      </div>
+      <div class="bug" v-if="!hideBug">
+        <button class="btn btn-sm btn-outline-warning" @click="openSupportModal">
+          <font-awesome-icon :icon="bug" />
+        </button>
+      </div>
+    </div>
+    </transition>
+    <SupportDialog />
+  </div>
+</template>
+<script>
+import get from 'lodash.get'
+import { mapState, mapGetters, mapActions } from 'vuex'
+import StarredIndicator from './StarredIndicator'
+import ApplicantInfo from './ApplicantInfo'
+import { yearTermFormat } from './dateTimeFormat'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faBug } from '@fortawesome/free-solid-svg-icons'
+import SupportDialog from './SupportDialog'
+
+export default {
+  name: 'DetailsHeader',
+  components: {
+    SupportDialog,
+    ApplicantInfo,
+    StarredIndicator,
+    FontAwesomeIcon
+  },
+  props: {
+    hideStar: {
+      type: Boolean,
+      default: false
+    },
+    hideBug:{
+      type:Boolean,
+      default: false
+    },
+    appId: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      compact: false,
+      justShrank: false,
+      shrinkYLimit: 0,
+      justGrew: false,
+      hovering: false
+    }
+  },
+  computed: {
+    ...mapState({
+      userInfo: 'userInfo',
+      application: 'application'
+    }),
+    ...mapGetters(['flagByValue']),
+    bug() {
+      return faBug
+    },
+    userFlag () {
+      const byuId = get(this.userInfo, 'byuId')
+      if (!byuId) {
+        return null
+      }
+      return this.flagByValue('S-' + byuId)
+    }
+  },
+  methods: {
+    ...mapActions(['flagUpdate']),
+    toggleApplicationStar() {
+      if (!this.appId) return
+      const userFlagSet = this.userFlag.isActive
+      this.flagUpdate({
+        applicationUuid: this.appId,
+        note: userFlagSet ? `Don't track this application` : `Track this application`,
+        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)
+    },
+    openSupportModal () {
+      this.$modal.show('support-modal')
+    }
+  },
+  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 minmax(40vw, 2fr) minmax(20vw, 1fr) minmax(auto, 30vw) 2.5rem;
+  grid-template-rows: repeat(2, auto);
+  grid-column-gap: 0.5rem;
+  grid-template-areas:
+  "star name additional actions bug"
+  "star applicant additional actions bug";
+}
+
+.star {
+  grid-area: star;
+  align-self: center;
+  padding: 0.75rem;
+  cursor: pointer;
+}
+
+.name {
+  grid-area: name;
+  margin-bottom: 0;
+  text-transform: initial;
+}
+
+.applicant { grid-area: applicant; }
+
+.additional {
+  grid-area: additional;
+  padding: 0.5rem;
+}
+
+.actions {
+  grid-area: actions;
+  padding: 0.5rem;
+}
+
+.bug {
+  grid-area: bug;
+  margin-left: -0.5rem;
+  place-self: center;
+}
+
+.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>