Show all evidence links on submissions page

Author: big213

frontend/components/table/special/allEvidenceColumn.vue

@@ -0,0 +1,25 @@
+<template>
+  <div style="white-space: initial">
+    <a v-for="(link, i) in currentValue" @click.stop="openLink(link.main)"
+      ><v-icon small
+        >{{ isVideoUrl(link.main) ? 'mdi-video' : 'mdi-image' }}
+      </v-icon></a
+    >
+  </div>
+</template>
+
+<script>
+import columnMixin from '~/mixins/column'
+import { openLink } from '~/services/base'
+import { isVideoUrl } from '~/services/common'
+
+export default {
+  mixins: [columnMixin],
+
+  methods: {
+    openLink,
+    isVideoUrl,
+  },
+  computed: {},
+}
+</script>

frontend/components/table/special/evidenceColumn.vue

@@ -1,28 +1,28 @@
-<template>
-  <div>
-    <a
-      v-if="currentValue.firstImageLink"
-      @click.stop="openLink(currentValue.firstImageLink)"
-      ><v-icon small>mdi-image</v-icon></a
-    >
-    <a
-      v-if="currentValue.firstVideoLink"
-      @click.stop="openLink(currentValue.firstVideoLink)"
-      ><v-icon small>mdi-video</v-icon></a
-    >
-  </div>
-</template>
-
-<script>
-import columnMixin from '~/mixins/column'
-import { openLink } from '~/services/base'
-
-export default {
-  mixins: [columnMixin],
-
-  methods: {
-    openLink,
-  },
-  computed: {},
-}
-</script>
+<template>
+  <div>
+    <a
+      v-if="currentValue.firstImageLink"
+      @click.stop="openLink(currentValue.firstImageLink)"
+      ><v-icon small>mdi-image</v-icon></a
+    >
+    <a
+      v-if="currentValue.firstVideoLink"
+      @click.stop="openLink(currentValue.firstVideoLink)"
+      ><v-icon small>mdi-video</v-icon></a
+    >
+  </div>
+</template>
+
+<script>
+import columnMixin from '~/mixins/column'
+import { openLink } from '~/services/base'
+
+export default {
+  mixins: [columnMixin],
+
+  methods: {
+    openLink,
+  },
+  computed: {},
+}
+</script>

frontend/models/base/submission.ts

@@ -11,6 +11,7 @@ import AdminEditSubmissionInterface from '~/components/interface/crud/special/ad
 import CrudSubmissionInterface from '~/components/interface/crud/special/crudSubmissionInterface.vue'
 import UrlColumn from '~/components/table/urlColumn.vue'
 import EvidenceColumn from '~/components/table/special/evidenceColumn.vue'
+import AllEvidenceColumn from '~/components/table/special/allEvidenceColumn.vue'
 import RankingColumn from '~/components/table/special/rankingColumn.vue'
 import ReignColumn from '~/components/table/special/reignColumn.vue'
 import ParticipantsColumn from '~/components/table/special/participantsColumn.vue'
@@ -187,6 +188,11 @@ export const Submission = <RecordInfo<'submission'>>{
       fields: ['firstImageLink', 'firstVideoLink'],
       component: EvidenceColumn,
     },
+    allEvidenceLinks: {
+      text: 'Evidence',
+      fields: ['externalLinks'],
+      component: AllEvidenceColumn,
+    },
     score: {
       text: 'Result',
       component: ResultColumn,

frontend/models/public/submission.ts

@@ -47,8 +47,8 @@ export const PublicSubmission = {
         align: 'right',
       },
       {
-        field: 'mainEvidenceLinks',
-        width: '50px',
+        field: 'allEvidenceLinks',
+        width: '90px',
       },
       {
         field: 'happenedOn',

frontend/services/common.ts

@@ -197,3 +197,9 @@ export function generateEventText(
 export function isValidEvidenceLink(link: string) {
   return link.match(/youtu\.be|youtube\.com|streamable\.com|imgur\.com/)
 }
+
+export function isVideoUrl(url: string) {
+  return url.match(
+    /(\.(gif|mp4)$)|(youtu\.be|youtube\.com|streamable\.com|gfycat\.com)/
+  )
+}