Feat/#54/display files details diff

.gitignore

@@ -16,7 +16,6 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

.vscode/settings.json

@@ -0,0 +1 @@
+{ "files.eol": "\n" }

docs/style.css

@@ -641,6 +641,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;

package.json

@@ -22,13 +22,17 @@
   "dependencies": {
     "@vueuse/core": "^7.5.3",
     "core-js": "^3.6.5",
-    "localforage": "^1.10.0",
     "electron-log": "^4.4.4",
     "electron-simple-updater": "^2.0.11",
     "electron-updater": "^4.6.1",
+    "gitdiff-parser": "^0.2.2",
+    "localforage": "^1.10.0",
+    "prismjs": "^1.27.0",
     "update-electron-app": "^2.0.1",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.12"
+    "vue-highlightjs": "^1.3.3",
+    "vue-router": "^4.0.12",
+    "vue3-highlightjs": "^1.0.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/composables/useGit.js

@@ -1,4 +1,5 @@
 import { ipcRenderer } from 'electron';
+import gitDiffParser from 'gitdiff-parser';
 import { computed, ref } from 'vue';
 
 import { useFolder } from './useFolder';
@@ -13,6 +14,7 @@ const offset = computed(() => limit.value * index.value);
 const currentBranchCommits = ref(0);
 const files = ref([]);
 const commitDetails = ref([]);
+const fileDetails = ref([]);
 
 const headCommitSha = computed({
   get: () => commits.value.find((commit) => commit.isHead)?.sha,
@@ -77,6 +79,18 @@ const getDiffCommit = async (commitSha, stat = true) => {
     stat
   );
 };
+const getFileDetails = async (commitSha, prevShaCommit, fileName) => {
+  const data = await ipcRenderer.invoke(
+    'getFileDetails-event',
+    folderPath.value,
+    commitSha,
+    prevShaCommit,
+    fileName
+  );
+  console.log(data);
+
+  fileDetails.value = gitDiffParser.parse(data);
+};
 
 export const useGit = () => ({
   getCommits,
@@ -85,12 +99,14 @@ export const useGit = () => ({
   checkoutCommit,
   getBranchsInfo,
   getDiffCommit,
+  getFileDetails,
   commits,
   branchs,
   headCommitSha,
   index,
   currentBranchCommits,
   files,
   commitDetails,
+  fileDetails,
   resetState,
 });

src/events/GitReader.event.js

@@ -1,4 +1,5 @@
 import {
+  GET_FILE_DETAILS_EVENT,
   GET_GIT_BRANCHS_EVENT,
   GET_GIT_BRANCHS_INFO_EVENT,
   GET_GIT_DIFF_EVENT,
@@ -43,4 +44,16 @@ export default [
       return details;
     },
   },
+  {
+    name: GET_FILE_DETAILS_EVENT,
+    fct: async (event, folderPath, sha, prevSha, fileName) => {
+      const details = await gitReader.getFileDetails(
+        folderPath,
+        sha,
+        prevSha,
+        fileName
+      );
+      return details;
+    },
+  },
 ];

src/main.js

@@ -1,4 +1,7 @@
+import 'highlight.js/styles/default.css';
+
 import { createApp } from 'vue';
+import VueHighlightJS from 'vue3-highlightjs';
 
 import DsButton from '@/components/DsButton.vue';
 
@@ -8,4 +11,5 @@ import router from './router';
 const app = createApp(App);
 app.component('DsButton', DsButton);
 app.use(router);
+app.use(VueHighlightJS);
 app.mount('#app');

src/modules/GitView/GitView.vue

@@ -69,9 +69,9 @@ export default {
       headCommitSha,
       folderPath,
       files,
-      commitDetails,
       isDetailsOpened,
       currentBranchCommits,
+      commitDetails,
     };
   },
 };

src/modules/GitView/components/CommitDetails.vue

@@ -1,80 +1,46 @@
 <template>
   <div
     id="details-sidebar"
-    class="flex flex-col border-t-green-400 border-solid border-t-width-2"
+    class="flex flex-col border-t-green-400 border-solid border-t-width-2 overflow-auto p-2"
   >
-    <DsButton @click="closeDetail" class="mx-4 mt-4">Close</DsButton>
-    <p class="pt-4 px-4">{{ recap }}</p>
-    <ul
-      class="flex flex-col justify-center text-sm flex-shrink-0 p-4 flex-grow-0"
-    >
-      <li
-        class="flex items-center"
-        v-for="([filename, affected_line, stat], index) in files"
-        :key="index"
-      >
-        <span class="mr-2">{{ filename }}</span>
-        <span class="mr-2">{{ affected_line }}</span>
-        <span class="mb-0.5" v-html="formatStat(stat)"></span>
-      </li>
-    </ul>
+    <DsButton @click="closeDetail" class="mt-4">Close</DsButton>
+
+    <CommitDetailsFiles v-if="!isFileDetailsOpened" />
+    <CommitDetailsFile v-else />
   </div>
 </template>
 
 <script>
-import { computed, onMounted, watch } from 'vue';
-
-import { useGit } from '@/composables/useGit';
+import { watch } from 'vue';
 
 import { useGitView } from '../composables/useGitView';
+import CommitDetailsFile from './CommitDetailsFile.vue';
+import CommitDetailsFiles from './CommitDetailsFiles.vue';
 
 export default {
   name: 'CommitDetails',
-  props: {
-    details: {
-      type: Object,
-      required: true,
-    },
+
+  components: {
+    CommitDetailsFile,
+    CommitDetailsFiles,
   },
 
   emits: ['onClose'],
 
   setup(props, { emit }) {
-    const { getDiffCommit } = useGit();
-    const { shaCommit } = useGitView();
-
-    const recap = computed(() => props.details.recap);
-    const files = computed(() => props.details.files);
+    const { shaCommit, isFileDetailsOpened } = useGitView();
 
-    onMounted(() => {
-      getDiffCommit(shaCommit.value);
-    });
+    const closeDetail = () => {
+      emit('onClose');
+      isFileDetailsOpened.value = false;
+    };
 
-    watch(shaCommit, (newSha) => {
-      getDiffCommit(newSha);
+    watch(shaCommit, () => {
+      isFileDetailsOpened.value = false;
     });
 
-    const regex = /(\+*)(-*)/;
-    const formatStat = (stat) => {
-      if (stat) {
-        const match = stat.match(regex);
-        return (
-          '<span class="text-green-700 text-xl">' +
-          match[1] +
-          '</span>' +
-          ' <span class="text-red-700 text-xl tracking-2px">' +
-          match[2] +
-          '</span>'
-        );
-      }
-    };
-    const closeDetail = () => emit('onClose');
-
     return {
-      recap,
-      files,
-      formatStat,
-      getDiffCommit,
+      isFileDetailsOpened,
       closeDetail,
     };
   },

src/modules/GitView/components/CommitDetailsFile.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="bg-gray-100 border-gray-200 rounded-lg border-width-2 mt-2 pb-2">
+    <div v-for="({ hunks }, fileKey) in fileDetails" :key="`${fileKey}-file`">
+      <div
+        v-for="({ content, changes }, hunkKey) in hunks"
+        :key="hunkKey"
+        class="text-xs"
+      >
+        <p class="text-gray-500 p-2">{{ content }}</p>
+        <div
+          v-for="(
+            {
+              content: lineContent,
+              isDelete,
+              isInsert,
+              isNormal,
+              lineNumber,
+              newLineNumber,
+              oldLineNumber,
+            },
+            lineKey
+          ) in changes"
+          :key="`${lineKey}-line`"
+          class="flex items-center h-6"
+          :class="[
+            {
+              'bg-red-100': isDelete,
+              'bg-green-100': isInsert,
+              'bg-white': isNormal,
+            },
+          ]"
+        >
+          <div
+            class="flex gap-1 text-center h-full items-center"
+            :class="[
+              {
+                'bg-red-200': isDelete,
+                'bg-green-200': isInsert,
+                'bg-white': isNormal,
+              },
+            ]"
+          >
+            <span class="min-w-10 block">{{ oldLineNumber }}</span>
+            <span class="min-w-10 block">{{
+              lineNumber ? lineNumber : newLineNumber
+            }}</span>
+          </div>
+          <span
+            :class="[
+              'font-bold block text-center min-w-4',
+              {
+                'text-red-500': isDelete,
+                'text-green-500': isInsert,
+              },
+            ]"
+            >{{ isDelete ? '-' : isInsert ? '+' : ' ' }}</span
+          >
+          <pre
+            class="flex-1"
+            v-highlightjs="lineContent"
+          ><code class="javascript bg-transparent"></code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import 'prismjs/themes/prism.css';
+
+import { onMounted, watch } from 'vue';
+
+import { useGit } from '@/composables/useGit';
+
+import { useGitView } from '../composables/useGitView';
+
+export default {
+  name: 'CommitDetailsFiles',
+
+  setup() {
+    const { getFileDetails, fileDetails } = useGit();
+    const { prevShaCommit, shaCommit, fileName } = useGitView();
+
+    onMounted(() => {
+      getFileDetails(shaCommit.value, prevShaCommit.value, fileName.value);
+    });
+
+    watch(shaCommit, (newSha) => {
+      getFileDetails(newSha, prevShaCommit.value, fileName.value);
+    });
+
+    return {
+      fileDetails,
+    };
+  },
+};
+</script>