style changes and fixes

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)
     })
   }
 }

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">

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>

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>

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>&nbsp;Concept</template>
+    <template v-slot:[`header.baseTable`]><v-icon>mdi-table</v-icon>&nbsp;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>

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 {

src/services/uiStore.ts

 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', () => {