From 8ad4d6a253f5f590c870bbc536aa10c4011e446c Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Mon, 10 Feb 2020 18:33:25 +0100
Subject: [PATCH] FEAT #12072 TIME 2:30 begin front sended resource page
creation + add tiny mce angular plugin
---
src/frontend/app/app-common.module.ts | 6 +-
src/frontend/app/app.module.ts | 7 +-
.../sended-resource-list.component.html | 3 +
.../sended-resource-list.component.scss | 8 ++
.../sended-resource-list.component.ts | 5 ++
.../sended-resource-page.component.html | 77 ++++++++++++++++
.../sended-resource-page.component.scss | 22 +++++
.../sended-resource-page.component.ts | 90 +++++++++++++++++++
8 files changed, 215 insertions(+), 3 deletions(-)
create mode 100644 src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.html
create mode 100644 src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.scss
create mode 100644 src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.ts
diff --git a/src/frontend/app/app-common.module.ts b/src/frontend/app/app-common.module.ts
index c60f9cd7a6d..22129627f8e 100755
--- a/src/frontend/app/app-common.module.ts
+++ b/src/frontend/app/app-common.module.ts
@@ -24,6 +24,8 @@ import { TimeLimitPipe } from '../plugins/timeLimit.pipe'
import { FilterListPipe } from '../plugins/filterList.pipe';
import { FullDatePipe } from '../plugins/fullDate.pipe';
import { EcplOnlyofficeViewerComponent } from '../plugins/onlyoffice-api-js/onlyoffice-viewer.component';
+import { EditorModule } from '@tinymce/tinymce-angular';
+
/*FRONT IMPORTS*/
import { AppMaterialModule } from './app-material.module';
@@ -92,7 +94,8 @@ export class MyHammerConfig extends HammerGestureConfig {
PdfViewerModule,
NgStringPipesModule,
AppMaterialModule,
- DragDropModule
+ DragDropModule,
+ EditorModule
],
declarations: [
MainHeaderComponent,
@@ -160,6 +163,7 @@ export class MyHammerConfig extends HammerGestureConfig {
SmdFabSpeedDialTrigger,
SmdFabSpeedDialActions,
DragDropModule,
+ EditorModule,
PluginAutocomplete,
IndexingFormComponent,
FieldListComponent,
diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
index 47497af1cd2..ec28b337b78 100755
--- a/src/frontend/app/app.module.ts
+++ b/src/frontend/app/app.module.ts
@@ -108,6 +108,7 @@ import { LinkResourceModalComponent } from './linkedResource/linkResourceModal/l
import { DocumentViewerModalComponent } from './viewer/modal/document-viewer-modal.component';
import { SendedResourceListComponent } from './sendedResource/sended-resource-list.component';
+import { SendedResourcePageComponent } from './sendedResource/sended-resource-page/sended-resource-page.component';
@@ -205,7 +206,8 @@ import { SendedResourceListComponent } from './sendedResource/sended-resource-li
LinkedResourceListComponent,
LinkResourceModalComponent,
DocumentViewerModalComponent,
- SendedResourceListComponent
+ SendedResourceListComponent,
+ SendedResourcePageComponent
],
entryComponents: [
ConfirmModalComponent,
@@ -251,7 +253,8 @@ import { SendedResourceListComponent } from './sendedResource/sended-resource-li
AddVisaModelModalComponent,
AddAvisModelModalComponent,
LinkResourceModalComponent,
- DocumentViewerModalComponent
+ DocumentViewerModalComponent,
+ SendedResourcePageComponent
],
providers: [ FiltersListService, FoldersService, ActionsService, PrivilegeService ],
bootstrap: [ AppComponent ]
diff --git a/src/frontend/app/sendedResource/sended-resource-list.component.html b/src/frontend/app/sendedResource/sended-resource-list.component.html
index 7b085caa7f0..69f6ad73f23 100644
--- a/src/frontend/app/sendedResource/sended-resource-list.component.html
+++ b/src/frontend/app/sendedResource/sended-resource-list.component.html
@@ -63,4 +63,7 @@
</ng-container>
<mat-row *matRowDef="let row; columns: displayedColumns;" style="cursor: pointer;"></mat-row>
</mat-table>
+ <button mat-fab class="addSendedResource" color="primary" [title]="lang.addAttachment" (click)="openPromptMail()">
+ <mat-icon class="fa fa-plus"></mat-icon>
+ </button>
</ng-template>
\ No newline at end of file
diff --git a/src/frontend/app/sendedResource/sended-resource-list.component.scss b/src/frontend/app/sendedResource/sended-resource-list.component.scss
index cf492bb3946..5cbda1e3019 100644
--- a/src/frontend/app/sendedResource/sended-resource-list.component.scss
+++ b/src/frontend/app/sendedResource/sended-resource-list.component.scss
@@ -112,4 +112,12 @@
flex: 1;
cursor: help;
}
+}
+
+.addSendedResource {
+ position: sticky;
+ bottom: 5px;
+ z-index: 2;
+ bottom: 10px;
+ margin-left: 10px;
}
\ No newline at end of file
diff --git a/src/frontend/app/sendedResource/sended-resource-list.component.ts b/src/frontend/app/sendedResource/sended-resource-list.component.ts
index a58a22b34f7..3289ddc3809 100644
--- a/src/frontend/app/sendedResource/sended-resource-list.component.ts
+++ b/src/frontend/app/sendedResource/sended-resource-list.component.ts
@@ -8,6 +8,7 @@ import { takeUntil, startWith, switchMap, map, catchError, filter, exhaustMap, t
import { FormControl } from '@angular/forms';
import { FunctionsService } from '../../service/functions.service';
import { PrivilegeService } from '../../service/privileges.service';
+import { SendedResourcePageComponent } from './sended-resource-page/sended-resource-page.component';
@Component({
selector: 'app-sended-resource-list',
@@ -188,4 +189,8 @@ export class SendedResourceListComponent implements OnInit {
this.currentFilter = ev.value;
this.dataSource.filter = ev.value;
}
+
+ openPromptMail() {
+ this.dialog.open(SendedResourcePageComponent, { data: { title: `Toto`, resId: this.resId } });
+ }
}
\ No newline at end of file
diff --git a/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.html b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.html
new file mode 100644
index 00000000000..b6710789216
--- /dev/null
+++ b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.html
@@ -0,0 +1,77 @@
+<h1 mat-dialog-title>
+ <span style="flex: 1;">
+ Envoyer un élement
+ </span>
+ <button [title]="lang.close" mat-icon-button (click)="dialogRef.close();">
+ <mat-icon class="fa fa-times"></mat-icon>
+ </button></h1>
+<mat-dialog-content class="modal-container">
+ <mat-form-field>
+ <span matPrefix>De : </span>
+ <mat-select>
+ <mat-option *ngFor="let email of availableSenders" [value]="email">
+ {{email}}
+ </mat-option>
+ </mat-select>
+ <button mat-button matSuffix>Cc</button>
+ <button mat-button matSuffix>Cci</button>
+ </mat-form-field>
+
+ <mat-form-field>
+ <span matPrefix>À : </span>
+ <mat-chip-list #chipList>
+ <mat-chip class="recipients" *ngFor="let recipient of recipients" [selectable]="selectable" removable (removed)="remove(recipient, 'recipients')">
+ {{recipient}}
+ <mat-icon matChipRemove class="fa fa-times"></mat-icon>
+ </mat-chip>
+ <input [formControl]="recipientsInput" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+ [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="add($event, 'recipients')">
+ </mat-chip-list>
+ </mat-form-field>
+
+ <mat-form-field>
+ <span matPrefix>Cc : </span>
+ <mat-chip-list #chipList aria-label="Fruit selection">
+ <mat-chip class="copy" *ngFor="let copy of copies" [selectable]="selectable" removable (removed)="remove(copy, 'copies')">
+ {{copy}}
+ <mat-icon matChipRemove class="fa fa-times"></mat-icon>
+ </mat-chip>
+ <input [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+ [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="add($event, 'copies')">
+ </mat-chip-list>
+ </mat-form-field>
+
+ <mat-form-field>
+ <span matPrefix>Cci : </span>
+ <mat-chip-list #chipList aria-label="Fruit selection">
+ <mat-chip class="copy" *ngFor="let invCopy of invisibleCopies" [selectable]="selectable" removable (removed)="remove(invCopy, 'invisibleCopies')">
+ {{invCopy}}
+ <mat-icon matChipRemove class="fa fa-times"></mat-icon>
+ </mat-chip>
+ <input [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+ [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="add($event, 'invisibleCopies')">
+ </mat-chip-list>
+ </mat-form-field>
+
+ <mat-form-field floatLabel="never">
+ <input matInput placeholder="Sujet">
+ </mat-form-field>
+
+
+ <editor [init]="{
+ height: 500,
+ menubar: false,
+ plugins: [
+ 'advlist autolink lists link image charmap print preview anchor',
+ 'searchreplace visualblocks code fullscreen',
+ 'insertdatetime media table paste code help wordcount'
+ ],
+ toolbar:
+ 'undo redo | formatselect | bold italic backcolor | \
+ alignleft aligncenter alignright alignjustify | \
+ bullist numlist outdent indent | removeformat'
+ }"></editor>
+</mat-dialog-content>
+<div mat-dialog-actions class="actions">
+ <button mat-raised-button color="primary" (click)="onSubmit()">{{lang.validate}}</button>
+</div>
\ No newline at end of file
diff --git a/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.scss b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.scss
new file mode 100644
index 00000000000..7c7710d990f
--- /dev/null
+++ b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.scss
@@ -0,0 +1,22 @@
+@import '../../../css/vars.scss';
+
+.mat-dialog-title {
+ display: flex;
+ align-items: center;
+}
+
+.recipients,
+.copy {
+ font-size: 10px !important;
+ font-size: 10px;
+ padding: 5px !important;
+ min-height: auto;
+ height: auto;
+ border-radius: 5px;
+
+ .mat-icon {
+ width: auto;
+ font-size: 12px;
+ height: auto;
+ }
+}
\ No newline at end of file
diff --git a/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.ts b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.ts
new file mode 100644
index 00000000000..1aa73a7ee9c
--- /dev/null
+++ b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.ts
@@ -0,0 +1,90 @@
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { Component, OnInit, ViewChild, EventEmitter, ElementRef, Input, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LANG } from '../../translate.component';
+import { NotificationService } from '../../notification.service';
+import { Observable, merge, Subject, of as observableOf, of } from 'rxjs';
+import { MatPaginator, MatSort, MatDialog, MatTableDataSource, MAT_DIALOG_DATA, MatDialogRef, MatChipInputEvent } from '@angular/material';
+import { takeUntil, startWith, switchMap, map, catchError, filter, exhaustMap, tap, debounceTime, distinctUntilChanged, finalize } from 'rxjs/operators';
+import { FormControl } from '@angular/forms';
+
+@Component({
+ selector: 'app-sended-resource-page',
+ templateUrl: "sended-resource-page.component.html",
+ styleUrls: ['sended-resource-page.component.scss'],
+})
+export class SendedResourcePageComponent implements OnInit {
+
+ lang: any = LANG;
+ loading: boolean = true;
+
+ readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+
+ availableSenders: any[] = ['alex.orluc@maarch.org', 'support@maarch.org'];
+
+ recipients: any[] = [];
+
+ copies: any[] = [];
+
+ invisibleCopies: any[] = [];
+
+ fruits: any[] = [];
+
+ recipientsInput: FormControl = new FormControl();
+
+ constructor(
+ public http: HttpClient,
+ private notify: NotificationService,
+ @Inject(MAT_DIALOG_DATA) public data: any,
+ public dialogRef: MatDialogRef<SendedResourcePageComponent>,
+ ) { }
+
+ async ngOnInit(): Promise<void> {
+
+ this.loading = false;
+
+ this.initEmailsList();
+
+ }
+
+ add(event: MatChipInputEvent, type: string): void {
+ const input = event.input;
+ const value = event.value;
+
+ // Add our fruit
+ if ((value || '').trim()) {
+ this[type].push(value.trim());
+ }
+
+ // Reset the input value
+ if (input) {
+ input.value = '';
+ }
+ }
+
+ remove(item: any, type: string): void {
+
+ const index = this[type].indexOf(item);
+
+ if (index >= 0) {
+ this[type].splice(index, 1);
+ }
+ }
+
+ initEmailsList() {
+ this.recipientsInput.valueChanges.pipe(
+ debounceTime(300),
+
+ filter(value => value.length > 2),
+ tap(() => this.loading = true),
+ switchMap(data => this.http.get('../../rest/autocomplete/correspondents', { params: { "search": data , "searchEmails": 'true' } })),
+ tap((data: any) => {
+ console.log(data);
+ }),
+ catchError((err) => {
+ this.notify.handleErrors(err);
+ return of(false);
+ })
+ ).subscribe();
+ }
+}
\ No newline at end of file
--
GitLab