feature-9020: Filter options for orders and attendees not working (#9150

) * feature-9020: Filter options for orders and attendees not working * feature-9020: Filter options for orders and attendees not working * feature-9020: Filter options for orders and attendees not working * feature-9020: Filter options for orders and attendees not working * feature-9020: Fix UI filter date * feature-9020: Fix UI filter date * feature-9020: Fix UI filter date at the order * feature-9020: Filter options for orders and attendees not working --------- Co-authored-by: odkhang <odkhang@tma.com.vn> Co-authored-by: Khang On - TMA <135116292+khangon@users.noreply.github.com>
fossasia · Aug 24, 2023 · 46741b8 · 46741b8
1 parent 3447f60
commit 46741b8
Show file tree

Hide file tree

Showing 10 changed files with 390 additions and 25 deletions.
diff --git a/app/controllers/events/view/tickets/attendees.js b/app/controllers/events/view/tickets/attendees.js
@@ -2,12 +2,19 @@ import classic from 'ember-classic-decorator';
 import { action } from '@ember/object';
 import Controller from '@ember/controller';
 import { run } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
 @classic
 export default class AttendeesController extends Controller {
  isLoadingcsv = false;
  isLoadingpdf = false;
 
+ @tracked
+ start_date = this.router.currentRoute.queryParams?.start_date;
+
+ @tracked
+ end_date = this.router.currentRoute.queryParams?.end_date;
+
  @action
  export(mode) {
  this.set(`isLoading${mode}`, true);
@@ -23,6 +30,61 @@ export default class AttendeesController extends Controller {
  });
  }
 
