Skip to content

Commit

Permalink
Merge pull request #4212 from crazyserver/MOBILE-4616
Browse files Browse the repository at this point in the history 
MOBILE-4616 feedback: Fix tab selection after submit form
  • Loading branch information
@alfonso-salces
alfonso-salces authored Oct 16, 2024
2 parents ce7243b + 95756b5 commit cd848c5
Show file tree
Hide file tree
Showing 9 changed files with 130 additions and 88 deletions.
17 changes: 5 additions & 12 deletions src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,13 @@
[courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />

<core-tabs [hideUntil]="tabsReady" [selectedIndex]="firstSelectedTab">
<core-tab [title]="'addon.mod_feedback.overview' | translate" id="overview" (ionSelect)="tabChanged('overview')">
<core-tab [title]="tabs.overview.label | translate" [id]="tabs.overview.name" (ionSelect)="tabChanged(tabs.overview.name)">
<ng-template>
<ng-container *ngTemplateOutlet="tabOverview" />
</ng-template>
</core-tab>
<core-tab *ngIf="showAnalysis && access && access.canviewreports" id="analysis" [title]="'addon.mod_feedback.analysis' | translate"
(ionSelect)="tabChanged('analysis')">
<ng-template>
<ng-container *ngTemplateOutlet="tabAnalysis" />
</ng-template>
</core-tab>

<core-tab *ngIf="showAnalysis && access && !access.canviewreports" id="analysis"
[title]="'addon.mod_feedback.completed_feedbacks' | translate" (ionSelect)="tabChanged('analysis')">
<core-tab *ngIf="showAnalysis && access" [id]="tabs.analysis.name" [title]="tabs.analysis.label | translate"
(ionSelect)="tabChanged(tabs.analysis.name)">
<ng-template>
<ng-container *ngTemplateOutlet="tabAnalysis" />
</ng-template>
Expand Down Expand Up @@ -101,7 +94,7 @@

<!-- Template to render the overview. -->
<ng-template #tabOverview>
<core-loading [hideUntil]="tabsLoaded.overview">
<core-loading [hideUntil]="tabs.overview.loaded">
<ng-container *ngTemplateOutlet="basicInfo" />

<ion-card class="core-info-card" *ngIf="access && access.cancomplete && !access.isopen">
Expand Down Expand Up @@ -153,7 +146,7 @@

<!-- Template to render the analysis. -->
<ng-template #tabAnalysis>
<core-loading [hideUntil]="tabsLoaded.analysis">
<core-loading [hideUntil]="tabs.analysis.loaded">
<ng-container *ngTemplateOutlet="basicInfo" />

<ng-container *ngIf="access && (access.canedititems || !access.isempty)">
Expand Down
90 changes: 53 additions & 37 deletions src/addons/mod/feedback/components/index/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,12 @@ import {
AddonModFeedbackSyncResult,
} from '../../services/feedback-sync';
import { AddonModFeedbackPrefetchHandler } from '../../services/handlers/prefetch';
import { ADDON_MOD_FEEDBACK_COMPONENT, ADDON_MOD_FEEDBACK_FORM_SUBMITTED, ADDON_MOD_FEEDBACK_PAGE_NAME } from '../../constants';
import {
ADDON_MOD_FEEDBACK_COMPONENT,
ADDON_MOD_FEEDBACK_FORM_SUBMITTED,
ADDON_MOD_FEEDBACK_PAGE_NAME,
AddonModFeedbackIndexTabName,
} from '../../constants';

/**
* Component that displays a feedback index page.
Expand All @@ -51,7 +56,7 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity

@ViewChild(CoreTabsComponent) tabsComponent?: CoreTabsComponent;

@Input() tab = 'overview';
@Input() selectedTab: AddonModFeedbackIndexTabName = AddonModFeedbackIndexTabName.OVERVIEW;
@Input() group = 0;

component = ADDON_MOD_FEEDBACK_COMPONENT;
Expand All @@ -75,9 +80,9 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
closeTimeReadable: '',
};

tabsLoaded = {
overview: false,
analysis: false,
tabs = {
overview: { name: AddonModFeedbackIndexTabName.OVERVIEW, label: 'addon.mod_feedback.overview', loaded: false },
analysis: { name: AddonModFeedbackIndexTabName.ANALYSIS, label: 'addon.mod_feedback.analysis', loaded: false },
};

protected submitObserver: CoreEventObserver;
Expand All @@ -92,12 +97,12 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity

// Listen for form submit events.
this.submitObserver = CoreEvents.on(ADDON_MOD_FEEDBACK_FORM_SUBMITTED, async (data) => {
if (!this.feedback || data.feedbackId != this.feedback.id) {
if (!this.feedback || data.feedbackId !== this.feedback.id) {
return;
}

this.tabsLoaded.analysis = false;
this.tabsLoaded.overview = false;
this.tabs.analysis.loaded = false;
this.tabs.overview.loaded = false;
this.showLoading = true;

// Prefetch data if needed.
Expand All @@ -110,7 +115,7 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
}

// Load the right tab.
if (data.tab != this.tab) {
if (data.tab !== this.selectedTab) {
this.tabChanged(data.tab);
} else {
this.loadContent(true);
Expand Down Expand Up @@ -149,7 +154,9 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
*/
protected callAnalyticsLogEvent(): void {
this.analyticsLogEvent('mod_feedback_view_feedback', {
url: this.tab === 'analysis' ? `/mod/feedback/analysis.php?id=${this.module.id}` : undefined,
url: this.selectedTab === AddonModFeedbackIndexTabName.ANALYSIS
? `/mod/feedback/analysis.php?id=${this.module.id}`
: undefined,
});
}

Expand All @@ -168,8 +175,8 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
promises.push(AddonModFeedback.invalidateResumePageData(this.feedback.id));
}

