Skip to content

Commit d7bdbf0

Browse files
ntthitrinhkhangon
ntthitrinh
and
khangon
authored
feature-8753: Enhance the top menu bar on mobile views (#9025)
* feature-8753: Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views * feature-8753:Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views * feature-8753: Enhance the top menu bar on mobile views --------- Co-authored-by: Khang On - TMA <135116292+khangon@users.noreply.github.com>
1 parent e4dfd06 commit d7bdbf0

File tree

11 files changed

+151
-19
lines changed

11 files changed

+151
-19
lines changed

‎app/components/forms/orders/order-form.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -623,5 +623,10 @@ export default Component.extend(FormMixin, {
623623
updateGendersSelection(checked, changed, selectedOptions, holder, field) {
624624
holder.set(field.fieldIdentifier, selectedOptions.map(select => select.value).join(','));
625625
}
626+
},
627+
willDestroyElement() {
628+
clearInterval(this._getRemainingTimeId);
629+
this._super(...arguments);
626630
}
631+
627632
});

‎app/components/nav-bar.js‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import classic from 'ember-classic-decorator';
22
import { action, computed } from '@ember/object';
33
import Component from '@ember/component';
4+
import { inject as service } from '@ember/service';
5+
46

57
@classic
68
export default class NavBar extends Component {
9+
@service globalData;
710
@computed('session.currentRouteName')
811
get isGroupRoute() {
912
return (String(this.session.currentRouteName).includes('group'));
@@ -22,8 +25,7 @@ export default class NavBar extends Component {
2225
if (this.isGroupRoute) {
2326
return true;
2427
}
25-
return !(String(this.session.currentRouteName).includes('edit'))
26-
&& String(this.session.currentRouteName) !== 'create';
28+
return !String(this.session.currentRouteName) !== 'create';
2729
}
2830

2931
@computed('session.currentRouteName')
@@ -33,6 +35,28 @@ export default class NavBar extends Component {
3335
}
3436
return !(String(this.session.currentRouteName).includes('explore'));
3537
}
38+
@computed('session.currentRouteName')
39+
get isNotPublicPageRoute() {
40+
if (this.isGroupRoute) {
41+
return true;
42+
}
43+
return !(String(this.session.currentRouteName).includes('public'));
44+
}
45+
@computed('session.currentRouteName')
46+
get isNotOrderPageRoute() {
47+
if (this.isGroupRoute) {
48+
return true;
49+
}
50+
return !(String(this.session.currentRouteName).includes('order'));
51+
}
52+
53+
@computed('session.currentRouteName')
54+
get isNotEventDetailPageRoute() {
55+
if (this.isGroupRoute || this.routing.currentRouteName === 'events.list') {
56+
return true;
57+
}
58+
return !(String(this.session.currentRouteName).includes('events.view'));
59+
}
3660

3761
@action
3862
handleKeyPress() {
@@ -68,6 +92,12 @@ export default class NavBar extends Component {
6892
});
6993
}
7094

