Fix various comma separated enumerations

OpenSlides · Aug 10, 2023 · 87a0ac3 · 87a0ac3
1 parent 9fef21a
commit 87a0ac3
Show file tree

Hide file tree

Showing 24 changed files with 86 additions and 69 deletions.
diff --git a/...c/app/site/modules/global-headbar/components/account-dialog/account-dialog.component.html b/...c/app/site/modules/global-headbar/components/account-dialog/account-dialog.component.html
@@ -74,13 +74,9 @@ <h2>{{ 'My meetings' | translate }}</h2>
                 <div class="meeting-group-block">
                     <a (click)="closeDialog()" [routerLink]="[meeting.id]">{{ meeting.name }}</a>
                     <div class="flex-vertical-center">
-                        <span
-                            class="flex-vertical-center"
-                            *ngFor="let group of getGroupsForMeeting(meeting); let last = last"
-                        >
-                            {{ group.name }}
-                            <span *ngIf="!last">,&nbsp;</span>
-                        </span>
+                        <os-comma-separated-listing [list]="getGroupsForMeeting(meeting)">
+                            <ng-template let-group>{{ group.name }}</ng-template>
+                        </os-comma-separated-listing>
                     </div>
                 </div>
             </ng-container>

diff --git a/client/src/app/site/modules/global-headbar/global-headbar.module.ts b/client/src/app/site/modules/global-headbar/global-headbar.module.ts
@@ -11,6 +11,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 
 import { OpenSlidesTranslationModule } from '../translations';
 import { UserComponentsModule } from '../user-components';
@@ -37,6 +38,7 @@ const DECLARATIONS = [GlobalHeadbarComponent];
     declarations: [...DECLARATIONS, AccountButtonComponent, AccountDialogComponent, GlobalSearchComponent],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         OpenSlidesTranslationModule.forChild(),
         UserComponentsModule,
         RouterModule,

diff --git a/...cs/modules/topic-poll/components/topic-poll-meta-info/topic-poll-meta-info.component.html b/...cs/modules/topic-poll/components/topic-poll-meta-info/topic-poll-meta-info.component.html
@@ -22,10 +22,9 @@
         <small *ngIf="poll.entitled_groups && poll.type && poll.type !== 'analog'">
             {{ 'Entitled to vote' | translate }}:
 
-            <span *ngFor="let group of poll.entitled_groups; let last = last">
-                <span>{{ group.getTitle() | translate }}</span>
-                <span *ngIf="!last">,&ensp;</span>
-            </span>
+            <os-comma-separated-listing [list]="poll.entitled_groups">
+                <ng-template let-group>{{ group.getTitle() | translate }}</ng-template>
+            </os-comma-separated-listing>
             <br />
         </small>
 

diff --git a/...p/site/pages/meetings/pages/agenda/modules/topics/modules/topic-poll/topic-poll.module.ts b/...p/site/pages/meetings/pages/agenda/modules/topics/modules/topic-poll/topic-poll.module.ts
@@ -18,6 +18,7 @@ import { PollModule } from 'src/app/site/pages/meetings/modules/poll';
 import { PollService } from 'src/app/site/pages/meetings/modules/poll/services/poll.service';
 import { DirectivesModule } from 'src/app/ui/directives';
 import { ChoiceDialogModule } from 'src/app/ui/modules/choice-dialog';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container';
 import { SearchSelectorModule } from 'src/app/ui/modules/search-selector';
 import { SortingListModule } from 'src/app/ui/modules/sorting/modules';
@@ -43,6 +44,7 @@ import { TopicPollServiceModule } from './services/topic-poll-service.module';
     ],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         TopicPollServiceModule,
         TopicCommonServiceModule,
         FormsModule,

diff --git a/...p/site/pages/meetings/pages/assignments/modules/assignment-poll/assignment-poll.module.ts b/...p/site/pages/meetings/pages/assignments/modules/assignment-poll/assignment-poll.module.ts
@@ -19,6 +19,7 @@ import { PollModule } from 'src/app/site/pages/meetings/modules/poll';
 import { PollService } from 'src/app/site/pages/meetings/modules/poll/services/poll.service';
 import { DirectivesModule } from 'src/app/ui/directives';
 import { ChoiceDialogModule } from 'src/app/ui/modules/choice-dialog';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { ExpandableContentWrapperModule } from 'src/app/ui/modules/expandable-content-wrapper';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container';
 import { SearchSelectorModule } from 'src/app/ui/modules/search-selector';
