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

package/DetailsDecision.vue

@@ -1,183 +1,183 @@
-<!--
-   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 class="decision-container bg-light">
-    <div v-if="!/^OPEN$/i.test(decision)" class="decision-display">
-      <span>{{ decisionText }}</span>
-      <span>{{ admitPeriod | yearTerm }}</span>
-      <span>{{ decisionDateTime | dateTime }}</span>
-      <span v-if="showUpdatedBy">{{ decisionUpdatedBy }}</span>
-      <span v-if="shortExplanation">{{ decisionExplanation }}</span>
-      <div v-else>
-        {{ truncatedExplanation }}
-        <button @click="showFullExplanation" class="btn btn-sm btn-outline-primary">View</button>
-      </div>
-      <button
-         v-if="!disabledChange && !readOnly"
-         @click="enterDecision"
-         class="btn btn-sm btn-outline-secondary"
-         >Change Decision</button>
-      <span v-else-if="!!disabledChangeMessage" class="to-caps">{{disabledChangeMessage}}</span>
-    </div>
-    <span v-else>
-      <button
-          v-if="!disabledEntry && !readOnly"
-          @click="enterDecision"
-          class="btn btn-outline-secondary block"
-      >Enter Decision</button>
-      <span v-else-if="!!disabledEntryMessage" class="block to-caps">{{disabledEntryMessage}}</span>
-    </span>
-  </div>
-</template>
-<script>
-  import { dateTimeFormat, yearTermLongFormat } from './dateTimeFormat'
-  import get from 'lodash.get'
-  import { mapState, mapGetters } from 'vuex'
-
-  export default {
-    name: 'DetailsDecision',
-    props: {
-      readOnly: {
-        type: Boolean,
-        default: false
-      },
-      disabled: {
-        type: Object, // { [key: ['change', 'entry', 'all']]: Boolean | String }
-        default: () => ({})
-      },
-      showUpdatedBy: {
-        type: Boolean,
-        default: false
-      }
-    },
-    filters: {
-      dateTime: dateTimeFormat,
-      yearTerm: yearTermLongFormat
-    },
-    computed: {
-      ...mapState({
-        decision: state => get(state, 'packet.decision.value', 'OPEN'),
-        decisionText: state => get(
-          state,
-          'packet.decision.reason',
-          get(state, 'packet.decision.value')
-        ),
-        decisionDateTime: state => get(state, 'packet.decision.dateTimeUpdated'),
-        admitPeriod: state => get(state, 'packet.admitPeriod'),
-        decisionExplanation: state => get(state, 'packet.decision.explanation'),
-        decisionUpdatedBy: state => get(state, 'packet.decision.updatedBy')
-      }),
-      disabledChange () {
-        const disabledKeys = Object.keys(this.disabled)
-        if (disabledKeys.includes('all')) {
-          return !!this.disabled.all
-        } else if (disabledKeys.includes('change')) {
-          return !!this.disabled.change
-        } else {
-          return false
-        }
-      },
-      disabledEntry () {
-        const disabledKeys = Object.keys(this.disabled)
-        if (disabledKeys.includes('all')) {
-          return !!this.disabled.all
-        } else if (disabledKeys.includes('entry')) {
-          return !!this.disabled.entry
-        } else {
-          return false
-        }
-      },
-      disabledChangeMessage () {
-        if(typeof this.disabled.change === 'string') {
-          return this.disabled.change
-        } else if (typeof this.disabled.all === 'string') {
-          return this.disabled.all
-        }
-        return ''
-      },
-      disabledEntryMessage () {
-        if(typeof this.disabled.entry === 'string') {
-          return this.disabled.entry
-        } else if (typeof this.disabled.all === 'string') {
-          return this.disabled.all
-        }
-        return ''
-      },
-      shortExplanation () {
-        return this.decisionExplanation.length < 30
-      },
-      truncatedExplanation () {
-        return this.decisionExplanation.substr(0, 26).concat('...')
-      }
-    },
-    methods: {
-      enterDecision () {
-        this.$modal.show('decision-modal')
-      },
-      showFullExplanation () {
-        this.$modal.show('dialog', {
-          title: 'Decision Explanation',
-          buttons: [
-            { title: 'Close' }
-          ],
-          text: this.decisionExplanation
-        })
-      }
-    }
-  }
-</script>
-<style scoped>
-  .block {
-    display: block;
-    text-align: center;
-    width: 100%;
-  }
-
-  .decision-container {
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    line-height: 1.2rem;
-  }
-
-  .decision-value {
-    font-size: 1.15rem;
-  }
-
-  .to-caps {
-    text-transform: uppercase;
-  }
-
-  .decision-display {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-auto-rows: auto;
-    grid-column-gap: 0.5rem;
-  }
-
-  .truncated {
-    position: relative;
-    height: 2.4rem;
-    overflow: hidden;
-  }
-
-  @media only screen and (max-width: 625px) {
-    .decision-container {
-      align-items: center;
-    }
-  }
-</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 class="decision-container bg-light">
+    <div v-if="!/^OPEN$/i.test(decision)" class="decision-display">
+      <span>{{ decisionText }}</span>
+      <span>{{ admitPeriod | yearTerm }}</span>
+      <span>{{ decisionDateTime | dateTime }}</span>
+      <span v-if="showUpdatedBy">{{ decisionUpdatedBy }}</span>
+      <span v-if="shortExplanation">{{ decisionExplanation }}</span>
+      <div v-else>
+        {{ truncatedExplanation }}
+        <button @click="showFullExplanation" class="btn btn-sm btn-outline-primary">View</button>
+      </div>
+      <button
+         v-if="!disabledChange && !readOnly"
+         @click="enterDecision"
+         class="btn btn-sm btn-outline-secondary"
+         >Change Decision</button>
+      <span v-else-if="!!disabledChangeMessage" class="to-caps">{{disabledChangeMessage}}</span>
+    </div>
+    <span v-else>
+      <button
+          v-if="!disabledEntry && !readOnly"
+          @click="enterDecision"
+          class="btn btn-outline-secondary block"
+      >Enter Decision</button>
+      <span v-else-if="!!disabledEntryMessage" class="block to-caps">{{disabledEntryMessage}}</span>
+    </span>
+  </div>
+</template>
+<script>
+  import { dateTimeFormat, yearTermLongFormat } from './dateTimeFormat'
+  import get from 'lodash.get'
+  import { mapState, mapGetters } from 'vuex'
+
+  export default {
+    name: 'DetailsDecision',
+    props: {
+      readOnly: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Object, // { [key: ['change', 'entry', 'all']]: Boolean | String }
+        default: () => ({})
+      },
+      showUpdatedBy: {
+        type: Boolean,
+        default: false
+      }
+    },
+    filters: {
+      dateTime: dateTimeFormat,
+      yearTerm: yearTermLongFormat
+    },
+    computed: {
+      ...mapState({
+        decision: state => get(state, 'packet.decision.value', 'OPEN'),
+        decisionText: state => get(
+          state,
+          'packet.decision.reason',
+          get(state, 'packet.decision.value')
+        ),
+        decisionDateTime: state => get(state, 'packet.decision.dateTimeUpdated'),
+        admitPeriod: state => get(state, 'packet.admitPeriod'),
+        decisionExplanation: state => get(state, 'packet.decision.explanation'),
+        decisionUpdatedBy: state => get(state, 'packet.decision.updatedBy')
+      }),
+      disabledChange () {
+        const disabledKeys = Object.keys(this.disabled)
+        if (disabledKeys.includes('all')) {
+          return !!this.disabled.all
+        } else if (disabledKeys.includes('change')) {
+          return !!this.disabled.change
+        } else {
+          return false
+        }
+      },
+      disabledEntry () {
+        const disabledKeys = Object.keys(this.disabled)
+        if (disabledKeys.includes('all')) {
+          return !!this.disabled.all
+        } else if (disabledKeys.includes('entry')) {
+          return !!this.disabled.entry
+        } else {
+          return false
+        }
+      },
+      disabledChangeMessage () {
+        if(typeof this.disabled.change === 'string') {
+          return this.disabled.change
+        } else if (typeof this.disabled.all === 'string') {
+          return this.disabled.all
+        }
+        return ''
+      },
+      disabledEntryMessage () {
+        if(typeof this.disabled.entry === 'string') {
+          return this.disabled.entry
+        } else if (typeof this.disabled.all === 'string') {
+          return this.disabled.all
+        }
+        return ''
+      },
+      shortExplanation () {
+        return this.decisionExplanation.length < 30
+      },
+      truncatedExplanation () {
+        return this.decisionExplanation.substr(0, 26).concat('...')
+      }
+    },
+    methods: {
+      enterDecision () {
+        this.$modal.show('decision-modal')
+      },
+      showFullExplanation () {
+        this.$modal.show('dialog', {
+          title: 'Decision Explanation',
+          buttons: [
+            { title: 'Close' }
+          ],
+          text: this.decisionExplanation
+        })
+      }
+    }
+  }
+</script>
+<style scoped>
+  .block {
+    display: block;
+    text-align: center;
+    width: 100%;
+  }
+
+  .decision-container {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    line-height: 1.2rem;
+  }
+
+  .decision-value {
+    font-size: 1.15rem;
+  }
+
+  .to-caps {
+    text-transform: uppercase;
+  }
+
+  .decision-display {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-auto-rows: auto;
+    grid-column-gap: 0.5rem;
+  }
+
+  .truncated {
+    position: relative;
+    height: 2.4rem;
+    overflow: hidden;
+  }
+
+  @media only screen and (max-width: 625px) {
+    .decision-container {
+      align-items: center;
+    }
+  }
+</style>

