mobilizon.chapril.org-mobil.../js/src/views/Group/Timeline.vue

415 lines
11 KiB
Vue
Raw Normal View History

<template>
<div class="container section">
<breadcrumbs-nav
v-if="group"
:links="[
{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(group) },
text: displayName(group),
},
{
name: RouteName.TIMELINE,
params: { preferredUsername: usernameWithDomain(group) },
text: $t('Activity'),
},
]"
/>
<section class="timeline">
<b-field>
<b-radio-button v-model="activityType" :native-value="undefined">
<b-icon icon="timeline-text"></b-icon>
{{ $t("All activities") }}</b-radio-button
>
<b-radio-button
v-model="activityType"
:native-value="ActivityType.MEMBER"
>
<b-icon icon="account-multiple-plus"></b-icon>
{{ $t("Members") }}</b-radio-button
>
<b-radio-button
v-model="activityType"
:native-value="ActivityType.GROUP"
>
<b-icon icon="cog"></b-icon>
{{ $t("Settings") }}</b-radio-button
>
<b-radio-button
v-model="activityType"
:native-value="ActivityType.EVENT"
>
<b-icon icon="calendar"></b-icon>
{{ $t("Events") }}</b-radio-button
>
<b-radio-button
v-model="activityType"
:native-value="ActivityType.POST"
>
<b-icon icon="bullhorn"></b-icon>
{{ $t("Posts") }}</b-radio-button
>
<b-radio-button
v-model="activityType"
:native-value="ActivityType.DISCUSSION"
>
<b-icon icon="chat"></b-icon>
{{ $t("Discussions") }}</b-radio-button
>
<b-radio-button
v-model="activityType"
:native-value="ActivityType.RESOURCE"
>
<b-icon icon="link"></b-icon>
{{ $t("Resources") }}</b-radio-button
>
</b-field>
<b-field>
<b-radio-button v-model="activityAuthor" :native-value="undefined">
<b-icon icon="timeline-text"></b-icon>
{{ $t("All activities") }}</b-radio-button
>
<b-radio-button
v-model="activityAuthor"
:native-value="ActivityAuthorFilter.SELF"
>
<b-icon icon="account"></b-icon>
{{ $t("From yourself") }}</b-radio-button
>
<b-radio-button
v-model="activityAuthor"
:native-value="ActivityAuthorFilter.BY"
>
<b-icon icon="account-multiple"></b-icon>
{{ $t("By others") }}</b-radio-button
>
</b-field>
<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 && activity.total === 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, displayName } 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 };
enum ActivityAuthorFilter {
SELF = "SELF",
BY = "BY",
}
export type ActivityFilter = ActivityType | ActivityAuthorFilter | null;
@Component({
apollo: {
group: {
query: GROUP_TIMELINE,
fetchPolicy: "cache-and-network",
variables() {
return {
preferredUsername: this.preferredUsername,
page: 1,
limit: PAGINATION_LIMIT,
type: this.activityType,
author: this.activityAuthor,
};
},
},
},
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;
displayName = displayName;
ActivityType = ActivityType;
ActivityAuthorFilter = ActivityAuthorFilter;
get activityType(): ActivityType | undefined {
if (this.$route?.query?.type) {
return this.$route?.query?.type as ActivityType;
}
return undefined;
}
set activityType(type: ActivityType | undefined) {
this.$router.push({
name: RouteName.TIMELINE,
params: {
preferredUsername: this.preferredUsername,
},
query: { ...this.$route.query, type },
});
}
get activityAuthor(): ActivityAuthorFilter | undefined {
if (this.$route?.query?.author) {
return this.$route?.query?.author as ActivityAuthorFilter;
}
return undefined;
}
set activityAuthor(author: ActivityAuthorFilter | undefined) {
this.$router.push({
name: RouteName.TIMELINE,
params: {
preferredUsername: this.preferredUsername,
},
query: { ...this.$route.query, author },
});
}
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,
},
});
} 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>