@@ -46,6 +47,7 @@ const COMPONENTS = [
     exports: [...COMPONENTS, PollModule, AssignmentPollServiceModule],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         AssignmentPollServiceModule,
         AssignmentCommonServiceModule,
         RouterModule,

diff --git a/...gnment-poll/components/assignment-poll-meta-info/assignment-poll-meta-info.component.html b/...gnment-poll/components/assignment-poll-meta-info/assignment-poll-meta-info.component.html
@@ -41,10 +41,9 @@
         <small *ngIf="poll.entitled_groups && poll.type && poll.type !== 'analog'">
             {{ 'Entitled to vote' | translate }}:
 
-            <span *ngFor="let group of poll.entitled_groups; let last = last">
-                <span>{{ group.getTitle() | translate }}</span>
-                <span *ngIf="!last">,&ensp;</span>
-            </span>
+            <os-comma-separated-listing [list]="poll.entitled_groups">
+                <ng-template let-group>{{ group.getTitle() | translate }}</ng-template>
+            </os-comma-separated-listing>
             <br />
         </small>
 

diff --git a/...nt/src/app/site/pages/meetings/pages/chat/pages/chat-group-list/chat-group-list.module.ts b/...nt/src/app/site/pages/meetings/pages/chat/pages/chat-group-list/chat-group-list.module.ts
@@ -11,6 +11,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { HeadBarModule } from 'src/app/ui/modules/head-bar';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container';
 import { VerticalTabGroupModule } from 'src/app/ui/modules/vertical-tab-group';
@@ -32,6 +33,7 @@ import { ChatGroupListComponent } from './components/chat-group-list/chat-group-
     ],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         ChatGroupListRoutingModule,
         ChatGroupDialogModule,
         PipesModule,

diff --git a/.../chat/pages/chat-group-list/components/chat-group-detail/chat-group-detail.component.html b/.../chat/pages/chat-group-list/components/chat-group-detail/chat-group-detail.component.html
@@ -14,11 +14,9 @@
                 *ngIf="group.write_groups.length"
                 matTooltip="{{ 'Groups with write permissions' | translate }}"
             >
-                <span *ngFor="let userGroup of group.write_groups | slice : 0 : 3; let last = last">
-                    <span>{{ userGroup.getTitle() | translate }}</span>
-                    <span *ngIf="!last">,&nbsp;</span>
-                    <span *ngIf="last && group.write_groups.length > 3">...</span>
-                </span>
+                <os-comma-separated-listing [list]="group.write_groups" [showElementsAmount]="3">
+                    <ng-template let-group>{{ group.getTitle() | translate }}</ng-template>
+                </os-comma-separated-listing>
             </os-icon-container>
         </div>
 
@@ -28,11 +26,9 @@
                 *ngIf="getReadonlyGroups(group).length"
                 matTooltip="{{ 'Groups with read permissions' | translate }}"
             >
-                <span *ngFor="let userGroup of getReadonlyGroups(group) | slice : 0 : 3; let last = last">
-                    <span>{{ userGroup.getTitle() | translate }}</span>
-                    <span *ngIf="!last">,&nbsp;</span>
-                    <span *ngIf="last && group.read_groups.length > 3">...</span>
-                </span>
+                <os-comma-separated-listing [list]="getReadonlyGroups(group)" [showElementsAmount]="3">
+                    <ng-template let-group>{{ group.getTitle() | translate }}</ng-template>
+                </os-comma-separated-listing>
             </os-icon-container>
         </div>
         <div class="spacer"></div>

diff --git a/...mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html b/...mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html
@@ -50,11 +50,9 @@ <h2>{{ 'Files' | translate }}</h2>
         (click)="onEditFile(mediafile)"
     >
         <os-icon-container *ngIf="mediafile.access_groups.length" icon="group">
