hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Introduce event categories

Browse Source 
Closes #1056

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2022-03-28 17:42:59 +02:00
parent 91ed13d5c2
commit f5bdedf789
21 changed files with 371 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/src/components/Tag.vue
View File

@@ -17,7 +17,8 @@ span.tag {
background: $purple-3;
color: $violet-2;
text-transform: uppercase;
&::before {
&:not(.category)::before {
content: "#";
}
}

5
js/src/graphql/event.ts
View File

@@ -23,6 +23,7 @@ const FULL_EVENT_FRAGMENT = gql`
joinOptions
draft
language
category
picture {
id
url
@@ -203,7 +204,7 @@ export const CREATE_EVENT = gql`
$picture: MediaInput
$onlineAddress: String
$phoneAddress: String
$category: String
$category: EventCategory
$physicalAddress: AddressInput
$options: EventOptionsInput
$contacts: [Contact]
@@ -253,7 +254,7 @@ export const EDIT_EVENT = gql`
$phoneAddress: String
$organizerActorId: ID
$attributedToId: ID
$category: String
$category: EventCategory
$physicalAddress: AddressInput
$options: EventOptionsInput
$contacts: [Contact]

2
js/src/graphql/search.ts
View File

@@ -11,6 +11,7 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
$tags: String
$term: String
$type: EventType
$category: String
$beginsOn: DateTime
$endsOn: DateTime
$eventPage: Int
@@ -23,6 +24,7 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
tags: $tags
term: $term
type: $type
category: $category
beginsOn: $beginsOn
endsOn: $endsOn
page: $eventPage

20
js/src/i18n/en_US.json
View File

@@ -1306,5 +1306,23 @@
"IP Address": "IP Address",
"Last seen on": "Last seen on",
"No user matches the filters": "No user matches the filters",
"Reset filters": "Reset filters"
"Reset filters": "Reset filters",
"Arts": "Arts",
"Book Clubs": "Book Clubs",
"Business": "Business",
"Causes": "Causes",
"Comedy": "Comedy",
"Crafts": "Crafts",
"Food & Drink": "Food & Drink",
"Health": "Health",
"Music": "Music",
"Auto, Boat & Air": "Auto, Boat & Air",
"Community": "Community",
"Family & Education": "Family & Education",
"Fashion & Beauty": "Fashion & Beauty",
"Film & Media": "Film & Media",
"Games": "Games",
"Category": "Category",
"Select a category": "Select a category",
"Any category": "Any category"
}

20
js/src/i18n/fr_FR.json
View File

@@ -1305,5 +1305,23 @@
"{timezoneLongName} ({timezoneShortName})": "{timezoneLongName} ({timezoneShortName})",
"{title} ({count} todos)": "{title} ({count} todos)",
"{username} was invited to {group}": "{username} a été invité à {group}",
"© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap"
"© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
"Arts": "Arts",
"Book Clubs": "Clubs de lecture",
"Business": "Entreprises",
"Causes": "Causes",
"Comedy": "Comédie",
"Crafts": "Artisanat",
"Food & Drink": "Alimentation et boissons",
"Health": "Santé",
"Music": "Musique",
"Auto, Boat & Air": "Automobile, bateaux et aéronautique",
"Community": "Communauté",
"Family & Education": "Famille et éducation",
"Fashion & Beauty": "Mode et beauté",
"Film & Media": "Films et médias",
"Games": "Jeux",
"Category": "Catégorie",
"Select a category": "Choisissez une categorie",
"Any category": "N'importe quelle catégorie"
}

8
js/src/types/enums.ts
View File

@@ -72,14 +72,6 @@ export enum EventVisibilityJoinOptions {
LIMITED = "LIMITED",
}
export enum Category {
BUSINESS = "business",
CONFERENCE = "conference",
BIRTHDAY = "birthday",
DEMONSTRATION = "demonstration",
MEETING = "meeting",
}
export enum LoginErrorCode {
NEED_TO_LOGIN = "need_to_login",
}

6
js/src/types/event.model.ts
View File

@@ -53,6 +53,7 @@ interface IEventEditJSON {
options: IEventOptions;
contacts: { id?: string }[];
metadata: IEventMetadata[];
category: string;
}
export interface IEvent {
@@ -91,6 +92,7 @@ export interface IEvent {
metadata: IEventMetadata[];
contacts: IActor[];
language: string;
category: string;
toEditJSON(): IEventEditJSON;
}
@@ -166,6 +168,8 @@ export class EventModel implements IEvent {
metadata: IEventMetadata[] = [];
category = "MEETING";
constructor(hash?: IEvent | IEditableEvent) {
if (!hash) return;
@@ -214,6 +218,7 @@ export class EventModel implements IEvent {
this.tags = hash.tags;
this.metadata = hash.metadata;
this.language = hash.language;
this.category = hash.category;
if (hash.options) this.options = hash.options;
}
@@ -240,6 +245,7 @@ export function toEditJSON(event: IEditableEvent): IEventEditJSON {
beginsOn: event.beginsOn ? event.beginsOn.toISOString() : null,
endsOn: event.endsOn ? event.endsOn.toISOString() : null,
status: event.status,
category: event.category,
visibility: event.visibility,
joinOptions: event.joinOptions,
draft: event.draft,

68
js/src/utils/categories.ts Normal file
View File

@@ -0,0 +1,68 @@
import { i18n } from "@/utils/i18n";
export const eventCategories = [
{
id: "ARTS",
label: i18n.t("Arts"),
icon: "palette",
},
{
id: "BOOK_CLUBS",
label: i18n.t("Book Clubs"),
icon: "favourite-book",
},
{
id: "BUSINESS",
label: i18n.t("Business"),
},
{
id: "CAUSES",
label: i18n.t("Causes"),
},
{
id: "COMEDY",
label: i18n.t("Comedy"),
},
{
id: "CRAFTS",
label: i18n.t("Crafts"),
},
{
id: "FOOD_DRINK",
label: i18n.t("Food & Drink"),
},
{
id: "HEALTH",
label: i18n.t("Health"),
},
{
id: "MUSIC",
label: i18n.t("Music"),
},
{
id: "AUTO_BOAT_AIR",
label: i18n.t("Auto, Boat & Air"),
},
{
id: "COMMUNITY",
label: i18n.t("Community"),
},
{
id: "FAMILY_EDUCATION",
label: i18n.t("Family & Education"),
},
{
id: "FASHION_BEAUTY",
label: i18n.t("Fashion & Beauty"),
},
{
id: "FILM_MEDIA",
label: i18n.t("Film & Media"),
},
{
id: "GAMES",
label: i18n.t("Games"),
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
].sort(({ label: label1 }, { label: label2 }) => label1.localeCompare(label2));

42
js/src/views/Event/Edit.vue
View File

@@ -32,7 +32,28 @@
/>
</b-field>
<tag-input v-model="event.tags" />
<div class="flex flex-wrap gap-4">
<b-field
:label="$t('Category')"
label-for="category"
class="w-full md:max-w-fit"
>
<b-select
:placeholder="$t('Select a category')"
v-model="event.category"
expanded
>
<option
v-for="category in eventCategories"
:value="category.id"
:key="category.id"
>
{{ category.label }}
</option>
</b-select>
</b-field>
<tag-input v-model="event.tags" class="flex-1" />
</div>
<b-field
horizontal
@@ -644,6 +665,7 @@ import { USER_SETTINGS } from "@/graphql/user";
import { IUser } from "@/types/current-user.model";
import { IAddress } from "@/types/address.model";
import { LOGGED_USER_PARTICIPATIONS } from "@/graphql/participant";
import { eventCategories } from "@/utils/categories";
const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
@@ -753,6 +775,8 @@ export default class EditEvent extends Vue {
formatList = formatList;
eventCategories = eventCategories;
@Watch("eventId", { immediate: true })
resetFormForCreation(eventId: string): void {
if (eventId === undefined) {
@@ -1059,22 +1083,6 @@ export default class EditEvent extends Vue {
options: this.eventOptions,
};
console.debug(this.event.beginsOn?.toISOString());
// if (this.event.beginsOn && this.timezone) {
// console.debug(
// "begins on should be",
// zonedTimeToUtc(this.event.beginsOn, this.timezone).toISOString()
// );
// }
// if (this.event.beginsOn && this.timezone) {
// res.beginsOn = zonedTimeToUtc(
// this.event.beginsOn,
// this.timezone
// ).toISOString();
// }
const organizerActor = this.event.organizerActor?.id
? this.event.organizerActor
: this.organizerActor;

19
js/src/views/Event/Event.vue
View File

@@ -44,11 +44,10 @@
</popover-actor-card>
</span>
</div>
<p
class="tags"
v-if="event.tags && event.tags.length > 0"
dir="auto"
>
<p class="tags" dir="auto">
<tag v-if="eventCategory" class="category">{{
eventCategory
}}</tag>
<router-link
v-for="tag in event.tags"
:key="tag.title"
@@ -508,6 +507,7 @@ import { IEventMetadataDescription } from "@/types/event-metadata";
import { eventMetaDataList } from "../../services/EventMetadata";
import { USER_SETTINGS } from "@/graphql/user";
import { IUser } from "@/types/current-user.model";
import { eventCategories } from "@/utils/categories";
// noinspection TypeScriptValidateTypes
@Component({
@@ -1133,6 +1133,15 @@ export default class Event extends EventMixin {
get routingType(): string | undefined {
return this.config?.maps?.routing?.type;
}
get eventCategory(): string | undefined {
if (this.event?.category === "MEETING") {
return undefined;
}
return eventCategories.find((eventCategory) => {
return eventCategory.id === this.event?.category;
})?.label as string;
}
}
</script>
<style lang="scss" scoped>

94
js/src/views/Search.vue
View File

@@ -92,6 +92,30 @@
</option>
</b-select>
</b-field>
<b-field
expanded
:label="$t('Category')"
label-for="category"
class="searchCategory"
>
<b-select
expanded
v-model="eventCategory"
id="category"
:disabled="activeTab !== 0"
>
<option :value="null">
{{ $t("Any category") }}
</option>
<option
:value="category.id"
v-for="category in eventCategories"
:key="category.id"
>
{{ category.label }}
</option>
</b-select>
</b-field>
</form>
</div>
</section>
@@ -223,6 +247,7 @@ import { REVERSE_GEOCODE } from "../graphql/address";
import debounce from "lodash/debounce";
import { CURRENT_USER_CLIENT } from "@/graphql/user";
import { ICurrentUser } from "@/types/current-user.model";
import { eventCategories } from "@/utils/categories";
interface ISearchTimeOption {
label: string;
@@ -364,6 +389,8 @@ export default class Search extends Vue {
GROUP_PAGE_LIMIT = GROUP_PAGE_LIMIT;
eventCategories = eventCategories;
$refs!: {
aac: FullAddressAutoComplete;
autocompleteSearchInput: any;
@@ -511,6 +538,23 @@ export default class Search extends Vue {
});
}
get eventCategory(): string | null {
return (this.$route.query.eventCategory as string) || null;
}
set eventCategory(eventCategory: string | null) {
let query = { ...this.$route.query, eventCategory };
if (query.eventCategory === null) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
delete query.eventCategory;
}
this.$router.replace({
name: RouteName.SEARCH,
query,
});
}
get weekend(): { start: Date; end: Date } {
const now = new Date();
const endOfWeekDate = endOfWeek(now, { locale: this.$dateFnsLocale });
@@ -642,36 +686,16 @@ h3.title {
}
form {
// ::v-deep .field label.label {
// margin-bottom: 0;
// }
// .field.is-expanded:last-child > .field-body > .field.is-grouped {
// flex-wrap: wrap;
// flex: 1;
// .field {
// flex: 1 0 auto;
// &:first-child {
// flex: 3 0 300px;
// }
// }
// }
display: grid;
grid-gap: 0 15px;
grid-template-areas: "query" "location" "radius" "date" "type";
grid-template-areas: "query" "location" "radius" "date" "type" "category";
& > * {
margin-bottom: 0 !important;
}
@include tablet {
grid-template-columns: max-content max-content max-content auto;
grid-template-areas: "query . ." "location . ." "radius date type";
}
@include desktop {
grid-template-columns: max-content max-content max-content 1fr 3fr;
grid-template-areas: "query . location" "radius date type";
grid-template-areas: "query . ." "location radius ." "date type category";
}
.searchQuery {
@@ -681,7 +705,7 @@ form {
}
@include desktop {
grid-column-start: 1;
grid-column-end: 4;
grid-column-end: 5;
}
}
@@ -694,21 +718,41 @@ form {
grid-column: span 4;
}
@include desktop {
grid-column-start: 4;
grid-column-end: 7;
grid-column-start: 1;
grid-column-end: 4;
}
}
.searchRadius {
grid-area: radius;
@include desktop {
grid-column-start: 4;
grid-column-end: 5;
}
}
.searchDate {
grid-area: date;
@include desktop {
grid-column-start: 1;
grid-column-end: 2;
}
}
.searchType {
grid-area: type;
@include desktop {
grid-column-start: 2;
grid-column-end: 3;
}
}
.searchCategory {
grid-area: category;
@include desktop {
grid-column-start: 3;
grid-column-end: 5;
}
}
}
</style>