Make identity picker work with many profiles and groups
Close #784 Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
12523b6ae4
commit
1e75713b1c
|
|
@ -1,11 +1,14 @@
|
|||
<template>
|
||||
<div class="list is-hoverable">
|
||||
<b-input
|
||||
:placeholder="$t('Filter by profile or group name')"
|
||||
v-model="actorFilter"
|
||||
/>
|
||||
<b-radio-button
|
||||
v-model="selectedActor"
|
||||
:native-value="availableActor"
|
||||
class="list-item"
|
||||
v-for="availableActor in actualAvailableActors"
|
||||
:class="{ 'is-active': availableActor.id === selectedActor.id }"
|
||||
v-for="availableActor in actualFilteredAvailableActors"
|
||||
:key="availableActor.id"
|
||||
>
|
||||
<div class="media">
|
||||
|
|
@ -61,6 +64,8 @@ export default class OrganizerPicker extends Vue {
|
|||
|
||||
currentActor!: IPerson;
|
||||
|
||||
actorFilter = "";
|
||||
|
||||
get selectedActor(): IActor | undefined {
|
||||
if (this.value?.id) {
|
||||
return this.value;
|
||||
|
|
@ -103,6 +108,16 @@ export default class OrganizerPicker extends Vue {
|
|||
...this.actualMemberships.map((member) => member.parent),
|
||||
].filter((elem) => elem);
|
||||
}
|
||||
|
||||
get actualFilteredAvailableActors(): IActor[] {
|
||||
return this.actualAvailableActors.filter((actor) => {
|
||||
return [
|
||||
actor.preferredUsername.toLowerCase(),
|
||||
actor.name?.toLowerCase(),
|
||||
actor.domain?.toLowerCase(),
|
||||
].some((match) => match?.includes(this.actorFilter.toLowerCase()));
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -52,17 +52,25 @@
|
|||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column actor-picker">
|
||||
<organizer-picker
|
||||
v-model="selectedActor"
|
||||
@input="relay"
|
||||
:restrict-moderator-level="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div v-if="actorMembers.length > 0">
|
||||
<div class="column contact-picker">
|
||||
<div v-if="isSelectedActorAGroup && actorMembers.length > 0">
|
||||
<p>{{ $t("Add a contact") }}</p>
|
||||
<p class="field" v-for="actor in actorMembers" :key="actor.id">
|
||||
<b-input
|
||||
:placeholder="$t('Filter by name')"
|
||||
v-model="contactFilter"
|
||||
/>
|
||||
<p
|
||||
class="field"
|
||||
v-for="actor in filteredActorMembers"
|
||||
:key="actor.id"
|
||||
>
|
||||
<b-checkbox v-model="actualContacts" :native-value="actor.id">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
|
|
@ -88,7 +96,7 @@
|
|||
</b-checkbox>
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="content has-text-grey has-text-centered">
|
||||
<div v-else class="content has-text-grey-dark has-text-centered">
|
||||
<p>{{ $t("Your profile will be shown as contact.") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,6 +175,8 @@ export default class OrganizerPickerWrapper extends Vue {
|
|||
|
||||
isComponentModalActive = false;
|
||||
|
||||
contactFilter = "";
|
||||
|
||||
usernameWithDomain = usernameWithDomain;
|
||||
|
||||
@Prop({ type: Array, required: false, default: () => [] })
|
||||
|
|
@ -226,19 +236,33 @@ export default class OrganizerPickerWrapper extends Vue {
|
|||
}
|
||||
|
||||
get actorMembers(): IActor[] {
|
||||
if (this.selectedActor?.type === ActorType.GROUP) {
|
||||
if (this.isSelectedActorAGroup) {
|
||||
return this.members.elements.map(({ actor }: { actor: IActor }) => actor);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
get filteredActorMembers(): IActor[] {
|
||||
return this.actorMembers.filter((actor) => {
|
||||
return [
|
||||
actor.preferredUsername.toLowerCase(),
|
||||
actor.name?.toLowerCase(),
|
||||
actor.domain?.toLowerCase(),
|
||||
].some((match) => match?.includes(this.contactFilter.toLowerCase()));
|
||||
});
|
||||
}
|
||||
|
||||
get isSelectedActorAGroup(): boolean {
|
||||
return this.selectedActor?.type === ActorType.GROUP;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.group-picker {
|
||||
.block,
|
||||
.no-group,
|
||||
.inline {
|
||||
cursor: pointer;
|
||||
.modal-card-body .columns .column {
|
||||
&.actor-picker,
|
||||
&.contact-picker {
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
<template>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">{{ $t("Pick a group") }}</p>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="list is-hoverable">
|
||||
<a
|
||||
class="list-item"
|
||||
v-for="groupMembership in actualMemberships"
|
||||
:class="{
|
||||
'is-active': groupMembership.parent.id === currentGroup.id,
|
||||
}"
|
||||
@click="changeCurrentGroup(groupMembership.parent)"
|
||||
:key="groupMembership.id"
|
||||
>
|
||||
<div class="media">
|
||||
<img
|
||||
class="media-left image is-48x48"
|
||||
v-if="groupMembership.parent.avatar"
|
||||
:src="groupMembership.parent.avatar.url"
|
||||
alt=""
|
||||
/>
|
||||
<b-icon
|
||||
class="media-left"
|
||||
v-else
|
||||
size="is-large"
|
||||
icon="account-circle"
|
||||
/>
|
||||
<div class="media-content">
|
||||
<h3>@{{ groupMembership.parent.name }}</h3>
|
||||
<small>{{
|
||||
`@${groupMembership.parent.preferredUsername}`
|
||||
}}</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
class="list-item"
|
||||
@click="changeCurrentGroup(new Group())"
|
||||
v-if="currentGroup.id"
|
||||
>
|
||||
<h3>{{ $t("Unset group") }}</h3>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { IGroup, IPerson, Group } from "@/types/actor";
|
||||
import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
|
||||
import { Paginate } from "@/types/paginate";
|
||||
import { IMember } from "@/types/actor/member.model";
|
||||
import { MemberRole } from "@/types/enums";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
groupMemberships: {
|
||||
query: PERSON_MEMBERSHIPS,
|
||||
variables() {
|
||||
return {
|
||||
id: this.identity.id,
|
||||
};
|
||||
},
|
||||
update: (data) => data.person.memberships,
|
||||
skip() {
|
||||
return !this.identity.id;
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
export default class GroupPicker extends Vue {
|
||||
@Prop() value!: IGroup;
|
||||
|
||||
@Prop() identity!: IPerson;
|
||||
|
||||
@Prop({ required: false, default: false }) restrictModeratorLevel!: boolean;
|
||||
|
||||
groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
|
||||
|
||||
currentGroup: IGroup = this.value;
|
||||
|
||||
Group = Group;
|
||||
|
||||
changeCurrentGroup(group: IGroup): void {
|
||||
this.currentGroup = group;
|
||||
this.$emit("input", group);
|
||||
}
|
||||
|
||||
get actualMemberships(): IMember[] {
|
||||
if (this.restrictModeratorLevel) {
|
||||
return this.groupMemberships.elements.filter((membership: IMember) =>
|
||||
[
|
||||
MemberRole.ADMINISTRATOR,
|
||||
MemberRole.MODERATOR,
|
||||
MemberRole.CREATOR,
|
||||
].includes(membership.role)
|
||||
);
|
||||
}
|
||||
return this.groupMemberships.elements;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<template>
|
||||
<div class="group-picker">
|
||||
<div
|
||||
class="no-group box"
|
||||
v-if="!currentGroup.id && groupMemberships.total > 0"
|
||||
@click="isComponentModalActive = true"
|
||||
>
|
||||
<p class="is-4">{{ $t("Add a group") }}</p>
|
||||
<p class="is-6 is-size-6 has-text-grey">
|
||||
{{ $t("The event will show the group as organizer.") }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="inline && currentGroup.id"
|
||||
class="inline box"
|
||||
@click="isComponentModalActive = true"
|
||||
>
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48" v-if="currentGroup.avatar">
|
||||
<img
|
||||
class="image is-rounded"
|
||||
:src="currentGroup.avatar.url"
|
||||
:alt="currentGroup.avatar.alt"
|
||||
/>
|
||||
</figure>
|
||||
<b-icon v-else size="is-large" icon="account-circle" />
|
||||
</div>
|
||||
<div class="media-content" v-if="currentGroup.name">
|
||||
<p class="is-4">{{ currentGroup.name }}</p>
|
||||
<p class="is-6 has-text-grey">
|
||||
{{ `@${currentGroup.preferredUsername}` }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="media-content" v-else>
|
||||
{{ `@${currentGroup.preferredUsername}` }}
|
||||
</div>
|
||||
<b-button type="is-text" @click="isComponentModalActive = true">
|
||||
{{ $t("Change") }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-else-if="currentGroup.id"
|
||||
class="block"
|
||||
@click="isComponentModalActive = true"
|
||||
>
|
||||
<img
|
||||
class="image is-48x48"
|
||||
v-if="currentGroup.avatar"
|
||||
:src="currentGroup.avatar.url"
|
||||
:alt="currentGroup.avatar.alt"
|
||||
/>
|
||||
<b-icon v-else size="is-large" icon="account-circle" />
|
||||
</span>
|
||||
<div v-if="groupMemberships.total === 0" class="box">
|
||||
<p class="is-4">
|
||||
{{ $t("This identity is not a member of any group.") }}
|
||||
</p>
|
||||
<p class="is-6 is-size-6 has-text-grey">
|
||||
{{ $t("You need to create the group before you create an event.") }}
|
||||
</p>
|
||||
</div>
|
||||
<b-modal :active.sync="isComponentModalActive" has-modal-card>
|
||||
<group-picker
|
||||
v-model="currentGroup"
|
||||
:identity.sync="identity"
|
||||
@input="relay"
|
||||
:restrict-moderator-level="true"
|
||||
/>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
||||
import { IMember } from "@/types/actor/member.model";
|
||||
import { IGroup, IPerson } from "../../types/actor";
|
||||
import GroupPicker from "./GroupPicker.vue";
|
||||
import { PERSON_MEMBERSHIPS } from "../../graphql/actor";
|
||||
import { Paginate } from "../../types/paginate";
|
||||
|
||||
@Component({
|
||||
components: { GroupPicker },
|
||||
apollo: {
|
||||
groupMemberships: {
|
||||
query: PERSON_MEMBERSHIPS,
|
||||
variables() {
|
||||
return {
|
||||
id: this.identity.id,
|
||||
};
|
||||
},
|
||||
update: (data) => data.person.memberships,
|
||||
skip() {
|
||||
return !this.identity.id;
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
export default class GroupPickerWrapper extends Vue {
|
||||
@Prop({ type: Object, required: true }) value!: IGroup;
|
||||
|
||||
@Prop({ default: true, type: Boolean }) inline!: boolean;
|
||||
|
||||
@Prop({ type: Object, required: true }) identity!: IPerson;
|
||||
|
||||
isComponentModalActive = false;
|
||||
|
||||
currentGroup: IGroup = this.value;
|
||||
|
||||
groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
|
||||
|
||||
@Watch("value")
|
||||
updateCurrentGroup(value: IGroup): void {
|
||||
this.currentGroup = value;
|
||||
}
|
||||
|
||||
relay(group: IGroup): void {
|
||||
this.currentGroup = group;
|
||||
this.$emit("input", group);
|
||||
this.isComponentModalActive = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.group-picker {
|
||||
.block,
|
||||
.no-group,
|
||||
.inline {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1122,5 +1122,8 @@
|
|||
"Tools": "Tools",
|
||||
"Social": "Social",
|
||||
"Details": "Details",
|
||||
"Booking": "Booking"
|
||||
"Booking": "Booking",
|
||||
"Filter by profile or group name": "Filter by profile or group name",
|
||||
"Filter by name": "Filter by name",
|
||||
"Redirecting in progress…": "Redirecting in progress…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1213,5 +1213,8 @@
|
|||
"Tools": "Outils",
|
||||
"Social": "Social",
|
||||
"Details": "Détails",
|
||||
"Booking": "Réservations"
|
||||
"Booking": "Réservations",
|
||||
"Filter by profile or group name": "Filter par nom du profil ou du groupe",
|
||||
"Filter by name": "Filtrer par nom",
|
||||
"Redirecting in progress…": "Redirection en cours…"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue