Display diff in ability/modifier tabs.

src/common/changes-ability.ts

@@ -3,11 +3,17 @@ import { MutexGroup } from "./mutex"
 import { FileCompare, retrieveFileCompare } from "./changes-file"
 import { Ability, TaskContextType, getTaskContext } from "@/sources/ability"
 
+interface AbilityPair
+{
+    From: Ability
+    To: Ability
+}
+
 export interface AbilityCompare
 {
     Added: Ability[]
     Removed: Ability[]
-    Changed: Ability[]
+    Changed: AbilityPair[]
 }
 
 const abilityCompareCache:{[key: string]: AbilityCompare} = {}
@@ -39,11 +45,9 @@ export async function retrieveAbilityCompare(fromCommitId:string, toCommitId:str
                     .filter(v => taskContextTo.Abilities[v.Name] == undefined)
                     .sort((a, b) => a.Name > b.Name ? 1 : -1)
                 compare.Changed = Object.values(taskContextFrom.Abilities)
-                    .filter(v => {
-                        const to = taskContextTo.Abilities[v.Name]
-                        return to && checkChanged(v, to, fileCompare)
-                    })
-                    .sort((a, b) => a.Name > b.Name ? 1 : -1)
+                    .map(v => <AbilityPair>{ From:v, To: taskContextTo.Abilities[v.Name] })
+                    .filter(v => v.To && checkChanged(v.From, v.To, fileCompare))
+                    .sort((a, b) => a.To.Name > b.To.Name ? 1 : -1)
             }
 
             result = abilityCompareCache[key] = compare

src/common/changes-modifier.ts

@@ -3,11 +3,17 @@ import { MutexGroup } from "./mutex"
 import { FileCompare, retrieveFileCompare } from "./changes-file"
 import { Modifier, TaskContextType, getTaskContext } from "@/sources/ability"
 
+interface ModifierPair
+{
+    From: Modifier
+    To: Modifier
+}
+
 export interface ModifierCompare
 {
     Added: Modifier[]
     Removed: Modifier[]
-    Changed: Modifier[]
+    Changed: ModifierPair[]
 }
 
 const modifierCompareCache:{[key: string]: ModifierCompare} = {}
@@ -38,12 +44,10 @@ export async function retrieveModifierCompare(fromCommitId:string, toCommitId:st
                 compare.Removed = Object.values(taskContextFrom.Modifiers)
                     .filter(v => taskContextTo.Modifiers[v.Name] == undefined)
                     .sort((a, b) => a.Name > b.Name ? 1 : -1)
-                compare.Changed = Object.values(taskContextFrom.Modifiers)
-                    .filter(v => {
-                        const to = taskContextTo.Modifiers[v.Name]
-                        return to && checkChanged(v, to, fileCompare)
-                    })
-                    .sort((a, b) => a.Name > b.Name ? 1 : -1)
+                compare.Changed = Object.values(taskContextFrom.Abilities)
+                    .map(v => <ModifierPair>{ From:v, To: taskContextTo.Modifiers[v.Name] })
+                    .filter(v => v.To && checkChanged(v.From, v.To, fileCompare))
+                    .sort((a, b) => a.To.Name > b.To.Name ? 1 : -1)
             }
 
             result = modifierCompareCache[key] = compare

src/diff/AnyDiff.vue

@@ -14,7 +14,7 @@
 <template>
 
   <div class="diff">
-    <div v-if="diffNode.Change == DiffNodeChange.Same">
+    <div v-if="diffNode.FromValue !== diffNode.ToValue && diffNode.Change == DiffNodeChange.Same">
       No Change Detected (string equality: {{ JSON.stringify(diffNode.FromValue) == JSON.stringify(diffNode.ToValue) }})
     </div>
     <AnyDiffNode :diffNode="diffNode" />

src/views/pages/changes/Abilities.vue

@@ -28,8 +28,8 @@
     </template>
 
     <h3>{{ compare.Changed.length }} Changed</h3>
-    <template v-for="ability in compare.Changed">
-      <AbilityItem :ability="ability" :isPrevious="true" />
+    <template v-for="abilityPair in compare.Changed">
+      <AbilityItem :ability="abilityPair.To" :abilityFrom="abilityPair.From" :isPrevious="true" />
     </template>
 
     <h3>{{ compare.Removed.length }} Removed</h3>

src/views/pages/changes/AbilityItem.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
   import { inject, } from 'vue';
   import { Ability } from '@/sources/ability';
+  import FoldableLayout from '@/components/FoldableLayout.vue';
+  import AnyDiff from '@/diff/AnyDiff.vue';
 
-  defineProps<{ability:Ability, isPrevious:boolean}>()
+  defineProps<{ability:Ability, abilityFrom?:Ability, isPrevious:boolean}>()
   const createAbilityRoute = inject<(key:string, from:boolean) => object>('createAbilityRoute') as (key:string, from:boolean) => object
   const createModifierRoute = inject<(key:string, from:boolean) => object>('createModifierRoute') as (key:string, from:boolean) => object
 </script>
 
 <template>
 
-  <div class="block">
+  <FoldableLayout :lazy="true">
     <RouterLink v-if="ability.Name" :to="createAbilityRoute(ability.Name, isPrevious)">
       <em>{{ ability.Name }}</em>
     </RouterLink>
@@ -23,7 +25,12 @@
         </span>
       </template>
     </div>
-  </div>
+    <template #content>
+      <div class="block">
+        <AnyDiff :from="abilityFrom ?? ability" :to="ability" />
+      </div>
+    </template>
+  </FoldableLayout>
 
 </template>
 

src/views/pages/changes/ModifierItem.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
   import { inject, } from 'vue';
   import { Modifier } from '@/sources/ability';
+  import FoldableLayout from '@/components/FoldableLayout.vue';
+  import AnyDiff from '@/diff/AnyDiff.vue';
 
-  defineProps<{modifier:Modifier, isPrevious:boolean}>()
+  defineProps<{modifier:Modifier, modifierFrom?:Modifier, isPrevious:boolean}>()
   //const createAbilityRoute = inject<(key:string, from:boolean) => object>('createAbilityRoute') as (key:string, from:boolean) => object
   const createModifierRoute = inject<(key:string, from:boolean) => object>('createModifierRoute') as (key:string, from:boolean) => object
 </script>
 
 <template>
 
-  <div class="block">
+  <FoldableLayout :lazy="true">
     <RouterLink v-if="modifier.Name" :to="createModifierRoute(modifier.Name, isPrevious)">
       <em>{{ modifier.Name }}</em>
     </RouterLink>
@@ -18,7 +20,12 @@
         {{ modifier.BehaviorFlagList.join(', ') }}
       </span>
     </template>
-  </div>
+    <template #content>
+      <div class="block">
+        <AnyDiff :from="modifierFrom ?? modifier" :to="modifier" />
+      </div>
+    </template>
+  </FoldableLayout>
 
 </template>
 

src/views/pages/changes/Modifiers.vue

@@ -28,8 +28,8 @@
     </template>
 
     <h3>{{ compare.Changed.length }} Changed</h3>
-    <template v-for="modifier in compare.Changed">
-      <ModifierItem :modifier="modifier" :isPrevious="true" />
+    <template v-for="modifierPair in compare.Changed">
+      <ModifierItem :modifier="modifierPair.To" :modifierFrom="modifierPair.From" :isPrevious="true" />
     </template>
 
     <h3>{{ compare.Removed.length }} Removed</h3>