started migrating file editor page to generic model list

vue/src/components/FileViewer.vue

@@ -0,0 +1,39 @@
+<template>
+
+  <div>
+
+    <div v-if="isImage()">
+      <b-img :src="url" :alt="$t('Image')" class="w-100"></b-img>
+    </div>
+
+    <div v-else-if="url.toLowerCase().includes('.pdf')">
+      <iframe :src="`/static/pdfjs/viewer.html?file=${url}`" class="w-100" style="border: none; height: 30vh"></iframe>
+    </div>
+
+    <div v-else>
+      <div class="h-20 w-100 border border-primary rounded text-center">
+        <i class="fas fa-eye-slash fa-2x text-primary mt-2"></i>
+        <br/>
+        <a :href="url" target="_blank" rel="noreferrer nofollow" class="mt-4">{{$t('Download')}}</a>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  name: 'FileViewer',
+  props: {
+    url: String,
+  },
+  methods: {
+    isImage: function (){
+      let cleaned_url = this.url.toLowerCase()
+      return (cleaned_url.endsWith('.png') || cleaned_url.endsWith('.jpg') || cleaned_url.endsWith('.jpeg') || cleaned_url.endsWith('.gif'))
+    }
+  }
+}
+</script>