Add components for editable Party/IPO/Deontics page

src/components/EditableIPOComp.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    data: Object
+})
+</script>
+
+<template>
+<p>{{ data.metadata["rdfs:label"] }}</p>
+</template> 

src/components/EditablePartyComp.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    data: Object,
+    deontics: [],
+    actions: []
+})
+
+function getDeonticById(deonticId: string) {
+    let deontic = props.deontics.find(d => d.identifier === deonticId);
+    if (deontic)
+        return deontic.metadata["rdfs:label"]
+    else
+        return "N/A"
+}
+
+function getActionById(actionId: string) {
+    let action = props.actions.find(d => d.identifier === actionId);
+    console.log("actionId:" + actionId)
+    console.log(action)
+    if (action)
+        return action.class
+    else
+        return "N/A"
+}
+
+</script>
+
+<script lang="ts">
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPen } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+library.add(faPen)
+library.add(faXmark)
+</script>
+
+<template>
+<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" @click="$emit('partyDeleted', data.identifier)">
+            <span class="btn-label"><font-awesome-icon :icon="['fas', 'xmark']"/></span>
+        </button>
+    </div>
+    <div>
+        <div><span>Label: {{ data.metadata["rdfs:label"] }}</span></div>
+        <div><span>Class: {{ data.class }}</span></div>
+        <div><span>Address: {{ data.address }}</span></div>
+        <span v-if="data.deonticsIssued && data.deonticsIssued.length > 0">
+            <p><strong>Deontics Issued: </strong></p>
+            <ul>
+                <li v-for="deontic in data.deonticsIssued" :key="deontic">
+                    <p>{{ getDeonticById(deontic) }}</p>
+                </li>
+            </ul>
+        </span>
+        <span v-if="data.actionsIsSubject && data.actionsIsSubject.length > 0">
+            <p><strong>Subject to following actions: </strong></p>
+            <ul>
+                <li v-for="action in data.actionsIsSubject" :key="action">
+                    <p>{{ getActionById(action) }}</p>
+                </li>
+            </ul>
+        </span>
+    </div>
+</div>
+</template>

src/components/ModalCreateContractVersion.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useContractStore } from "../stores/contract";
 import { storeToRefs } from "pinia";
+import EPC from "./EditablePartyComp.vue";
+import EIC from "./EditableIPOComp.vue";
 
 const props = defineProps({
     contractName: String
@@ -16,6 +18,22 @@ function addParty() {
 function addIPO() {
     contractStore.addIPO()
 }
+
+function deleteParty(partyId: string) {
+    contractStore.deleteParty(partyId)
+}
+
+function deleteIPO(ipoId: string) {
+    console.log("delete"+ipoId)
+}
+
+function updateParty(partyId: string) {
+    console.log("update"+partyId)
+}
+
+function updateIPO(ipoId: string) {
+    console.log("update"+ipoId)
+}
 </script>
 
 <script lang="ts">
@@ -40,11 +58,21 @@ library.add(faCirclePlus)
                         <button type="button" class="btn btn-labeled" @click="addParty">
                             <span class="btn-label"><font-awesome-icon :icon="['fas', 'circle-plus']" /></span>
                         </button>
-                        <p v-for="party in versionUnderEdit.parties" :key="party.identifier">{{ party.metadata["rdfs:label"] }}</p>
+                        <EPC v-for="party in versionUnderEdit.parties" :key="party.identifier" 
+                            :data="party" 
+                            :deontics="versionUnderEdit.deontics"
+                            :actions="versionUnderEdit.actions"
+                            @party-deleted="deleteParty"
+                            @party-updated="updateParty"/>
                     </div>
                     <div>
                         <h3>Intellectual Properties</h3>
-                        <p v-for="ipo in versionUnderEdit.ipObjects" :key="ipo.identifier">{{ ipo.metadata["rdfs:label"] }}</p>
+                        <EIC v-for="ipo in versionUnderEdit.ipObjects" :key="ipo.identifier" 
+                            :data="ipo"
+                            :deontics="versionUnderEdit.deontics"
+                            :actions="versionUnderEdit.actions"
+                            @ipo-deleted="deleteIPO"
+                            @ipo-updated="updateIPO" />
                         <button type="button" class="btn btn-labeled" @click="addIPO">
                             <span class="btn-label"><font-awesome-icon :icon="['fas', 'circle-plus']" /></span>
                         </button>

src/stores/contract.ts

@@ -121,6 +121,43 @@ export const useContractStore = defineStore({
             })
             this.ipoCount++
         },
+        deleteParty(partyId: string) {
+            // remove dangling deontics and actions
+            let otherDeonticsAndActions = {"deontics": [], "actions": []}
+            this.versionUnderEdit.parties.forEach(party => {
+                if (party.identifier !== partyId) {
+                    console.log("Adding other stuff")
+                    console.log("Adding Deontics: " + party.deonticsIssued)
+                    console.log("Adding Actions: " + party.actionsIsSubject)
+                    otherDeonticsAndActions.deontics = otherDeonticsAndActions.deontics.concat(party.deonticsIssued)
+                    otherDeonticsAndActions.actions = otherDeonticsAndActions.actions.concat(party.actionsIsSubject)
+                }
+            });
+            console.log("Other Deontics etc")
+            console.log(otherDeonticsAndActions)
+            let selectedParty = this.versionUnderEdit.parties.find((party) => party.identifier === partyId)
+            selectedParty.deonticsIssued.forEach(deontic => {
+                console.log("Checking " + deontic)
+                if (!otherDeonticsAndActions.deontics.includes(deontic)) {
+                    console.log("This is not included, removing")
+                    this.versionUnderEdit.deontics = this.versionUnderEdit.deontics.filter((d) => {
+                        return d.identifier !== deontic
+                    })
+                }
+            });
+            selectedParty.actionsIsSubject.forEach(action => {
+                console.log("Checking " + action)
+                if (!otherDeonticsAndActions.actions.includes(action)) {
+                    console.log("This is not included, removing")
+                    this.versionUnderEdit.actions = this.versionUnderEdit.actions.filter((d) => {
+                        return d.identifier !== action
+                    })
+                }
+            });
+            this.versionUnderEdit.parties = this.versionUnderEdit.parties.filter((party) => {
+                return party.identifier !== partyId
+            })
+        },
         createNewContract() {
             let currentDate = new Date;
             let oldDate = new Date;