merge: Allow restricting announcement to a set of roles (!1161)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1161

Closes #682

Approved-by: Hazelnoot <acomputerdog@gmail.com>
Approved-by: Marie <github@yuugi.dev>

packages/frontend/src/components/MkRoleSelectDialog.vue

@@ -100,7 +100,7 @@ async function fetchRoles() {
 
 async function addRole() {
 	const items = roles.value
-		.filter(r => r.isPublic)
+		.filter(r => publicOnly.value ? r.isPublic : true)
 		.filter(r => !selectedRoleIds.value.includes(r.id))
 		.map(r => ({ text: r.name, value: r }));
 

packages/frontend/src/pages/admin/announcements.vue

@@ -75,6 +75,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 								{{ i18n.ts._announcement.confetti }}
 							</MkSwitch>
 						</MkDisableSection>
+						<div :class="$style.forRoles">
+							<MkInfo v-if="announcement.forRoles.length !== 0" :class="$style.forRolesLabel">{{ i18n.tsx._announcement.onlyForRolesRestricted({roles: announcement.forRoles.length}) }}</MkInfo>
+							<MkInfo v-else :class="$style.forRolesLabel">{{ i18n.ts._announcement.onlyForRolesUnrestricted }}</MkInfo>
+							<MkButton primary @click="() => changeRoles(announcement)">
+								{{ i18n.ts._announcement.onlyForRolesChange }}
+							</MkButton>
+						</div>
 						<p v-if="announcement.reads">{{ i18n.tsx.nUsersRead({ n: announcement.reads }) }}</p>
 					</div>
 				</MkFolder>
@@ -134,9 +141,21 @@ function add() {
 		silence: false,
 		needConfirmationToRead: false,
 		confetti: false,
+		forRoles: [],
 	});
 }
 
+async function changeRoles(announcement) {
+	const result = await os.selectRole({
+		initialRoleIds: announcement.forRoles,
+		title: i18n.ts._announcement.onlyForRoles,
+		publicOnly: false,
+	});
+	if (result.canceled) return;
+
+	announcement.forRoles = result.result.map((r) => r.id);
+}
+
 function del(announcement) {
 	os.confirm({
 		type: 'warning',
@@ -209,3 +228,12 @@ definePage(() => ({
 	icon: 'ti ti-speakerphone',
 }));
 </script>
+
+<style lang="scss" module>
+.forRoles {
+	display: flex;
+}
+.forRolesLabel {
+	flex-grow: 1;
+}
+</style>