Feat/ps/assign user roles backend

app/src/components/NotificationDropdown.vue

@@ -15,14 +15,13 @@
       <li v-for="notification in paginatedNotifications" :key="notification.id">
         <a
           @click="updateNotification(notification)"
-          :href="isInvitation(notification) ? `/${notification.resource}` : `#`"
+          :href="getResource(notification)[0] === `teams` ? `/${notification.resource}` : `#`"
         >
           <div class="notification__body">
             <span :class="{ 'font-bold': !notification.isRead }">
               {{ notification.message }}
             </span>
           </div>
-          <!--<div class="notification__footer">{{ notification.author }} {{ notification.createdAt }}</div>-->
         </a>
       </li>
       <!-- Pagination Controls -->
@@ -57,25 +56,19 @@
 import { BellIcon } from '@heroicons/vue/24/outline'
 import { ChevronLeftIcon } from '@heroicons/vue/24/outline'
 import { ChevronRightIcon } from '@heroicons/vue/24/outline'
+import { useUserDataStore } from '@/stores/user'
+import { log, parseError } from '@/utils'
 
 const currentPage = ref(1)
 const itemsPerPage = ref(4)
 const totalPages = ref(0)
 
-const updateEndPoint = ref('')
-const {
-  //isFetching: isNotificationsFetching,
-  //error: notificationError,
-  data: notifications,
-  execute: executeFetchNotifications
-} = useCustomFetch<NotificationResponse>('notification').json()
+const endpointUrl = ref('')
 
-const {
-  //isFetching: isUpdateNotificationsFetching,
-  //error: isUpdateNotificationError,
-  execute: executeUpdateNotifications
-  //data: _notifications
-} = useCustomFetch<NotificationResponse>(updateEndPoint, {
+const { data: notifications, execute: executeFetchNotifications } =
+  useCustomFetch<NotificationResponse>('notification').get().json()
+
+const { execute: executeUpdateNotifications } = useCustomFetch<NotificationResponse>(endpointUrl, {
   immediate: false
 })
   .put()
@@ -91,22 +84,95 @@
   return idx > -1
 })
 
-const isInvitation = (notification: Notification) => {
+const getResource = (notification: Notification) => {
   if (notification.resource) {
     const resourceArr = notification.resource.split('/')
-    if (resourceArr[0] === 'teams') return true
+    return resourceArr
+  } else return []
+}
+
+const { execute: executeFetchMemberContract, data: memberContract } = useCustomFetch(endpointUrl, {
+  immediate: false,
+  beforeFetch: async ({ options, url, cancel }) => {
+    options.headers = {
+      memberaddress: `${useUserDataStore().address}`,
+      'Content-Type': 'application/json',
+      ...options.headers
+    }
+    return { options, url, cancel }
   }
+})
+  .get()
+  .json()
 
-  return false
-}
+const signature = ref('')
+
+const { execute: executeAddMemberSignature } = useCustomFetch(endpointUrl, {
+  immediate: false
+})
+  .put()
+  .json()
 
 const updateNotification = async (notification: Notification) => {
-  updateEndPoint.value = `notification/${notification.id}`
+  const resource = getResource(notification)
+  if (resource[0] === `role-assignment`) {
+    endpointUrl.value = `teams/${resource[1]}/member/contract`
+    //get contract
+    await executeFetchMemberContract()
+    const contract = JSON.parse(JSON.parse(memberContract.value.contract))
+    //sign contract
+    signature.value = await signContract(contract)
+    //save signature
+    endpointUrl.value = `teams/${resource[1]}/member/signature/${signature.value}`
+    await executeAddMemberSignature()
+  }
+  endpointUrl.value = `notification/${notification.id}`
 
   await executeUpdateNotifications()
   await executeFetchNotifications()
 }
 
