Communication: Always show favorite channels (#9510)

src/main/webapp/app/overview/course-conversations/course-conversations.component.html

@@ -35,6 +35,7 @@
                     (onGroupChatPressed)="openCreateGroupChatDialog()"
                     [showAddOption]="CHANNEL_TYPE_SHOW_ADD_OPTION"
                     [channelTypeIcon]="CHANNEL_TYPE_ICON"
+                    [sidebarItemAlwaysShow]="DEFAULT_SHOW_ALWAYS"
                     [collapseState]="DEFAULT_COLLAPSE_STATE"
                     [inCommunication]="true"
                 />

src/main/webapp/app/overview/course-conversations/course-conversations.component.ts

@@ -13,7 +13,7 @@ import { PageType, SortDirection } from 'app/shared/metis/metis.util';
 import { faBan, faComment, faComments, faFile, faFilter, faGraduationCap, faHeart, faList, faMessage, faPlus, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { ButtonType } from 'app/shared/components/button.component';
 import { CourseWideSearchComponent, CourseWideSearchConfig } from 'app/overview/course-conversations/course-wide-search/course-wide-search.component';
-import { AccordionGroups, ChannelAccordionShowAdd, ChannelTypeIcons, CollapseState, SidebarCardElement, SidebarData } from 'app/types/sidebar';
+import { AccordionGroups, ChannelAccordionShowAdd, ChannelTypeIcons, CollapseState, SidebarCardElement, SidebarData, SidebarItemShowAlways } from 'app/types/sidebar';
 import { CourseOverviewService } from 'app/overview/course-overview.service';
 import { GroupChatCreateDialogComponent } from 'app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component';
 import { defaultFirstLayerDialogOptions, defaultSecondLayerDialogOptions } from 'app/overview/course-conversations/other/conversation.util';
@@ -55,16 +55,27 @@ const CHANNEL_TYPE_ICON: ChannelTypeIcons = {
 };
 
 const DEFAULT_COLLAPSE_STATE: CollapseState = {
-    generalChannels: false,
+    generalChannels: true,
     exerciseChannels: true,
     examChannels: true,
     groupChats: true,
     directMessages: true,
-    favoriteChannels: true,
+    favoriteChannels: false,
     lectureChannels: true,
     hiddenChannels: true,
 };
 
+const DEFAULT_SHOW_ALWAYS: SidebarItemShowAlways = {
+    generalChannels: true,
+    exerciseChannels: false,
+    examChannels: false,
+    groupChats: true,
+    directMessages: true,
+    favoriteChannels: true,
+    lectureChannels: false,
+    hiddenChannels: false,
+};
+
 @Component({
     selector: 'jhi-course-conversations',
     templateUrl: './course-conversations.component.html',
@@ -95,6 +106,7 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     readonly CHANNEL_TYPE_SHOW_ADD_OPTION = CHANNEL_TYPE_SHOW_ADD_OPTION;
     readonly CHANNEL_TYPE_ICON = CHANNEL_TYPE_ICON;
     readonly DEFAULT_COLLAPSE_STATE = DEFAULT_COLLAPSE_STATE;
+    protected readonly DEFAULT_SHOW_ALWAYS = DEFAULT_SHOW_ALWAYS;
 
     // set undefined so nothing gets displayed until isCodeOfConductAccepted is loaded
     isCodeOfConductAccepted?: boolean;

src/main/webapp/app/overview/course-exams/course-exams.component.html

@@ -1,7 +1,13 @@
 <div class="d-flex justify-content-between">
     @if (course) {
         <div id="exam-sidebar-test" [ngClass]="{ 'sidebar-collapsed': isCollapsed }" [hidden]="isExamStarted">
-            <jhi-sidebar [itemSelected]="examSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" />
+            <jhi-sidebar
+                [itemSelected]="examSelected"
+                [courseId]="courseId"
+                [sidebarData]="sidebarData"
+                [collapseState]="DEFAULT_COLLAPSE_STATE"
+                [sidebarItemAlwaysShow]="DEFAULT_SHOW_ALWAYS"
+            />
         </div>
 
         @if (examSelected) {

src/main/webapp/app/overview/course-exams/course-exams.component.ts

@@ -24,6 +24,11 @@ const DEFAULT_COLLAPSE_STATE: CollapseState = {
     test: false,
 };
 
+const DEFAULT_SHOW_ALWAYS: CollapseState = {
+    real: false,
+    test: false,
+};
+
 @Component({
     selector: 'jhi-course-exams',
     templateUrl: './course-exams.component.html',
@@ -57,6 +62,7 @@ export class CourseExamsComponent implements OnInit, OnDestroy {
     isExamStarted = false;
 
     readonly DEFAULT_COLLAPSE_STATE = DEFAULT_COLLAPSE_STATE;
+    protected readonly DEFAULT_SHOW_ALWAYS = DEFAULT_SHOW_ALWAYS;
 
     constructor(
         private route: ActivatedRoute,

src/main/webapp/app/overview/course-exercises/course-exercises.component.html

@@ -1,7 +1,14 @@
 <div class="d-flex justify-content-between horizontal-scroll">
     @if (course) {
         <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }" *ngIf="!isLti">
-            <jhi-sidebar [itemSelected]="exerciseSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" [showFilter]="true" />
+            <jhi-sidebar
+                [itemSelected]="exerciseSelected"
+                [courseId]="courseId"
+                [sidebarData]="sidebarData"
+                [collapseState]="DEFAULT_COLLAPSE_STATE"
+                [sidebarItemAlwaysShow]="DEFAULT_SHOW_ALWAYS"
+                [showFilter]="true"
+            />
         </div>
 
         @if (exerciseSelected) {

src/main/webapp/app/overview/course-exercises/course-exercises.component.ts

@@ -7,7 +7,7 @@ import { courseExerciseOverviewTour } from 'app/guided-tour/tours/course-exercis
 import { ProgrammingSubmissionService } from 'app/exercises/programming/participate/programming-submission.service';
 import { Exercise } from 'app/entities/exercise.model';
 import { CourseStorageService } from 'app/course/manage/course-storage.service';
-import { AccordionGroups, CollapseState, SidebarCardElement, SidebarData } from 'app/types/sidebar';
+import { AccordionGroups, CollapseState, SidebarCardElement, SidebarData, SidebarItemShowAlways } from 'app/types/sidebar';
 import { CourseOverviewService } from '../course-overview.service';
 import { LtiService } from 'app/shared/service/lti.service';
 
@@ -27,6 +27,14 @@ const DEFAULT_COLLAPSE_STATE: CollapseState = {
     noDate: true,
 };
 
+const DEFAULT_SHOW_ALWAYS: SidebarItemShowAlways = {
+    future: false,
+    current: false,
+    dueSoon: false,
+    past: false,
+    noDate: false,
+};
+
 @Component({
     selector: 'jhi-course-exercises',
     templateUrl: './course-exercises.component.html',
@@ -47,9 +55,11 @@ export class CourseExercisesComponent implements OnInit, OnDestroy {
     sidebarData: SidebarData;
     sidebarExercises: SidebarCardElement[] = [];
     isCollapsed: boolean = false;
-    readonly DEFAULT_COLLAPSE_STATE = DEFAULT_COLLAPSE_STATE;
     isLti: boolean = false;
 
+    protected readonly DEFAULT_COLLAPSE_STATE = DEFAULT_COLLAPSE_STATE;
+    protected readonly DEFAULT_SHOW_ALWAYS = DEFAULT_SHOW_ALWAYS;
+
     constructor(
         private courseStorageService: CourseStorageService,
         private route: ActivatedRoute,

src/main/webapp/app/overview/course-lectures/course-lectures.component.html

@@ -1,7 +1,13 @@
 <div class="d-flex justify-content-between">
     @if (course) {
         <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
-            <jhi-sidebar [itemSelected]="lectureSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" />
+            <jhi-sidebar
+                [itemSelected]="lectureSelected"
+                [courseId]="courseId"
+                [sidebarData]="sidebarData"
+                [collapseState]="DEFAULT_COLLAPSE_STATE"
+                [sidebarItemAlwaysShow]="DEFAULT_SHOW_ALWAYS"
+            />
         </div>
 
         @if (lectureSelected) {

src/main/webapp/app/overview/course-lectures/course-lectures.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { Lecture } from 'app/entities/lecture.model';
 import { CourseStorageService } from 'app/course/manage/course-storage.service';
-import { AccordionGroups, CollapseState, SidebarCardElement, SidebarData } from 'app/types/sidebar';
+import { AccordionGroups, CollapseState, SidebarCardElement, SidebarData, SidebarItemShowAlways } from 'app/types/sidebar';
 import { CourseOverviewService } from '../course-overview.service';
 
 const DEFAULT_UNIT_GROUPS: AccordionGroups = {
@@ -23,6 +23,14 @@ const DEFAULT_COLLAPSE_STATE: CollapseState = {
     noDate: true,
 };
 
+const DEFAULT_SHOW_ALWAYS: SidebarItemShowAlways = {
+    future: false,
+    current: false,
+    dueSoon: false,
+    past: false,
+    noDate: false,
+};
+
 @Component({
     selector: 'jhi-course-lectures',
     templateUrl: './course-lectures.component.html',
@@ -41,6 +49,7 @@ export class CourseLecturesComponent implements OnInit, OnDestroy {
     sidebarLectures: SidebarCardElement[] = [];
     isCollapsed: boolean = false;
     readonly DEFAULT_COLLAPSE_STATE = DEFAULT_COLLAPSE_STATE;
+    protected readonly DEFAULT_SHOW_ALWAYS = DEFAULT_SHOW_ALWAYS;
 
     constructor(
         private courseStorageService: CourseStorageService,

src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.html

@@ -1,7 +1,13 @@
 <div class="d-flex justify-content-between">
     @if (course) {
         <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
-            <jhi-sidebar [itemSelected]="tutorialGroupSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" />
+            <jhi-sidebar
+                [itemSelected]="tutorialGroupSelected"
+                [courseId]="courseId"
+                [sidebarData]="sidebarData"
+                [collapseState]="DEFAULT_COLLAPSE_STATE"
+                [sidebarItemAlwaysShow]="DEFAULT_SHOW_ALWAYS"
+            />
         </div>
 
         @if (tutorialGroupSelected) {

src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.ts

@@ -12,7 +12,7 @@ import { AlertService } from 'app/core/util/alert.service';
 import { TutorialGroupFreePeriod } from 'app/entities/tutorial-group/tutorial-group-free-day.model';
 import { CourseStorageService } from 'app/course/manage/course-storage.service';
 import { TutorialGroupsConfiguration } from 'app/entities/tutorial-group/tutorial-groups-configuration.model';
-import { AccordionGroups, CollapseState, SidebarCardElement, SidebarData, TutorialGroupCategory } from 'app/types/sidebar';
+import { AccordionGroups, CollapseState, SidebarCardElement, SidebarData, SidebarItemShowAlways, TutorialGroupCategory } from 'app/types/sidebar';
 import { CourseOverviewService } from '../course-overview.service';
 import { cloneDeep } from 'lodash-es';
 
@@ -28,6 +28,12 @@ const DEFAULT_COLLAPSE_STATE: CollapseState = {
     further: true,
 };
 
+const DEFAULT_SHOW_ALWAYS: SidebarItemShowAlways = {
+    registered: false,
+    all: false,
+    further: false,
+};
+
 @Component({
     selector: 'jhi-course-tutorial-groups',
     templateUrl: './course-tutorial-groups.component.html',
@@ -49,6 +55,7 @@ export class CourseTutorialGroupsComponent implements OnInit, OnDestroy {
     sortedTutorialGroups: TutorialGroup[] = [];
     accordionTutorialGroupsGroups: AccordionGroups = TUTORIAL_UNIT_GROUPS;
     readonly DEFAULT_COLLAPSE_STATE = DEFAULT_COLLAPSE_STATE;
+    protected readonly DEFAULT_SHOW_ALWAYS = DEFAULT_SHOW_ALWAYS;
     sidebarTutorialGroups: SidebarCardElement[] = [];
 
     constructor(

src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html

@@ -1,5 +1,5 @@
 @for (groupKey of Object.keys(groupedData); track groupKey; let i = $index) {
-    @if ((groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length) {
+    @if ((groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length || sidebarItemAlwaysShow()[groupKey]) {
         <div id="test-accordion-item-container-{{ i }}" class="pointer">
             <div
                 [id]="'test-accordion-item-header-' + groupKey"

src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts

@@ -1,6 +1,6 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, input } from '@angular/core';
 import { faChevronRight, faFile } from '@fortawesome/free-solid-svg-icons';
-import { AccordionGroups, ChannelTypeIcons, CollapseState, SidebarCardElement, SidebarTypes } from 'app/types/sidebar';
+import { AccordionGroups, ChannelTypeIcons, CollapseState, SidebarCardElement, SidebarItemShowAlways, SidebarTypes } from 'app/types/sidebar';
 import { Params } from '@angular/router';
 
 @Component({
@@ -21,6 +21,7 @@ export class SidebarAccordionComponent implements OnChanges, OnInit {
     @Input() itemSelected?: boolean;
     @Input() showLeadingIcon = false;
     @Input() channelTypeIcon?: ChannelTypeIcons;
+    sidebarItemAlwaysShow = input.required<SidebarItemShowAlways>();
     @Input() collapseState: CollapseState;
     @Input() isFilterActive: boolean = false;
 
@@ -41,7 +42,7 @@ export class SidebarAccordionComponent implements OnChanges, OnInit {
     }
 
     setStoredCollapseState() {
-        const storedCollapseState: string | null = sessionStorage.getItem('sidebar.accordion.collapseState.' + this.storageId + '.byCourse.' + this.courseId);
+        const storedCollapseState: string | null = localStorage.getItem('sidebar.accordion.collapseState.' + this.storageId + '.byCourse.' + this.courseId);
         if (storedCollapseState) this.collapseState = JSON.parse(storedCollapseState);
     }
 
@@ -68,6 +69,6 @@ export class SidebarAccordionComponent implements OnChanges, OnInit {
 
     toggleGroupCategoryCollapse(groupCategoryKey: string) {
         this.collapseState[groupCategoryKey] = !this.collapseState[groupCategoryKey];
-        sessionStorage.setItem('sidebar.accordion.collapseState.' + this.storageId + '.byCourse.' + this.courseId, JSON.stringify(this.collapseState));
+        localStorage.setItem('sidebar.accordion.collapseState.' + this.storageId + '.byCourse.' + this.courseId, JSON.stringify(this.collapseState));
     }
 }

src/main/webapp/app/shared/sidebar/sidebar.component.html

@@ -79,6 +79,7 @@
                                 [itemSelected]="itemSelected"
                                 [showLeadingIcon]="sidebarData.showAccordionLeadingIcon ?? false"
                                 [channelTypeIcon]="channelTypeIcon"
+                                [sidebarItemAlwaysShow]="sidebarItemAlwaysShow()"
                                 [collapseState]="collapseState"
                                 (onUpdateSidebar)="onUpdateSidebar.emit()"
                                 [isFilterActive]="isFilterActive"

src/main/webapp/app/shared/sidebar/sidebar.component.ts

@@ -3,7 +3,7 @@ import { faFilter, faFilterCircleXmark, faHashtag, faPlusCircle, faSearch, faUse
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription, distinctUntilChanged } from 'rxjs';
 import { ProfileService } from '../layouts/profiles/profile.service';
-import { ChannelAccordionShowAdd, ChannelTypeIcons, CollapseState, SidebarCardSize, SidebarData, SidebarTypes } from 'app/types/sidebar';
+import { ChannelAccordionShowAdd, ChannelTypeIcons, CollapseState, SidebarCardSize, SidebarData, SidebarItemShowAlways, SidebarTypes } from 'app/types/sidebar';
 import { SidebarEventService } from './sidebar-event.service';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { cloneDeep } from 'lodash-es';
@@ -35,6 +35,7 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit {
     @Input() showAddOption?: ChannelAccordionShowAdd;
     @Input() channelTypeIcon?: ChannelTypeIcons;
     @Input() collapseState: CollapseState;
+    sidebarItemAlwaysShow = input.required<SidebarItemShowAlways>();
     @Input() showFilter: boolean = false;
     inCommunication = input<boolean>(false);
     searchValue = '';

src/main/webapp/app/types/sidebar.ts

@@ -25,6 +25,9 @@ export type CollapseState = {
 } & (Record<TimeGroupCategory, boolean> | Record<ChannelGroupCategory, boolean> | Record<ExamGroupCategory, boolean> | Record<TutorialGroupCategory, boolean>);
 export type ChannelAccordionShowAdd = Record<ChannelGroupCategory, boolean>;
 export type ChannelTypeIcons = Record<ChannelGroupCategory, IconProp>;
+export type SidebarItemShowAlways = {
+    [key: string]: boolean;
+} & (Record<TimeGroupCategory, boolean> | Record<ChannelGroupCategory, boolean> | Record<ExamGroupCategory, boolean> | Record<TutorialGroupCategory, boolean>);
 
 export interface SidebarData {
     groupByCategory: boolean;

src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts

@@ -53,6 +53,7 @@ describe('SidebarAccordionComponent', () => {
         };
         component.routeParams = { exerciseId: 3 };
         component.collapseState = { current: false, dueSoon: false, past: false, future: true, noDate: true };
+        fixture.componentRef.setInput('sidebarItemAlwaysShow', { current: false, dueSoon: false, past: false, future: false, noDate: false });
         fixture.detectChanges();
     });