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",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build --modern",
|
||||
"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:unit": "vue-cli-service test:unit",
|
||||
"analyze-bundle": "npm run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json"
|
||||
"test:unit": "vue-cli-service test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"apollo-absinthe-upload-link": "^1.4.0",
|
||||
@ -22,31 +19,37 @@
|
||||
"graphql-tag": "^2.9.0",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"moment": "^2.22.2",
|
||||
"ngeohash": "^0.6.0",
|
||||
"ngeohash": "^0.6.3",
|
||||
"register-service-worker": "^1.4.1",
|
||||
"vue": "^2.5.17",
|
||||
"vue-apollo": "^3.0.0-beta.26",
|
||||
"vue-class-component": "^6.3.2",
|
||||
"vue-gettext": "^2.1.1",
|
||||
"vue-gravatar": "^1.3.0",
|
||||
"vue-markdown": "^2.2.4",
|
||||
"vue-property-decorator": "^7.2.0",
|
||||
"vue-router": "^3.0.2",
|
||||
"vuetify": "^1.3.9",
|
||||
"vuetify-google-autocomplete": "^2.0.0-beta.5",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/chai": "^4.1.0",
|
||||
"@types/mocha": "^5.2.4",
|
||||
"@vue/cli-plugin-babel": "^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-typescript": "^3.2.0",
|
||||
"@vue/cli-plugin-unit-mocha": "^3.1.1",
|
||||
"@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",
|
||||
"chai": "^4.2.0",
|
||||
"dotenv-webpack": "^1.5.7",
|
||||
"node-sass": "^4.10.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"tslint-config-airbnb": "^5.11.1",
|
||||
"typescript": "^3.0.0",
|
||||
"vue-cli-plugin-apollo": "^0.17.4",
|
||||
"vue-template-compiler": "^2.5.17",
|
||||
"webpack-bundle-analyzer": "^3.0.3"
|
||||
@ -55,5 +58,8 @@
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
}
|
||||
|
@ -134,7 +134,8 @@
|
||||
class="white--text"
|
||||
v-translate="{
|
||||
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>
|
||||
</v-footer>
|
||||
<v-snackbar
|
||||
@ -148,22 +149,21 @@
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from 'graphql-tag';
|
||||
import NavBar from '@/components/NavBar';
|
||||
<script lang="ts">
|
||||
import NavBar from '@/components/NavBar.vue';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
@Component({
|
||||
components: {
|
||||
NavBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
fab: false,
|
||||
user: localStorage.getItem(AUTH_USER_ID),
|
||||
items: [
|
||||
})
|
||||
export default class App extends Vue {
|
||||
drawer = false;
|
||||
fab = false;
|
||||
user = localStorage.getItem(AUTH_USER_ID);
|
||||
items = [
|
||||
{
|
||||
icon: 'poll', text: 'Events', route: 'EventList', role: null,
|
||||
},
|
||||
@ -177,46 +177,48 @@ export default {
|
||||
{ icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
|
||||
{ icon: 'help', text: 'Help', role: null },
|
||||
{ icon: 'phonelink', text: 'App downloads', role: null },
|
||||
],
|
||||
error: {
|
||||
];
|
||||
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() {
|
||||
|
||||
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() {
|
||||
}
|
||||
|
||||
toggleDrawer () {
|
||||
this.drawer = !this.drawer;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
displayed_name() {
|
||||
return this.actor.display_name === null ? this.actor.username : this.actor.display_name;
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.router-enter-active, .router-leave-active {
|
||||
.router-enter-active, .router-leave-active {
|
||||
transition-property: opacity;
|
||||
transition-duration: .25s;
|
||||
}
|
||||
}
|
||||
|
||||
.router-enter-active {
|
||||
.router-enter-active {
|
||||
transition-delay: .25s;
|
||||
}
|
||||
}
|
||||
|
||||
.router-enter, .router-leave-active {
|
||||
.router-enter, .router-leave-active {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -44,7 +44,8 @@
|
||||
<v-layout row>
|
||||
<v-flex xs7>
|
||||
<div class="headline">{{ actor.name }}</div>
|
||||
<div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span></div>
|
||||
<div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span>
|
||||
</div>
|
||||
<v-card-text v-if="actor.description" v-html="actor.description"></v-card-text>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
@ -107,7 +108,9 @@
|
||||
<div>
|
||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
|
||||
<p v-if="event.organizer">Organisé par
|
||||
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
@ -171,22 +174,11 @@
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FETCH_ACTOR } from '@/graphql/actor';
|
||||
<script lang="ts">
|
||||
import { FETCH_ACTOR } from '@/graphql/actor';
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
|
||||
export default {
|
||||
name: 'Account',
|
||||
data() {
|
||||
return {
|
||||
actor: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
@Component({
|
||||
apollo: {
|
||||
actor: {
|
||||
query: FETCH_ACTOR,
|
||||
@ -197,20 +189,25 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
},
|
||||
watch: {
|
||||
})
|
||||
export default class Account extends Vue {
|
||||
@Prop({ type: String, required: true }) name!: string;
|
||||
|
||||
actor = null;
|
||||
|
||||
// call again the method if the route changes
|
||||
$route: 'fetchData',
|
||||
},
|
||||
methods: {
|
||||
@Watch('$route')
|
||||
onRouteChange() {
|
||||
// this.fetchData()
|
||||
}
|
||||
|
||||
logoutUser() {
|
||||
// TODO : implement logout
|
||||
this.$router.push({ name: 'Home' });
|
||||
},
|
||||
nl2br: function(text) {
|
||||
}
|
||||
|
||||
nl2br(text) {
|
||||
return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
@ -66,64 +66,68 @@
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Identities',
|
||||
data() {
|
||||
return {
|
||||
actors: [],
|
||||
newActor: {
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class Identities extends Vue {
|
||||
actors = [];
|
||||
newActor = {
|
||||
preferred_username: '',
|
||||
summary: '',
|
||||
},
|
||||
loading: true,
|
||||
showForm: false,
|
||||
rules: {
|
||||
};
|
||||
loading = true;
|
||||
showForm = false;
|
||||
rules = {
|
||||
required: value => !!value || 'Required.',
|
||||
},
|
||||
state: {
|
||||
};
|
||||
state = {
|
||||
username: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
eventFetch('/user', this.$store)
|
||||
.then(response => response.json())
|
||||
.then((response) => {
|
||||
this.actors = response.data.actors;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// Implements eventFetch
|
||||
// eventFetch('/user', this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.actors = response.data.actors;
|
||||
// this.loading = false;
|
||||
// });
|
||||
}
|
||||
|
||||
sendData() {
|
||||
this.loading = true;
|
||||
this.showForm = false;
|
||||
eventFetch('/actors', this.$store, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ actor: this.newActor }),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then((response) => {
|
||||
this.actors.push(response.data);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
// Implements eventFetch
|
||||
// eventFetch('/actors', this.$store, {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify({ actor: this.newActor }),
|
||||
// })
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.actors.push(response.data);
|
||||
// this.loading = false;
|
||||
// });
|
||||
}
|
||||
|
||||
toggleForm() {
|
||||
if (this.showForm === true) {
|
||||
this.sendData();
|
||||
} else {
|
||||
this.showForm = true;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
host() {
|
||||
return `@${window.location.host}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -58,47 +58,30 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar';
|
||||
import { AUTH_TOKEN, AUTH_USER_ID, AUTH_USER_ACTOR } from '@/constants';
|
||||
import { LOGIN } from '@/graphql/auth';
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar.vue';
|
||||
import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { LOGIN } from '@/graphql/auth';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
email: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
password: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
if (this.user) {
|
||||
this.$router.push('/');
|
||||
}
|
||||
},
|
||||
@Component({
|
||||
components: {
|
||||
'v-gravatar': Gravatar,
|
||||
avatar: RegisterAvatar,
|
||||
},
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
this.credentials.password = this.password;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
})
|
||||
export default class Login extends Vue {
|
||||
@Prop({ type: String, required: false, default: '' }) email!: string;
|
||||
@Prop({ type: String, required: false, default: '' }) password!: string;
|
||||
|
||||
credentials = {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
validationSent: false,
|
||||
error: {
|
||||
};
|
||||
validationSent = false;
|
||||
error = {
|
||||
show: false,
|
||||
text: '',
|
||||
timeout: 3000,
|
||||
@ -106,42 +89,53 @@ export default {
|
||||
email: false,
|
||||
password: false,
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
};
|
||||
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: {
|
||||
user: any;
|
||||
|
||||
beforeCreate() {
|
||||
if (this.user) {
|
||||
this.$router.push('/');
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
this.credentials.password = this.password;
|
||||
}
|
||||
|
||||
loginAction(e) {
|
||||
e.preventDefault();
|
||||
this.$apollo.mutate({
|
||||
mutation: LOGIN,
|
||||
variables: {
|
||||
email: this.credentials.email,
|
||||
password: this.credentials.password
|
||||
}
|
||||
password: this.credentials.password,
|
||||
},
|
||||
}).then((result) => {
|
||||
this.saveUserData(result.data);
|
||||
this.$router.push({name: 'Home'});
|
||||
this.$router.push({ name: 'Home' });
|
||||
}).catch((e) => {
|
||||
console.log(e);
|
||||
this.error.show = true;
|
||||
this.error.text = e.message;
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
validEmail() {
|
||||
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_ACTOR, JSON.stringify(login.actor));
|
||||
localStorage.setItem(AUTH_TOKEN, login.token);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
@ -36,31 +36,22 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PasswordReset',
|
||||
props: {
|
||||
token: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
samePasswords() {
|
||||
return this.rules.password_length(this.credentials.password) === true &&
|
||||
this.credentials.password === this.credentials.password_confirmation;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
<script lang="ts">
|
||||
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class PasswordReset extends Vue {
|
||||
@Prop({ type: String, required: true }) token!: string;
|
||||
|
||||
credentials = {
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
},
|
||||
error: {
|
||||
};
|
||||
error = {
|
||||
show: false,
|
||||
},
|
||||
state: {
|
||||
};
|
||||
state = {
|
||||
token: {
|
||||
status: null,
|
||||
msg: '',
|
||||
@ -73,38 +64,46 @@ export default {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
};
|
||||
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',
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
get samePasswords() {
|
||||
return this.rules.password_length(this.credentials.password) === true &&
|
||||
this.credentials.password === this.credentials.password_confirmation;
|
||||
}
|
||||
|
||||
resetAction(e) {
|
||||
this.resetState();
|
||||
e.preventDefault();
|
||||
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) => {
|
||||
localStorage.setItem('token', data.token);
|
||||
localStorage.setItem('refresh_token', data.refresh_token);
|
||||
this.$store.commit('LOGIN_USER', data.account);
|
||||
this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
|
||||
this.$router.push({ name: 'Home' });
|
||||
}, (error) => {
|
||||
Promise.resolve(error).then((errormsg) => {
|
||||
console.log('errormsg', errormsg);
|
||||
this.error.show = true;
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
// FIXME: implements fetchStory
|
||||
// fetchStory('/users/password-reset/post', this.$store, {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify({ password: this.credentials.password, token: this.token }),
|
||||
// }).then((data) => {
|
||||
// localStorage.setItem('token', data.token);
|
||||
// localStorage.setItem('refresh_token', data.refresh_token);
|
||||
// this.$store.commit('LOGIN_USER', data.account);
|
||||
// this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
|
||||
// this.$router.push({ name: 'Home' });
|
||||
// }, (error) => {
|
||||
// Promise.resolve(error).then((errormsg) => {
|
||||
// console.log('errormsg', errormsg);
|
||||
// this.error.show = true;
|
||||
// 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() {
|
||||
this.state = {
|
||||
token: {
|
||||
@ -120,7 +119,6 @@ export default {
|
||||
msg: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -68,8 +68,12 @@
|
||||
<router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link>
|
||||
</v-form>
|
||||
<div v-if="validationSent">
|
||||
<h2><translate>A validation email was sent to %{email}</translate></h2>
|
||||
<v-alert :value="true" type="info"><translate>Before you can login, you need to click on the link inside it to validate your account</translate></v-alert>
|
||||
<h2>
|
||||
<translate>A validation email was sent to %{email}</translate>
|
||||
</h2>
|
||||
<v-alert :value="true" type="info">
|
||||
<translate>Before you can login, you need to click on the link inside it to validate your account</translate>
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@ -78,39 +82,31 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar';
|
||||
import { CREATE_USER } from '@/graphql/user';
|
||||
<script lang="ts">
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar.vue';
|
||||
import { CREATE_USER } from '@/graphql/user';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
default_email: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
default_password: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
@Component({
|
||||
components: {
|
||||
'v-gravatar': Gravatar,
|
||||
avatar: RegisterAvatar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
email: this.default_email,
|
||||
password: this.default_password,
|
||||
error: {
|
||||
})
|
||||
export default class Register extends Vue {
|
||||
@Prop({ type: String, required: false, default: '' }) default_email!: string;
|
||||
@Prop({ type: String, required: false, default: '' }) default_password!: string;
|
||||
|
||||
username = '';
|
||||
email = this.default_email;
|
||||
password = this.default_password;
|
||||
error = {
|
||||
show: false,
|
||||
},
|
||||
showPassword: false,
|
||||
validationSent: false,
|
||||
state: {
|
||||
};
|
||||
showPassword = false;
|
||||
validationSent = false;
|
||||
state = {
|
||||
email: {
|
||||
status: false,
|
||||
msg: [],
|
||||
@ -123,40 +119,41 @@ export default {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
};
|
||||
rules = {
|
||||
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.';
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
resetState() {
|
||||
this.state = {
|
||||
email: {
|
||||
status: false,
|
||||
msg: '',
|
||||
msg: [],
|
||||
},
|
||||
username: {
|
||||
status: false,
|
||||
msg: '',
|
||||
msg: [],
|
||||
},
|
||||
password: {
|
||||
status: false,
|
||||
msg: '',
|
||||
msg: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
host() {
|
||||
return `@${window.location.host}`;
|
||||
},
|
||||
}
|
||||
|
||||
validEmail() {
|
||||
return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
|
||||
},
|
||||
}
|
||||
|
||||
submit() {
|
||||
this.$apollo.mutate({
|
||||
mutation: CREATE_USER,
|
||||
@ -171,19 +168,20 @@ export default {
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.avatar-enter-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
.avatar-enter, .avatar-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.avatar-leave {
|
||||
<style lang="scss">
|
||||
.avatar-enter-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.avatar-enter, .avatar-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.avatar-leave {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RegisterAvatar',
|
||||
};
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class RegisterAvatar extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -30,53 +30,48 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ResendConfirmation',
|
||||
props: {
|
||||
email: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class ResendConfirmation extends Vue {
|
||||
@Prop({ type: String, required: false, default: '' }) email!: string;
|
||||
|
||||
credentials = {
|
||||
email: '',
|
||||
},
|
||||
validationSent: false,
|
||||
error: false,
|
||||
state: {
|
||||
};
|
||||
validationSent = false;
|
||||
error = false;
|
||||
state = {
|
||||
email: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
};
|
||||
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;
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
resendConfirmationAction(e) {
|
||||
e.preventDefault();
|
||||
fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
|
||||
this.validationSent = true;
|
||||
}).catch((err) => {
|
||||
Promise.resolve(err).then(() => {
|
||||
this.error = true;
|
||||
this.validationSent = true;
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// FIXME: implement fetchStory
|
||||
// fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
|
||||
// this.validationSent = true;
|
||||
// }).catch((err) => {
|
||||
// Promise.resolve(err).then(() => {
|
||||
// this.error = true;
|
||||
// this.validationSent = true;
|
||||
// });
|
||||
// });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -30,54 +30,51 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SendPasswordReset',
|
||||
props: {
|
||||
email: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class SendPasswordReset extends Vue {
|
||||
@Prop({ type: String, required: false, default: '' }) email!: string;
|
||||
|
||||
credentials = {
|
||||
email: '',
|
||||
},
|
||||
validationSent: false,
|
||||
error: false,
|
||||
state: {
|
||||
};
|
||||
validationSent = false;
|
||||
error = false;
|
||||
state = {
|
||||
email: {
|
||||
status: null,
|
||||
msg: '',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
};
|
||||
|
||||
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: {
|
||||
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
}
|
||||
|
||||
resendConfirmationAction(e) {
|
||||
e.preventDefault();
|
||||
fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
|
||||
this.error = false;
|
||||
this.validationSent = true;
|
||||
}).catch((err) => {
|
||||
Promise.resolve(err).then((data) => {
|
||||
this.error = true;
|
||||
this.state.email = { status: false, msg: data.errors };
|
||||
});
|
||||
});
|
||||
},
|
||||
// FIXME: implement fetchStory
|
||||
// fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
|
||||
// this.error = false;
|
||||
// this.validationSent = true;
|
||||
// }).catch((err) => {
|
||||
// Promise.resolve(err).then((data) => {
|
||||
// this.error = true;
|
||||
// this.state.email = { status: false, msg: data.errors };
|
||||
// });
|
||||
// });
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.state = {
|
||||
email: {
|
||||
@ -85,7 +82,6 @@ export default {
|
||||
msg: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -1,36 +1,37 @@
|
||||
<template>
|
||||
<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-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>
|
||||
<h1 v-else><translate>Your account has been validated</translate></h1>
|
||||
<h1 v-else>
|
||||
<translate>Your account has been validated</translate>
|
||||
</h1>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VALIDATE_USER } from '@/graphql/user';
|
||||
<script lang="ts">
|
||||
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;
|
||||
|
||||
export default {
|
||||
name: 'Validate',
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
failed: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
token: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.validateAction();
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
validateAction() {
|
||||
this.$apollo.mutate({
|
||||
mutation: VALIDATE_USER,
|
||||
@ -41,18 +42,19 @@ export default {
|
||||
this.loading = false;
|
||||
console.log(data);
|
||||
this.saveUserData(data.data);
|
||||
this.$router.push({name: 'Home'});
|
||||
this.$router.push({ name: 'Home' });
|
||||
}).catch((error) => {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
this.failed = true;
|
||||
});
|
||||
},
|
||||
saveUserData({validateUser: login}) {
|
||||
}
|
||||
|
||||
saveUserData({ validateUser: login }) {
|
||||
localStorage.setItem(AUTH_USER_ID, login.user.id);
|
||||
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
|
||||
localStorage.setItem(AUTH_TOKEN, login.token);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
};
|
||||
</script>
|
||||
|
@ -4,7 +4,9 @@
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title><translate>Create a new category</translate></v-toolbar-title>
|
||||
<v-toolbar-title>
|
||||
<translate>Create a new category</translate>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
@ -29,7 +31,9 @@
|
||||
@change="onFilePicked"
|
||||
>
|
||||
</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-card-text>
|
||||
</v-card>
|
||||
@ -38,50 +42,48 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UPLOAD_PICTURE } from '@/graphql/upload';
|
||||
import { CREATE_CATEGORY } from '@/graphql/category';
|
||||
<script lang="ts">
|
||||
import { CREATE_CATEGORY } from '@/graphql/category';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
export default {
|
||||
name: 'create-category',
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
description: '',
|
||||
image: {
|
||||
@Component
|
||||
export default class CreateCategory extends Vue {
|
||||
title = '';
|
||||
description = '';
|
||||
image = {
|
||||
url: '',
|
||||
name: '',
|
||||
file: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
create() {
|
||||
this.$apollo.mutate({
|
||||
mutation: CREATE_CATEGORY,
|
||||
variables: {
|
||||
title: this.title,
|
||||
description: this.description,
|
||||
picture: this.$refs.image.files[0],
|
||||
}
|
||||
picture: (this.$refs['image'] as any).files[ 0 ],
|
||||
},
|
||||
}).then((data) => {
|
||||
console.log(data);
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
pickFile () {
|
||||
this.$refs.image.click ()
|
||||
},
|
||||
}
|
||||
|
||||
pickFile() {
|
||||
(this.$refs['image'] as any).click();
|
||||
}
|
||||
|
||||
onFilePicked(e) {
|
||||
const files = e.target.files;
|
||||
if(files[0] === undefined || files[0].name.lastIndexOf('.') <= 0) {
|
||||
console.error("File is incorrect")
|
||||
if (files[ 0 ] === undefined || files[ 0 ].name.lastIndexOf('.') <= 0) {
|
||||
console.error('File is incorrect');
|
||||
}
|
||||
this.image.name = files[0].name;
|
||||
},
|
||||
},
|
||||
};
|
||||
this.image.name = files[ 0 ].name;
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
@ -15,8 +15,12 @@
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn flat class="orange--text"><translate>Explore</translate></v-btn>
|
||||
<v-btn flat class="red--text" v-on:click="deleteCategory(category.id)"><translate>Delete</translate></v-btn>
|
||||
<v-btn flat class="orange--text">
|
||||
<translate>Explore</translate>
|
||||
</v-btn>
|
||||
<v-btn flat class="red--text" v-on:click="deleteCategory(category.id)">
|
||||
<translate>Delete</translate>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
@ -30,37 +34,34 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FETCH_CATEGORIES } from '@/graphql/category';
|
||||
<script lang="ts">
|
||||
import { FETCH_CATEGORIES } from '@/graphql/category';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
// TODO : remove this hardcode
|
||||
// TODO : remove this hardcode
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
loading: true,
|
||||
HTTP_ENDPOINT: 'http://localhost:4000',
|
||||
};
|
||||
},
|
||||
@Component({
|
||||
apollo: {
|
||||
categories: {
|
||||
query: FETCH_CATEGORIES,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
})
|
||||
export default class List extends Vue {
|
||||
categories = [];
|
||||
loading = true;
|
||||
HTTP_ENDPOINT = 'http://localhost:4000';
|
||||
|
||||
deleteCategory(categoryId) {
|
||||
const router = this.$router;
|
||||
eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
|
||||
.then(() => {
|
||||
this.categories = this.categories.filter(category => category.id !== categoryId);
|
||||
router.push('/category');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
|
||||
// .then(() => {
|
||||
// this.categories = this.categories.filter(category => category.id !== categoryId);
|
||||
// router.push('/category');
|
||||
// });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
|
@ -65,30 +65,31 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Location from '@/components/Location';
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
|
||||
import { FETCH_CATEGORIES } from '@/graphql/category';
|
||||
import { AUTH_USER_ACTOR } from '@/constants';
|
||||
<script lang="ts">
|
||||
// import Location from '@/components/Location';
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
|
||||
import { FETCH_CATEGORIES } from '@/graphql/category';
|
||||
import { AUTH_USER_ACTOR } from '@/constants';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
export default {
|
||||
name: 'create-event',
|
||||
props: {
|
||||
uuid: {
|
||||
required: false,
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
@Component({
|
||||
components: {
|
||||
/* Location, */
|
||||
VueMarkdown,
|
||||
VueMarkdown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
e1: 0,
|
||||
event: {
|
||||
apollo: {
|
||||
categories: {
|
||||
query: FETCH_CATEGORIES,
|
||||
},
|
||||
}
|
||||
})
|
||||
export default class CreateEvent extends Vue {
|
||||
@Prop({required: false, type: String}) uuid!: string
|
||||
|
||||
e1 = 0
|
||||
event = {
|
||||
title: null,
|
||||
organizer_actor_id: null,
|
||||
description: '',
|
||||
begins_on: (new Date()).toISOString().substr(0, 10),
|
||||
ends_on: new Date(),
|
||||
@ -102,25 +103,20 @@ export default {
|
||||
category_id: null,
|
||||
tags: [],
|
||||
participants: [],
|
||||
},
|
||||
categories: [],
|
||||
tags: [],
|
||||
tagsToSend: [],
|
||||
tagsFetched: [],
|
||||
};
|
||||
},
|
||||
} as any // FIXME: correctly type an event
|
||||
categories = []
|
||||
tags = []
|
||||
tagsToSend = []
|
||||
tagsFetched = []
|
||||
loading = false
|
||||
|
||||
// created() {
|
||||
// if (this.uuid) {
|
||||
// this.fetchEvent();
|
||||
// }
|
||||
// },
|
||||
apollo: {
|
||||
categories: {
|
||||
query: FETCH_CATEGORIES,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
create() {
|
||||
// }
|
||||
|
||||
create () {
|
||||
// this.event.seats = parseInt(this.event.seats, 10);
|
||||
// this.tagsToSend.forEach((tag) => {
|
||||
// this.event.tags.push({
|
||||
@ -128,10 +124,11 @@ export default {
|
||||
// // '@type': 'Tag',
|
||||
// });
|
||||
// });
|
||||
const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR));
|
||||
this.event.category_id = this.event.category;
|
||||
this.event.organizer_actor_id = actor.id;
|
||||
this.event.participants = [actor.id];
|
||||
// FIXME: correctly parse actor JSON
|
||||
const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}')
|
||||
this.event.category_id = this.event.category
|
||||
this.event.organizer_actor_id = actor.id
|
||||
this.event.participants = [actor.id]
|
||||
// this.event.price = parseFloat(this.event.price);
|
||||
|
||||
if (this.uuid === undefined) {
|
||||
@ -146,33 +143,25 @@ export default {
|
||||
addressType: this.event.location_type,
|
||||
}
|
||||
}).then((data) => {
|
||||
this.loading = false;
|
||||
this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
|
||||
this.loading = false
|
||||
this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
console.log(error)
|
||||
})
|
||||
} else {
|
||||
this.$apollo.mutate({
|
||||
mutation: EDIT_EVENT,
|
||||
}).then((data) => {
|
||||
this.loading = false;
|
||||
this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
|
||||
this.loading = false
|
||||
this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
this.event.tags = [];
|
||||
},
|
||||
// fetchEvent() {
|
||||
// eventFetch(`/events/${this.id}`, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// this.loading = false;
|
||||
// this.event = data;
|
||||
// console.log(this.event);
|
||||
// });
|
||||
// },
|
||||
getAddressData(addressData) {
|
||||
this.event.tags = []
|
||||
}
|
||||
|
||||
getAddressData (addressData) {
|
||||
if (addressData !== null) {
|
||||
this.event.address = {
|
||||
geom: {
|
||||
@ -187,11 +176,11 @@ export default {
|
||||
addressRegion: addressData.administrative_area_level_1,
|
||||
postalCode: addressData.postal_code,
|
||||
streetAddress: `${addressData.street_number} ${addressData.route}`,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
@ -97,28 +97,29 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['id'],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
event: null,
|
||||
};
|
||||
},
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class EventEdit extends Vue {
|
||||
@Prop(String) id!: string;
|
||||
|
||||
loading = true;
|
||||
event = null;
|
||||
|
||||
created() {
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
eventFetch(`/events/${this.id}`, this.$store)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
this.loading = false;
|
||||
this.event = data;
|
||||
console.log(this.event);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.id}`, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// this.loading = false;
|
||||
// this.event = data;
|
||||
// console.log(this.event);
|
||||
// });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -54,7 +54,9 @@
|
||||
<!-- <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-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()">
|
||||
@ -146,32 +148,15 @@
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
import { FETCH_EVENT } from '@/graphql/event';
|
||||
import { LOGGED_ACTOR } from '@/graphql/actor';
|
||||
<script lang="ts">
|
||||
import { FETCH_EVENT } from '@/graphql/event';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
@Component({
|
||||
components: {
|
||||
VueMarkdown,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
event: {
|
||||
name: '',
|
||||
slug: '',
|
||||
title: '',
|
||||
uuid: this.uuid,
|
||||
description: '',
|
||||
organizer: {
|
||||
id: null,
|
||||
username: null,
|
||||
},
|
||||
participants: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
apollo: {
|
||||
event: {
|
||||
query: FETCH_EVENT,
|
||||
@ -185,58 +170,76 @@ export default {
|
||||
// query: LOGGED_ACTOR,
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
})
|
||||
export default class Event extends Vue {
|
||||
@Prop({ type: String, required: true }) uuid!: string;
|
||||
|
||||
event = {
|
||||
name: '',
|
||||
slug: '',
|
||||
title: '',
|
||||
uuid: this.uuid,
|
||||
description: '',
|
||||
organizer: {
|
||||
id: null,
|
||||
username: null,
|
||||
},
|
||||
participants: [],
|
||||
};
|
||||
|
||||
deleteEvent() {
|
||||
const router = this.$router;
|
||||
eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
|
||||
.then(() => router.push({ name: 'EventList' }));
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
|
||||
// .then(() => router.push({ name: 'EventList' }));
|
||||
}
|
||||
|
||||
joinEvent() {
|
||||
eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
});
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// console.log(data);
|
||||
// });
|
||||
}
|
||||
|
||||
leaveEvent() {
|
||||
eventFetch(`/events/${this.uuid}/leave`, this.$store)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
});
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}/leave`, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// console.log(data);
|
||||
// });
|
||||
}
|
||||
|
||||
downloadIcsEvent() {
|
||||
eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
.then(response => response.text())
|
||||
.then((response) => {
|
||||
const blob = new Blob([response], { type: 'text/calendar' });
|
||||
const link = document.createElement('a');
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = `${this.event.title}.ics`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
// .then(response => response.text())
|
||||
// .then((response) => {
|
||||
// const blob = new Blob([ response ], { type: 'text/calendar' });
|
||||
// const link = document.createElement('a');
|
||||
// link.href = window.URL.createObjectURL(blob);
|
||||
// link.download = `${this.event.title}.ics`;
|
||||
// document.body.appendChild(link);
|
||||
// link.click();
|
||||
// document.body.removeChild(link);
|
||||
// });
|
||||
}
|
||||
|
||||
// actorIsParticipant() {
|
||||
// return this.loggedActor && this.event.participants.map(participant => participant.actor.preferredUsername).includes(this.loggedActor.preferredUsername) || this.actorIsOrganizer();
|
||||
// },
|
||||
// }
|
||||
//
|
||||
// actorIsOrganizer() {
|
||||
// return this.loggedActor && this.loggedActor.preferredUsername === this.event.organizer.preferredUsername;
|
||||
// },
|
||||
},
|
||||
props: {
|
||||
uuid: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style>
|
||||
.v-card__media__background {
|
||||
.v-card__media__background {
|
||||
filter: contrast(0.4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -2,11 +2,12 @@
|
||||
<v-layout>
|
||||
<v-flex xs12 sm8 offset-sm2>
|
||||
<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-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>
|
||||
{{ locationText }}
|
||||
</v-chip>
|
||||
<v-container grid-list-sm fluid>
|
||||
<v-layout row wrap>
|
||||
@ -35,7 +36,8 @@
|
||||
>
|
||||
</v-avatar>
|
||||
</router-link>
|
||||
<span v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
|
||||
<span v-if="event.organizer">Organisé par <router-link
|
||||
:to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
@ -53,46 +55,48 @@
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ngeohash from 'ngeohash';
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
|
||||
<script lang="ts">
|
||||
import ngeohash from 'ngeohash';
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
|
||||
export default {
|
||||
name: 'EventList',
|
||||
@Component({
|
||||
components: {
|
||||
VCardTitle,
|
||||
VCardTitle: VCardTitle as any,
|
||||
VueMarkdown,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
events: [],
|
||||
loading: true,
|
||||
locationChip: false,
|
||||
locationText: '',
|
||||
};
|
||||
},
|
||||
props: ['location'],
|
||||
})
|
||||
export default class EventList extends Vue {
|
||||
@Prop(String) location!: string;
|
||||
|
||||
events = [];
|
||||
loading = true;
|
||||
locationChip = false;
|
||||
locationText = '';
|
||||
|
||||
created() {
|
||||
this.fetchData(this.$router.currentRoute.params.location);
|
||||
},
|
||||
watch: {
|
||||
locationChip(val) {
|
||||
if (val === false) {
|
||||
this.$router.push({ name: 'EventList' });
|
||||
this.fetchData(this.$router.currentRoute.params[ 'location' ]);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
this.fetchData(to.params.location);
|
||||
next();
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
@Watch('locationChip')
|
||||
onLocationChipChange(val) {
|
||||
if (val === false) {
|
||||
this.$router.push({ name: 'EventList' });
|
||||
}
|
||||
}
|
||||
|
||||
geocode(lat, lon) {
|
||||
console.log({ lat, lon });
|
||||
console.log(ngeohash.encode(lat, lon, 10));
|
||||
return ngeohash.encode(lat, lon, 10);
|
||||
},
|
||||
}
|
||||
|
||||
fetchData(location) {
|
||||
let queryString = '/events';
|
||||
if (location) {
|
||||
@ -101,37 +105,43 @@ export default {
|
||||
this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
|
||||
}
|
||||
this.locationChip = true;
|
||||
eventFetch(queryString, this.$store)
|
||||
.then(response => response.json())
|
||||
.then((response) => {
|
||||
this.loading = false;
|
||||
this.events = response.data;
|
||||
console.log(this.events);
|
||||
});
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(queryString, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.loading = false;
|
||||
// this.events = response.data;
|
||||
// console.log(this.events);
|
||||
// });
|
||||
}
|
||||
|
||||
deleteEvent(event) {
|
||||
const router = this.$router;
|
||||
eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
|
||||
.then(() => router.push('/events'));
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
|
||||
// .then(() => router.push('/events'));
|
||||
}
|
||||
|
||||
viewEvent(event) {
|
||||
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
|
||||
},
|
||||
}
|
||||
|
||||
downloadIcsEvent(event) {
|
||||
eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
.then(response => response.text())
|
||||
.then((response) => {
|
||||
const blob = new Blob([response], { type: 'text/calendar' });
|
||||
const link = document.createElement('a');
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = `${event.title}.ics`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
// .then(response => response.text())
|
||||
// .then((response) => {
|
||||
// const blob = new Blob([ response ], { type: 'text/calendar' });
|
||||
// const link = document.createElement('a');
|
||||
// link.href = window.URL.createObjectURL(blob);
|
||||
// link.download = `${event.title}.ics`;
|
||||
// document.body.appendChild(link);
|
||||
// link.click();
|
||||
// document.body.removeChild(link);
|
||||
// });
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
|
@ -64,51 +64,54 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
|
||||
|
||||
export default {
|
||||
name: 'create-group',
|
||||
<script lang="ts">
|
||||
import VueMarkdown from 'vue-markdown';
|
||||
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VueMarkdown,
|
||||
VuetifyGoogleAutocomplete,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
e1: 0,
|
||||
group: {
|
||||
})
|
||||
export default class CreateGroup extends Vue {
|
||||
e1 = 0;
|
||||
// FIXME: correctly type group
|
||||
group: { preferred_username: string, name: string, summary: string, address?: any } = {
|
||||
preferred_username: '',
|
||||
name: '',
|
||||
summary: '',
|
||||
// category: null,
|
||||
},
|
||||
categories: [],
|
||||
};
|
||||
},
|
||||
categories = [];
|
||||
|
||||
mounted() {
|
||||
this.fetchCategories();
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
create() {
|
||||
// this.group.organizer = "/accounts/" + this.$store.state.user.id;
|
||||
|
||||
eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
this.loading = false;
|
||||
this.$router.push({ path: 'Group', params: { id: data.id } });
|
||||
});
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// this.loading = false;
|
||||
// this.$router.push({ path: 'Group', params: { id: data.id } });
|
||||
// });
|
||||
}
|
||||
|
||||
fetchCategories() {
|
||||
eventFetch('/categories', this.$store)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
this.loading = false;
|
||||
this.categories = data.data;
|
||||
});
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch('/categories', this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// this.loading = false;
|
||||
// this.categories = data.data;
|
||||
// });
|
||||
}
|
||||
|
||||
getAddressData(addressData) {
|
||||
this.group.address = {
|
||||
geo: {
|
||||
@ -121,9 +124,9 @@ export default {
|
||||
postalCode: addressData.postal_code,
|
||||
streetAddress: `${addressData.street_number} ${addressData.route}`,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
@ -135,7 +135,10 @@
|
||||
<div>
|
||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
|
||||
<p v-if="event.organizer">Organisé par
|
||||
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
@ -176,7 +179,10 @@
|
||||
<div>
|
||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
|
||||
<p v-if="event.organizer">Organisé par
|
||||
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
@ -201,38 +207,35 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Group',
|
||||
data() {
|
||||
return {
|
||||
group: null,
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class Group extends Vue {
|
||||
@Prop({ type: String, required: true }) name!: string;
|
||||
|
||||
group = null;
|
||||
loading = true;
|
||||
|
||||
created() {
|
||||
this.fetchData();
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
|
||||
@Watch('$route')
|
||||
onRouteChanged() {
|
||||
// call again the method if the route changes
|
||||
$route: 'fetchData',
|
||||
},
|
||||
methods: {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
eventFetch(`/actors/${this.name}`, this.$store)
|
||||
.then(response => response.json())
|
||||
.then((response) => {
|
||||
this.group = response.data;
|
||||
this.loading = false;
|
||||
console.log(this.group);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/actors/${this.name}`, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.group = response.data;
|
||||
// this.loading = false;
|
||||
// console.log(this.group);
|
||||
// });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -22,11 +22,16 @@
|
||||
<v-card-title>
|
||||
<div>
|
||||
<p>{{ group.summary }}</p>
|
||||
<p v-if="group.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link></p>
|
||||
<p v-if="group.organizer">Organisé par
|
||||
<router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn flat color="green" @click="joinGroup(group)"><v-icon v-if="group.locked">lock</v-icon>Join</v-btn>
|
||||
<v-btn flat color="green" @click="joinGroup(group)">
|
||||
<v-icon v-if="group.locked">lock</v-icon>
|
||||
Join
|
||||
</v-btn>
|
||||
<v-btn flat color="orange" @click="viewActor(group)">Explore</v-btn>
|
||||
<v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn>
|
||||
</v-card-actions>
|
||||
@ -37,48 +42,54 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GroupList',
|
||||
data() {
|
||||
return {
|
||||
groups: [],
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
<script lang="ts">
|
||||
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class GroupList extends Vue {
|
||||
groups = [];
|
||||
loading = true;
|
||||
|
||||
created() {
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
username_with_domain(actor) {
|
||||
}
|
||||
|
||||
usernameWithDomain(actor) {
|
||||
return actor.username + (actor.domain === null ? '' : `@${actor.domain}`);
|
||||
},
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
eventFetch('/groups', this.$store)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
this.loading = false;
|
||||
this.groups = data.data;
|
||||
});
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch('/groups', this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// console.log(data);
|
||||
// this.loading = false;
|
||||
// this.groups = data.data;
|
||||
// });
|
||||
}
|
||||
|
||||
deleteGroup(group) {
|
||||
const router = this.$router;
|
||||
eventFetch(`/groups/${this.username_with_domain(group)}`, this.$store, { method: 'DELETE' })
|
||||
.then(response => response.json())
|
||||
.then(() => router.push('/groups'));
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/groups/${this.usernameWithDomain(group)}`, this.$store, { method: 'DELETE' })
|
||||
// .then(response => response.json())
|
||||
// .then(() => router.push('/groups'));
|
||||
}
|
||||
|
||||
viewActor(actor) {
|
||||
this.$router.push({ name: 'Group', params: { name: this.username_with_domain(actor) } });
|
||||
},
|
||||
this.$router.push({ name: 'Group', params: { name: this.usernameWithDomain(actor) } });
|
||||
}
|
||||
|
||||
joinGroup(group) {
|
||||
const router = this.$router;
|
||||
eventFetch(`/groups/${this.username_with_domain(group)}/join`, this.$store, { method: 'POST' })
|
||||
.then(response => response.json())
|
||||
.then(() => router.push({ name: 'Group', params: { name: this.username_with_domain(group) } }));
|
||||
},
|
||||
},
|
||||
};
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/groups/${this.usernameWithDomain(group)}/join`, this.$store, { method: 'POST' })
|
||||
// .then(response => response.json())
|
||||
// .then(() => router.push({ name: 'Group', params: { name: this.usernameWithDomain(group) } }));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
|
@ -12,7 +12,9 @@
|
||||
<v-flex text-xs-center>
|
||||
<h1 class="display-3">Find events you like</h1>
|
||||
<h2>Share it with Mobilizon</h2>
|
||||
<v-btn :to="{ name: 'Register' }"><translate>Register</translate></v-btn>
|
||||
<v-btn :to="{ name: 'Register' }">
|
||||
<translate>Register</translate>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
@ -21,11 +23,14 @@
|
||||
<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>
|
||||
<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
|
||||
<span class="events-nearby title">Events nearby </span>
|
||||
<v-text-field
|
||||
solo
|
||||
append-icon="place"
|
||||
:value="ipLocation()"
|
||||
@ -78,51 +83,52 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ngeohash from 'ngeohash';
|
||||
import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
|
||||
import { FETCH_EVENTS } from '@/graphql/event';
|
||||
<script lang="ts">
|
||||
import ngeohash from 'ngeohash';
|
||||
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
||||
import { FETCH_EVENTS } from '@/graphql/event';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
data() {
|
||||
return {
|
||||
gradient: 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)',
|
||||
searchTerm: null,
|
||||
location_field: {
|
||||
loading: false,
|
||||
search: null,
|
||||
},
|
||||
events: [],
|
||||
locations: [],
|
||||
city: { name: null },
|
||||
country: { name: null },
|
||||
actor: JSON.parse(localStorage.getItem(AUTH_USER_ACTOR)),
|
||||
user: localStorage.getItem(AUTH_USER_ID),
|
||||
};
|
||||
},
|
||||
@Component({
|
||||
apollo: {
|
||||
events: {
|
||||
query: FETCH_EVENTS,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
displayed_name() {
|
||||
})
|
||||
export default class Home extends Vue {
|
||||
gradient = 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)';
|
||||
searchTerm = null;
|
||||
location_field = {
|
||||
loading: false,
|
||||
search: null,
|
||||
};
|
||||
events = [];
|
||||
locations = [];
|
||||
city = { name: null };
|
||||
country = { name: null };
|
||||
// FIXME: correctly parse local storage
|
||||
actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}');
|
||||
user = localStorage.getItem(AUTH_USER_ID);
|
||||
|
||||
get displayed_name() {
|
||||
return this.actor.name === null ? this.actor.preferredUsername : this.actor.name;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
fetchLocations() {
|
||||
eventFetch('/locations', this.$store)
|
||||
.then(response => (response.json()))
|
||||
.then((response) => {
|
||||
this.locations = response;
|
||||
});
|
||||
},
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch('/locations', this.$store)
|
||||
// .then(response => (response.json()))
|
||||
// .then((response) => {
|
||||
// this.locations = response;
|
||||
// });
|
||||
}
|
||||
|
||||
geoLocalize() {
|
||||
const router = this.$router;
|
||||
if (sessionStorage.getItem('City')) {
|
||||
router.push({ name: 'EventList', params: { location: localStorage.getItem('City') } });
|
||||
const sessionCity = sessionStorage.getItem('City')
|
||||
if (sessionCity) {
|
||||
router.push({ name: 'EventList', params: { location: sessionCity } });
|
||||
} else {
|
||||
navigator.geolocation.getCurrentPosition((pos) => {
|
||||
const crd = pos.coords;
|
||||
@ -136,27 +142,29 @@ export default {
|
||||
maximumAge: 0,
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
getAddressData(addressData) {
|
||||
const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11);
|
||||
sessionStorage.setItem('City', geohash);
|
||||
this.$router.push({ name: 'EventList', params: { location: geohash } });
|
||||
},
|
||||
}
|
||||
|
||||
viewEvent(event) {
|
||||
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
|
||||
},
|
||||
}
|
||||
|
||||
ipLocation() {
|
||||
return this.city.name ? this.city.name : this.country.name;
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.search-autocomplete {
|
||||
border: 1px solid #dbdbdb;
|
||||
color: rgba(0,0,0,.87);
|
||||
color: rgba(0, 0, 0, .87);
|
||||
}
|
||||
|
||||
.events-nearby {
|
||||
|
@ -24,29 +24,28 @@
|
||||
</div>
|
||||
</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) {
|
||||
this.center = {
|
||||
lat: place.geometry.location.lat(),
|
||||
lng: place.geometry.location.lng(),
|
||||
};
|
||||
this.markers = [{
|
||||
this.markers = [ {
|
||||
position: { lat: this.center.lat, lng: this.center.lng },
|
||||
}];
|
||||
} ];
|
||||
|
||||
this.$emit('input', place.formatted_address);
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
@ -74,42 +74,33 @@
|
||||
</v-list>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat @click="notificationMenu = false"><translate>Close</translate></v-btn>
|
||||
<v-btn color="primary" flat @click="notificationMenu = false"><translate>Save</translate></v-btn>
|
||||
<v-btn flat @click="notificationMenu = false">
|
||||
<translate>Close</translate>
|
||||
</v-btn>
|
||||
<v-btn color="primary" flat @click="notificationMenu = false">
|
||||
<translate>Save</translate>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
<v-btn v-if="!user" :to="{ name: 'Login' }"><translate>Login</translate></v-btn>
|
||||
<v-btn v-if="!user" :to="{ name: 'Login' }">
|
||||
<translate>Login</translate>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
|
||||
import {SEARCH} from '@/graphql/search';
|
||||
<style>
|
||||
nav.v-toolbar .v-input__slot {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
props: {
|
||||
toggleDrawer: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
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),
|
||||
};
|
||||
},
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
|
||||
import { SEARCH } from '@/graphql/search';
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
search: {
|
||||
query: SEARCH,
|
||||
@ -123,20 +114,23 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
model(val) {
|
||||
switch(val.__typename) {
|
||||
case 'Event':
|
||||
this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
|
||||
break;
|
||||
case 'Actor':
|
||||
this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
items() {
|
||||
})
|
||||
export default class NavBar extends Vue {
|
||||
@Prop({ required: true, type: Function }) toggleDrawer!: Function;
|
||||
|
||||
notificationMenu = false;
|
||||
notifications = [
|
||||
{ header: 'Coucou' },
|
||||
{ title: 'T\'as une notification', subtitle: 'Et elle est cool' },
|
||||
];
|
||||
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':
|
||||
@ -148,22 +142,28 @@ export default {
|
||||
}
|
||||
return searchEntry;
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
@Watch('model')
|
||||
onModelChanged(val) {
|
||||
switch (val.__typename) {
|
||||
case 'Event':
|
||||
this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
|
||||
break;
|
||||
case 'Actor':
|
||||
this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
username_with_domain(actor) {
|
||||
return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
|
||||
},
|
||||
}
|
||||
|
||||
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 router from '@/router';
|
||||
// import store from './store';
|
||||
import translations from '@/i18n/translations.json';
|
||||
import { createProvider } from './vue-apollo';
|
||||
|
||||
const translations = require('@/i18n/translations.json');
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.use(VueMarkdown);
|
||||
Vue.use(Vuetify);
|
||||
const language = window.navigator.userLanguage || window.navigator.language;
|
||||
|
||||
const language = (window.navigator as any).userLanguage || window.navigator.language;
|
||||
moment.locale(language);
|
||||
|
||||
Vue.filter('formatDate', value => (value ? moment(String(value)).format('LLLL') : null));
|
||||
@ -33,8 +35,8 @@ Vue.config.language = language.replace('-', '_');
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
el: '#app',
|
||||
template: '<App/>',
|
||||
apolloProvider: createProvider(),
|
||||
components: { App },
|
@ -5,8 +5,7 @@ import { register } from 'register-service-worker';
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
register(`${process.env.BASE_URL}service-worker.js`, {
|
||||
ready() {
|
||||
console.log('App is being served from cache by a service worker.\n' +
|
||||
'For more details, visit https://goo.gl/AFskqB');
|
||||
console.log('App is being served from cache by a service worker.\nFor more details, visit https://goo.gl/AFskqB');
|
||||
},
|
||||
cached() {
|
||||
console.log('Content has been cached for offline use.');
|
@ -1,23 +1,23 @@
|
||||
import Vue from 'vue';
|
||||
import Router from 'vue-router';
|
||||
import PageNotFound from '@/components/PageNotFound';
|
||||
import Home from '@/components/Home';
|
||||
import Event from '@/components/Event/Event';
|
||||
import EventList from '@/components/Event/EventList';
|
||||
import Location from '@/components/Location';
|
||||
import CreateEvent from '@/components/Event/Create';
|
||||
import CategoryList from '@/components/Category/List';
|
||||
import CreateCategory from '@/components/Category/Create';
|
||||
import Register from '@/components/Account/Register';
|
||||
import Login from '@/components/Account/Login';
|
||||
import Validate from '@/components/Account/Validate';
|
||||
import ResendConfirmation from '@/components/Account/ResendConfirmation';
|
||||
import SendPasswordReset from '@/components/Account/SendPasswordReset';
|
||||
import PasswordReset from '@/components/Account/PasswordReset';
|
||||
import Account from '@/components/Account/Account';
|
||||
import CreateGroup from '@/components/Group/Create';
|
||||
import Group from '@/components/Group/Group';
|
||||
import GroupList from '@/components/Group/GroupList';
|
||||
import PageNotFound from '@/components/PageNotFound.vue';
|
||||
import Home from '@/components/Home.vue';
|
||||
import Event from '@/components/Event/Event.vue';
|
||||
import EventList from '@/components/Event/EventList.vue';
|
||||
import Location from '@/components/Location.vue';
|
||||
import CreateEvent from '@/components/Event/Create.vue';
|
||||
import CategoryList from '@/components/Category/List.vue';
|
||||
import CreateCategory from '@/components/Category/Create.vue';
|
||||
import Register from '@/components/Account/Register.vue';
|
||||
import Login from '@/components/Account/Login.vue';
|
||||
import Validate from '@/components/Account/Validate.vue';
|
||||
import ResendConfirmation from '@/components/Account/ResendConfirmation.vue';
|
||||
import SendPasswordReset from '@/components/Account/SendPasswordReset.vue';
|
||||
import PasswordReset from '@/components/Account/PasswordReset.vue';
|
||||
import Account from '@/components/Account/Account.vue';
|
||||
import CreateGroup from '@/components/Group/Create.vue';
|
||||
import Group from '@/components/Group/Group.vue';
|
||||
import GroupList from '@/components/Group/GroupList.vue';
|
||||
import Identities from '../components/Account/Identities.vue';
|
||||
|
||||
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 authMiddleware = new ApolloLink((operation, forward) => {
|
||||
// add the authorization to the headers
|
||||
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({
|
||||
@ -60,6 +61,8 @@ const link = authMiddleware.concat(uploadLink);
|
||||
|
||||
// Config
|
||||
const defaultOptions = {
|
||||
cache,
|
||||
link,
|
||||
// You can use `https` for secure connection (recommended in production)
|
||||
httpEndpoint,
|
||||
// You can use `wss` for secure connection (recommended in production)
|
||||
@ -74,9 +77,8 @@ const defaultOptions = {
|
||||
websocketsOnly: false,
|
||||
// Is being rendered on the server?
|
||||
ssr: false,
|
||||
cache,
|
||||
link,
|
||||
defaultHttpLink: false,
|
||||
connectToDevTools: true,
|
||||
};
|
||||
|
||||
// Call this in the Vue app file
|
||||
@ -89,23 +91,18 @@ export function createProvider(options = {}) {
|
||||
apolloClient.wsClient = wsClient;
|
||||
|
||||
// Create vue apollo provider
|
||||
const apolloProvider = new VueApollo({
|
||||
return new VueApollo({
|
||||
defaultClient: apolloClient,
|
||||
link,
|
||||
cache,
|
||||
connectToDevTools: true,
|
||||
defaultOptions: {
|
||||
$query: {
|
||||
// defaultOptions: {
|
||||
// $query: {
|
||||
// fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
},
|
||||
// },
|
||||
// },
|
||||
errorHandler(error) {
|
||||
// eslint-disable-next-line no-console
|
||||
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
|
@ -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