mobilizon/js/src/components/NavBar.vue

<template>
  <v-toolbar
    class="blue darken-3"
    dark
    app
    :clipped-left="$vuetify.breakpoint.lgAndUp"
    fixed
  >
    <v-toolbar-title style="width: 300px" class="ml-0 pl-3 white--text">
      <v-toolbar-side-icon @click.stop="toggleDrawer()"></v-toolbar-side-icon>
      <router-link :to="{ name: 'Home' }" class="hidden-sm-and-down white--text">Mobilizon
      </router-link>
    </v-toolbar-title>
    <v-autocomplete
      :loading="$apollo.loading"
      flat
      solo-inverted
      prepend-icon="search"
      :label="$gettext('Search')"
      required
      item-text="label"
      class="hidden-sm-and-down"
      :items="items"
      :search-input.sync="searchText"
      v-model="model"
      return-object
    >
      <template slot="item" slot-scope="data">
        <!-- <div>{{ data }}</div> -->
        <v-list-tile v-if="data.item.__typename === 'Event'">
          <v-list-tile-avatar>
            <v-icon>event</v-icon>
          </v-list-tile-avatar>
          <v-list-tile-content v-text="data.item.label"></v-list-tile-content>
        </v-list-tile>
        <v-list-tile v-else-if="data.item.__typename === 'Actor'">
          <v-list-tile-avatar>
            <img :src="data.item.avatarUrl" v-if="data.item.avatarUrl">
            <v-icon v-else>account_circle</v-icon>
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title v-html="username_with_domain(data.item)"></v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </template>
    </v-autocomplete>
    <v-spacer></v-spacer>
    <v-menu
      offset-y
      :close-on-content-click="false"
      :nudge-width="200"
      v-model="notificationMenu"
      v-if="user"
    >
      <v-btn icon slot="activator">
        <v-badge left color="red">
          <span slot="badge">{{ notifications.length }}</span>
          <v-icon>notifications</v-icon>
        </v-badge>
      </v-btn>
      <v-card>
        <v-list two-line>
          <template v-for="item in notifications">
            <v-subheader v-if="item.header" v-text="item.header" v-bind:key="item.header"></v-subheader>
            <v-divider v-else-if="item.divider" v-bind:inset="item.inset" v-bind:key="item.inset"></v-divider>
            <v-list-tile avatar v-else v-bind:key="item.title">
              <v-list-tile-content>
                <v-list-tile-title v-html="item.title"></v-list-tile-title>
                <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat @click="notificationMenu = false"><translate>Close</translate></v-btn>
          <v-btn color="primary" flat @click="notificationMenu = false"><translate>Save</translate></v-btn>
        </v-card-actions>
      </v-card>
    </v-menu>
    <v-btn v-if="!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';

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),
    };
  },
  apollo: {
    search: {
      query: SEARCH,
      variables() {
        return {
          searchText: this.searchText,
        };
      },
      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;
      }
    },
  },
  computed: {
    items() {
      return this.search.map(searchEntry => {
        switch (searchEntry.__typename) {
          case 'Actor':
            searchEntry.label = searchEntry.preferredUsername;
            break;
          case 'Event':
            searchEntry.label = searchEntry.title;
            break;
        }
        return searchEntry;
      });
    },
    displayed_name() {
      console.log('displayed name', this.actor);
      if (this.actor) {
        return this.actor.display_name === null ? this.actor.username : this.actor.display_name;
      }
    },
  },
  methods: {
    username_with_domain(actor) {
      return actor.preferredUsername + (actor.domain === undefined ? '' : `@${actor.domain}`);
    },
  },
};
</script>

<style>
nav.v-toolbar .v-input__slot {
  margin-bottom: 0;
}
</style>