Improve contract view layout

src/components/FormSectionCardComp.vue

@@ -14,20 +14,16 @@ library.add(faXmark)
 </script>
 
 <template>
-<div class="container mb-4">
-    <div class="row justify-content-md-center">
-        <div class="col-lg-6 border border-secondary rounded">
-            <div class="d-flex justify-content-end">
-                <button type="button" class="btn">
-                    <span class="btn-label"><font-awesome-icon :icon="['fas', 'pen']" /></span>
-                </button>
-                <button type="button" class="btn" >
-                    <span class="btn-label"><font-awesome-icon :icon="['fas', 'xmark']" /></span>
-                </button>
-            </div>
-            <div></div>
-            <component :is="type" :data="data"/>
-        </div>
+<div class="container-fluid mb-4 justify-content-md-center border border-secondary rounded">
+    <div class="d-flex justify-content-end">
+        <button type="button" class="btn">
+            <span class="btn-label"><font-awesome-icon :icon="['fas', 'pen']" /></span>
+        </button>
+        <button type="button" class="btn" >
+            <span class="btn-label"><font-awesome-icon :icon="['fas', 'xmark']" /></span>
+        </button>
     </div>
+    <div></div>
+    <component :is="type+'Comp'" :data="data"/>
 </div>
 </template>

src/components/FormSectionRowComp.vue

@@ -12,12 +12,17 @@ library.add(faCircleInfo)
 </script>
 
 <template>
-<div class="mx-5">
-    <p><span>
-            <font-awesome-icon data-bs-toggle="tooltip" data-bs-placement="top" :title="data.identifier" :icon="['fas', 'circle-info']" />
-        </span> 
-        {{ data.metadata["rdfs:label"] }}
-    </p>
-    <FormSectionCardComp :data="data" :type="type" @party-added="addParty"/>
+<div class="row">
+    <div class="col-lg-4">
+        <p><span>
+                <font-awesome-icon data-bs-toggle="tooltip" data-bs-placement="top" :title="data.identifier" :icon="['fas', 'circle-info']" />
+            </span> 
+            {{ data.metadata["rdfs:label"] }}
+        </p>
+
+    </div>
+    <div class="col-lg-8">
+        <FormSectionCardComp :data="data" :type="type"/>
+    </div>
 </div>
 </template>

src/components/PartyComp.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { storeToRefs } from 'pinia'
-import { useContractStore } from '../store/contract'
+import { useContractStore } from '../stores/contract'
 const props = defineProps({
         data: Object
     })
-const { parties, loading } = storeToRefs(useContractStore())
+const { parties } = storeToRefs(useContractStore())
 </script>
 
 <template>
@@ -19,15 +19,15 @@ const { parties, loading } = storeToRefs(useContractStore())
             <span v-else><em>N/A</em></span>
         </div>
     </div>
-    <span v-if="data.deonticsIssued">
+    <span v-if="data.deonticsIssued && data.deonticsIssued.length > 0">
         <p><strong>Deontics Issued: </strong></p>
         <ul>
             <li v-for="item in data.deonticsIssued" :key="item">
                 {{item}}
             </li>
         </ul>
     </span>
-    <span v-if="data.actionsIsSubject">
+    <span v-if="data.actionsIsSubject && data.actionsIsSubject.length > 0">
         <p><strong>Subject to following actions: </strong></p>
         <ul>
             <li v-for="item in data.actionsIsSubject" :key="item">

src/components/SideMenuComp.vue

@@ -11,7 +11,7 @@ const { setUser } = useUserStore()
 function changeUser(userName) {
     if (loggedInUser !== userName) {
         setUser(userName)
-        // router.push('/')
+        router.push('/')
     }
 }
 

src/components/ObjectComp.vue → src/components/WorkComp.vue

@@ -6,7 +6,10 @@ const props = defineProps({
 
 <template>
 <div>
-<!-- <h4>{{ data.metadata["rdfs:label"] }} - {{ data.class }}</h4> -->
+    <div class="row">
+        <div class="col">
+            Type: {{ data.class }}
+        </div>
+    </div>
 </div>
-{{data}}
 </template>

src/main.js

@@ -9,11 +9,10 @@ import "bootstrap"
 import "./style.css"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-// import Contract from "./components/ContractComp.vue"
-// import Party from "./components/PartyComp.vue"
+import PartyComp from "./components/PartyComp.vue"
+import WorkComp from "./components/WorkComp.vue"
 // import Deontic from "./components/DeonticComp.vue"
 // import Action from "./components/ActionComp.vue"
-// import ObjectComp from "./components/ObjectComp.vue"
 
 // import Provide from "./components/ActionCompProvide.vue"
 // import Play from "./components/ActionCompPlay.vue"
@@ -32,11 +31,10 @@ app.use(createPinia())
 app.use(router)
 app.component("font-awesome-icon", FontAwesomeIcon);
 
-// app.component('Contract', Contract)
-// app.component('Party', Party)
+app.component('PartyComp', PartyComp)
+app.component('WorkComp', WorkComp)
 // app.component('Deontic', Deontic)
 // app.component('Action', Action)
-// app.component('ObjectComp', ObjectComp)
 // app.component('Provide', Provide)
 // app.component('Play', Play)
 // app.component('Payment', Payment)

src/router/router.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import MainView from '../views/Main.vue'
-import ContractView from '../views/Contract.vue'
+import ContractView from '../views/ContractView.vue'
 import CreateNewContractView from '../views/CreateNewContract.vue'
 import MyContractsView from '../views/MyContracts.vue'
 

src/stores/contract.ts

@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia'
 import { useUserStore } from './user'
-import { Contract, VersionSummary } from '../types/ContractTypes.interface'
+import { Contract, VersionSummary, Party } from '../types/ContractTypes.interface'
 
 export const useContractStore = defineStore({
     id: 'contract',
     state: () => ({
         localContracts: [],
-        selectedContract: ''
+        selectedContract: '',
+        parties: [],
+        ipObjects: []
     }),
     getters: {
         getCreatedDate: (state) => {

src/views/ContractView.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useContractStore } from "../stores/contract";
+import { Contract, Version, VersionSummary } from "../types/ContractTypes.interface";
+import { storeToRefs } from "pinia";
+
+const contractStore = useContractStore();
+const { selectedContract } = storeToRefs(useContractStore());
+const contractToView = ref<Contract>();
+const getContractByName = contractStore.getContractByName;
+contractToView.value = getContractByName(selectedContract.value);
+
+const versions = ref<VersionSummary[]>()
+const getVersionHistory = contractStore.getVersionListByContractName;
+versions.value = getVersionHistory;
+const lastVersionToView = ref<Version>()
+
+</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"/>
+        </div>
+        <div class="col-lg-3">
+            <div>
+                <h3>Royalties Distribution</h3>
+                data graphs
+            </div>
+            <div>
+                <h3>Version History</h3>
+                <ul>
+                    <li v-for="version in versions" :key="version">
+                        Version: {{ version.versionNumber }}
+                        <br/>
+                        {{ version.date }}
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>

tsconfig.json

@@ -3,4 +3,4 @@
         "noUnusedLocals": false,
         "noUnusedParameters": false,
     }
-  }
+}