-            <span *ngFor="let group of mediafile.access_groups | slice : 0 : 3; let last = last">
-                <span>{{ $any(group).getTitle() | translate }}</span>
-                <span *ngIf="!last">,&nbsp;</span>
-                <span *ngIf="last && mediafile.access_groups.length > 3">...</span>
-            </span>
+            <os-comma-separated-listing [list]="mediafile.access_groups" [showElementsAmount]="3">
+                <ng-template let-group>{{ $any(group).getTitle() | translate }}</ng-template>
+            </os-comma-separated-listing>
         </os-icon-container>
     </div>
 </os-file-list>
@@ -64,11 +62,9 @@ <h2>{{ 'Files' | translate }}</h2>
     <span class="visibility" *ngIf="canEdit && directory && directory.has_inherited_access_groups">
         <button class="visible-for" mat-button (click)="onEditFile(directory)">
             <os-icon-container icon="group" matTooltip="{{ 'Allowed access groups for this directory' | translate }}">
-                <span *ngFor="let group of directory.inherited_access_groups | slice : 0 : 3; let last = last">
-                    <span>{{ group.getTitle() | translate }}</span>
-                    <span *ngIf="!last">,</span>
-                    <span *ngIf="last && directory.inherited_access_groups.length > 3">...</span>
-                </span>
+                <os-comma-separated-listing [list]="directory.inherited_access_groups" [showElementsAmount]="3">
+                    <ng-template let-group>{{ group.getTitle() | translate }}</ng-template>
+                </os-comma-separated-listing>
             </os-icon-container>
         </button>
     </span>

diff --git a/.../app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/mediafile-list.module.ts b/.../app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/mediafile-list.module.ts
@@ -12,6 +12,7 @@ import { RouterModule } from '@angular/router';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { MeetingsComponentCollectorModule } from 'src/app/site/pages/meetings/modules/meetings-component-collector';
 import { DirectivesModule } from 'src/app/ui/directives';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { FileListModule } from 'src/app/ui/modules/file-list/file-list.module';
 import { HeadBarModule } from 'src/app/ui/modules/head-bar';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container/icon-container.module';
@@ -27,6 +28,7 @@ import { MediafileListServiceModule } from './services/mediafile-list-service.mo
     declarations: [MediafileListComponent],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         MediafileListRoutingModule,
         MediafileListServiceModule,
         MediafileCommonServiceModule,

diff --git a/...-poll/components/motion-poll-meta-information/motion-poll-meta-information.component.html b/...-poll/components/motion-poll-meta-information/motion-poll-meta-information.component.html
@@ -2,10 +2,9 @@
     <small *ngIf="poll.entitled_groups && poll.type && poll.type !== 'analog'">
         {{ 'Groups' | translate }}:
 
-        <span *ngFor="let group of poll.entitled_groups; let last = last">
-            <span>{{ group.getTitle() | translate }}</span>
-            <span *ngIf="!last">,&ensp;</span>
-        </span>
+        <os-comma-separated-listing [list]="poll.entitled_groups">
+            <ng-template let-group>{{ group.getTitle() | translate }}</ng-template>
+        </os-comma-separated-listing>
     </small>
     <small>{{ '100% base' | translate }}: {{ poll.percentBaseVerbose | translate }}</small>
 

diff --git a/client/src/app/site/pages/meetings/pages/motions/modules/motion-poll/motion-poll.module.ts b/client/src/app/site/pages/meetings/pages/motions/modules/motion-poll/motion-poll.module.ts
@@ -20,6 +20,7 @@ import { MeetingsComponentCollectorModule } from 'src/app/site/pages/meetings/mo
 import { PollModule } from 'src/app/site/pages/meetings/modules/poll';
 import { PollService } from 'src/app/site/pages/meetings/modules/poll/services/poll.service';
 import { DirectivesModule } from 'src/app/ui/directives';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container';
 import { SearchSelectorModule } from 'src/app/ui/modules/search-selector';
 import { PipesModule } from 'src/app/ui/pipes';