+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 {
+    //@ts-ignore
+    return await window.ethereum.request({ method: 'eth_signTypedData_v4', params: params })
+  } catch (error) {
+    log.error(parseError(error))
+  }
+}
+
 const paginatedNotifications = computed(() => {
   if (!notifications.value?.data) return []
   const start = (currentPage.value - 1) * itemsPerPage.value

app/src/components/__tests__/MemberCard.spec.ts

@@ -45,7 +45,7 @@ describe('MemberCard', () => {
     }
     ;(useUserDataStore as unknown as mockReturn).mockReturnValue(userDataStore)
   })
-  const props = { member, teamId, ownerAddress }
+  const props = { isAddingRole: false, member, teamId, ownerAddress }
   const wrapper = mount(MemberCard, {
     props,
     global: {
@@ -61,6 +61,7 @@ describe('MemberCard', () => {
     it('shows delete button if user is the owner and not the member', async () => {
       const wrapper = mount(MemberCard, {
         props: {
+          isAddingRole: false,
           member: { name: 'John Doe', address: '0x123' },
           teamId: 1,
           ownerAddress: '0x4b6Bf5cD91446408290725879F5666dcd9785F62'
@@ -74,6 +75,7 @@ describe('MemberCard', () => {
     it('shows show-address button', async () => {
       const wrapper = mount(MemberCard, {
         props: {
+          isAddingRole: false,
           member: { name: 'John Doe', address: '0x123' },
           teamId: 1,
           ownerAddress: '0x4b6Bf5cD91446408290725879F5666dcd9785F62'
@@ -85,6 +87,7 @@ describe('MemberCard', () => {
     it('shows copy address button', async () => {
       const wrapper = mount(MemberCard, {
         props: {
+          isAddingRole: false,
           member: { name: 'John Doe', address: '0x123' },
           teamId: 1,
           ownerAddress: '0x4b6Bf5cD91446408290725879F5666dcd9785F62'
@@ -96,6 +99,7 @@ describe('MemberCard', () => {
     it('shows "Copied!" when address is copied', async () => {
       const wrapper = mount(MemberCard, {
         props: {
+          isAddingRole: false,
           member: { name: 'John Doe', address: '0x123' },
           teamId: 1,
           ownerAddress: '0x4b6Bf5cD91446408290725879F5666dcd9785F62'
@@ -109,6 +113,7 @@ describe('MemberCard', () => {
     it('does not show copy button if copy not supported', async () => {
       const wrapper = mount(MemberCard, {
         props: {
+          isAddingRole: false,
           member: { name: 'John Doe', address: '0x123' },
           teamId: 1,
           ownerAddress: '0x456'
@@ -123,6 +128,7 @@ describe('MemberCard', () => {
     it('does not show delete button if user is not the owner', async () => {
       const wrapper = mount(MemberCard, {
         props: {
+          isAddingRole: false,
           member: { name: 'John Doe', address: '0x123' },
           teamId: 1,
           ownerAddress: '0x456'
@@ -136,6 +142,7 @@ describe('MemberCard', () => {
     it('opens new window when show address button is clicked', async () => {
       const wrapper = mount(MemberCard, {
         props: {
+          isAddingRole: false,
           member: { name: 'John Doe', address: '0x123' },
           teamId: 1,
           ownerAddress: '0x4b6Bf5cD91446408290725879F5666dcd9785F62'
@@ -151,6 +158,7 @@ describe('MemberCard', () => {
     it('copies address when copy address button is clicked', async () => {
       const wrapper = mount(MemberCard, {
         props: {
+          isAddingRole: false,
           member: { name: 'John Doe', address: '0x123' },
           teamId: 1,
           ownerAddress: '0x4b6Bf5cD91446408290725879F5666dcd9785F62'

app/src/components/__tests__/NotificationDropdown.spec.ts

@@ -28,19 +28,29 @@ describe('NotificationDropdown.vue', () => {
 
   beforeEach(() => {
     // Mock the fetch function to return the mock notifications
-    vi.mock('@/composables/useCustomFetch', () => ({
-      useCustomFetch: () => ({
-        json: () => ({
-          data: ref({ data: mockNotifications }),
-          execute: vi.fn()
-        }),
-        put: () => ({
+    vi.mock('@/composables/useCustomFetch', async (importOriginal) => {
+      const actual: Object = await importOriginal()
+      return {
+        ...actual,
+        useCustomFetch: () => ({
           json: () => ({
+            data: ref({ data: mockNotifications }),
             execute: vi.fn()
+          }),
+          put: () => ({
+            json: () => ({
+              execute: vi.fn()
+            })
+          }),
+          get: () => ({
+            json: () => ({
+              data: ref({ data: mockNotifications }),
+              execute: vi.fn()
+            })
           })
         })
-      })
-    }))
+      }
+    })
 
     wrapper = mount(NotificationDropdown, {
       props: {}

app/src/components/forms/roles/AddEntitlementForm.vue

@@ -29,11 +29,13 @@
 import { useVuelidate } from '@vuelidate/core'
 import FormErrorMessage from '../../ui/FormErrorMessage.vue'
 
+const isInit = ref(true)
+
 const entitlement = defineModel({
   default: {
     entitlementTypeId: 0,
-    value: '',
-    isInit: true //so entitlement value isn't cleared on load
+    value: ''
+    //isInit: true //so entitlement value isn't cleared on load
   }
 })
 
@@ -48,7 +50,10 @@
 watch(
   () => entitlement.value.entitlementTypeId,
   (newType, oldType) => {
-    if (!entitlement.value.isInit && newType !== oldType && oldType !== 0) {
+    // if (!entitlement.value.isInit && newType !== oldType && oldType !== 0) {
+    //   entitlement.value.value = ''
+    // }
+    if (!isInit.value && newType !== oldType && oldType !== 0) {
       entitlement.value.value = ''
     }
   }

app/src/components/forms/roles/AddRoleCategoryForm.vue

@@ -54,7 +54,7 @@
             Role - {{ input.name ? input.name : index + 1 }}
           </div>
           <div class="collapse-content">
-            <AddRoleForm v-model="roleCategory.roles[index]" />
+            <AddRoleForm v-if="roleCategory.roles" v-model="roleCategory.roles[index]" />
           </div>
         </div>
       </section>
@@ -65,7 +65,7 @@
           class="w-6 h-6 cursor-pointer"
           @click="
             () => {
-              if (roleCategory.roles.length > 1) {
+              if (roleCategory.roles && roleCategory.roles.length > 1) {
                 roleCategory.roles.pop()
               }
             }
@@ -77,7 +77,7 @@
           class="w-6 h-6 cursor-pointer"
           @click="
             () => {
-              roleCategory.roles.push({
+              roleCategory?.roles?.push({
                 name: '',
                 description: '',
                 entitlements: [
@@ -109,6 +109,7 @@
         </div>
         <div class="collapse-content">
           <AddEntitlementForm
+            v-if="roleCategory.entitlements"
             v-model="roleCategory.entitlements[index]"
             :available-types="getAvailableTypes(index)"
           />
@@ -122,7 +123,7 @@
         class="w-6 h-6 cursor-pointer"
         @click="
           () => {
-            if (roleCategory.entitlements.length > 1) {
+            if (roleCategory.entitlements && roleCategory.entitlements.length > 1) {
               roleCategory.entitlements.pop()
             }
           }
@@ -134,7 +135,7 @@
         class="w-6 h-6 cursor-pointer"
         @click="
           () => {
-            roleCategory.entitlements.push({
+            roleCategory?.entitlements?.push({
               entitlementTypeId: 0,
               value: ''
             })
@@ -164,8 +165,9 @@
 import { useCustomFetch } from '@/composables/useCustomFetch'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
+import type { RoleCategory } from '@/types'
 
-const roleCategory = defineModel({
+const roleCategory = defineModel<RoleCategory>({
   default: {
     name: '',
     description: '',
@@ -226,25 +228,24 @@
   .get()
   .json()
 
-const {
-  execute: executeUpdateRoleCategory
-} = useCustomFetch(roleCategoryEndPoint, {
+const { execute: executeUpdateRoleCategory } = useCustomFetch(roleCategoryEndPoint, {
   immediate: false
 })
   .put(roleCategory)
   .json()
 
 const getAvailableTypes = (index: number) => {
   return computed(() => {
-    const selectedTypes = roleCategory.value.entitlements.map(
+    const selectedTypes = roleCategory.value.entitlements?.map(
       (entitlement) => entitlement.entitlementTypeId
     )
 
     return _entTypes.value?.entTypes.filter(
       (type: { id: number; name: string }) =>
         type.id === -1 ||
-        !selectedTypes.includes(type.id) ||
-        roleCategory.value.entitlements[index].entitlementTypeId === type.id
+        !selectedTypes?.includes(type.id) ||
+        (roleCategory.value.entitlements &&
+          roleCategory.value.entitlements[index].entitlementTypeId === type.id)
     )
   })
 }