Merge branch 'feature/typescript' into 'master'

Migration to typescript: first step

See merge request framasoft/mobilizon!33
This commit is contained in:
Thomas Citharel 2018-12-27 08:45:20 +01:00
commit eaa4c347ca
45 changed files with 1845 additions and 2324 deletions

View File

@ -1,7 +0,0 @@
module.exports = {
root: true,
extends: [
'plugin:vue/essential',
'@vue/airbnb',
],
};

1253
js/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
} }

View File

@ -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,22 +149,21 @@
</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,
}, },
@ -177,46 +177,48 @@ export default {
{ icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' }, { icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
{ icon: 'help', text: 'Help', role: null }, { icon: 'help', text: 'Help', role: null },
{ icon: 'phonelink', text: 'App downloads', role: null }, { icon: 'phonelink', text: 'App downloads', role: null },
], ];
error: { error = {
timeout: 3000, timeout: 3000,
show: false, show: false,
text: '', text: '',
},
show_new_event_button: false,
actor: localStorage.getItem(AUTH_USER_ACTOR),
}; };
},
methods: { actor = localStorage.getItem(AUTH_USER_ACTOR);
showMenuItem(elem) {
return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true; get displayed_name () {
}, // FIXME: load actor
getUser() { 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; return this.user === undefined ? false : this.user;
}, }
toggleDrawer() {
toggleDrawer () {
this.drawer = !this.drawer; this.drawer = !this.drawer;
}, }
}, }
computed: {
displayed_name() {
return this.actor.display_name === null ? this.actor.username : this.actor.display_name;
},
},
};
</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>

View File

@ -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,22 +174,11 @@
</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',
data() {
return {
actor: null,
};
},
props: {
name: {
type: String,
required: true,
},
},
apollo: { apollo: {
actor: { actor: {
query: FETCH_ACTOR, query: FETCH_ACTOR,
@ -197,20 +189,25 @@ export default {
}, },
}, },
}, },
created() { })
}, export default class Account extends Vue {
watch: { @Prop({ type: String, required: true }) name!: string;
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>

View File

@ -66,64 +66,68 @@
</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>

View File

@ -58,47 +58,30 @@
</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: {
email: {
type: String,
required: false,
default: '',
},
password: {
type: String,
required: false,
default: '',
},
},
beforeCreate() {
if (this.user) {
this.$router.push('/');
}
},
components: { components: {
'v-gravatar': Gravatar, 'v-gravatar': Gravatar,
avatar: RegisterAvatar, avatar: RegisterAvatar,
}, },
mounted() { })
this.credentials.email = this.email; export default class Login extends Vue {
this.credentials.password = this.password; @Prop({ type: String, required: false, default: '' }) email!: string;
}, @Prop({ type: String, required: false, default: '' }) password!: string;
data() {
return { credentials = {
credentials: {
email: '', email: '',
password: '', password: '',
}, };
validationSent: false, validationSent = false;
error: { error = {
show: false, show: false,
text: '', text: '',
timeout: 3000, timeout: 3000,
@ -106,42 +89,53 @@ export default {
email: false, email: false,
password: false, password: false,
}, },
}, };
rules: { rules = {
required: value => !!value || 'Required.', required: value => !!value || 'Required.',
email: (value) => { 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,}))$/; 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.'; return pattern.test(value) || 'Invalid e-mail.';
}, },
},
}; };
}, user: any;
methods: {
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>

View File

@ -36,31 +36,22 @@
</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: {
samePasswords() {
return this.rules.password_length(this.credentials.password) === true &&
this.credentials.password === this.credentials.password_confirmation;
},
},
data() {
return {
credentials: {
password: '', password: '',
password_confirmation: '', password_confirmation: '',
}, };
error: { error = {
show: false, show: false,
}, };
state: { state = {
token: { token: {
status: null, status: null,
msg: '', msg: '',
@ -73,38 +64,46 @@ export default {
status: null, status: null,
msg: '', msg: '',
}, },
}, };
rules: { rules = {
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long', password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
required: value => !!value || 'Required.', required: value => !!value || 'Required.',
password_equal: value => value === this.credentials.password || 'Passwords must be the same', 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) { 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>

View File

@ -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,39 +82,31 @@
</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: {
default_email: {
type: String,
required: false,
default: '',
},
default_password: {
type: String,
required: false,
default: '',
},
},
components: { components: {
'v-gravatar': Gravatar, 'v-gravatar': Gravatar,
avatar: RegisterAvatar, avatar: RegisterAvatar,
}, },
data() { })
return { export default class Register extends Vue {
username: '', @Prop({ type: String, required: false, default: '' }) default_email!: string;
email: this.default_email, @Prop({ type: String, required: false, default: '' }) default_password!: string;
password: this.default_password,
error: { username = '';
email = this.default_email;
password = this.default_password;
error = {
show: false, show: false,
}, };
showPassword: false, showPassword = false;
validationSent: false, validationSent = false;
state: { state = {
email: { email: {
status: false, status: false,
msg: [], msg: [],
@ -123,40 +119,41 @@ export default {
status: false, status: false,
msg: [], msg: [],
}, },
}, };
rules: { rules = {
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long', password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
required: value => !!value || 'Required.', required: value => !!value || 'Required.',
email: (value) => { 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,}))$/; 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.'; return pattern.test(value) || 'Invalid e-mail.';
}, },
},
}; };
},
methods: {
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">
.avatar-enter-active {
transition: opacity 1s ease;
}
.avatar-enter, .avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none; display: none;
} }
</style> </style>