@@ -45,6 +46,7 @@ const MODULES = [MotionPollServiceModule];
     imports: [
         ...MODULES,
         CommonModule,
+        CommaSeparatedListingModule,
         RouterModule,
         MatButtonModule,
         MatProgressSpinnerModule,

diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/comments/comments.module.ts b/client/src/app/site/pages/meetings/pages/motions/pages/comments/comments.module.ts
@@ -10,6 +10,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { HeadBarModule } from 'src/app/ui/modules/head-bar';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container';
 import { SearchSelectorModule } from 'src/app/ui/modules/search-selector';
@@ -24,6 +25,7 @@ import { CommentSectionSortComponent } from './components/comment-section-sort/c
     declarations: [CommentSectionListComponent, CommentSectionSortComponent],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         CommentsRoutingModule,
         SortingModule,
         HeadBarModule,

diff --git a/...otions/pages/comments/components/comment-section-list/comment-section-list.component.html b/...otions/pages/comments/components/comment-section-list/comment-section-list.component.html
@@ -80,10 +80,9 @@ <h3>{{ 'Groups with write permissions' | translate }}</h3>
 </mat-menu>
 
 <ng-template #groupList let-groups="groups">
-    <span class="inline-flex" *ngFor="let group of groups; let last = last">
-        {{ group.getTitle() | translate }}
-        <span *ngIf="!last">,&nbsp;</span>
-    </span>
+    <os-comma-separated-listing [list]="groups">
+        <ng-template let-group>{{ group.getTitle() | translate }}</ng-template>
+    </os-comma-separated-listing>
 </ng-template>
 
 <!-- Template for motion comment dialog -->

diff --git a/...s/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.html b/...s/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.html
@@ -106,10 +106,9 @@ <h2 *ngIf="workflow">
                             <div class="inner-table">
                                 <div *ngIf="!state.next_states.length">-</div>
                                 <div *ngIf="state.next_states.length">
-                                    <div *ngFor="let nextstate of state.next_states; let last = last">
-                                        {{ nextstate.name }}
-                                        <span *ngIf="!last">,&nbsp;</span>
-                                    </div>
+                                    <os-comma-separated-listing [list]="state.next_states">
+                                        <ng-template let-next>{{ next.name }}</ng-template>
+                                    </os-comma-separated-listing>
                                 </div>
                             </div>
                             <div
@@ -132,10 +131,9 @@ <h2 *ngIf="workflow">
                             <div class="inner-table">
                                 <div *ngIf="!state.restrictions?.length">-</div>
                                 <div *ngIf="state.restrictions?.length">
-                                    <div *ngFor="let restriction of state.restrictions; let last = last">
-                                        {{ getRestrictionLabel(restriction) | translate }}
-                                        <span *ngIf="!last">,&nbsp;</span>
-                                    </div>
+                                    <os-comma-separated-listing [list]="state.restrictions">
+                                        <ng-template let-res>{{ getRestrictionLabel(res) | translate }}</ng-template>
+                                    </os-comma-separated-listing>
                                 </div>
                             </div>
                             <div

diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/workflows/workflows.module.ts b/client/src/app/site/pages/meetings/pages/motions/pages/workflows/workflows.module.ts
@@ -15,6 +15,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { MeetingsComponentCollectorModule } from 'src/app/site/pages/meetings/modules/meetings-component-collector';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { FileUploadModule } from 'src/app/ui/modules/file-upload';
 import { HeadBarModule } from 'src/app/ui/modules/head-bar';
 import { SortingListModule } from 'src/app/ui/modules/sorting/modules';
@@ -36,6 +37,7 @@ import { WorkflowsRoutingModule } from './workflows-routing.module';
     ],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         WorkflowsRoutingModule,
         MotionWorkflowServiceModule,
         MeetingsComponentCollectorModule,

diff --git a/...ticipant-detail/components/participant-detail-view/participant-detail-view.component.html b/...ticipant-detail/components/participant-detail-view/participant-detail-view.component.html
@@ -216,10 +216,9 @@ <h4>{{ 'Participant number' | translate }}</h4>
         <!-- Groups -->
         <div *ngIf="usersGroups && usersGroups.length > 0">
             <h4>{{ 'Groups' | translate }}</h4>
