|
1 | | -/* global Vue, CV, app, countlyEvent, countlyGlobal, countlyAuth, VueJsonPretty, ElementTiptapPlugin, countlyCommon CountlyHelpers*/ |
| 1 | +/* global Vue, CV, $, app, countlyEvent, countlyGlobal, countlyAuth, VueJsonPretty, ElementTiptapPlugin, countlyCommon CountlyHelpers*/ |
2 | 2 |
|
3 | 3 | (function(countlyVue) { |
4 | 4 |
|
|
580 | 580 |
|
581 | 581 | Vue.component("cly-event-select", countlyBaseComponent.extend({ |
582 | 582 | mixins: [countlyVue.mixins.i18n], |
583 | | - template: '<cly-select-x\ |
584 | | - :test-id="testId"\ |
585 | | - pop-class="cly-event-select"\ |
586 | | - all-placeholder="All Events"\ |
587 | | - search-placeholder="Search in Events"\ |
588 | | - placeholder="Select Event"\ |
589 | | - :disabled="disabled"\ |
590 | | - :hide-default-tabs="true"\ |
591 | | - :options="availableEvents"\ |
592 | | - :hide-all-options-tab="true"\ |
593 | | - :single-option-settings="singleOptionSettings"\ |
594 | | - :adaptive-length="adaptiveLength"\ |
595 | | - :arrow="arrow"\ |
596 | | - :width="width"\ |
597 | | - v-bind="$attrs"\ |
598 | | - v-on="$listeners">\ |
599 | | - <template v-slot:header="selectScope">\ |
600 | | - <h4 class="color-cool-gray-100 bu-mb-2" v-if="hasTitle">{{title}}</h4>\ |
601 | | - <el-radio-group\ |
602 | | - :value="selectScope.activeTabId"\ |
603 | | - @input="selectScope.updateTab"\ |
604 | | - size="small">\ |
605 | | - <el-radio-button :test-id="testId + \'-tab-\' + idx" v-for="(tab,idx) in selectScope.tabs" :key="tab.name" :label="tab.name">{{tab.label}}</el-radio-button>\ |
606 | | - </el-radio-group>\ |
607 | | - </template>\ |
608 | | - </cly-select-x>', |
| 583 | + template: '<div class="cly-event-select">\ |
| 584 | + <cly-select-x\ |
| 585 | + :test-id="testId"\ |
| 586 | + pop-class="cly-event-select"\ |
| 587 | + all-placeholder="All Events"\ |
| 588 | + search-placeholder="Search in Events"\ |
| 589 | + placeholder="Select Event"\ |
| 590 | + :disabled="disabled"\ |
| 591 | + :hide-default-tabs="true"\ |
| 592 | + :options="availableEvents"\ |
| 593 | + :hide-all-options-tab="true"\ |
| 594 | + :single-option-settings="singleOptionSettings"\ |
| 595 | + :adaptive-length="adaptiveLength"\ |
| 596 | + :arrow="arrow"\ |
| 597 | + :width="width"\ |
| 598 | + v-bind="$attrs"\ |
| 599 | + v-if="!isLoading"\ |
| 600 | + v-on="$listeners">\ |
| 601 | + <template v-slot:header="selectScope">\ |
| 602 | + <h4 class="color-cool-gray-100 bu-mb-2" v-if="hasTitle">{{title}}</h4>\ |
| 603 | + <el-radio-group\ |
| 604 | + :value="selectScope.activeTabId"\ |
| 605 | + @input="selectScope.updateTab"\ |
| 606 | + size="small">\ |
| 607 | + <el-radio-button :test-id="testId + \'-tab-\' + idx" v-for="(tab,idx) in selectScope.tabs" :key="tab.name" :label="tab.name">{{tab.label}}</el-radio-button>\ |
| 608 | + </el-radio-group>\ |
| 609 | + </template>\ |
| 610 | + </cly-select-x>\ |
| 611 | + <div v-else class="cly-event-select__loading el-loading-spinner"><i class="el-icon-loading bu-mr-2"></i><p class="el-loading-text">Loading...</p></div>\ |
| 612 | + </div>', |
609 | 613 | props: { |
610 | 614 | blacklistedEvents: { |
611 | 615 | type: Array, |
|
626 | 630 | singleOptionSettings: { |
627 | 631 | autoPick: true, |
628 | 632 | hideList: true |
629 | | - } |
| 633 | + }, |
| 634 | + availableEvents: [], |
| 635 | + isLoading: false |
630 | 636 | }; |
631 | 637 | }, |
632 | 638 | computed: { |
633 | 639 | hasTitle: function() { |
634 | 640 | return !!this.title; |
635 | | - }, |
636 | | - availableEvents: function() { |
| 641 | + } |
| 642 | + }, |
| 643 | + methods: { |
| 644 | + prepareAvailableEvents: function() { |
637 | 645 | var self = this; |
638 | | - var availableEvents = [ |
| 646 | + var preparedEventList = [ |
639 | 647 | { |
640 | 648 | "label": this.i18n('sidebar.analytics.sessions'), |
641 | 649 | "name": "[CLY]_session", |
|
648 | 656 | } |
649 | 657 | ]; |
650 | 658 | if (countlyGlobal.plugins.indexOf('views') !== -1) { |
651 | | - availableEvents.push({ |
| 659 | + preparedEventList.push({ |
652 | 660 | "label": this.i18n('internal-events.[CLY]_view'), |
653 | 661 | "name": "[CLY]_view", |
654 | 662 | "options": [ { label: this.i18n('internal-events.[CLY]_view'), value: '[CLY]_view' } ] |
|
665 | 673 | feedbackOptions.push({ label: this.i18n('internal-events.[CLY]_survey'), value: '[CLY]_survey' }); |
666 | 674 | } |
667 | 675 | if (feedbackOptions.length > 0) { |
668 | | - availableEvents.push({ |
| 676 | + preparedEventList.push({ |
669 | 677 | "label": this.i18n("sidebar.feedback"), |
670 | 678 | "name": "feedback", |
671 | 679 | "options": feedbackOptions |
|
674 | 682 |
|
675 | 683 |
|
676 | 684 | if (countlyGlobal.plugins.indexOf('compliance-hub') !== -1) { |
677 | | - availableEvents.push({ |
| 685 | + preparedEventList.push({ |
678 | 686 | "label": this.i18n('internal-events.[CLY]_consent'), |
679 | 687 | "name": "[CLY]_consent", |
680 | 688 | "options": [ { label: this.i18n('internal-events.[CLY]_consent'), value: '[CLY]_consent' } ] |
681 | 689 | }); |
682 | 690 | } |
683 | 691 |
|
684 | 692 | if (countlyGlobal.plugins.indexOf('crashes') !== -1) { |
685 | | - availableEvents.push({ |
| 693 | + preparedEventList.push({ |
686 | 694 | "label": this.i18n('internal-events.[CLY]_crash'), |
687 | 695 | "name": "[CLY]_crash", |
688 | 696 | "options": [ { label: this.i18n('internal-events.[CLY]_crash'), value: '[CLY]_crash' } ] |
|
697 | 705 | { label: this.i18n('internal-events.[CLY]_push_sent'), value: '[CLY]_push_sent' } |
698 | 706 | ] |
699 | 707 | });*/ |
700 | | - availableEvents.push({ |
| 708 | + preparedEventList.push({ |
701 | 709 | "label": 'Push Actioned', |
702 | 710 | "name": "[CLY]_push_action", |
703 | 711 | "options": [ |
|
712 | 720 | // "noChild": true |
713 | 721 | // } |
714 | 722 |
|
715 | | - if (this.selectedApp) { |
716 | | - countlyEvent.getEventsForApps([this.selectedApp], function(eData) { |
717 | | - availableEvents[1].options = eData.map(function(e) { |
718 | | - return {label: countlyCommon.unescapeHtml(e.name), value: e.value}; |
| 723 | + return new Promise(function(resolve) { |
| 724 | + if (this.selectedApp) { |
| 725 | + self.isLoading = true; |
| 726 | + countlyEvent.getEventsForApps([this.selectedApp], function(eData) { |
| 727 | + preparedEventList[1].options = eData.map(function(e) { |
| 728 | + return {label: countlyCommon.unescapeHtml(e.name), value: e.value}; |
| 729 | + }); |
719 | 730 | }); |
720 | | - }); |
721 | | - } |
722 | | - else { |
723 | | - availableEvents[1].options = countlyEvent.getEvents().map(function(event) { |
724 | | - return {label: countlyCommon.unescapeHtml(event.name), value: event.key}; |
725 | | - }); |
726 | | - } |
727 | | - |
728 | | - availableEvents = availableEvents.filter(function(evt) { |
729 | | - return !(self.blacklistedEvents.includes(evt.name)); |
| 731 | + preparedEventList = preparedEventList.filter(function(evt) { |
| 732 | + return !(self.blacklistedEvents.includes(evt.name)); |
| 733 | + }); |
| 734 | + self.isLoading = false; |
| 735 | + resolve(preparedEventList); |
| 736 | + } |
| 737 | + else { |
| 738 | + self.isLoading = true; |
| 739 | + $.when(countlyEvent.refreshEvents()).then(function() { |
| 740 | + const events = countlyEvent.getEvents(); |
| 741 | + preparedEventList[1].options = events.map(function(event) { |
| 742 | + return {label: countlyCommon.unescapeHtml(event.name), value: event.key}; |
| 743 | + }); |
| 744 | + preparedEventList = preparedEventList.filter(function(evt) { |
| 745 | + return !(self.blacklistedEvents.includes(evt.name)); |
| 746 | + }); |
| 747 | + self.isLoading = false; |
| 748 | + resolve(preparedEventList); |
| 749 | + }); |
| 750 | + } |
730 | 751 | }); |
731 | | - |
732 | | - return availableEvents; |
733 | 752 | } |
734 | 753 | }, |
| 754 | + created: async function() { |
| 755 | + this.availableEvents = await this.prepareAvailableEvents(); |
| 756 | + } |
735 | 757 | })); |
736 | 758 |
|
737 | 759 | Vue.component("cly-paginate", countlyBaseComponent.extend({ |
|
0 commit comments