View File

@ -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>

View File

@ -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 = {
},
},
data() {
return {
credentials: {
email: '', email: '',
}, };
validationSent: false, validationSent = false;
error: false, error = false;
state: { state = {
email: { email: {
status: null, status: null,
msg: '', msg: '',
}, },
}, };
rules: { rules = {
required: value => !!value || 'Required.', required: value => !!value || 'Required.',
email: (value) => { 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,}))$/; 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.'; return pattern.test(value) || 'Invalid e-mail.';
}, },
},
}; };
},
mounted() { mounted() {
this.credentials.email = this.email; this.credentials.email = this.email;
}, }
methods: {
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>

View File

@ -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 = {
},
},
mounted() {
this.credentials.email = this.email;
},
data() {
return {
credentials: {
email: '', email: '',
}, };
validationSent: false, validationSent = false;
error: false, error = false;
state: { state = {
email: { email: {
status: null, status: null,
msg: '', msg: '',
}, },
}, };
rules: {
rules = {
required: value => !!value || 'Required.', required: value => !!value || 'Required.',
email: (value) => { 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,}))$/; 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.'; return pattern.test(value) || 'Invalid e-mail.';
}, },
},
}; };
},
methods: { 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>

View File

@ -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;
export default {
name: 'Validate',
data() {
return {
loading: true,
failed: false,
};
},
props: {
token: {
type: String,
required: true,
},
},
created() { created() {
this.validateAction(); 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>

View File

@ -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: '',
image: {
url: '', url: '',
name: '', name: '',
file: '', 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>

View File

@ -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 {
name: 'Home',
data() {
return {
categories: [],
loading: true,
HTTP_ENDPOINT: 'http://localhost:4000',
};
},
apollo: { apollo: {
categories: { categories: {
query: FETCH_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 -->

View File

@ -65,30 +65,31 @@
</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',
props: {
uuid: {
required: false,
type: String,
},
},
components: { components: {
/* Location, */ VueMarkdown
VueMarkdown,
}, },
data() { apollo: {
return { categories: {
e1: 0, query: FETCH_CATEGORIES,
event: { },
}
})
export default class CreateEvent extends Vue {
@Prop({required: false, type: String}) uuid!: string
e1 = 0
event = {
title: null, title: null,
organizer_actor_id: null,
description: '', description: '',
begins_on: (new Date()).toISOString().substr(0, 10), begins_on: (new Date()).toISOString().substr(0, 10),
ends_on: new Date(), ends_on: new Date(),
@ -102,25 +103,20 @@ export default {
category_id: null, category_id: null,
tags: [], tags: [],
participants: [], participants: [],
}, } as any // FIXME: correctly type an event
categories: [], categories = []
tags: [], tags = []
tagsToSend: [], tagsToSend = []
tagsFetched: [], tagsFetched = []
}; loading = false
},
// created() { // created() {
// if (this.uuid) { // if (this.uuid) {
// this.fetchEvent(); // this.fetchEvent();
// } // }
// }, // }
apollo: {
categories: { create () {
query: FETCH_CATEGORIES,
},
},
methods: {
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>

View File

@ -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() { created() {
this.fetchData(); 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>

View File

@ -54,7 +54,9 @@
<!-- <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span> --> <!-- <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span> -->
</div> </div>
<!-- <p><router-link :to="{ name: 'Account', params: {id: event.organizer.id} }"><span class="grey&#45;&#45;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> --> <!-- <p><router-link :to="{ name: 'Account', params: {id: event.organizer.id} }"><span class="grey&#45;&#45;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>
<!-- <v-flex md2> <!-- <v-flex md2>
<p v-if="actorIsOrganizer()"> <p v-if="actorIsOrganizer()">
@ -146,32 +148,15 @@
</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: { apollo: {
event: { event: {
query: FETCH_EVENT, query: FETCH_EVENT,
@ -185,58 +170,76 @@ export default {
// query: LOGGED_ACTOR, // 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() { 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>

View File

@ -2,11 +2,12 @@
<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>
{{ locationText }}
</v-chip> </v-chip>
<v-container grid-list-sm fluid> <v-container grid-list-sm fluid>
<v-layout row wrap> <v-layout row wrap>
@ -35,7 +36,8 @@
> >
</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
:to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
</div> </div>
</v-card-title> </v-card-title>
<v-card-actions> <v-card-actions>
@ -53,46 +55,48 @@
</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: VCardTitle as any,
VueMarkdown, VueMarkdown,
}, },
data() { })
return { export default class EventList extends Vue {
events: [], @Prop(String) location!: string;
loading: true,
locationChip: false, events = [];
locationText: '', loading = true;
}; locationChip = false;
}, locationText = '';
props: ['location'],
created() { created() {
this.fetchData(this.$router.currentRoute.params.location); this.fetchData(this.$router.currentRoute.params[ 'location' ]);
},
watch: {
locationChip(val) {
if (val === false) {
this.$router.push({ name: 'EventList' });
} }
},
},
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
this.fetchData(to.params.location); this.fetchData(to.params.location);
next(); next();
}, }
methods: {
@Watch('locationChip')
onLocationChipChange(val) {
if (val === false) {
this.$router.push({ name: 'EventList' });
}
}
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 -->

View File

@ -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 {
name: 'create-group',
@Component({
components: { components: {
VueMarkdown, VueMarkdown,
VuetifyGoogleAutocomplete, VuetifyGoogleAutocomplete,
}, },
data() { })
return { export default class CreateGroup extends Vue {
e1: 0, e1 = 0;
group: { // FIXME: correctly type group
group: { preferred_username: string, name: string, summary: string, address?: any } = {
preferred_username: '', preferred_username: '',
name: '', name: '',
summary: '', summary: '',
// category: null, // category: null,
},
categories: [],
}; };
}, categories = [];
mounted() { mounted() {
this.fetchCategories(); 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>

View File

@ -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>
@ -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: {
type: String,
required: true,
},
},
created() { created() {
this.fetchData(); this.fetchData();
}, }
watch: {
@Watch('$route')
onRouteChanged() {
// call again the method if the route changes // call again the method if the route changes
$route: 'fetchData', this.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>

View File

@ -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 -->

View File

@ -12,7 +12,9 @@
<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' }">
<translate>Register</translate>
</v-btn>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
@ -21,11 +23,14 @@
<v-flex xs12 sm8 offset-sm2> <v-flex xs12 sm8 offset-sm2>
<v-layout row wrap> <v-layout row wrap>
<v-flex xs12 sm6> <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>
<v-flex xs12 sm6> <v-flex xs12 sm6>
<v-layout align-center> <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 solo
append-icon="place" append-icon="place"
:value="ipLocation()" :value="ipLocation()"
@ -78,51 +83,52 @@
</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',
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),
};
},
apollo: { apollo: {
events: { events: {
query: FETCH_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; 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 {

View File

@ -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>

View File

@ -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,20 +114,23 @@ 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 = [
case 'Actor': { header: 'Coucou' },
this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } }); { title: 'T\'as une notification', subtitle: 'Et elle est cool' },
break; ];
} model = null;
}, search: any[] = [];
}, searchText: string | null = null;
computed: { searchSelect = null;
items() { actor = localStorage.getItem(AUTH_USER_ACTOR);
user = localStorage.getItem(AUTH_USER_ID);
get items() {
return this.search.map(searchEntry => { return this.search.map(searchEntry => {
switch (searchEntry.__typename) { switch (searchEntry.__typename) {
case 'Actor': case 'Actor':
@ -148,22 +142,28 @@ export default {
} }
return searchEntry; 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) { username_with_domain(actor) {
return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`); 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>

View File

@ -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 },

View File

@ -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.');

View File

@ -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
View 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
View File

@ -0,0 +1,4 @@
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}

View File

@ -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,
defaultOptions: {
$query: {
// fetchPolicy: 'cache-and-network', // 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

View File

@ -1,8 +0,0 @@
module.exports = {
env: {
mocha: true,
},
rules: {
'import/no-extraneous-dependencies': 'off',
},
};

View File

@ -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
View 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
View File

@ -0,0 +1,8 @@
{
"extends": "tslint-config-airbnb",
"rules": {
"max-line-length": [ true, 140 ],
"import-name": false,
"ter-arrow-parens": false
}
}