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

Introduce group basic federation, event new page and notifications

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-02-18 08:57:00 +01:00
parent 300ef8f245
commit 4144e9ffd0
416 changed files with 32220 additions and 16750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
js/src/components/NavBar.vue
View File

@@ -1,13 +1,24 @@
<template>
<b-navbar type="is-secondary" wrapper-class="container">
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }"><logo /></b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }" :aria-label="$t('Home')">
<logo />
</b-navbar-item>
</template>
<template slot="start">
<b-navbar-item tag="router-link" :to="{ name: RouteName.EXPLORE }">{{ $t('Explore') }}</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{ $t('My events') }}</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.EXPLORE }">{{
$t("Explore")
}}</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{
$t("My events")
}}</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.MY_GROUPS }">{{
$t("My groups")
}}</b-navbar-item>
<b-navbar-item tag="span">
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{ $t('Create') }}</b-button>
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{
$t("Create")
}}</b-button>
</b-navbar-item>
</template>
<template slot="end">
@@ -18,56 +29,72 @@
<b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
<template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
<figure class="image is-32x32" v-if="currentActor.avatar">
<img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url">
<img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url" />
</figure>
<b-icon v-else icon="account-circle" />
</template>
<b-navbar-item tag="span" v-for="identity in identities" v-if="identities.length > 1" :active="identity.id === currentActor.id" :key="identity.id">
<!-- No identities dropdown if no identities -->
<span v-if="identities.length <= 1" />
<b-navbar-item
tag="span"
v-for="identity in identities"
v-else
:active="identity.id === currentActor.id"
:key="identity.id"
>
<span @click="setIdentity(identity)">
<div class="media-left">
<figure class="image is-32x32" v-if="identity.avatar">
<img class="is-rounded" :src="identity.avatar.url" alt="" />
<img class="is-rounded" :src="identity.avatar.url" alt />
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="media-content">
<span>{{ identity.displayName() }}</span>
<span class="has-text-grey" v-if="identity.name">
@{{ identity.preferredUsername }}
</span>
<span class="has-text-grey" v-if="identity.name"
>@{{ identity.preferredUsername }}</span
>
</div>
</span>
<hr class="navbar-divider">
<hr class="navbar-divider" />
</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">{{
$t("My account")
}}</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">
{{ $t('My account') }}
</b-navbar-item>
<!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
<!-- {{ $t('Create group') }}-->
<!-- </b-navbar-item>-->
<!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
<!-- {{ $t('Create group') }}-->
<!-- </b-navbar-item>-->
<b-navbar-item
v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
tag="router-link"
:to="{ name: RouteName.ADMIN_DASHBOARD }"
>{{ $t("Administration") }}</b-navbar-item
>
<b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR" tag="router-link" :to="{ name: RouteName.ADMIN_DASHBOARD }">
{{ $t('Administration') }}
</b-navbar-item>
<b-navbar-item tag="span">
<span @click="logout">{{ $t('Log out') }}</span>
</b-navbar-item>
<b-navbar-item tag="span">
<span @click="logout">{{ $t("Log out") }}</span>
</b-navbar-item>
</b-navbar-dropdown>
<b-navbar-item v-else tag="div">
<div class="buttons">
<router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: RouteName.REGISTER }">
<strong>{{ $t('Sign up') }}</strong>
<router-link
class="button is-primary"
v-if="config && config.registrationsOpen"
:to="{ name: RouteName.REGISTER }"
>
<strong>{{ $t("Sign up") }}</strong>
</router-link>
<router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{ $t('Log in') }}</router-link>
<router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{
$t("Log in")
}}</router-link>
</div>
</b-navbar-item>
</template>
@@ -75,18 +102,18 @@
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { CURRENT_USER_CLIENT } from '@/graphql/user';
import { changeIdentity, logout } from '@/utils/auth';
import { CURRENT_ACTOR_CLIENT, IDENTITIES } from '@/graphql/actor';
import { IPerson, Person } from '@/types/actor';
import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model';
import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model';
import Logo from '@/components/Logo.vue';
import SearchField from '@/components/SearchField.vue';
import { RouteName } from '@/router';
import { GraphQLError } from 'graphql';
import { Component, Vue, Watch } from "vue-property-decorator";
import Logo from "@/components/Logo.vue";
import { GraphQLError } from "graphql";
import { CURRENT_USER_CLIENT } from "../graphql/user";
import { changeIdentity, logout } from "../utils/auth";
import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR } from "../graphql/actor";
import { IPerson, Person } from "../types/actor";
import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model";
import { ICurrentUser, ICurrentUserRole } from "../types/current-user.model";
import SearchField from "./SearchField.vue";
import RouteName from "../router/name";
@Component({
apollo: {
@@ -98,11 +125,14 @@ import { GraphQLError } from 'graphql';
},
identities: {
query: IDENTITIES,
update: ({ identities }) => identities ? identities.map(identity => new Person(identity)) : [],
update: ({ identities }) =>
identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
skip() {
return this.currentUser.isLoggedIn === false;
},
error({ graphQLErrors }) { this.handleErrors(graphQLErrors); },
error({ graphQLErrors }) {
this.handleErrors(graphQLErrors);
},
},
config: {
query: CONFIG,
@@ -115,34 +145,45 @@ import { GraphQLError } from 'graphql';
})
export default class NavBar extends Vue {
currentActor!: IPerson;
config!: IConfig;
currentUser!: ICurrentUser;
ICurrentUserRole = ICurrentUserRole;
identities: IPerson[] = [];
RouteName = RouteName;
@Watch('currentActor')
@Watch("currentActor")
async initializeListOfIdentities() {
if (!this.currentUser.isLoggedIn) return;
const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
query: IDENTITIES,
});
if (data) {
this.identities = data.identities.map(identity => new Person(identity));
this.identities = data.identities.map((identity) => new Person(identity));
// If we don't have any identities, the user has validated their account,
// is logging for the first time but didn't create an identity somehow
if (this.identities.length === 0) {
await this.$router.push({
name: RouteName.REGISTER_PROFILE,
params: { email: this.currentUser.email, userAlreadyActivated: 'true' },
params: {
email: this.currentUser.email,
userAlreadyActivated: "true",
},
});
}
}
}
async handleErrors(errors: GraphQLError[]) {
if (errors.length > 0 && errors[0].message === 'You need to be logged-in to view your list of identities') {
if (
errors.length > 0 &&
errors[0].message === "You need to be logged-in to view your list of identities"
) {
await this.logout();
}
}
@@ -150,9 +191,9 @@ export default class NavBar extends Vue {
async logout() {
await logout(this.$apollo.provider.defaultClient);
this.$buefy.notification.open({
message: this.$t('You have been disconnected') as string,
type: 'is-success',
position: 'is-bottom-right',
message: this.$t("You have been disconnected") as string,
type: "is-success",
position: "is-bottom-right",
duration: 5000,
});
@@ -161,7 +202,13 @@ export default class NavBar extends Vue {
}
async setIdentity(identity: IPerson) {
return await changeIdentity(this.$apollo.provider.defaultClient, identity);
await this.$apollo.mutate({
mutation: UPDATE_DEFAULT_ACTOR,
variables: {
preferredUsername: identity.preferredUsername,
},
});
return changeIdentity(this.$apollo.provider.defaultClient, identity);
}
}
</script>
@@ -169,6 +216,10 @@ export default class NavBar extends Vue {
@import "../variables.scss";
nav {
.navbar-item svg {
height: 1.75rem;
}
.navbar-dropdown .navbar-item {
cursor: pointer;