|
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