hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Introduce the group activity section

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2021-02-24 19:06:48 +01:00
parent d0567f783d
commit 3fe64a4389
70 changed files with 3224 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/views/Event/Edit.vue
View File

@@ -497,13 +497,11 @@ const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
},
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
title: (this.isUpdate
? this.$t("Event edition")
: this.$t("Event creation")) as string,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
};
},

2
js/src/views/Event/Event.vue
View File

@@ -737,11 +737,9 @@ import { IParticipant } from "../../types/participant.model";
},
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
title: this.eventTitle,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
meta: [
// eslint-disable-next-line @typescript-eslint/ban-ts-comment

2
js/src/views/Event/MyEvents.vue
View File

@@ -186,9 +186,7 @@ import Subtitle from "../../components/Utils/Subtitle.vue";
},
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
title: this.$t("My events") as string,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
};
},

21
js/src/views/Group/Group.vue
View File

@@ -57,14 +57,27 @@
<b-skeleton v-else :animated="true" />
<br />
<div class="buttons">
<router-link
<b-button
outlined
icon-left="timeline-text"
v-if="isCurrentActorAGroupMember"
tag="router-link"
:to="{
name: RouteName.TIMELINE,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Activity") }}</b-button
>
<b-button
outlined
icon-left="cog"
v-if="isCurrentActorAGroupAdmin"
tag="router-link"
:to="{
name: RouteName.GROUP_PUBLIC_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
}"
class="button is-outlined"
>{{ $t("Group settings") }}</router-link
>{{ $t("Group settings") }}</b-button
>
</div>
</div>
@@ -506,11 +519,9 @@ import ReportModal from "../../components/Report/ReportModal.vue";
},
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
title: this.groupTitle,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
meta: [
// eslint-disable-next-line @typescript-eslint/ban-ts-comment

2
js/src/views/Group/MyGroups.vue
View File

@@ -104,9 +104,7 @@ import RouteName from "../../router/name";
},
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
title: this.$t("My groups") as string,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
};
},

3
js/src/views/Group/Settings.vue
View File

