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",
"View all resources": "View all resources",
"Public page": "Public page",
"Followed by {count} persons": "Followed by {count} persons",
"Post a public message": "Post a public message",
"View all todos": "View all todos",
"Discussions": "Discussions",
@ -749,5 +748,13 @@
"Group address": "Group address",
"Events tagged with {tag}": "Events tagged with {tag}",
"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",
"Events tagged with {tag}": "Événements taggés avec {tag}",
"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,21 +46,52 @@
>
</div>
</div>
<div class="block-column members">
<figure
class="image is-48x48"
:title="
$t(`@{username} ({role})`, {
username: usernameWithDomain(member.actor),
role: member.role,
})
"
v-for="member in group.members.elements"
:key="member.actor.id"
<div class="block-column members" v-if="isCurrentActorAGroupMember">
<div>
<figure
class="image is-48x48"
:title="
$t(`@{username} ({role})`, {
username: usernameWithDomain(member.actor),
role: member.role,
})
"
v-for="member in group.members.elements"
:key="member.actor.id"
>
<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" />
</figure>
</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
>
<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" />
</figure>
</div>
</header>
</div>
@ -68,7 +99,7 @@
<div class="block-column">
<section>
<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
v-for="event in group.organizedEvents.elements"
:event="event"
@ -76,7 +107,11 @@
class="organized-event"
/>
</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>
<subtitle>{{ $t("Resources") }}</subtitle>
@ -90,6 +125,9 @@
<folder-item :resource="resource" :group="group" v-else :inline="true" />
</div>
</div>
<div v-else-if="group" class="content has-text-grey has-text-centered">
<p>{{ $t("No resources yet") }}</p>
</div>
<router-link
:to="{
name: RouteName.RESOURCE_FOLDER_ROOT,
@ -102,10 +140,12 @@
<div class="block-column">
<section>
<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">
<post-list-item v-for="post in group.posts.elements" :key="post.id" :post="post" />
</div>
<div v-else-if="group" class="content has-text-grey has-text-centered">
<p>{{ $t("No posts yet") }}</p>
</div>
<router-link
:to="{
name: RouteName.POST_CREATE,
@ -117,37 +157,42 @@
</section>
<section>
<subtitle>{{ $t("Ongoing tasks") }}</subtitle>
<div
v-if="group.todoLists.elements.length > 0"
v-for="todoList in group.todoLists.elements"
:key="todoList.id"
>
<router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }">
<h2 class="is-size-3">
{{
$tc("{title} ({count} todos)", todoList.todos.total, {
count: todoList.todos.total,
title: todoList.title,
})
}}
</h2>
</router-link>
<compact-todo
:todo="todo"
v-for="todo in todoList.todos.elements.slice(0, 3)"
:key="todo.id"
/>
<div v-if="group.todoLists.elements.length > 0">
<div v-for="todoList in group.todoLists.elements" :key="todoList.id">
<router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }">
<h2 class="is-size-3">
{{
$tc("{title} ({count} todos)", todoList.todos.total, {
count: todoList.todos.total,
title: todoList.title,
})
}}
</h2>
</router-link>
<compact-todo
:todo="todo"
v-for="todo in todoList.todos.elements.slice(0, 3)"
:key="todo.id"
/>
</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>
</section>
<section>
<subtitle>{{ $t("Discussions") }}</subtitle>
<discussion-list-item
v-if="group.discussions.total > 0"
v-for="discussion in group.discussions.elements"
:key="discussion.id"
:discussion="discussion"
/>
<div v-if="group.discussions.total > 0">
<discussion-list-item
v-for="discussion in group.discussions.elements"
:key="discussion.id"
:discussion="discussion"
/>
</div>
<div v-else class="content has-text-grey has-text-centered">
<p>{{ $t("No discussions yet") }}</p>
</div>
<router-link
:to="{
name: RouteName.DISCUSSION_LIST,
@ -179,7 +224,7 @@
<!-- {{ group }}-->
<section>
<subtitle>{{ $t("Latest posts") }}</subtitle>
<div v-if="group && group.posts.elements">
<div v-if="group && group.posts.total > 0">
<router-link
v-for="post in group.posts.elements"
:key="post.id"
@ -188,8 +233,20 @@
{{ post.title }}
</router-link>
</div>
<span v-else-if="group">{{ $t("No public posts") }}</span>
<b-skeleton animated v-else></b-skeleton>
</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>
</template>
@ -214,6 +271,7 @@ import PostListItem from "@/components/Post/PostListItem.vue";
import ResourceItem from "@/components/Resource/ResourceItem.vue";
import FolderItem from "@/components/Resource/FolderItem.vue";
import RouteName from "../../router/name";
import { Address } from "@/types/address.model";
@Component({
apollo: {
@ -247,6 +305,7 @@ import RouteName from "../../router/name";
EventCard,
FolderItem,
ResourceItem,
"map-leaflet": () => import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
},
metaInfo() {
return {
@ -277,6 +336,8 @@ export default class Group extends Vue {
usernameWithDomain = usernameWithDomain;
showMap = false;
@Watch("currentActor")
watchCurrentActor(currentActor: IActor, oldActor: IActor) {
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>
<style lang="scss" scoped>
@ -349,12 +415,45 @@ div.container {
.members {
display: flex;
flex-direction: column;
div {
display: flex;
}
figure:not(:first-child) {
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 {
flex: 1;
margin: 0 2rem;