tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

manage consultation path

Browse Source
This commit is contained in:
Tykayn 2021-04-21 12:43:05 +02:00 committed by tykayn
parent 3850f3811c
commit 6cb32cb2e1
5 changed files with 94 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/core/components/home/home.component.html
View File

@ -13,6 +13,28 @@
| translate
}}
</blockquote>
<div class="demo" *ngIf="!env.production">
Environnement de développement: voici des liens de démonstration issus des fixtures Doctrine de
date-poll-api.
<button class="btn is-primary" [routerLink]="['/poll/aujourdhui-ou-demain/consultation']">
consulter le sondage
<strong>
aujourdhui-ou-demain
</strong>
</button>
<button
class="btn is-primary"
routerLink="/poll/citron/consultation/9199bdd9e0d4b29deafbf3463c0727fc"
>
consulter le sondage
<strong>
citron
</strong>
avec son hash md5 de mot de passe intégré
</button>
</div>
<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image WIP" />
</div>
<div class="columns">

3
src/app/features/consultation/consultation-routing.module.ts
View File

@ -4,7 +4,8 @@ import { RouterModule, Routes } from '@angular/router';
import { ConsultationComponent } from './consultation.component';
const routes: Routes = [
{ path: '', component: ConsultationComponent }
{ path: '', component: ConsultationComponent },
{ path: '/:hash', component: ConsultationComponent },
];
@NgModule({

70
src/app/features/consultation/consultation.component.html
View File

@ -1,45 +1,47 @@
<div class="columns">
<div class="column has-text-centered">
<h1>Consultation</h1>
<h1>Consultation de {{ pollSlug }}</h1>
</div>
</div>
<div class="columns">
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">{{ poll.title }}</p>
<!-- <p class="card-header-icon">author : {{ poll.owner?.pseudo }}</p>-->
</header>
<div class="card-content">
<div class="content">
<p>{{ poll.description }}</p>
<div class="buttons has-addons is-small is-right">
<button class="button" [class.is-active]="isCompactMode" (click)="isCompactMode = true">
Compact
</button>
<button class="button" [class.is-active]="!isCompactMode" (click)="isCompactMode = false">
Detailed
</button>
<section class="loading_poll" *ngIf="fetching"></section>
<section class="poll_loaded" *ngIf="!fetching && poll">
<div class="columns">
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">{{ poll.title }}</p>
<!-- <p class="card-header-icon">author : {{ poll.owner?.pseudo }}</p>-->
</header>
<div class="card-content">
<div class="content">
<p>{{ poll.description }}</p>
<div class="buttons has-addons is-small is-right">
<button class="button" [class.is-active]="isCompactMode" (click)="isCompactMode = true">
Compact
</button>
<button class="button" [class.is-active]="!isCompactMode" (click)="isCompactMode = false">
Detailed
</button>
</div>
<app-poll-results-compact *ngIf="isCompactMode" [poll]="poll"></app-poll-results-compact>
<app-poll-results-detailed *ngIf="!isCompactMode" [poll]="poll"></app-poll-results-detailed>
</div>
<app-poll-results-compact *ngIf="isCompactMode" [poll]="poll"></app-poll-results-compact>
<app-poll-results-detailed *ngIf="!isCompactMode" [poll]="poll"></app-poll-results-detailed>
</div>
<footer class="card-footer" *ngIf="!isArchived">
<a routerLink="{{ '../../../poll/' + poll.slug + '/participation' }}" class="card-footer-item">
Participer
</a>
<a routerLink="{{ '../../../poll/' + poll.slug + '/administration' }}" class="card-footer-item">
Administrer
</a>
</footer>
</div>
<footer class="card-footer" *ngIf="!isArchived">
<a routerLink="{{ '../../../poll/' + poll.slug + '/participation' }}" class="card-footer-item">
Participer
</a>
<a routerLink="{{ '../../../poll/' + poll.slug + '/administration' }}" class="card-footer-item">
Administrer
</a>
</footer>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<app-comments></app-comments>
<div class="columns">
<div class="column">
<app-comments></app-comments>
</div>
</div>
</div>
</section>

47
src/app/features/consultation/consultation.component.ts
View File

@ -1,12 +1,9 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { PollConfiguration } from '../../core/models/configuration.model';
import { Poll } from '../../core/models/poll.model';
import { ModalService } from '../../core/services/modal.service';
import { UserService } from '../../core/services/user.service';
import { SettingsComponent } from '../../shared/components/settings/settings.component';
import { PollService } from '../../core/services/poll.service';
@Component({
selector: 'app-consultation',
@ -16,28 +13,50 @@ import { SettingsComponent } from '../../shared/components/settings/settings.com
export class ConsultationComponent implements OnInit, OnDestroy {
public isCompactMode = true;
public poll: Poll;
public pollSlug: string;
public passHash: string;
public fetching: boolean = true;
public isArchived: boolean;
private routeSubscription: Subscription;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private userService: UserService,
private _Activatedroute: ActivatedRoute,
public pollService: PollService,
private modalService: ModalService
) {}
ngOnInit(): void {
if (!this.userService.isCurrentUserIdentifiable()) {
this.modalService.openModal(SettingsComponent);
}
this.routeSubscription = this.activatedRoute.data.subscribe((data: { poll: Poll }) => {
if (data.poll) {
this.poll = data.poll;
this.isArchived = PollConfiguration.isArchived(data.poll.configuration);
console.log('constultation de poll');
this.pollService.poll.subscribe((newpoll: Poll) => {
this.poll = newpoll;
});
this._Activatedroute.paramMap.subscribe((params) => {
console.log('params', params);
this.pollSlug = params.get('slug');
this.passHash = params.get('hash');
if (this.passHash) {
this.pollService.loadPollBySlugWithPasswordHash(this.pollSlug, this.passHash);
} else {
this.router.navigate(['/page-not-found']);
this.pollService.loadPollBySlug(this.pollSlug).then((resp) => {
console.log('resp', resp);
this.fetching = false;
});
}
});
// if (!this.userService.isCurrentUserIdentifiable()) {
// this.modalService.openModal(SettingsComponent);
// }
// this.routeSubscription = this.activatedRoute.data.subscribe((data: { poll: Poll }) => {
// if (data.poll) {
// this.poll = data.poll;
// this.isArchived = PollConfiguration.isArchived(data.poll.configuration);
// } else {
// this.router.navigate(['/page-not-found']);
// }
// });
}
ngOnDestroy(): void {

2
src/app/routes-framadate.ts
View File

@ -30,7 +30,7 @@ export const routes: Routes = [
{
path: 'poll/:slug/consultation',
loadChildren: () => import('./features/consultation/consultation.module').then((m) => m.ConsultationModule),
resolve: { poll: PollService },
// resolve: { poll: PollService },
},
{
path: 'poll/:slug/participation',