feature-8753: Enhance the top menu bar on mobile views (#9025)

ntthitrinh · khangon · web-flow · commit d7bdbf0430a0 · 2023-08-10T11:14:49.000+02:00
* 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 &lt;135116292+khangon@users.noreply.github.com&gt;
diff --git a/app/components/forms/orders/order-form.js b/app/components/forms/orders/order-form.js
@@ -623,5 +623,10 @@ export default Component.extend(FormMixin, {
     updateGendersSelection(checked, changed, selectedOptions, holder, field) {
       holder.set(field.fieldIdentifier, selectedOptions.map(select => select.value).join(','));
     }
+  },
+  willDestroyElement() {
+    clearInterval(this._getRemainingTimeId);
+    this._super(...arguments);
   }
+
 });
diff --git a/app/components/nav-bar.js b/app/components/nav-bar.js
@@ -1,9 +1,12 @@
 import classic from 'ember-classic-decorator';
 import { action, computed } from '@ember/object';
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+
 
 @classic
 export default class NavBar extends Component {
+  @service globalData;
   @computed('session.currentRouteName')
   get isGroupRoute() {
     return (String(this.session.currentRouteName).includes('group'));
@@ -22,8 +25,7 @@ export default class NavBar extends Component {
     if (this.isGroupRoute) {
       return true;
     }
-    return !(String(this.session.currentRouteName).includes('edit'))
-    && String(this.session.currentRouteName) !== 'create';
+    return !String(this.session.currentRouteName) !== 'create';
   }
 
   @computed('session.currentRouteName')
@@ -33,6 +35,28 @@ export default class NavBar extends Component {
     }
     return !(String(this.session.currentRouteName).includes('explore'));
   }
+  @computed('session.currentRouteName')
+  get isNotPublicPageRoute() {
+    if (this.isGroupRoute) {
+      return true;
+    }
+    return !(String(this.session.currentRouteName).includes('public'));
+  }
+  @computed('session.currentRouteName')
+  get isNotOrderPageRoute() {
+    if (this.isGroupRoute) {
+      return true;
+    }
+    return !(String(this.session.currentRouteName).includes('order'));
+  }
+
+  @computed('session.currentRouteName')
+  get isNotEventDetailPageRoute() {
+    if (this.isGroupRoute || this.routing.currentRouteName === 'events.list') {
+      return true;
+    }
+    return !(String(this.session.currentRouteName).includes('events.view'));
+  }
 
   @action
   handleKeyPress() {
@@ -68,6 +92,12 @@ export default class NavBar extends Component {
     });
   }
 