-            <span *ngFor="let group of usersGroups; let last = last" class="inline-flex">
-                {{ group.getTitle() | translate }}
-                <span *ngIf="!last">,&nbsp;</span>
-            </span>
+            <os-comma-separated-listing [list]="usersGroups">
+                <ng-template let-group>{{ group.getTitle() | translate }}</ng-template>
+            </os-comma-separated-listing>
         </div>
 
         <div *ngIf="!usersGroups || usersGroups?.length === 0">

diff --git a/...e/pages/meetings/pages/participants/pages/participant-detail/participant-detail.module.ts b/...e/pages/meetings/pages/participants/pages/participant-detail/participant-detail.module.ts
@@ -11,6 +11,7 @@ import { RouterModule } from '@angular/router';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { UserComponentsModule } from 'src/app/site/modules/user-components';
 import { DirectivesModule } from 'src/app/ui/directives';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { EditorModule } from 'src/app/ui/modules/editor';
 import { HeadBarModule } from 'src/app/ui/modules/head-bar';
 import { SearchSelectorModule } from 'src/app/ui/modules/search-selector';
@@ -25,6 +26,7 @@ import { ParticipantDetailRoutingModule } from './participant-detail-routing.mod
     declarations: [ParticipantDetailComponent, ParticipantDetailViewComponent],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         ParticipantDetailRoutingModule,
         ParticipantExportModule,
         RouterModule,

diff --git a/...ipants/pages/participant-list/components/participant-list/participant-list.component.html b/...ipants/pages/participant-list/components/participant-list/participant-list.component.html
@@ -72,10 +72,9 @@ <h2>{{ 'Participants' | translate }}</h2>
         <div class="groupsCell">
             <div *ngIf="user.groups()?.length">
                 <os-icon-container icon="people" [noWrap]="true">
-                    <span *ngFor="let group of user.groups(); let last = last" class="inline-flex">
-                        {{ group.getTitle() | translate }}
-                        <span *ngIf="!last">,&nbsp;</span>
-                    </span>
+                    <os-comma-separated-listing [list]="user.groups()">
+                        <ng-template let-group>{{ group.getTitle() | translate }}</ng-template>
+                    </os-comma-separated-listing>
                 </os-icon-container>
             </div>
             <div *ngIf="user.structure_level()" class="spacer-top-5">

diff --git a/.../site/pages/meetings/pages/participants/pages/participant-list/participant-list.module.ts b/.../site/pages/meetings/pages/participants/pages/participant-list/participant-list.module.ts
@@ -10,6 +10,7 @@ import { UserComponentsModule } from 'src/app/site/modules/user-components';
 import { MeetingsComponentCollectorModule } from 'src/app/site/pages/meetings/modules/meetings-component-collector';
 import { DirectivesModule } from 'src/app/ui/directives';
 import { ChoiceDialogModule } from 'src/app/ui/modules/choice-dialog';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { HeadBarModule } from 'src/app/ui/modules/head-bar';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container';
 import { PipesModule } from 'src/app/ui/pipes';
@@ -24,6 +25,7 @@ import { ParticipantListServiceModule } from './services/participant-list-servic
     declarations: [ParticipantListComponent],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         ParticipantListRoutingModule,
         ParticipantListServiceModule,
         ParticipantListInfoDialogModule,

diff --git a/...tees/pages/committee-detail/modules/committee-detail-view/committee-detail-view.module.ts b/...tees/pages/committee-detail/modules/committee-detail-view/committee-detail-view.module.ts
@@ -8,6 +8,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { RouterModule } from '@angular/router';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { DirectivesModule } from 'src/app/ui/directives';
+import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
 import { HeadBarModule } from 'src/app/ui/modules/head-bar';
 import { PromptDialogModule } from 'src/app/ui/modules/prompt-dialog';
 
@@ -19,6 +20,7 @@ import { CommitteeDetailViewComponent } from './components/committee-detail-view
     declarations: [CommitteeDetailViewComponent],
     imports: [
         CommonModule,
+        CommaSeparatedListingModule,
         CommitteeComponentsModule,
         CommitteeDetailViewRoutingModule,
         PromptDialogModule,