code browser

2024-10-18 07:03:24 +02:00
parent ab7b8e7955
commit 6ea3fc26e3
9 changed files with 516 additions and 11 deletions
--- a/src/components/SingleClassViewer.vue
+++ b/src/components/SingleClassViewer.vue
@@ -0,0 +1,173 @@
+<template>
+    <Tabs value="class-code" @update:value="tabUpdate">
+        <TabList>            
+            <Tab value="class-code">Class Code</Tab>
+            <Tab value="class-description">Class RE</Tab>
+            <Tab v-if="methods != null" value="method-list">Method List</Tab>
+        </TabList>
+        <TabPanels>
+        
+           
+           
+            <TabPanel value="class-code">    
+                    <p v-if="classLoaded" class="m-0"> 
+
+                        <HighCode
+                        class="code"
+                        :codeValue="classDetails.code"
+                        theme="light"
+                        width="100%"
+                        height="100%"
+                        :codeLines="true"
+                        fontSize="14px"
+                        ></HighCode>
+                    </p>
+                    <Skeleton v-else width="100%" height="10rem"></Skeleton>
+
+                
+               
+            </TabPanel> 
+            <TabPanel value="class-description">
+                <p class="m-0" v-if="classLoaded">
+                    <MdPreview v-if="classDetails.reDescription != null" class="editor" v-model="classDetails.reDescription" language="en-US"  />
+                    <p v-else> No Description available for this class</p>
+                </p>
+                <Skeleton v-else width="100%" height="10rem"></Skeleton>
+
+            </TabPanel>
+            <TabPanel v-if="methods != null" value="method-list">
+
+                <div  v-if="classLoaded" class="grid grid-cols-12 gap-2">
+                    <div class="col-span-3">
+                        <div class="card folder-tree ">
+                            <h5>Method List</h5>
+                                <Listbox v-model="selectedMethodName" :options="methods" @update:modelValue="updateSelectedMethod" optionLabel="name" class="w-full " />
+                        </div>
+                    </div>
+                    <div class="col-span-9">
+                        <div v-if="!loadingMethod && selectedMethodDetails != null && selectedMethodDetails.reDescription == null" class="card flow-codeviewer">  
+                            <h5>Method Code ( No reverse engineering available )</h5>
+                            <HighCode
+                                class="code"
+                                :codeValue="selectedMethodDetails.code"
+                                v-model="selectedMethodDetails.code"
+                                theme="light"
+                                width="100%"
+                                height="80%"
+                                :codeLines="true"
+                                fontSize="14px"
+                                ></HighCode>
+
+                        </div>
+                        <div v-if="!loadingMethod && selectedMethodDetails != null && selectedMethodDetails.reDescription != null" class="card flow-codeviewer">  
+                            <h5>Method Explaination</h5>
+                            <MdPreview class="editor" v-model="selectedMethodDetails.reDescription" language="en-US"  />
+
+
+                        </div>
+                        <Skeleton v-if="loadingMethod" width="100%" height="10rem"></Skeleton>
+
+                    </div>
+                </div>
+                
+                <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 { defineProps, onMounted, ref, toRefs } from 'vue';
+import { HighCode } from 'vue-highlight-code';
+import 'vue-highlight-code/dist/style.css';
+import { useLayout } from './useLayout';
+
+
+//66f55e4b2894530b1c154f69
+const props = defineProps({
+className: {
+    type: String,
+    required: true
+}
+});
+
+const { className } = toRefs(props);
+const  classDetails  = ref(null);
+const  classLoaded  = ref(false);
+const nodes = ref(null)
+const edges = ref(null)
+const dark = ref(false)
+const selectedMethodName = ref(null)
+const selectedMethodDetails = ref(null)
+const loadingMethod = ref(false)
+const methods = ref(null)
+const { graph, layout, previousDirection } = useLayout()
+
+onMounted(() => {
+    loadClassDetails();
+
+});
+
+function tabUpdate(value) {
+    console.log(value);
+    if ((value === 'class-description'  || value ==='class-code') && classLoaded.value === false) {
+        loadClassDetails()
+    }
+}
+
+function updateSelectedMethod(value) {
+    console.log("Selected Method : ", value);
+    if (value == null) {
+        return;
+    }
+    if(selectedMethodDetails.value != null && value.value == selectedMethodDetails.value.fullyQualifiedName ) {
+        return;
+    }
+    loadingMethod.value = true;
+    axios.get("/source-module/getMethodDetailedInfo?methodName=" +  value.value  ).then(resp => {
+        console.log(resp.data);
+        selectedMethodDetails.value = resp.data;
+        loadingMethod.value = false;
+    })
+}
+
+function loadClassDetails() {
+    console.log("Getting class details : ", className.value);
+    axios.get("/source-module/getClassDetailedInfo?className=" +  className.value ).then(resp => {
+        classDetails.value = resp.data;
+        if (classDetails.value.methods != null) {
+            methods.value = createMethodList();
+        }
+        
+        classLoaded.value = true;
+    })
+    .catch(error => {
+        console.error('Error during the request:', error);
+    });
+}
+
+function createMethodList() {
+    let methods = [];
+    classDetails.value.methods.forEach(method => {
+        methods.push({name: method.split(".").slice(-1)[0], value: method});
+    });
+    return methods;
+}
+
+</script>
+
+<style>
+
+
+</style>