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

Introduce activity filters

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2021-03-09 16:20:58 +01:00
parent aa2c79d312
commit d8e4d6c24f
9 changed files with 243 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/src/graphql/group.ts
View File

@@ -326,6 +326,7 @@ export const GROUP_TIMELINE = gql`
query GroupTimeline(
$preferredUsername: String!
$type: ActivityType
$author: ActivityAuthor
$page: Int
$limit: Int
) {
@@ -334,7 +335,7 @@ export const GROUP_TIMELINE = gql`
preferredUsername
domain
name
activity(type: $type, page: $page, limit: $limit) {
activity(type: $type, author: $author, page: $page, limit: $limit) {
total
elements {
id

5
js/src/i18n/en_US.json
View File

@@ -960,5 +960,8 @@
"@{username}'s follow request was accepted": "@{username}'s follow request was accepted",
"Delete this discussion": "Delete this discussion",
"Are you sure you want to delete this entire discussion?": "Are you sure you want to delete this entire discussion?",
"Delete discussion": "Delete discussion"
"Delete discussion": "Delete discussion",
"All activities": "All activities",
"From yourself": "From yourself",
"By others": "By others"
}

5
js/src/i18n/fr_FR.json
View File

@@ -1054,5 +1054,8 @@
"@{username}'s follow request was accepted": "@{username}'s follow request was accepted",
"Delete this discussion": "Supprimer cette discussion",
"Are you sure you want to delete this entire discussion?": "Êtes-vous certain⋅e de vouloir supprimer l'entièreté de cette discussion ?",
"Delete discussion": "Supprimer la discussion"
"Delete discussion": "Supprimer la discussion",
"All activities": "Toutes les activités",
"From yourself": "De vous",
"By others": "Des autres"
}

116
js/src/views/Group/Timeline.vue
View File

@@ -23,6 +23,74 @@
</ul>
</nav>
<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"
@@ -100,12 +168,20 @@ 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";
import { Location } from "vue-router";
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: {
@@ -116,6 +192,8 @@ type IActivitySkeleton = IActivity | { skeleton: string };
preferredUsername: this.preferredUsername,
page: 1,
limit: PAGINATION_LIMIT,
type: this.activityType,
author: this.activityAuthor,
};
},
},
@@ -157,6 +235,44 @@ export default class Timeline extends Vue {
usernameWithDomain = usernameWithDomain;
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;