Add CiaMultipleImpactView component and enhance ChangeImpactOutputViewer with Markdown preview
This commit is contained in:
andrea.terzani
@@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<div v-if="parsedOuput != null">
|
||||
<h1>{{ parsedOuput.title }}</h1>
|
||||
<p>{{ parsedOuput.description }}</p>
|
||||
<MdPreview class="editor" v-model="parsedOuput.description" language="en-US" />
|
||||
<CiaFlowCodeViewer :changes="parsedOuput.changes">
|
||||
</CiaFlowCodeViewer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { MdPreview } from 'md-editor-v3';
|
||||
import 'md-editor-v3/lib/style.css';
|
||||
import { defineProps, onMounted, ref, toRefs } from 'vue';
|
||||
import CiaFlowCodeViewer from './CiaFlowCodeViewer.vue';
|
||||
|
||||
|
||||
@@ -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')"
|
||||
|
||||
>
|
||||
|
||||
|
||||
|
||||
137
src/components/CiaMultipleImpactView.vue
Normal file
137
src/components/CiaMultipleImpactView.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<Tabs v-model:value="tabvalue" @update:value="tabUpdate">
|
||||
<TabList>
|
||||
<Tab v-for="(change, index) in changes" :value="index"> Change {{index +1}} </Tab>
|
||||
<!--<Tab value="1">Code Diff</Tab>-->
|
||||
<Tab value="class-description">Class RE</Tab>
|
||||
<Tab value="class-code">Actual Class Code</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel v-for="(change, index) in changes" :value="index">
|
||||
<div class="flex grid grid-cols-1 gap-4">
|
||||
<!--<h2>Change {{index}} description</h2>-->
|
||||
<div class="full-width">
|
||||
<MdPreview class="editor" v-model="change.change_description" language="en-US" />
|
||||
</div>
|
||||
<div>
|
||||
<Button clas="align-right" @click="toggleView"> {{ btn_toggle_label }}</Button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="full-width" v-if="!show_as_diff">
|
||||
<HighCode
|
||||
class="code"
|
||||
:codeValue="change.new_code"
|
||||
theme="light"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:codeLines="true"
|
||||
langName=""
|
||||
lang="java"
|
||||
fontSize="12px"
|
||||
></HighCode>
|
||||
</div>
|
||||
<div class="m-0" v-else>
|
||||
<CodeDiff
|
||||
:old-string="change.previous_code"
|
||||
:new-string="change.new_code"
|
||||
output-format="side-by-side"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value="class-description">
|
||||
<p class="m-0" v-if="classLoaded">
|
||||
<MdPreview class="editor" v-model="classDetails.reDescription" language="en-US" />
|
||||
</p>
|
||||
<Skeleton v-else width="100%" height="10rem"></Skeleton>
|
||||
|
||||
</TabPanel>
|
||||
<TabPanel value="class-code">
|
||||
|
||||
<p v-if="classLoaded" class="m-0">
|
||||
|
||||
<HighCode
|
||||
class="code"
|
||||
:codeValue="classDetails.code"
|
||||
theme="dark"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:codeLines="true"
|
||||
fontSize="12px"
|
||||
langName=""
|
||||
lang="java"
|
||||
></HighCode>
|
||||
</p>
|
||||
<Skeleton v-else width="100%" height="10rem"></Skeleton>
|
||||
|
||||
|
||||
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { MdPreview } from 'md-editor-v3';
|
||||
import 'md-editor-v3/lib/style.css';
|
||||
import Tab from 'primevue/tab';
|
||||
import TabList from 'primevue/tablist';
|
||||
import TabPanel from 'primevue/tabpanel';
|
||||
import TabPanels from 'primevue/tabpanels';
|
||||
import Tabs from 'primevue/tabs';
|
||||
import { CodeDiff } from 'v-code-diff';
|
||||
import { defineProps, onMounted, ref, toRefs } from 'vue';
|
||||
import { HighCode } from 'vue-highlight-code';
|
||||
import 'vue-highlight-code/dist/style.css';
|
||||
|
||||
|
||||
//66f55e4b2894530b1c154f69
|
||||
const props = defineProps({
|
||||
changes: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const { changes } = toRefs(props);
|
||||
const classDetails = ref(null);
|
||||
const classLoaded = ref(false);
|
||||
const show_as_diff = ref(false);
|
||||
const btn_toggle_label = ref("Show Diff");
|
||||
const tabvalue = ref(0);
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
});
|
||||
|
||||
function tabUpdate(value) {
|
||||
console.log(value);
|
||||
if ((value === 'class-description' || value ==='class-code') && classLoaded.value === false) {
|
||||
|
||||
console.log("Getting class details : ", changes.value[0].classname);
|
||||
axios.get("/source-module/getClassDetailedInfo?className=" + changes.value[0].classname ).then(resp => {
|
||||
classDetails.value = resp.data;
|
||||
classLoaded.value = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during the request:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toggleView() {
|
||||
show_as_diff.value = !show_as_diff.value;
|
||||
btn_toggle_label.value = show_as_diff.value ? "Show Code" : "Show Diff";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user