Add address to public group page and handle empty collections

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-08-11 11:45:21 +02:00
parent 4b6f698b77
commit 727814c6a7
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
3 changed files with 161 additions and 47 deletions

View File

@ -516,7 +516,6 @@
"Resources": "Resources", "Resources": "Resources",
"View all resources": "View all resources", "View all resources": "View all resources",
"Public page": "Public page", "Public page": "Public page",
"Followed by {count} persons": "Followed by {count} persons",
"Post a public message": "Post a public message", "Post a public message": "Post a public message",
"View all todos": "View all todos", "View all todos": "View all todos",
"Discussions": "Discussions", "Discussions": "Discussions",
@ -749,5 +748,13 @@
"Group address": "Group address", "Group address": "Group address",
"Events tagged with {tag}": "Events tagged with {tag}", "Events tagged with {tag}": "Events tagged with {tag}",
"Explore events": "Explore events", "Explore events": "Explore events",
"#{tag}": "#{tag}" "#{tag}": "#{tag}",
"{count} team members": "{count} team members",
"View all events": "View all events",
"No resources yet": "No resources yet",
"No posts yet": "No posts yet",
"No ongoing todos": "No ongoing todos",
"No discussions yet": "No discussions yet",
"Add / Remove…": "Add / Remove…",
"No public posts": "No public posts"
} }

View File

@ -749,5 +749,13 @@
"Group address": "Adresse du groupe", "Group address": "Adresse du groupe",
"Events tagged with {tag}": "Événements taggés avec {tag}", "Events tagged with {tag}": "Événements taggés avec {tag}",
"Explore events": "Explorer les événements", "Explore events": "Explorer les événements",
"#{tag}": "#{tag}" "#{tag}": "#{tag}",
"{count} team members": "{count} membres d'équipe",
"View all events": "Voir tous les événements",
"No resources yet": "Pas encore de ressources",
"No posts yet": "Pas encore de billets",
"No ongoing todos": "Pas de todos en cours",
"No discussions yet": "Pas encore de discussions",
"Add / Remove…": "Ajouter / Supprimer…",
"No public posts": "Pas de billets publics"
} }

View File