95+
@action
96+
handleClick() {
97+
this.router.replaceWith('public.index', this.globalData.idEvent);
98+
}
99+
100+
71101
@action
72102
logout() {
73103
this.authManager.logout();

‎app/routes/events/view/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import Route from '@ember/routing/route';
22
import { allSettled } from 'rsvp';
33
import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
4+
import { inject as service } from '@ember/service';
45

56
export default class extends Route.extend(EmberTableRouteMixin) {
6-
7+
@service globalData;
78
async model(params) {
89
const eventDetails = this.modelFor('events.view');
910
const searchField = 'name';
@@ -36,7 +37,8 @@ export default class extends Route.extend(EmberTableRouteMixin) {
3637
const [sponsors, roleInvites, sessionTypes, tracks, microlocations, speakersCall, socialLinks,
3738
statistics, orderStat, tickets, usersEventsRoles] = (await allSettled([sponsorsPromise, roleInvitesPromise, sessionTypesPromise, tracksPromise, microlocationsPromise, speakersCallPromise, socialLinksPromise,
3839
statisticsPromise, orderStatPromise, ticketsPromise, usersEventsRolesPromise])).map(result => result.value);
39-
40+
this.globalData.setLogoUrl(roleInvites.recordData.__data.logoUrl);
41+
this.globalData.saveIdEvent(roleInvites.recordData.__data.identifier);
4042

4143
return {
4244
event: eventDetails,

‎app/routes/orders/new.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import classic from 'ember-classic-decorator';
22
import Route from '@ember/routing/route';
33
import { hash } from 'rsvp';
4+
import { inject as service } from '@ember/service';
45

56
@classic
67
export default class NewRoute extends Route {
8+
@service globalData;
79
titleToken(model) {
810
const order = model.order.get('identifier');
911
return this.l10n.t('New Order') + ' - ' + order;
@@ -30,7 +32,8 @@ export default class NewRoute extends Route {
3032
});
3133

3234
const eventDetails = await order.query('event', { include: 'tax' });
33-
35+
this.globalData.saveIdEvent(eventDetails.data.identifier);
36+
this.globalData.setLogoUrl(eventDetails.data.logoUrl);
3437
return hash({
3538
order,
3639
event : eventDetails,

‎app/routes/orders/pending.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import classic from 'ember-classic-decorator';
22
import Route from '@ember/routing/route';
3-
3+
import { inject as service } from '@ember/service';
44
@classic
55
export default class PendingRoute extends Route {
6+
@service globalData;
67
titleToken(model) {
78
const order = model.order.get('identifier');
89
return this.l10n.t('Pending Order') + ' - ' + order;
@@ -21,6 +22,8 @@ export default class PendingRoute extends Route {
2122
reload : true
2223
});
2324
const eventDetails = await order.query('event', { include: 'tax' });
25+
this.globalData.saveIdEvent(eventDetails.data.identifier);
26+
this.globalData.setLogoUrl(eventDetails.data.logoUrl);
2427
const tickets = await order.query('tickets', {});
2528

2629
await tickets.forEach(ticket => {

‎app/routes/orders/view.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import classic from 'ember-classic-decorator';
22
import Route from '@ember/routing/route';
33
import { hash } from 'rsvp';
4-
4+
import { inject as service } from '@ember/service';
55

66
@classic
77
export default class ViewRoute extends Route {
8+
@service globalData;
9+
810
titleToken(model) {
911
const order = model.order.get('identifier');
1012
if (model.order.status === 'completed') {
@@ -27,6 +29,8 @@ export default class ViewRoute extends Route {
2729
reload : true
2830
});
2931
const eventDetails = await order.query('event', { include: 'tax' });
32+
this.globalData.saveIdEvent(eventDetails.data.identifier);
33+
this.globalData.setLogoUrl(eventDetails.data.logoUrl);
3034
const tickets = await order.query('tickets', {});
3135
await tickets.forEach(ticket => {
3236
ticket.query('attendees', {

‎app/routes/public.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { inject as service } from '@ember/service';
44

55
@classic
66
export default class PublicRoute extends Route {
7+
8+
@service globalData;
79
@service event;
810

911
titleToken(model) {
@@ -17,7 +19,10 @@ export default class PublicRoute extends Route {
1719
}
1820

1921
afterModel(model) {
22+
this.globalData.setLogoUrl(model.logoUrl);
23+
this.globalData.saveIdEvent(model.id);
2024
this.event.currentEvent = model;
25+
2126
}
2227

2328
resetController(controller, isExiting) {

‎app/services/global-data.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// app/services/global-data.js
2+
3+
import Service from '@ember/service';
4+
import { tracked } from '@glimmer/tracking';
5+
6+
export default class GlobalDataService extends Service {
7+
@tracked logoUrl = null;
8+
@tracked idEvent = null
9+
10+
setLogoUrl(url) {
11+
this.logoUrl = url;
12+
}
13+
14+
saveIdEvent(idEvent) {
15+
this.idEvent = idEvent;
16+
}
17+
}

‎app/styles/pages/public-event.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,18 @@
227227
padding: 0 0 2rem 2rem !important;
228228
}
229229

230+
.logo-event {
231+
margin: 10px !important;
232+
width: 56px !important;
233+
height: auto;
234+
}
235+
236+
.btn-un-bd {
237+
border: unset;
238+
padding: unset !important;
239+
height: 46px !important;
240+
}
241+
230242
.public-social-links {
231243
margin-top: 1.5rem !important;
232244
}

‎app/templates/components/nav-bar.hbs‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,48 @@
6767
</div>
6868
</div>
6969
</div>
70+
7071
<div class="mobile only row">
7172
<div class="ui navbar tiny menu">
7273
<a href="#" class="menu item open sidebar">
7374
<i class="large content icon"></i>
7475
</a>
75-
<LinkTo
76-
@route="index" class="item" @activeClass="">
77-
<div class="ui header small text">{{this.settings.appName}}</div>
78-
</LinkTo>
76+
{{#if this.session.isAuthenticated}}
77+
{{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute this.isNotEventDetailPageRoute)}}
78+
<LinkTo
79+
@route="index" class="item" @activeClass="">
80+
<div class="ui header small text">{{this.settings.appName}}</div>
81+
</LinkTo>
82+
{{else }}
83+
{{#if this.globalData.logoUrl}}
84+
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
85+
<img src="{{this.globalData.logoUrl}}" class="logo-event mr-8"/>
86+
</button>
87+
{{else}}
88+
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
89+
<div class="ui header small text">Home</div>
90+
</button>
91+
{{/if}}
92+
{{/if}}
93+
{{else}}
94+
{{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute this.isNotEventDetailPageRoute)}}
95+
<LinkTo
96+
@route="index" class="item" @activeClass="">
97+
<div class="ui header small text">{{this.settings.appName}}</div>
98+
</LinkTo>
99+
{{else}}
100+
{{#if this.globalData.logoUrl}}
101+
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
102+
<img src="{{this.globalData.logoUrl}}" class="logo-event mr-8"/>
103+
</button>
104+
{{else}}
105+
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
106+
<div class="ui header small text">Home</div>
107+
</button>
108+
{{/if}}
109+
{{/if}}
110+
{{/if}}
111+
79112
<div id="mobile-bar" class="search-bar search-bar-mobile d-flex items-center space-between m-1 p-2">
80113
<Input @class="prompt" id="mobileSearchBar" @type="text" @key-up={{action "handleKeyPress"}} @value={{this.event_name}} placeholder={{t "Search"}} />
81114
<i role="button" class="search icon" style="cursor: auto;" {{on "click" this.searchOnClick}}></i>
@@ -91,13 +124,18 @@
91124
</div>
92125
{{/if}}
93126
{{#if this.session.isAuthenticated}}
94-
{{#if this.isNotWizardPageRoute}}
127+
{{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute this.isNotEventDetailPageRoute)}}
95128
<LinkTo
96129
@route="create" class="item ui blue button-text small text">
97130
<div>
98131
{{t 'Create Event'}}
99132
</div>
100133
</LinkTo>
134+
{{else}}
135+
<LinkTo
136+
@route="index" class="item" @activeClass="">
137+
<div class="ui header small text">{{this.settings.appName}}</div>
138+
</LinkTo>
101139
{{/if}}
102140
{{else}}
103141
<a href="{{href-to 'login'}}" class="item">{{t 'Login'}}</a>

0 commit comments

Comments
 (0)