Skip to content

Commit 249a49a

Browse files
ntthitrinhlcduong
ntthitrinh
and
lcduong
authored
feature 9069:Improve mobile top menu and add calendar icon (#9104)
* feature-9069: Improve mobile top menu and add calendar icon * change condition to show side/nav menu for mobile view, add function to check event has speakers, schedule, exhibitors * feature-9069: Improve mobile top menu and add calendar icon * reload condition for top menu each time change route * feature-9069: Improve mobile top menu and add calendar icon * feature-9069: Improve mobile top menu and add calendar icon * feature-9069: revert file conflict side bar * feature-9069: Improve mobile top menu and add calendar icon * feature-9069: Improve mobile top menu and add calendar icon * feature-9069: Improve mobile top menu and add calendar icon * feature-9069: Improve mobile top menu and add calendar icon * feature-9069: Improve mobile top menu and add calendar icon --------- Co-authored-by: Duong Luu <lcduong@tma.com.vn>
1 parent 06cc52c commit 249a49a

File tree

12 files changed

+161
-21
lines changed

12 files changed

+161
-21
lines changed

‎app/components/nav-bar.js‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,37 @@ import classic from 'ember-classic-decorator';
22
import { action, computed } from '@ember/object';
33
import Component from '@ember/component';
44
import { inject as service } from '@ember/service';
5-
5+
import { tracked } from '@glimmer/tracking';
66

77
@classic
88
export default class NavBar extends Component {
9+
@service router;
910
@service globalData;
11+
@service('event') eventService;
12+
13+
loaded = false
14+
15+
@tracked
16+
showSpeakers = null;
17+
18+
@tracked
19+
showExhibitors = null;
20+
21+
@tracked
22+
showSessions = null;
23+
24+
didUpdateAttrs() {
25+
26+
if (!this.loaded && this.get('needShowEventMenu')) {
27+
this.loaded = true;
28+
this.checkSpeakers();
29+
this.checkSessions();
30+
this.checkExhibitors();
31+
} else if (!this.get('needShowEventMenu')) {
32+
this.loaded = false;
33+
}
34+
}
35+
1036
@computed('session.currentRouteName')
1137
get isGroupRoute() {
1238
return (String(this.session.currentRouteName).includes('group'));
@@ -99,10 +125,37 @@ export default class NavBar extends Component {
99125
this.router.replaceWith('public.index', this.globalData.idEvent);
100126
}
101127

128+
@action
129+
redirectToPage(event) {
130+
const optionValue = event;
131+
if (optionValue === 'speakers') {
132+
this.router.replaceWith('public.speakers', this.globalData.idEvent);
133+
} else if (optionValue === 'exhibition') {
134+
this.router.replaceWith('public.exhibition', this.globalData.idEvent);
135+
} else if (optionValue === 'schedule') {
136+
this.router.replaceWith('public.sessions.index', this.globalData.idEvent);
137+
} else {
138+
this.router.replaceWith('public.index', this.globalData.idEvent);
139+
}
140+
}
141+
142+
async checkSpeakers() {
143+
this.showSpeakers = await this.eventService.hasSpeakers(this.globalData.idEvent);
144+
}
145+
146+
async checkExhibitors() {
147+
this.showExhibitors = await this.eventService.hasExhibitors(this.globalData.idEvent);
148+
}
149+
150+
async checkSessions() {
151+
this.showSessions = await this.eventService.hasSessions(this.globalData.idEvent);
152+
}
153+
102154

103155
@action
104156
logout() {
105157
this.authManager.logout();
106158
this.routing.transitionTo('index');
107159
}
160+
108161
}

‎app/components/public/side-menu.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@ export default class SideMenu extends Component {
7474

7575
@action
7676
scrollToTarget(section) {
77+
if (!section) {return}
78+
const el = document.querySelector(`#${section}`);
79+
if (!el) {return}
7780
this.hideSidebar();
7881
const target = document.querySelector(`#${section}`);
7982
if (target) {

‎app/components/side-bar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import classic from 'ember-classic-decorator';
22
import $ from 'jquery';
33
import Component from '@ember/component';
4-
import { action, computed } from '@ember/object';
4+
import { action, computed} from '@ember/object';
55
import { inject as service } from '@ember/service';
66
import { tracked } from '@glimmer/tracking';
77
@classic

‎app/controllers/application.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,11 @@ export default class ApplicationController extends Controller {
6767
location.replace(`/e/${this.settings.startPgEventId}`);
6868
}
6969
}
70+
71+
@computed('session.currentRouteName')
72+
get needShowEventMenu() {
73+
const currentRouteName = String(this.session.currentRouteName);
74+
const result = currentRouteName.includes('public') && !currentRouteName.includes('group');
75+
return result;
76+
}
7077
}

‎app/routes/public.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,5 @@ export default class PublicRoute extends Route {
3030
controller.set('side_panel', null);
3131
}
3232
}
33+
3334
}

‎app/services/event.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,34 @@ export default class EventService extends Service {
4343
return (await this.getSpeakersMeta(eventId)).data.length;
4444
}
4545

46+
async hasExhibitors(eventId: string): Promise<number> {
47+
const exhibitorFilter = [{
48+
name : 'status',
49+
op : 'eq',
50+
val : 'accepted'
51+
}];
52+
return (await this.loader.load(`/events/${eventId}/exhibitors?page[size]=1&filter=${JSON.stringify(exhibitorFilter)}`)).data.length;
53+
}
54+
55+
async hasSessions(eventId: string): Promise<number> {
56+
57+
const filters = [{
58+
or: [
59+
{
60+
name : 'state',
61+
op : 'eq',
62+
val : 'confirmed'
63+
},
64+
{
65+
name : 'state',
66+
op : 'eq',
67+
val : 'accepted'
68+
}
69+
]
70+
}];
71+
return (await this.loader.load(`/events/${eventId}/sessions?cache=true&public=true&fields[session]=id&page[size]=1&filter=${JSON.stringify(filters)}`)).data.length;
72+
}
73+
4674
setCurrentEvent(evt:any) {
4775
this.currentEvent = evt;
4876
}

‎app/styles/pages/public.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,15 @@
3636
padding-left: unset !important;
3737

3838
a {
39-
padding-left: 12px !important;
4039
padding-right: 12px !important;
40+
padding-bottom: 12px !important;
41+
padding-top: 12px !important;
4142
width: 100%;
4243
margin-right: unset !important;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
color: #000;
4348
}
4449
}
4550