@ -46,7 +46,8 @@
> >
</div> </div>
</div> </div>
<div class="block-column members"> <div class="block-column members" v-if="isCurrentActorAGroupMember">
<div>
<figure <figure
class="image is-48x48" class="image is-48x48"
:title=" :title="
@ -58,17 +59,47 @@
v-for="member in group.members.elements" v-for="member in group.members.elements"
:key="member.actor.id" :key="member.actor.id"
> >
<img class="is-rounded" :src="member.actor.avatar.url" v-if="member.actor.avatar" alt /> <img
class="is-rounded"
:src="member.actor.avatar.url"
v-if="member.actor.avatar"
alt
/>
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</figure> </figure>
</div> </div>
<p>
{{ $t("{count} team members", { count: group.members.total }) }}
<router-link
:to="{
name: RouteName.GROUP_MEMBERS_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Add / Remove…") }}</router-link
>
</p>
</div>
<div class="block-column address" v-else-if="physicalAddress">
<address>
<p class="addressDescription" :title="physicalAddress.poiInfos.name">
{{ physicalAddress.poiInfos.name }}
</p>
<p>{{ physicalAddress.poiInfos.alternativeName }}</p>
</address>
<span
class="map-show-button"
@click="showMap = !showMap"
v-if="physicalAddress && physicalAddress.geom"
>{{ $t("Show map") }}</span
>
</div>
</header> </header>
</div> </div>
<div v-if="isCurrentActorAGroupMember" class="block-container"> <div v-if="isCurrentActorAGroupMember" class="block-container">
<div class="block-column"> <div class="block-column">
<section> <section>
<subtitle>{{ $t("Upcoming events") }}</subtitle> <subtitle>{{ $t("Upcoming events") }}</subtitle>
<div class="organized-events-wrapper" v-if="group.organizedEvents.total > 0"> <div class="organized-events-wrapper" v-if="group && group.organizedEvents.total > 0">
<EventMinimalistCard <EventMinimalistCard
v-for="event in group.organizedEvents.elements" v-for="event in group.organizedEvents.elements"
:event="event" :event="event"
@ -76,7 +107,11 @@
class="organized-event" class="organized-event"
/> />
</div> </div>
<router-link :to="{}">{{ $t("View all upcoming events") }}</router-link> <div v-else-if="group" class="content has-text-grey has-text-centered">
<p>{{ $t("No public upcoming events") }}</p>
</div>
<b-skeleton animated v-else></b-skeleton>
<router-link :to="{}">{{ $t("View all events") }}</router-link>
</section> </section>
<section> <section>
<subtitle>{{ $t("Resources") }}</subtitle> <subtitle>{{ $t("Resources") }}</subtitle>
@ -90,6 +125,9 @@
<folder-item :resource="resource" :group="group" v-else :inline="true" /> <folder-item :resource="resource" :group="group" v-else :inline="true" />
</div> </div>
</div> </div>
<div v-else-if="group" class="content has-text-grey has-text-centered">
<p>{{ $t("No resources yet") }}</p>
</div>
<router-link <router-link
:to="{ :to="{
name: RouteName.RESOURCE_FOLDER_ROOT, name: RouteName.RESOURCE_FOLDER_ROOT,
@ -102,10 +140,12 @@
<div class="block-column"> <div class="block-column">
<section> <section>
<subtitle>{{ $t("Public page") }}</subtitle> <subtitle>{{ $t("Public page") }}</subtitle>
<p>{{ $t("Followed by {count} persons", { count: group.members.total }) }}</p>
<div v-if="group.posts.total > 0" class="posts-wrapper"> <div v-if="group.posts.total > 0" class="posts-wrapper">
<post-list-item v-for="post in group.posts.elements" :key="post.id" :post="post" /> <post-list-item v-for="post in group.posts.elements" :key="post.id" :post="post" />
</div> </div>
<div v-else-if="group" class="content has-text-grey has-text-centered">
<p>{{ $t("No posts yet") }}</p>
</div>
<router-link <router-link
:to="{ :to="{
name: RouteName.POST_CREATE, name: RouteName.POST_CREATE,
@ -117,11 +157,8 @@
</section> </section>
<section> <section>
<subtitle>{{ $t("Ongoing tasks") }}</subtitle> <subtitle>{{ $t("Ongoing tasks") }}</subtitle>
<div <div v-if="group.todoLists.elements.length > 0">
v-if="group.todoLists.elements.length > 0" <div v-for="todoList in group.todoLists.elements" :key="todoList.id">
v-for="todoList in group.todoLists.elements"
:key="todoList.id"
>
<router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }"> <router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }">
<h2 class="is-size-3"> <h2 class="is-size-3">
{{ {{
@ -138,16 +175,24 @@
:key="todo.id" :key="todo.id"
/> />
</div> </div>
</div>
<div v-else class="content has-text-grey has-text-centered">
<p>{{ $t("No ongoing todos") }}</p>
</div>
<router-link :to="{ name: RouteName.TODO_LISTS }">{{ $t("View all todos") }}</router-link> <router-link :to="{ name: RouteName.TODO_LISTS }">{{ $t("View all todos") }}</router-link>
</section> </section>
<section> <section>
<subtitle>{{ $t("Discussions") }}</subtitle> <subtitle>{{ $t("Discussions") }}</subtitle>
<div v-if="group.discussions.total > 0">
<discussion-list-item <discussion-list-item
v-if="group.discussions.total > 0"
v-for="discussion in group.discussions.elements" v-for="discussion in group.discussions.elements"
:key="discussion.id" :key="discussion.id"
:discussion="discussion" :discussion="discussion"
/> />
</div>
<div v-else class="content has-text-grey has-text-centered">
<p>{{ $t("No discussions yet") }}</p>
</div>
<router-link <router-link
:to="{ :to="{
name: RouteName.DISCUSSION_LIST, name: RouteName.DISCUSSION_LIST,
@ -179,7 +224,7 @@
<!-- {{ group }}--> <!-- {{ group }}-->
<section> <section>
<subtitle>{{ $t("Latest posts") }}</subtitle> <subtitle>{{ $t("Latest posts") }}</subtitle>
<div v-if="group && group.posts.elements"> <div v-if="group && group.posts.total > 0">
<router-link <router-link
v-for="post in group.posts.elements" v-for="post in group.posts.elements"
:key="post.id" :key="post.id"
@ -188,8 +233,20 @@
{{ post.title }} {{ post.title }}
</router-link> </router-link>
</div> </div>
<span v-else-if="group">{{ $t("No public posts") }}</span>
<b-skeleton animated v-else></b-skeleton> <b-skeleton animated v-else></b-skeleton>
</section> </section>
<b-modal v-if="physicalAddress && physicalAddress.geom" :active.sync="showMap">
<div class="map">
<map-leaflet
:coords="physicalAddress.geom"
:marker="{
text: physicalAddress.fullName,
icon: physicalAddress.poiInfos.poiIcon.icon,
}"
/>
</div>
</b-modal>
</div> </div>
</div> </div>
</template> </template>
@ -214,6 +271,7 @@ import PostListItem from "@/components/Post/PostListItem.vue";
import ResourceItem from "@/components/Resource/ResourceItem.vue"; import ResourceItem from "@/components/Resource/ResourceItem.vue";
import FolderItem from "@/components/Resource/FolderItem.vue"; import FolderItem from "@/components/Resource/FolderItem.vue";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { Address } from "@/types/address.model";
@Component({ @Component({
apollo: { apollo: {
@ -247,6 +305,7 @@ import RouteName from "../../router/name";
EventCard, EventCard,
FolderItem, FolderItem,
ResourceItem, ResourceItem,
"map-leaflet": () => import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
}, },
metaInfo() { metaInfo() {
return { return {
@ -277,6 +336,8 @@ export default class Group extends Vue {
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
showMap = false;
@Watch("currentActor") @Watch("currentActor")
watchCurrentActor(currentActor: IActor, oldActor: IActor) { watchCurrentActor(currentActor: IActor, oldActor: IActor) {
if (currentActor.id && oldActor && currentActor.id !== oldActor.id) { if (currentActor.id && oldActor && currentActor.id !== oldActor.id) {
@ -311,6 +372,11 @@ export default class Group extends Vue {
) )
); );
} }
get physicalAddress(): Address | null {
if (!this.group.physicalAddress) return null;
return new Address(this.group.physicalAddress);
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -349,12 +415,45 @@ div.container {
.members { .members {
display: flex; display: flex;
flex-direction: column;
div {
display: flex;
}
figure:not(:first-child) { figure:not(:first-child) {
margin-left: -10px; margin-left: -10px;
} }
} }
div.address {
flex: 1;
text-align: right;
.map-show-button {
cursor: pointer;
}
address {
font-style: normal;
span.addressDescription {
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 0 auto;
min-width: 100%;
max-width: 4rem;
overflow: hidden;
}
:not(.addressDescription) {
color: rgba(46, 62, 72, 0.6);
flex: 1;
min-width: 100%;
}
}
}
.block-column { .block-column {
flex: 1; flex: 1;
margin: 0 2rem; margin: 0 2rem;