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

package/FlagDialog.vue

@@ -1,129 +1,129 @@
-<!--
-   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="flag-modal"
-  height="auto"
-  draggable
-  @before-open="beforeOpen"
-  @before-close="beforeClose"
-  >
-  <div class="bg-light p-1 text-uppercase">Change Flag</div>
-  <div class="flag-dialog content-padding">
-    <h2>{{flag.name | flagSuffix}}</h2>
-    <div v-if="editing" class="edit-area">
-      <textarea v-if="!hideNote" v-model="note" class="new-note form-control" placeholder="Note (optional)..."></textarea>
-    </div>
-    <div v-else-if="flag.isSet">
-      Set By <strong>{{flag.setBy}}</strong> on <strong>{{flag.dateTimeSet | dateTime}}</strong>
-      <div v-if="flag.isCleared">
-        Cleared By <strong>{{flag.clearedBy}}</strong> on <strong>{{flag.dateTimeCleared | dateTime}}</strong>
-      </div>
-    </div>
-    <div v-else>
-      Flag is not currently set.
-    </div>
-    <span class="modal-footer">
-      <button v-if="editing" class="btn btn-outline-primary" @click="updateFlag">Save</button>
-      <button v-else class="btn btn-outline-primary" @click="startEditing">{{flag.isSet ? flag.isCleared ? 'Reset' : 'Clear' : 'Set'}} Flag</button>
-      <button class="btn btn-outline-secondary" @click="close">Cancel</button>
-    </span>
-  </div>
-  </modal>
-</template>
-<script>
-import { mapActions } from 'vuex'
-
-export default {
-  name: 'FlagDialog',
-  filters: {
-    flagSuffix (val) {
-      if (!val) return val
-      if (typeof val !== 'string') return val
-      if (/ tag$/i.test(val)) return val
-      if (/ flag$/i.test(val)) return val
-      return `${val} Flag`
-    }
-  },
-  props: {
-    appId: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      flag: {},
-      editing: false,
-      hideNote: false,
-      note: ''
-    }
-  },
-  watch: {
-    flag (newValue) {
-      // Go straight to editing if the flag is unset, no status to display
-      if (newValue.isActive !== undefined && !newValue.isActive) {
-        this.editing = true
-      }
-    }
-  },
-  methods: {
-    ...mapActions(['flagUpdate']),
-    beforeOpen (event) {
-      const { flag, editing = false, hideNote = false } = event.params
-      this.flag = flag
-      this.editing = editing
-      this.hideNote = hideNote
-    },
-    beforeClose () {
-      this.flag = {}
-      this.editing = false
-    },
-    close () {
-      this.$modal.hide('flag-modal')
-    },
-    startEditing () {
-      this.editing = true
-    },
-    updateFlag () {
-      const {isSet, isCleared} = this.flag
-      const newFlagState = isSet ? isCleared ? 'set' : 'clear' : 'set'
-      return this.flagUpdate({
-        applicationUuid: this.appId,
-        flagState: newFlagState,
-        flagValue: this.flag.value,
-        note: this.note
-      }).then(() => this.$modal.hide('flag-modal'))
-    }
-  }
-}
-</script>
-<style scoped>
-.flag-dialog {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
-  height: 100%;
-  min-height: 15rem;
-}
-.edit-area {
-  display: flex;
-  flex-direction: column;
-}
-.new-note {
-  height: 10rem;
-}
-</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>
+  <modal
+  name="flag-modal"
+  height="auto"
+  draggable
+  @before-open="beforeOpen"
+  @before-close="beforeClose"
+  >
+  <div class="bg-light p-1 text-uppercase">Change Flag</div>
+  <div class="flag-dialog content-padding">
+    <h2>{{flag.name | flagSuffix}}</h2>
+    <div v-if="editing" class="edit-area">
+      <textarea v-if="!hideNote" v-model="note" class="new-note form-control" placeholder="Note (optional)..."></textarea>
+    </div>
+    <div v-else-if="flag.isSet">
+      Set By <strong>{{flag.setBy}}</strong> on <strong>{{flag.dateTimeSet | dateTime}}</strong>
+      <div v-if="flag.isCleared">
+        Cleared By <strong>{{flag.clearedBy}}</strong> on <strong>{{flag.dateTimeCleared | dateTime}}</strong>
+      </div>
+    </div>
+    <div v-else>
+      Flag is not currently set.
+    </div>
+    <span class="modal-footer">
+      <button v-if="editing" class="btn btn-outline-primary" @click="updateFlag">Save</button>
+      <button v-else class="btn btn-outline-primary" @click="startEditing">{{flag.isSet ? flag.isCleared ? 'Reset' : 'Clear' : 'Set'}} Flag</button>
+      <button class="btn btn-outline-secondary" @click="close">Cancel</button>
+    </span>
+  </div>
+  </modal>
+</template>
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'FlagDialog',
+  filters: {
+    flagSuffix (val) {
+      if (!val) return val
+      if (typeof val !== 'string') return val
+      if (/ tag$/i.test(val)) return val
+      if (/ flag$/i.test(val)) return val
+      return `${val} Flag`
+    }
+  },
+  props: {
+    appId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      flag: {},
+      editing: false,
+      hideNote: false,
+      note: ''
+    }
+  },
+  watch: {
+    flag (newValue) {
+      // Go straight to editing if the flag is unset, no status to display
+      if (newValue.isActive !== undefined && !newValue.isActive) {
+        this.editing = true
+      }
+    }
+  },
+  methods: {
+    ...mapActions(['flagUpdate']),
+    beforeOpen (event) {
+      const { flag, editing = false, hideNote = false } = event.params
+      this.flag = flag
+      this.editing = editing
+      this.hideNote = hideNote
+    },
+    beforeClose () {
+      this.flag = {}
+      this.editing = false
+    },
+    close () {
+      this.$modal.hide('flag-modal')
+    },
+    startEditing () {
+      this.editing = true
+    },
+    updateFlag () {
+      const {isSet, isCleared} = this.flag
+      const newFlagState = isSet ? isCleared ? 'set' : 'clear' : 'set'
+      return this.flagUpdate({
+        applicationUuid: this.appId,
+        flagState: newFlagState,
+        flagValue: this.flag.value,
+        note: this.note
+      }).then(() => this.$modal.hide('flag-modal'))
+    }
+  }
+}
+</script>
+<style scoped>
+.flag-dialog {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr auto;
+  height: 100%;
+  min-height: 15rem;
+}
+.edit-area {
+  display: flex;
+  flex-direction: column;
+}
+.new-note {
+  height: 10rem;
+}
+</style>