Add CiaMultipleImpactView component and enhance ChangeImpactOutputViewer with Markdown preview

This commit is contained in:
andrea.terzani
2025-01-10 17:19:16 +01:00
parent 68d38dda21
commit 95a44d3a8d
3 changed files with 155 additions and 10 deletions

View File

@@ -1,15 +1,14 @@
<script setup>
import { UserPrefStore } from '@/stores/UserPrefStore.js'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'
import Dialog from 'primevue/dialog'
import { nextTick, onMounted, ref, toRefs } from 'vue'
import { defineProps, nextTick, onMounted, ref, toRefs } from 'vue'
import 'vue3-markdown/dist/style.css'
import ClassNode from './ClassNode.vue'
import { useLayout } from './useLayout'
import { defineProps } from 'vue'
import 'vue3-markdown/dist/style.css'
import { UserPrefStore } from '@/stores/UserPrefStore.js';
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()
@@ -17,7 +16,7 @@ const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNo
const nodes = ref(null)
const edges = ref(null)
const dark = ref(false)
const selectionNode = ref({fullyQualifiedClassName: '', description: ''})
const selectionNode = ref([{fullyQualifiedClassName: '', description: '', classname:''}])
const { graph, layout, previousDirection } = useLayout()
const dialogCodeVisible = ref(false)
@@ -85,10 +84,16 @@ function defineNodes() {
target: change.filename,
})
var changes_array = []
changes.value.forEach((int_change) => {
if(int_change.filename == change.filename) {
changes_array.push(int_change)
}
})
tmpNode.push({
id: change.classname,
data: { label: change.classname.split(".").slice(-1)[0] , data: change},
data: { label: change.classname.split(".").slice(-1)[0] , data: changes_array},
type: 'class-node',
position: { x: 250, y: 0 },
dimension: { width: 200, height: 100 },
@@ -110,9 +115,9 @@ function defineNodes() {
</script>
<template>
<Dialog v-model:visible="dialogCodeVisible" modal :header="'Change on: '+selectionNode.classname" class="change-modal":style="{ width: '90vw', minHeight:'90vh'}">
<CiaSingleImpactView :change="selectionNode"></CiaSingleImpactView>
<Dialog v-model:visible="dialogCodeVisible" modal :header="'Class '+ selectionNode[0].classname" class="change-modal" :style="{ width: '90vw', minHeight:'90vh'}">
<!--<CiaSingleImpactView :change="selectionNode"></CiaSingleImpactView>-->
<CiaMultipleImpactView :changes="selectionNode"></CiaMultipleImpactView>
</Dialog>
<div>
@@ -125,6 +130,7 @@ function defineNodes() {
:min-zoom="0.2"
:max-zoom="4"
@nodes-initialized="layoutGraph('LR')"
>