1import AddMemberModal from '/scripts/MyGroups/Modals/AddMemberModal.js'; 2import NotifyPopup from '/scripts/Modals/NotifyPopup.js'; 3import PendingMemberModal from '/scripts/MyGroups/Modals/PendingMemberModal.js'; 4import EditMemberModal from '/scripts/MyGroups/Modals/EditMemberModal.js'; 5 6export default { 7 name: 'MembersTab', 8 9 components: { 10 EditMemberModal, 11 AddMemberModal, 12 NotifyPopup, 13 PendingMemberModal, 14 }, 15 16 emits: ['refetch-members'], 17 18 props: ['visible', 'isParticipant', 'groupInfo', 'groupRoster', 'healthyChurchApi', 'healthyChurchSmallGroupsApi', 'authHeaders', 'isFetching', 'rockDomain'], 19 20 template: ` 21 <div class="members-container" v-show="visible"> 22 <div class="members-header"> 23 <div class="header-title">Group Roster</div> 24 <div class="add-member-button" v-if="!isParticipant" v-on:click="showAddMemberModal(true)"> 25 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> 26 <g> 27 <path 28 d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" 29 fill="#67C18C" /> 30 </g> 31 </svg> 32 33 <div class="add-member-label">Add Member</div> 34 </div> 35 </div> 36 <div class="members-roster"> 37 <div class="member-block" v-for="member in sortedGroupRoster" :key="member.id"> 38 <img class="edit-btn" 39 v-if="!isParticipant && member.roleType !== 'Host' && member.groupRoleName !== 'Host' && member.groupRoleName !== 'Leader' && member.groupMemberStatus !== 'Pending'" 40 src="/icons/edit_icon_blue.svg" alt="edit member" 41 v-on:click="showEditMemberModal(true, member)" 42 /> 43 <svg class="pending-member-button" v-if="member.groupMemberStatus === 'Pending'" 44 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" 45 v-on:click="showPendingMemberModal(true, member)"> 46 <mask id="mask0_2304_10103" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> 47 <rect width="24" height="24" fill="#D9D9D9"/> 48 </mask> 49 <g mask="url(#mask0_2304_10103)"> 50 <path d="M12 16L16 12L12 8L10.6 9.4L12.2 11H8V13H12.2L10.6 14.6L12 16ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="#F99E49"/> 51 </g> 52 </svg> 53 <div class="member-name">{{member.firstName}} {{member.lastName}}</div> 54 <div :class="{ 'member-type': true, 'pending-member': member.groupMemberStatus === 'Pending' }">{{getMemberRole(member)}}</div> 55 <div class="member-email">{{member.email ?? member.primaryEmail}}</div> 56 </div> 57 </div> 58 </div> 59 60 <EditMemberModal 61 :visible="isEditMemberModalVisible" 62 :member="selectedMember" 63 :authHeaders="authHeaders" 64 :groupInfo="groupInfo" 65 :healthyChurchApi="healthyChurchApi" 66 :healthyChurchSmallGroupsApi="healthyChurchSmallGroupsApi"
67 v-on:close="showEditMemberModal(false)" 68 v-on:confirm="handleEditMember" 69 /> 70 71 <AddMemberModal 72 :visible="isAddMemberModalVisible" 73 :authHeaders="authHeaders" 74 :groupInfo="groupInfo" 75 :healthyChurchApi="healthyChurchApi" 76 :healthyChurchSmallGroupsApi="healthyChurchSmallGroupsApi" 77 :members="sortedGroupRoster" 78 v-on:close="showAddMemberModal(false)" 79 v-on:confirm="handleAddMember" 80 v-on:error="handleError" 81 /> 82 83 <NotifyPopup 84 :visible="isErrorModalVisible" 85 title="Oops!" 86 :showSuccessOrErrorIcon="showSuccessOrErrorIcon" 87 message="The person youâre trying to add to the group is already a participant." 88 v-on:close="showErrorModal(false)" 89 /> 90 91 <PendingMemberModal 92 :visible="isPendingMemberModalVisible" 93 :pendingMember="selectedMember" 94 :authHeaders="authHeaders" 95 :healthyChurchApi="healthyChurchApi" 96 v-on:close="showPendingMemberModal(false)" 97 v-on:confirm="handlePendingMemberAccepted" 98 v-on:decline="handlePendingMemberDeclined" 99 v-on:error="handleError" 100 /> 101 `, 102 103 data() { 104 return { 105 debug: new URLSearchParams(window.location.search).has('debug'), 106 isEditMemberModalVisible: false, 107 isAddMemberModalVisible: false, 108 isPendingMemberModalVisible: false, 109 showSuccessOrErrorIcon: 'error', 110 selectedMember: {}, 111 } 112 }, 113 114 computed: { 115 sortedGroupRoster() { 116 const roleOrder = { "Host": 1, "CoHost": 2, "Leader": 3, "Co-Leader": 4, "Member": 5, "Participant": 6 }; 117 118 const sortedData = this.groupRoster.sort((a, b) => { 119 return roleOrder[a.groupRoleName] - roleOrder[b.groupRoleName]; 120 }); 121 122 return sortedData; 123 }, 124 }, 125 126 mounted() { 127 128 }, 129 130 methods: { 131 getMemberRole(member) { 132 return member.groupMemberStatus === 'Pending' ? 'Pending' : member.groupRoleName; 133 }, 134 135 showAddMemberModal(show) { 136 if (show) { 137 window.open(`${this.rockDomain}/send-invitation?groupid=${this.groupInfo.id}`); 138 return; 139 } 140 141 this.isAddMemberModalVisible = show; 142 }, 143 144 handleAddMember() { 145 this.showAddMemberModal(false); 146 this.$emit('refetch-members', { title: 'Success!' }); 147 }, 148 149 handlePendingMemberAccepted() { 150 this.isPendingMemberModalVisible = false; 151 this.$emit('refetch-members', { title: `${this.selectedMember.firstName} ${this.selectedMember.lastName} has been added to your group.` }); 152 this.selectedMember = {}; 153 }, 154 155 handlePendingMemberDeclined() { 156 this.isPendingMemberModalVisible = false; 157 this.$emit('refetch-members', { icon: 'red-sad-face', title: `${this.selectedMember.firstName} ${this.selectedMember.lastName} has been removed from your group.` }); 158 this.selectedMember = {}; 159 }, 160 161 showPendingMemberModal(show, member) { 162 console.log('Show pending member modal:', show, member); 163 this.selectedMember = member ?? {}; 164 this.isPendingMemberModalVisible = show; 165 }, 166 167 showEditMemberModal(show, member) { 168 this.isEditMemberModalVisible = show; 169 this.selectedMember = member || {}; 170 }, 171 172 showErrorModal(show) { 173 this.isErrorModalVisible = show; 174 }, 175 176 handleEditMember() { 177 this.showEditMemberModal(false); 178 this.$emit('refetch-members', { title: 'Success!', message: 'Member has been removed' }); 179 }, 180 181 handleError() { 182 this.showErrorModal(true); 183 }, 184 }, 185};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.