@byu-oit/vue-decision-processing-components 8.28.4 → 8.29.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.29.0](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.28.4...v8.29.0) (2022-09-23)
+
+
+### Features
+
+* adds call to app service incident api ([61605d3](https://github.com/byu-oit/vue-decision-processing-components/commit/61605d35f23c49d8273f4689ac2e6d1b1394d6ae))
+* adds SupportDialog and bug button ([41e6b3f](https://github.com/byu-oit/vue-decision-processing-components/commit/41e6b3faaf95c73273dd88c0b5fac47db4106e5d))
+* adds SupportDialog to DetailsHeader ([5baa0dc](https://github.com/byu-oit/vue-decision-processing-components/commit/5baa0dc75b55cd6a54df7ffb69f7e8025580d9fe))
+
 ### [8.28.4](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.28.3...v8.28.4) (2022-08-17)
 
 ### [8.28.3](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.28.2...v8.28.3) (2022-08-01)

package/Details.vue

@@ -38,6 +38,7 @@
     <FlagDialog />
     <DecisionDialog />
     <NoteDialog />
+    <SupportDialog />
   </section>
 </template>
 <script>
@@ -55,6 +56,7 @@
   import FlagDialog from './FlagDialog'
   import DecisionDialog from './DecisionDialog'
   import NoteDialog from './NoteDialog'
+  import SupportDialog from './SupportDialog'
   import { mapState, mapGetters, mapActions } from 'vuex'
 
   export default {
@@ -72,6 +74,7 @@
       FlagDialog,
       DecisionDialog,
       NoteDialog,
+      SupportDialog,
       Spinner
     },
     created() {

package/DetailsHeader.vue

@@ -33,6 +33,11 @@
       <div class="actions bg-light text-body">
         <slot name="actionsCompact"></slot>
       </div>
+      <div class="bug">
+        <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'">
@@ -54,8 +59,14 @@
       <div class="actions bg-light text-body">
         <slot name="actions"></slot>
       </div>
+      <div class="bug">
+        <button class="btn btn-sm btn-outline-warning" @click="openSupportModal">
+          <font-awesome-icon :icon="bug" />
+        </button>
+      </div>
     </div>
     </transition>
+    <SupportDialog />
   </div>
 </template>
 <script>
@@ -64,12 +75,17 @@ 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
+    StarredIndicator,
+    FontAwesomeIcon
   },
   props: {
     hideStar: {
@@ -95,6 +111,9 @@ export default {
       application: 'application'
     }),
     ...mapGetters(['flagByValue']),
+    bug() {
+      return faBug
+    },
     userFlag () {
       const byuId = get(this.userInfo, 'byuId')
       if (!byuId) {
@@ -156,6 +175,9 @@ export default {
     mouseleave (event) {
       this.hovering = false
       this.handleScroll(event)
+    },
+    openSupportModal () {
+      this.$modal.show('support-modal')
     }
   },
   filters: { yearTermFormat },
@@ -180,12 +202,12 @@ export default {
 
 .applicant-details {
   display: grid;
-  grid-template-columns: 3rem minmax(40vw, 2fr) minmax(20vw, 1fr) minmax(auto, 30vw);
+  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"
-  "star applicant additional actions";
+  "star name additional actions bug"
+  "star applicant additional actions bug";
 }
 
 .star {
@@ -213,6 +235,12 @@ export default {
   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;

package/SupportDialog.vue

@@ -0,0 +1,158 @@
+<!--
+   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>
+  <modal
+      name="support-modal"
+      height="auto"
+      draggable
+      @opened="resetData"
+  >
+    <template v-if="success">
+      <div class="modal-body d-flex flex-column align-items-center">
+        <span class="h3 text-success"><font-awesome-icon :icon="check" /></span>
+        <span class="h5">Your incident has been submitted successfully.</span>
+        <button class="btn btn-sm btn-outline-secondary mt-2" type="button" @click="close">Close</button>
+      </div>
+    </template>
+    <form v-else @submit.prevent="submitIssue">
+      <div class="modal-header bg-light">Submit Incident</div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label for="short-description">Subject</label>
+          <input v-model="shortDescription" id="short-description" class="form-control" required>
+        </div>
+        <div class="form-group">
+          <label for="description">Description</label>
+          <textarea v-model="description" id="description" class="form-control"></textarea>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-sm btn-outline-primary" type="submit" :disabled="loading">Submit</button>
+        <button class="btn btn-sm btn-outline-secondary" type="button" @click="close" :disabled="loading">Cancel</button>
+      </div>
+    </form>
+  </modal>
+</template>
+<script>
+import { mapState, mapGetters, mapMutations } from 'vuex'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+
+export default {
+  name: 'SupportDialog',
+  components: {
+    FontAwesomeIcon
+  },
+  props: {
+  },
+  data() {
+    return {
+      description: '',
+      shortDescription: '',
+      success: false
+    }
+  },
+  computed: {
+    ...mapState({
+      env: 'environment',
+      institution: state => state.ui.institution
+    }),
+    ...mapGetters(['loading']),
+    host () {
+      return this.env.NODE_ENV === 'production' ? 'api.byu.edu' : 'api-sandbox.byu.edu'
+    },
+    institutionSvc () {
+      switch (this.institution) {
+        case ('PW'):
+          return 'byupw'
+        case ('EC'):
+          return 'ldsbc'
+        case ('BYUH'):
+          return 'byuh'
+        case ('BYUI'):
+          return 'byui'
+        default:
+          return ''
+      }
+    },
+    check() {
+      return faCheckCircle
+    }
+  },
+  methods: {
+    ...mapMutations(['incrementFetchCount', 'decrementFetchCount']),
+    resetData () {
+      this.success = false
+      this.description = ''
+      this.shortDescription = ''
+    },
+    close () {
+      this.$modal.hide('support-modal')
+    },
+    async submitIssue () {
+      const { preferredFirstName, surname } = window.byu.user
+      const callerId = `${preferredFirstName} ${surname}`
+      // const serializedState = btoa(JSON.stringify(this.$store.state))
+      const options = {
+        url: `https://${this.host}/domain/applications/${this.institutionSvc}/admission/v1/proxy/incident`,
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          business_service: 'CES Admissions Application',
+          assignment_group: 'OIT-SpecOps Academics',
+          priority: '4',
+          caller_id: callerId,
+          short_description: this.shortDescription,
+          description: [this.description.trim(), '\n', callerId, location.href].join('\n')
+        })
+      }
+      this.incrementFetchCount()
+      const { status } = await window.byu.auth.request(options)
+      this.decrementFetchCount()
+      if (status < 400) {
+        this.success = true
+      }
+      if (status === 404) {
+        console.error(`Could not submit incident: ${status}`)
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+:root {
+  --radius: 3px;
+}
+.modal-header,
+.modal-body,
+.modal-footer {
+  padding: 0.5rem 1rem;
+  color: #333;
+}
+.modal-header {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+.modal-footer {
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+textarea.form-control {
+  height: 125px;
+}
+</style>

package/package.json

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