package/DetailsDecisionHistory.vue

@@ -1,56 +1,56 @@
-<!--
-  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>
-  <table class="table table-sm table-borderless">
-    <thead>
-      <tr>
-        <th>Admit Period</th>
-        <th>Applicant Type</th>
-        <th>Decision</th>
-        <th>Level</th>
-        <th>Qualifier</th>
-        <th>Officer</th>
-        <th>Date</th>
-        <th>Note</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="( row, i ) of decisionHistory" :key="i">
-        <td>{{row.admitPeriod | yearTermLongFormat}}</td>
-        <td>{{row.applicantType}}</td>
-        <td>{{row.decision}}</td>
-        <td>{{row.level}}</td>
-        <td>{{row.qualifier}}</td>
-        <td>{{row.officer}}</td>
-        <td>{{row.date | dateFormat}}</td>
-        <td>{{row.note}}</td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-<script>
-import { mapGetters } from 'vuex'
-import { dateFormat, yearTermLongFormat } from './dateTimeFormat'
-
-export default {
-  name: 'DetailsDecisionHistory',
-  filters: { dateFormat, yearTermLongFormat },
-  computed: {
-    ...mapGetters(['decisionHistory'])
-  }
-}
-
-</script>
+<!--
+  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>
+  <table class="table table-sm table-borderless">
+    <thead>
+      <tr>
+        <th>Admit Period</th>
+        <th>Applicant Type</th>
+        <th>Decision</th>
+        <th>Level</th>
+        <th>Qualifier</th>
+        <th>Officer</th>
+        <th>Date</th>
+        <th>Note</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="( row, i ) of decisionHistory" :key="i">
+        <td>{{row.admitPeriod | yearTermLongFormat}}</td>
+        <td>{{row.applicantType}}</td>
+        <td>{{row.decision}}</td>
+        <td>{{row.level}}</td>
+        <td>{{row.qualifier}}</td>
+        <td>{{row.officer}}</td>
+        <td>{{row.date | dateFormat}}</td>
+        <td>{{row.note}}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { dateFormat, yearTermLongFormat } from './dateTimeFormat'
+
+export default {
+  name: 'DetailsDecisionHistory',
+  filters: { dateFormat, yearTermLongFormat },
+  computed: {
+    ...mapGetters(['decisionHistory'])
+  }
+}
+
+</script>

