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

package/ReportList.vue

@@ -1,87 +1,87 @@
-<!--
-   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 v-if="category">
-    <h2>{{ category }}</h2>
-    <ul class="list">
-      <slot></slot>
-      <li v-for="report of reportsWithCategory(category)" :key="report.name">
-        <slot name="link" :report="report">
-          <router-link :title="report.long_description" :to="{ path: reportBasePath, query: { reportName: report.name } }">
-            {{ report.description }}
-          </router-link>
-        </slot>
-      </li>
-    </ul>
-  </div>
-  <div v-else class="report-list">
-    <div v-for="category of categories" :key="category">
-      <h2>{{ category }}</h2>
-      <ul class="list">
-        <li v-if="category === 'admin'"><a class="byu edu" href="http://link.byu.edu/gro" target="_blank" data-disable-navigate="true">Manage Admins</a></li>
-        <li v-if="category === 'resources'">User Role: {{ $store.state.userInfo.role }}</li>
-        <li v-for="report of reportsWithCategory(category)" :key="report.name">
-          <router-link :title="report.long_description" :to="{ path: reportBasePath, query: { reportName: report.name } }">
-            {{ report.description }}
-            </router-link>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-<script>
-import { mapState } from 'vuex'
-
-export default {
-  name: 'ReportList',
-  props: {
-    reportBasePath: String,
-    category: String
-  },
-  computed: {
-    ...mapState({
-      reports: state => state.reports.list,
-      institution: state => state.ui.institution
-    }),
-    categories () {
-      // Filters reports to have reports specefic to dp institution
-      const reports = this.reports.filter(ins => ins.institution.includes(state.institution)).map(ins => ins.institution)
-      const allObjectCategories = reports.map(o => o.category)
-      let uniqueCategories = new Set()
-      allObjectCategories.forEach((category) => uniqueCategories.add(category))
-      return uniqueCategories.filter(c => c && c !== 'system')
-    }
-  },
-  methods: {
-    reportsWithCategory(category) {
-      return this.reports.filter(o => o.category === category)
-    }
-  }
-}
-</script>
-<style scoped>
-.list{
-  -webkit-padding-start: 0;
-  padding: 0;
-  list-style-type: none;
-  list-style-position: outside;
-}
-.report-list{
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 15%;
-}
-</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 v-if="category">
+    <h2>{{ category }}</h2>
+    <ul class="list">
+      <slot></slot>
+      <li v-for="report of reportsWithCategory(category)" :key="report.name">
+        <slot name="link" :report="report">
+          <router-link :title="report.long_description" :to="{ path: reportBasePath, query: { reportName: report.name } }">
+            {{ report.description }}
+          </router-link>
+        </slot>
+      </li>
+    </ul>
+  </div>
+  <div v-else class="report-list">
+    <div v-for="category of categories" :key="category">
+      <h2>{{ category }}</h2>
+      <ul class="list">
+        <li v-if="category === 'admin'"><a class="byu edu" href="http://link.byu.edu/gro" target="_blank" data-disable-navigate="true">Manage Admins</a></li>
+        <li v-if="category === 'resources'">User Role: {{ $store.state.userInfo.role }}</li>
+        <li v-for="report of reportsWithCategory(category)" :key="report.name">
+          <router-link :title="report.long_description" :to="{ path: reportBasePath, query: { reportName: report.name } }">
+            {{ report.description }}
+            </router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'ReportList',
+  props: {
+    reportBasePath: String,
+    category: String
+  },
+  computed: {
+    ...mapState({
+      reports: state => state.reports.list,
+      institution: state => state.ui.institution
+    }),
+    categories () {
+      // Filters reports to have reports specefic to dp institution
+      const reports = this.reports.filter(ins => ins.institution.includes(state.institution)).map(ins => ins.institution)
+      const allObjectCategories = reports.map(o => o.category)
+      let uniqueCategories = new Set()
+      allObjectCategories.forEach((category) => uniqueCategories.add(category))
+      return uniqueCategories.filter(c => c && c !== 'system')
+    }
+  },
+  methods: {
+    reportsWithCategory(category) {
+      return this.reports.filter(o => o.category === category)
+    }
+  }
+}
+</script>
+<style scoped>
+.list{
+  -webkit-padding-start: 0;
+  padding: 0;
+  list-style-type: none;
+  list-style-position: outside;
+}
+.report-list{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 15%;
+}
+</style>

package/ReportPhotos.vue

