refactor: move logic to member section

globe-and-citizen · Aug 17, 2024 · 19de3be · 19de3be
1 parent 38b73b1
commit 19de3be
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 114 deletions.
diff --git a/app/src/components/sections/SingleTeamView/MemberCard.vue b/app/src/components/sections/SingleTeamView/MemberCard.vue
@@ -52,7 +52,7 @@
         :role-categories="roleCategories"
         :is-adding-role="isAddingRole"
         v-model="member.roles"
-        @add-roles="addRoles"
+        @add-roles="emits('addRoles')"
         @close-modal="showAddEditMemberRoles = !showAddEditMemberRoles"
       />
     </ModalComponent>
@@ -71,27 +71,26 @@ import { useErrorHandler } from '@/composables/errorHandler'
 import { useToastStore } from '@/stores/useToastStore'
 import { useCustomFetch } from '@/composables/useCustomFetch'
 import AddMemberRolesForm from '@/components/sections/SingleTeamView/forms/AddMemberRolesForm.vue'
-import { log, parseError } from "@/utils";
 import { useVuelidate } from "@vuelidate/core";
 
 const props = defineProps<{
+  isAddingRole: boolean
   member: Partial<MemberInput>
   teamId: Number
   ownerAddress: String
 }>()
 const { addSuccessToast } = useToastStore()
 
-const emits = defineEmits(['getTeam'])
+const emits = defineEmits(['getTeam', 'addRoles'])
 
 const route = useRoute()
 
-const v$ = useVuelidate()
+useVuelidate()
 
 const memberToBeDeleted = ref({ name: '', address: '', id: '' })
 const showDeleteMemberConfirmModal = ref(false)
 const showAddEditMemberRoles = ref(false)
 const roleCategories = ref<null | RoleCategory[]>(null)
