2018-01-09 17:52:26 +01:00
|
|
|
<template>
|
|
|
|
<v-toolbar
|
|
|
|
class="blue darken-3"
|
|
|
|
dark
|
|
|
|
app
|
2018-07-04 14:29:17 +02:00
|
|
|
:clipped-left="$vuetify.breakpoint.lgAndUp"
|
2018-01-09 17:52:26 +01:00
|
|
|
fixed
|
|
|
|
>
|
2018-07-04 14:29:17 +02:00
|
|
|
<v-toolbar-title style="width: 300px" class="ml-0 pl-3 white--text">
|
|
|
|
<v-toolbar-side-icon @click.stop="toggleDrawer()"></v-toolbar-side-icon>
|
2018-10-11 17:37:39 +02:00
|
|
|
<router-link :to="{ name: 'Home' }" class="hidden-sm-and-down white--text">Mobilizon
|
2018-01-09 17:52:26 +01:00
|
|
|
</router-link>
|
|
|
|
</v-toolbar-title>
|
2018-07-04 14:29:17 +02:00
|
|
|
<v-autocomplete
|
2018-11-06 10:30:27 +01:00
|
|
|
:loading="$apollo.loading"
|
2018-07-04 14:29:17 +02:00
|
|
|
flat
|
|
|
|
solo-inverted
|
2018-01-09 17:52:26 +01:00
|
|
|
prepend-icon="search"
|
2018-11-06 10:30:27 +01:00
|
|
|
:label="$gettext('Search')"
|
2018-01-09 17:52:26 +01:00
|
|
|
required
|
2018-11-06 10:30:27 +01:00
|
|
|
item-text="label"
|
2018-07-04 14:29:17 +02:00
|
|
|
class="hidden-sm-and-down"
|
2018-11-06 10:30:27 +01:00
|
|
|
:items="items"
|
|
|
|
:search-input.sync="searchText"
|
2018-11-07 16:09:28 +01:00
|
|
|
@keyup.enter="enter"
|
2018-11-06 10:30:27 +01:00
|
|
|
v-model="model"
|
2018-07-09 14:19:24 +02:00
|
|
|
return-object
|
2018-05-30 14:27:21 +02:00
|
|
|
>
|
|
|
|
<template slot="item" slot-scope="data">
|
2018-11-06 10:30:27 +01:00
|
|
|
<!-- <div>{{ data }}</div> -->
|
|
|
|
<v-list-tile v-if="data.item.__typename === 'Event'">
|
2018-05-30 14:27:21 +02:00
|
|
|
<v-list-tile-avatar>
|
2018-11-06 10:30:27 +01:00
|
|
|
<v-icon>event</v-icon>
|
|
|
|
</v-list-tile-avatar>
|
|
|
|
<v-list-tile-content v-text="data.item.label"></v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
<v-list-tile v-else-if="data.item.__typename === 'Actor'">
|
|
|
|
<v-list-tile-avatar>
|
|
|
|
<img :src="data.item.avatarUrl" v-if="data.item.avatarUrl">
|
|
|
|
<v-icon v-else>account_circle</v-icon>
|
2018-05-30 14:27:21 +02:00
|
|
|
</v-list-tile-avatar>
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title v-html="username_with_domain(data.item)"></v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
2018-11-06 10:30:27 +01:00
|
|
|
</v-list-tile>
|
2018-05-30 14:27:21 +02:00
|
|
|
</template>
|
2018-07-04 14:29:17 +02:00
|
|
|
</v-autocomplete>
|
2018-01-09 17:52:26 +01:00
|
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-menu
|
|
|
|
offset-y
|
|
|
|
:close-on-content-click="false"
|
|
|
|
:nudge-width="200"
|
|
|
|
v-model="notificationMenu"
|
2018-11-06 10:30:27 +01:00
|
|
|
v-if="user"
|
2018-01-09 17:52:26 +01:00
|
|
|
>
|
|
|
|
<v-btn icon slot="activator">
|
|
|
|
<v-badge left color="red">
|
|
|
|
<span slot="badge">{{ notifications.length }}</span>
|
|
|
|
<v-icon>notifications</v-icon>
|
|
|
|
</v-badge>
|
|
|
|
</v-btn>
|
|
|
|
<v-card>
|
|
|
|
<v-list two-line>
|
|
|
|
<template v-for="item in notifications">
|
|
|
|
<v-subheader v-if="item.header" v-text="item.header" v-bind:key="item.header"></v-subheader>
|
|
|
|
<v-divider v-else-if="item.divider" v-bind:inset="item.inset" v-bind:key="item.inset"></v-divider>
|
|
|
|
<v-list-tile avatar v-else v-bind:key="item.title">
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title v-html="item.title"></v-list-tile-title>
|
|
|
|
<v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
</template>
|
|
|
|
</v-list>
|
|
|
|
<v-card-actions>
|
|
|
|
<v-spacer></v-spacer>
|
2018-11-06 10:30:27 +01:00
|
|
|
<v-btn flat @click="notificationMenu = false"><translate>Close</translate></v-btn>
|
|
|
|
<v-btn color="primary" flat @click="notificationMenu = false"><translate>Save</translate></v-btn>
|
2018-01-09 17:52:26 +01:00
|
|
|
</v-card-actions>
|
|
|
|
</v-card>
|
|
|
|
</v-menu>
|
2018-11-06 10:30:27 +01:00
|
|
|
<v-btn v-if="!user" :to="{ name: 'Login' }"><translate>Login</translate></v-btn>
|
2018-01-09 17:52:26 +01:00
|
|
|
</v-toolbar>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-11-06 10:30:27 +01:00
|
|
|
import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
|
|
|
|
import {SEARCH} from '@/graphql/search';
|
2018-01-09 17:52:26 +01:00
|
|
|
|
2018-11-06 10:30:27 +01:00
|
|
|
export default {
|
|
|
|
name: 'NavBar',
|
|
|
|
props: {
|
|
|
|
toggleDrawer: {
|
|
|
|
type: Function,
|
|
|
|
required: true,
|
2018-01-09 17:52:26 +01:00
|
|
|
},
|
2018-11-06 10:30:27 +01:00
|
|
|
},
|
|
|
|
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: {
|
|
|
|
search: {
|
|
|
|
query: SEARCH,
|
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
searchText: this.searchText,
|
|
|
|
};
|
2018-01-09 17:52:26 +01:00
|
|
|
},
|
2018-11-06 10:30:27 +01:00
|
|
|
skip() {
|
|
|
|
return !this.searchText;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
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;
|
2018-01-09 17:52:26 +01:00
|
|
|
}
|
|
|
|
},
|
2018-11-06 10:30:27 +01:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
items() {
|
|
|
|
return this.search.map(searchEntry => {
|
|
|
|
switch (searchEntry.__typename) {
|
|
|
|
case 'Actor':
|
2018-11-07 16:09:28 +01:00
|
|
|
searchEntry.label = searchEntry.preferredUsername + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
|
2018-11-06 10:30:27 +01:00
|
|
|
break;
|
|
|
|
case 'Event':
|
|
|
|
searchEntry.label = searchEntry.title;
|
|
|
|
break;
|
2018-07-10 10:00:07 +02:00
|
|
|
}
|
2018-11-06 10:30:27 +01:00
|
|
|
return searchEntry;
|
|
|
|
});
|
2018-01-13 23:33:03 +01:00
|
|
|
},
|
2018-11-06 10:30:27 +01:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
username_with_domain(actor) {
|
2018-11-07 16:09:28 +01:00
|
|
|
return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
|
2018-11-06 10:30:27 +01:00
|
|
|
},
|
2018-11-07 16:09:28 +01:00
|
|
|
enter() {
|
|
|
|
console.log('enter');
|
|
|
|
this.$apollo.queries.search.refetch();
|
|
|
|
}
|
2018-11-06 10:30:27 +01:00
|
|
|
},
|
|
|
|
};
|
2018-01-09 17:52:26 +01:00
|
|
|
</script>
|
2018-07-04 14:29:17 +02:00
|
|
|
|
|
|
|
<style>
|
|
|
|
nav.v-toolbar .v-input__slot {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
2018-11-06 10:30:27 +01:00
|
|
|
</style>
|