this.tabsLoaded.analysis = false;
this.tabsLoaded.overview = false;
this.tabs.analysis.loaded = false;
this.tabs.overview.loaded = false;

await Promise.all(promises);
}
Expand All @@ -178,7 +185,7 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
* @inheritdoc
*/
protected isRefreshSyncNeeded(syncEventData: AddonModFeedbackAutoSyncData): boolean {
if (this.feedback && syncEventData.feedbackId == this.feedback.id) {
if (syncEventData.feedbackId === this.feedback?.id) {
// Refresh the data.
this.content?.scrollToTop();

Expand Down Expand Up @@ -207,12 +214,17 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
this.access = await AddonModFeedback.getFeedbackAccessInformation(this.feedback.id, { cmId: this.module.id });

this.showAnalysis = (this.access.canviewreports || this.access.canviewanalysis) && !this.access.isempty;

this.tabs.analysis.label = this.access.canviewreports
? 'addon.mod_feedback.analysis'
: 'addon.mod_feedback.completed_feedbacks';

this.firstSelectedTab = 0;
if (!this.showAnalysis) {
this.tab = 'overview';
this.selectedTab = AddonModFeedbackIndexTabName.OVERVIEW;
}

if (this.tab == 'analysis') {
if (this.selectedTab === AddonModFeedbackIndexTabName.ANALYSIS) {
this.firstSelectedTab = 1;

return await this.fetchFeedbackAnalysisData();
Expand All @@ -227,42 +239,44 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity

if (this.tabsReady) {
// Make sure the right tab is selected.
this.tabsComponent?.selectTab(this.tab || 'overview');
this.tabsComponent?.selectTab(this.selectedTab ?? AddonModFeedbackIndexTabName.OVERVIEW);
}
}
}

/**
* Convenience function to get feedback overview data.
*
* @returns Resolved when done.
*/
protected async fetchFeedbackOverviewData(): Promise<void> {
if (!this.access || !this.feedback) {
return;
}

const promises: Promise<void>[] = [];

if (this.access!.cancomplete && this.access!.cansubmit && this.access!.isopen) {
promises.push(AddonModFeedback.getResumePage(this.feedback!.id, { cmId: this.module.id }).then((goPage) => {
if (this.access.cancomplete && this.access.cansubmit && this.access.isopen) {
promises.push(AddonModFeedback.getResumePage(this.feedback.id, { cmId: this.module.id }).then((goPage) => {
this.goPage = goPage > 0 ? goPage : undefined;

return;
}));
}

if (this.access!.canedititems) {
this.overview.timeopen = (this.feedback!.timeopen || 0) * 1000;
if (this.access.canedititems) {
this.overview.timeopen = (this.feedback.timeopen || 0) * 1000;
this.overview.openTimeReadable = this.overview.timeopen ? CoreTimeUtils.userDate(this.overview.timeopen) : '';
this.overview.timeclose = (this.feedback!.timeclose || 0) * 1000;
this.overview.timeclose = (this.feedback.timeclose || 0) * 1000;
this.overview.closeTimeReadable = this.overview.timeclose ? CoreTimeUtils.userDate(this.overview.timeclose) : '';
}
if (this.access!.canviewanalysis) {
if (this.access.canviewanalysis) {
// Get groups (only for teachers).
promises.push(this.fetchGroupInfo(this.module.id));
}

try {
await Promise.all(promises);
} finally {
this.tabsLoaded.overview = true;
this.tabs.overview.loaded = true;
}
}

Expand All @@ -273,15 +287,14 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
*/
protected async fetchFeedbackAnalysisData(): Promise<void> {
try {
if (this.access!.canviewanalysis) {
if (this.access?.canviewanalysis) {
// Get groups (only for teachers).
await this.fetchGroupInfo(this.module.id);
} else {
this.tabChanged('overview');
this.tabChanged(AddonModFeedbackIndexTabName.OVERVIEW);
}

} finally {
this.tabsLoaded.analysis = true;
this.tabs.analysis.loaded = true;
}
}

Expand Down Expand Up @@ -419,7 +432,7 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
* Open attempts page.
*/
openAttempts(): void {
if (!this.access!.canviewreports || this.completedCount <= 0) {
if (!this.access || !this.access.canviewreports || this.completedCount <= 0) {
return;
}

Expand All @@ -438,11 +451,11 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
*
* @param tabName New tab name.
*/
tabChanged(tabName: string): void {
const tabHasChanged = this.tab !== undefined && this.tab !== tabName;
this.tab = tabName;
tabChanged(tabName: AddonModFeedbackIndexTabName): void {
const tabHasChanged = this.selectedTab !== undefined && this.selectedTab !== tabName;
this.selectedTab = tabName;

if (!this.tabsLoaded[this.tab]) {
if (!this.tabs[this.selectedTab].loaded) {
this.loadContent(false, false, true);
}

Expand All @@ -455,17 +468,20 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
* Set group to see the analysis.
*
* @param groupId Group ID.
* @returns Resolved when done.
*/
async setGroup(groupId: number): Promise<void> {
if (!this.feedback) {
return;
}

this.group = groupId;

const analysis = await AddonModFeedback.getAnalysis(this.feedback!.id, { groupId, cmId: this.module.id });
const analysis = await AddonModFeedback.getAnalysis(this.feedback.id, { groupId, cmId: this.module.id });

this.completedCount = analysis.completedcount;
this.itemsCount = analysis.itemscount;

if (this.tab == 'analysis') {
if (this.selectedTab === AddonModFeedbackIndexTabName.ANALYSIS) {
let num = 1;

this.items = <AddonModFeedbackItem[]> analysis.itemsdata.map((itemData) => {
Expand Down
8 changes: 8 additions & 0 deletions src/addons/mod/feedback/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,11 @@ export const ADDON_MOD_FEEDBACK_MULTICHOICE_HIDENOSELECT = 'h';
export const ADDON_MOD_FEEDBACK_MULTICHOICERATED_VALUE_SEP = '####';

export const ADDON_MOD_FEEDBACK_PER_PAGE = 20;

/**
* Index Tabs.
*/
export enum AddonModFeedbackIndexTabName {
OVERVIEW = 'overview',
ANALYSIS = 'analysis',
}
Loading

0 comments on commit cd848c5

Please sign in to comment.