Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

add comment on display

Browse Source
This commit is contained in:
Tykayn 2021-04-26 10:32:42 +02:00 committed by tykayn
parent 215178efa9
commit 078f63f742
7 changed files with 120 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
proxy.conf.json
View File

@ -1,11 +0,0 @@
{
"/api/v1/*": {
"target": "http://localhost:8000",
"secure": false,
"pathRewrite": {
"^/api/v1": ""
},
"changeOrigin": false,
"logLevel": "debug"
}
}

2
src/app/core/models/poll.model.ts
View File

@ -11,6 +11,8 @@ export class Poll {
public slug: string = '',
public title: string = 'mon titre',
public description?: string,
public expiracy_date?: string,
public creation_date?: string,
public creatorPseudo?: string,
public creatorEmail?: string,
public allowSeveralHours?: boolean,

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

@ -1,9 +1,18 @@
<section class="loading_poll" *ngIf="fetching"></section>
<section class="poll_loaded padded" *ngIf="!fetching && poll">
<div class="alert alert-info" *ngIf="poll.votes.length == 0">
aucun vote pour le moment
</div>
<!-- messages-->
<article class="message is-warning" *ngIf="isArchived">
<div class="message-body">
⚰️ Ce sondage a expiré, il n'est plus possible d'y ajouter de votes ou de commentaires
</div>
</article>
<article class="message is-info" *ngIf="poll.votes.length == 0">
<div class="message-body">
aucun vote pour le moment
</div>
</article>
<!-- affichage des possibilités de réponse -->
<div class="columns">
<div class="column">
<div class="card">
@ -30,18 +39,13 @@
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>
<!-- <app-poll-results-compact *ngIf="isCompactMode" [poll]="poll"></app-poll-results-compact>-->
<!-- <app-poll-results-detailed *ngIf="!isCompactMode" [poll]="poll"></app-poll-results-detailed>-->
<!-- comments-->
</div>
</div>
<footer class="card-footer" *ngIf="!isArchived">
TODO links
<!-- <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>
@ -49,7 +53,7 @@
<div class="columns">
<div class="column">
<app-comments></app-comments>
<app-comments [poll]="poll"></app-comments>
</div>
</div>
</section>

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

@ -4,6 +4,7 @@ import { Subscription } from 'rxjs';
import { Poll } from '../../core/models/poll.model';
import { ModalService } from '../../core/services/modal.service';
import { PollService } from '../../core/services/poll.service';
import { DateService } from '../../core/services/date.service';
@Component({
selector: 'app-consultation',
@ -15,7 +16,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
public poll: Poll;
public pollSlug: string;
public passHash: string;
public fetching: boolean = true;
public fetching = true;
public isArchived: boolean;
private routeSubscription: Subscription;
@ -23,6 +24,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
private router: Router,
private _Activatedroute: ActivatedRoute,
public pollService: PollService,
public dateService: DateService,
private modalService: ModalService
) {}
@ -30,6 +32,9 @@ export class ConsultationComponent implements OnInit, OnDestroy {
console.log('constultation de poll');
this.pollService.poll.subscribe((newpoll: Poll) => {
this.poll = newpoll;
if (newpoll) {
this.isArchived = new Date(newpoll.expiracy_date) < new Date();
}
});
this._Activatedroute.paramMap.subscribe((params) => {
@ -46,18 +51,6 @@ export class ConsultationComponent implements OnInit, OnDestroy {
});
}
});
// 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 {

81
src/app/shared/components/comments/comments.component.html
View File

@ -1,9 +1,74 @@
<article class="message is-primary is-small" *ngFor="let comment of (_poll | async)?.comments">
<div class="message-header">
<p>{{ comment.author }}</p>
<span class="tag is-info is-light">{{ comment.dateCreated | date: 'medium' }}</span>
<div class="comments" id="comments">
<h2 class="margin-top-x7">Laisser un commentaire</h2>
<article class="message">
<div class="message-header">
<div class="field">
<span class="control has-icons-left has-icons-right">
<input
type="email"
name="cremail"
id="email_comment"
[(ngModel)]="config.myEmail"
placeholder="chuck@norris.com"
required="required"
/>
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</span>
<span class="control has-icons-left">
<input
type="text"
class="margin-btm-x3"
name="crname"
[(ngModel)]="config.myName"
id="crname"
placeholder="pseudo"
required="required"
/>
<span class="icon is-small is-left">
<i class="fa fa-user"></i>
</span>
</span>
</div>
<!-- <label for="crname"><i class="fa fa-user" aria-hidden="true"></i> Votre nom / pseudo :</label>-->
<!-- <label for="cremail"><i class="fa fa-envelope" aria-hidden="true"></i> Votre email :</label>-->
</div>
<div class="message-body">
<label for="comment">Votre commentaire :</label>
<br />
<textarea name="comment" id="comment" [(ngModel)]="config.myComment"> </textarea>
<input
type="submit"
name="add-comment"
class="btn btn--primary btn--outline"
value="Ajouter mon commentaire ✉️"
(click)="addComment()"
/>
</div>
</article>
<div class="comments-part" *ngIf="poll && poll.comments">
<h2 class="title is-2">{{ poll.comments.length }} Commentaires</h2>
<article class="message" *ngFor="let comment of poll.comments">
<div class="message-header">
<p>
<em class="cname"> {{ comment.pseudo }} </em>, le
<span class="date-days-ago">
il y a
{{ calculateDaysAgoOfComment(comment.owner.created_at) }} jours, le </span
><span class="date"> {{ comment.owner.created_at }} </span>
</p>
</div>
<div class="message-body">
<p class="text">
{{ comment.text }}
</p>
</div>
</article>
</div>
<div class="message-body">
{{ comment.content }}
</div>
</article>
</div>

27
src/app/shared/components/comments/comments.component.ts
View File

@ -1,8 +1,6 @@
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Poll } from '../../../core/models/poll.model';
import { Component, Input } from '@angular/core';
import { PollService } from '../../../core/services/poll.service';
import * as moment from 'moment';
@Component({
selector: 'app-comments',
@ -10,7 +8,26 @@ import { PollService } from '../../../core/services/poll.service';
styleUrls: ['./comments.component.scss'],
})
export class CommentsComponent {
public _poll: Observable<Poll> = this.pollService.poll;
@Input() public poll: any;
public config: any = {
myName: '',
myEmail: '',
myComment: '',
};
constructor(private pollService: PollService) {}
calculateDaysAgoOfComment(dateAsString) {
let numberOfDays = 0;
if (dateAsString && dateAsString) {
numberOfDays = moment(new Date()).diff(moment(new Date(dateAsString)), 'days');
}
return numberOfDays;
}
addComment() {
alert('TODO');
}
}

2
src/proxy.conf.json
View File

@ -1,6 +1,6 @@
{
"/api/*": {
"target": "http://localhost:3001",
"target": "http://localhost:8000/api",
"secure": false,
"logLevel": "debug"
}