‎app/styles/partials/nav-bar.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,36 @@
3232
min-width: 200px;
3333
}
3434
}
35+
36+
.menu-item-public {
37+
padding-left: unset !important;
38+
padding-right: unset !important;
39+
font-size: 12px;
40+
}
41+
42+
.item-exhibition {
43+
&::before {
44+
width: unset !important;
45+
}
46+
}
47+
48+
.rm-pd-l {
49+
width: 100% !important;
50+
}
51+
52+
.item-public {
53+
font-size: .85714286rem !important;
54+
}
55+
56+
.item-menu-right {
57+
display: flex !important;
58+
border-left: 1px solid rgba(34, 36, 38, .15) !important;
59+
padding-left: 3px !important;
60+
padding-right: 3px !important;
61+
font-size: 11px !important;
62+
}
63+
64+
.item-padding {
65+
padding-left: 8px !important;
66+
padding-right: 8px !important;
67+
}

‎app/templates/application.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
{{/if}}
1010
</div>
1111
{{/if}}
12-
<SideBar @search={{action 'search'}} @event_name={{this.event_name}}>
12+
<SideBar @search={{action 'search'}} @event_name={{this.event_name}} @needShowEventMenu={{this.needShowEventMenu}}>
1313
<div class="footer-pusher">
14-
<NavBar @search={{action 'search'}} @event_name={{this.event_name}}/>
14+
<NavBar @search={{action 'search'}} @event_name={{this.event_name}} @needShowEventMenu={{this.needShowEventMenu}}/>
1515

