Add contract version comparator view as modal

hasanyah · May 26, 2022 · c168ad2 · c168ad2
1 parent f9ea9cb
commit c168ad2
Show file tree

Hide file tree

Showing 14 changed files with 7,172 additions and 3,199 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,27 @@
     "xml2js": "^0.4.23"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.5.4",
+    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/parser": "^5.26.0",
     "@vitejs/plugin-vue": "^2.2.2",
+    "eslint": "^8.16.0",
+    "eslint-plugin-vue": "^9.0.1",
     "vite": "^2.8.6"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "@babel/eslint-parser",
+      "requireConfigFile": false
+    }
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { RouterView } from 'vue-router'
 import SideMenuComp from './components/SideMenuComp.vue'
 // import { ref } from 'vue'
@@ -46,10 +46,6 @@ import SideMenuComp from './components/SideMenuComp.vue'
 //     });
 //     reader.readAsText(file.value.files[0]);
 // }
-// function addParty(party) {
-//     console.log("Adding party")
-//     mainContract.value.parties.push({"class": "Party", "identifier": party.address, "metadata": {"rdfs:label": party.name}})
-// }
 </script>
 
 <template>

diff --git a/src/components/FormSectionCardComp.vue b/src/components/FormSectionCardComp.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = defineProps({
         data: Object,
-        type: String
+        objtype: String
     })
 </script>
 
@@ -24,6 +24,6 @@ library.add(faXmark)
         </button>
     </div>
     <div></div>
-    <component :is="type+'Comp'" :data="data"/>
+    <component :is="objtype+'Comp'" :data="data"/>
 </div>
 </template>
diff --git a/src/components/FormSectionComp.vue b/src/components/FormSectionComp.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
+import ModalAddParty from "./ModalAddParty.vue"
+import ModalAddIPO from "./ModalAddIPO.vue"
 const props = defineProps({
         title: String,
-        type: String,
-        targetId: String,
-        data: Object,
-        partyNameInput: String,
-        partyAddressInput: String
+        objtype: String,
+        data: Object
     })
-const emit = defineEmits(['partyAdded'])
 </script>
 
 <script lang="ts">
@@ -18,61 +16,17 @@ library.add(faCirclePlus)
 
 <template>
 <h2>
-    <button type="button" class="btn btn-labeled" data-bs-toggle="modal" :data-bs-target="'#'+type+'StaticBackdropModal'">
+    <button type="button" class="btn btn-labeled" data-bs-toggle="modal" :data-bs-target="'#'+objtype+'StaticBackdropModal'">
         <span class="btn-label"><font-awesome-icon :icon="['fas', 'circle-plus']" /></span>
     </button>
 
     {{ title }}
-    <!-- <button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="'#'+targetId" aria-expanded="false" :href="'#'+targetId" role="button" :aria-controls="targetId">Show/Hide</button>
-
-    <button class="btn btn-secondary" type="button" data-bs-toggle="modal" :data-bs-target="'#'+type+'StaticBackdropModal'">Add {{type}}</button> -->
 </h2>
 
 <div>
-    <FormSectionRowComp v-for="item in data" :key="item" :data="item" :type="type"/>
-    <!-- <component :is="type" v-for="item in data" :key="item" :data="item"/> -->
-</div>
-
-<div class="modal fade" id="PartyStaticBackdropModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="staticBackdropLabel">New Party</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <div class="mb-3">
-            <label for="partyNameInput" class="form-label">Name</label>
-            <input type="text" class="form-control" id="partyNameInput" v-model="partyNameInput" placeholder="John Doe">
-        </div>
-        <div class="mb-3">
-            <label for="partyAddressInput" class="form-label">Address</label>
-            <input type="text" class="form-control" id="partyAddressInput" v-model="partyAddressInput" placeholder="Madrid">
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary" @click="$emit('partyAdded', {'name': partyNameInput, 'address': partyAddressInput})">Add</button>
-      </div>
-    </div>
-  </div>
+    <FormSectionRowComp v-for="item in data" :key="item" :data="item" :objtype="objtype"/>
 </div>
 