-const isAddingRole = ref(false)
 
 // useFetch instance for deleting member
 const {
@@ -143,112 +142,6 @@ const openExplorer = (address: string) => {
   window.open(`${NETWORK.blockExplorerUrl}/address/${address}`, '_blank')
 }
 
-const createContract = () => {
-  let contract
-  if (member.value.roles)
-    for (const memberRole of member.value.roles) {
-      const roleCategory = _roleCategories
-        .value
-        .roleCategories
-        .find((category: RoleCategory) => 
-          category.id === (memberRole as any).role.roleCategoryId)
-
-      if (roleCategory && roleCategory.roles) {
-        const role = roleCategory
-          .roles
-          .find(
-            (_role: Role) => 
-              _role.id === (memberRole as any).roleId
-          )
-
-        const entitlements = []
-
-        if (role && role.entitlements) {
-          for (const entitlement of role.entitlements) {
-            if (
-              entitlement.entitlementType &&
-              entitlement.entitlementType.name === 'access' &&
-              entitlement.value.split(':')[0] === 'expense-account'
-            ) {
-              entitlements.push(entitlement.value)
-            }
-          }
-
-          if (entitlements.length > 0) {
-            contract = {
-              role: {
-                name: role.name,
-                entitlement: {
-                  name: "access",
-                  resource: entitlements[0].split(':')[0],
-                  accessLevel: entitlements[0].split(':')[1]
-                }
-              },
-              assignedTo: member.value.address,
-              assignedBy: useUserDataStore().address
-            }
-          }
-        }
-      }
-    }
-  return contract
-}
-
-const signContract = async (contract: undefined | Object) => {
-  if (!contract) return
-  const params = [
-    useUserDataStore().address,
-    {
-      types: {
-        EIP712Domain: [
-          { name: "name", type: "string" },
-          { name: "version", type: "string" }
-        ],
-        Entitlement: [
-          { name: "name", type: "string" },
-          { name: "resource", type: "string" },
-          { name: "accessLevel", type: "string" }
-        ],
-        Role: [
-          { name: "name", type: "string" },
-          { name: "entitlement", type: "Entitlement" }
-        ],
-        Contract: [
-          { name: "assignedTo", type: "address" },
-          { name: "assignedBy", type: "address" },
-          { name: "role", type: "Role" }
-        ]
-      },
-      primaryType: "Contract",
-      domain: {
-        "name": "CNC Contract",
-        "version": "1"
-      },
-      message: contract
-    }
-  ]
-  try {
-    return await (window as any).ethereum.request({method: "eth_signTypedData_v4", params: params})
-  } catch (error) {
-    log.error(parseError(error))
-  }
-}
-
-const addRoles = async () => {
-  isAddingRole.value = true
-  v$.value.$touch()
-  if (v$.value.$invalid) {
-    isAddingRole.value = false
-    return
-  }
-  const contract = createContract()
-  const signature = await signContract(contract)
-  console.log(`member.roles: `, member.value.roles)
-  console.log(`signature: `, signature)
-  console.log(`contract: `, JSON.stringify(contract))
-  isAddingRole.value = false
-}
-
 onMounted(async () => {
  await executeFetchRoleCategories()
  roleCategories.value = _roleCategories.value.roleCategories

diff --git a/app/src/components/sections/SingleTeamView/MemberSection.vue b/app/src/components/sections/SingleTeamView/MemberSection.vue
@@ -24,11 +24,13 @@
   </div>
   <MemberCard
     v-for="member in team.members"
+    :is-adding-role="isAddingRole"
     :ownerAddress="team.ownerAddress"
     :teamId="Number(team.id)"
     :member="member"
     :key="member.address"
     @getTeam="emits('getTeam')"
+    @add-roles="addRoles(member)"
   />
 </template>
 <script setup lang="ts">
@@ -38,14 +40,18 @@ import MemberCard from '@/components/sections/SingleTeamView/MemberCard.vue'
 import AddMemberCard from '@/components/sections/SingleTeamView/AddMemberCard.vue'
 import AddMemberForm from '@/components/sections/SingleTeamView/forms/AddMemberForm.vue'
 import ModalComponent from '@/components/ModalComponent.vue'
-import type { User } from '@/types'
+import type { User, MemberInput, RoleCategory, Role } from '@/types'
 import { useUserDataStore } from '@/stores/user'
 
 import { useToastStore } from '@/stores/useToastStore'
 import { useRoute } from 'vue-router'
+import { log, parseError } from "@/utils";
+import { useVuelidate } from "@vuelidate/core";
 
 const showAddMemberForm = ref(false)
 const teamMembers = ref([{ name: '', address: '', isValid: false }])
+const isAddingRole = ref(false)
+const v$ = useVuelidate()
 
 const { addSuccessToast, addErrorToast } = useToastStore()
 
@@ -121,4 +127,120 @@ const searchUsers = async (input: { name: string; address: string }) => {
     addErrorToast(error.message)
   }
 }
+
+const {
+  execute: executeFetchRoleCategories,
+  data: _roleCategories
+} = useCustomFetch('role-category', {
+  immediate: false
+})
+  .get()
+  .json()
+
+const createContract = async (member: Partial<MemberInput>) => {
+  let contract
+  if (member.roles)
+    for (const memberRole of member.roles) {
+      await executeFetchRoleCategories()
+      const roleCategory = _roleCategories
+        .value
+        .roleCategories
+        .find((category: RoleCategory) => 
+          category.id === (memberRole as any).role.roleCategoryId)
+
+      if (roleCategory && roleCategory.roles) {
+        const role = roleCategory
+          .roles
+          .find(
+            (_role: Role) => 
+              _role.id === (memberRole as any).roleId
+          )
+
+        const entitlements = []
+
+        if (role && role.entitlements) {
+          for (const entitlement of role.entitlements) {
+            if (
+              entitlement.entitlementType &&
+              entitlement.entitlementType.name === 'access' &&
+              entitlement.value.split(':')[0] === 'expense-account'
+            ) {
+              entitlements.push(entitlement.value)
+            }
+          }
+
+          if (entitlements.length > 0) {
+            contract = {
+              role: {
+                name: role.name,
+                entitlement: {
+                  name: "access",
+                  resource: entitlements[0].split(':')[0],
+                  accessLevel: entitlements[0].split(':')[1]
+                }
+              },
+              assignedTo: member.address,
+              assignedBy: useUserDataStore().address
+            }
+          }
+        }
+      }
+    }
+  return contract
+}
+
+const signContract = async (contract: undefined | Object) => {
+  if (!contract) return
+  const params = [
+    useUserDataStore().address,
+    {
+      types: {
+        EIP712Domain: [
+          { name: "name", type: "string" },
+          { name: "version", type: "string" }
+        ],
+        Entitlement: [
+          { name: "name", type: "string" },
+          { name: "resource", type: "string" },
+          { name: "accessLevel", type: "string" }
+        ],
+        Role: [
+          { name: "name", type: "string" },
+          { name: "entitlement", type: "Entitlement" }
+        ],
+        Contract: [
+          { name: "assignedTo", type: "address" },
+          { name: "assignedBy", type: "address" },
+          { name: "role", type: "Role" }
+        ]
+      },
+      primaryType: "Contract",
+      domain: {
+        "name": "CNC Contract",
+        "version": "1"
+      },
+      message: contract
+    }
+  ]
+  try {
+    return await (window as any).ethereum.request({method: "eth_signTypedData_v4", params: params})
+  } catch (error) {
+    log.error(parseError(error))
+  }
+}
+
+const addRoles = async (member: Partial<MemberInput>) => {
+  isAddingRole.value = true
+  if (v$.value.$errors.length > 0) {
+    console.log(`form is invalid... `, v$.value.$model)
+    isAddingRole.value = false
+    return
+  }
+  const contract = await createContract(member)
+  const signature = await signContract(contract)
+  console.log(`member.roles: `, member.roles)
+  console.log(`signature: `, signature)
+  console.log(`contract: `, JSON.stringify(contract))
+  isAddingRole.value = false
+}
 </script>
diff --git a/app/src/components/sections/SingleTeamView/forms/AddMemberRolesForm.vue b/app/src/components/sections/SingleTeamView/forms/AddMemberRolesForm.vue
@@ -15,7 +15,7 @@
         <select 
           class="w-1/2 bg-white" 
           v-model="role.role.roleCategoryId" 
-          @input="async () => {}"
+          @input="async () => { await v$.$validate() }"
         >
           <option value="0">-- Select Role Category --</option>
           <option 
@@ -26,7 +26,11 @@
             {{ roleCategory?.name }}
           </option>
         </select>
-        <select class="w-1/2 bg-white" v-model="role.roleId">
+        <select 
+          class="w-1/2 bg-white" 
+          v-model="role.roleId" 
+          @input="async () => { await v$.$validate() }"
+        >
           <option value="0">-- Select Role --</option>
           <option
             v-for="(role, roleIndex) of getRoles(index)"