pkp/pkp-lib#10290 Refine ParticipantManager permission logic (#509)

Author: jardakotesovec

src/managers/GalleyManager/GalleyManager.vue

@@ -7,9 +7,7 @@
 				v-bind="action.props || {}"
 				v-for="(action, i) in galleyManagerStore.topItems"
 				:key="i"
-			>
-				{{ action.label }}
-			</component>
+			></component>
 		</template>
 		<TableHeader>
 			<TableColumn v-for="(column, i) in galleyManagerStore.columns" :key="i">
@@ -35,9 +33,7 @@
 					v-bind="action.props || {}"
 					v-for="(action, i) in galleyManagerStore.bottomActions"
 					:key="i"
-				>
-					{{ action.label }}
-				</component>
+				></component>
 			</div>
 		</template>
 	</PkpTable>

src/managers/ParticipantManager/ParticipantManager.vue

@@ -4,9 +4,14 @@
 			<h3 class="text-2xl-bold uppercase text-heading">
 				{{ t('editor.submission.stageParticipants') }}
 			</h3>
-			<PkpButton @click="participantManagerStore.participantAssign()">
-				{{ t('common.assign') }}
-			</PkpButton>
+			<div class="flex gap-x-2">
+				<component
+					:is="Components[action.component] || action.component"
+					v-bind="action.props || {}"
+					v-for="(action, i) in participantManagerStore.topItems"
+					:key="i"
+				></component>
+			</div>
 		</div>
 		<ul
 			v-if="participantManagerStore.participantsList?.length"
@@ -60,16 +65,20 @@
 </template>
 <script setup>
 import UserAvatar from '@/components/UserAvatar/UserAvatar.vue';
-import PkpButton from '@/components/Button/Button.vue';
 import {useLocalize} from '@/composables/useLocalize';
 import {useParticipantManagerStore} from './participantManagerStore';
 import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+import ParticipantManagerActionButton from './ParticipantManagerActionButton.vue';
 
 const props = defineProps({
 	submission: {type: Object, required: true},
 	submissionStageId: {type: String, required: true},
 });
 
+const Components = {
+	ParticipantManagerActionButton,
+};
+
 const participantManagerStore = useParticipantManagerStore(props);
 
 const {t} = useLocalize();

src/managers/ParticipantManager/ParticipantManagerActionButton.vue

@@ -0,0 +1,28 @@
+<template>
+	<PkpButton
+		:is-primary="isPrimary"
+		:is-secondary="isSecondary"
+		:is-warnable="isWarnable"
+		:is-link="isLink"
+		@click="() => participantManagerStore[action](actionArgs)"
+	>
+		{{ label }}
+	</PkpButton>
+</template>
+<script setup>
+import PkpButton from '@/components/Button/Button.vue';
+
+import {useParticipantManagerStore} from './participantManagerStore';
+
+const participantManagerStore = useParticipantManagerStore();
+
+defineProps({
+	isPrimary: {type: Boolean, required: false, default: false},
+	isSecondary: {type: Boolean, required: false, default: false},
+	isWarnable: {type: Boolean, required: false, default: false},
+	action: {type: String, required: true},
+	actionArgs: {type: Object, required: false, default: () => {}},
+	isLink: {type: Boolean, default: false},
+	label: {type: String, required: true},
+});
+</script>

src/managers/ParticipantManager/participantManagerStore.js

@@ -74,7 +74,19 @@ export const useParticipantManagerStore = defineComponentStore(
 
 		const _actionFns = useParticipantManagerActions();
 
-		const itemActions = computed(() => _actionFns.getItemActions({}));
+		const topItems = computed(() =>
+			_actionFns.getTopItems({
+				submission: props.submission,
+				submissionStageId: props.submissionStageId,
+			}),
+		);
+
+		const itemActions = computed(() =>
+			_actionFns.getItemActions({
+				submission: props.submission,
+				submissionStageId: props.submissionStageId,
+			}),
+		);
 
 		function enrichActionArg(args) {
 			return {
@@ -122,6 +134,7 @@ export const useParticipantManagerStore = defineComponentStore(
 		return {
 			participantsList,
 			_actionFns,
+			topItems,
 			itemActions,
 			participantAssign,
 			participantRemove,

src/managers/ParticipantManager/useParticipantManagerActions.js

@@ -169,19 +169,48 @@ export function useParticipantManagerActions() {
 		});
 	}
 
-	function getItemActions() {
+	function getTopItems({submission, submissionStageId}) {
 		const {t} = useLocalize();
 
 		const actions = [];
 
-		// [Role::ROLE_ID_MANAGER, Role::ROLE_ID_SITE_ADMIN, Role::ROLE_ID_SUB_EDITOR],
-		const {hasCurrentUserAtLeastOneRole} = useCurrentUser();
+		const {hasCurrentUserAtLeastOneAssignedRoleInStage} = useCurrentUser();
 
-		const canAdminister = hasCurrentUserAtLeastOneRole([
-			pkp.const.ROLE_ID_MANAGER,
-			pkp.const.ROLE_ID_SITE_ADMIN,
-			pkp.const.ROLE_ID_SUB_EDITOR,
-		]);
+		const canAdminister = hasCurrentUserAtLeastOneAssignedRoleInStage(
+			submission,
+			submissionStageId,
+			[
+				pkp.const.ROLE_ID_MANAGER,
+				pkp.const.ROLE_ID_SITE_ADMIN,
+				pkp.const.ROLE_ID_SUB_EDITOR,
+			],
+		);
+
+		if (canAdminister) {
+			actions.push({
+				component: 'ParticipantManagerActionButton',
+				props: {label: t('common.assign'), action: Actions.PARTICIPANT_ASSIGN},
+			});
+		}
+		return actions;
+	}
+
+	function getItemActions({submission, submissionStageId}) {
+		const {t} = useLocalize();
+
+		const actions = [];
+
+		const {hasCurrentUserAtLeastOneAssignedRoleInStage} = useCurrentUser();
+
+		const canAdminister = hasCurrentUserAtLeastOneAssignedRoleInStage(
+			submission,
+			submissionStageId,
+			[
+				pkp.const.ROLE_ID_MANAGER,
+				pkp.const.ROLE_ID_SITE_ADMIN,
+				pkp.const.ROLE_ID_SUB_EDITOR,
+			],
+		);
 
 		if (canAdminister) {
 			actions.push({
@@ -217,6 +246,7 @@ export function useParticipantManagerActions() {
 	}
 
 	return {
+		getTopItems,
 		getItemActions,
 		participantAssign,
 		participantRemove,