From 95a44d3a8d0f0b5bbca2e26146c3b1d6bb668c60 Mon Sep 17 00:00:00 2001
From: "andrea.terzani" <andrea.terzani@accenture.com>
Date: Fri, 10 Jan 2025 17:19:16 +0100
Subject: [PATCH] Add CiaMultipleImpactView component and enhance
 ChangeImpactOutputViewer with Markdown preview

---
 src/components/ChangeImpactOutputViewer.vue |   4 +-
 src/components/CiaFlowCodeViewer.vue        |  24 ++--
 src/components/CiaMultipleImpactView.vue    | 137 ++++++++++++++++++++
 3 files changed, 155 insertions(+), 10 deletions(-)
 create mode 100644 src/components/CiaMultipleImpactView.vue

diff --git a/src/components/ChangeImpactOutputViewer.vue b/src/components/ChangeImpactOutputViewer.vue
index 129c0d3..effcc90 100644
--- a/src/components/ChangeImpactOutputViewer.vue
+++ b/src/components/ChangeImpactOutputViewer.vue
@@ -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';
 
diff --git a/src/components/CiaFlowCodeViewer.vue b/src/components/CiaFlowCodeViewer.vue
index 66a700a..fe94768 100644
--- a/src/components/CiaFlowCodeViewer.vue
+++ b/src/components/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')"
+
             >
 
 
diff --git a/src/components/CiaMultipleImpactView.vue b/src/components/CiaMultipleImpactView.vue
new file mode 100644
index 0000000..a155195
--- /dev/null
+++ b/src/components/CiaMultipleImpactView.vue
@@ -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>