Merge branch 'feature/typescript' into 'master'
Migration to typescript: first step See merge request framasoft/mobilizon!33
This commit is contained in:
commit
eaa4c347ca
@ -1,7 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
extends: [
|
|
||||||
'plugin:vue/essential',
|
|
||||||
'@vue/airbnb',
|
|
||||||
],
|
|
||||||
};
|
|
1253
js/package-lock.json
generated
1253
js/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,16 +2,13 @@
|
|||||||
"name": "mobilizon",
|
"name": "mobilizon",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"engines": {
|
|
||||||
"node": ">=10.0.0"
|
|
||||||
},
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vue-cli-service serve",
|
|
||||||
"build": "vue-cli-service build --modern",
|
"build": "vue-cli-service build --modern",
|
||||||
"lint": "vue-cli-service lint",
|
"lint": "vue-cli-service lint",
|
||||||
|
"analyze-bundle": "npm run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json",
|
||||||
|
"dev": "vue-cli-service serve",
|
||||||
"test:e2e": "vue-cli-service test:e2e",
|
"test:e2e": "vue-cli-service test:e2e",
|
||||||
"test:unit": "vue-cli-service test:unit",
|
"test:unit": "vue-cli-service test:unit"
|
||||||
"analyze-bundle": "npm run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"apollo-absinthe-upload-link": "^1.4.0",
|
"apollo-absinthe-upload-link": "^1.4.0",
|
||||||
@ -22,31 +19,37 @@
|
|||||||
"graphql-tag": "^2.9.0",
|
"graphql-tag": "^2.9.0",
|
||||||
"material-design-icons": "^3.0.1",
|
"material-design-icons": "^3.0.1",
|
||||||
"moment": "^2.22.2",
|
"moment": "^2.22.2",
|
||||||
"ngeohash": "^0.6.0",
|
"ngeohash": "^0.6.3",
|
||||||
"register-service-worker": "^1.4.1",
|
"register-service-worker": "^1.4.1",
|
||||||
"vue": "^2.5.17",
|
"vue": "^2.5.17",
|
||||||
"vue-apollo": "^3.0.0-beta.26",
|
"vue-apollo": "^3.0.0-beta.26",
|
||||||
|
"vue-class-component": "^6.3.2",
|
||||||
"vue-gettext": "^2.1.1",
|
"vue-gettext": "^2.1.1",
|
||||||
"vue-gravatar": "^1.3.0",
|
"vue-gravatar": "^1.3.0",
|
||||||
"vue-markdown": "^2.2.4",
|
"vue-markdown": "^2.2.4",
|
||||||
|
"vue-property-decorator": "^7.2.0",
|
||||||
"vue-router": "^3.0.2",
|
"vue-router": "^3.0.2",
|
||||||
"vuetify": "^1.3.9",
|
"vuetify": "^1.3.9",
|
||||||
"vuetify-google-autocomplete": "^2.0.0-beta.5",
|
"vuetify-google-autocomplete": "^2.0.0-beta.5",
|
||||||
"vuex": "^3.0.1"
|
"vuex": "^3.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@types/chai": "^4.1.0",
|
||||||
|
"@types/mocha": "^5.2.4",
|
||||||
"@vue/cli-plugin-babel": "^3.1.1",
|
"@vue/cli-plugin-babel": "^3.1.1",
|
||||||
"@vue/cli-plugin-e2e-nightwatch": "^3.1.1",
|
"@vue/cli-plugin-e2e-nightwatch": "^3.1.1",
|
||||||
"@vue/cli-plugin-eslint": "^3.1.5",
|
|
||||||
"@vue/cli-plugin-pwa": "^3.1.2",
|
"@vue/cli-plugin-pwa": "^3.1.2",
|
||||||
|
"@vue/cli-plugin-typescript": "^3.2.0",
|
||||||
"@vue/cli-plugin-unit-mocha": "^3.1.1",
|
"@vue/cli-plugin-unit-mocha": "^3.1.1",
|
||||||
"@vue/cli-service": "^3.1.4",
|
"@vue/cli-service": "^3.1.4",
|
||||||
"@vue/eslint-config-airbnb": "^3.0.5",
|
"@vue/eslint-config-typescript": "^3.1.0",
|
||||||
"@vue/test-utils": "^1.0.0-beta.26",
|
"@vue/test-utils": "^1.0.0-beta.26",
|
||||||
"chai": "^4.2.0",
|
"chai": "^4.2.0",
|
||||||
"dotenv-webpack": "^1.5.7",
|
"dotenv-webpack": "^1.5.7",
|
||||||
"node-sass": "^4.10.0",
|
"node-sass": "^4.10.0",
|
||||||
"sass-loader": "^7.1.0",
|
"sass-loader": "^7.1.0",
|
||||||
|
"tslint-config-airbnb": "^5.11.1",
|
||||||
|
"typescript": "^3.0.0",
|
||||||
"vue-cli-plugin-apollo": "^0.17.4",
|
"vue-cli-plugin-apollo": "^0.17.4",
|
||||||
"vue-template-compiler": "^2.5.17",
|
"vue-template-compiler": "^2.5.17",
|
||||||
"webpack-bundle-analyzer": "^3.0.3"
|
"webpack-bundle-analyzer": "^3.0.3"
|
||||||
@ -55,5 +58,8 @@
|
|||||||
"> 1%",
|
"> 1%",
|
||||||
"last 2 versions",
|
"last 2 versions",
|
||||||
"not ie <= 8"
|
"not ie <= 8"
|
||||||
]
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.0.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
154
js/src/App.vue
154
js/src/App.vue
@ -14,15 +14,15 @@
|
|||||||
>
|
>
|
||||||
<v-list-tile avatar v-if="actor" slot="activator">
|
<v-list-tile avatar v-if="actor" slot="activator">
|
||||||
<v-list-tile-avatar>
|
<v-list-tile-avatar>
|
||||||
<img v-if="!actor.avatar"
|
<img v-if="!actor.avatar"
|
||||||
class="img-circle elevation-7 mb-1"
|
class="img-circle elevation-7 mb-1"
|
||||||
src="https://picsum.photos/125/125/"
|
src="https://picsum.photos/125/125/"
|
||||||
>
|
>
|
||||||
<img v-else
|
<img v-else
|
||||||
class="img-circle elevation-7 mb-1"
|
class="img-circle elevation-7 mb-1"
|
||||||
:src="actor.avatar"
|
:src="actor.avatar"
|
||||||
>
|
>
|
||||||
</v-list-tile-avatar>
|
</v-list-tile-avatar>
|
||||||
|
|
||||||
<v-list-tile-content @click="$router.push({name: 'Account', params: { name: actor.username }})">
|
<v-list-tile-content @click="$router.push({name: 'Account', params: { name: actor.username }})">
|
||||||
<v-list-tile-title>{{ this.displayed_name }}</v-list-tile-title>
|
<v-list-tile-title>{{ this.displayed_name }}</v-list-tile-title>
|
||||||
@ -31,11 +31,11 @@
|
|||||||
|
|
||||||
<v-list-tile avatar v-if="actor">
|
<v-list-tile avatar v-if="actor">
|
||||||
<v-list-tile-avatar>
|
<v-list-tile-avatar>
|
||||||
<img
|
<img
|
||||||
class="img-circle elevation-7 mb-1"
|
class="img-circle elevation-7 mb-1"
|
||||||
src="https://picsum.photos/125/125/"
|
src="https://picsum.photos/125/125/"
|
||||||
>
|
>
|
||||||
</v-list-tile-avatar>
|
</v-list-tile-avatar>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-tile-content>
|
||||||
<v-list-tile-title>Autre identité</v-list-tile-title>
|
<v-list-tile-title>Autre identité</v-list-tile-title>
|
||||||
@ -44,8 +44,8 @@
|
|||||||
|
|
||||||
<v-list-tile @click="$router.push({ name: 'Identities' })">
|
<v-list-tile @click="$router.push({ name: 'Identities' })">
|
||||||
<v-list-tile-action>
|
<v-list-tile-action>
|
||||||
<v-icon>group</v-icon>
|
<v-icon>group</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-tile-action>
|
||||||
<v-list-tile-content>
|
<v-list-tile-content>
|
||||||
<v-list-tile-title>Identities</v-list-tile-title>
|
<v-list-tile-title>Identities</v-list-tile-title>
|
||||||
</v-list-tile-content>
|
</v-list-tile-content>
|
||||||
@ -100,7 +100,7 @@
|
|||||||
transition="scale-transition"
|
transition="scale-transition"
|
||||||
v-if="user"
|
v-if="user"
|
||||||
>
|
>
|
||||||
<v-btn
|
<v-btn
|
||||||
slot="activator"
|
slot="activator"
|
||||||
v-model="fab"
|
v-model="fab"
|
||||||
color="blue darken-2"
|
color="blue darken-2"
|
||||||
@ -134,7 +134,8 @@
|
|||||||
class="white--text"
|
class="white--text"
|
||||||
v-translate="{
|
v-translate="{
|
||||||
date: new Date().getFullYear(),
|
date: new Date().getFullYear(),
|
||||||
}">© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix & <a href="https://vuejs.org/">VueJS</a> & <a href="https://www.vuetifyjs.com/">Vuetify</a> with some love and some weeks
|
}">© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix & <a href="https://vuejs.org/">VueJS</a> & <a
|
||||||
|
href="https://www.vuetifyjs.com/">Vuetify</a> with some love and some weeks
|
||||||
</span>
|
</span>
|
||||||
</v-footer>
|
</v-footer>
|
||||||
<v-snackbar
|
<v-snackbar
|
||||||
@ -148,75 +149,76 @@
|
|||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import gql from 'graphql-tag';
|
import NavBar from '@/components/NavBar.vue';
|
||||||
import NavBar from '@/components/NavBar';
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
||||||
|
|
||||||
export default {
|
@Component({
|
||||||
name: 'app',
|
|
||||||
components: {
|
components: {
|
||||||
NavBar,
|
NavBar,
|
||||||
},
|
},
|
||||||
data() {
|
})
|
||||||
return {
|
export default class App extends Vue {
|
||||||
drawer: false,
|
drawer = false;
|
||||||
fab: false,
|
fab = false;
|
||||||
user: localStorage.getItem(AUTH_USER_ID),
|
user = localStorage.getItem(AUTH_USER_ID);
|
||||||
items: [
|
items = [
|
||||||
{
|
{
|
||||||
icon: 'poll', text: 'Events', route: 'EventList', role: null,
|
icon: 'poll', text: 'Events', route: 'EventList', role: null,
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'group', text: 'Groups', route: 'GroupList', role: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN',
|
|
||||||
},
|
|
||||||
{ icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
|
|
||||||
{ icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
|
|
||||||
{ icon: 'help', text: 'Help', role: null },
|
|
||||||
{ icon: 'phonelink', text: 'App downloads', role: null },
|
|
||||||
],
|
|
||||||
error: {
|
|
||||||
timeout: 3000,
|
|
||||||
show: false,
|
|
||||||
text: '',
|
|
||||||
},
|
|
||||||
show_new_event_button: false,
|
|
||||||
actor: localStorage.getItem(AUTH_USER_ACTOR),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
showMenuItem(elem) {
|
|
||||||
return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true;
|
|
||||||
},
|
},
|
||||||
getUser() {
|
{
|
||||||
return this.user === undefined ? false : this.user;
|
icon: 'group', text: 'Groups', route: 'GroupList', role: null,
|
||||||
},
|
},
|
||||||
toggleDrawer() {
|
{
|
||||||
this.drawer = !this.drawer;
|
icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN',
|
||||||
},
|
},
|
||||||
},
|
{ icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
|
||||||
computed: {
|
{ icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
|
||||||
displayed_name() {
|
{ icon: 'help', text: 'Help', role: null },
|
||||||
return this.actor.display_name === null ? this.actor.username : this.actor.display_name;
|
{ icon: 'phonelink', text: 'App downloads', role: null },
|
||||||
},
|
];
|
||||||
},
|
error = {
|
||||||
};
|
timeout: 3000,
|
||||||
|
show: false,
|
||||||
|
text: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
actor = localStorage.getItem(AUTH_USER_ACTOR);
|
||||||
|
|
||||||
|
get displayed_name () {
|
||||||
|
// FIXME: load actor
|
||||||
|
return 'no implemented';
|
||||||
|
// return this.actor.display_name === null ? this.actor.username : this.actor.display_name
|
||||||
|
}
|
||||||
|
|
||||||
|
showMenuItem (elem) {
|
||||||
|
// FIXME: load actor
|
||||||
|
return false;
|
||||||
|
// return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
|
||||||
|
}
|
||||||
|
|
||||||
|
getUser () {
|
||||||
|
return this.user === undefined ? false : this.user;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleDrawer () {
|
||||||
|
this.drawer = !this.drawer;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.router-enter-active, .router-leave-active {
|
.router-enter-active, .router-leave-active {
|
||||||
transition-property: opacity;
|
transition-property: opacity;
|
||||||
transition-duration: .25s;
|
transition-duration: .25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.router-enter-active {
|
.router-enter-active {
|
||||||
transition-delay: .25s;
|
transition-delay: .25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.router-enter, .router-leave-active {
|
.router-enter, .router-leave-active {
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -31,12 +31,12 @@
|
|||||||
<div class="text-xs-center">
|
<div class="text-xs-center">
|
||||||
<v-avatar size="125px">
|
<v-avatar size="125px">
|
||||||
<img v-if="!actor.avatarUrl"
|
<img v-if="!actor.avatarUrl"
|
||||||
class="img-circle elevation-7 mb-1"
|
class="img-circle elevation-7 mb-1"
|
||||||
src="https://picsum.photos/125/125/"
|
src="https://picsum.photos/125/125/"
|
||||||
>
|
>
|
||||||
<img v-else
|
<img v-else
|
||||||
class="img-circle elevation-7 mb-1"
|
class="img-circle elevation-7 mb-1"
|
||||||
:src="actor.avatarUrl"
|
:src="actor.avatarUrl"
|
||||||
>
|
>
|
||||||
</v-avatar>
|
</v-avatar>
|
||||||
</div>
|
</div>
|
||||||
@ -44,7 +44,8 @@
|
|||||||
<v-layout row>
|
<v-layout row>
|
||||||
<v-flex xs7>
|
<v-flex xs7>
|
||||||
<div class="headline">{{ actor.name }}</div>
|
<div class="headline">{{ actor.name }}</div>
|
||||||
<div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span></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-card-text v-if="actor.description" v-html="actor.description"></v-card-text>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
</v-layout>
|
</v-layout>
|
||||||
@ -107,7 +108,9 @@
|
|||||||
<div>
|
<div>
|
||||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||||
<p>{{ event.description }}</p>
|
<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>
|
<p v-if="event.organizer">Organisé par
|
||||||
|
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
@ -171,46 +174,40 @@
|
|||||||
</v-layout>
|
</v-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { FETCH_ACTOR } from '@/graphql/actor';
|
import { FETCH_ACTOR } from '@/graphql/actor';
|
||||||
|
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||||
|
|
||||||
export default {
|
@Component({
|
||||||
name: 'Account',
|
apollo: {
|
||||||
data() {
|
actor: {
|
||||||
return {
|
query: FETCH_ACTOR,
|
||||||
actor: null,
|
variables() {
|
||||||
};
|
return {
|
||||||
},
|
name: this.$route.params.name,
|
||||||
props: {
|
};
|
||||||
name: {
|
},
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
apollo: {
|
|
||||||
actor: {
|
|
||||||
query: FETCH_ACTOR,
|
|
||||||
variables() {
|
|
||||||
return {
|
|
||||||
name: this.$route.params.name,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
})
|
||||||
created() {
|
export default class Account extends Vue {
|
||||||
},
|
@Prop({ type: String, required: true }) name!: string;
|
||||||
watch: {
|
|
||||||
|
actor = null;
|
||||||
|
|
||||||
// call again the method if the route changes
|
// call again the method if the route changes
|
||||||
$route: 'fetchData',
|
@Watch('$route')
|
||||||
},
|
onRouteChange() {
|
||||||
methods: {
|
// this.fetchData()
|
||||||
|
}
|
||||||
|
|
||||||
logoutUser() {
|
logoutUser() {
|
||||||
// TODO : implement logout
|
// TODO : implement logout
|
||||||
this.$router.push({ name: 'Home' });
|
this.$router.push({ name: 'Home' });
|
||||||
},
|
}
|
||||||
nl2br: function(text) {
|
|
||||||
|
nl2br(text) {
|
||||||
return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
|
return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-layout row>
|
<v-layout row>
|
||||||
<v-flex xs12 sm6 offset-sm3>
|
<v-flex xs12 sm6 offset-sm3>
|
||||||
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
||||||
<v-card v-if="!loading">
|
<v-card v-if="!loading">
|
||||||
<v-toolbar dark color="primary">
|
<v-toolbar dark color="primary">
|
||||||
<v-toolbar-title>Identities</v-toolbar-title>
|
<v-toolbar-title>Identities</v-toolbar-title>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-list two-line>
|
<v-list two-line>
|
||||||
<v-list-tile
|
<v-list-tile
|
||||||
@ -31,22 +31,22 @@
|
|||||||
<v-divider v-if="showForm"></v-divider>
|
<v-divider v-if="showForm"></v-divider>
|
||||||
<v-form v-if="showForm">
|
<v-form v-if="showForm">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
label="Username"
|
label="Username"
|
||||||
required
|
required
|
||||||
type="text"
|
type="text"
|
||||||
v-model="newActor.preferred_username"
|
v-model="newActor.preferred_username"
|
||||||
:rules="[rules.required]"
|
:rules="[rules.required]"
|
||||||
:error="this.state.username.status"
|
:error="this.state.username.status"
|
||||||
:error-messages="this.state.username.msg"
|
:error-messages="this.state.username.msg"
|
||||||
:suffix="this.host()"
|
:suffix="this.host()"
|
||||||
hint="You will be able to create more identities once registered"
|
hint="You will be able to create more identities once registered"
|
||||||
persistent-hint
|
persistent-hint
|
||||||
>
|
>
|
||||||
</v-text-field>
|
</v-text-field>
|
||||||
<v-textarea
|
<v-textarea
|
||||||
name="input-7-1"
|
name="input-7-1"
|
||||||
label="Profile description"
|
label="Profile description"
|
||||||
hint="Will be displayed publicly on your profile"
|
hint="Will be displayed publicly on your profile"
|
||||||
></v-textarea>
|
></v-textarea>
|
||||||
</v-form>
|
</v-form>
|
||||||
<v-btn
|
<v-btn
|
||||||
@ -57,73 +57,77 @@
|
|||||||
right
|
right
|
||||||
fab
|
fab
|
||||||
@click="toggleForm()"
|
@click="toggleForm()"
|
||||||
>
|
>
|
||||||
<v-icon>{{ showForm ? 'check' : 'add' }}</v-icon>
|
<v-icon>{{ showForm ? 'check' : 'add' }}</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
</v-layout>
|
</v-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
name: 'Identities',
|
|
||||||
data() {
|
@Component
|
||||||
return {
|
export default class Identities extends Vue {
|
||||||
actors: [],
|
actors = [];
|
||||||
newActor: {
|
newActor = {
|
||||||
preferred_username: '',
|
preferred_username: '',
|
||||||
summary: '',
|
summary: '',
|
||||||
},
|
};
|
||||||
loading: true,
|
loading = true;
|
||||||
showForm: false,
|
showForm = false;
|
||||||
rules: {
|
rules = {
|
||||||
required: value => !!value || 'Required.',
|
required: value => !!value || 'Required.',
|
||||||
},
|
};
|
||||||
state: {
|
state = {
|
||||||
username: {
|
username: {
|
||||||
status: false,
|
status: false,
|
||||||
msg: [],
|
msg: [],
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
this.fetchData();
|
this.fetchData();
|
||||||
},
|
}
|
||||||
methods: {
|
|
||||||
fetchData() {
|
fetchData() {
|
||||||
eventFetch('/user', this.$store)
|
// Implements eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch('/user', this.$store)
|
||||||
.then((response) => {
|
// .then(response => response.json())
|
||||||
this.actors = response.data.actors;
|
// .then((response) => {
|
||||||
this.loading = false;
|
// this.actors = response.data.actors;
|
||||||
});
|
// this.loading = false;
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
sendData() {
|
sendData() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
this.showForm = false;
|
this.showForm = false;
|
||||||
eventFetch('/actors', this.$store, {
|
|
||||||
method: 'POST',
|
// Implements eventFetch
|
||||||
body: JSON.stringify({ actor: this.newActor }),
|
// eventFetch('/actors', this.$store, {
|
||||||
})
|
// method: 'POST',
|
||||||
.then(response => response.json())
|
// body: JSON.stringify({ actor: this.newActor }),
|
||||||
.then((response) => {
|
// })
|
||||||
this.actors.push(response.data);
|
// .then(response => response.json())
|
||||||
this.loading = false;
|
// .then((response) => {
|
||||||
});
|
// this.actors.push(response.data);
|
||||||
},
|
// this.loading = false;
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
toggleForm() {
|
toggleForm() {
|
||||||
if (this.showForm === true) {
|
if (this.showForm === true) {
|
||||||
this.sendData();
|
this.sendData();
|
||||||
} else {
|
} else {
|
||||||
this.showForm = true;
|
this.showForm = true;
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
host() {
|
host() {
|
||||||
return `@${window.location.host}`;
|
return `@${window.location.host}`;
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -58,90 +58,84 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
|
|
||||||
import Gravatar from 'vue-gravatar';
|
import Gravatar from 'vue-gravatar';
|
||||||
import RegisterAvatar from './RegisterAvatar';
|
import RegisterAvatar from './RegisterAvatar.vue';
|
||||||
import { AUTH_TOKEN, AUTH_USER_ID, AUTH_USER_ACTOR } from '@/constants';
|
import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
||||||
import { LOGIN } from '@/graphql/auth';
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
import { LOGIN } from '@/graphql/auth';
|
||||||
|
|
||||||
export default {
|
@Component({
|
||||||
props: {
|
components: {
|
||||||
email: {
|
'v-gravatar': Gravatar,
|
||||||
type: String,
|
avatar: RegisterAvatar,
|
||||||
required: false,
|
|
||||||
default: '',
|
|
||||||
},
|
},
|
||||||
password: {
|
})
|
||||||
type: String,
|
export default class Login extends Vue {
|
||||||
required: false,
|
@Prop({ type: String, required: false, default: '' }) email!: string;
|
||||||
default: '',
|
@Prop({ type: String, required: false, default: '' }) password!: string;
|
||||||
},
|
|
||||||
},
|
credentials = {
|
||||||
beforeCreate() {
|
email: '',
|
||||||
if (this.user) {
|
password: '',
|
||||||
this.$router.push('/');
|
};
|
||||||
}
|
validationSent = false;
|
||||||
},
|
error = {
|
||||||
components: {
|
show: false,
|
||||||
'v-gravatar': Gravatar,
|
text: '',
|
||||||
avatar: RegisterAvatar,
|
timeout: 3000,
|
||||||
},
|
field: {
|
||||||
mounted() {
|
email: false,
|
||||||
this.credentials.email = this.email;
|
password: false,
|
||||||
this.credentials.password = this.password;
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
credentials: {
|
|
||||||
email: '',
|
|
||||||
password: '',
|
|
||||||
},
|
|
||||||
validationSent: false,
|
|
||||||
error: {
|
|
||||||
show: false,
|
|
||||||
text: '',
|
|
||||||
timeout: 3000,
|
|
||||||
field: {
|
|
||||||
email: false,
|
|
||||||
password: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
required: value => !!value || 'Required.',
|
|
||||||
email: (value) => {
|
|
||||||
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
||||||
return pattern.test(value) || 'Invalid e-mail.';
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
rules = {
|
||||||
methods: {
|
required: value => !!value || 'Required.',
|
||||||
|
email: (value) => {
|
||||||
|
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||||
|
return pattern.test(value) || 'Invalid e-mail.';
|
||||||
|
},
|
||||||
|
};
|
||||||
|
user: any;
|
||||||
|
|
||||||
|
beforeCreate() {
|
||||||
|
if (this.user) {
|
||||||
|
this.$router.push('/');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.credentials.email = this.email;
|
||||||
|
this.credentials.password = this.password;
|
||||||
|
}
|
||||||
|
|
||||||
loginAction(e) {
|
loginAction(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.$apollo.mutate({
|
this.$apollo.mutate({
|
||||||
mutation: LOGIN,
|
mutation: LOGIN,
|
||||||
variables: {
|
variables: {
|
||||||
email: this.credentials.email,
|
email: this.credentials.email,
|
||||||
password: this.credentials.password
|
password: this.credentials.password,
|
||||||
}
|
},
|
||||||
}).then((result) => {
|
}).then((result) => {
|
||||||
this.saveUserData(result.data);
|
this.saveUserData(result.data);
|
||||||
this.$router.push({name: 'Home'});
|
this.$router.push({ name: 'Home' });
|
||||||
}).catch((e) => {
|
}).catch((e) => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
this.error.show = true;
|
this.error.show = true;
|
||||||
this.error.text = e.message;
|
this.error.text = e.message;
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
|
|
||||||
validEmail() {
|
validEmail() {
|
||||||
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
|
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
|
||||||
},
|
}
|
||||||
saveUserData({login: login}) {
|
|
||||||
|
saveUserData({ login: login }) {
|
||||||
localStorage.setItem(AUTH_USER_ID, login.user.id);
|
localStorage.setItem(AUTH_USER_ID, login.user.id);
|
||||||
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
|
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
|
||||||
localStorage.setItem(AUTH_TOKEN, login.token);
|
localStorage.setItem(AUTH_TOKEN, login.token);
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -36,75 +36,74 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
|
||||||
name: 'PasswordReset',
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
props: {
|
|
||||||
token: {
|
@Component
|
||||||
type: String,
|
export default class PasswordReset extends Vue {
|
||||||
required: true,
|
@Prop({ type: String, required: true }) token!: string;
|
||||||
},
|
|
||||||
},
|
credentials = {
|
||||||
computed: {
|
password: '',
|
||||||
samePasswords() {
|
password_confirmation: '',
|
||||||
return this.rules.password_length(this.credentials.password) === true &&
|
};
|
||||||
this.credentials.password === this.credentials.password_confirmation;
|
error = {
|
||||||
},
|
show: false,
|
||||||
},
|
};
|
||||||
data() {
|
state = {
|
||||||
return {
|
token: {
|
||||||
credentials: {
|
status: null,
|
||||||
password: '',
|
msg: '',
|
||||||
password_confirmation: '',
|
|
||||||
},
|
},
|
||||||
error: {
|
password: {
|
||||||
show: false,
|
status: null,
|
||||||
|
msg: '',
|
||||||
},
|
},
|
||||||
state: {
|
password_confirmation: {
|
||||||
token: {
|
status: null,
|
||||||
status: null,
|
msg: '',
|
||||||
msg: '',
|
|
||||||
},
|
|
||||||
password: {
|
|
||||||
status: null,
|
|
||||||
msg: '',
|
|
||||||
},
|
|
||||||
password_confirmation: {
|
|
||||||
status: null,
|
|
||||||
msg: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
|
|
||||||
required: value => !!value || 'Required.',
|
|
||||||
password_equal: value => value === this.credentials.password || 'Passwords must be the same',
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
rules = {
|
||||||
methods: {
|
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
|
||||||
|
required: value => !!value || 'Required.',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
resetAction(e) {
|
resetAction(e) {
|
||||||
this.resetState();
|
this.resetState();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log(this.token);
|
console.log(this.token);
|
||||||
fetchStory('/users/password-reset/post', this.$store, { method: 'POST', body: JSON.stringify({ password: this.credentials.password, token: this.token }) }).then((data) => {
|
// FIXME: implements fetchStory
|
||||||
localStorage.setItem('token', data.token);
|
// fetchStory('/users/password-reset/post', this.$store, {
|
||||||
localStorage.setItem('refresh_token', data.refresh_token);
|
// method: 'POST',
|
||||||
this.$store.commit('LOGIN_USER', data.account);
|
// body: JSON.stringify({ password: this.credentials.password, token: this.token }),
|
||||||
this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
|
// }).then((data) => {
|
||||||
this.$router.push({ name: 'Home' });
|
// localStorage.setItem('token', data.token);
|
||||||
}, (error) => {
|
// localStorage.setItem('refresh_token', data.refresh_token);
|
||||||
Promise.resolve(error).then((errormsg) => {
|
// this.$store.commit('LOGIN_USER', data.account);
|
||||||
console.log('errormsg', errormsg);
|
// this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
|
||||||
this.error.show = true;
|
// this.$router.push({ name: 'Home' });
|
||||||
Object.entries(JSON.parse(errormsg).errors).forEach(([key, val]) => {
|
// }, (error) => {
|
||||||
console.log('key', key);
|
// Promise.resolve(error).then((errormsg) => {
|
||||||
console.log('val', val[0]);
|
// console.log('errormsg', errormsg);
|
||||||
this.state[key] = { status: false, msg: val[0] };
|
// this.error.show = true;
|
||||||
console.log('state', this.state);
|
// Object.entries(JSON.parse(errormsg).errors).forEach(([ key, val ]) => {
|
||||||
});
|
// console.log('key', key);
|
||||||
});
|
// console.log('val', val[ 0 ]);
|
||||||
});
|
// this.state[ key ] = { status: false, msg: val[ 0 ] };
|
||||||
},
|
// console.log('state', this.state);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
resetState() {
|
resetState() {
|
||||||
this.state = {
|
this.state = {
|
||||||
token: {
|
token: {
|
||||||
@ -120,7 +119,6 @@ export default {
|
|||||||
msg: '',
|
msg: '',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
}
|
||||||
},
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -68,8 +68,12 @@
|
|||||||
<router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link>
|
<router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link>
|
||||||
</v-form>
|
</v-form>
|
||||||
<div v-if="validationSent">
|
<div v-if="validationSent">
|
||||||
<h2><translate>A validation email was sent to %{email}</translate></h2>
|
<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>
|
<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>
|
</div>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
@ -78,85 +82,78 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import Gravatar from 'vue-gravatar';
|
import Gravatar from 'vue-gravatar';
|
||||||
import RegisterAvatar from './RegisterAvatar';
|
import RegisterAvatar from './RegisterAvatar.vue';
|
||||||
import { CREATE_USER } from '@/graphql/user';
|
import { CREATE_USER } from '@/graphql/user';
|
||||||
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
export default {
|
@Component({
|
||||||
props: {
|
components: {
|
||||||
default_email: {
|
'v-gravatar': Gravatar,
|
||||||
type: String,
|
avatar: RegisterAvatar,
|
||||||
required: false,
|
|
||||||
default: '',
|
|
||||||
},
|
},
|
||||||
default_password: {
|
})
|
||||||
type: String,
|
export default class Register extends Vue {
|
||||||
required: false,
|
@Prop({ type: String, required: false, default: '' }) default_email!: string;
|
||||||
default: '',
|
@Prop({ type: String, required: false, default: '' }) default_password!: string;
|
||||||
},
|
|
||||||
},
|
username = '';
|
||||||
components: {
|
email = this.default_email;
|
||||||
'v-gravatar': Gravatar,
|
password = this.default_password;
|
||||||
avatar: RegisterAvatar,
|
error = {
|
||||||
},
|
show: false,
|
||||||
data() {
|
};
|
||||||
return {
|
showPassword = false;
|
||||||
username: '',
|
validationSent = false;
|
||||||
email: this.default_email,
|
state = {
|
||||||
password: this.default_password,
|
email: {
|
||||||
error: {
|
status: false,
|
||||||
show: false,
|
msg: [],
|
||||||
},
|
},
|
||||||
showPassword: false,
|
username: {
|
||||||
validationSent: false,
|
status: false,
|
||||||
state: {
|
msg: [],
|
||||||
email: {
|
|
||||||
status: false,
|
|
||||||
msg: [],
|
|
||||||
},
|
|
||||||
username: {
|
|
||||||
status: false,
|
|
||||||
msg: [],
|
|
||||||
},
|
|
||||||
password: {
|
|
||||||
status: false,
|
|
||||||
msg: [],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
rules: {
|
password: {
|
||||||
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
|
status: false,
|
||||||
required: value => !!value || 'Required.',
|
msg: [],
|
||||||
email: (value) => {
|
|
||||||
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
||||||
return pattern.test(value) || 'Invalid e-mail.';
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
rules = {
|
||||||
methods: {
|
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
|
||||||
|
required: value => !!value || 'Required.',
|
||||||
|
email: (value) => {
|
||||||
|
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||||
|
return pattern.test(value) || 'Invalid e-mail.';
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
resetState() {
|
resetState() {
|
||||||
this.state = {
|
this.state = {
|
||||||
email: {
|
email: {
|
||||||
status: false,
|
status: false,
|
||||||
msg: '',
|
msg: [],
|
||||||
},
|
},
|
||||||
username: {
|
username: {
|
||||||
status: false,
|
status: false,
|
||||||
msg: '',
|
msg: [],
|
||||||
},
|
},
|
||||||
password: {
|
password: {
|
||||||
status: false,
|
status: false,
|
||||||
msg: '',
|
msg: [],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
}
|
||||||
|
|
||||||
host() {
|
host() {
|
||||||
return `@${window.location.host}`;
|
return `@${window.location.host}`;
|
||||||
},
|
}
|
||||||
|
|
||||||
validEmail() {
|
validEmail() {
|
||||||
return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
|
return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
|
||||||
},
|
}
|
||||||
|
|
||||||
submit() {
|
submit() {
|
||||||
this.$apollo.mutate({
|
this.$apollo.mutate({
|
||||||
mutation: CREATE_USER,
|
mutation: CREATE_USER,
|
||||||
@ -171,19 +168,20 @@ export default {
|
|||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
},
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
|
||||||
.avatar-enter-active {
|
|
||||||
transition: opacity 1s ease;
|
|
||||||
}
|
|
||||||
.avatar-enter, .avatar-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-leave {
|
<style lang="scss">
|
||||||
display: none;
|
.avatar-enter-active {
|
||||||
}
|
transition: opacity 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-enter, .avatar-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-leave {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,9 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
|
<img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
export default {
|
<script lang="ts">
|
||||||
name: 'RegisterAvatar',
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
};
|
|
||||||
|
@Component
|
||||||
|
export default class RegisterAvatar extends Vue {
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -30,53 +30,48 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
name: 'ResendConfirmation',
|
|
||||||
props: {
|
@Component
|
||||||
email: {
|
export default class ResendConfirmation extends Vue {
|
||||||
type: String,
|
@Prop({ type: String, required: false, default: '' }) email!: string;
|
||||||
required: false,
|
|
||||||
default: '',
|
credentials = {
|
||||||
},
|
email: '',
|
||||||
},
|
};
|
||||||
data() {
|
validationSent = false;
|
||||||
return {
|
error = false;
|
||||||
credentials: {
|
state = {
|
||||||
email: '',
|
email: {
|
||||||
},
|
status: null,
|
||||||
validationSent: false,
|
msg: '',
|
||||||
error: false,
|
|
||||||
state: {
|
|
||||||
email: {
|
|
||||||
status: null,
|
|
||||||
msg: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
required: value => !!value || 'Required.',
|
|
||||||
email: (value) => {
|
|
||||||
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
||||||
return pattern.test(value) || 'Invalid e-mail.';
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
rules = {
|
||||||
mounted() {
|
required: value => !!value || 'Required.',
|
||||||
this.credentials.email = this.email;
|
email: (value) => {
|
||||||
},
|
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||||
methods: {
|
return pattern.test(value) || 'Invalid e-mail.';
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.credentials.email = this.email;
|
||||||
|
}
|
||||||
|
|
||||||
resendConfirmationAction(e) {
|
resendConfirmationAction(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
|
|
||||||
this.validationSent = true;
|
// FIXME: implement fetchStory
|
||||||
}).catch((err) => {
|
// fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
|
||||||
Promise.resolve(err).then(() => {
|
// this.validationSent = true;
|
||||||
this.error = true;
|
// }).catch((err) => {
|
||||||
this.validationSent = true;
|
// Promise.resolve(err).then(() => {
|
||||||
});
|
// this.error = true;
|
||||||
});
|
// this.validationSent = true;
|
||||||
},
|
// });
|
||||||
},
|
// });
|
||||||
};
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -30,54 +30,51 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
name: 'SendPasswordReset',
|
|
||||||
props: {
|
@Component
|
||||||
email: {
|
export default class SendPasswordReset extends Vue {
|
||||||
type: String,
|
@Prop({ type: String, required: false, default: '' }) email!: string;
|
||||||
required: false,
|
|
||||||
default: '',
|
credentials = {
|
||||||
},
|
email: '',
|
||||||
},
|
};
|
||||||
mounted() {
|
validationSent = false;
|
||||||
this.credentials.email = this.email;
|
error = false;
|
||||||
},
|
state = {
|
||||||
data() {
|
email: {
|
||||||
return {
|
status: null,
|
||||||
credentials: {
|
msg: '',
|
||||||
email: '',
|
|
||||||
},
|
|
||||||
validationSent: false,
|
|
||||||
error: false,
|
|
||||||
state: {
|
|
||||||
email: {
|
|
||||||
status: null,
|
|
||||||
msg: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
required: value => !!value || 'Required.',
|
|
||||||
email: (value) => {
|
|
||||||
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
||||||
return pattern.test(value) || 'Invalid e-mail.';
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
|
||||||
methods: {
|
rules = {
|
||||||
|
required: value => !!value || 'Required.',
|
||||||
|
email: (value) => {
|
||||||
|
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||||
|
return pattern.test(value) || 'Invalid e-mail.';
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.credentials.email = this.email;
|
||||||
|
}
|
||||||
|
|
||||||
resendConfirmationAction(e) {
|
resendConfirmationAction(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
|
// FIXME: implement fetchStory
|
||||||
this.error = false;
|
// fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
|
||||||
this.validationSent = true;
|
// this.error = false;
|
||||||
}).catch((err) => {
|
// this.validationSent = true;
|
||||||
Promise.resolve(err).then((data) => {
|
// }).catch((err) => {
|
||||||
this.error = true;
|
// Promise.resolve(err).then((data) => {
|
||||||
this.state.email = { status: false, msg: data.errors };
|
// this.error = true;
|
||||||
});
|
// this.state.email = { status: false, msg: data.errors };
|
||||||
});
|
// });
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
resetState() {
|
resetState() {
|
||||||
this.state = {
|
this.state = {
|
||||||
email: {
|
email: {
|
||||||
@ -85,7 +82,6 @@ export default {
|
|||||||
msg: '',
|
msg: '',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
}
|
||||||
},
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,36 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container>
|
<v-container>
|
||||||
<h1 v-if="loading"><translate>Your account is being validated</translate></h1>
|
<h1 v-if="loading">
|
||||||
|
<translate>Your account is being validated</translate>
|
||||||
|
</h1>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div v-if="failed">
|
<div v-if="failed">
|
||||||
<v-alert :value="true" variant="danger"><translate>Error while validating account</translate></v-alert>
|
<v-alert :value="true" variant="danger">
|
||||||
|
<translate>Error while validating account</translate>
|
||||||
|
</v-alert>
|
||||||
</div>
|
</div>
|
||||||
<h1 v-else><translate>Your account has been validated</translate></h1>
|
<h1 v-else>
|
||||||
|
<translate>Your account has been validated</translate>
|
||||||
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { VALIDATE_USER } from '@/graphql/user';
|
import { VALIDATE_USER } from '@/graphql/user';
|
||||||
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
import { AUTH_TOKEN, AUTH_USER_ACTOR, 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();
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Validate',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: true,
|
|
||||||
failed: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
token: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.validateAction();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
validateAction() {
|
validateAction() {
|
||||||
this.$apollo.mutate({
|
this.$apollo.mutate({
|
||||||
mutation: VALIDATE_USER,
|
mutation: VALIDATE_USER,
|
||||||
@ -41,18 +42,19 @@ export default {
|
|||||||
this.loading = false;
|
this.loading = false;
|
||||||
console.log(data);
|
console.log(data);
|
||||||
this.saveUserData(data.data);
|
this.saveUserData(data.data);
|
||||||
this.$router.push({name: 'Home'});
|
this.$router.push({ name: 'Home' });
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
console.log(error);
|
console.log(error);
|
||||||
this.failed = true;
|
this.failed = true;
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
saveUserData({validateUser: login}) {
|
|
||||||
|
saveUserData({ validateUser: login }) {
|
||||||
localStorage.setItem(AUTH_USER_ID, login.user.id);
|
localStorage.setItem(AUTH_USER_ID, login.user.id);
|
||||||
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
|
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
|
||||||
localStorage.setItem(AUTH_TOKEN, login.token);
|
localStorage.setItem(AUTH_TOKEN, login.token);
|
||||||
}
|
}
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -4,7 +4,9 @@
|
|||||||
<v-flex xs12 sm8 md4>
|
<v-flex xs12 sm8 md4>
|
||||||
<v-card class="elevation-12">
|
<v-card class="elevation-12">
|
||||||
<v-toolbar dark color="primary">
|
<v-toolbar dark color="primary">
|
||||||
<v-toolbar-title><translate>Create a new category</translate></v-toolbar-title>
|
<v-toolbar-title>
|
||||||
|
<translate>Create a new category</translate>
|
||||||
|
</v-toolbar-title>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-form>
|
<v-form>
|
||||||
@ -29,7 +31,9 @@
|
|||||||
@change="onFilePicked"
|
@change="onFilePicked"
|
||||||
>
|
>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
<v-btn color="primary" @click="create"><translate>Create category</translate></v-btn>
|
<v-btn color="primary" @click="create">
|
||||||
|
<translate>Create category</translate>
|
||||||
|
</v-btn>
|
||||||
</v-form>
|
</v-form>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
@ -38,50 +42,48 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { UPLOAD_PICTURE } from '@/graphql/upload';
|
import { CREATE_CATEGORY } from '@/graphql/category';
|
||||||
import { CREATE_CATEGORY } from '@/graphql/category';
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
export default {
|
@Component
|
||||||
name: 'create-category',
|
export default class CreateCategory extends Vue {
|
||||||
data() {
|
title = '';
|
||||||
return {
|
description = '';
|
||||||
title: '',
|
image = {
|
||||||
description: '',
|
url: '',
|
||||||
image: {
|
name: '',
|
||||||
url: '',
|
file: '',
|
||||||
name: '',
|
|
||||||
file: '',
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
create() {
|
create() {
|
||||||
this.$apollo.mutate({
|
this.$apollo.mutate({
|
||||||
mutation: CREATE_CATEGORY,
|
mutation: CREATE_CATEGORY,
|
||||||
variables: {
|
variables: {
|
||||||
title: this.title,
|
title: this.title,
|
||||||
description: this.description,
|
description: this.description,
|
||||||
picture: this.$refs.image.files[0],
|
picture: (this.$refs['image'] as any).files[ 0 ],
|
||||||
}
|
},
|
||||||
}).then((data) => {
|
}).then((data) => {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
pickFile () {
|
|
||||||
this.$refs.image.click ()
|
pickFile() {
|
||||||
},
|
(this.$refs['image'] as any).click();
|
||||||
|
}
|
||||||
|
|
||||||
onFilePicked(e) {
|
onFilePicked(e) {
|
||||||
const files = e.target.files;
|
const files = e.target.files;
|
||||||
if(files[0] === undefined || files[0].name.lastIndexOf('.') <= 0) {
|
if (files[ 0 ] === undefined || files[ 0 ].name.lastIndexOf('.') <= 0) {
|
||||||
console.error("File is incorrect")
|
console.error('File is incorrect');
|
||||||
}
|
}
|
||||||
this.image.name = files[0].name;
|
this.image.name = files[ 0 ].name;
|
||||||
},
|
}
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -15,8 +15,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<v-btn flat class="orange--text"><translate>Explore</translate></v-btn>
|
<v-btn flat class="orange--text">
|
||||||
<v-btn flat class="red--text" v-on:click="deleteCategory(category.id)"><translate>Delete</translate></v-btn>
|
<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-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
@ -30,37 +34,34 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { FETCH_CATEGORIES } from '@/graphql/category';
|
import { FETCH_CATEGORIES } from '@/graphql/category';
|
||||||
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
// TODO : remove this hardcode
|
// TODO : remove this hardcode
|
||||||
|
|
||||||
|
@Component({
|
||||||
export default {
|
apollo: {
|
||||||
name: 'Home',
|
categories: {
|
||||||
data() {
|
query: FETCH_CATEGORIES,
|
||||||
return {
|
},
|
||||||
categories: [],
|
|
||||||
loading: true,
|
|
||||||
HTTP_ENDPOINT: 'http://localhost:4000',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
apollo: {
|
|
||||||
categories: {
|
|
||||||
query: FETCH_CATEGORIES,
|
|
||||||
},
|
},
|
||||||
},
|
})
|
||||||
methods: {
|
export default class List extends Vue {
|
||||||
|
categories = [];
|
||||||
|
loading = true;
|
||||||
|
HTTP_ENDPOINT = 'http://localhost:4000';
|
||||||
|
|
||||||
deleteCategory(categoryId) {
|
deleteCategory(categoryId) {
|
||||||
const router = this.$router;
|
const router = this.$router;
|
||||||
eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
|
// FIXME: remove eventFetch
|
||||||
.then(() => {
|
// eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
|
||||||
this.categories = this.categories.filter(category => category.id !== categoryId);
|
// .then(() => {
|
||||||
router.push('/category');
|
// this.categories = this.categories.filter(category => category.id !== categoryId);
|
||||||
});
|
// router.push('/category');
|
||||||
},
|
// });
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<v-flex xs12 sm8 md4>
|
<v-flex xs12 sm8 md4>
|
||||||
<v-card class="elevation-12">
|
<v-card class="elevation-12">
|
||||||
<v-toolbar dark color="primary">
|
<v-toolbar dark color="primary">
|
||||||
<v-toolbar-title>Create a new event</v-toolbar-title>
|
<v-toolbar-title>Create a new event</v-toolbar-title>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-form>
|
<v-form>
|
||||||
@ -49,11 +49,11 @@
|
|||||||
:required="event.location_type === 'phone'"
|
:required="event.location_type === 'phone'"
|
||||||
></v-text-field>
|
></v-text-field>
|
||||||
<v-autocomplete
|
<v-autocomplete
|
||||||
:items="categories"
|
:items="categories"
|
||||||
v-model="event.category"
|
v-model="event.category"
|
||||||
item-text="title"
|
item-text="title"
|
||||||
item-value="id"
|
item-value="id"
|
||||||
label="Categories"
|
label="Categories"
|
||||||
>
|
>
|
||||||
</v-autocomplete>
|
</v-autocomplete>
|
||||||
<v-btn color="primary" @click="create">Create event</v-btn>
|
<v-btn color="primary" @click="create">Create event</v-btn>
|
||||||
@ -65,62 +65,58 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
// import Location from '@/components/Location';
|
// import Location from '@/components/Location';
|
||||||
import VueMarkdown from 'vue-markdown';
|
import VueMarkdown from 'vue-markdown';
|
||||||
import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
|
import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
|
||||||
import { FETCH_CATEGORIES } from '@/graphql/category';
|
import { FETCH_CATEGORIES } from '@/graphql/category';
|
||||||
import { AUTH_USER_ACTOR } from '@/constants';
|
import { AUTH_USER_ACTOR } from '@/constants';
|
||||||
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
export default {
|
@Component({
|
||||||
name: 'create-event',
|
components: {
|
||||||
props: {
|
VueMarkdown
|
||||||
uuid: {
|
|
||||||
required: false,
|
|
||||||
type: String,
|
|
||||||
},
|
},
|
||||||
},
|
apollo: {
|
||||||
components: {
|
categories: {
|
||||||
/* Location, */
|
query: FETCH_CATEGORIES,
|
||||||
VueMarkdown,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
e1: 0,
|
|
||||||
event: {
|
|
||||||
title: 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: [],
|
|
||||||
},
|
},
|
||||||
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: [],
|
tags: [],
|
||||||
tagsToSend: [],
|
participants: [],
|
||||||
tagsFetched: [],
|
} as any // FIXME: correctly type an event
|
||||||
};
|
categories = []
|
||||||
},
|
tags = []
|
||||||
// created() {
|
tagsToSend = []
|
||||||
// if (this.uuid) {
|
tagsFetched = []
|
||||||
// this.fetchEvent();
|
loading = false
|
||||||
// }
|
|
||||||
// },
|
// created() {
|
||||||
apollo: {
|
// if (this.uuid) {
|
||||||
categories: {
|
// this.fetchEvent();
|
||||||
query: FETCH_CATEGORIES,
|
// }
|
||||||
},
|
// }
|
||||||
},
|
|
||||||
methods: {
|
create () {
|
||||||
create() {
|
|
||||||
// this.event.seats = parseInt(this.event.seats, 10);
|
// this.event.seats = parseInt(this.event.seats, 10);
|
||||||
// this.tagsToSend.forEach((tag) => {
|
// this.tagsToSend.forEach((tag) => {
|
||||||
// this.event.tags.push({
|
// this.event.tags.push({
|
||||||
@ -128,10 +124,11 @@ export default {
|
|||||||
// // '@type': 'Tag',
|
// // '@type': 'Tag',
|
||||||
// });
|
// });
|
||||||
// });
|
// });
|
||||||
const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR));
|
// FIXME: correctly parse actor JSON
|
||||||
this.event.category_id = this.event.category;
|
const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}')
|
||||||
this.event.organizer_actor_id = actor.id;
|
this.event.category_id = this.event.category
|
||||||
this.event.participants = [actor.id];
|
this.event.organizer_actor_id = actor.id
|
||||||
|
this.event.participants = [actor.id]
|
||||||
// this.event.price = parseFloat(this.event.price);
|
// this.event.price = parseFloat(this.event.price);
|
||||||
|
|
||||||
if (this.uuid === undefined) {
|
if (this.uuid === undefined) {
|
||||||
@ -146,33 +143,25 @@ export default {
|
|||||||
addressType: this.event.location_type,
|
addressType: this.event.location_type,
|
||||||
}
|
}
|
||||||
}).then((data) => {
|
}).then((data) => {
|
||||||
this.loading = false;
|
this.loading = false
|
||||||
this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
|
this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.log(error);
|
console.log(error)
|
||||||
});
|
})
|
||||||
} else {
|
} else {
|
||||||
this.$apollo.mutate({
|
this.$apollo.mutate({
|
||||||
mutation: EDIT_EVENT,
|
mutation: EDIT_EVENT,
|
||||||
}).then((data) => {
|
}).then((data) => {
|
||||||
this.loading = false;
|
this.loading = false
|
||||||
this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
|
this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.log(error);
|
console.log(error)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
this.event.tags = [];
|
this.event.tags = []
|
||||||
},
|
}
|
||||||
// fetchEvent() {
|
|
||||||
// eventFetch(`/events/${this.id}`, this.$store)
|
getAddressData (addressData) {
|
||||||
// .then(response => response.json())
|
|
||||||
// .then((data) => {
|
|
||||||
// this.loading = false;
|
|
||||||
// this.event = data;
|
|
||||||
// console.log(this.event);
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
getAddressData(addressData) {
|
|
||||||
if (addressData !== null) {
|
if (addressData !== null) {
|
||||||
this.event.address = {
|
this.event.address = {
|
||||||
geom: {
|
geom: {
|
||||||
@ -187,11 +176,11 @@ export default {
|
|||||||
addressRegion: addressData.administrative_area_level_1,
|
addressRegion: addressData.administrative_area_level_1,
|
||||||
postalCode: addressData.postal_code,
|
postalCode: addressData.postal_code,
|
||||||
streetAddress: `${addressData.street_number} ${addressData.route}`,
|
streetAddress: `${addressData.street_number} ${addressData.route}`,
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -97,28 +97,29 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
props: ['id'],
|
|
||||||
data() {
|
@Component
|
||||||
return {
|
export default class EventEdit extends Vue {
|
||||||
loading: true,
|
@Prop(String) id!: string;
|
||||||
event: null,
|
|
||||||
};
|
loading = true;
|
||||||
},
|
event = null;
|
||||||
created() {
|
|
||||||
this.fetchData();
|
created() {
|
||||||
},
|
this.fetchData();
|
||||||
methods: {
|
}
|
||||||
|
|
||||||
fetchData() {
|
fetchData() {
|
||||||
eventFetch(`/events/${this.id}`, this.$store)
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch(`/events/${this.id}`, this.$store)
|
||||||
.then((data) => {
|
// .then(response => response.json())
|
||||||
this.loading = false;
|
// .then((data) => {
|
||||||
this.event = data;
|
// this.loading = false;
|
||||||
console.log(this.event);
|
// this.event = data;
|
||||||
});
|
// console.log(this.event);
|
||||||
},
|
// });
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,242 +1,245 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-layout row>
|
<v-layout row>
|
||||||
<v-flex xs12 sm6 offset-sm3>
|
<v-flex xs12 sm6 offset-sm3>
|
||||||
<v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
|
<v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
|
||||||
<div>{{ event }}</div>
|
<div>{{ event }}</div>
|
||||||
<v-card v-if="event">
|
<v-card v-if="event">
|
||||||
<!-- <v-img
|
<!-- <v-img
|
||||||
src="https://picsum.photos/600/400/"
|
src="https://picsum.photos/600/400/"
|
||||||
height="200px"
|
height="200px"
|
||||||
>
|
>
|
||||||
<v-container fill-height fluid>
|
<v-container fill-height fluid>
|
||||||
<v-layout fill-height>
|
<v-layout fill-height>
|
||||||
<v-flex xs12 align-end flexbox>
|
<v-flex xs12 align-end flexbox>
|
||||||
<v-card-title>
|
<v-card-title>
|
||||||
<v-btn icon @click="$router.go(-1)" class="white--text">
|
<v-btn icon @click="$router.go(-1)" class="white--text">
|
||||||
<v-icon>chevron_left</v-icon>
|
<v-icon>chevron_left</v-icon>
|
||||||
</v-btn>
|
</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>
|
<v-spacer></v-spacer>
|
||||||
<span class="subheading grey--text">{{ event.begins_on | formatDay }}</span>
|
<v-btn icon class="mr-3 white--text" v-if="actorIsOrganizer()" :to="{ name: 'EditEvent', params: {uuid: event.uuid}}">
|
||||||
<h1 class="display-1">{{ event.title }}</h1>
|
<v-icon>edit</v-icon>
|
||||||
<div>
|
</v-btn>
|
||||||
<!-- <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
|
<v-menu bottom left>
|
||||||
<v-avatar size="25px">
|
<v-btn icon slot="activator" class="white--text">
|
||||||
<img class="img-circle elevation-7 mb-1"
|
<v-icon>more_vert</v-icon>
|
||||||
:src="event.organizer_actor.avatarUrl"
|
</v-btn>
|
||||||
>
|
<v-list>
|
||||||
</v-avatar>
|
<v-list-tile @click="downloadIcsEvent()">
|
||||||
</router-link> -->
|
<v-list-tile-title>Download</v-list-tile-title>
|
||||||
<!-- <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-list-tile>
|
||||||
|
<v-list-tile @click="deleteEvent()" v-if="actorIsOrganizer()">
|
||||||
<v-divider inset></v-divider>
|
<v-list-tile-title>Delete</v-list-tile-title>
|
||||||
|
|
||||||
<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><span v-if="event.address_type === 'physical'">
|
|
||||||
{{ event.physical_address.streetAddress }}
|
|
||||||
</span></v-list-tile-title>
|
|
||||||
<v-list-tile-sub-title>Mobile</v-list-tile-sub-title>
|
|
||||||
</v-list-tile-content>
|
|
||||||
</v-list-tile>
|
</v-list-tile>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-layout>
|
</v-menu>
|
||||||
</v-flex>
|
</v-card-title>
|
||||||
<v-flex md8 xs12>
|
</v-flex>
|
||||||
<p>
|
</v-layout>
|
||||||
<h2>Details</h2>
|
</v-container>
|
||||||
<vue-markdown :source="event.description" v-if="event.description" :toc-first-level="3"></vue-markdown>
|
</v-img> -->
|
||||||
</p>
|
<v-container grid-list-md>
|
||||||
<v-subheader>Participants</v-subheader>
|
<v-layout row wrap>
|
||||||
<!-- <v-flex md2 v-for="participant in event.participants" :key="participant.actor.uuid">
|
<v-flex md10>
|
||||||
<router-link :to="{name: 'Account', params: { name: participant.actor.preferredUsername }}">
|
<v-spacer></v-spacer>
|
||||||
<v-card>
|
<span class="subheading grey--text">{{ event.begins_on | formatDay }}</span>
|
||||||
<v-avatar size="75px">
|
<h1 class="display-1">{{ event.title }}</h1>
|
||||||
<img v-if="!participant.actor.avatarUrl"
|
<div>
|
||||||
class="img-circle elevation-7 mb-1"
|
<!-- <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
|
||||||
src="https://picsum.photos/125/125/"
|
<v-avatar size="25px">
|
||||||
>
|
<img class="img-circle elevation-7 mb-1"
|
||||||
<img v-else
|
:src="event.organizer_actor.avatarUrl"
|
||||||
class="img-circle elevation-7 mb-1"
|
>
|
||||||
:src="participant.actor.avatarUrl"
|
</v-avatar>
|
||||||
>
|
</router-link> -->
|
||||||
</v-avatar>
|
<!-- <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span> -->
|
||||||
<v-card-title>
|
</div>
|
||||||
<span>{{ participant.actor.preferredUsername }}</span>
|
<!-- <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-title>
|
<v-card-text v-if="event.description">
|
||||||
</v-card>
|
<vue-markdown :source="event.description"></vue-markdown>
|
||||||
</router-link>
|
</v-card-text>
|
||||||
</v-flex> -->
|
</v-flex>
|
||||||
</v-flex>
|
<!-- <v-flex md2>
|
||||||
<span v-if="event.participants.length === 0">No participants yet.</span>
|
<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><span v-if="event.address_type === 'physical'">
|
||||||
|
{{ event.physical_address.streetAddress }}
|
||||||
|
</span></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-layout>
|
||||||
</v-container>
|
</v-flex>
|
||||||
</v-card>
|
<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-flex>
|
||||||
</v-layout>
|
</v-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import VueMarkdown from 'vue-markdown';
|
import { FETCH_EVENT } from '@/graphql/event';
|
||||||
import { FETCH_EVENT } from '@/graphql/event';
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
import { LOGGED_ACTOR } from '@/graphql/actor';
|
import VueMarkdown from 'vue-markdown';
|
||||||
|
|
||||||
export default {
|
@Component({
|
||||||
name: 'Home',
|
components: {
|
||||||
components: {
|
VueMarkdown,
|
||||||
VueMarkdown,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
event: {
|
|
||||||
name: '',
|
|
||||||
slug: '',
|
|
||||||
title: '',
|
|
||||||
uuid: this.uuid,
|
|
||||||
description: '',
|
|
||||||
organizer: {
|
|
||||||
id: null,
|
|
||||||
username: null,
|
|
||||||
},
|
|
||||||
participants: [],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
apollo: {
|
|
||||||
event: {
|
|
||||||
query: FETCH_EVENT,
|
|
||||||
variables() {
|
|
||||||
return {
|
|
||||||
uuid: this.uuid,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
// loggedActor: {
|
apollo: {
|
||||||
// query: LOGGED_ACTOR,
|
event: {
|
||||||
// }
|
query: FETCH_EVENT,
|
||||||
},
|
variables() {
|
||||||
methods: {
|
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() {
|
deleteEvent() {
|
||||||
const router = this.$router;
|
const router = this.$router;
|
||||||
eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
|
// FIXME: remove eventFetch
|
||||||
.then(() => router.push({ name: 'EventList' }));
|
// eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
|
||||||
},
|
// .then(() => router.push({ name: 'EventList' }));
|
||||||
|
}
|
||||||
|
|
||||||
joinEvent() {
|
joinEvent() {
|
||||||
eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
|
||||||
.then((data) => {
|
// .then(response => response.json())
|
||||||
console.log(data);
|
// .then((data) => {
|
||||||
});
|
// console.log(data);
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
leaveEvent() {
|
leaveEvent() {
|
||||||
eventFetch(`/events/${this.uuid}/leave`, this.$store)
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch(`/events/${this.uuid}/leave`, this.$store)
|
||||||
.then((data) => {
|
// .then(response => response.json())
|
||||||
console.log(data);
|
// .then((data) => {
|
||||||
});
|
// console.log(data);
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
downloadIcsEvent() {
|
downloadIcsEvent() {
|
||||||
eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.text())
|
// eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||||
.then((response) => {
|
// .then(response => response.text())
|
||||||
const blob = new Blob([response], { type: 'text/calendar' });
|
// .then((response) => {
|
||||||
const link = document.createElement('a');
|
// const blob = new Blob([ response ], { type: 'text/calendar' });
|
||||||
link.href = window.URL.createObjectURL(blob);
|
// const link = document.createElement('a');
|
||||||
link.download = `${this.event.title}.ics`;
|
// link.href = window.URL.createObjectURL(blob);
|
||||||
document.body.appendChild(link);
|
// link.download = `${this.event.title}.ics`;
|
||||||
link.click();
|
// document.body.appendChild(link);
|
||||||
document.body.removeChild(link);
|
// link.click();
|
||||||
});
|
// document.body.removeChild(link);
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
// actorIsParticipant() {
|
// actorIsParticipant() {
|
||||||
// return this.loggedActor && this.event.participants.map(participant => participant.actor.preferredUsername).includes(this.loggedActor.preferredUsername) || this.actorIsOrganizer();
|
// return this.loggedActor && this.event.participants.map(participant => participant.actor.preferredUsername).includes(this.loggedActor.preferredUsername) || this.actorIsOrganizer();
|
||||||
// },
|
// }
|
||||||
|
//
|
||||||
// actorIsOrganizer() {
|
// actorIsOrganizer() {
|
||||||
// return this.loggedActor && this.loggedActor.preferredUsername === this.event.organizer.preferredUsername;
|
// return this.loggedActor && this.loggedActor.preferredUsername === this.event.organizer.preferredUsername;
|
||||||
// },
|
// }
|
||||||
},
|
}
|
||||||
props: {
|
|
||||||
uuid: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
<style>
|
<style>
|
||||||
.v-card__media__background {
|
.v-card__media__background {
|
||||||
filter: contrast(0.4);
|
filter: contrast(0.4);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,98 +1,102 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-layout>
|
<v-layout>
|
||||||
<v-flex xs12 sm8 offset-sm2>
|
<v-flex xs12 sm8 offset-sm2>
|
||||||
<v-card>
|
<v-card>
|
||||||
<h1>{{ $t("event.list.title") }}</h1>
|
<h1>{{ $t('event.list.title') }}</h1>
|
||||||
|
|
||||||
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
<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-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-icon left>location_city</v-icon>
|
||||||
</v-chip>
|
{{ locationText }}
|
||||||
<v-container grid-list-sm fluid>
|
</v-chip>
|
||||||
<v-layout row wrap>
|
<v-container grid-list-sm fluid>
|
||||||
<v-flex xs4 v-for="event in events" :key="event.id">
|
<v-layout row wrap>
|
||||||
<v-card>
|
<v-flex xs4 v-for="event in events" :key="event.id">
|
||||||
<v-card-media v-if="!event.image"
|
<v-card>
|
||||||
class="white--text"
|
<v-card-media v-if="!event.image"
|
||||||
height="200px"
|
class="white--text"
|
||||||
src="https://picsum.photos/g/400/200/"
|
height="200px"
|
||||||
>
|
src="https://picsum.photos/g/400/200/"
|
||||||
<v-container fill-height fluid>
|
>
|
||||||
<v-layout fill-height>
|
<v-container fill-height fluid>
|
||||||
<v-flex xs12 align-end flexbox>
|
<v-layout fill-height>
|
||||||
<span class="headline black--text">{{ event.title }}</span>
|
<v-flex xs12 align-end flexbox>
|
||||||
</v-flex>
|
<span class="headline black--text">{{ event.title }}</span>
|
||||||
</v-layout>
|
</v-flex>
|
||||||
</v-container>
|
</v-layout>
|
||||||
</v-card-media>
|
</v-container>
|
||||||
<v-card-title primary-title>
|
</v-card-media>
|
||||||
<div>
|
<v-card-title primary-title>
|
||||||
|
<div>
|
||||||
<span class="grey--text">{{ event.begins_on | formatDate }}</span><br>
|
<span class="grey--text">{{ event.begins_on | formatDate }}</span><br>
|
||||||
<router-link :to="{name: 'Account', params: { name: event.organizer.username } }">
|
<router-link :to="{name: 'Account', params: { name: event.organizer.username } }">
|
||||||
<v-avatar size="25px">
|
<v-avatar size="25px">
|
||||||
<img class="img-circle elevation-7 mb-1"
|
<img class="img-circle elevation-7 mb-1"
|
||||||
:src="event.organizer.avatar"
|
:src="event.organizer.avatar"
|
||||||
>
|
>
|
||||||
</v-avatar>
|
</v-avatar>
|
||||||
</router-link>
|
</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>
|
<span v-if="event.organizer">Organisé par <router-link
|
||||||
</div>
|
:to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
|
||||||
</v-card-title>
|
</div>
|
||||||
<v-card-actions>
|
</v-card-title>
|
||||||
<v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
|
<v-card-actions>
|
||||||
<v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
|
<v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
|
||||||
<v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn>
|
<v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
|
||||||
</v-card-actions>
|
<v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn>
|
||||||
</v-card>
|
</v-card-actions>
|
||||||
</v-flex>
|
</v-card>
|
||||||
</v-layout>
|
</v-flex>
|
||||||
</v-container>
|
</v-layout>
|
||||||
<router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
|
</v-container>
|
||||||
</v-card>
|
<router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
|
||||||
</v-flex>
|
</v-card>
|
||||||
|
</v-flex>
|
||||||
</v-layout>
|
</v-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import ngeohash from 'ngeohash';
|
import ngeohash from 'ngeohash';
|
||||||
import VueMarkdown from 'vue-markdown';
|
import VueMarkdown from 'vue-markdown';
|
||||||
import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
|
import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
|
||||||
|
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||||
|
|
||||||
export default {
|
@Component({
|
||||||
name: 'EventList',
|
components: {
|
||||||
components: {
|
VCardTitle: VCardTitle as any,
|
||||||
VCardTitle,
|
VueMarkdown,
|
||||||
VueMarkdown,
|
},
|
||||||
},
|
})
|
||||||
data() {
|
export default class EventList extends Vue {
|
||||||
return {
|
@Prop(String) location!: string;
|
||||||
events: [],
|
|
||||||
loading: true,
|
events = [];
|
||||||
locationChip: false,
|
loading = true;
|
||||||
locationText: '',
|
locationChip = false;
|
||||||
};
|
locationText = '';
|
||||||
},
|
|
||||||
props: ['location'],
|
created() {
|
||||||
created() {
|
this.fetchData(this.$router.currentRoute.params[ 'location' ]);
|
||||||
this.fetchData(this.$router.currentRoute.params.location);
|
}
|
||||||
},
|
|
||||||
watch: {
|
beforeRouteUpdate(to, from, next) {
|
||||||
locationChip(val) {
|
this.fetchData(to.params.location);
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
|
||||||
|
@Watch('locationChip')
|
||||||
|
onLocationChipChange(val) {
|
||||||
if (val === false) {
|
if (val === false) {
|
||||||
this.$router.push({ name: 'EventList' });
|
this.$router.push({ name: 'EventList' });
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
},
|
|
||||||
beforeRouteUpdate(to, from, next) {
|
|
||||||
this.fetchData(to.params.location);
|
|
||||||
next();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
geocode(lat, lon) {
|
geocode(lat, lon) {
|
||||||
console.log({ lat, lon });
|
console.log({ lat, lon });
|
||||||
console.log(ngeohash.encode(lat, lon, 10));
|
console.log(ngeohash.encode(lat, lon, 10));
|
||||||
return ngeohash.encode(lat, lon, 10);
|
return ngeohash.encode(lat, lon, 10);
|
||||||
},
|
}
|
||||||
|
|
||||||
fetchData(location) {
|
fetchData(location) {
|
||||||
let queryString = '/events';
|
let queryString = '/events';
|
||||||
if (location) {
|
if (location) {
|
||||||
@ -101,37 +105,43 @@ export default {
|
|||||||
this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
|
this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
|
||||||
}
|
}
|
||||||
this.locationChip = true;
|
this.locationChip = true;
|
||||||
eventFetch(queryString, this.$store)
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch(queryString, this.$store)
|
||||||
.then((response) => {
|
// .then(response => response.json())
|
||||||
this.loading = false;
|
// .then((response) => {
|
||||||
this.events = response.data;
|
// this.loading = false;
|
||||||
console.log(this.events);
|
// this.events = response.data;
|
||||||
});
|
// console.log(this.events);
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
deleteEvent(event) {
|
deleteEvent(event) {
|
||||||
const router = this.$router;
|
const router = this.$router;
|
||||||
eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
|
// FIXME: remove eventFetch
|
||||||
.then(() => router.push('/events'));
|
// eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
|
||||||
},
|
// .then(() => router.push('/events'));
|
||||||
|
}
|
||||||
|
|
||||||
viewEvent(event) {
|
viewEvent(event) {
|
||||||
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
|
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
|
||||||
},
|
}
|
||||||
|
|
||||||
downloadIcsEvent(event) {
|
downloadIcsEvent(event) {
|
||||||
eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.text())
|
// eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||||
.then((response) => {
|
// .then(response => response.text())
|
||||||
const blob = new Blob([response], { type: 'text/calendar' });
|
// .then((response) => {
|
||||||
const link = document.createElement('a');
|
// const blob = new Blob([ response ], { type: 'text/calendar' });
|
||||||
link.href = window.URL.createObjectURL(blob);
|
// const link = document.createElement('a');
|
||||||
link.download = `${event.title}.ics`;
|
// link.href = window.URL.createObjectURL(blob);
|
||||||
document.body.appendChild(link);
|
// link.download = `${event.title}.ics`;
|
||||||
link.click();
|
// document.body.appendChild(link);
|
||||||
document.body.removeChild(link);
|
// link.click();
|
||||||
});
|
// document.body.removeChild(link);
|
||||||
},
|
// });
|
||||||
},
|
}
|
||||||
};
|
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
@ -13,10 +13,10 @@
|
|||||||
</v-flex>
|
</v-flex>
|
||||||
<v-flex xs12>
|
<v-flex xs12>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
label="Title"
|
label="Title"
|
||||||
v-model="group.name"
|
v-model="group.name"
|
||||||
:counter="100"
|
:counter="100"
|
||||||
required
|
required
|
||||||
></v-text-field>
|
></v-text-field>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
<v-flex md6>
|
<v-flex md6>
|
||||||
@ -36,27 +36,27 @@
|
|||||||
></vue-markdown>
|
></vue-markdown>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
<!--<v-flex md12>-->
|
<!--<v-flex md12>-->
|
||||||
<!--<vuetify-google-autocomplete-->
|
<!--<vuetify-google-autocomplete-->
|
||||||
<!--id="map"-->
|
<!--id="map"-->
|
||||||
<!--append-icon="search"-->
|
<!--append-icon="search"-->
|
||||||
<!--classname="form-control"-->
|
<!--classname="form-control"-->
|
||||||
<!--placeholder="Start typing"-->
|
<!--placeholder="Start typing"-->
|
||||||
<!--enable-geolocation-->
|
<!--enable-geolocation-->
|
||||||
<!--v-on:placechanged="getAddressData"-->
|
<!--v-on:placechanged="getAddressData"-->
|
||||||
<!-->-->
|
<!-->-->
|
||||||
<!--</vuetify-google-autocomplete>-->
|
<!--</vuetify-google-autocomplete>-->
|
||||||
<!--</v-flex>-->
|
<!--</v-flex>-->
|
||||||
<!--<v-flex md12>-->
|
<!--<v-flex md12>-->
|
||||||
<!--<v-select-->
|
<!--<v-select-->
|
||||||
<!--v-bind:items="categories"-->
|
<!--v-bind:items="categories"-->
|
||||||
<!--v-model="group.category"-->
|
<!--v-model="group.category"-->
|
||||||
<!--item-text="title"-->
|
<!--item-text="title"-->
|
||||||
<!--item-value="@id"-->
|
<!--item-value="@id"-->
|
||||||
<!--label="Categories"-->
|
<!--label="Categories"-->
|
||||||
<!--single-line-->
|
<!--single-line-->
|
||||||
<!--bottom-->
|
<!--bottom-->
|
||||||
<!--types="(cities)"-->
|
<!--types="(cities)"-->
|
||||||
<!--></v-select>-->
|
<!--></v-select>-->
|
||||||
<!--</v-flex>-->
|
<!--</v-flex>-->
|
||||||
</v-layout>
|
</v-layout>
|
||||||
</v-form>
|
</v-form>
|
||||||
@ -64,51 +64,54 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import VueMarkdown from 'vue-markdown';
|
import VueMarkdown from 'vue-markdown';
|
||||||
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
|
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
|
||||||
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
export default {
|
@Component({
|
||||||
name: 'create-group',
|
components: {
|
||||||
|
VueMarkdown,
|
||||||
components: {
|
VuetifyGoogleAutocomplete,
|
||||||
VueMarkdown,
|
},
|
||||||
VuetifyGoogleAutocomplete,
|
})
|
||||||
},
|
export default class CreateGroup extends Vue {
|
||||||
data() {
|
e1 = 0;
|
||||||
return {
|
// FIXME: correctly type group
|
||||||
e1: 0,
|
group: { preferred_username: string, name: string, summary: string, address?: any } = {
|
||||||
group: {
|
preferred_username: '',
|
||||||
preferred_username: '',
|
name: '',
|
||||||
name: '',
|
summary: '',
|
||||||
summary: '',
|
// category: null,
|
||||||
// category: null,
|
|
||||||
},
|
|
||||||
categories: [],
|
|
||||||
};
|
};
|
||||||
},
|
categories = [];
|
||||||
mounted() {
|
|
||||||
this.fetchCategories();
|
mounted() {
|
||||||
},
|
this.fetchCategories();
|
||||||
methods: {
|
}
|
||||||
|
|
||||||
create() {
|
create() {
|
||||||
// this.group.organizer = "/accounts/" + this.$store.state.user.id;
|
// this.group.organizer = "/accounts/" + this.$store.state.user.id;
|
||||||
|
|
||||||
eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
|
||||||
.then((data) => {
|
// .then(response => response.json())
|
||||||
this.loading = false;
|
// .then((data) => {
|
||||||
this.$router.push({ path: 'Group', params: { id: data.id } });
|
// this.loading = false;
|
||||||
});
|
// this.$router.push({ path: 'Group', params: { id: data.id } });
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
fetchCategories() {
|
fetchCategories() {
|
||||||
eventFetch('/categories', this.$store)
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch('/categories', this.$store)
|
||||||
.then((data) => {
|
// .then(response => response.json())
|
||||||
this.loading = false;
|
// .then((data) => {
|
||||||
this.categories = data.data;
|
// this.loading = false;
|
||||||
});
|
// this.categories = data.data;
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
getAddressData(addressData) {
|
getAddressData(addressData) {
|
||||||
this.group.address = {
|
this.group.address = {
|
||||||
geo: {
|
geo: {
|
||||||
@ -121,9 +124,9 @@ export default {
|
|||||||
postalCode: addressData.postal_code,
|
postalCode: addressData.postal_code,
|
||||||
streetAddress: `${addressData.street_number} ${addressData.route}`,
|
streetAddress: `${addressData.street_number} ${addressData.route}`,
|
||||||
};
|
};
|
||||||
},
|
}
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
</v-btn>
|
</v-btn>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<!--<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.actor.id === actor.id">-->
|
<!--<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.actor.id === actor.id">-->
|
||||||
<!--<v-icon>edit</v-icon>-->
|
<!--<v-icon>edit</v-icon>-->
|
||||||
<!--</v-btn>-->
|
<!--</v-btn>-->
|
||||||
<v-btn icon>
|
<v-btn icon>
|
||||||
<v-icon>more_vert</v-icon>
|
<v-icon>more_vert</v-icon>
|
||||||
@ -42,12 +42,12 @@
|
|||||||
@{{ group.domain }}
|
@{{ group.domain }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<v-chip color="indigo" text-color="white">
|
<v-chip color="indigo" text-color="white">
|
||||||
<v-avatar>
|
<v-avatar>
|
||||||
<v-icon>group</v-icon>
|
<v-icon>group</v-icon>
|
||||||
</v-avatar>
|
</v-avatar>
|
||||||
Group
|
Group
|
||||||
</v-chip>
|
</v-chip>
|
||||||
</div>
|
</div>
|
||||||
<v-card-text v-if="group.description" v-html="group.description"></v-card-text>
|
<v-card-text v-if="group.description" v-html="group.description"></v-card-text>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
@ -119,9 +119,9 @@
|
|||||||
<v-flex v-for="event in group.participatingEvents" :key="event.id">
|
<v-flex v-for="event in group.participatingEvents" :key="event.id">
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-media
|
<v-card-media
|
||||||
class="black--text"
|
class="black--text"
|
||||||
height="200px"
|
height="200px"
|
||||||
src="https://picsum.photos/400/200/"
|
src="https://picsum.photos/400/200/"
|
||||||
>
|
>
|
||||||
<v-container fill-height fluid>
|
<v-container fill-height fluid>
|
||||||
<v-layout fill-height>
|
<v-layout fill-height>
|
||||||
@ -135,7 +135,10 @@
|
|||||||
<div>
|
<div>
|
||||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||||
<p>{{ event.description }}</p>
|
<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>
|
<p v-if="event.organizer">Organisé par
|
||||||
|
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
|
||||||
|
</router-link>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
@ -160,9 +163,9 @@
|
|||||||
<v-flex v-for="event in group.organizingEvents" :key="event.id">
|
<v-flex v-for="event in group.organizingEvents" :key="event.id">
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-media
|
<v-card-media
|
||||||
class="black--text"
|
class="black--text"
|
||||||
height="200px"
|
height="200px"
|
||||||
src="https://picsum.photos/400/200/"
|
src="https://picsum.photos/400/200/"
|
||||||
>
|
>
|
||||||
<v-container fill-height fluid>
|
<v-container fill-height fluid>
|
||||||
<v-layout fill-height>
|
<v-layout fill-height>
|
||||||
@ -176,7 +179,10 @@
|
|||||||
<div>
|
<div>
|
||||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||||
<p>{{ event.description }}</p>
|
<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>
|
<p v-if="event.organizer">Organisé par
|
||||||
|
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
|
||||||
|
</router-link>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
@ -201,38 +207,35 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||||
name: 'Group',
|
|
||||||
data() {
|
@Component
|
||||||
return {
|
export default class Group extends Vue {
|
||||||
group: null,
|
@Prop({ type: String, required: true }) name!: string;
|
||||||
loading: true,
|
|
||||||
};
|
group = null;
|
||||||
},
|
loading = true;
|
||||||
props: {
|
|
||||||
name: {
|
created() {
|
||||||
type: String,
|
this.fetchData();
|
||||||
required: true,
|
}
|
||||||
},
|
|
||||||
},
|
@Watch('$route')
|
||||||
created() {
|
onRouteChanged() {
|
||||||
this.fetchData();
|
// call again the method if the route changes
|
||||||
},
|
this.fetchData();
|
||||||
watch: {
|
}
|
||||||
// call again the method if the route changes
|
|
||||||
$route: 'fetchData',
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
fetchData() {
|
fetchData() {
|
||||||
eventFetch(`/actors/${this.name}`, this.$store)
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch(`/actors/${this.name}`, this.$store)
|
||||||
.then((response) => {
|
// .then(response => response.json())
|
||||||
this.group = response.data;
|
// .then((response) => {
|
||||||
this.loading = false;
|
// this.group = response.data;
|
||||||
console.log(this.group);
|
// this.loading = false;
|
||||||
});
|
// console.log(this.group);
|
||||||
},
|
// });
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -22,11 +22,16 @@
|
|||||||
<v-card-title>
|
<v-card-title>
|
||||||
<div>
|
<div>
|
||||||
<p>{{ group.summary }}</p>
|
<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>
|
<p v-if="group.organizer">Organisé par
|
||||||
|
<router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-actions>
|
<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="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="orange" @click="viewActor(group)">Explore</v-btn>
|
||||||
<v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn>
|
<v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
@ -37,48 +42,54 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
|
||||||
name: 'GroupList',
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
data() {
|
|
||||||
return {
|
@Component
|
||||||
groups: [],
|
export default class GroupList extends Vue {
|
||||||
loading: true,
|
groups = [];
|
||||||
};
|
loading = true;
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
this.fetchData();
|
this.fetchData();
|
||||||
},
|
}
|
||||||
methods: {
|
|
||||||
username_with_domain(actor) {
|
usernameWithDomain(actor) {
|
||||||
return actor.username + (actor.domain === null ? '' : `@${actor.domain}`);
|
return actor.username + (actor.domain === null ? '' : `@${actor.domain}`);
|
||||||
},
|
}
|
||||||
|
|
||||||
fetchData() {
|
fetchData() {
|
||||||
eventFetch('/groups', this.$store)
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch('/groups', this.$store)
|
||||||
.then((data) => {
|
// .then(response => response.json())
|
||||||
console.log(data);
|
// .then((data) => {
|
||||||
this.loading = false;
|
// console.log(data);
|
||||||
this.groups = data.data;
|
// this.loading = false;
|
||||||
});
|
// this.groups = data.data;
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
deleteGroup(group) {
|
deleteGroup(group) {
|
||||||
const router = this.$router;
|
const router = this.$router;
|
||||||
eventFetch(`/groups/${this.username_with_domain(group)}`, this.$store, { method: 'DELETE' })
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch(`/groups/${this.usernameWithDomain(group)}`, this.$store, { method: 'DELETE' })
|
||||||
.then(() => router.push('/groups'));
|
// .then(response => response.json())
|
||||||
},
|
// .then(() => router.push('/groups'));
|
||||||
|
}
|
||||||
|
|
||||||
viewActor(actor) {
|
viewActor(actor) {
|
||||||
this.$router.push({ name: 'Group', params: { name: this.username_with_domain(actor) } });
|
this.$router.push({ name: 'Group', params: { name: this.usernameWithDomain(actor) } });
|
||||||
},
|
}
|
||||||
|
|
||||||
joinGroup(group) {
|
joinGroup(group) {
|
||||||
const router = this.$router;
|
const router = this.$router;
|
||||||
eventFetch(`/groups/${this.username_with_domain(group)}/join`, this.$store, { method: 'POST' })
|
// FIXME: remove eventFetch
|
||||||
.then(response => response.json())
|
// eventFetch(`/groups/${this.usernameWithDomain(group)}/join`, this.$store, { method: 'POST' })
|
||||||
.then(() => router.push({ name: 'Group', params: { name: this.username_with_domain(group) } }));
|
// .then(response => response.json())
|
||||||
},
|
// .then(() => router.push({ name: 'Group', params: { name: this.usernameWithDomain(group) } }));
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
@ -1,128 +1,134 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container>
|
<v-container>
|
||||||
<v-img
|
<v-img
|
||||||
:gradient="gradient"
|
:gradient="gradient"
|
||||||
src="https://picsum.photos/1200/900"
|
src="https://picsum.photos/1200/900"
|
||||||
dark
|
dark
|
||||||
height="300"
|
height="300"
|
||||||
v-if="!user"
|
v-if="!user"
|
||||||
>
|
>
|
||||||
<v-container fill-height>
|
<v-container fill-height>
|
||||||
<v-layout align-center>
|
<v-layout align-center>
|
||||||
<v-flex text-xs-center>
|
<v-flex text-xs-center>
|
||||||
<h1 class="display-3">Find events you like</h1>
|
<h1 class="display-3">Find events you like</h1>
|
||||||
<h2>Share it with Mobilizon</h2>
|
<h2>Share it with Mobilizon</h2>
|
||||||
<v-btn :to="{ name: 'Register' }"><translate>Register</translate></v-btn>
|
<v-btn :to="{ name: 'Register' }">
|
||||||
</v-flex>
|
<translate>Register</translate>
|
||||||
</v-layout>
|
</v-btn>
|
||||||
</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-flex>
|
||||||
</v-layout>
|
</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>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import ngeohash from 'ngeohash';
|
import ngeohash from 'ngeohash';
|
||||||
import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
|
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
||||||
import { FETCH_EVENTS } from '@/graphql/event';
|
import { FETCH_EVENTS } from '@/graphql/event';
|
||||||
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
export default {
|
@Component({
|
||||||
name: 'Home',
|
apollo: {
|
||||||
data() {
|
events: {
|
||||||
return {
|
query: FETCH_EVENTS,
|
||||||
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 },
|
export default class Home extends Vue {
|
||||||
country: { name: null },
|
gradient = 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)';
|
||||||
actor: JSON.parse(localStorage.getItem(AUTH_USER_ACTOR)),
|
searchTerm = null;
|
||||||
user: localStorage.getItem(AUTH_USER_ID),
|
location_field = {
|
||||||
|
loading: false,
|
||||||
|
search: null,
|
||||||
};
|
};
|
||||||
},
|
events = [];
|
||||||
apollo: {
|
locations = [];
|
||||||
events: {
|
city = { name: null };
|
||||||
query: FETCH_EVENTS,
|
country = { name: null };
|
||||||
},
|
// FIXME: correctly parse local storage
|
||||||
},
|
actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}');
|
||||||
computed: {
|
user = localStorage.getItem(AUTH_USER_ID);
|
||||||
displayed_name() {
|
|
||||||
|
get displayed_name() {
|
||||||
return this.actor.name === null ? this.actor.preferredUsername : this.actor.name;
|
return this.actor.name === null ? this.actor.preferredUsername : this.actor.name;
|
||||||
},
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
fetchLocations() {
|
fetchLocations() {
|
||||||
eventFetch('/locations', this.$store)
|
// FIXME: remove eventFetch
|
||||||
.then(response => (response.json()))
|
// eventFetch('/locations', this.$store)
|
||||||
.then((response) => {
|
// .then(response => (response.json()))
|
||||||
this.locations = response;
|
// .then((response) => {
|
||||||
});
|
// this.locations = response;
|
||||||
},
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
geoLocalize() {
|
geoLocalize() {
|
||||||
const router = this.$router;
|
const router = this.$router;
|
||||||
if (sessionStorage.getItem('City')) {
|
const sessionCity = sessionStorage.getItem('City')
|
||||||
router.push({ name: 'EventList', params: { location: localStorage.getItem('City') } });
|
if (sessionCity) {
|
||||||
|
router.push({ name: 'EventList', params: { location: sessionCity } });
|
||||||
} else {
|
} else {
|
||||||
navigator.geolocation.getCurrentPosition((pos) => {
|
navigator.geolocation.getCurrentPosition((pos) => {
|
||||||
const crd = pos.coords;
|
const crd = pos.coords;
|
||||||
@ -136,27 +142,29 @@ export default {
|
|||||||
maximumAge: 0,
|
maximumAge: 0,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
getAddressData(addressData) {
|
getAddressData(addressData) {
|
||||||
const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11);
|
const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11);
|
||||||
sessionStorage.setItem('City', geohash);
|
sessionStorage.setItem('City', geohash);
|
||||||
this.$router.push({ name: 'EventList', params: { location: geohash } });
|
this.$router.push({ name: 'EventList', params: { location: geohash } });
|
||||||
},
|
}
|
||||||
|
|
||||||
viewEvent(event) {
|
viewEvent(event) {
|
||||||
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
|
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
|
||||||
},
|
}
|
||||||
|
|
||||||
ipLocation() {
|
ipLocation() {
|
||||||
return this.city.name ? this.city.name : this.country.name;
|
return this.city.name ? this.city.name : this.country.name;
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.search-autocomplete {
|
.search-autocomplete {
|
||||||
border: 1px solid #dbdbdb;
|
border: 1px solid #dbdbdb;
|
||||||
color: rgba(0,0,0,.87);
|
color: rgba(0, 0, 0, .87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.events-nearby {
|
.events-nearby {
|
||||||
|
@ -24,29 +24,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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[] = [];
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
description: 'Paris, France',
|
|
||||||
center: { lat: 48.85, lng: 2.35 },
|
|
||||||
markers: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: ['address'],
|
|
||||||
methods: {
|
|
||||||
setPlace(place) {
|
setPlace(place) {
|
||||||
this.center = {
|
this.center = {
|
||||||
lat: place.geometry.location.lat(),
|
lat: place.geometry.location.lat(),
|
||||||
lng: place.geometry.location.lng(),
|
lng: place.geometry.location.lng(),
|
||||||
};
|
};
|
||||||
this.markers = [{
|
this.markers = [ {
|
||||||
position: { lat: this.center.lat, lng: this.center.lng },
|
position: { lat: this.center.lat, lng: this.center.lng },
|
||||||
}];
|
} ];
|
||||||
|
|
||||||
this.$emit('input', place.formatted_address);
|
this.$emit('input', place.formatted_address);
|
||||||
},
|
}
|
||||||
},
|
};
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -74,42 +74,33 @@
|
|||||||
</v-list>
|
</v-list>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<v-btn flat @click="notificationMenu = false"><translate>Close</translate></v-btn>
|
<v-btn flat @click="notificationMenu = false">
|
||||||
<v-btn color="primary" flat @click="notificationMenu = false"><translate>Save</translate></v-btn>
|
<translate>Close</translate>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn color="primary" flat @click="notificationMenu = false">
|
||||||
|
<translate>Save</translate>
|
||||||
|
</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-menu>
|
</v-menu>
|
||||||
<v-btn v-if="!user" :to="{ name: 'Login' }"><translate>Login</translate></v-btn>
|
<v-btn v-if="!user" :to="{ name: 'Login' }">
|
||||||
|
<translate>Login</translate>
|
||||||
|
</v-btn>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<style>
|
||||||
import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
|
nav.v-toolbar .v-input__slot {
|
||||||
import {SEARCH} from '@/graphql/search';
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
export default {
|
<script lang="ts">
|
||||||
name: 'NavBar',
|
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||||
props: {
|
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
||||||
toggleDrawer: {
|
import { SEARCH } from '@/graphql/search';
|
||||||
type: Function,
|
|
||||||
required: true,
|
@Component({
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
notificationMenu: false,
|
|
||||||
notifications: [
|
|
||||||
{ header: 'Coucou' },
|
|
||||||
{ title: "T'as une notification", subtitle: 'Et elle est cool' },
|
|
||||||
],
|
|
||||||
model: null,
|
|
||||||
search: [],
|
|
||||||
searchText: null,
|
|
||||||
searchSelect: null,
|
|
||||||
actor: localStorage.getItem(AUTH_USER_ACTOR),
|
|
||||||
user: localStorage.getItem(AUTH_USER_ID),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
apollo: {
|
apollo: {
|
||||||
search: {
|
search: {
|
||||||
query: SEARCH,
|
query: SEARCH,
|
||||||
@ -123,47 +114,56 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
})
|
||||||
model(val) {
|
export default class NavBar extends Vue {
|
||||||
switch(val.__typename) {
|
@Prop({ required: true, type: Function }) toggleDrawer!: Function;
|
||||||
case 'Event':
|
|
||||||
this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
|
notificationMenu = false;
|
||||||
break;
|
notifications = [
|
||||||
|
{ 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);
|
||||||
|
user = localStorage.getItem(AUTH_USER_ID);
|
||||||
|
|
||||||
|
get items() {
|
||||||
|
return this.search.map(searchEntry => {
|
||||||
|
switch (searchEntry.__typename) {
|
||||||
case 'Actor':
|
case 'Actor':
|
||||||
this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
|
searchEntry.label = searchEntry.preferredUsername + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
|
||||||
|
break;
|
||||||
|
case 'Event':
|
||||||
|
searchEntry.label = searchEntry.title;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
return searchEntry;
|
||||||
},
|
});
|
||||||
computed: {
|
}
|
||||||
items() {
|
|
||||||
return this.search.map(searchEntry => {
|
@Watch('model')
|
||||||
switch (searchEntry.__typename) {
|
onModelChanged(val) {
|
||||||
case 'Actor':
|
switch (val.__typename) {
|
||||||
searchEntry.label = searchEntry.preferredUsername + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
|
case 'Event':
|
||||||
break;
|
this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
|
||||||
case 'Event':
|
break;
|
||||||
searchEntry.label = searchEntry.title;
|
case 'Actor':
|
||||||
break;
|
this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
|
||||||
}
|
break;
|
||||||
return searchEntry;
|
}
|
||||||
});
|
}
|
||||||
},
|
|
||||||
},
|
username_with_domain(actor) {
|
||||||
methods: {
|
return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
|
||||||
username_with_domain(actor) {
|
}
|
||||||
return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
|
|
||||||
},
|
enter() {
|
||||||
enter() {
|
console.log('enter');
|
||||||
console.log('enter');
|
this.$apollo.queries['search'].refetch();
|
||||||
this.$apollo.queries.search.refetch();
|
}
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
nav.v-toolbar .v-input__slot {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
</style>
|
</script>
|
||||||
|
@ -11,14 +11,16 @@ import 'vuetify/dist/vuetify.min.css';
|
|||||||
import App from '@/App.vue';
|
import App from '@/App.vue';
|
||||||
import router from '@/router';
|
import router from '@/router';
|
||||||
// import store from './store';
|
// import store from './store';
|
||||||
import translations from '@/i18n/translations.json';
|
|
||||||
import { createProvider } from './vue-apollo';
|
import { createProvider } from './vue-apollo';
|
||||||
|
|
||||||
|
const translations = require('@/i18n/translations.json');
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
Vue.use(VueMarkdown);
|
Vue.use(VueMarkdown);
|
||||||
Vue.use(Vuetify);
|
Vue.use(Vuetify);
|
||||||
const language = window.navigator.userLanguage || window.navigator.language;
|
|
||||||
|
const language = (window.navigator as any).userLanguage || window.navigator.language;
|
||||||
moment.locale(language);
|
moment.locale(language);
|
||||||
|
|
||||||
Vue.filter('formatDate', value => (value ? moment(String(value)).format('LLLL') : null));
|
Vue.filter('formatDate', value => (value ? moment(String(value)).format('LLLL') : null));
|
||||||
@ -33,8 +35,8 @@ Vue.config.language = language.replace('-', '_');
|
|||||||
|
|
||||||
/* eslint-disable no-new */
|
/* eslint-disable no-new */
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
|
||||||
router,
|
router,
|
||||||
|
el: '#app',
|
||||||
template: '<App/>',
|
template: '<App/>',
|
||||||
apolloProvider: createProvider(),
|
apolloProvider: createProvider(),
|
||||||
components: { App },
|
components: { App },
|
@ -5,8 +5,7 @@ import { register } from 'register-service-worker';
|
|||||||
if (process.env.NODE_ENV === 'production') {
|
if (process.env.NODE_ENV === 'production') {
|
||||||
register(`${process.env.BASE_URL}service-worker.js`, {
|
register(`${process.env.BASE_URL}service-worker.js`, {
|
||||||
ready() {
|
ready() {
|
||||||
console.log('App is being served from cache by a service worker.\n' +
|
console.log('App is being served from cache by a service worker.\nFor more details, visit https://goo.gl/AFskqB');
|
||||||
'For more details, visit https://goo.gl/AFskqB');
|
|
||||||
},
|
},
|
||||||
cached() {
|
cached() {
|
||||||
console.log('Content has been cached for offline use.');
|
console.log('Content has been cached for offline use.');
|
@ -1,23 +1,23 @@
|
|||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import Router from 'vue-router';
|
import Router from 'vue-router';
|
||||||
import PageNotFound from '@/components/PageNotFound';
|
import PageNotFound from '@/components/PageNotFound.vue';
|
||||||
import Home from '@/components/Home';
|
import Home from '@/components/Home.vue';
|
||||||
import Event from '@/components/Event/Event';
|
import Event from '@/components/Event/Event.vue';
|
||||||
import EventList from '@/components/Event/EventList';
|
import EventList from '@/components/Event/EventList.vue';
|
||||||
import Location from '@/components/Location';
|
import Location from '@/components/Location.vue';
|
||||||
import CreateEvent from '@/components/Event/Create';
|
import CreateEvent from '@/components/Event/Create.vue';
|
||||||
import CategoryList from '@/components/Category/List';
|
import CategoryList from '@/components/Category/List.vue';
|
||||||
import CreateCategory from '@/components/Category/Create';
|
import CreateCategory from '@/components/Category/Create.vue';
|
||||||
import Register from '@/components/Account/Register';
|
import Register from '@/components/Account/Register.vue';
|
||||||
import Login from '@/components/Account/Login';
|
import Login from '@/components/Account/Login.vue';
|
||||||
import Validate from '@/components/Account/Validate';
|
import Validate from '@/components/Account/Validate.vue';
|
||||||
import ResendConfirmation from '@/components/Account/ResendConfirmation';
|
import ResendConfirmation from '@/components/Account/ResendConfirmation.vue';
|
||||||
import SendPasswordReset from '@/components/Account/SendPasswordReset';
|
import SendPasswordReset from '@/components/Account/SendPasswordReset.vue';
|
||||||
import PasswordReset from '@/components/Account/PasswordReset';
|
import PasswordReset from '@/components/Account/PasswordReset.vue';
|
||||||
import Account from '@/components/Account/Account';
|
import Account from '@/components/Account/Account.vue';
|
||||||
import CreateGroup from '@/components/Group/Create';
|
import CreateGroup from '@/components/Group/Create.vue';
|
||||||
import Group from '@/components/Group/Group';
|
import Group from '@/components/Group/Group.vue';
|
||||||
import GroupList from '@/components/Group/GroupList';
|
import GroupList from '@/components/Group/GroupList.vue';
|
||||||
import Identities from '../components/Account/Identities.vue';
|
import Identities from '../components/Account/Identities.vue';
|
||||||
|
|
||||||
Vue.use(Router);
|
Vue.use(Router);
|
13
js/src/shims-tsx.d.ts
vendored
Normal file
13
js/src/shims-tsx.d.ts
vendored
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import Vue, { VNode } from 'vue';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
namespace JSX {
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
interface Element extends VNode {}
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
interface ElementClass extends Vue {}
|
||||||
|
interface IntrinsicElements {
|
||||||
|
[elem: string]: any;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
4
js/src/shims-vue.d.ts
vendored
Normal file
4
js/src/shims-vue.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import Vue from 'vue';
|
||||||
|
export default Vue;
|
||||||
|
}
|
@ -33,7 +33,6 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
|
|||||||
|
|
||||||
const cache = new InMemoryCache({ fragmentMatcher });
|
const cache = new InMemoryCache({ fragmentMatcher });
|
||||||
|
|
||||||
|
|
||||||
const authMiddleware = new ApolloLink((operation, forward) => {
|
const authMiddleware = new ApolloLink((operation, forward) => {
|
||||||
// add the authorization to the headers
|
// add the authorization to the headers
|
||||||
const token = localStorage.getItem(AUTH_TOKEN);
|
const token = localStorage.getItem(AUTH_TOKEN);
|
||||||
@ -43,7 +42,9 @@ const authMiddleware = new ApolloLink((operation, forward) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return forward(operation);
|
if (forward) forward(operation);
|
||||||
|
|
||||||
|
return null;
|
||||||
});
|
});
|
||||||
|
|
||||||
const uploadLink = createLink({
|
const uploadLink = createLink({
|
||||||
@ -60,6 +61,8 @@ const link = authMiddleware.concat(uploadLink);
|
|||||||
|
|
||||||
// Config
|
// Config
|
||||||
const defaultOptions = {
|
const defaultOptions = {
|
||||||
|
cache,
|
||||||
|
link,
|
||||||
// You can use `https` for secure connection (recommended in production)
|
// You can use `https` for secure connection (recommended in production)
|
||||||
httpEndpoint,
|
httpEndpoint,
|
||||||
// You can use `wss` for secure connection (recommended in production)
|
// You can use `wss` for secure connection (recommended in production)
|
||||||
@ -74,9 +77,8 @@ const defaultOptions = {
|
|||||||
websocketsOnly: false,
|
websocketsOnly: false,
|
||||||
// Is being rendered on the server?
|
// Is being rendered on the server?
|
||||||
ssr: false,
|
ssr: false,
|
||||||
cache,
|
|
||||||
link,
|
|
||||||
defaultHttpLink: false,
|
defaultHttpLink: false,
|
||||||
|
connectToDevTools: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Call this in the Vue app file
|
// Call this in the Vue app file
|
||||||
@ -89,23 +91,18 @@ export function createProvider(options = {}) {
|
|||||||
apolloClient.wsClient = wsClient;
|
apolloClient.wsClient = wsClient;
|
||||||
|
|
||||||
// Create vue apollo provider
|
// Create vue apollo provider
|
||||||
const apolloProvider = new VueApollo({
|
return new VueApollo({
|
||||||
defaultClient: apolloClient,
|
defaultClient: apolloClient,
|
||||||
link,
|
// defaultOptions: {
|
||||||
cache,
|
// $query: {
|
||||||
connectToDevTools: true,
|
// fetchPolicy: 'cache-and-network',
|
||||||
defaultOptions: {
|
// },
|
||||||
$query: {
|
// },
|
||||||
// fetchPolicy: 'cache-and-network',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
errorHandler(error) {
|
errorHandler(error) {
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message);
|
console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return apolloProvider;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Manually call this when user log in
|
// Manually call this when user log in
|
@ -1,8 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
env: {
|
|
||||||
mocha: true,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
'import/no-extraneous-dependencies': 'off',
|
|
||||||
},
|
|
||||||
};
|
|
@ -1,13 +0,0 @@
|
|||||||
import { expect } from 'chai';
|
|
||||||
import { shallow } from '@vue/test-utils';
|
|
||||||
import HelloWorld from '@/components/HelloWorld.vue';
|
|
||||||
|
|
||||||
describe('HelloWorld.vue', () => {
|
|
||||||
it('renders props.msg when passed', () => {
|
|
||||||
const msg = 'new message';
|
|
||||||
const wrapper = shallow(HelloWorld, {
|
|
||||||
propsData: { msg },
|
|
||||||
});
|
|
||||||
expect(wrapper.text()).to.include(msg);
|
|
||||||
});
|
|
||||||
});
|
|
42
js/tsconfig.json
Normal file
42
js/tsconfig.json
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "esnext",
|
||||||
|
"module": "esnext",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"importHelpers": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"noImplicitAny": false,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"types": [
|
||||||
|
"webpack-env",
|
||||||
|
"mocha",
|
||||||
|
"chai"
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"src/**/*.vue",
|
||||||
|
"tests/**/*.ts",
|
||||||
|
"tests/**/*.tsx"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
8
js/tslint.json
Normal file
8
js/tslint.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"extends": "tslint-config-airbnb",
|
||||||
|
"rules": {
|
||||||
|
"max-line-length": [ true, 140 ],
|
||||||
|
"import-name": false,
|
||||||
|
"ter-arrow-parens": false
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user