1616
{{#if (eq this.routing.currentRouteName 'index')}}
1717
<WelcomeHeader @class={{'mb-4'}}/>

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
</div>
7070

7171
<div class="mobile only row">
72-
<div class="ui navbar tiny menu">
72+
<div class="ui navbar {{if (and this.showSessions this.showSpeakers this.showExhibitors (not isNotPublicPageRoute)) 'six item item-public' 'tiny'}} menu">
7373
<a href="#" class="menu item open sidebar">
7474
<i class="large content icon"></i>
7575
</a>
@@ -86,7 +86,7 @@
8686
</button>
8787
{{else}}
8888
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
89-
<div class="ui header small text">Home</div>
89+
<div class="ui header small text item-padding">Home</div>
9090
</button>
9191
{{/if}}
9292
{{/if}}
@@ -103,21 +103,31 @@
103103
</button>
104104
{{else}}
105105
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
106-
<div class="ui header small text">Home</div>
106+
<div class="ui header small text item-padding">Home</div>
107107
</button>
108108
{{/if}}
109109
{{/if}}
110110
{{/if}}
111-
111+
{{#if (not this.isNotPublicPageRoute)}}
112+
{{#if this.showSessions}}
113+
<div role="button" class="item menu-item-public{{if (not (and showSessions showSpeakers showExhibitors)) 'item-padding' ''}} " {{on "click" (fn this.redirectToPage 'schedule')}}>Schedule</div>
114+
{{/if}}
115+
{{#if this.showSpeakers}}
116+
<div role="button" class="item menu-item-public {{if (not (and showSessions showSpeakers showExhibitors)) 'item-padding' ''}} " {{on "click" (fn this.redirectToPage 'speakers')}}>Speakers</div>
117+
{{/if}}
118+
{{#if this.showExhibitors}}
119+
<div role="button" class="item menu-item-public item-exhibition" {{on "click" (fn this.redirectToPage 'exhibition')}}>Exhibition</div>
120+
{{/if}}
121+
{{/if}}
112122
<div id="mobile-bar" class="search-bar search-bar-mobile d-flex items-center space-between m-1 p-2">
113123
<Input @class="prompt" id="mobileSearchBar" @type="text" @key-up={{action "handleKeyPress"}} @value={{this.event_name}} placeholder={{t "Search"}} />
114124
<i role="button" class="search icon" style="cursor: auto;" {{on "click" this.searchOnClick}}></i>
115125
</div>
116-
<div class="right menu nav-bar">
117-
{{#if this.session.isAuthenticated}}
126+
<div class="{{if (and showSessions showSpeakers showExhibitors (not isNotPublicPageRoute)) 'item-menu-right' 'right menu nav-bar' }}">
127+
{{!-- {{#if this.session.isAuthenticated}} --}}
118128
{{!-- <NotificationDropdown
119129
@notifications={{this.notifications}} /> --}}
120-
{{/if}}
130+
{{!-- {{/if}} --}}
121131
{{#if (and this.isNotEventPageRoute this.isNotExplorePageRoute this.isNotWizardPageRoute)}}
122132
<div role="button" class="item ui" {{action "toggleMobileSearchBar"}} >
123133
<i class="search icon"></i>
@@ -133,12 +143,12 @@
133143
</LinkTo>
134144
{{else}}
135145
<LinkTo
136-
@route="index" class="item" @activeClass="">
137-
<div class="ui header small text">{{this.settings.appName}}</div>
146+
@route="index" class="item {{if (and showSessions showSpeakers showExhibitors (not isNotPublicPageRoute)) 'rm-pd-l' ''}}" @activeClass="">
147+
<div class="ui header small text " >{{this.settings.appName}}</div>
138148
</LinkTo>
139149
{{/if}}
140150
{{else}}
141-
<a href="{{href-to 'login'}}" class="item">{{t 'Login'}}</a>
151+
<a href="{{href-to 'login'}}" class="item {{if (and showSessions showSpeakers showExhibitors (not isNotPublicPageRoute)) 'rm-pd-l' ''}}">{{t 'Login'}}</a>
142152
{{/if}}
143153
</div>
144154
</div>

0 commit comments

Comments
 (0)