From d44bacaa0709e7e78cb775d67d3a37bb74a66774 Mon Sep 17 00:00:00 2001 From: Megha-Dev-19 Date: Mon, 29 Jan 2024 16:20:57 +0530 Subject: [PATCH] fix overflow in members --- .../widget/DAO/Members/MembersGroup.jsx | 1852 ++++++++--------- 1 file changed, 876 insertions(+), 976 deletions(-) diff --git a/apps/astraplusplus/widget/DAO/Members/MembersGroup.jsx b/apps/astraplusplus/widget/DAO/Members/MembersGroup.jsx index d1a6713..6347cf9 100644 --- a/apps/astraplusplus/widget/DAO/Members/MembersGroup.jsx +++ b/apps/astraplusplus/widget/DAO/Members/MembersGroup.jsx @@ -11,1078 +11,978 @@ const EVERYONE = "Everyone"; const rolesArray = Object.keys(policy?.roles ?? {}); if (policy?.everyone?.permissions) { - rolesArray = rolesArray.concat(EVERYONE); + rolesArray = rolesArray.concat(EVERYONE); } const colorsArray = ["blue", "green", "pink", "red"]; const RolesColor = rolesArray.map((item, i) => { - return { color: colorsArray[i] ?? "", role: item }; + return { color: colorsArray[i] ?? "", role: item }; }); const onRemoveUserProposal = (memberId, roleId) => { - Near.call([ - { - contractName: daoId, - methodName: "add_proposal", - args: { - proposal: { - description: "Remove DAO member", - kind: { - RemoveMemberFromRole: { - member_id: memberId, - role: roleId ?? "council" - } - } - } - }, - gas: 219000000000000, - deposit: policy.policy.proposal_bond + Near.call([ + { + contractName: daoId, + methodName: "add_proposal", + args: { + proposal: { + description: "Remove DAO member", + kind: { + RemoveMemberFromRole: { + member_id: memberId, + role: roleId ?? "council" + } + } } - ]); + }, + gas: 219000000000000, + deposit: policy.policy.proposal_bond + } + ]); }; const viewTypes = { - CARD: "Card", - LIST: "List", - GROUP: "Group" + CARD: "Card", + LIST: "List", + GROUP: "Group" }; const viewList = [ - { - label: "Group View", - value: viewTypes.GROUP - }, - { - label: "List View", - value: viewTypes.LIST - }, - { - label: "Card View", - value: viewTypes.CARD - } + { + label: "Group View", + value: viewTypes.GROUP + }, + { + label: "List View", + value: viewTypes.LIST + }, + { + label: "Card View", + value: viewTypes.CARD + } ]; const groupTypes = { - ASCENDING: "Ascending", - DESCENDING: "Descending" + ASCENDING: "Ascending", + DESCENDING: "Descending" }; const filterlist = - [...rolesArray, groupTypes.ASCENDING, groupTypes.DESCENDING] ?? []; + [...rolesArray, groupTypes.ASCENDING, groupTypes.DESCENDING] ?? []; State.init({ - filtersOpen: false, - selectedView: viewTypes.GROUP, - viewModalOpen: false, - filters: [], - expandedTables: {}, - isLoading: false, - search: "", - filteredData: [], - removeFromRole: null, - currentPage: currentPage, - groupViewPages: null // current pages for each group + filtersOpen: false, + selectedView: viewTypes.GROUP, + viewModalOpen: false, + filters: [], + expandedTables: {}, + isLoading: false, + search: "", + filteredData: [], + removeFromRole: null, + currentPage: currentPage, + groupViewPages: null // current pages for each group }); const Wrapper = styled.div` - width: 98%; + width: 98%; - a { - color: #4498e0; - font-size: 0.8rem; - font-weight: 600; - text-decoration: none; - - &:hover { - color: #4498e0cc; - } - } - - .custom-tag { - border-top-right-radius: 9999px; - border-bottom-right-radius: 9999px; - border-top-left-radius: 9999px; - border-bottom-left-radius: 9999px; - padding-inline: 0.8rem; - padding-block: 0.3rem; - display: flex; - gap: 0.5rem; - border-width: 1px; - border-style: solid; - font-size: 13px; - } + a { + color: #4498e0; + font-size: 0.8rem; + font-weight: 600; + text-decoration: none; - .blue-bg { - background-color: rgba(68, 152, 224, 0.1); - color: rgba(68, 152, 224, 1); - border-color: rgba(68, 152, 224, 1); + &:hover { + color: #4498e0cc; } - - .green-bg { - background-color: rgba(35, 159, 40, 0.1); - color: rgba(35, 159, 40, 1); - border-color: rgba(35, 159, 40, 1); - } - - .pink-bg { - background-color: rgba(242, 155, 192, 0.1); - color: rgba(242, 155, 192, 1); - border-color: rgba(242, 155, 192, 1); - } - - .red-bg { - background-color: rgba(194, 63, 56, 0.1); - color: rgba(194, 63, 56, 1); - border-color: rgba(194, 63, 56, 1); - } - + } + + .custom-tag { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; + padding-inline: 0.8rem; + padding-block: 0.3rem; + display: flex; + gap: 0.5rem; + border-width: 1px; + border-style: solid; + font-size: 13px; + } + + .blue-bg { + background-color: rgba(68, 152, 224, 0.1); + color: rgba(68, 152, 224, 1); + border-color: rgba(68, 152, 224, 1); + } + + .green-bg { + background-color: rgba(35, 159, 40, 0.1); + color: rgba(35, 159, 40, 1); + border-color: rgba(35, 159, 40, 1); + } + + .pink-bg { + background-color: rgba(242, 155, 192, 0.1); + color: rgba(242, 155, 192, 1); + border-color: rgba(242, 155, 192, 1); + } + + .red-bg { + background-color: rgba(194, 63, 56, 0.1); + color: rgba(194, 63, 56, 1); + border-color: rgba(194, 63, 56, 1); + } + + table { + overflow-x: auto; + font-size: 14px; + width: 100%; + box-sizing: border-box; + } + + @media screen and (max-width: 1000px) { table { - overflow-x: auto; - font-size: 14px; - width: 100%; - box-sizing: border-box; - } - - @media screen and (max-width: 1000px) { - table { - display: block; - } - } - - th, - td { - padding: 15px; - text-align: left; - } - - .role-tag-td { - display: block; - width: max-content; - } - - tr { - border-bottom: 1px solid lightgray; - } - - thead { - border-bottom: 2px solid #4498e0; - } - - .icons-color i { - color: #4498e0; - } - - .danger i { - color: rgb(229, 72, 77); - } - - .card-view-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 1rem; - } - - .text-gray { - color: gray !important; - } - - .text-black { - color: black !important; - } - - .text-sm { - font-size: 12px; - } - - ul { - padding-left: 1rem !important; - } - - .p-2 { - padding: 0.8rem; - } - - .gap-y-3 { - row-gap: 1rem !important; - } - - .opacity-low { - opacity: 0.4; - background-color: rgba(0, 0, 0, 0.03); - } - - .overlay-head { - position: absolute; - top: 45%; - left: 45%; - font-size: 28px; - zindex: 1000; + display: block; } + } + + th, + td { + padding: 15px; + text-align: left; + } + + .role-tag-td { + display: block; + width: max-content; + } + + tr { + border-bottom: 1px solid lightgray; + } + + thead { + border-bottom: 2px solid #4498e0; + } + + .icons-color i { + color: #4498e0; + } + + .danger i { + color: rgb(229, 72, 77); + } + + .card-view-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 1rem; + } + + .text-gray { + color: gray !important; + } + + .text-black { + color: black !important; + } + + .text-sm { + font-size: 12px; + } + + ul { + padding-left: 1rem !important; + } + + .p-2 { + padding: 0.8rem; + } + + .gap-y-3 { + row-gap: 1rem !important; + } + + .opacity-low { + opacity: 0.4; + background-color: rgba(0, 0, 0, 0.03); + } + + .overlay-head { + position: absolute; + top: 45%; + left: 45%; + font-size: 28px; + zindex: 1000; + } `; function followUser(user, isFollowing) { - const dataToSend = { - graph: { follow: { [user]: isFollowing ? null : "" } }, - index: { - graph: JSON.stringify({ - key: "follow", - value: { - type, - accountId: user - } - }), - notify: JSON.stringify({ - key: user, - value: { - type - } - }) + const dataToSend = { + graph: { follow: { [user]: isFollowing ? null : "" } }, + index: { + graph: JSON.stringify({ + key: "follow", + value: { + type, + accountId: user } - }; - Social.set(dataToSend, { - force: true - }); + }), + notify: JSON.stringify({ + key: user, + value: { + type + } + }) + } + }; + Social.set(dataToSend, { + force: true + }); } const PermissionsPopover = ({ currentRole }) => { - const permissions = - currentRole === EVERYONE - ? policy?.everyone?.permissions - : policy?.roles?.[currentRole]?.permissions; - - return ( - , - content: ( -
-
- Admins have permissions to: -
- {permissions?.length > 0 && ( -
    - {permissions?.map((i) => ( -
  • {i}
    • - ))} -
- )} -
- ) - }} - /> - ); + const permissions = + currentRole === EVERYONE + ? policy?.everyone?.permissions + : policy?.roles?.[currentRole]?.permissions; + + return ( + , + content: ( +
+
Admins have permissions to:
+ {permissions?.length > 0 && ( +
    + {permissions?.map((i) => ( +
  • {i}
    • + ))} +
+ )} +
+ ) + }} + /> + ); }; const RoleTag = ({ roles, showIcon }) => { - const tags = []; - if (Array.isArray(roles)) { - roles.map((item) => { - tags.push( -
i.role === item)?.color ?? "" - }-bg`} - > - {item} - {showIcon && } -
- ); - }); - } else { - // for everyone - tags.push( -
- {roles} - {showIcon && } -
- ); - } - return
{tags.map((i) => i)}
; + const tags = []; + if (Array.isArray(roles)) { + roles.map((item) => { + tags.push( +
i.role === item)?.color ?? "" + }-bg`} + > + {item} + {showIcon && } +
+ ); + }); + } else { + // for everyone + tags.push( +
+ {roles} + {showIcon && } +
+ ); + } + return
{tags.map((i) => i)}
; }; const FollowBtn = ({ itemDetails }) => { - return ( - - ) : ( - - ), - variant: - (itemDetails.isUserFollowed ? "danger" : "info") + - " icon outline", - size: "sm", - onClick: () => - followUser(itemDetails.account, itemDetails.isUserFollowed) - }} - /> - ); + return ( + + ) : ( + + ), + variant: + (itemDetails.isUserFollowed ? "danger" : "info") + " icon outline", + size: "sm", + onClick: () => + followUser(itemDetails.account, itemDetails.isUserFollowed) + }} + /> + ); }; const Table = ({ title, tableData, showExpand }) => { - if (!tableData?.length > 0) { - return null; - } - - return ( -
- {title && ( -
-

- {title} -

- {showExpand && ( -
{ - const data = { ...state.expandedTables }; - data[title] = - typeof data[title] === "boolean" - ? !data[title] - : false; - - State.update({ expandedTables: data }); - }} - > - {state.expandedTables[title] !== false ? ( - - ) : ( - - )} -
+ if (!tableData?.length > 0) { + return null; + } + + return ( +
+ {title && ( +
+

+ {title} +

+ {showExpand && ( +
{ + const data = { ...state.expandedTables }; + data[title] = + typeof data[title] === "boolean" ? !data[title] : false; + + State.update({ expandedTables: data }); + }} + > + {state.expandedTables[title] !== false ? ( + + ) : ( + + )} +
+ )} +
+ )} + {state.expandedTables[title] !== false && ( +
+ + + + + {state.selectedView === viewTypes.LIST && } + + + + + + + + + + {isCongressDaoID && ( +
Coming Soon
+ )} + + {tableData?.map((item) => { + return ( + + + {state.selectedView === viewTypes.LIST && ( + )} - - )} - {state.expandedTables[title] !== false && ( -
NameRole + Casted Votes + + + Yes Votes + + + No Votes + + + Spam Votes + + + Proposals
+ Accepted/ Created +
+ + + +
- - - - {state.selectedView === viewTypes.LIST && ( - - )} - - - - - - - - - - {isCongressDaoID && ( -
Coming Soon
- )} - - {tableData?.map((item) => { - return ( - - - {state.selectedView === viewTypes.LIST && ( - - )} - - - - - - - - ); - })} - -
NameRole - Casted Votes - - - Yes Votes - - - No Votes - - - Spam Votes - - - Proposals
- Accepted/ Created -
- - - - {item.approve + item.rejected} {item.approve} {item.rejected}{item.spamVotes ?? 0} - {item.acceptedProposals} /{" "} - {item.totalProposals} - - - - - ), - size: "sm", - variant: "icon info outline" - }} - /> - {/* we don't show propose to mint and remove for congress dao */} - {!isCongressDaoID && - !isVotingBodyDao && ( -
- - -
- )} -
- )} + {item.approve + item.rejected} + {item.approve} + {item.rejected} + {item.spamVotes ?? 0} + + {item.acceptedProposals} / {item.totalProposals} + + + + + + ), + size: "sm", + variant: "icon info outline" + }} + /> + {/* we don't show propose to mint and remove for congress dao */} + {!isCongressDaoID && !isVotingBodyDao && ( +
+ + +
+ )} + + + ); + })} + +
- ); + )} +
+ ); }; const actions = { - AddProposal: "create proposal", - VoteApprove: "vote approve", - VoteReject: "vote reject", - VoteRemove: "vote remove" + AddProposal: "create proposal", + VoteApprove: "vote approve", + VoteReject: "vote reject", + VoteRemove: "vote remove" }; const kinds = { - config: "Change config", - policy: "Change policy", - add_member_to_role: "Add member to role", - remove_member_from_role: "Remove member from role", - call: "Call", - upgrade_self: "Upgrade self", - upgrade_remote: "Upgrade remote", - transfer: "Transfer", - set_vote_token: "Set staking contract", - add_bounty: "Add bounty", - bounty_done: "Bounty done", - vote: "Vote", - factory_info_update: "Factory info update", - policy_add_or_update_role: "Change policy add or update role", - policy_remove_role: "Change policy remove role", - policy_update_default_vote_policy: - "Change policy update default vote policy", - policy_update_parameters: "Change policy update parameters", - "*": "All types" + config: "Change config", + policy: "Change policy", + add_member_to_role: "Add member to role", + remove_member_from_role: "Remove member from role", + call: "Call", + upgrade_self: "Upgrade self", + upgrade_remote: "Upgrade remote", + transfer: "Transfer", + set_vote_token: "Set staking contract", + add_bounty: "Add bounty", + bounty_done: "Bounty done", + vote: "Vote", + factory_info_update: "Factory info update", + policy_add_or_update_role: "Change policy add or update role", + policy_remove_role: "Change policy remove role", + policy_update_default_vote_policy: "Change policy update default vote policy", + policy_update_parameters: "Change policy update parameters", + "*": "All types" }; const renderPermissions = (role) => { - const permissions = new Map(); - const rolePermissions = - role === "all" - ? policy.everyone?.permissions - : policy.roles[role].permissions; - rolePermissions?.forEach((p) => { - const [kindKey, actionKey] = p.split(":"); - const kind = kinds[kindKey] || kindKey; - const action = actions[actionKey] || actionKey; - if (!permissions.has(action)) { - permissions.set(action, new Set()); - } - permissions.get(action).add(kind); - }); - - const filteredPermissions = new Map( - [...permissions].filter(([action, kindsSet]) => kindsSet.size > 0), - [...permissions].filter(([action, kindsSet]) => kindsSet.size > 0) - ); - const sortedPermissions = Array.from(filteredPermissions.entries()).sort( - (a, b) => { - if (a[0] === actions.AddProposal) { - return -1; - } - if (b[0] === actions.AddProposal) { - return 1; - } - return 0; - } - ); - return sortedPermissions.map(([action, kindsSet], i) => ( -
  • - {action}{" "} - {action === actions.AddProposal - ? "of the following types:" - : "on proposals of the following types:"} -
      - {Array.from(kindsSet).map((kind, j) => ( -
    • {kind}
      • - ))} -
    -
    • - )); + const permissions = new Map(); + const rolePermissions = + role === "all" + ? policy.everyone?.permissions + : policy.roles[role].permissions; + rolePermissions?.forEach((p) => { + const [kindKey, actionKey] = p.split(":"); + const kind = kinds[kindKey] || kindKey; + const action = actions[actionKey] || actionKey; + if (!permissions.has(action)) { + permissions.set(action, new Set()); + } + permissions.get(action).add(kind); + }); + + const filteredPermissions = new Map( + [...permissions].filter(([action, kindsSet]) => kindsSet.size > 0), + [...permissions].filter(([action, kindsSet]) => kindsSet.size > 0) + ); + const sortedPermissions = Array.from(filteredPermissions.entries()).sort( + (a, b) => { + if (a[0] === actions.AddProposal) { + return -1; + } + if (b[0] === actions.AddProposal) { + return 1; + } + return 0; + } + ); + return sortedPermissions.map(([action, kindsSet], i) => ( +
  • + {action}{" "} + {action === actions.AddProposal + ? "of the following types:" + : "on proposals of the following types:"} +
      + {Array.from(kindsSet).map((kind, j) => ( +
    • {kind}
      • + ))} +
    +
    • + )); }; const isUserAllowedTo = (user, kind, action) => { - const userRoles = policy?.users?.[user] || ["Everyone"]; - let allowed = false; + const userRoles = policy?.users?.[user] || ["Everyone"]; + let allowed = false; - userRoles.forEach((role) => { - let permissions = policy?.roles?.[role]?.permissions; - if (role === "Everyone") { - permissions = policy.everyone.permissions; - } - if (permissions) { - const allowedRole = - permissions?.includes( - `${kind.toString()}:${action.toString()}` - ) || - permissions?.includes(`${kind.toString()}:*`) || - permissions?.includes(`*:${action.toString()}`) || - permissions?.includes("*:*"); - allowed = allowed || allowedRole; - } - return allowedRole; - }); - return allowed; + userRoles.forEach((role) => { + let permissions = policy?.roles?.[role]?.permissions; + if (role === "Everyone") { + permissions = policy.everyone.permissions; + } + if (permissions) { + const allowedRole = + permissions?.includes(`${kind.toString()}:${action.toString()}`) || + permissions?.includes(`${kind.toString()}:*`) || + permissions?.includes(`*:${action.toString()}`) || + permissions?.includes("*:*"); + allowed = allowed || allowedRole; + } + return allowedRole; + }); + return allowed; }; const ProposeToMintSBT = ({ itemDetails }) => { - return ( - {} - }} - /> - ); + return ( + {} + }} + /> + ); }; const ProposeToRemove = ({ user }) => { - if ( - isUserAllowedTo( - context.accountId, - "remove_member_from_role", - "AddProposal" - ) - ) - return ( + if ( + isUserAllowedTo(context.accountId, "remove_member_from_role", "AddProposal") + ) + return ( + + ), + content: ( +
    + - ), - content: ( -
    - { - return { - title: r, - value: r - }; - }), - onChange: (v) => - State.update({ - removeFromRole: v - }), - value: state.removeFromRole - }} - /> - - onRemoveUserProposal( - user, - state.removeFromRole - ) - }} - /> -
    - ) + label: "Propose to remove from role:", + options: rolesArray.map((r) => { + return { + title: r, + value: r + }; + }), + onChange: (v) => + State.update({ + removeFromRole: v + }), + value: state.removeFromRole }} - /> - ); + /> + + onRemoveUserProposal(user, state.removeFromRole) + }} + /> +
    + ) + }} + /> + ); - return null; + return null; }; const UIData = - state.filters?.length > 0 || state.search ? state.filteredData : data; + state.filters?.length > 0 || state.search ? state.filteredData : data; let paginatedMembers = []; const currentPageState = - state.filters?.length > 0 || state.search ? 1 : state.currentPage; + state.filters?.length > 0 || state.search ? 1 : state.currentPage; paginatedMembers = UIData.slice( - (currentPageState - 1) * resPerPage, - currentPageState * resPerPage + (currentPageState - 1) * resPerPage, + currentPageState * resPerPage ); function containsOnly(array, item) { - return array.length === 1 && array[0] === item; + return array.length === 1 && array[0] === item; } const GroupView = () => { - if (!state.groupViewPages) { - const pages = {}; - rolesArray?.map((role) => { - pages[role] = 1; - }); - State.update({ - groupViewPages: pages - }); - } - - const Pagination = ({ role, data }) => { - return ( -
    - { - State.update({ - groupViewPages: { - ...state.groupViewPages, - ...{ [role]: page } - } - }); - }, - revaluateOnRender: true - }} - /> -
    - ); - }; - - let view = []; - let data = state.filters; - if ( - containsOnly(state.filters, groupTypes.ASCENDING) || - containsOnly(state.filters, groupTypes.DESCENDING) || - !state.filters?.length > 0 - ) { - data = rolesArray; - } - data?.map((role) => { - const currentPage = - state.filters?.length > 0 || state.search - ? 1 - : state.groupViewPages[role] ?? 1; - const tableData = UIData?.filter((item) => item.groups.includes(role)); - let paginatedGroupData = []; - paginatedGroupData = tableData.slice( - (currentPage - 1) * resPerPage, - currentPage * resPerPage - ); - - view.push( - <> - - - - ); + if (!state.groupViewPages) { + const pages = {}; + rolesArray?.map((role) => { + pages[role] = 1; }); - return
    {view?.map((item) => item)}
    ; + State.update({ + groupViewPages: pages + }); + } + + const Pagination = ({ role, data }) => { + return ( +
    + { + State.update({ + groupViewPages: { + ...state.groupViewPages, + ...{ [role]: page } + } + }); + }, + revaluateOnRender: true + }} + /> +
    + ); + }; + + let view = []; + let data = state.filters; + if ( + containsOnly(state.filters, groupTypes.ASCENDING) || + containsOnly(state.filters, groupTypes.DESCENDING) || + !state.filters?.length > 0 + ) { + data = rolesArray; + } + data?.map((role) => { + const currentPage = + state.filters?.length > 0 || state.search + ? 1 + : state.groupViewPages[role] ?? 1; + const tableData = UIData?.filter((item) => item.groups.includes(role)); + let paginatedGroupData = []; + paginatedGroupData = tableData.slice( + (currentPage - 1) * resPerPage, + currentPage * resPerPage + ); + + view.push( + <> +
    + + + ); + }); + return
    {view?.map((item) => item)}
    ; }; return ( - - {data?.length === 0 ? ( -

    This account doesn't have any members.

    - ) : ( -
    -

    Members

    -
    -

    Groups

    -
    - -
    -
    -
    - { - const filteredData = [...data]; - if (value) { - filteredData = filteredData?.filter( - (item) => { - const searchTerm = - value.toLowerCase(); - return item.account.includes( - searchTerm - ); - } - ); - } - State.update({ - ...state, - filteredData: filteredData, - search: value - }); - }, - icon: ( - - ), - inputProps: { - title: "Disabled because no API for searching yet" + + {data?.length === 0 ? ( +

    This account doesn't have any members.

    + ) : ( +
    +

    Members

    +
    +

    Groups

    +
    + +
    +
    +
    + { + const filteredData = [...data]; + if (value) { + filteredData = filteredData?.filter((item) => { + const searchTerm = value.toLowerCase(); + return item.account.includes(searchTerm); + }); + } + State.update({ + ...state, + filteredData: filteredData, + search: value + }); + }, + icon: ( + + ), + inputProps: { + title: "Disabled because no API for searching yet" + } + }} + /> +
    + + {state.selectedView} View + + + ), + variant: "info outline ", + size: "md", + className: "" + }} + /> + ), + content: ( + { + State.update({ + ...state, + selectedView: "" + }); + }, + applyView: (selectedView) => { + State.update({ + ...state, + selectedView + }); + }, + selectedView: state.selectedView + }} + /> + ) + }} + /> + + { + State.update({ + ...state, + filtersOpen: open + }); + }, + toggle: ( + + Filter + + + ), + variant: "info", + size: "md" + }} + /> + ), + content: ( + { + State.update({ + ...state, + filters: [] + }); + }, + applyFilters: (filters) => { + const filteredData = [...data]; + const rolesFilter = filters?.filter( + (i) => + i !== groupTypes.ASCENDING && + i !== groupTypes.DESCENDING + ); + + if (rolesFilter?.length > 0) { + filteredData = filteredData.filter((item) => { + let results = []; + if (rolesFilter.includes(EVERYONE)) { + results.push(item?.groups === EVERYONE); } - }} - /> -
    - - {state.selectedView} View - - - ), - variant: "info outline ", - size: "md", - className: "" - }} - /> - ), - content: ( - { - State.update({ - ...state, - selectedView: "" - }); - }, - applyView: (selectedView) => { - State.update({ - ...state, - selectedView - }); - }, - selectedView: state.selectedView - }} - /> + + if (Array.isArray(item.groups)) { + results.push( + item?.groups?.some((i) => + rolesFilter?.includes(i) ) - }} - /> + ); + } + return results.includes(true); + }); + } + if (filters?.includes(groupTypes.ASCENDING)) { + filteredData = filteredData + .slice() + .sort((a, b) => a.account.localeCompare(b.account)); + } - b.account.localeCompare(a.account)); + } + + State.update({ + ...state, + filters: filters, + filteredData: filteredData + }); + }, + filterlist: filterlist + }} + /> + ) + }} + /> +
    +
    + {state.isLoading ? ( +
    + +
    + ) : ( +
    + {state.selectedView === viewTypes.GROUP ? ( + + ) : ( + <> + {state.selectedView === viewTypes.LIST && ( +
    + )} + {state.selectedView === viewTypes.CARD && ( +
    + {paginatedMembers?.map((item) => { + return ( +
    +
    + + {accountId !== item.account && ( + + )} +
    +
    + +
    +
    + {!isCongressDaoID && !isVotingBodyDao && ( +
    + + +
    + )} + { - State.update({ - ...state, - filtersOpen: open - }); - }, - toggle: ( - - Filter - - - ), - variant: "info", - size: "md" - }} - /> - ), - content: ( - { - State.update({ - ...state, - filters: [] - }); - }, - applyFilters: (filters) => { - const filteredData = [...data]; - const rolesFilter = - filters?.filter( - (i) => - i !== - groupTypes.ASCENDING && - i !== - groupTypes.DESCENDING - ); - - if (rolesFilter?.length > 0) { - filteredData = - filteredData.filter( - (item) => { - let results = - []; - if ( - rolesFilter.includes( - EVERYONE - ) - ) { - results.push( - item?.groups === - EVERYONE - ); - } - - if ( - Array.isArray( - item.groups - ) - ) { - results.push( - item?.groups?.some( - ( - i - ) => - rolesFilter?.includes( - i - ) - ) - ); - } - return results.includes( - true - ); - } - ); - } - if ( - filters?.includes( - groupTypes.ASCENDING - ) - ) { - filteredData = filteredData - .slice() - .sort((a, b) => - a.account.localeCompare( - b.account - ) - ); - } - - if ( - filters?.includes( - groupTypes.DESCENDING - ) - ) { - filteredData = filteredData - .slice() - .sort((a, b) => - b.account.localeCompare( - a.account - ) - ); - } - - State.update({ - ...state, - filters: filters, - filteredData: filteredData - }); - }, - filterlist: filterlist - }} - /> - ) + buttonProps: { + style: { + width: "inherit" + } + }, + children: ( + + View Voting History + + ), + variant: "info outline", + size: "sm" }} - /> -
    -
    - {state.isLoading ? ( -
    - -
    - ) : ( -
    - {state.selectedView === viewTypes.GROUP ? ( - - ) : ( - <> - {state.selectedView === viewTypes.LIST && ( -
    - )} - {state.selectedView === viewTypes.CARD && ( -
    - {paginatedMembers?.map((item) => { - return ( -
    -
    - - {accountId !== - item.account && ( - - )} -
    -
    - -
    -
    - {!isCongressDaoID && - !isVotingBodyDao && ( -
    - - -
    - )} - - View Voting - History - - ), - variant: - "info outline", - size: "sm" - }} - /> -
    - ); - })} -
    - )} -
    - { - State.update({ - currentPage: page - }); - }, - revaluateOnRender: true - }} - /> -
    - - )} - + /> + + ); + })} + )} - +
    + { + State.update({ + currentPage: page + }); + }, + revaluateOnRender: true + }} + /> +
    + + )} + )} - + + )} + );