show diff between samples before commit

Arborator · Jan 9, 2025 · 09cee60 · 09cee60
1 parent 05da5d4
commit 09cee60
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 2 deletions.
diff --git a/src/components/github/GithubCommitDialog.vue b/src/components/github/GithubCommitDialog.vue
@@ -4,6 +4,33 @@
       <div class="text-h6 text-left">{{ $t('github.commitDialog.title') }}</div>
     </q-card-section>
     <q-separator />
+    <q-card-section>
+      <q-list bordered separator>
+        <q-item v-for="(sample, index) in modifiedSamples" :key="sample.id">
+          <q-item-section>
+            <q-item-label>{{ sample.sample_name }}</q-item-label>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label caption>{{ sample.changes_number }} {{ sample.changes_number == 1 ? 'change' : 'changes' }}</q-item-label>
+          </q-item-section>
+          <q-item-section avatar>
+            <q-btn size="sm" flat icon="open_in_full" @click="selectedModifiedSamples[index] = true">
+              <q-tooltip>Show changes</q-tooltip>
+            </q-btn>
+            <q-dialog v-model:model-value="selectedModifiedSamples[index]">
+              <q-card style="min-width: 50vw">
+                <q-card-section>
+                  <div class="text-h6 text-left">{{ sample.sample_name }}</div>
+                </q-card-section>
+                <q-card-section>
+                  <pre v-html="highlightedDiff(sample.diff)" />
+                </q-card-section>
+              </q-card>
+            </q-dialog>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
     <q-card-section>
       <q-form class="q-gutter-md">
         <q-input outlined v-model="message" :label="$t('github.commitDialog.commitInput')" />
@@ -31,12 +58,20 @@ export default defineComponent({
       type: String as PropType<string>,
       required: true,
     },
+    modifiedSamples: {
+      type: Array as PropType<any[]>,
+      required: true,
+    },
   },
   data() {
     return {
       message: '',
+      selectedModifiedSamples: [] as boolean[],
     };
   },
+  mounted() {
+    this.selectedModifiedSamples = new Array(this.modifiedSamples.length).fill(false);
+  },
   methods: {
     commitChanges() {
       const githubMessage = this.message + ': committed by ArboratorGrew';
@@ -51,6 +86,20 @@ export default defineComponent({
           notifyError({ error: 'Error while commiting changes' });
         });
     },
+    highlightedDiff(diff: string) {
+      return diff
+        .split('\n')
+        .map(line => {
+          if (line.startsWith('-')) {
+            return `<span class="text-red">${line}</span>`;
+          } else if (line.startsWith('+')) {
+            return `<span class="text-green">${line}</span>`;
+          } else {
+            return line;
+          }
+        })
+        .join('\n');
+    },
   },
 });
 </script>
diff --git a/src/components/github/GithubOptions.vue b/src/components/github/GithubOptions.vue
@@ -59,7 +59,7 @@
     </q-list>
   </q-btn-dropdown>
   <q-dialog v-model="isShowCommitDialog">
-    <GithubCommitDialog :projectName="projectName" :repositoryName="repositoryName" @committed="reloadAfterCommit" />
+    <GithubCommitDialog :projectName="projectName" :modifiedSamples="modifiedSamples" :repositoryName="repositoryName" @committed="reloadAfterCommit" />
   </q-dialog>
   <q-dialog v-model="isShowPullRequestDialog" persistent>
     <GithubPullRequestDialog :projectName="projectName" :repositoryName="repositoryName" @created="isShowPullRequestDialog = false" />
@@ -101,13 +101,15 @@ export default defineComponent({
   },
   data() {
     const confirmActionCallback = null as unknown as CallableFunction;
+    const modifiedSamples = [] as any[];
     return {
       isShowCommitDialog: false,
       isShowPullRequestDialog: false,
       confirmActionDial: false,
       confirmActionCallback,
       checkPulls: false,
       changesNumber: 0,
+      modifiedSamples,
     };
   },
   computed: {
@@ -125,7 +127,8 @@ export default defineComponent({
       api
         .getChanges(this.projectName)
         .then((response) => {
-          this.changesNumber = response.data;
+          this.modifiedSamples = response.data;
+          this.changesNumber = this.modifiedSamples.map((sample) => sample.changes_number).reduce((a, b) => a + b, 0);
         })
         .catch((error) => {
           notifyError({ error });