package/DetailsEndorsement.vue

@@ -1,74 +1,74 @@
-<!--
-   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 class="p-2">
-    <span :class="statusClass">
-      <font-awesome-icon :icon="icon" />
-
-      {{endorsementStatus}}
-      <small>
-        <a :href="endorseHref" target="_blank" data-disable-navigate="true">
-          (view details)
-        </a>
-      </small>
-    </span>
-  </div>
-</template>
-<script>
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faCheck, faHourglassHalf, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
-  import { mapState, mapGetters } from 'vuex'
-
-  export default {
-    name: 'DetailsEndorsement',
-    components: { FontAwesomeIcon },
-    computed: {
-      ...mapState({
-        env: 'environment',
-        byuId: state => state.application.applicantId
-      }),
-      ...mapGetters([ 'flagByValue' ]),
-      endorsementPendingFlag () { return this.flagByValue('EP') },
-      endorsementDeniedFlag () { return this.flagByValue('ED') },
-      endorsementIssuesFlag () { return this.flagByValue('EI') },
-      icon () {
-        if (this.endorsementDeniedFlag.isActive) return faExclamationTriangle
-        else if (this.endorsementIssuesFlag.isActive) return faExclamationTriangle
-        else if (this.endorsementPendingFlag.isActive) return faHourglassHalf
-        return faCheck
-      },
-      statusClass () {
-        if (this.endorsementDeniedFlag.isActive) return { 'text-danger': true }
-        else if (this.endorsementIssuesFlag.isActive) return { 'text-danger': true }
-        else if (this.endorsementPendingFlag.isActive) return { 'text-dark': true, 'font-weight-bold': true }
-        return { 'text-success': true }
-      },
-      endorsementStatus () {
-        if (this.endorsementDeniedFlag.isActive) return `Endorsement Denied`
-        else if (this.endorsementIssuesFlag.isActive) return `Endorsement Issues`
-        else if (this.endorsementPendingFlag.isActive) return `Endorsement Pending`
-        return `Endorsement Complete`
-      },
-      endorseHref () {
-        return this.env !== 'development'
-          ? `https://endorse.byu.edu/admin?byuId=${this.byuId}`
-          : `https://endorse-dev.byu.edu/admin?byuId=${this.byuId}`
-      }
-    }
-  }
-</script>
-<style scoped>
-</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 class="p-2">
+    <span :class="statusClass">
+      <font-awesome-icon :icon="icon" />
+
+      {{endorsementStatus}}
+      <small>
+        <a :href="endorseHref" target="_blank" data-disable-navigate="true">
+          (view details)
+        </a>
+      </small>
+    </span>
+  </div>
+</template>
+<script>
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import { faCheck, faHourglassHalf, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+  import { mapState, mapGetters } from 'vuex'
+
+  export default {
+    name: 'DetailsEndorsement',
+    components: { FontAwesomeIcon },
+    computed: {
+      ...mapState({
+        env: 'environment',
+        byuId: state => state.application.applicantId
+      }),
+      ...mapGetters([ 'flagByValue' ]),
+      endorsementPendingFlag () { return this.flagByValue('EP') },
+      endorsementDeniedFlag () { return this.flagByValue('ED') },
+      endorsementIssuesFlag () { return this.flagByValue('EI') },
+      icon () {
+        if (this.endorsementDeniedFlag.isActive) return faExclamationTriangle
+        else if (this.endorsementIssuesFlag.isActive) return faExclamationTriangle
+        else if (this.endorsementPendingFlag.isActive) return faHourglassHalf
+        return faCheck
+      },
+      statusClass () {
+        if (this.endorsementDeniedFlag.isActive) return { 'text-danger': true }
+        else if (this.endorsementIssuesFlag.isActive) return { 'text-danger': true }
+        else if (this.endorsementPendingFlag.isActive) return { 'text-dark': true, 'font-weight-bold': true }
+        return { 'text-success': true }
+      },
+      endorsementStatus () {
+        if (this.endorsementDeniedFlag.isActive) return `Endorsement Denied`
+        else if (this.endorsementIssuesFlag.isActive) return `Endorsement Issues`
+        else if (this.endorsementPendingFlag.isActive) return `Endorsement Pending`
+        return `Endorsement Complete`
+      },
+      endorseHref () {
+        return this.env !== 'development'
+          ? `https://endorse.byu.edu/admin?byuId=${this.byuId}`
+          : `https://endorse-dev.byu.edu/admin?byuId=${this.byuId}`
+      }
+    }
+  }
+</script>
+<style scoped>
+</style>