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
parent
4b6f698b77
commit
727814c6a7
@ -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"
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user