From 6c1d85cebf01ac031cfa279ea585d23dd5b65ba8 Mon Sep 17 00:00:00 2001
From: Leah Tacke genannt Unterberg <leah.tgu@pads.rwth-aachen.de>
Date: Wed, 6 Nov 2024 12:09:06 +0100
Subject: [PATCH] style changes and fixes
---
src/components/DBOverview.vue | 2 --
src/components/MainView.vue | 6 +++++-
src/components/MapView.vue | 12 +++++++-----
src/components/StatusBar.vue | 2 +-
.../subcomponents/map/MappingsTable.vue | 19 +++++++++++++++----
src/services/mappingStore.ts | 2 +-
src/services/uiStore.ts | 12 ++++++------
7 files changed, 35 insertions(+), 20 deletions(-)
diff --git a/src/components/DBOverview.vue b/src/components/DBOverview.vue
index d1ad58b..3588cdd 100644
--- a/src/components/DBOverview.vue
+++ b/src/components/DBOverview.vue
@@ -92,9 +92,7 @@ function injectStuff() {
//a.innerHTML = "fav"
el.addEventListener('click', e => {
classLabelClick(className)
- console.log('clicked on title of', className, e)
})
- console.log('inserted some html in', el)
})
}
}
diff --git a/src/components/MainView.vue b/src/components/MainView.vue
index 36d5588..71491ec 100644
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@@ -9,7 +9,7 @@ import ExportView from "@/components/ExportView.vue";
import MapView from "@/components/MapView.vue";
import TableOverview from "@/components/TableOverview.vue";
import CreateVirtualView from "@/components/subcomponents/transform/CreateVirtualView.vue";
-import {useUIStore, tabs} from "@/services/uiStore";
+import {tabs, useUIStore} from "@/services/uiStore";
import {storeToRefs} from "pinia";
const constants = useConstantsStore()
@@ -33,6 +33,10 @@ const {tab} = storeToRefs(uiStore)
<v-col cols="9">
<v-sheet color="white">
<v-tabs v-model="tab" align-tabs="start" :items="tabs">
+ <template v-slot:tab="{item}">
+ <v-tab size="large" :key="item.key" :value="item.value" :prepend-icon="item.icon" :text="item.text">
+ </v-tab>
+ </template>
</v-tabs>
<v-tabs-window v-model="tab" class="fill-height">
<v-tabs-window-item value="db-overview" key="db-overview">
diff --git a/src/components/MapView.vue b/src/components/MapView.vue
index ae50689..eb73d63 100644
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
@@ -229,11 +229,10 @@ async function onSubmit() {
dialog.value.show = true
}
-function recreate(cmEntry: ConceptMappingEntry) {
+function recreate(cm: ConceptMapping) {
console.log(`recreating concept mapping`)
- console.log(cmEntry)
+ console.log(cm)
- const cm = cmEntry.mapping
recreatedMapping.value = cm
selection.selectTable(anyTIDtoTID(cm.base_table))
concept.value = cm.concept
@@ -265,9 +264,12 @@ const expanded = ref([0])
</v-row>
<v-row class="fill-height" no-gutters>
<v-col cols="12">
- <v-card title="New Mapping" class="ma-2 pa-2">
+ <v-card title="Create Mapping" class="ma-2 pa-2">
+ <template v-slot:title><v-card-title>
+ Create Mapping to {{selectedMitM}}
+ </v-card-title></template>
<v-form @submit.prevent="onSubmit" ref="form">
- <v-select :items="conceptList" v-model="concept" label="Concept" :disabled="!!recreatedMapping"></v-select>
+ <v-select :items="conceptList" v-model="concept" label="Select Concept" :disabled="!!recreatedMapping" prepend-icon="mdi-puzzle-outline"></v-select>
<TableSelector v-model:selected-table="selectedTable" source-d-b="either"
:rules="[rules.required]" :disabled="!!recreatedMapping"></TableSelector>
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index c32a3ac..41a025f 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -34,7 +34,7 @@ async function onResetAction() {
<v-app-bar-title>MitM Exporter</v-app-bar-title>
- <v-select class="pa-2 align-self-center flex-grow-0" :items="mitms" v-model="selectedMitM" variant="plain" hide-details>
+ <v-select class="pa-2 align-self-center justify-start flex-grow-0" :items="mitms" v-model="selectedMitM" variant="plain" label="MitM" hide-details>
</v-select>
<v-spacer></v-spacer>
diff --git a/src/components/subcomponents/map/MappingsTable.vue b/src/components/subcomponents/map/MappingsTable.vue
index 2189e6c..cdac89d 100644
--- a/src/components/subcomponents/map/MappingsTable.vue
+++ b/src/components/subcomponents/map/MappingsTable.vue
@@ -6,6 +6,7 @@ import {storeToRefs} from "pinia";
import {DateTime} from "luxon";
import {useSelectionStore} from "@/services/selectionStore";
import {ConceptMappingEntry, useMappingStore} from "@/services/mappingStore";
+import {ConceptMapping} from "@/services/api";
const selection = useSelectionStore()
const mappings = useMappingStore()
@@ -26,7 +27,7 @@ const props = defineProps({
const mappingsSelection = defineModel("mappingsSelection", {required: false, type: Array, default: []})
-const emit = defineEmits<{ showMapping: ConceptMappingEntry }>()
+const emit = defineEmits<{ showMapping: [ConceptMapping] }>()
const mappingsHeaders = [
{title: "Actions", value: "control"},
@@ -36,12 +37,20 @@ const mappingsHeaders = [
{title: "Time Created", value: "timeCreated"}
]
-const mappingItems = ref([])
+const mappingItems = ref<{
+ mitm: string,
+ concept: string,
+ baseTable: string,
+ mapping: ConceptMapping,
+ timeCreated: string,
+ value: number,
+ key: number
+}[]>([])
watch(currentMappings.value, cms => {
mappingItems.value = cms.map((cm, i) => ({
mitm: cm.mapping.mitm,
- concept: cm.mapping.concept,
+ concept: cm.mapping.concept.toUpperCase(),
baseTable: tableIdToStr(anyTIDtoTID(cm.mapping.base_table)),
control: null,
mapping: cm.mapping,
@@ -56,6 +65,8 @@ watch(currentMappings.value, cms => {
<template>
<v-data-table v-model="mappingsSelection" :headers="mappingsHeaders" :items="mappingItems" select-strategy="all"
:show-select="props.showSelect" return-object hide-default-footer>
+ <template v-slot:[`header.concept`]><v-icon>mdi-puzzle-outline</v-icon> Concept</template>
+ <template v-slot:[`header.baseTable`]><v-icon>mdi-table</v-icon> Base Table</template>
<template v-slot:[`item.control`]="{item}">
<v-btn variant="text" density="comfortable" icon="mdi-delete"
@click.stop="mappings.removeMapping(item.value)"></v-btn>
@@ -63,7 +74,7 @@ watch(currentMappings.value, cms => {
@click.stop="mappings.downloadMapping(item.value)"></v-btn>
<template v-if="props.showView">
<v-btn variant="text" density="comfortable" icon="mdi-eye"
- @click.stop="emit('showMapping', item)"></v-btn>
+ @click.stop="emit('showMapping', item.mapping)"></v-btn>
</template>
</template>
</v-data-table>
diff --git a/src/services/mappingStore.ts b/src/services/mappingStore.ts
index 30799f7..9d88c27 100644
--- a/src/services/mappingStore.ts
+++ b/src/services/mappingStore.ts
@@ -51,7 +51,7 @@ export const useMappingStore = defineStore('mappings', () => {
}
function clearMappings() {
- currentMappings.value = []
+ currentMappings.value.splice(0, currentMappings.value.length)
}
return {
diff --git a/src/services/uiStore.ts b/src/services/uiStore.ts
index 883b1b3..99b8a56 100644
--- a/src/services/uiStore.ts
+++ b/src/services/uiStore.ts
@@ -1,12 +1,12 @@
import {defineStore} from "pinia";
import {ref} from "vue";
-export const tabs: { text: string, value: string, key: string }[] = [
- {text: "DB Overview", value: "db-overview", key: "db-overview"},
- {text: "Table Overview", value: "table-overview", key: "table-overview"},
- {text: "Transform", value: "transform", key: "transform"},
- {text: "Map", value: "map", key: "map"},
- {text: "Export", value: "export", key: "export"}
+export const tabs: { text: string, value: string, key: string, icon?:string }[] = [
+ {text: "DB Overview", value: "db-overview", key: "db-overview", icon: "mdi-web"},
+ {text: "Table Overview", value: "table-overview", key: "table-overview", icon: "mdi-table"},
+ {text: "Transform", value: "transform", key: "transform", icon: "mdi-pencil"},
+ {text: "Map Concepts", value: "map", key: "map", icon: "mdi-puzzle-outline"},
+ {text: "Export", value: "export", key: "export", icon: "mdi-export"}
]
export const useUIStore = defineStore('uiState', () => {
--
GitLab