Add a simple version editor that can add parties and ipos

hasanyah · Jun 13, 2022 · d8ea7c6 · d8ea7c6
1 parent 8f17bc5
commit d8ea7c6
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 15 deletions.
diff --git a/src/components/ModalCreateContractVersion.vue b/src/components/ModalCreateContractVersion.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useContractStore } from "../stores/contract";
+import { storeToRefs } from "pinia";
+
+const props = defineProps({
+    contractName: String
+})
+
+const contractStore = useContractStore();
+const { versionUnderEdit } = storeToRefs(useContractStore())
+
+function addParty() {
+    contractStore.addParty()
+}
+
+function addIPO() {
+    contractStore.addIPO()
+}
+</script>
+
+<script lang="ts">
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCirclePlus } from '@fortawesome/free-solid-svg-icons';
+library.add(faCirclePlus)
+</script>
+
+
+<template>
+    <div class="modal fade" id="ContractVersionCreator" data-bs-backdrop="static" data-bs-keyboard="false"
+        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="staticBackdropLabel">{{ contractName }} - New Version</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div>
+                        <h3>Parties</h3>
+                        <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>
+                    </div>
+                    <div>
+                        <h3>Intellectual Properties</h3>
+                        <p v-for="ipo in versionUnderEdit.ipObjects" :key="ipo.identifier">{{ ipo.metadata["rdfs:label"] }}</p>
+                        <button type="button" class="btn btn-labeled" @click="addIPO">
+                            <span class="btn-label"><font-awesome-icon :icon="['fas', 'circle-plus']" /></span>
+                        </button>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/stores/contract.ts b/src/stores/contract.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { useUserStore } from './user'
-import { Contract, Version, VersionSummary, Party, IPObject } from '../types/ContractTypes.interface'
+import { Contract, Version, VersionSummary, Party } from '../types/ContractTypes.interface'
+import _ from 'lodash'
 
 function isPartyEqual(pLeft: Party, pRight: Party): Boolean {
     return (
@@ -34,7 +35,10 @@ export const useContractStore = defineStore({
     id: 'contract',
     state: () => ({
         localContracts: [],
-        versionCount: 0
+        versionCount: 0,
+        partyCount: 0,
+        ipoCount: 0,
+        versionUnderEdit: {} as Version
     }),
     getters: {
         getCreatedDate: (state) => {
@@ -93,14 +97,30 @@ export const useContractStore = defineStore({
                 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)
-        // },
+        setVersionUnderEdit(version: Version) {
+            this.versionUnderEdit = _.cloneDeep(version);
+        },
+        addParty() {
+            this.versionUnderEdit.parties.push({
+                class: "Party",
+                role: "Party",
+                identifier: "party"+this.partyCount,
+                address: "party"+this.partyCount+"address",
+                metadata: {"rdfs:label" : "party"+this.partyCount},
+                deonticsIssued: [],
+                actionsIsSubject: []
+            })
+            this.partyCount++
+        },
+        addIPO() {
+            this.versionUnderEdit.ipObjects.push({
+                class: "Work",
+                type: "Work",
+                identifier: "Song"+this.ipoCount,
+                metadata: {"rdfs:label": "New Song " + this.ipoCount}
+            })
+            this.ipoCount++
+        },
         createNewContract() {
             let currentDate = new Date;
             let oldDate = new Date;

diff --git a/src/views/ContractView.vue b/src/views/ContractView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useContractStore } from "../stores/contract";
-import { Contract, Version, VersionSummary } from "../types/ContractTypes.interface";
-import { storeToRefs } from "pinia";
+import { Contract, Version } from "../types/ContractTypes.interface";
 import ModalContractVersionComparator from "../components/ModalContractVersionComparator.vue"
+import ModalCreateContractVersion from "../components/ModalCreateContractVersion.vue"
 import ContractComp from "../components/ContractComp.vue"
 import {useRoute} from 'vue-router'
 
@@ -13,10 +13,8 @@ const contractStore = useContractStore();
 const contractToView = ref<Contract>();
 contractToView.value = contractStore.getContractByName(viewedContractId);
 
-const versions = ref<VersionSummary[]>()
-versions.value = contractStore.getVersionListByContractName(viewedContractId);
+const versions = computed(() => contractStore.getVersionListByContractName(viewedContractId))
 
-const comparedVersionNumber = ref<number>(0)
 const comparedVersion = ref<Version>()
 
 function setComparedVersion(num: number) {
@@ -27,6 +25,10 @@ function setComparedVersion(num: number) {
     
 }
 setComparedVersion(-1);
+
+function createNewVersion(){
+    contractStore.setVersionUnderEdit(contractToView.value.versions.at(-1))
+}
 </script>
 
 <script lang="ts">
@@ -39,6 +41,7 @@ library.add(faCirclePlus)
     <div class="row">
         <div class="col-lg-9">
             <ContractComp :data="contractToView.versions.at(-1)" :contractName="contractToView.name"/>
+            <button data-bs-toggle="modal" data-bs-target="#VersionCreatorModal" @click="createNewVersion">Edit</button>
         </div>
         <div class="col-lg-3">
             <div>
@@ -65,4 +68,5 @@ library.add(faCirclePlus)
         </div>
     </div>
     <ModalContractVersionComparator id="VersionComparatorModal" :data="comparedVersion" :comparedData="contractToView.versions.at(-1)" :contractName="contractToView.name"/>
+    <ModalCreateContractVersion id="VersionCreatorModal" :contractName="contractToView.name"/>
 </template>