Feat/assign user roles

app/src/components/forms/roles/entitlement-value/AccessValueForm.vue

@@ -36,7 +36,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { helpers, required } from '@vuelidate/validators'
 
 const options = ref({
-  resources: ['teams', 'roles', 'app'],
+  resources: ['teams', 'roles', 'app', 'expense-account'],
   levels: ['create', 'delete', 'update', 'read']
 })
 

app/src/components/sections/SingleTeamView/MemberCard.vue

@@ -22,6 +22,13 @@
         >
           {{ copied ? 'Copied!' : 'Copy address' }}
         </button>
+        <!--Add/Edit User Roles-->
+        <button
+          @click="showAddEditMemberRoles = !showAddEditMemberRoles"
+          class="btn btn-active btn-xs"
+        >
+          Add Roles
+        </button>
         <button
           v-if="member.address != ownerAddress && ownerAddress == useUserDataStore().address"
           class="btn btn-error btn-xs"
@@ -40,34 +47,50 @@
         from the team?
       </DeleteConfirmForm>
     </ModalComponent>
+    <ModalComponent v-if="roleCategories" v-model="showAddEditMemberRoles">
+      <AddMemberRolesForm
+        :role-categories="roleCategories"
+        :is-adding-role="isAddingRole"
+        v-model="member.roles"
+        @add-roles="emits('addRoles')"
+        @close-modal="showAddEditMemberRoles = !showAddEditMemberRoles"
+      />
+    </ModalComponent>
   </div>
 </template>
 <script setup lang="ts">
 import { useUserDataStore } from '@/stores/user'
 import DeleteConfirmForm from '@/components/forms/DeleteConfirmForm.vue'
 import ModalComponent from '@/components/ModalComponent.vue'
 import { useRoute } from 'vue-router'
-import type { MemberInput } from '@/types'
+import type { MemberInput, RoleCategory, Role } from '@/types'
 import { useClipboard } from '@vueuse/core'
 import { NETWORK } from '@/constant'
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 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 { 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()
 
+useVuelidate()
+
 const memberToBeDeleted = ref({ name: '', address: '', id: '' })
 const showDeleteMemberConfirmModal = ref(false)
+const showAddEditMemberRoles = ref(false)
+const roleCategories = ref<null | RoleCategory[]>(null)
 
 // useFetch instance for deleting member
 const {
@@ -87,6 +110,16 @@ const {
 })
   .delete()
   .json()
+
+// useFetch fetch role categories
+const {
+  execute: executeFetchRoleCategories,
+  data: _roleCategories
+} = useCustomFetch('role-category', {
+  immediate: false
+})
+  .get()
+  .json()
 // Watchers for deleting member
 watch([() => memberIsDeleting.value, () => deleteMemberError.value], async () => {
   if (!memberIsDeleting.value && !deleteMemberError.value) {
@@ -108,4 +141,9 @@ const { copy, copied, isSupported } = useClipboard()
 const openExplorer = (address: string) => {
   window.open(`${NETWORK.blockExplorerUrl}/address/${address}`, '_blank')
 }
+
+onMounted(async () => {
+ await executeFetchRoleCategories()
+ roleCategories.value = _roleCategories.value.roleCategories
+})
 </script>

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>