Vote detail view

client/src/app/site/pages/meetings/modules/poll/components/poll-detail/poll-detail.component.html

@@ -0,0 +1,53 @@
+<os-head-bar [nav]="false">
+    <div class="title-slot">
+        <h1 class="mock-h2">{{ poll()?.title }}</h1>
+    </div>
+</os-head-bar>
+
+<mat-card class="os-card">
+    <mat-card-content>
+        <a [aria-label]="'Direct link to module of poll' | translate" [routerLink]="getDetailLink()">
+            <h1>{{ poll()?.title }}</h1>
+        </a>
+        <mat-card-content>
+            <div class="poll-title-wrapper">
+                <div class="italic spacer-bottom-20">
+                    <!-- Type and State -->
+                    <div class="type-and-state italic spacer-bottom-20 break-word">
+                        <span>
+                            <os-icon-container
+                                class="poll-type break-word"
+                                color="primary"
+                                icon="info"
+                                size="large"
+                                [showIcon]="poll().isAnonymous"
+                                [swap]="true"
+                            >
+                                {{ poll().visibility | translateKey: 'poll_visibility' }}
+                            </os-icon-container>
+                            @if (poll().isAnonymous) {
+                                <span>&nbsp;</span>
+                            }
+                            &middot;&nbsp;
+                        </span>
+                        <!-- State -->
+                        <span class="break-word">
+                            @if (poll().isEVoting && poll().canBeVotedFor()) {
+                                {{ 'Voting in progress' | translate }}
+                            } @else if (poll().isFinished && poll().published) {
+                                {{ 'published' | translate }}
+                            } @else {
+                                {{ poll().state | translateKey: 'poll_state' }}
+                            }
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div>Candidate table</div>
+            <div>Single votes / entitled users tabs</div>
+        </mat-card-content>
+    </mat-card-content>
+</mat-card>
+<mat-card class="os-card">
+    <mat-card-content><os-poll [poll]="poll()"></os-poll></mat-card-content>
+</mat-card>

client/src/app/site/pages/meetings/modules/poll/components/poll-detail/poll-detail.component.ts

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, computed, inject, Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { map } from 'rxjs';
+import { BaseComponent } from 'src/app/site/base/base.component';
+import { HeadBarModule } from 'src/app/ui/modules/head-bar';
+import { IconContainerComponent } from 'src/app/ui/modules/icon-container';
+import { PipesModule } from 'src/app/ui/pipes';
+
+import { ViewPoll } from '../../../../pages/polls';
+import { PollControllerService } from '../../services/poll-controller.service';
+import { VotingService } from '../../services/voting.service';
+import { PollComponent } from '../poll/poll.component';
+
+@Component({
+    selector: `os-poll-detail`,
+    templateUrl: `./poll-detail.component.html`,
+    styleUrls: [`../poll/poll.component.scss`],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        PollComponent,
+        IconContainerComponent,
+        TranslatePipe,
+        HeadBarModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatCheckboxModule,
+        MatSelectModule,
+        MatCardModule,
+        MatTooltipModule,
+        RouterLink,
+        PipesModule
+    ]
+})
+export class PollDetailComponent extends BaseComponent {
+    public poll: Signal<ViewPoll>;
+
+    public getDetailLink = computed(() => {
+        return `/${this.poll().getDetailStateUrl()}`;
+    });
+
+    public override translate = inject(TranslateService);
+    public pollRepo = inject(PollControllerService);
+    public votingService = inject(VotingService);
+    private activatedRoute = inject(ActivatedRoute);
+
+    public constructor() {
+        super();
+        super.setTitle(`Singular poll`);
+        this.poll = toSignal(
+            this.pollRepo.getViewModelObservable(toSignal(this.activatedRoute.params.pipe(map(p => p['id'])))())
+        );
+    }
+}

client/src/app/site/pages/meetings/pages/polls/modules/poll-list/components/poll-list/poll-list.component.html → client/src/app/site/pages/meetings/modules/poll/components/poll-list/poll-list.component.html

@@ -1,6 +1,6 @@
 <os-head-bar>
     <div class="title-slot">
-        <h1 class="mock-h2" translate>List of electronic votes</h1>
+        <h1 class="mock-h2">{{ 'List of electronic votes' | translate }}</h1>
     </div>
 </os-head-bar>
 
@@ -13,10 +13,7 @@ <h1 class="mock-h2" translate>List of electronic votes</h1>
 >
     <!-- Poll Title -->
     <div *osScrollingTableCell="'title'; row as poll; rowContext as context" class="cell-slot fill">
-        @if (!isMultiSelect) {
-            <os-detail-view-navigator [model]="poll"></os-detail-view-navigator>
-        }
-        <span>{{ poll.title }}</span>
+        <a class="detail-link" [routerLink]="poll.id">{{ poll.title }}</a>
     </div>
 
     <!-- Motion Or Assigmnent Title Title -->

client/src/app/site/pages/meetings/modules/poll/components/poll-list/poll-list.component.scss