@@ -1,65 +1,65 @@
-<template>
-  <div class="photo-grid">
-    <div v-for="p of transformed" :key="p.id" class="photo-card">
-      <img height="150" width="150" :src="p.link">
-      <span>{{p.name}}</span>
-      <span>{{p.id}}</span>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'ReportPhotos',
-  props: {
-    columnMetadata: {
-      type: Array,
-      default: () => []
-    },
-    rows: {
-      type: Array,
-      default: () => []
-    },
-    title: String,
-    loading: Boolean,
-    error: Boolean
-  },
-  computed: {
-    photoLinkIndex () {
-      return this.columnMetadata.findIndex(c => c.qualifier.includes('link_photo'))
-    },
-    nameIndex () {
-      return this.columnMetadata.findIndex(c => c.name === "Applicant Name")
-    },
-    transformed () {
-      const photoIndex = this.photoLinkIndex
-      const nameIndex = this.nameIndex
-      const photoLink = this.columnMetadata[photoIndex].link
-      return this.rows.map(r => {
-        const id = r[photoIndex]
-        const link = photoLink.replace(/:value/, id)
-        const name = r[nameIndex]
-        return { link, name, id }
-      })
-    }
-  }
-}
-</script>
-<style scoped>
-.photo-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
-  grid-gap: 0.5rem;
-}
-
-.photo-card {
-  padding: 1rem;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-auto-rows: auto;
-  justify-content: center;
-  border: thin solid #333;
-  border-radius: 3px;
-  text-align: center;
-  grid-gap: 0.1rem;
-}
-</style>
+<template>
+  <div class="photo-grid">
+    <div v-for="p of transformed" :key="p.id" class="photo-card">
+      <img height="150" width="150" :src="p.link">
+      <span>{{p.name}}</span>
+      <span>{{p.id}}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ReportPhotos',
+  props: {
+    columnMetadata: {
+      type: Array,
+      default: () => []
+    },
+    rows: {
+      type: Array,
+      default: () => []
+    },
+    title: String,
+    loading: Boolean,
+    error: Boolean
+  },
+  computed: {
+    photoLinkIndex () {
+      return this.columnMetadata.findIndex(c => c.qualifier.includes('link_photo'))
+    },
+    nameIndex () {
+      return this.columnMetadata.findIndex(c => c.name === "Applicant Name")
+    },
+    transformed () {
+      const photoIndex = this.photoLinkIndex
+      const nameIndex = this.nameIndex
+      const photoLink = this.columnMetadata[photoIndex].link
+      return this.rows.map(r => {
+        const id = r[photoIndex]
+        const link = photoLink.replace(/:value/, id)
+        const name = r[nameIndex]
+        return { link, name, id }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.photo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
+  grid-gap: 0.5rem;
+}
+
+.photo-card {
+  padding: 1rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  justify-content: center;
+  border: thin solid #333;
+  border-radius: 3px;
+  text-align: center;
+  grid-gap: 0.1rem;
+}
+</style>

package/ReportSvg.vue

@@ -1,78 +1,78 @@
-<!--
-   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.
--->
-<!--TODO: set alt attribute to long_description from reportMetadata -->
-<template>
-  <div class="report-chart">
-    <svg v-if="error" class="placeholder" width="200" height="180" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-      <path d="M50,30 L70,70 L30,70Z M50,63 L50,62 Z M50,56 L50,45 Z" stroke="#333333" fill="none"
-      stroke-width="5" stroke-linejoin="round" />
-    </svg>
-    <div v-else-if="loaded" class="wrapper">
-      <div v-html="svgContent" v-bind="$attrs" v-on="$listeners"></div>
-    </div>
-    <svg v-else class="placeholder" width="200" height="180" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-      <circle cx="50" cy="50" r="25" stroke="#999999" stroke-width="3" fill="none"/>
-      <line class="minute" x1="50" x2="50" y1="50" y2="30" stroke="#999999" fill="none"
-      stroke-width="5" stroke-linecap="round" />
-      <line class="hour" x1="50" x2="66" y1="50" y2="50" stroke="#999999" fill="none" stroke-width="5"
-      stroke-linecap="round" />
-    </svg>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'ReportSvg',
-    props: {
-      alt: String,
-      svgContent: String,
-      loaded: Boolean,
-      error: Boolean
-    }
-  }
-</script>
-<style scoped>
-  .wrapper {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-auto-rows: auto;
-    grid-gap: 0.5rem;
-  }
-  .placeholder {
-    width: 100%;
-  }
-  .placeholder text {
-    fill: #333;
-  }
-  .minute {
-    transform-origin: 50% 50%;
-    animation: 3s linear infinite tick;
-  }
-
-  .hour {
-    transform-origin: 50% 50%;
-    animation: 36s linear infinite tick;
-  }
-
-  @keyframes tick {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</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.
+-->
+<!--TODO: set alt attribute to long_description from reportMetadata -->
+<template>
+  <div class="report-chart">
+    <svg v-if="error" class="placeholder" width="200" height="180" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+      <path d="M50,30 L70,70 L30,70Z M50,63 L50,62 Z M50,56 L50,45 Z" stroke="#333333" fill="none"
+      stroke-width="5" stroke-linejoin="round" />
+    </svg>
+    <div v-else-if="loaded" class="wrapper">
+      <div v-html="svgContent" v-bind="$attrs" v-on="$listeners"></div>
+    </div>
+    <svg v-else class="placeholder" width="200" height="180" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+      <circle cx="50" cy="50" r="25" stroke="#999999" stroke-width="3" fill="none"/>
+      <line class="minute" x1="50" x2="50" y1="50" y2="30" stroke="#999999" fill="none"
+      stroke-width="5" stroke-linecap="round" />
+      <line class="hour" x1="50" x2="66" y1="50" y2="50" stroke="#999999" fill="none" stroke-width="5"
+      stroke-linecap="round" />
+    </svg>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ReportSvg',
+    props: {
+      alt: String,
+      svgContent: String,
+      loaded: Boolean,
+      error: Boolean
+    }
+  }
+</script>
+<style scoped>
+  .wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+    grid-gap: 0.5rem;
+  }
+  .placeholder {
+    width: 100%;
+  }
+  .placeholder text {
+    fill: #333;
+  }
+  .minute {
+    transform-origin: 50% 50%;
+    animation: 3s linear infinite tick;
+  }
+
+  .hour {
+    transform-origin: 50% 50%;
+    animation: 36s linear infinite tick;
+  }
+
+  @keyframes tick {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>