+  @action
+  handleClick() {
+    this.router.replaceWith('public.index',  this.globalData.idEvent);
+  }
+
+
   @action
   logout() {
     this.authManager.logout();
diff --git a/app/routes/events/view/index.js b/app/routes/events/view/index.js
@@ -1,9 +1,10 @@
 import Route from '@ember/routing/route';
 import { allSettled } from 'rsvp';
 import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
+import { inject as service } from '@ember/service';
 
 export default class extends Route.extend(EmberTableRouteMixin) {
-
+  @service globalData;
   async model(params) {
     const eventDetails = this.modelFor('events.view');
     const searchField = 'name';
@@ -36,7 +37,8 @@ export default class extends Route.extend(EmberTableRouteMixin) {
     const [sponsors, roleInvites, sessionTypes, tracks, microlocations, speakersCall, socialLinks,
       statistics, orderStat, tickets, usersEventsRoles] = (await allSettled([sponsorsPromise, roleInvitesPromise, sessionTypesPromise, tracksPromise, microlocationsPromise, speakersCallPromise, socialLinksPromise,
       statisticsPromise, orderStatPromise, ticketsPromise, usersEventsRolesPromise])).map(result => result.value);
-
+    this.globalData.setLogoUrl(roleInvites.recordData.__data.logoUrl);
+    this.globalData.saveIdEvent(roleInvites.recordData.__data.identifier);
 
     return {
       event: eventDetails,
diff --git a/app/routes/orders/new.js b/app/routes/orders/new.js
@@ -1,9 +1,11 @@
 import classic from 'ember-classic-decorator';
 import Route from '@ember/routing/route';
 import { hash } from 'rsvp';
+import { inject as service } from '@ember/service';
 
 @classic
 export default class NewRoute extends Route {
+  @service globalData;
   titleToken(model) {
     const order = model.order.get('identifier');
     return this.l10n.t('New Order') + ' - ' + order;
@@ -30,7 +32,8 @@ export default class NewRoute extends Route {
     });
 
     const eventDetails = await order.query('event', { include: 'tax' });
-
+    this.globalData.saveIdEvent(eventDetails.data.identifier);
+    this.globalData.setLogoUrl(eventDetails.data.logoUrl);
     return hash({
       order,
       event      : eventDetails,
diff --git a/app/routes/orders/pending.js b/app/routes/orders/pending.js
@@ -1,8 +1,9 @@
 import classic from 'ember-classic-decorator';
 import Route from '@ember/routing/route';
-
+import { inject as service } from '@ember/service';
 @classic
 export default class PendingRoute extends Route {
+  @service globalData;
   titleToken(model) {
     const order = model.order.get('identifier');
     return this.l10n.t('Pending Order')  + ' - ' + order;
@@ -21,6 +22,8 @@ export default class PendingRoute extends Route {
       reload  : true
     });
     const eventDetails = await order.query('event', { include: 'tax' });
+    this.globalData.saveIdEvent(eventDetails.data.identifier);
+    this.globalData.setLogoUrl(eventDetails.data.logoUrl);
     const tickets     = await order.query('tickets', {});
 
     await tickets.forEach(ticket => {
diff --git a/app/routes/orders/view.js b/app/routes/orders/view.js
@@ -1,10 +1,12 @@
 import classic from 'ember-classic-decorator';
 import Route from '@ember/routing/route';
 import { hash } from 'rsvp';
-
+import { inject as service } from '@ember/service';
 
 @classic
 export default class ViewRoute extends Route {
+  @service globalData;
+
   titleToken(model) {
     const order = model.order.get('identifier');
     if (model.order.status === 'completed') {
@@ -27,6 +29,8 @@ export default class ViewRoute extends Route {
       reload  : true
     });
     const eventDetails = await order.query('event', { include: 'tax' });
+    this.globalData.saveIdEvent(eventDetails.data.identifier);
+    this.globalData.setLogoUrl(eventDetails.data.logoUrl);
     const tickets = await order.query('tickets', {});
     await tickets.forEach(ticket => {
       ticket.query('attendees', {
diff --git a/app/routes/public.js b/app/routes/public.js
@@ -4,6 +4,8 @@ import { inject as service } from '@ember/service';
 
 @classic
 export default class PublicRoute extends Route {
+
+  @service globalData;
   @service event;
 
   titleToken(model) {
@@ -17,7 +19,10 @@ export default class PublicRoute extends Route {
   }
 
   afterModel(model) {
+    this.globalData.setLogoUrl(model.logoUrl);
+    this.globalData.saveIdEvent(model.id);
     this.event.currentEvent = model;
+
   }
 
   resetController(controller, isExiting) {
diff --git a/app/services/global-data.js b/app/services/global-data.js
@@ -0,0 +1,17 @@
+// app/services/global-data.js
+
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class GlobalDataService extends Service {
+  @tracked logoUrl = null;
+  @tracked idEvent = null
+
+  setLogoUrl(url) {
+    this.logoUrl = url;
+  }
+
+  saveIdEvent(idEvent) {
+    this.idEvent = idEvent;
+  }
+}
diff --git a/app/styles/pages/public-event.scss b/app/styles/pages/public-event.scss
@@ -227,6 +227,18 @@
   padding: 0 0 2rem 2rem !important;
 }
 
+.logo-event {
+  margin: 10px !important;
+  width: 56px !important;
+  height: auto;
+}
+
+.btn-un-bd {
+  border: unset;
+  padding: unset !important;
+  height: 46px !important;
+}
+
 .public-social-links {
   margin-top: 1.5rem !important;
 }
diff --git a/app/templates/components/nav-bar.hbs b/app/templates/components/nav-bar.hbs
@@ -67,15 +67,48 @@
     </div>
   </div>
 </div>
+
 <div class="mobile only row">
   <div class="ui navbar tiny menu">
     <a href="#" class="menu item open sidebar">
       <i class="large content icon"></i>
     </a>
-    <LinkTo
-      @route="index" class="item" @activeClass="">
-      <div class="ui header small text">{{this.settings.appName}}</div>
-    </LinkTo>
+    {{#if this.session.isAuthenticated}}
+        {{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute  this.isNotEventDetailPageRoute)}}
+         <LinkTo
+          @route="index" class="item" @activeClass="">
+          <div class="ui header small text">{{this.settings.appName}}</div>
+        </LinkTo>
+        {{else }}
+            {{#if this.globalData.logoUrl}}
+              <button class="item btn-un-bd" {{on "click" this.handleClick}}>
+                  <img src="{{this.globalData.logoUrl}}" class="logo-event mr-8"/>
+              </button>
+            {{else}}
+            <button class="item btn-un-bd" {{on "click" this.handleClick}}>
+              <div class="ui header small text">Home</div>
+            </button>
+            {{/if}}
+        {{/if}}
+    {{else}}
+        {{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute  this.isNotEventDetailPageRoute)}}
+          <LinkTo
+            @route="index" class="item" @activeClass="">
+            <div class="ui header small text">{{this.settings.appName}}</div>
+          </LinkTo>
+        {{else}}
+          {{#if this.globalData.logoUrl}}
+            <button class="item btn-un-bd" {{on "click" this.handleClick}}>
+                <img src="{{this.globalData.logoUrl}}" class="logo-event mr-8"/>
+            </button>
+          {{else}}
+          <button class="item btn-un-bd" {{on "click" this.handleClick}}>
+            <div class="ui header small text">Home</div>
+          </button>
+          {{/if}}
+        {{/if}}
+    {{/if}}
+
     <div id="mobile-bar" class="search-bar search-bar-mobile d-flex items-center space-between m-1 p-2">
       <Input @class="prompt" id="mobileSearchBar" @type="text" @key-up={{action "handleKeyPress"}} @value={{this.event_name}} placeholder={{t "Search"}} />
       <i role="button" class="search icon" style="cursor: auto;" {{on "click" this.searchOnClick}}></i>
@@ -91,13 +124,18 @@
         </div>
       {{/if}}
       {{#if this.session.isAuthenticated}}
-        {{#if this.isNotWizardPageRoute}}
+        {{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute  this.isNotEventDetailPageRoute)}}
           <LinkTo
             @route="create" class="item ui blue button-text small text">
             <div>
               {{t 'Create Event'}}
             </div>
           </LinkTo>
+        {{else}}
+          <LinkTo
+            @route="index" class="item" @activeClass="">
+            <div class="ui header small text">{{this.settings.appName}}</div>
+          </LinkTo>
         {{/if}}
       {{else}}
         <a href="{{href-to 'login'}}" class="item">{{t 'Login'}}</a>
diff --git a/app/templates/public.hbs b/app/templates/public.hbs
@@ -5,14 +5,8 @@
     <div class="content">
       <div class="ui container">
         <div class="ui info d-flex">
-          {{#if this.model.logoUrl}}
+          {{#if this.device.isMobile}}
           <div>
-            <LinkTo @route="public">
-              <img src="{{this.model.logoUrl}}" class="logo mr-8" />
-            </LinkTo>
-          </div>
-          {{/if}}
-          <div class="event-info">
             <h4 class="event time" style={{this.vietnameseFontFamily}}>{{general-date this.model.startsAt 'date-time-tz-long' tz=this.model.timezone}}</h4>
             {{#if this.displayEndDate}}
               <h5 class="event time ends" style={{this.vietnameseFontFamily}}>{{t 'To'}} {{general-date this.model.endsAt 'date-time-tz-long' tz=this.model.timezone}}</h5>
@@ -22,6 +16,25 @@
             </LinkTo>
             <h4 class="event location" style={{this.vietnameseFontFamily}}><i class="icon map marker alternate"></i>{{this.headerLocation}}</h4>
           </div>
+          {{else}}
+            {{#if this.model.logoUrl}}
+              <div>
+                <LinkTo @route="public">
+                  <img src="{{this.model.logoUrl}}" class="logo mr-8" />
+                </LinkTo>
+              </div>
+            {{/if}}
+            <div class="event-info">
+              <h4 class="event time" style={{this.vietnameseFontFamily}}>{{general-date this.model.startsAt 'date-time-tz-long' tz=this.model.timezone}}</h4>
+              {{#if this.displayEndDate}}
+                <h5 class="event time ends" style={{this.vietnameseFontFamily}}>{{t 'To'}} {{general-date this.model.endsAt 'date-time-tz-long' tz=this.model.timezone}}</h5>
+              {{/if}}
+              <LinkTo @route="public">
+                <h1 class="event name text-white">{{this.model.name}}</h1>
+              </LinkTo>
+              <h4 class="event location" style={{this.vietnameseFontFamily}}><i class="icon map marker alternate"></i>{{this.headerLocation}}</h4>
+            </div>
+          {{/if}}
         </div>
       </div>
     </div>

Original file line number	Diff line number	Diff line change
`@@ -623,5 +623,10 @@ export default Component.extend(FormMixin, {`
`623`	`623`	`updateGendersSelection(checked, changed, selectedOptions, holder, field) {`
`624`	`624`	`holder.set(field.fieldIdentifier, selectedOptions.map(select => select.value).join(','));`
`625`	`625`	`}`
	`626`	`+ },`
	`627`	`+ willDestroyElement() {`
	`628`	`+ clearInterval(this._getRemainingTimeId);`
	`629`	`+ this._super(...arguments);`
`626`	`630`	`}`
	`631`	`+`
`627`	`632`	`});`