Improve group view

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-08-11 14:46:58 +02:00
parent acafa6a27c
commit 55003c73ab
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 120 additions and 71 deletions

View file

@ -0,0 +1,50 @@
<template>
<section>
<h2 :class="{ privateSection }">
<b-icon :icon="icon" />
<span>{{ title }}</span>
</h2>
<slot></slot>
</section>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class GroupSection extends Vue {
@Prop({ required: true, type: String }) title!: string;
@Prop({ required: true, type: String }) icon!: string;
@Prop({ required: false, type: Boolean, default: true }) privateSection!: boolean;
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
h2 {
display: flex;
align-items: stretch;
margin: 15px 0 30px;
/deep/ span {
background: $secondary;
display: inline;
padding: 3px 8px;
color: #3a384c;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
font-weight: 500;
font-size: 30px;
flex: 1;
}
/deep/ span.icon {
flex: 0;
height: 100%;
}
}
h2.privateSection /deep/ span {
color: $violet-2;
background: $purple-2;
}
</style>

View file

@ -96,67 +96,30 @@
</header>
</div>
<div v-if="isCurrentActorAGroupMember" class="block-container">
<!-- Private things -->
<div class="block-column">
<section>
<subtitle>{{ $t("Upcoming events") }}</subtitle>
<div class="organized-events-wrapper" v-if="group && group.organizedEvents.total > 0">
<EventMinimalistCard
v-for="event in group.organizedEvents.elements"
:event="event"
:key="event.uuid"
class="organized-event"
<!-- Group discussions -->
<group-section :title="$t('Discussions')" icon="chat">
<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-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>
<div v-if="group.resources.elements.length > 0">
<div v-for="resource in group.resources.elements" :key="resource.id">
<resource-item
:resource="resource"
v-if="resource.type !== 'folder'"
:inline="true"
/>
<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 v-else class="content has-text-grey has-text-centered">
<p>{{ $t("No discussions yet") }}</p>
</div>
<router-link
:to="{
name: RouteName.RESOURCE_FOLDER_ROOT,
name: RouteName.DISCUSSION_LIST,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("View all resources") }}</router-link
>{{ $t("View all discussions") }}</router-link
>
</section>
</div>
<div class="block-column">
<section>
<subtitle>{{ $t("Public page") }}</subtitle>
<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,
params: { preferredUsername: usernameWithDomain(group) },
}"
class="button is-primary"
>{{ $t("Post a public message") }}</router-link
>
</section>
<section>
<subtitle>{{ $t("Ongoing tasks") }}</subtitle>
</group-section>
<!-- Todos -->
<group-section :title="$t('Ongoing tasks')" icon="checkbox-multiple-marked">
<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 } }">
@ -180,27 +143,66 @@
<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>
<div v-if="group.discussions.total > 0">
<discussion-list-item
v-for="discussion in group.discussions.elements"
:key="discussion.id"
:discussion="discussion"
/>
</group-section>
<!-- Resources -->
<group-section :title="$t('Resources')" icon="link">
<div v-if="group.resources.elements.length > 0">
<div v-for="resource in group.resources.elements" :key="resource.id">
<resource-item
:resource="resource"
v-if="resource.type !== 'folder'"
:inline="true"
/>
<folder-item :resource="resource" :group="group" v-else :inline="true" />
</div>
</div>
<div v-else class="content has-text-grey has-text-centered">
<p>{{ $t("No discussions yet") }}</p>
<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.DISCUSSION_LIST,
name: RouteName.RESOURCE_FOLDER_ROOT,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("View all discussions") }}</router-link
>{{ $t("View all resources") }}</router-link
>
</section>
</group-section>
</div>
<!-- Public things -->
<div class="block-column">
<!-- Events -->
<group-section :title="$t('Upcoming events')" icon="calendar" :privateSection="false">
<div class="organized-events-wrapper" v-if="group && group.organizedEvents.total > 0">
<EventMinimalistCard
v-for="event in group.organizedEvents.elements"
:event="event"
:key="event.uuid"
class="organized-event"
/>
</div>
<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>
</group-section>
<!-- Posts -->
<group-section :title="$t('Public page')" icon="bullhorn" :privateSection="false">
<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,
params: { preferredUsername: usernameWithDomain(group) },
}"
class="button is-primary"
>{{ $t("Post a public message") }}</router-link
>
</group-section>
</div>
</div>
<b-message v-else-if="!group && $apollo.loading === false" type="is-danger">
@ -221,7 +223,6 @@
<span v-else-if="group">{{ $t("No public upcoming events") }}</span>
<b-skeleton animated v-else></b-skeleton>
</section>
<!-- {{ group }}-->
<section>
<subtitle>{{ $t("Latest posts") }}</subtitle>
<div v-if="group && group.posts.total > 0">
@ -272,6 +273,7 @@ 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";
import GroupSection from "../../components/Group/GroupSection.vue";
@Component({
apollo: {
@ -305,6 +307,7 @@ import { Address } from "@/types/address.model";
EventCard,
FolderItem,
ResourceItem,
GroupSection,
"map-leaflet": () => import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
},
metaInfo() {
@ -459,10 +462,6 @@ div.container {
margin: 0 2rem;
section {
/deep/ h2 span {
display: block;
}
.posts-wrapper {
padding-bottom: 1rem;
}