Replace Vuetify with Bulma
Signed-off-by: Thomas Citharel <tcit@tcit.fr> Remove vuetify and add Bulma Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -1,213 +0,0 @@
|
||||
<template>
|
||||
<v-layout row>
|
||||
<v-flex xs12 sm6 offset-sm3>
|
||||
<v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
|
||||
<v-card v-if="actor">
|
||||
<v-img :src="actor.banner || 'https://picsum.photos/400/'" height="300px">
|
||||
<v-layout column class="media">
|
||||
<v-card-title>
|
||||
<v-btn icon @click="$router.go(-1)">
|
||||
<v-icon>chevron_left</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<!-- <v-btn icon class="mr-3" v-if="actor.id === actor.id">
|
||||
<v-icon>edit</v-icon>
|
||||
</v-btn> -->
|
||||
<v-menu bottom left>
|
||||
<v-btn icon slot="activator">
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
<v-list>
|
||||
<!-- <v-list-tile @click="logoutUser()" v-if="actor.id === actor.id">
|
||||
<v-list-tile-title>User logout</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="deleteAccount()" v-if="actor.id === actor.id">
|
||||
<v-list-tile-title>Delete</v-list-tile-title>
|
||||
</v-list-tile> -->
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<div class="text-xs-center">
|
||||
<v-avatar size="125px">
|
||||
<img v-if="!actor.avatarUrl"
|
||||
class="img-circle elevation-7 mb-1"
|
||||
src="https://picsum.photos/125/125/"
|
||||
>
|
||||
<img v-else
|
||||
class="img-circle elevation-7 mb-1"
|
||||
:src="actor.avatarUrl"
|
||||
>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<v-container fluid grid-list-lg>
|
||||
<v-layout row>
|
||||
<v-flex xs7>
|
||||
<div class="headline">{{ actor.name }}</div>
|
||||
<div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span>
|
||||
</div>
|
||||
<v-card-text v-if="actor.description" v-html="actor.description"></v-card-text>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-layout>
|
||||
</v-img>
|
||||
<v-list three-line>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">phone</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>(323) 555-6789</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Work</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-action>
|
||||
<v-icon dark>chat</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">mail</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>ali_connors@example.com</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Work</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">location_on</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>1400 Main Street</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Orlando, FL 79938</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
<v-container fluid grid-list-md v-if="actor.participatingEvents && actor.participatingEvents.length > 0">
|
||||
<v-subheader>Participated at</v-subheader>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="event in actor.participatingEvents" :key="event.id">
|
||||
<v-card>
|
||||
<v-img
|
||||
class="black--text"
|
||||
height="200px"
|
||||
src="https://picsum.photos/400/200/"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<span class="headline">{{ event.title }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-img>
|
||||
<v-card-title>
|
||||
<div>
|
||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-if="event.organizer">Organisé par
|
||||
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-container fluid grid-list-md v-if="actor.organizedEvents && actor.organizedEvents.length > 0">
|
||||
<v-subheader>Organized events</v-subheader>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="event in actor.organizedEvents" :key="event.id" md6>
|
||||
<v-card>
|
||||
<v-img
|
||||
height="200px"
|
||||
src="https://picsum.photos/400/200/"
|
||||
/>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<router-link :to="{name: 'Event', params: {uuid: event.uuid}}">
|
||||
<div class="headline">{{ event.title }}</div>
|
||||
</router-link>
|
||||
<span class="grey--text" v-html="nl2br(event.description)"></span>
|
||||
</div>
|
||||
</v-card-title>
|
||||
|
||||
<!-- <v-card-title>
|
||||
<div>
|
||||
<span class="grey--text" v-if="event.addressType === 'physical'">{{ event.startDate }} à {{ event.location }}</span><br>
|
||||
<p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
|
||||
</div>
|
||||
</v-card-title> -->
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { FETCH_ACTOR } from '@/graphql/actor';
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
actor: {
|
||||
query: FETCH_ACTOR,
|
||||
variables() {
|
||||
return {
|
||||
name: this.$route.params.name,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
export default class Account extends Vue {
|
||||
@Prop({ type: String, required: true }) name!: string;
|
||||
|
||||
actor = null;
|
||||
|
||||
// call again the method if the route changes
|
||||
@Watch('$route')
|
||||
onRouteChange() {
|
||||
// this.fetchData()
|
||||
}
|
||||
|
||||
logoutUser() {
|
||||
// TODO : implement logout
|
||||
this.$router.push({ name: 'Home' });
|
||||
}
|
||||
|
||||
nl2br(text) {
|
||||
return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,133 +0,0 @@
|
||||
<template>
|
||||
<v-layout row>
|
||||
<v-flex xs12 sm6 offset-sm3>
|
||||
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
||||
<v-card v-if="!loading">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Identities</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-list two-line>
|
||||
<v-list-tile
|
||||
v-for="actor in actors"
|
||||
:key="actor.id"
|
||||
avatar
|
||||
@click="$router.push({ name: 'Account', params: { name: actor.username } })"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon v-if="defaultActor === actor.username" color="pink">star</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title v-text="actor.username"></v-list-tile-title>
|
||||
<v-list-tile-sub-title v-if="actor.display_name" v-text="actor.display_name"></v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
|
||||
<v-list-tile-avatar>
|
||||
<img :src="actor.avatar">
|
||||
</v-list-tile-avatar>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
<v-divider v-if="showForm"></v-divider>
|
||||
<v-form v-if="showForm">
|
||||
<v-text-field
|
||||
label="Username"
|
||||
required
|
||||
type="text"
|
||||
v-model="newActor.preferred_username"
|
||||
:rules="[rules.required]"
|
||||
:error="this.state.username.status"
|
||||
:error-messages="this.state.username.msg"
|
||||
:suffix="this.host()"
|
||||
hint="You will be able to create more identities once registered"
|
||||
persistent-hint
|
||||
>
|
||||
</v-text-field>
|
||||
<v-textarea
|
||||
name="input-7-1"
|
||||
label="Profile description"
|
||||
hint="Will be displayed publicly on your profile"
|
||||
></v-textarea>
|
||||
</v-form>
|
||||
<v-btn
|
||||
color="pink"
|
||||
dark
|
||||
absolute
|
||||
bottom
|
||||
right
|
||||
fab
|
||||
@click="toggleForm()"
|
||||
>
|
||||
<v-icon>{{ showForm ? 'check' : 'add' }}</v-icon>
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class Identities extends Vue {
|
||||
actors = [];
|
||||
newActor = {
|
||||
preferred_username: '',
|
||||
summary: '',
|
||||
};
|
||||
loading = true;
|
||||
showForm = false;
|
||||
rules = {
|
||||
required: value => !!value || 'Required.',
|
||||
};
|
||||
state = {
|
||||
username: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
};
|
||||
|
||||
created() {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
// Implements eventFetch
|
||||
// eventFetch('/user', this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.actors = response.data.actors;
|
||||
// this.loading = false;
|
||||
// });
|
||||
}
|
||||
|
||||
sendData() {
|
||||
this.loading = true;
|
||||
this.showForm = false;
|
||||
|
||||
// Implements eventFetch
|
||||
// eventFetch('/actors', this.$store, {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify({ actor: this.newActor }),
|
||||
// })
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.actors.push(response.data);
|
||||
// this.loading = false;
|
||||
// });
|
||||
}
|
||||
|
||||
toggleForm() {
|
||||
if (this.showForm === true) {
|
||||
this.sendData();
|
||||
} else {
|
||||
this.showForm = true;
|
||||
}
|
||||
}
|
||||
|
||||
host() {
|
||||
return `@${window.location.host}`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Login</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-tooltip bottom>
|
||||
<v-btn
|
||||
slot="activator"
|
||||
:to="{ name: 'Register', params: { email: this.credentials.email, password: this.credentials.password } }"
|
||||
>
|
||||
<!-- <v-icon large>login</v-icon> -->
|
||||
<span>Register</span>
|
||||
</v-btn>
|
||||
<span>Register</span>
|
||||
</v-tooltip>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<div class="text-xs-center">
|
||||
<v-avatar size="80px">
|
||||
<transition name="avatar">
|
||||
<component :is="validEmail()" v-bind="{email: credentials.email}"></component>
|
||||
<!-- <v-gravatar :email="credentials.email" default-img="mp" v-if="validEmail()"/>
|
||||
<avatar v-else></avatar> -->
|
||||
</transition>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<v-form @submit="loginAction" v-if="!validationSent">
|
||||
<v-text-field
|
||||
label="Email"
|
||||
required
|
||||
type="text"
|
||||
v-model="credentials.email"
|
||||
:rules="[rules.required, rules.email]"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
label="password"
|
||||
required
|
||||
type="password"
|
||||
v-model="credentials.password"
|
||||
:rules="[rules.required]"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-btn @click="loginAction" color="blue">Login</v-btn>
|
||||
<router-link :to="{ name: 'SendPasswordReset', params: { email: credentials.email } }">Password forgotten ?</router-link>
|
||||
</v-form>
|
||||
<div v-else>
|
||||
<h2>{{ $t('registration.form.validation_sent', { email: credentials.email }) }}</h2>
|
||||
<b-alert show variant="info">{{ $t('registration.form.validation_sent_info') }}</b-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar.vue';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { LOGIN } from '@/graphql/auth';
|
||||
import { validateEmailField, validateRequiredField } from '@/utils/validators';
|
||||
import { saveUserData } from '@/utils/auth';
|
||||
import { ILogin } from '@/types/login.model'
|
||||
import { UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user'
|
||||
import { onLogin } from '@/vue-apollo'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
'v-gravatar': Gravatar,
|
||||
avatar: RegisterAvatar,
|
||||
},
|
||||
})
|
||||
export default class Login extends Vue {
|
||||
@Prop({ type: String, required: false, default: '' }) email!: string;
|
||||
@Prop({ type: String, required: false, default: '' }) password!: string;
|
||||
|
||||
credentials = {
|
||||
email: '',
|
||||
password: '',
|
||||
};
|
||||
validationSent = false;
|
||||
error = {
|
||||
show: false,
|
||||
text: '',
|
||||
timeout: 3000,
|
||||
field: {
|
||||
email: false,
|
||||
password: false,
|
||||
},
|
||||
};
|
||||
rules = {
|
||||
required: validateRequiredField,
|
||||
email: validateEmailField
|
||||
};
|
||||
user: any;
|
||||
|
||||
beforeCreate() {
|
||||
if (this.user) {
|
||||
this.$router.push('/');
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
this.credentials.password = this.password;
|
||||
}
|
||||
|
||||
async loginAction(e: Event) {
|
||||
e.preventDefault();
|
||||
this.error.show = false;
|
||||
|
||||
try {
|
||||
const result = await this.$apollo.mutate<{ login: ILogin }>({
|
||||
mutation: LOGIN,
|
||||
variables: {
|
||||
email: this.credentials.email,
|
||||
password: this.credentials.password,
|
||||
},
|
||||
});
|
||||
|
||||
saveUserData(result.data.login);
|
||||
|
||||
await this.$apollo.mutate({
|
||||
mutation: UPDATE_CURRENT_USER_CLIENT,
|
||||
variables: {
|
||||
id: result.data.login.user.id,
|
||||
email: this.credentials.email,
|
||||
}
|
||||
});
|
||||
|
||||
onLogin(this.$apollo);
|
||||
|
||||
this.$router.push({ name: 'Home' });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
this.error.show = true;
|
||||
this.error.text = err.message;
|
||||
}
|
||||
}
|
||||
|
||||
validEmail() {
|
||||
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,123 +0,0 @@
|
||||
<template>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Password Reset</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-alert type="error" :value="state.token.status === false">{{ state.token.msg }}</v-alert>
|
||||
<v-form @submit="resetAction">
|
||||
<v-text-field
|
||||
label="Password"
|
||||
type="password"
|
||||
v-model="credentials.password"
|
||||
required
|
||||
:error="state.password.status"
|
||||
:rules="[rules.required, rules.password_length]"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
label="Password (confirmation)"
|
||||
type="password"
|
||||
v-model="credentials.password_confirmation"
|
||||
required
|
||||
:rules="[rules.required, rules.password_length, rules.password_equal]"
|
||||
:error="state.password_confirmation.status"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-btn type="submit" :disabled="!samePasswords" color="blue">Reset my password</v-btn>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { validateRequiredField } from '@/utils/validators';
|
||||
import { RESET_PASSWORD } from '@/graphql/auth';
|
||||
import { saveUserData } from '@/utils/auth';
|
||||
import { ILogin } from '@/types/login.model'
|
||||
|
||||
@Component
|
||||
export default class PasswordReset extends Vue {
|
||||
@Prop({ type: String, required: true }) token!: string;
|
||||
|
||||
credentials = {
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
};
|
||||
error = {
|
||||
show: false,
|
||||
};
|
||||
state = {
|
||||
token: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
password: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
password_confirmation: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
};
|
||||
rules = {
|
||||
password_length: value => value.length > 6 || 'Password must be at least 6 characters long',
|
||||
required: validateRequiredField,
|
||||
password_equal: value => value === this.credentials.password || 'Passwords must be the same',
|
||||
};
|
||||
|
||||
get samePasswords() {
|
||||
return this.rules.password_length(this.credentials.password) === true &&
|
||||
this.credentials.password === this.credentials.password_confirmation;
|
||||
}
|
||||
|
||||
async resetAction(e) {
|
||||
this.resetState();
|
||||
this.error.show = false;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const result = await this.$apollo.mutate<{ resetPassword: ILogin}>({
|
||||
mutation: RESET_PASSWORD,
|
||||
variables: {
|
||||
password: this.credentials.password,
|
||||
token: this.token,
|
||||
},
|
||||
});
|
||||
|
||||
saveUserData(result.data.resetPassword);
|
||||
this.$router.push({ name: 'Home' });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
this.error.show = true;
|
||||
}
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.state = {
|
||||
token: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
password_confirmation: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
password: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,185 +0,0 @@
|
||||
<template>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Register</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-tooltip bottom>
|
||||
<v-btn
|
||||
slot="activator"
|
||||
:to="{ name: 'Login', params: { email, password } }"
|
||||
>
|
||||
<!-- <v-icon large>login</v-icon> -->
|
||||
<span>Login</span>
|
||||
</v-btn>
|
||||
<span>Login</span>
|
||||
</v-tooltip>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<div class="text-xs-center">
|
||||
<v-avatar size="80px">
|
||||
<transition name="avatar">
|
||||
<component :is="validEmail()" v-bind="{email}"></component>
|
||||
<!-- <v-gravatar :email="credentials.email" default-img="mp" v-if="validEmail()"/>
|
||||
<avatar v-else></avatar> -->
|
||||
</transition>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<v-form @submit="submit()" v-if="!validationSent">
|
||||
<v-text-field
|
||||
label="Username"
|
||||
required
|
||||
type="text"
|
||||
v-model="username"
|
||||
:rules="[rules.required]"
|
||||
:error="state.username.status"
|
||||
:error-messages="state.username.msg"
|
||||
:suffix="host()"
|
||||
hint="You will be able to create more identities once registered"
|
||||
persistent-hint
|
||||
>
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
label="Email"
|
||||
required
|
||||
type="email"
|
||||
ref="email"
|
||||
v-model="email"
|
||||
:rules="[rules.required, rules.email]"
|
||||
:error="state.email.status"
|
||||
:error-messages="state.email.msg"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
label="Password"
|
||||
required
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
v-model="password"
|
||||
:rules="[rules.required, rules.password_length]"
|
||||
:error="state.password.status"
|
||||
:error-messages="state.password.msg"
|
||||
:append-icon="showPassword ? 'visibility_off' : 'visibility'"
|
||||
@click:append="showPassword = !showPassword"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-btn @click="submit()" color="primary">Register</v-btn>
|
||||
<router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link>
|
||||
</v-form>
|
||||
<div v-if="validationSent">
|
||||
<h2>
|
||||
<translate>A validation email was sent to %{email}</translate>
|
||||
</h2>
|
||||
<v-alert :value="true" type="info">
|
||||
<translate>Before you can login, you need to click on the link inside it to validate your account</translate>
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar.vue';
|
||||
import { CREATE_USER } from '@/graphql/user';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
'v-gravatar': Gravatar,
|
||||
avatar: RegisterAvatar,
|
||||
},
|
||||
})
|
||||
export default class Register extends Vue {
|
||||
@Prop({ type: String, required: false, default: '' }) default_email!: string;
|
||||
@Prop({ type: String, required: false, default: '' }) default_password!: string;
|
||||
|
||||
username = '';
|
||||
email = this.default_email;
|
||||
password = this.default_password;
|
||||
error = {
|
||||
show: false,
|
||||
};
|
||||
showPassword = false;
|
||||
validationSent = false;
|
||||
state = {
|
||||
email: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
username: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
password: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
};
|
||||
rules = {
|
||||
password_length: value => value.length > 6 || 'Password must be at least 6 characters long',
|
||||
required: value => !!value || 'Required.',
|
||||
email: (value: string) => value.includes('@') || 'Invalid e-mail.',
|
||||
};
|
||||
|
||||
resetState() {
|
||||
this.state = {
|
||||
email: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
username: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
password: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
host() {
|
||||
return `@${window.location.host}`;
|
||||
}
|
||||
|
||||
validEmail() {
|
||||
return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
|
||||
}
|
||||
|
||||
async submit() {
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: CREATE_USER,
|
||||
variables: {
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
username: this.username,
|
||||
},
|
||||
});
|
||||
|
||||
this.validationSent = true;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.avatar-enter-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.avatar-enter, .avatar-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.avatar-leave {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class RegisterAvatar extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Resend Instructions</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-form @submit="resendConfirmationAction" v-if="!validationSent">
|
||||
<v-text-field
|
||||
label="Email"
|
||||
type="email"
|
||||
v-model="credentials.email"
|
||||
required
|
||||
:state="state.email.status"
|
||||
:rules="[rules.required, rules.email]"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-btn type="submit" color="blue">Send instructions again</v-btn>
|
||||
</v-form>
|
||||
<div v-else>
|
||||
<h2>Validation email sent to {{ credentials.email }}</h2>
|
||||
<v-alert :value="true" type="info">Please check you spam folder if you didn't receive the email.</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { validateEmailField, validateRequiredField } from '@/utils/validators';
|
||||
import { RESEND_CONFIRMATION_EMAIL } from '@/graphql/auth';
|
||||
|
||||
@Component
|
||||
export default class ResendConfirmation extends Vue {
|
||||
@Prop({ type: String, required: false, default: '' }) email!: string;
|
||||
|
||||
credentials = {
|
||||
email: '',
|
||||
};
|
||||
validationSent = false;
|
||||
error = false;
|
||||
state = {
|
||||
email: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
};
|
||||
rules = {
|
||||
required: validateRequiredField,
|
||||
email: validateEmailField,
|
||||
};
|
||||
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
}
|
||||
|
||||
async resendConfirmationAction(e) {
|
||||
e.preventDefault();
|
||||
this.error = false;
|
||||
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: RESEND_CONFIRMATION_EMAIL,
|
||||
variables: {
|
||||
email: this.credentials.email,
|
||||
},
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
this.error = true;
|
||||
} finally {
|
||||
this.validationSent = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Password Reset</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-form @submit="resendConfirmationAction" v-if="!validationSent">
|
||||
<v-text-field
|
||||
label="Email"
|
||||
type="email"
|
||||
v-model="credentials.email"
|
||||
required
|
||||
:state="state.email.status"
|
||||
:rules="[rules.required, rules.email]"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-btn type="submit" color="blue">Reset my password</v-btn>
|
||||
</v-form>
|
||||
<div v-else>
|
||||
<h2>Validation email sent to {{ credentials.email }}</h2>
|
||||
<v-alert :value="true" type="info">Please check you spam folder if you didn't receive the email.</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { validateEmailField, validateRequiredField } from '@/utils/validators';
|
||||
import { SEND_RESET_PASSWORD } from '@/graphql/auth';
|
||||
|
||||
@Component
|
||||
export default class SendPasswordReset extends Vue {
|
||||
@Prop({ type: String, required: false, default: '' }) email!: string;
|
||||
|
||||
credentials = {
|
||||
email: '',
|
||||
};
|
||||
validationSent = false;
|
||||
error = false;
|
||||
state = {
|
||||
email: {
|
||||
status: null,
|
||||
msg: '',
|
||||
} as { status: boolean | null, msg: string },
|
||||
};
|
||||
|
||||
rules = {
|
||||
required: validateRequiredField,
|
||||
email: validateEmailField,
|
||||
};
|
||||
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
}
|
||||
|
||||
async resendConfirmationAction(e) {
|
||||
e.preventDefault();
|
||||
this.error = false;
|
||||
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: SEND_RESET_PASSWORD,
|
||||
variables: {
|
||||
email: this.credentials.email,
|
||||
},
|
||||
});
|
||||
|
||||
this.validationSent = true;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
this.error = true;
|
||||
this.state.email = { status: false, msg: err.errors };
|
||||
}
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.state = {
|
||||
email: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<h1 v-if="loading">
|
||||
<translate>Your account is being validated</translate>
|
||||
</h1>
|
||||
<div v-else>
|
||||
<div v-if="failed">
|
||||
<v-alert :value="true" variant="danger">
|
||||
<translate>Error while validating account</translate>
|
||||
</v-alert>
|
||||
</div>
|
||||
<h1 v-else>
|
||||
<translate>Your account has been validated</translate>
|
||||
</h1>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { VALIDATE_USER } from '@/graphql/user';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { AUTH_TOKEN, AUTH_USER_ID } from '@/constants';
|
||||
|
||||
@Component
|
||||
export default class Validate extends Vue {
|
||||
@Prop({ type: String, required: true }) token!: string;
|
||||
|
||||
loading = true;
|
||||
failed = false;
|
||||
|
||||
created() {
|
||||
this.validateAction();
|
||||
}
|
||||
|
||||
async validateAction() {
|
||||
try {
|
||||
const data = await this.$apollo.mutate({
|
||||
mutation: VALIDATE_USER,
|
||||
variables: {
|
||||
token: this.token,
|
||||
},
|
||||
});
|
||||
|
||||
this.saveUserData(data.data);
|
||||
this.$router.push({ name: 'Home' });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
this.failed = true;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
saveUserData({ validateUser: login }) {
|
||||
localStorage.setItem(AUTH_USER_ID, login.user.id);
|
||||
localStorage.setItem(AUTH_TOKEN, login.token);
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>
|
||||
<translate>Create a new category</translate>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field
|
||||
:label="$gettext('Name of the category')"
|
||||
v-model="title"
|
||||
:counter="100"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-textarea
|
||||
:label="$gettext('Description')"
|
||||
v-model="description"
|
||||
></v-textarea>
|
||||
<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
|
||||
<v-img :src="image.url" height="150" v-if="image.url" aspect-ratio="1" contain/>
|
||||
<v-text-field label="Select Image" @click='pickFile' v-model='image.name' prepend-icon='attach_file'></v-text-field>
|
||||
<input
|
||||
type="file"
|
||||
style="display: none"
|
||||
ref="image"
|
||||
accept="image/*"
|
||||
@change="onFilePicked"
|
||||
>
|
||||
</v-flex>
|
||||
<v-btn color="primary" @click="create">
|
||||
<translate>Create category</translate>
|
||||
</v-btn>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { CREATE_CATEGORY } from '@/graphql/category';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class CreateCategory extends Vue {
|
||||
title = '';
|
||||
description = '';
|
||||
image = {
|
||||
url: '',
|
||||
name: '',
|
||||
file: '',
|
||||
};
|
||||
|
||||
create() {
|
||||
this.$apollo.mutate({
|
||||
mutation: CREATE_CATEGORY,
|
||||
variables: {
|
||||
title: this.title,
|
||||
description: this.description,
|
||||
picture: (this.$refs['image'] as any).files[ 0 ],
|
||||
},
|
||||
}).then((data) => {
|
||||
console.log(data);
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
pickFile() {
|
||||
(this.$refs['image'] as any).click();
|
||||
}
|
||||
|
||||
onFilePicked(e) {
|
||||
const files = e.target.files;
|
||||
if (files[ 0 ] === undefined || files[ 0 ].name.lastIndexOf('.') <= 0) {
|
||||
console.error('File is incorrect');
|
||||
}
|
||||
this.image.name = files[ 0 ].name;
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.markdown-render h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<h1>Category List</h1>
|
||||
<v-container fluid grid-list-md class="grey lighten-4">
|
||||
<v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
|
||||
<v-layout row wrap v-else>
|
||||
<v-flex xs12 sm6 md3 v-for="category in categories" :key="category.id">
|
||||
<v-card>
|
||||
<v-img v-if="category.picture.url" :src="HTTP_ENDPOINT + category.picture.url" height="200px">
|
||||
</v-img>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<h3 class="headline mb-0">{{ category.title }}</h3>
|
||||
<div>{{ category.description }}</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn flat class="orange--text">
|
||||
<translate>Explore</translate>
|
||||
</v-btn>
|
||||
<v-btn flat class="red--text" v-on:click="deleteCategory(category.id)">
|
||||
<translate>Delete</translate>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-layout v-if="categories.length <= 0">
|
||||
<h3>No categories :(</h3>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
|
||||
<router-link :to="{ name: 'CreateCategory' }" class="btn btn-default">Create</router-link>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { FETCH_CATEGORIES } from '@/graphql/category';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
// TODO : remove this hardcode
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
categories: {
|
||||
query: FETCH_CATEGORIES,
|
||||
},
|
||||
},
|
||||
})
|
||||
export default class List extends Vue {
|
||||
categories = [];
|
||||
loading = true;
|
||||
HTTP_ENDPOINT = 'http://localhost:4000';
|
||||
|
||||
deleteCategory(categoryId) {
|
||||
const router = this.$router;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
|
||||
// .then(() => {
|
||||
// this.categories = this.categories.filter(category => category.id !== categoryId);
|
||||
// router.push('/category');
|
||||
// });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,193 +0,0 @@
|
||||
<template>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Create a new event</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field label="Title" v-model="event.title" :counter="100" required></v-text-field>
|
||||
<v-date-picker v-model="event.begins_on"></v-date-picker>
|
||||
<v-radio-group v-model="event.location_type" row>
|
||||
<v-radio label="Address" value="physical" off-icon="place"></v-radio>
|
||||
<v-radio label="Online" value="online" off-icon="link"></v-radio>
|
||||
<v-radio label="Phone" value="phone" off-icon="phone"></v-radio>
|
||||
<v-radio label="Other" value="other"></v-radio>
|
||||
</v-radio-group>
|
||||
<!-- <vuetify-google-autocomplete
|
||||
v-if="event.location_type === 'physical'"
|
||||
id="map"
|
||||
append-icon="search"
|
||||
classname="form-control"
|
||||
placeholder="Start typing"
|
||||
label="Location"
|
||||
enable-geolocation
|
||||
types="geocode"
|
||||
v-on:placechanged="getAddressData"
|
||||
>
|
||||
</vuetify-google-autocomplete>-->
|
||||
<v-text-field
|
||||
v-if="event.location_type === 'online'"
|
||||
label="Meeting adress"
|
||||
type="url"
|
||||
v-model="event.url"
|
||||
:required="event.location_type === 'online'"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-if="event.location_type === 'phone'"
|
||||
label="Phone number"
|
||||
type="tel"
|
||||
v-model="event.phone"
|
||||
:required="event.location_type === 'phone'"
|
||||
></v-text-field>
|
||||
<v-autocomplete
|
||||
:items="categories"
|
||||
v-model="event.category"
|
||||
item-text="title"
|
||||
item-value="id"
|
||||
label="Categories"
|
||||
></v-autocomplete>
|
||||
<v-btn color="primary" @click="create">Create event</v-btn>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// import Location from '@/components/Location';
|
||||
import VueMarkdown from "vue-markdown";
|
||||
import { CREATE_EVENT, EDIT_EVENT } from "@/graphql/event";
|
||||
import { FETCH_CATEGORIES } from "@/graphql/category";
|
||||
import { AUTH_USER_ACTOR } from "@/constants";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VueMarkdown
|
||||
},
|
||||
apollo: {
|
||||
categories: {
|
||||
query: FETCH_CATEGORIES
|
||||
}
|
||||
}
|
||||
})
|
||||
export default class CreateEvent extends Vue {
|
||||
@Prop({ required: false, type: String }) uuid!: string;
|
||||
|
||||
e1 = 0;
|
||||
event = {
|
||||
title: null,
|
||||
organizer_actor_id: null,
|
||||
description: "",
|
||||
begins_on: new Date().toISOString().substr(0, 10),
|
||||
ends_on: new Date(),
|
||||
seats: null,
|
||||
physical_address: null,
|
||||
location_type: "physical",
|
||||
online_address: null,
|
||||
tel_num: null,
|
||||
price: null,
|
||||
category: null,
|
||||
category_id: null,
|
||||
tags: [],
|
||||
participants: []
|
||||
} as any; // FIXME: correctly type an event
|
||||
categories = [];
|
||||
tags = [];
|
||||
tagsToSend = [];
|
||||
tagsFetched = [];
|
||||
loading = false;
|
||||
|
||||
// created() {
|
||||
// if (this.uuid) {
|
||||
// this.fetchEvent();
|
||||
// }
|
||||
// }
|
||||
|
||||
create() {
|
||||
// this.event.seats = parseInt(this.event.seats, 10);
|
||||
// this.tagsToSend.forEach((tag) => {
|
||||
// this.event.tags.push({
|
||||
// title: tag,
|
||||
// // '@type': 'Tag',
|
||||
// });
|
||||
// });
|
||||
// FIXME: correctly parse actor JSON
|
||||
const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || "{}");
|
||||
this.event.category_id = this.event.category;
|
||||
this.event.organizer_actor_id = actor.id;
|
||||
this.event.participants = [actor.id];
|
||||
// this.event.price = parseFloat(this.event.price);
|
||||
|
||||
if (this.uuid === undefined) {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: CREATE_EVENT,
|
||||
variables: {
|
||||
title: this.event.title,
|
||||
description: this.event.description,
|
||||
organizerActorId: this.event.organizer_actor_id,
|
||||
categoryId: this.event.category_id,
|
||||
beginsOn: this.event.begins_on
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
this.loading = false;
|
||||
this.$router.push({
|
||||
name: "Event",
|
||||
params: { uuid: data.data.uuid }
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: EDIT_EVENT
|
||||
})
|
||||
.then(data => {
|
||||
this.loading = false;
|
||||
this.$router.push({
|
||||
name: "Event",
|
||||
params: { uuid: data.data.uuid }
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
this.event.tags = [];
|
||||
}
|
||||
|
||||
getAddressData(addressData) {
|
||||
if (addressData !== null) {
|
||||
this.event.address = {
|
||||
geom: {
|
||||
data: {
|
||||
latitude: addressData.latitude,
|
||||
longitude: addressData.longitude
|
||||
},
|
||||
type: "point"
|
||||
},
|
||||
addressCountry: addressData.country,
|
||||
addressLocality: addressData.locality,
|
||||
addressRegion: addressData.administrative_area_level_1,
|
||||
postalCode: addressData.postal_code,
|
||||
streetAddress: `${addressData.street_number} ${addressData.route}`
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.markdown-render h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<v-container fluid grid-list-md>
|
||||
<h3>Update event {{ event.title }}</h3>
|
||||
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
||||
<v-form v-if="!loading">
|
||||
<v-stepper v-model="e1" vertical>
|
||||
<v-stepper-step step="1" :complete="e1 > 1">Basic Informations
|
||||
<small>Title and description</small>
|
||||
</v-stepper-step>
|
||||
<v-stepper-content step="1">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-text-field
|
||||
label="Title"
|
||||
v-model="event.title"
|
||||
:counter="100"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex md6>
|
||||
<v-text-field
|
||||
label="Description"
|
||||
v-model="event.description"
|
||||
multiLine
|
||||
required
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex md6>
|
||||
<vue-markdown class="markdown-render"
|
||||
:watches="['show','html','breaks','linkify','emoji','typographer','toc']"
|
||||
:source="event.description"
|
||||
:show="true" :html="false" :breaks="true" :linkify="true"
|
||||
:emoji="true" :typographer="true" :toc="false"
|
||||
></vue-markdown>
|
||||
</v-flex>
|
||||
<v-flex md12>
|
||||
<v-select
|
||||
v-bind:items="categories"
|
||||
v-model="event.category"
|
||||
item-text="name"
|
||||
item-value="@id"
|
||||
label="Categories"
|
||||
single-line
|
||||
bottom
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex md12>
|
||||
<!--<v-text-field
|
||||
v-model="tagsToSend"
|
||||
label="Tags"
|
||||
></v-text-field>-->
|
||||
<v-select
|
||||
v-model="tagsToSend"
|
||||
label="Tags"
|
||||
chips
|
||||
tags
|
||||
:items="tagsFetched"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn color="primary" @click.native="e1 = 2">Next</v-btn>
|
||||
</v-stepper-content>
|
||||
<v-stepper-step step="2" :complete="e1 > 2">Date and place</v-stepper-step>
|
||||
<v-stepper-content step="2">
|
||||
Event starts at:
|
||||
<v-text-field type="datetime-local" v-model="event.startDate"></v-text-field>
|
||||
Event ends at:
|
||||
<v-text-field type="datetime-local" v-model="event.endDate"></v-text-field>
|
||||
|
||||
<vuetify-google-autocomplete
|
||||
id="map"
|
||||
append-icon="search"
|
||||
placeholder="Start typing"
|
||||
label="Location"
|
||||
enable-geolocation
|
||||
v-on:placechanged="getAddressData"
|
||||
>
|
||||
</vuetify-google-autocomplete>
|
||||
<v-btn color="primary" @click.native="e1 = 3">Next</v-btn>
|
||||
</v-stepper-content>
|
||||
<v-stepper-step step="3" :complete="e1 > 3">Extra informations</v-stepper-step>
|
||||
<v-stepper-content step="3">
|
||||
<v-text-field
|
||||
label="Number of seats"
|
||||
v-model="event.seats"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Price"
|
||||
prefix="$"
|
||||
type="float"
|
||||
v-model="event.price"
|
||||
></v-text-field>
|
||||
</v-stepper-content>
|
||||
</v-stepper>
|
||||
</v-form>
|
||||
<v-btn color="primary" @click="create">Create event</v-btn>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class EventEdit extends Vue {
|
||||
@Prop(String) id!: string;
|
||||
|
||||
loading = true;
|
||||
event = null;
|
||||
|
||||
created() {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.id}`, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// this.loading = false;
|
||||
// this.event = data;
|
||||
// console.log(this.event);
|
||||
// });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,245 +0,0 @@
|
||||
<template>
|
||||
<v-layout row>
|
||||
<v-flex xs12 sm6 offset-sm3>
|
||||
<v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
|
||||
<div>{{ event }}</div>
|
||||
<v-card v-if="event">
|
||||
<!-- <v-img
|
||||
src="https://picsum.photos/600/400/"
|
||||
height="200px"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<v-card-title>
|
||||
<v-btn icon @click="$router.go(-1)" class="white--text">
|
||||
<v-icon>chevron_left</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon class="mr-3 white--text" v-if="actorIsOrganizer()" :to="{ name: 'EditEvent', params: {uuid: event.uuid}}">
|
||||
<v-icon>edit</v-icon>
|
||||
</v-btn>
|
||||
<v-menu bottom left>
|
||||
<v-btn icon slot="activator" class="white--text">
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
<v-list>
|
||||
<v-list-tile @click="downloadIcsEvent()">
|
||||
<v-list-tile-title>Download</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="deleteEvent()" v-if="actorIsOrganizer()">
|
||||
<v-list-tile-title>Delete</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-title>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-img> -->
|
||||
<v-container grid-list-md>
|
||||
<v-layout row wrap>
|
||||
<v-flex md10>
|
||||
<v-spacer></v-spacer>
|
||||
<span class="subheading grey--text">{{ event.begins_on | formatDay }}</span>
|
||||
<h1 class="display-1">{{ event.title }}</h1>
|
||||
<div>
|
||||
<!-- <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
|
||||
<v-avatar size="25px">
|
||||
<img class="img-circle elevation-7 mb-1"
|
||||
:src="event.organizer_actor.avatarUrl"
|
||||
>
|
||||
</v-avatar>
|
||||
</router-link> -->
|
||||
<!-- <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span> -->
|
||||
</div>
|
||||
<!-- <p><router-link :to="{ name: 'Account', params: {id: event.organizer.id} }"><span class="grey--text">{{ event.organizer.username }}</span></router-link> organises {{ event.title }} <span v-if="event.address.addressLocality">in {{ event.address.addressLocality }}</span> on the {{ event.startDate | formatDate }}.</p> -->
|
||||
<v-card-text v-if="event.description">
|
||||
<vue-markdown :source="event.description"></vue-markdown>
|
||||
</v-card-text>
|
||||
</v-flex>
|
||||
<!-- <v-flex md2>
|
||||
<p v-if="actorIsOrganizer()">
|
||||
Vous êtes organisateur de cet événement.
|
||||
</p>
|
||||
<div v-else>
|
||||
<p v-if="actorIsParticipant()">
|
||||
Vous avez annoncé aller à cet événement.
|
||||
</p>
|
||||
<p v-else>Vous y allez ?
|
||||
<span class="text--darken-2 grey--text">{{ event.participants.length }} personnes y vont.</span>
|
||||
</p>
|
||||
</div>
|
||||
<v-card-actions v-if="!actorIsOrganizer()">
|
||||
<v-btn v-if="!actorIsParticipant()" @click="joinEvent" color="success"><v-icon>check</v-icon> Join</v-btn>
|
||||
<v-btn v-if="actorIsParticipant()" @click="leaveEvent" color="error">Leave</v-btn>
|
||||
</v-card-actions>
|
||||
</v-flex> -->
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-divider></v-divider>
|
||||
<v-container>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 md4 order-md1>
|
||||
<v-layout
|
||||
column
|
||||
fill-height
|
||||
>
|
||||
<v-list two-line>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">access_time</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>{{ event.begins_on | formatDate }}</v-list-tile-title>
|
||||
<v-list-tile-sub-title>{{ event.ends_on | formatDate }}</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-divider inset></v-divider>
|
||||
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">place</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
{{ event.physical_address.streetAddress }}
|
||||
</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Mobile</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<v-flex md8 xs12>
|
||||
<p>
|
||||
<h2>Details</h2>
|
||||
<vue-markdown :source="event.description" v-if="event.description" :toc-first-level="3"></vue-markdown>
|
||||
</p>
|
||||
<v-subheader>Participants</v-subheader>
|
||||
<!-- <v-flex md2 v-for="participant in event.participants" :key="participant.actor.uuid">
|
||||
<router-link :to="{name: 'Account', params: { name: participant.actor.preferredUsername }}">
|
||||
<v-card>
|
||||
<v-avatar size="75px">
|
||||
<img v-if="!participant.actor.avatarUrl"
|
||||
class="img-circle elevation-7 mb-1"
|
||||
src="https://picsum.photos/125/125/"
|
||||
>
|
||||
<img v-else
|
||||
class="img-circle elevation-7 mb-1"
|
||||
:src="participant.actor.avatarUrl"
|
||||
>
|
||||
</v-avatar>
|
||||
<v-card-title>
|
||||
<span>{{ participant.actor.preferredUsername }}</span>
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
</router-link>
|
||||
</v-flex> -->
|
||||
</v-flex>
|
||||
<span v-if="event.participants.length === 0">No participants yet.</span>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { FETCH_EVENT } from '@/graphql/event';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VueMarkdown,
|
||||
},
|
||||
apollo: {
|
||||
event: {
|
||||
query: FETCH_EVENT,
|
||||
variables() {
|
||||
return {
|
||||
uuid: this.uuid,
|
||||
};
|
||||
},
|
||||
},
|
||||
// loggedActor: {
|
||||
// query: LOGGED_ACTOR,
|
||||
// }
|
||||
},
|
||||
})
|
||||
export default class Event extends Vue {
|
||||
@Prop({ type: String, required: true }) uuid!: string;
|
||||
|
||||
event = {
|
||||
name: '',
|
||||
slug: '',
|
||||
title: '',
|
||||
uuid: this.uuid,
|
||||
description: '',
|
||||
organizer: {
|
||||
id: null,
|
||||
username: null,
|
||||
},
|
||||
participants: [],
|
||||
};
|
||||
|
||||
deleteEvent() {
|
||||
const router = this.$router;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
|
||||
// .then(() => router.push({ name: 'EventList' }));
|
||||
}
|
||||
|
||||
joinEvent() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// console.log(data);
|
||||
// });
|
||||
}
|
||||
|
||||
leaveEvent() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}/leave`, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// console.log(data);
|
||||
// });
|
||||
}
|
||||
|
||||
downloadIcsEvent() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
// .then(response => response.text())
|
||||
// .then((response) => {
|
||||
// const blob = new Blob([ response ], { type: 'text/calendar' });
|
||||
// const link = document.createElement('a');
|
||||
// link.href = window.URL.createObjectURL(blob);
|
||||
// link.download = `${this.event.title}.ics`;
|
||||
// document.body.appendChild(link);
|
||||
// link.click();
|
||||
// document.body.removeChild(link);
|
||||
// });
|
||||
}
|
||||
|
||||
// actorIsParticipant() {
|
||||
// return this.loggedActor && this.event.participants.map(participant => participant.actor.preferredUsername).includes(this.loggedActor.preferredUsername) || this.actorIsOrganizer();
|
||||
// }
|
||||
//
|
||||
// actorIsOrganizer() {
|
||||
// return this.loggedActor && this.loggedActor.preferredUsername === this.event.organizer.preferredUsername;
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style>
|
||||
.v-card__media__background {
|
||||
filter: contrast(0.4);
|
||||
}
|
||||
</style>
|
||||
44
js/src/components/Event/EventCard.vue
Normal file
44
js/src/components/Event/EventCard.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-image" v-if="!event.image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="https://picsum.photos/g/400/200/">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<router-link :to="{ name: 'Event', params:{ uuid: event.uuid } }">
|
||||
<h2 class="title">{{ event.title }}</h2>
|
||||
</router-link>
|
||||
<span>{{ event.begins_on | formatDay }}</span>
|
||||
</div>
|
||||
<div v-if="!hideDetails">
|
||||
<div v-if="event.participants.length === 1">
|
||||
<translate
|
||||
:translate-params="{name: event.participants[0].actor.preferredUsername}"
|
||||
>%{name} organizes this event</translate>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-for="participant in event.participants" :key="participant.actor.uuid">
|
||||
{{ participant.actor.preferredUsername }}
|
||||
<span v-if="participant.role === 4">(organizer)</span>,
|
||||
<!-- <translate
|
||||
:translate-params="{name: participant.actor.preferredUsername}"
|
||||
> %{name} is in,</translate>-->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { IEvent } from "@/types/event.model";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class EventCard extends Vue {
|
||||
@Prop({ required: true }) event!: IEvent;
|
||||
@Prop({ default: false }) hideDetails!: boolean;
|
||||
}
|
||||
</script>
|
||||
@@ -1,150 +0,0 @@
|
||||
<template>
|
||||
<v-layout>
|
||||
<v-flex xs12 sm8 offset-sm2>
|
||||
<v-card>
|
||||
<h1>{{ $t('event.list.title') }}</h1>
|
||||
|
||||
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
||||
<v-chip close v-model="locationChip" label color="pink" text-color="white" v-if="$router.currentRoute.params.location">
|
||||
<v-icon left>location_city</v-icon>
|
||||
{{ locationText }}
|
||||
</v-chip>
|
||||
<v-container grid-list-sm fluid>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs4 v-for="event in events" :key="event.id">
|
||||
<v-card>
|
||||
<v-card-media v-if="!event.image"
|
||||
class="white--text"
|
||||
height="200px"
|
||||
src="https://picsum.photos/g/400/200/"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<span class="headline black--text">{{ event.title }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-media>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<span class="grey--text">{{ event.begins_on | formatDate }}</span><br>
|
||||
<router-link :to="{name: 'Account', params: { name: event.organizer.username } }">
|
||||
<v-avatar size="25px">
|
||||
<img class="img-circle elevation-7 mb-1"
|
||||
:src="event.organizer.avatar"
|
||||
>
|
||||
</v-avatar>
|
||||
</router-link>
|
||||
<span v-if="event.organizer">Organisé par <router-link
|
||||
:to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
|
||||
<v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
|
||||
<v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import ngeohash from 'ngeohash';
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VCardTitle: VCardTitle as any,
|
||||
VueMarkdown,
|
||||
},
|
||||
})
|
||||
export default class EventList extends Vue {
|
||||
@Prop(String) location!: string;
|
||||
|
||||
events = [];
|
||||
loading = true;
|
||||
locationChip = false;
|
||||
locationText = '';
|
||||
|
||||
created() {
|
||||
this.fetchData(this.$router.currentRoute.params[ 'location' ]);
|
||||
}
|
||||
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
this.fetchData(to.params.location);
|
||||
next();
|
||||
}
|
||||
|
||||
@Watch('locationChip')
|
||||
onLocationChipChange(val) {
|
||||
if (val === false) {
|
||||
this.$router.push({ name: 'EventList' });
|
||||
}
|
||||
}
|
||||
|
||||
geocode(lat, lon) {
|
||||
console.log({ lat, lon });
|
||||
console.log(ngeohash.encode(lat, lon, 10));
|
||||
return ngeohash.encode(lat, lon, 10);
|
||||
}
|
||||
|
||||
fetchData(location) {
|
||||
let queryString = '/events';
|
||||
if (location) {
|
||||
queryString += (`?geohash=${location}`);
|
||||
const { latitude, longitude } = ngeohash.decode(location);
|
||||
this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
|
||||
}
|
||||
this.locationChip = true;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(queryString, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.loading = false;
|
||||
// this.events = response.data;
|
||||
// console.log(this.events);
|
||||
// });
|
||||
}
|
||||
|
||||
deleteEvent(event) {
|
||||
const router = this.$router;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
|
||||
// .then(() => router.push('/events'));
|
||||
}
|
||||
|
||||
viewEvent(event) {
|
||||
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
|
||||
}
|
||||
|
||||
downloadIcsEvent(event) {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
// .then(response => response.text())
|
||||
// .then((response) => {
|
||||
// const blob = new Blob([ response ], { type: 'text/calendar' });
|
||||
// const link = document.createElement('a');
|
||||
// link.href = window.URL.createObjectURL(blob);
|
||||
// link.download = `${event.title}.ics`;
|
||||
// document.body.appendChild(link);
|
||||
// link.click();
|
||||
// document.body.removeChild(link);
|
||||
// });
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<h3>Create a new group</h3>
|
||||
<v-form>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-text-field
|
||||
label="Title"
|
||||
v-model="group.preferred_username"
|
||||
:counter="100"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-text-field
|
||||
label="Title"
|
||||
v-model="group.name"
|
||||
:counter="100"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex md6>
|
||||
<v-text-field
|
||||
label="Description"
|
||||
v-model="group.summary"
|
||||
multiLine
|
||||
required
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex md6>
|
||||
<vue-markdown class="markdown-render"
|
||||
:watches="['show','html','breaks','linkify','emoji','typographer','toc']"
|
||||
:source="group.summary"
|
||||
:show="true" :html="false" :breaks="true" :linkify="true"
|
||||
:emoji="true" :typographer="true" :toc="false"
|
||||
></vue-markdown>
|
||||
</v-flex>
|
||||
<!--<v-flex md12>-->
|
||||
<!--<vuetify-google-autocomplete-->
|
||||
<!--id="map"-->
|
||||
<!--append-icon="search"-->
|
||||
<!--classname="form-control"-->
|
||||
<!--placeholder="Start typing"-->
|
||||
<!--enable-geolocation-->
|
||||
<!--v-on:placechanged="getAddressData"-->
|
||||
<!-->-->
|
||||
<!--</vuetify-google-autocomplete>-->
|
||||
<!--</v-flex>-->
|
||||
<!--<v-flex md12>-->
|
||||
<!--<v-select-->
|
||||
<!--v-bind:items="categories"-->
|
||||
<!--v-model="group.category"-->
|
||||
<!--item-text="title"-->
|
||||
<!--item-value="@id"-->
|
||||
<!--label="Categories"-->
|
||||
<!--single-line-->
|
||||
<!--bottom-->
|
||||
<!--types="(cities)"-->
|
||||
<!--></v-select>-->
|
||||
<!--</v-flex>-->
|
||||
</v-layout>
|
||||
</v-form>
|
||||
<v-btn color="primary" @click="create">Create group</v-btn>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VueMarkdown,
|
||||
VuetifyGoogleAutocomplete,
|
||||
},
|
||||
})
|
||||
export default class CreateGroup extends Vue {
|
||||
e1 = 0;
|
||||
// FIXME: correctly type group
|
||||
group: { preferred_username: string, name: string, summary: string, address?: any } = {
|
||||
preferred_username: '',
|
||||
name: '',
|
||||
summary: '',
|
||||
// category: null,
|
||||
};
|
||||
categories = [];
|
||||
|
||||
mounted() {
|
||||
this.fetchCategories();
|
||||
}
|
||||
|
||||
create() {
|
||||
// this.group.organizer = "/accounts/" + this.$store.state.user.id;
|
||||
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// this.loading = false;
|
||||
// this.$router.push({ path: 'Group', params: { id: data.id } });
|
||||
// });
|
||||
}
|
||||
|
||||
fetchCategories() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch('/categories', this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// this.loading = false;
|
||||
// this.categories = data.data;
|
||||
// });
|
||||
}
|
||||
|
||||
getAddressData(addressData) {
|
||||
this.group.address = {
|
||||
geo: {
|
||||
latitude: addressData.latitude,
|
||||
longitude: addressData.longitude,
|
||||
},
|
||||
addressCountry: addressData.country,
|
||||
addressLocality: addressData.city,
|
||||
addressRegion: addressData.administrative_area_level_1,
|
||||
postalCode: addressData.postal_code,
|
||||
streetAddress: `${addressData.street_number} ${addressData.route}`,
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.markdown-render h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,241 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-layout row>
|
||||
<v-flex xs12 sm6 offset-sm3>
|
||||
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
||||
<v-card v-if="!loading">
|
||||
<v-card-media :src="group.banner" height="400px">
|
||||
<v-layout column class="media">
|
||||
<v-card-title>
|
||||
<v-btn icon @click="$router.go(-1)">
|
||||
<v-icon>chevron_left</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<!--<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.actor.id === actor.id">-->
|
||||
<!--<v-icon>edit</v-icon>-->
|
||||
<!--</v-btn>-->
|
||||
<v-btn icon>
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<div class="text-xs-center">
|
||||
<v-avatar size="125px">
|
||||
<img v-if="!group.avatar"
|
||||
class="img-circle elevation-7 mb-1"
|
||||
src="https://picsum.photos/125/125/"
|
||||
>
|
||||
<img v-else
|
||||
class="img-circle elevation-7 mb-1"
|
||||
:src="group.avatar"
|
||||
>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<v-container fluid grid-list-lg>
|
||||
<v-layout row>
|
||||
<v-flex xs7>
|
||||
<div class="headline">{{ group.display_name }}</div>
|
||||
<div>
|
||||
<span class="subheading">
|
||||
~{{ group.username }}
|
||||
<span v-if="group.domain">
|
||||
@{{ group.domain }}
|
||||
</span>
|
||||
</span>
|
||||
<v-chip color="indigo" text-color="white">
|
||||
<v-avatar>
|
||||
<v-icon>group</v-icon>
|
||||
</v-avatar>
|
||||
Group
|
||||
</v-chip>
|
||||
</div>
|
||||
<v-card-text v-if="group.description" v-html="group.description"></v-card-text>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-layout>
|
||||
</v-card-media>
|
||||
<v-list three-line>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">phone</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>(323) 555-6789</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Work</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-action>
|
||||
<v-icon dark>chat</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">mail</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>ali_connors@example.com</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Work</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">location_on</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>1400 Main Street</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Orlando, FL 79938</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
<v-container fluid grid-list-md v-if="group.members.length > 0">
|
||||
<v-subheader>Membres</v-subheader>
|
||||
<v-layout row>
|
||||
<v-flex xs2 v-for="member in group.members" :key="member.actor.username">
|
||||
<router-link :to="{name: 'Account', params: { name: member.actor.username } }">
|
||||
<v-badge overlap>
|
||||
<span slot="badge" v-if="member.role === 1"><v-icon>star_half</v-icon></span>
|
||||
<span slot="badge" v-if="member.role === 2"><v-icon>star</v-icon></span>
|
||||
<v-avatar size="75px">
|
||||
<img v-if="!member.actor.avatar"
|
||||
class="img-circle elevation-7 mb-1"
|
||||
src="https://picsum.photos/125/125/"
|
||||
>
|
||||
<img v-else
|
||||
class="img-circle elevation-7 mb-1"
|
||||
:src="member.actor.avatar"
|
||||
>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
</router-link>
|
||||
<span>{{ member.actor.username }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-container fluid grid-list-md v-if="group.participatingEvents && group.participatingEvents.length > 0">
|
||||
<v-subheader>Participated at</v-subheader>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="event in group.participatingEvents" :key="event.id">
|
||||
<v-card>
|
||||
<v-card-media
|
||||
class="black--text"
|
||||
height="200px"
|
||||
src="https://picsum.photos/400/200/"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<span class="headline">{{ event.title }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-media>
|
||||
<v-card-title>
|
||||
<div>
|
||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-if="event.organizer">Organisé par
|
||||
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-container fluid grid-list-md v-if="group.organizingEvents && group.organizingEvents.length > 0">
|
||||
<v-subheader>Organized events</v-subheader>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="event in group.organizingEvents" :key="event.id">
|
||||
<v-card>
|
||||
<v-card-media
|
||||
class="black--text"
|
||||
height="200px"
|
||||
src="https://picsum.photos/400/200/"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<span class="headline">{{ event.title }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-media>
|
||||
<v-card-title>
|
||||
<div>
|
||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-if="event.organizer">Organisé par
|
||||
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class Group extends Vue {
|
||||
@Prop({ type: String, required: true }) name!: string;
|
||||
|
||||
group = null;
|
||||
loading = true;
|
||||
|
||||
created() {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
@Watch('$route')
|
||||
onRouteChanged() {
|
||||
// call again the method if the route changes
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/actors/${this.name}`, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.group = response.data;
|
||||
// this.loading = false;
|
||||
// console.log(this.group);
|
||||
// });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
30
js/src/components/Group/GroupCard.vue
Normal file
30
js/src/components/Group/GroupCard.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-image" v-if="!group.bannerUrl">
|
||||
<figure class="image is-4by3">
|
||||
<img src="https://picsum.photos/g/400/200/">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<router-link :to="{ name: 'Group', params:{ uuid: group.uuid } }">
|
||||
<h2 class="title">{{ group.name ? group.name : group.preferredUsername }}</h2>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-if="!hideDetails">
|
||||
<p>{{ group.summary }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { IGroup } from "../../types/actor.model";
|
||||
|
||||
@Component
|
||||
export default class GroupCard extends Vue {
|
||||
@Prop({ required: true }) group!: IGroup;
|
||||
@Prop({ default: false }) hideDetails!: boolean;
|
||||
}
|
||||
</script>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<h1>Group List</h1>
|
||||
|
||||
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
||||
<v-layout row wrap justify-space-around>
|
||||
<v-flex xs12 md3 v-for="group in groups" :key="group.id">
|
||||
<v-card>
|
||||
<v-card-media
|
||||
class="black--text"
|
||||
height="200px"
|
||||
src="https://picsum.photos/400/200/"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<span class="headline">{{ group.username }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-media>
|
||||
<v-card-title>
|
||||
<div>
|
||||
<p>{{ group.summary }}</p>
|
||||
<p v-if="group.organizer">Organisé par
|
||||
<router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn flat color="green" @click="joinGroup(group)">
|
||||
<v-icon v-if="group.locked">lock</v-icon>
|
||||
Join
|
||||
</v-btn>
|
||||
<v-btn flat color="orange" @click="viewActor(group)">Explore</v-btn>
|
||||
<v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<router-link :to="{ name: 'CreateGroup' }" class="btn btn-default">Create</router-link>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class GroupList extends Vue {
|
||||
groups = [];
|
||||
loading = true;
|
||||
|
||||
created() {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
usernameWithDomain(actor) {
|
||||
return actor.username + (actor.domain === null ? '' : `@${actor.domain}`);
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch('/groups', this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// console.log(data);
|
||||
// this.loading = false;
|
||||
// this.groups = data.data;
|
||||
// });
|
||||
}
|
||||
|
||||
deleteGroup(group) {
|
||||
const router = this.$router;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/groups/${this.usernameWithDomain(group)}`, this.$store, { method: 'DELETE' })
|
||||
// .then(response => response.json())
|
||||
// .then(() => router.push('/groups'));
|
||||
}
|
||||
|
||||
viewActor(actor) {
|
||||
this.$router.push({ name: 'Group', params: { name: this.usernameWithDomain(actor) } });
|
||||
}
|
||||
|
||||
joinGroup(group) {
|
||||
const router = this.$router;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/groups/${this.usernameWithDomain(group)}/join`, this.$store, { method: 'POST' })
|
||||
// .then(response => response.json())
|
||||
// .then(() => router.push({ name: 'Group', params: { name: this.usernameWithDomain(group) } }));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,178 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-img
|
||||
:gradient="gradient"
|
||||
src="https://picsum.photos/1200/900"
|
||||
dark
|
||||
height="300"
|
||||
v-if="!currentUser.id"
|
||||
>
|
||||
<v-container fill-height>
|
||||
<v-layout align-center>
|
||||
<v-flex text-xs-center>
|
||||
<h1 class="display-3">Find events you like</h1>
|
||||
<h2>Share it with Mobilizon</h2>
|
||||
<v-btn :to="{ name: 'Register' }">
|
||||
<translate>Register</translate>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-img>
|
||||
<v-layout v-else>
|
||||
<v-flex xs12 sm8 offset-sm2>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 sm6>
|
||||
<h1>
|
||||
<translate :translate-params="{username: actor.preferredUsername}">Welcome back %{username}</translate>
|
||||
</h1>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6>
|
||||
<v-layout align-center>
|
||||
<span class="events-nearby title">Events nearby </span>
|
||||
<v-text-field
|
||||
solo
|
||||
append-icon="place"
|
||||
:value="ipLocation()"
|
||||
></v-text-field>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<div v-if="$apollo.loading">
|
||||
Still loading
|
||||
</div>
|
||||
<v-card v-if="events.length > 0">
|
||||
<v-layout row wrap>
|
||||
<v-flex md4 v-for="event in events" :key="event.uuid">
|
||||
<v-card :to="{ name: 'Event', params:{ uuid: event.uuid } }">
|
||||
<v-img v-if="!event.image"
|
||||
class="white--text"
|
||||
height="200px"
|
||||
src="https://picsum.photos/g/400/200/"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<span class="headline black--text">{{ event.title }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-img>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<span class="grey--text">{{ event.begins_on | formatDay }}</span><br>
|
||||
<router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
|
||||
<v-avatar size="25px">
|
||||
<img class="img-circle elevation-7 mb-1"
|
||||
:src="event.organizerActor.avatarUrl"
|
||||
>
|
||||
</v-avatar>
|
||||
</router-link>
|
||||
<span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span>
|
||||
</div>
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<v-alert v-else :value="true" type="error">
|
||||
No events found
|
||||
</v-alert>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import ngeohash from 'ngeohash';
|
||||
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
||||
import { FETCH_EVENTS } from '@/graphql/event';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { ICurrentUser } from '@/types/current-user.model';
|
||||
import { CURRENT_USER_CLIENT } from '@/graphql/user';
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
events: {
|
||||
query: FETCH_EVENTS,
|
||||
},
|
||||
currentUser: {
|
||||
query: CURRENT_USER_CLIENT,
|
||||
},
|
||||
},
|
||||
})
|
||||
export default class Home extends Vue {
|
||||
gradient = 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)';
|
||||
searchTerm = null;
|
||||
location_field = {
|
||||
loading: false,
|
||||
search: null,
|
||||
};
|
||||
events = [];
|
||||
locations = [];
|
||||
city = { name: null };
|
||||
country = { name: null };
|
||||
// FIXME: correctly parse local storage
|
||||
actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}');
|
||||
currentUser!: ICurrentUser;
|
||||
|
||||
get displayed_name() {
|
||||
return this.actor.name === null ? this.actor.preferredUsername : this.actor.name;
|
||||
}
|
||||
|
||||
fetchLocations() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch('/locations', this.$store)
|
||||
// .then(response => (response.json()))
|
||||
// .then((response) => {
|
||||
// this.locations = response;
|
||||
// });
|
||||
}
|
||||
|
||||
geoLocalize() {
|
||||
const router = this.$router;
|
||||
const sessionCity = sessionStorage.getItem('City');
|
||||
if (sessionCity) {
|
||||
router.push({ name: 'EventList', params: { location: sessionCity } });
|
||||
} else {
|
||||
navigator.geolocation.getCurrentPosition((pos) => {
|
||||
const crd = pos.coords;
|
||||
|
||||
const geohash = ngeohash.encode(crd.latitude, crd.longitude, 11);
|
||||
sessionStorage.setItem('City', geohash);
|
||||
router.push({ name: 'EventList', params: { location: geohash } });
|
||||
}, err => console.warn(`ERROR(${err.code}): ${err.message}`), {
|
||||
enableHighAccuracy: true,
|
||||
timeout: 5000,
|
||||
maximumAge: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getAddressData(addressData) {
|
||||
const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11);
|
||||
sessionStorage.setItem('City', geohash);
|
||||
this.$router.push({ name: 'EventList', params: { location: geohash } });
|
||||
}
|
||||
|
||||
viewEvent(event) {
|
||||
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
|
||||
}
|
||||
|
||||
ipLocation() {
|
||||
return this.city.name ? this.city.name : this.country.name;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.search-autocomplete {
|
||||
border: 1px solid #dbdbdb;
|
||||
color: rgba(0, 0, 0, .87);
|
||||
}
|
||||
|
||||
.events-nearby {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!--<gmap-autocomplete :value="description" @input="setPlace"
|
||||
@place_changed="setPlace">
|
||||
</gmap-autocomplete>
|
||||
<br />
|
||||
|
||||
<gmap-map
|
||||
:center="center"
|
||||
:zoom="15"
|
||||
style="width: 500px; height: 300px"
|
||||
>
|
||||
<gmap-marker
|
||||
:key="index"
|
||||
v-for="(m, index) in markers"
|
||||
:position="m.position"
|
||||
:clickable="true"
|
||||
:draggable="true"
|
||||
@click="center=m.position"
|
||||
></gmap-marker>
|
||||
</gmap-map>-->
|
||||
{{ center.lat }} - {{ center.lng }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class Location extends Vue {
|
||||
@Prop(String) address!: string;
|
||||
|
||||
description = 'Paris, France';
|
||||
center = { lat: 48.85, lng: 2.35 };
|
||||
markers: any[] = [];
|
||||
|
||||
setPlace(place) {
|
||||
this.center = {
|
||||
lat: place.geometry.location.lat(),
|
||||
lng: place.geometry.location.lng(),
|
||||
};
|
||||
this.markers = [ {
|
||||
position: { lat: this.center.lat, lng: this.center.lng },
|
||||
} ];
|
||||
|
||||
this.$emit('input', place.formatted_address);
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
@@ -1,110 +1,56 @@
|
||||
<template>
|
||||
<v-toolbar
|
||||
class="blue darken-3"
|
||||
dark
|
||||
app
|
||||
:clipped-left="$vuetify.breakpoint.lgAndUp"
|
||||
fixed
|
||||
>
|
||||
<v-toolbar-title style="width: 300px" class="ml-0 pl-3 white--text">
|
||||
<v-toolbar-side-icon @click.stop="toggleDrawer()"></v-toolbar-side-icon>
|
||||
<router-link :to="{ name: 'Home' }" class="hidden-sm-and-down white--text">Mobilizon
|
||||
</router-link>
|
||||
</v-toolbar-title>
|
||||
<v-autocomplete
|
||||
:loading="$apollo.loading"
|
||||
flat
|
||||
solo-inverted
|
||||
prepend-icon="search"
|
||||
:label="$gettext('Search')"
|
||||
required
|
||||
item-text="label"
|
||||
class="hidden-sm-and-down"
|
||||
:items="items"
|
||||
:search-input.sync="searchText"
|
||||
@keyup.enter="enter"
|
||||
v-model="model"
|
||||
return-object
|
||||
>
|
||||
<template slot="item" slot-scope="data">
|
||||
<!-- <div>{{ data }}</div> -->
|
||||
<v-list-tile v-if="data.item.__typename === 'Event'">
|
||||
<v-list-tile-avatar>
|
||||
<v-icon>event</v-icon>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content v-text="data.item.label"></v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile v-else-if="data.item.__typename === 'Actor'">
|
||||
<v-list-tile-avatar>
|
||||
<img :src="data.item.avatarUrl" v-if="data.item.avatarUrl">
|
||||
<v-icon v-else>account_circle</v-icon>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title v-html="username_with_domain(data.item)"></v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
<v-spacer></v-spacer>
|
||||
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<router-link class="navbar-item" :to="{ name: 'Home' }">Mobilizon</router-link>
|
||||
|
||||
<span v-if="currentUser.id" @click="logout()">Logout</span>
|
||||
|
||||
<v-menu
|
||||
offset-y
|
||||
:close-on-content-click="false"
|
||||
:nudge-width="200"
|
||||
v-model="notificationMenu"
|
||||
v-if="currentUser.id"
|
||||
>
|
||||
<v-btn icon slot="activator">
|
||||
<v-badge left color="red">
|
||||
<span slot="badge">{{ notifications.length }}</span>
|
||||
<v-icon>notifications</v-icon>
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
<v-card>
|
||||
<v-list two-line>
|
||||
<template v-for="item in notifications">
|
||||
<v-subheader v-if="item.header" v-text="item.header" v-bind:key="item.header"></v-subheader>
|
||||
<v-divider v-else-if="item.divider" v-bind:inset="item.inset" v-bind:key="item.inset"></v-divider>
|
||||
<v-list-tile avatar v-else v-bind:key="item.title">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title v-html="item.title"></v-list-tile-title>
|
||||
<v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
</v-list>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat @click="notificationMenu = false">
|
||||
<translate>Close</translate>
|
||||
</v-btn>
|
||||
<v-btn color="primary" flat @click="notificationMenu = false">
|
||||
<translate>Save</translate>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
<v-btn v-if="!currentUser.id" :to="{ name: 'Login' }">
|
||||
<translate>Login</translate>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navbarBasicExample"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<router-link class="button is-primary" v-if="!currentUser.id" :to="{ name: 'Register' }">
|
||||
<strong>
|
||||
<translate>Sign up</translate>
|
||||
</strong>
|
||||
</router-link>
|
||||
<router-link class="button is-light" v-if="!currentUser.id" :to="{ name: 'Login' }">
|
||||
<translate>Log in</translate>
|
||||
</router-link>
|
||||
<router-link
|
||||
class="button is-light"
|
||||
v-if="currentUser.id"
|
||||
:to="{ name: 'Profile', params: { name: loggedPerson.preferredUsername} }"
|
||||
>
|
||||
<figure class="image is-24x24">
|
||||
<img :src="loggedPerson.avatarUrl">
|
||||
</figure>
|
||||
<span>{{ loggedPerson.preferredUsername }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
nav.v-toolbar .v-input__slot {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
import { AUTH_USER_ACTOR } from '@/constants';
|
||||
import { SEARCH } from '@/graphql/search';
|
||||
import { CURRENT_USER_CLIENT } from '@/graphql/user';
|
||||
import { onLogout } from '@/vue-apollo';
|
||||
import { deleteUserData } from '@/utils/auth';
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
import { AUTH_USER_ACTOR } from '@/constants';
|
||||
import { SEARCH } from '@/graphql/search';
|
||||
import { CURRENT_USER_CLIENT } from '@/graphql/user';
|
||||
import { onLogout } from '@/vue-apollo';
|
||||
import { deleteUserData } from '@/utils/auth';
|
||||
import { LOGGED_PERSON } from "@/graphql/actor";
|
||||
import { IPerson } from "../types/actor.model";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
@@ -121,30 +67,32 @@
|
||||
},
|
||||
currentUser: {
|
||||
query: CURRENT_USER_CLIENT
|
||||
},
|
||||
loggedPerson: {
|
||||
query: LOGGED_PERSON
|
||||
}
|
||||
},
|
||||
})
|
||||
export default class NavBar extends Vue {
|
||||
@Prop({ required: true, type: Function }) toggleDrawer!: Function;
|
||||
|
||||
notificationMenu = false;
|
||||
notifications = [
|
||||
{ header: 'Coucou' },
|
||||
{ title: 'T\'as une notification', subtitle: 'Et elle est cool' },
|
||||
{ header: "Coucou" },
|
||||
{ title: "T'as une notification", subtitle: "Et elle est cool" }
|
||||
];
|
||||
model = null;
|
||||
search: any[] = [];
|
||||
searchText: string | null = null;
|
||||
searchSelect = null;
|
||||
actor = localStorage.getItem(AUTH_USER_ACTOR);
|
||||
loggedPerson!: IPerson;
|
||||
|
||||
get items() {
|
||||
return this.search.map(searchEntry => {
|
||||
switch (searchEntry.__typename) {
|
||||
case 'Actor':
|
||||
searchEntry.label = searchEntry.preferredUsername + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
|
||||
case "Actor":
|
||||
searchEntry.label =
|
||||
searchEntry.preferredUsername +
|
||||
(searchEntry.domain === null ? "" : `@${searchEntry.domain}`);
|
||||
break;
|
||||
case 'Event':
|
||||
case "Event":
|
||||
searchEntry.label = searchEntry.title;
|
||||
break;
|
||||
}
|
||||
@@ -152,25 +100,31 @@ export default class NavBar extends Vue {
|
||||
});
|
||||
}
|
||||
|
||||
@Watch('model')
|
||||
@Watch("model")
|
||||
onModelChanged(val) {
|
||||
switch (val.__typename) {
|
||||
case 'Event':
|
||||
this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
|
||||
case "Event":
|
||||
this.$router.push({ name: "Event", params: { uuid: val.uuid } });
|
||||
break;
|
||||
case 'Actor':
|
||||
this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
|
||||
case "Actor":
|
||||
this.$router.push({
|
||||
name: "Profile",
|
||||
params: { name: this.username_with_domain(val) }
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
username_with_domain(actor) {
|
||||
return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
|
||||
return (
|
||||
actor.preferredUsername +
|
||||
(actor.domain === null ? "" : `@${actor.domain}`)
|
||||
);
|
||||
}
|
||||
|
||||
enter() {
|
||||
console.log('enter');
|
||||
this.$apollo.queries['search'].refetch();
|
||||
console.log("enter");
|
||||
this.$apollo.queries["search"].refetch();
|
||||
}
|
||||
|
||||
logout() {
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-layout row>
|
||||
<v-flex xs12 sm6 offset-sm3>
|
||||
<h1>404 !</h1>
|
||||
<img src="../assets/oh_no.jpg" />
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
Reference in New Issue
Block a user