-<div class="modal fade" id="DeonticStaticBackdropModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="staticBackdropLabel">New Deontic</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        ...
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Add</button>
-      </div>
-    </div>
-  </div>
-</div>
+<ModalAddParty id="PartyStaticBackdropModal"/>
+<ModalAddIPO id="WorkStaticBackdropModal"/>
 </template>
diff --git a/src/components/FormSectionRowComp.vue b/src/components/FormSectionRowComp.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = defineProps({
         data: Object,
-        type: String
+        objtype: String
     })
 </script>
 
@@ -22,7 +22,7 @@ library.add(faCircleInfo)
 
     </div>
     <div class="col-lg-8">
-        <FormSectionCardComp :data="data" :type="type"/>
+        <FormSectionCardComp :data="data" :objtype="objtype"/>
     </div>
 </div>
 </template>
diff --git a/src/components/ModalAddIPO.vue b/src/components/ModalAddIPO.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = defineProps({
+        ipoNameInput: String,
+        ipoAddressInput: String
+    })
+</script>
+
+<template>
+<div class="modal fade" id="WorkStaticBackdropModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="staticBackdropLabel1">New Intellectual Property</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="mb-3">
+            <label for="ipoNameInput" class="form-label">Name</label>
+            <input type="text" class="form-control" id="ipoNameInput" v-model="ipoNameInput" placeholder="John Doe">
+        </div>
+        <div class="mb-3">
+            <label for="ipoAddressInput" class="form-label">Address</label>
+            <input type="text" class="form-control" id="ipoAddressInput" v-model="ipoAddressInput" placeholder="Madrid">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Add</button>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
diff --git a/src/components/ModalAddParty.vue b/src/components/ModalAddParty.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = defineProps({
+        partyNameInput: String,
+        partyAddressInput: String
+    })
+</script>
+
+<template>
+<div class="modal fade" id="PartyStaticBackdropModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="staticBackdropLabel">New Party</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="mb-3">
+            <label for="partyNameInput" class="form-label">Name</label>
+            <input type="text" class="form-control" id="partyNameInput" v-model="partyNameInput" placeholder="John Doe">
+        </div>
+        <div class="mb-3">
+            <label for="partyAddressInput" class="form-label">Address</label>
+            <input type="text" class="form-control" id="partyAddressInput" v-model="partyAddressInput" placeholder="Madrid">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Add</button>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
diff --git a/src/components/ModalContractVersionComparator.vue b/src/components/ModalContractVersionComparator.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps({
+        versionNumber: Number
+    })
+</script>
+
+<template>
+<div class="modal fade" id="ContractVersionComparator" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="staticBackdropLabel">Version Compare</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+
+        {{ versionNumber }}
+
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Add</button>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
diff --git a/src/router/router.ts b/src/router/router.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import MainView from '../views/Main.vue'
+import MainView from '../views/MainView.vue'
 import ContractView from '../views/ContractView.vue'
 import CreateNewContractView from '../views/CreateNewContract.vue'
 import MyContractsView from '../views/MyContracts.vue'

diff --git a/src/stores/contract.ts b/src/stores/contract.ts
@@ -1,14 +1,14 @@
 import { defineStore } from 'pinia'
 import { useUserStore } from './user'
