removed unused ScreenshotCell, introduced some directory structure, translation component and vue-select for column filtering

package.json

@@ -19,6 +19,7 @@
     "single-spa-vue": "^2.5.1",
     "systemjs-webpack-interop": "^2.3.7",
     "vue": "^3.2.39",
+    "vue-select": "beta",
     "vuetify": "^3.0.0-beta.0",
     "webfontloader": "^1.0.0"
   },

src/assets/main.css

@@ -12,4 +12,9 @@ div#app {
 
 .ag-theme-material {
   --ag-value-change-value-highlight-background-color: #f9ff99;
+}
+
+.ag-popup-child .ag-filter {
+  width: 300px;
+  height: 390px;
 }

src/components/ComboboxFilter.js

@@ -1,29 +0,0 @@
-export default {
-    template: `
-      <select v-model="filter" class="v-select">
-        <option value=""> </option>
-        <option v-for="option in params.options" :value="option">
-           {{ option }}
-        </option>
-      </select>
-    `,
-    data: function () {
-        return {
-            filter: '',
-        };
-    },
-    methods: {
-        updateFilter() {
-            this.params.filterChangedCallback();
-        },
-
-        doesFilterPass(params) {
-            const value = this.params.field.split('.').reduce((a, b) => a[b], params.data);
-            return value === this.filter;
-        },
-
-        isFilterActive() {
-            return this.filter !== ''
-        },
-    },
-};

src/components/Filter/Combobox.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-select
+      v-model="filter"
+      :options="options"
+      class="ag-custom-component-popup"
+  ></v-select>
+</template>
+
+<script>
+import vSelect from "vue-select"
+
+export default {
+  name: "Combobox",
+  components: {
+    vSelect
+  },
+  props: {
+    options: {
+    },
+    changeValue: {
+    }
+  },
+  data() {
+    return {
+      filter: null,
+    }
+  },
+  watch: {
+    filter(value) {
+      this.changeValue(value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Filter/ComboboxFilter.js

@@ -0,0 +1,33 @@
+import Combobox from "./Combobox.vue";
+
+export default {
+    // This is a helper component to translate between ag-grid's custom filter logic and a regular Vue component
+    // https://www.ag-grid.com/vue-data-grid/component-filter/#custom-filter-interface-3
+    components: {
+      Combobox
+    },
+    template: `<Combobox
+      :options="params.options"
+      :change-value="updateFilter"
+    />`,
+    data: function () {
+        return {
+            filter: '',
+        };
+    },
+    methods: {
+        updateFilter(value) {
+            this.filter = value
+            this.params.filterChangedCallback();
+        },
+
+        doesFilterPass(params) {
+            const value = this.params.field.split('.').reduce((a, b) => a[b], params.data);
+            return value === this.filter;
+        },
+
+        isFilterActive() {
+            return this.filter !== '' && this.filter
+        },
+    },
+};

src/components/LogViewer.vue

@@ -22,17 +22,14 @@
 import { AgGridVue } from "ag-grid-vue3";
 import "ag-grid-community/styles//ag-grid.css";
 import "ag-grid-community/styles//ag-theme-material.css";
-import ScreenshotCell from "./ScreenshotCell.js";
-import ExamineLogModal from "./ExamineLogModal.vue";
-import ComboboxFilter from "./ComboboxFilter.js";
-
+import ExamineLogModal from "./Modal/ExamineLogModal.vue";
+import ComboboxFilter from "./Filter/ComboboxFilter.js";
 
 export default {
   components: {
     ExamineLogModal,
     AgGridVue,
-    ComboboxFilter,
-    ScreenshotCell: ScreenshotCell
+    ComboboxFilter
   },
   data() {
     return {

src/components/Modal/ExamineLogModal.vue

@@ -36,6 +36,7 @@ import { VTable } from 'vuetify/components/VTable'
 
 
 export default {
+  name: "ExamineLogModal",
   components: {
     AgGridVue,
     VCard,
@@ -43,8 +44,7 @@ export default {
     VCardActions,
     VBtn,
     VDialog,
-    VTable,
-    ScreenshotCell: ScreenshotCell
+    VTable
   },
   data() {
     return {

src/components/ScreenshotCell.js

@@ -1,30 +0,0 @@
-export default {
-    template: `<div>
-      <a @click="openDrawer">View screenshots</a>
-      <div v-if="drawerOpen" class="screenshots-drawer">
-        <img v-for="screenshot in screenshots" :src="screenshot.orig"/>
-      </div>
-    </div>`,
-    data: function () {
-        return {
-            screenshots: [],
-            drawerOpen: false,
-        };
-    },
-    beforeMount() {
-        this.updateImage(this.params);
-        this.updateImage(this.params);
-    },
-    methods: {
-        updateImage(params) {
-            this.screenshots = params.value
-            this.value = params.value;
-        },
-        refresh(params) {
-            this.updateImage(params);
-        },
-        openDrawer () {
-            this.drawerOpen = true
-        }
-    },
-};

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import vuetify from './plugins/vuetify'
 import { loadFonts } from './plugins/webfontloader'
 import './assets/main.css'
+import 'vue-select/dist/vue-select.css';
 loadFonts()
 
 createApp(App)