From c6fef60068de128a92222cc61c3f3b17c6b2d613 Mon Sep 17 00:00:00 2001 From: Erki Aas Date: Sat, 5 Nov 2022 20:23:57 +0200 Subject: [PATCH] removed unused ScreenshotCell, introduced some directory structure, translation component and vue-select for column filtering --- package.json | 1 + src/assets/main.css | 5 +++ src/components/ComboboxFilter.js | 29 -------------- src/components/Filter/Combobox.vue | 38 +++++++++++++++++++ src/components/Filter/ComboboxFilter.js | 33 ++++++++++++++++ src/components/LogViewer.vue | 9 ++--- .../{ => Modal}/ExamineLogModal.vue | 4 +- src/components/ScreenshotCell.js | 30 --------------- src/main.js | 1 + 9 files changed, 83 insertions(+), 67 deletions(-) delete mode 100644 src/components/ComboboxFilter.js create mode 100644 src/components/Filter/Combobox.vue create mode 100644 src/components/Filter/ComboboxFilter.js rename src/components/{ => Modal}/ExamineLogModal.vue (97%) delete mode 100644 src/components/ScreenshotCell.js diff --git a/package.json b/package.json index 389c7ac..836330e 100644 --- a/package.json +++ b/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" }, diff --git a/src/assets/main.css b/src/assets/main.css index 39e269c..46cd191 100644 --- a/src/assets/main.css +++ b/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; } \ No newline at end of file diff --git a/src/components/ComboboxFilter.js b/src/components/ComboboxFilter.js deleted file mode 100644 index e8e6f59..0000000 --- a/src/components/ComboboxFilter.js +++ /dev/null @@ -1,29 +0,0 @@ -export default { - template: ` - - `, - 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 !== '' - }, - }, -}; \ No newline at end of file diff --git a/src/components/Filter/Combobox.vue b/src/components/Filter/Combobox.vue new file mode 100644 index 0000000..4ddef6c --- /dev/null +++ b/src/components/Filter/Combobox.vue @@ -0,0 +1,38 @@ + + + + + \ No newline at end of file diff --git a/src/components/Filter/ComboboxFilter.js b/src/components/Filter/ComboboxFilter.js new file mode 100644 index 0000000..7b49d00 --- /dev/null +++ b/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: ``, + 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 + }, + }, +}; \ No newline at end of file diff --git a/src/components/LogViewer.vue b/src/components/LogViewer.vue index c936452..637fc94 100644 --- a/src/components/LogViewer.vue +++ b/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 { diff --git a/src/components/ExamineLogModal.vue b/src/components/Modal/ExamineLogModal.vue similarity index 97% rename from src/components/ExamineLogModal.vue rename to src/components/Modal/ExamineLogModal.vue index 96609e6..3358360 100644 --- a/src/components/ExamineLogModal.vue +++ b/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 { diff --git a/src/components/ScreenshotCell.js b/src/components/ScreenshotCell.js deleted file mode 100644 index 3653f5e..0000000 --- a/src/components/ScreenshotCell.js +++ /dev/null @@ -1,30 +0,0 @@ -export default { - template: `
- View screenshots -
- -
-
`, - 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 - } - }, -}; \ No newline at end of file diff --git a/src/main.js b/src/main.js index 2c6e381..24dac50 100644 --- a/src/main.js +++ b/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)