@@ -0,0 +1,11 @@
+.detail-link {
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.detail-link:hover {
+    text-decoration: none;
+    cursor: pointer;
+}

client/src/app/site/pages/meetings/modules/poll/components/poll-list/poll-list.component.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { PollState } from 'src/app/domain/models/poll/poll-constants';
+import { BaseMeetingListViewComponent } from 'src/app/site/pages/meetings/base/base-meeting-list-view.component';
+import { PollControllerService } from 'src/app/site/pages/meetings/modules/poll/services/poll-controller.service/poll-controller.service';
+import { VotingService } from 'src/app/site/pages/meetings/modules/poll/services/voting.service';
+import { HeadBarModule } from 'src/app/ui/modules/head-bar';
+import { TranslateKeyPipe } from 'src/app/ui/pipes/translate-key/translate-key.pipe';
+
+import { ViewPoll } from '../../../../pages/polls';
+import { PollListFilterService } from '../../../../pages/polls/services/poll-list-filter.service/poll-list-filter.service';
+import { DetailViewModule } from '../../../meetings-component-collector/detail-view/detail-view.module';
+import { ProjectableListModule } from '../../../meetings-component-collector/projectable-list/projectable-list.module';
+
+const POLL_LIST_STORAGE_INDEX = `polls`;
+
+@Component({
+    selector: `os-poll-list`,
+    templateUrl: `./poll-list.component.html`,
+    styleUrls: [`./poll-list.component.scss`],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        HeadBarModule,
+        DetailViewModule,
+        ProjectableListModule,
+        TranslateKeyPipe,
+        RouterLink,
+        TranslatePipe,
+        MatIconModule,
+        MatTooltipModule
+    ]
+})
+export class PollListComponent extends BaseMeetingListViewComponent<ViewPoll> {
+    public filterProps = [`title`, `state`];
+
+    public override translate = inject(TranslateService);
+    public pollRepo = inject(PollControllerService);
+    public votingService = inject(VotingService);
+    public filterService = inject(PollListFilterService);
+
+    public constructor() {
+        super();
+        super.setTitle(`List of electronic votes`);
+        this.listStorageIndex = POLL_LIST_STORAGE_INDEX;
+    }
+
+    /**
+     * TODO: Can be removed, when OpenSlides/openslides-autoupdate-service#262 is resolved.
+     */
+    public canBeVoteFor(poll: ViewPoll): boolean {
+        if (poll.state === PollState.Finished) {
+            return false;
+        }
+
+        return poll.canBeVotedFor();
+    }
+}

client/src/app/site/pages/meetings/modules/poll/components/poll/poll.component.html

@@ -4,7 +4,7 @@
     <div class="poll-title-area">
         <!-- Title -->
         <span class="poll-title break-word">
-            @if (isSameMeeting() && getDetailLink()) {
+            @if (isSameMeeting() && getDetailLink() && !isDetailLink()) {
                 <a [routerLink]="getDetailLink()">
                     {{ poll().title | translate }}
                 </a>

client/src/app/site/pages/meetings/modules/poll/components/poll/poll.component.ts

@@ -67,6 +67,19 @@ export class PollComponent extends BaseMeetingComponent {
         return this.poll().meeting_id === this.currentMeetingId();
     });
 
+    public getDetailLink = computed(() => {
+        // TODO: new permissions
+        if (this.operator.hasPerms(this.permission.pollCanManage)) {
+            return `/${this.poll().meeting_id}/polls/${this.poll().id}`;
+        }
+
+        return null;
+    });
+
+    public isDetailLink = computed(() => {
+        return window.location.pathname === this.getDetailLink();
+    });
+
     public pollStateAction: Signal<PollStateAction | null> = computed(() => {
         return this.pollStateActions[this.poll().state] ?? null;
     });
@@ -75,11 +88,6 @@ export class PollComponent extends BaseMeetingComponent {
         return this.poll().isPublished || (this.poll().isCreated && this.poll().visibility === PollVisibility.Manually);
     });
 
-    public getDetailLink(): string {
-        // TODO: Implement
-        return ``;
-    }
-
     private pollStateActions: Record<PollState, PollStateAction> = {
         [PollState.Created]: {
             icon: `play_arrow`,

client/src/app/site/pages/meetings/pages/polls/polls-routing.module.ts

@@ -11,7 +11,15 @@ const routes: Routes = [
             {
                 path: ``,
                 pathMatch: `full`,
-                loadChildren: () => import(`./modules/poll-list/poll-list.module`).then(m => m.PollListModule)
+                loadComponent: () =>
+                    import('../../modules/poll/components/poll-list/poll-list.component').then(m => m.PollListComponent)
+            },
+            {
+                path: `:id`,
+                loadComponent: () =>
+                    import('../../modules/poll/components/poll-detail/poll-detail.component').then(
+                        m => m.PollDetailComponent
+                    )
             }
         ]
     }

client/src/app/site/pages/meetings/pages/polls/polls.module.ts

@@ -7,6 +7,6 @@ import { PollsRoutingModule } from './polls-routing.module';
 
 @NgModule({
     declarations: [PollMainComponent],
-    imports: [CommonModule, PollsRoutingModule, RouterModule]
+    imports: [PollsRoutingModule, RouterModule, CommonModule]
 })
 export class PollsModule {}

client/src/app/site/pages/meetings/pages/polls/modules/poll-list/services/poll-list-filter.service/poll-list-filter.service.ts → client/src/app/site/pages/meetings/pages/polls/services/poll-list-filter.service/poll-list-filter.service.ts

@@ -4,7 +4,7 @@ import { PollState } from 'src/app/domain/models/poll/poll-constants';
 import { BaseFilterListService, OsFilter } from 'src/app/site/base/base-filter.service';
 import { ActiveFiltersService } from 'src/app/site/services/active-filters.service';
 
-import { ViewPoll } from '../../../../view-models';
+import { ViewPoll } from '../../view-models';
 
 @Injectable({
     providedIn: 'root'