@@ -49,4 +49,7 @@ export default class Settings extends mixins(GroupMixin) {
aside.section {
padding-top: 1rem;
}
.container.section {
background: $white;
}
</style>

320
js/src/views/Group/Timeline.vue Normal file
View File

@@ -0,0 +1,320 @@
<template>
<div class="container section">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul v-if="group">
<li>
<router-link
:to="{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ group.name }}</router-link
>
</li>
<li>
<router-link
:to="{
name: RouteName.TIMELINE,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Activity") }}</router-link
>
</li>
</ul>
</nav>
<section class="timeline">
<transition-group name="timeline-list" tag="div">
<div
class="day"
v-for="[date, activityItems] in Object.entries(activities)"
:key="date"
>
<b-skeleton
v-if="date.search(/skeleton/) !== -1"
width="300px"
height="48px"
/>
<h2 class="is-size-3 has-text-weight-bold" v-else-if="isToday(date)">
<span v-tooltip="$options.filters.formatDateString(date)">
{{ $t("Today") }}
</span>
</h2>
<h2
class="is-size-3 has-text-weight-bold"
v-else-if="isYesterday(date)"
>
<span v-tooltip="$options.filters.formatDateString(date)">{{
$t("Yesterday")
}}</span>
</h2>
<h2 v-else class="is-size-3 has-text-weight-bold">
{{ date | formatDateString }}
</h2>
<ul>
<li v-for="activityItem in activityItems" :key="activityItem.id">
<skeleton-activity-item v-if="activityItem.skeleton" />
<component
v-else
:is="component(activityItem.type)"
:activity="activityItem"
/>
</li>
</ul></div
></transition-group>
<empty-content
icon="timeline-text"
v-if="
!$apollo.loading &&
activity.elements.length > 0 &&
activity.elements.length >= activity.total
"
>
{{ $t("No more activity to display.") }}
</empty-content>
<empty-content
v-if="!$apollo.loading && activities.size === 0"
icon="timeline-text"
>
{{
$t(
"There is no activity yet. Start doing some things to see activity appear here."
)
}}
</empty-content>
<observer @intersect="loadMore" />
<b-button
v-if="activity.elements.length < activity.total"
@click="loadMore"
>{{ $t("Load more activities") }}</b-button
>
</section>
</div>
</template>
<script lang="ts">
import { GROUP_TIMELINE } from "@/graphql/group";
import { IGroup, usernameWithDomain } from "@/types/actor";
import { ActivityType } from "@/types/enums";
import { Paginate } from "@/types/paginate";
import { Component, Prop, Vue } from "vue-property-decorator";
import { IActivity } from "../../types/activity.model";
import Observer from "../../components/Utils/Observer.vue";
import SkeletonActivityItem from "../../components/Activity/SkeletonActivityItem.vue";
import RouteName from "../../router/name";
const PAGINATION_LIMIT = 25;
const SKELETON_DAY_ITEMS = 2;
const SKELETON_ITEMS_PER_DAY = 5;
type IActivitySkeleton = IActivity | { skeleton: string };
@Component({
apollo: {
group: {
query: GROUP_TIMELINE,
variables() {
return {
preferredUsername: this.preferredUsername,
page: 1,
limit: PAGINATION_LIMIT,
};
},
},
},
components: {
Observer,
SkeletonActivityItem,
"event-activity-item": () =>
import("../../components/Activity/EventActivityItem.vue"),
"post-activity-item": () =>
import("../../components/Activity/PostActivityItem.vue"),
"member-activity-item": () =>
import("../../components/Activity/MemberActivityItem.vue"),
"resource-activity-item": () =>
import("../../components/Activity/ResourceActivityItem.vue"),
"discussion-activity-item": () =>
import("../../components/Activity/DiscussionActivityItem.vue"),
"group-activity-item": () =>
import("../../components/Activity/GroupActivityItem.vue"),
"empty-content": () => import("../../components/Utils/EmptyContent.vue"),
},
metaInfo() {
return {
title: this.$t("{group} activity timeline", {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
group: this.group?.name,
}) as string,
titleTemplate: "%s | Mobilizon",
};
},
})
export default class Timeline extends Vue {
@Prop({ required: true, type: String }) preferredUsername!: string;
group!: IGroup;
RouteName = RouteName;
usernameWithDomain = usernameWithDomain;
get activity(): Paginate<IActivitySkeleton> {
if (this.group) {
return this.group.activity;
}
return {
total: 0,
elements: this.skeletons.map((skeleton) => ({
skeleton,
})),
};
}
page = 1;
limit = PAGINATION_LIMIT;
component(type: ActivityType): string | undefined {
switch (type) {
case ActivityType.EVENT:
return "event-activity-item";
case ActivityType.POST:
return "post-activity-item";
case ActivityType.MEMBER:
return "member-activity-item";
case ActivityType.RESOURCE:
return "resource-activity-item";
case ActivityType.DISCUSSION:
return "discussion-activity-item";
case ActivityType.GROUP:
return "group-activity-item";
}
}
get skeletons(): string[] {
return [...Array(SKELETON_DAY_ITEMS)]
.map((_, i) => {
return [...Array(SKELETON_ITEMS_PER_DAY)].map((_a, j) => {
return `${i}-${j}`;
});
})
.flat();
}
async loadMore(): Promise<void> {
if (this.page * PAGINATION_LIMIT >= this.activity.total) {
return;
}
this.page++;
try {
await this.$apollo.queries.group.fetchMore({
variables: {
page: this.page,
limit: PAGINATION_LIMIT,
},
updateQuery: (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) return previousResult;
const newActivities = fetchMoreResult.group.activity.elements;
const newTotal = fetchMoreResult.group.activity.total;
return {
group: {
...previousResult.group,
activity: {
__typename: previousResult.group.activity.__typename,
total: newTotal,
elements: [
...previousResult.group.activity.elements,
...newActivities,
],
},
},
};
},
});
} catch (e) {
console.error(e);
}
}
get activities(): Record<string, IActivitySkeleton[]> {
return this.activity.elements.reduce(
(acc: Record<string, IActivitySkeleton[]>, elem) => {
let key;
if (this.isIActivity(elem)) {
const insertedAt = new Date(elem.insertedAt);
insertedAt.setHours(0);
insertedAt.setMinutes(0);
insertedAt.setSeconds(0);
insertedAt.setMilliseconds(0);
key = insertedAt.toISOString();
} else {
key = `skeleton-${elem.skeleton.split("-")[0]}`;
}
const existing = acc[key];
if (existing) {
acc[key] = [...existing, ...[elem]];
} else {
acc[key] = [elem];
}
return acc;
},
{}
);
}
isIActivity(object: IActivitySkeleton): object is IActivity {
return !("skeleton" in object);
}
getRandomInt(min: number, max: number): number {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
}
isToday(dateString: string): boolean {
const now = new Date();
const date = new Date(dateString);
return (
now.getFullYear() === date.getFullYear() &&
now.getMonth() === date.getMonth() &&
now.getDate() === date.getDate()
);
}
isYesterday(dateString: string): boolean {
const date = new Date(dateString);
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
return (
yesterday.getFullYear() === date.getFullYear() &&
yesterday.getMonth() === date.getMonth() &&
yesterday.getDate() === date.getDate()
);
}
}
</script>
<style lang="scss" scoped>
.container.section {
background: $white;
}
.timeline {
ul {
// padding: 0.5rem 0;
margin: 0;
list-style: none;
position: relative;
&::before {
content: "";
height: 100%;
width: 1px;
background-color: #d9d9d9;
position: absolute;
top: 0;
left: 1rem;
}
li {
display: flex;
margin: 0.5rem 0;
}
}
}
</style>

2
js/src/views/Home.vue
View File

@@ -407,11 +407,9 @@ import Subtitle from "../components/Utils/Subtitle.vue";
},
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
title: this.instanceName,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
};
},

2
js/src/views/Posts/List.vue
View File

@@ -128,11 +128,9 @@ const POSTS_PAGE_LIMIT = 10;
},
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
title: this.$t("My groups") as string,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
};
},

2
js/src/views/Search.vue
View File

@@ -254,9 +254,7 @@ const GROUP_PAGE_LIMIT = 10;
},
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
title: this.$t("Explore events") as string,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
};
},

2
js/src/views/User/Login.vue
View File

@@ -156,9 +156,7 @@ import AuthProviders from "../../components/User/AuthProviders.vue";
},
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
title: this.$t("Login on Mobilizon!") as string,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
};
},

2
js/src/views/User/Register.vue
View File

@@ -203,11 +203,9 @@ import AuthProviders from "../../components/User/AuthProviders.vue";
components: { Subtitle, AuthProviders },
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
title: this.title,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
};
},