Introduce group basic federation, event new page and notifications
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -1,67 +1,66 @@
|
||||
<template>
|
||||
<section class="container">
|
||||
<h1>
|
||||
{{ $t('Search results: "{search}"', { search: this.searchTerm }) }}
|
||||
</h1>
|
||||
<b-loading :active.sync="$apollo.loading" />
|
||||
<b-tabs v-model="activeTab" type="is-boxed" class="searchTabs" @change="changeTab">
|
||||
<b-tab-item>
|
||||
<template slot="header">
|
||||
<b-icon icon="calendar"></b-icon>
|
||||
<span>
|
||||
{{ $t('Events') }} <b-tag rounded>{{ searchEvents.total }}</b-tag>
|
||||
</span>
|
||||
</template>
|
||||
<div v-if="searchEvents.total > 0" class="columns is-multiline">
|
||||
<div class="column is-one-quarter-desktop is-half-mobile"
|
||||
v-for="event in searchEvents.elements"
|
||||
:key="event.uuid">
|
||||
<EventCard
|
||||
:event="event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<b-message v-else-if="$apollo.loading === false" type="is-danger">
|
||||
{{ $t('No events found') }}
|
||||
</b-message>
|
||||
</b-tab-item>
|
||||
<!-- <b-tab-item>-->
|
||||
<!-- <template slot="header">-->
|
||||
<!-- <b-icon icon="account-multiple"></b-icon>-->
|
||||
<!-- <span>-->
|
||||
<!-- {{ $t('Groups') }} <b-tag rounded>{{ searchGroups.total }}</b-tag>-->
|
||||
<!-- </span>-->
|
||||
<!-- </template>-->
|
||||
<!-- <div v-if="searchGroups.total > 0" class="columns is-multiline">-->
|
||||
<!-- <div class="column is-one-quarter-desktop is-half-mobile"-->
|
||||
<!-- v-for="group in groups"-->
|
||||
<!-- :key="group.uuid">-->
|
||||
<!-- <group-card :group="group" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <b-message v-else-if="$apollo.loading === false" type="is-danger">-->
|
||||
<!-- {{ $t('No groups found') }}-->
|
||||
<!-- </b-message>-->
|
||||
<!-- </b-tab-item>-->
|
||||
</b-tabs>
|
||||
</section>
|
||||
<section class="container">
|
||||
<h1>{{ $t('Search results: "{search}"', { search: this.searchTerm }) }}</h1>
|
||||
<b-loading :active.sync="$apollo.loading" />
|
||||
<b-tabs v-model="activeTab" type="is-boxed" class="searchTabs" @change="changeTab">
|
||||
<b-tab-item>
|
||||
<template slot="header">
|
||||
<b-icon icon="calendar"></b-icon>
|
||||
<span>
|
||||
{{ $t("Events") }}
|
||||
<b-tag rounded>{{ searchEvents.total }}</b-tag>
|
||||
</span>
|
||||
</template>
|
||||
<div v-if="searchEvents.total > 0" class="columns is-multiline">
|
||||
<div
|
||||
class="column is-one-quarter-desktop is-half-mobile"
|
||||
v-for="event in searchEvents.elements"
|
||||
:key="event.uuid"
|
||||
>
|
||||
<EventCard :event="event" />
|
||||
</div>
|
||||
</div>
|
||||
<b-message v-else-if="$apollo.loading === false" type="is-danger">{{
|
||||
$t("No events found")
|
||||
}}</b-message>
|
||||
</b-tab-item>
|
||||
<!-- <b-tab-item>-->
|
||||
<!-- <template slot="header">-->
|
||||
<!-- <b-icon icon="account-multiple"></b-icon>-->
|
||||
<!-- <span>-->
|
||||
<!-- {{ $t('Groups') }} <b-tag rounded>{{ searchGroups.total }}</b-tag>-->
|
||||
<!-- </span>-->
|
||||
<!-- </template>-->
|
||||
<!-- <div v-if="searchGroups.total > 0" class="columns is-multiline">-->
|
||||
<!-- <div class="column is-one-quarter-desktop is-half-mobile"-->
|
||||
<!-- v-for="group in groups"-->
|
||||
<!-- :key="group.uuid">-->
|
||||
<!-- <group-card :group="group" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <b-message v-else-if="$apollo.loading === false" type="is-danger">-->
|
||||
<!-- {{ $t('No groups found') }}-->
|
||||
<!-- </b-message>-->
|
||||
<!-- </b-tab-item>-->
|
||||
</b-tabs>
|
||||
</section>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
import { SEARCH_EVENTS, SEARCH_GROUPS } from '@/graphql/search';
|
||||
import { RouteName } from '@/router';
|
||||
import EventCard from '@/components/Event/EventCard.vue';
|
||||
import GroupCard from '@/components/Group/GroupCard.vue';
|
||||
import { Group, IGroup } from '@/types/actor';
|
||||
import { SearchEvent, SearchGroup } from '@/types/search.model';
|
||||
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
||||
import { SEARCH_EVENTS, SEARCH_GROUPS } from "../graphql/search";
|
||||
import RouteName from "../router/name";
|
||||
import EventCard from "../components/Event/EventCard.vue";
|
||||
import GroupCard from "../components/Group/GroupCard.vue";
|
||||
import { Group, IGroup } from "../types/actor";
|
||||
import { SearchEvent, SearchGroup } from "../types/search.model";
|
||||
|
||||
enum SearchTabs {
|
||||
EVENTS = 0,
|
||||
GROUPS = 1,
|
||||
PERSONS = 2, // not used right now
|
||||
EVENTS = 0,
|
||||
GROUPS = 1,
|
||||
PERSONS = 2, // not used right now
|
||||
}
|
||||
|
||||
const tabsName = {
|
||||
const tabsName: { events: number; groups: number } = {
|
||||
events: SearchTabs.EVENTS,
|
||||
groups: SearchTabs.GROUPS,
|
||||
};
|
||||
@@ -98,31 +97,43 @@ const tabsName = {
|
||||
})
|
||||
export default class Search extends Vue {
|
||||
@Prop({ type: String, required: true }) searchTerm!: string;
|
||||
@Prop({ type: String, required: false, default: 'events' }) searchType!: string;
|
||||
|
||||
@Prop({ type: String, required: false, default: "events" }) searchType!: "events" | "groups";
|
||||
|
||||
searchEvents: SearchEvent = { total: 0, elements: [] };
|
||||
|
||||
searchGroups: SearchGroup = { total: 0, elements: [] };
|
||||
|
||||
activeTab: SearchTabs = tabsName[this.searchType];
|
||||
|
||||
@Watch('searchEvents')
|
||||
@Watch("searchEvents")
|
||||
async redirectURLToEvent() {
|
||||
if (this.searchEvents.total === 1 && this.isURL(this.searchTerm)) {
|
||||
return await this.$router.replace({ name: RouteName.EVENT, params: { uuid: this.searchEvents.elements[0].uuid } });
|
||||
return await this.$router.replace({
|
||||
name: RouteName.EVENT,
|
||||
params: { uuid: this.searchEvents.elements[0].uuid },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
changeTab(index: number) {
|
||||
switch (index) {
|
||||
case SearchTabs.EVENTS:
|
||||
this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchTerm, searchType: 'events' } });
|
||||
this.$router.push({
|
||||
name: RouteName.SEARCH,
|
||||
params: { searchTerm: this.searchTerm, searchType: "events" },
|
||||
});
|
||||
break;
|
||||
case SearchTabs.GROUPS:
|
||||
this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchTerm, searchType: 'groups' } });
|
||||
this.$router.push({
|
||||
name: RouteName.SEARCH,
|
||||
params: { searchTerm: this.searchTerm, searchType: "groups" },
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('search')
|
||||
@Watch("search")
|
||||
changeTabForResult() {
|
||||
if (this.searchEvents.total === 0 && this.searchGroups.total > 0) {
|
||||
this.activeTab = SearchTabs.GROUPS;
|
||||
@@ -132,33 +143,32 @@ export default class Search extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('search')
|
||||
@Watch('$route')
|
||||
@Watch("search")
|
||||
@Watch("$route")
|
||||
async loadSearch() {
|
||||
await this.$apollo.queries['searchEvents'].refetch() && this.$apollo.queries['searchGroups'].refetch();
|
||||
(await this.$apollo.queries.searchEvents.refetch()) &&
|
||||
this.$apollo.queries.searchGroups.refetch();
|
||||
}
|
||||
|
||||
|
||||
get groups(): IGroup[] {
|
||||
return this.searchGroups.elements.map(group => Object.assign(new Group(), group));
|
||||
return this.searchGroups.elements.map((group) => Object.assign(new Group(), group));
|
||||
}
|
||||
|
||||
isURL(url: string): boolean {
|
||||
const a = document.createElement('a');
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
return (a.host && a.host !== window.location.host) as boolean;
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "~bulma/sass/utilities/_all";
|
||||
@import "~bulma/sass/components/tabs";
|
||||
@import "~buefy/src/scss/components/tabs";
|
||||
@import "~bulma/sass/elements/tag";
|
||||
@import "~bulma/sass/utilities/_all";
|
||||
@import "~bulma/sass/components/tabs";
|
||||
@import "~buefy/src/scss/components/tabs";
|
||||
@import "~bulma/sass/elements/tag";
|
||||
|
||||
.searchTabs .tab-content {
|
||||
background: #fff;
|
||||
min-height: 10em;
|
||||
}
|
||||
.searchTabs .tab-content {
|
||||
background: #fff;
|
||||
min-height: 10em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user