-import { Contract, VersionSummary, Party } from '../types/ContractTypes.interface'
+import { Contract, VersionSummary, Party, IPObject } from '../types/ContractTypes.interface'
 
 export const useContractStore = defineStore({
     id: 'contract',
     state: () => ({
         localContracts: [],
         selectedContract: '',
-        parties: [],
-        ipObjects: []
+        selectedVersion: -1,
+        comparedVersion: 0
     }),
     getters: {
         getCreatedDate: (state) => {
@@ -49,13 +49,27 @@ export const useContractStore = defineStore({
         setSelectedContract(name: string) {
             this.selectedContract = name;
         },
+        setSelectedVersion(num: number) {
+            this.selectedVersion = num;
+        },
+        setComparedVersion(num: number) {
+            this.comparedVersion = num;
+        },
         createNewContract(newContract: Contract) {
             this.localContracts.push(newContract);
         },
         deleteContract(name: string) {
             this.localContracts = this.localContracts.filter((contract) => {
                 return contract.name !== name;
             });
+        },
+        addParty(party: Party) {
+            let contract = this.localContracts.find((contract) => contract.name === this.selectedContract);
+            contract.versions.at(-1).parties.push(party)
+        },
+        addIPObject(ipObject: IPObject) {
+            let contract = this.localContracts.find((contract) => contract.name === this.selectedContract);
+            contract.versions.at(-1).ipObjects.push(ipObject)
         }
     }
 })
diff --git a/src/views/ContractView.vue b/src/views/ContractView.vue
@@ -3,9 +3,10 @@ import { ref } from "vue";
 import { useContractStore } from "../stores/contract";
 import { Contract, Version, VersionSummary } from "../types/ContractTypes.interface";
 import { storeToRefs } from "pinia";
+import ModalContractVersionComparator from "../components/ModalContractVersionComparator.vue"
 
 const contractStore = useContractStore();
-const { selectedContract } = storeToRefs(useContractStore());
+const { selectedContract, comparedVersion } = storeToRefs(useContractStore());
 const contractToView = ref<Contract>();
 const getContractByName = contractStore.getContractByName;
 contractToView.value = getContractByName(selectedContract.value);
@@ -14,31 +15,55 @@ const versions = ref<VersionSummary[]>()
 const getVersionHistory = contractStore.getVersionListByContractName;
 versions.value = getVersionHistory;
 const lastVersionToView = ref<Version>()
+const versionNumberToCompare = ref<string>("")
 
+function setSelectedVersion(num: number) {
+    contractStore.setSelectedVersion(num)
+}
+
+function setComparedVersion(num: number) {
+    contractStore.setComparedVersion(num)
+}
+
+setSelectedVersion(-1)
+</script>
+
+<script lang="ts">
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCirclePlus } from '@fortawesome/free-solid-svg-icons';
+library.add(faCirclePlus)
 </script>
 
 <template>
     <h1 class="text-center">Contract: {{ contractToView.name }}</h1>
     <div class="row">
         <div class="col-lg-9">
-            <FormSectionComp title="Parties" type='Party' :data="contractToView.versions.at(-1).parties"/>
-            <FormSectionComp title="Intellectual Property" type='Work' :data="contractToView.versions.at(-1).ipObjects"/>
+            <FormSectionComp title="Parties" objtype='Party' :data="contractToView.versions.at(-1).parties"/>
+            <FormSectionComp title="Intellectual Property" objtype='Work' :data="contractToView.versions.at(-1).ipObjects"/>
         </div>
         <div class="col-lg-3">
             <div>
                 <h3>Royalties Distribution</h3>
-                data graphs
+                <div class="container-fluid mb-4 justify-content-md-center border border-secondary rounded">
+                    data graphs
+                </div>
             </div>
             <div>
                 <h3>Version History</h3>
-                <ul>
-                    <li v-for="version in versions" :key="version">
-                        Version: {{ version.versionNumber }}
-                        <br/>
-                        {{ version.date }}
-                    </li>
-                </ul>
+                <div class="container-fluid mb-4 justify-content-md-center border border-secondary rounded">
+                    <ul>
+                        <li v-for="version in versions" :key="version.versionNumber">
+                            <button type="button" class="btn btn-labeled" data-bs-toggle="modal" data-bs-target="#VersionComparatorModal" @click="setComparedVersion(version.versionNumber)">
+                                <span class="btn-label"><font-awesome-icon :icon="['fas', 'circle-plus']" /></span>
+                            </button>
+                            Version: {{ version.versionNumber }}
+                            <br/>
+                            {{ version.date }}
+                        </li>
+                    </ul>
+                </div>
             </div>
         </div>
     </div>
+    <ModalContractVersionComparator id="VersionComparatorModal" :versionNumber="comparedVersion"/>
 </template>