+ @action
+ attendeeFilter(name) {
+ if (name === 'date') {
+ if (!this.start_date || !this.end_date) {
+ this.router.transitionTo('events.view.tickets.attendees.list', {
+ queryParams: {
+ filter: name
+ }
+ });
+ return;
+ }
+ this.router.transitionTo('events.view.tickets.attendees.list', {
+ queryParams: {
+ start_date : this.start_date,
+ end_date : this.end_date,
+ filter : name
+ }
+ });
+ } else {
+ this.router.transitionTo('events.view.tickets.attendees.list', {
+ queryParams: {
+ filter: name
+ }
+ });
+ }
+ }
+
+ @action
+ onChangeStartDate() {
+ if (!this.end_date) {
+ return;
+ }
+ this.router.transitionTo('events.view.tickets.attendees.list', {
+ queryParams: {
+ start_date : this.start_date,
+ end_date : this.end_date,
+ filter : 'date'
+ }
+ });
+ }
+
+ @action
+ onChangeEndDate() {
+ if (!this.start_date) {
+ return;
+ }
+ this.router.transitionTo('events.view.tickets.attendees.list', {
+ queryParams: {
+ start_date : this.start_date,
+ end_date : this.end_date,
+ filter : 'date'
+ }
+ });
+ }
+
  requestLoop(exportJobInfo, mode) {
  run.later(() => {
  this.loader

diff --git a/app/controllers/events/view/tickets/orders.js b/app/controllers/events/view/tickets/orders.js
@@ -2,12 +2,19 @@ import classic from 'ember-classic-decorator';
 import { action } from '@ember/object';
 import Controller from '@ember/controller';
 import { run } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
 @classic
 export default class OrdersController extends Controller {
  isLoadingcsv = false;
  isLoadingpdf = false;
 
+ @tracked
+ start_date = this.router.currentRoute.queryParams?.start_date;
+
+ @tracked
+ end_date = this.router.currentRoute.queryParams?.end_date;
+
  @action
  export(mode) {
  this.set(`isLoading${mode}`, true);
@@ -23,6 +30,61 @@ export default class OrdersController extends Controller {
  });
  }
 
+ @action
+ orderFilter(name) {
+ if (name === 'date') {
+ if (!this.start_date || !this.end_date) {
+ this.router.transitionTo('events.view.tickets.orders.list', {
+ queryParams: {
+ filter: name
+ }
+ });
+ return;
+ }
+ this.router.transitionTo('events.view.tickets.orders.list', {
+ queryParams: {
+ start_date : this.start_date,
+ end_date : this.end_date,
+ filter : name
+ }
+ });
+ } else {
+ this.router.transitionTo('events.view.tickets.orders.list', {
+ queryParams: {
+ filter: name
+ }
+ });
+ }
+ }
+
+ @action
+ onChangeStartDate() {
+ if (!this.end_date) {
+ return;
+ }
+ this.router.transitionTo('events.view.tickets.orders.list', {
+ queryParams: {
+ start_date : this.start_date,
+ end_date : this.end_date,
+ filter : 'date'
+ }
+ });
+ }
+
+ @action
+ onChangeEndDate() {
+ if (!this.start_date) {
+ return;
+ }
+ this.router.transitionTo('events.view.tickets.orders.list', {
+ queryParams: {
+ start_date : this.start_date,
+ end_date : this.end_date,
+ filter : 'date'
+ }
+ });
+ }
+
  requestLoop(exportJobInfo, mode) {
  run.later(() => {
  this.loader

diff --git a/app/mixins/ember-table-route.js b/app/mixins/ember-table-route.js
@@ -12,6 +12,15 @@ export default Mixin.create({
  search: {
  refreshModel: true
  },
+ filter: {
+ refreshModel: true
+ },
+ start_date: {
+ refreshModel: true
+ },
+ end_date: {
+ refreshModel: true
+ },
  sort_dir: {
  refreshModel: true
  },

diff --git a/app/routes/events/view/tickets/attendees/list.js b/app/routes/events/view/tickets/attendees/list.js
@@ -1,5 +1,6 @@
 import Route from '@ember/routing/route';
 import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
+import moment from 'moment-timezone';
 
 export default class extends Route.extend(EmberTableRouteMixin) {
  titleToken() {
@@ -23,6 +24,7 @@ export default class extends Route.extend(EmberTableRouteMixin) {
 
  async model(params) {
  this.set('params', params);
+ const eventDetails = this.modelFor('events.view');
  let filterOptions = [];
  if (params.attendees_status === 'checkedIn') {
  filterOptions = [
@@ -40,20 +42,52 @@ export default class extends Route.extend(EmberTableRouteMixin) {
  val : false
  }
  ];
- } else if (params.attendees_status === 'all') {
- filterOptions = [];
  } else {
- filterOptions = [
- {
+ if (params.attendees_status !== 'all') {
+ filterOptions = [
+ {
+ name : 'order',
+ op : 'has',
+ val : {
+ name : 'status',
+ op : 'eq',
+ val : params.attendees_status
+ }
+ }
+ ];
+ }
+ }
+ if (params.filter) {
+ if (params.filter === 'discount') {
+ filterOptions.pushObject({
  name : 'order',
  op : 'has',
  val : {
- name : 'status',
- op : 'eq',
- val : params.attendees_status
+ name : 'discount_code_id',
+ op : 'isnot',
+ val : null
  }
- }
- ];
+ });
+ } else if (params.filter === 'date' && params.start_date && params.end_date) {
+ filterOptions.pushObject({
+ name : 'order',
+ op : 'has',
+ val : {
+ name : 'created-at',
+ op : 'ge',
+ val : moment.tz(params.start_date, eventDetails.timezone).toISOString()
+ }
+ });
+ filterOptions.pushObject({
+ name : 'order',
+ op : 'has',
+ val : {
+ name : 'created-at',
+ op : 'le',
+ val : moment.tz(params.end_date, eventDetails.timezone).add(1, 'days').toISOString()
+ }
+ });
+ }
  }
  filterOptions = this.applySearchFiltersExtend(
  filterOptions,
@@ -78,6 +112,6 @@ export default class extends Route.extend(EmberTableRouteMixin) {
 
  queryString = this.applySortFilters(queryString, params);
 
- return  this.asArray(this.modelFor('events.view').query('attendees', queryString));
+ return this.asArray(eventDetails.query('attendees', queryString));
  }
 }
diff --git a/app/routes/events/view/tickets/orders/list.js b/app/routes/events/view/tickets/orders/list.js
@@ -1,5 +1,6 @@
 import Route from '@ember/routing/route';
 import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
+import moment from 'moment-timezone';
 
 export default class extends Route.extend(EmberTableRouteMixin) {
  titleToken() {
@@ -18,8 +19,33 @@ export default class extends Route.extend(EmberTableRouteMixin) {
  }
 
  async model(params) {
+ const eventDetails = this.modelFor('events.view');
  this.set('params', params);
  const filterOptions = [];
+ if (params.filter) {
+ if (params.filter === 'discount') {
+ filterOptions.pushObject({
+ name : 'discount_code_id',
+ op : 'isnot',
+ val : null
+ });
+ } else if (params.filter === 'date' && params.start_date && params.end_date) {
+ filterOptions.push({
+ and: [
+ {
+ name : 'created-at',
+ op : 'ge',
+ val : moment.tz(params.start_date, eventDetails.timezone).toISOString()
+ },
+ {
+ name : 'created-at',
+ op : 'le',
+ val : moment.tz(params.end_date, eventDetails.timezone).add(1, 'days').toISOString()
+ }
+ ]
+ });
+ }
+ }
  if (params.search) {
  filterOptions.pushObject({
  name : 'user',
@@ -48,6 +74,6 @@ export default class extends Route.extend(EmberTableRouteMixin) {
 
  queryString = this.applySortFilters(queryString, params);
 
- return this.asArray(this.modelFor('events.view').query('orders', queryString));
+ return this.asArray(eventDetails.query('orders', queryString));
  }
 }
diff --git a/app/styles/components/ticket-list.scss b/app/styles/components/ticket-list.scss
@@ -10,3 +10,15 @@
  vertical-align: baseline !important;
  }
 }
+
+.filter-date-mobile-session {
+ .end-date-session {
+ .ui.popup.calendar {
+ inset: 43px !important;
+
+ table {
+ transform: translateX(-62%);
+ }
+ }
+ }
+}
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
@@ -258,6 +258,10 @@
  vertical-align: bottom;
 }
 
+.b-0 {
+ border: 0 !important;
+}
+
 .add-to-calender-join-video {
  height: 36px;
 }

diff --git a/app/templates/components/widgets/forms/date-picker.hbs b/app/templates/components/widgets/forms/date-picker.hbs
@@ -2,4 +2,4 @@
 {{#if this.icon}}
  <i class="calendar icon"></i>
 {{/if}}
-<Input @type="text" @value={{value}} placeholder={{this.placeholder}} @name={{name}} @focus-out={{action "onChange"}} />
+<Input @type="text" @value={{value}} autocomplete="off" placeholder={{this.placeholder}} @name={{name}} @focus-out={{action "onChange"}} />