From 062540ed22ffe60aa2337d41135ef252713cfcf7 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Tue, 7 Jul 2020 17:51:15 +0200
Subject: [PATCH] FEAT #13671 TIME 5 begin feature tour
---
angular.json | 2 +-
package.json | 1 +
.../administration/administration.module.ts | 2 +
.../home/administration.component.html | 4 +-
.../home/administration.component.ts | 15 ++-
...otifications-administration.component.html | 8 +-
.../notifications-administration.component.ts | 20 ++++
src/frontend/app/app.module.ts | 3 +
src/frontend/lang/lang-fr.ts | 4 +-
src/frontend/service/featureTour.service.ts | 98 +++++++++++++++++++
10 files changed, 146 insertions(+), 11 deletions(-)
create mode 100644 src/frontend/service/featureTour.service.ts
diff --git a/angular.json b/angular.json
index 77f835ea67d..042dac9ae5a 100755
--- a/angular.json
+++ b/angular.json
@@ -33,7 +33,7 @@
"./node_modules/jstree-bootstrap-theme/dist/jstree.min.js",
"./node_modules/jquery.nicescroll/dist/jquery.nicescroll.min.js",
"./node_modules/tooltipster/dist/js/tooltipster.bundle.min.js",
- "node_modules/tinymce/tinymce.min.js"
+ "./node_modules/tinymce/tinymce.min.js"
],
"assets": [
"./src/frontend/assets",
diff --git a/package.json b/package.json
index 86a0294d9c3..f1039f48007 100755
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"license": "GPL-3.0",
"dependencies": {
"core-js": "^3.6.5",
+ "ngx-joyride": "^2.2.11",
"zone.js": "~0.10.2"
},
"devDependencies": {
diff --git a/src/frontend/app/administration/administration.module.ts b/src/frontend/app/administration/administration.module.ts
index 8dbd52df005..947df92a7a3 100755
--- a/src/frontend/app/administration/administration.module.ts
+++ b/src/frontend/app/administration/administration.module.ts
@@ -4,6 +4,7 @@ import { SharedModule } from '../app-common.module';
import { AdministrationRoutingModule } from './administration-routing.module';
// import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { JoyrideModule } from 'ngx-joyride';
import { DocumentViewerModule } from '../viewer/document-viewer.module';
@@ -67,6 +68,7 @@ import { UsersAdministrationComponent, UsersAdministrationRedirectModalComponent
imports: [
SharedModule,
// NgxChartsModule,
+ JoyrideModule.forChild(),
DocumentFormModule,
AdministrationRoutingModule,
DocumentViewerModule
diff --git a/src/frontend/app/administration/home/administration.component.html b/src/frontend/app/administration/home/administration.component.html
index cfd0866eca6..3fc96874ed3 100644
--- a/src/frontend/app/administration/home/administration.component.html
+++ b/src/frontend/app/administration/home/administration.component.html
@@ -5,7 +5,7 @@
<div class="bg-head-title-label">
<header-left></header-left>
</div>
- <div class="bg-head-title-tool">
+ <div class="bg-head-title-tool" stepNumber="1" joyrideStep="firstStep" title="demoTour" text="Hi, Welcome to demo tour">
<header-right></header-right>
</div>
</div>
@@ -34,7 +34,7 @@
</mat-form-field>
<div
style="margin: 20px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;padding:20px;padding-top:0px;margin-top:0px;">
- <button mat-button *ngFor="let administration of filteredAdministrations | async |Â sortBy : 'label'"
+ <button [joyrideStep]="administration.id" [text]="lang[administration.id+'Tour']" mat-button *ngFor="let administration of filteredAdministrations | async |Â sortBy : 'label'"
[title]="administration.comment" style="font-size:20px;height:80px;"
(click)="goToSpecifiedAdministration(administration)">
<div style="display: flex;align-items: center;">
diff --git a/src/frontend/app/administration/home/administration.component.ts b/src/frontend/app/administration/home/administration.component.ts
index fdfea72fee9..4148c3daaf4 100644
--- a/src/frontend/app/administration/home/administration.component.ts
+++ b/src/frontend/app/administration/home/administration.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { LANG } from '../../translate.component';
@@ -12,12 +12,13 @@ import { startWith, map, tap, catchError, exhaustMap } from 'rxjs/operators';
import { LatinisePipe } from 'ngx-pipes';
import { NotificationService } from '../../../service/notification/notification.service';
import { FunctionsService } from '../../../service/functions.service';
+import { FeatureTourService } from '../../../service/featureTour.service';
@Component({
templateUrl: 'administration.component.html',
styleUrls: ['administration.component.scss']
})
-export class AdministrationComponent implements OnInit {
+export class AdministrationComponent implements OnInit, AfterViewInit {
lang: any = LANG;
loading: boolean = false;
@@ -44,7 +45,9 @@ export class AdministrationComponent implements OnInit {
private privilegeService: PrivilegeService,
private latinisePipe: LatinisePipe,
private notify: NotificationService,
- private functionService: FunctionsService) { }
+ private functionService: FunctionsService,
+ private featureTourService: FeatureTourService
+ ) { }
ngOnInit(): void {
this.headerService.setHeader(this.lang.administration);
@@ -80,6 +83,12 @@ export class AdministrationComponent implements OnInit {
}, 0);
}
+ ngAfterViewInit(): void {
+ if (this.headerService.user.userId === 'superadmin') {
+ this.featureTourService.init();
+ }
+ }
+
goToSpecifiedAdministration(service: any): void {
if (service.angular === true) {
this.router.navigate([service.route]);
diff --git a/src/frontend/app/administration/notification/notifications-administration.component.html b/src/frontend/app/administration/notification/notifications-administration.component.html
index 3656fa70d3a..89fc6e42b3c 100755
--- a/src/frontend/app/administration/notification/notifications-administration.component.html
+++ b/src/frontend/app/administration/notification/notifications-administration.component.html
@@ -8,7 +8,7 @@
{{lang.add}}
</p>
</a>
- <a mat-list-item (click)="loadCron();snav2.toggle();">
+ <a mat-list-item (click)="loadCron();snav2.toggle();" (next)="loadCron();snav2.toggle()" joyrideStep="notifTour" [text]="'Cliquez ici pour plannifier une tâche éxistante. Plannifions <b>Notification de bannettes</b>'">
<mat-icon color="primary" mat-list-icon class="fa fa-clock"></mat-icon>
<p mat-line>
{{lang.toSchedule}}
@@ -94,8 +94,8 @@
</div>
</mat-sidenav-content>
<mat-sidenav #snav2 [mode]="appService.getViewMode() ? 'over' : 'side'" [fixedInViewport]="appService.getViewMode()"
- fixedTopGap="56" position='end' [opened]="appService.getViewMode() ? false : false">
- <mat-list>
+ fixedTopGap="56" position='end' [opened]="appService.getViewMode() ? false : false" (next)="paramCron()" stepPosition="center" joyrideStep="notifTour2" [text]="'Nous allons la plannifier pour chaque jour à 8h00 du lundi au vendredi'">
+ <mat-list (next)="saveCron()" joyrideStep="notifTour3" [text]="'Pouvez choisir différentes périodes pour paramétrer votre tâche'">
<h3 mat-subheader>{{lang.notificationSchedule}}</h3>
<form class="form-horizontal" #notifForm="ngForm" style="overflow:hidden;">
<div class="form-group" style="padding-left:15px;padding-right:15px;">
@@ -172,7 +172,7 @@
<div class="alert alert-info" role="alert" style="margin:15px;">
{{lang.NotificationScheduleInfo}}
</div>
- <mat-list>
+ <mat-list joyrideStep="notifTour4" [text]="'La liste de vos tâche actives apparait ici'">
<h3 mat-subheader>{{lang.activeCron}}</h3>
<mat-chip-list #chipList class="mat-chip-list-stacked">
<span *ngFor="let notif of crontab;let i = index">
diff --git a/src/frontend/app/administration/notification/notifications-administration.component.ts b/src/frontend/app/administration/notification/notifications-administration.component.ts
index 4640c1800e5..67e65708621 100755
--- a/src/frontend/app/administration/notification/notifications-administration.component.ts
+++ b/src/frontend/app/administration/notification/notifications-administration.component.ts
@@ -206,4 +206,24 @@ export class NotificationsAdministrationComponent implements OnInit {
this.notify.error(err.error.errors);
});
}
+
+ /* FEATURE TOUR */
+
+ onNext() {
+ console.log('next');
+ this.sidenavRight.open();
+ return false;
+ }
+
+ paramCron() {
+ this.newCron = {
+ 'm': '0',
+ 'h': '8',
+ 'dom': '*',
+ 'mon': '*',
+ 'cmd': '/var/www/html/maarch_courrier_develop/custom/cs_recette/bin/notification/scripts/notification_cs_recette_BASKETS.sh',
+ 'description': 'notification_cs_recette_BASKETS.sh',
+ 'state': 'normal'
+ };
+ }
}
diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
index 9f1408d4269..f99c072d43b 100755
--- a/src/frontend/app/app.module.ts
+++ b/src/frontend/app/app.module.ts
@@ -7,6 +7,8 @@ import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angu
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { JoyrideModule } from 'ngx-joyride';
+
import { ProcessModule } from './process/process.module';
import { DocumentViewerModule } from './viewer/document-viewer.module';
import { AppListModule } from './app-list.module';
@@ -65,6 +67,7 @@ export class MyHammerConfig extends HammerGestureConfig {
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
+ JoyrideModule.forRoot(),
SharedModule,
AppRoutingModule,
DocumentViewerModule,
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index def1fed9ca9..1768f3e8231 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -1831,5 +1831,7 @@ export const LANG_FR = {
"collaboraOnlineEditDenied": "Ce document ne peut pas être édité avec Collabora Online",
"collaboraOnlineEditDenied2": "ne peut pas être édité avec Collabora Online",
"documentEditor_collaboraonline": "Ouvre la suite Collabora Online directement dans l'application Maarch Courrier",
- "canUpdateResourcesInSignatureBook": "Pouvoir modifier les documents intégrés au parapheur"
+ "canUpdateResourcesInSignatureBook": "Pouvoir modifier les documents intégrés au parapheur",
+ "admin_email_serverTour": "Vous devez paramétrer un serveur de mail afin de pouvoir créer des utilisateurs ou d'activer les notifications.",
+ "admin_notifTour": "Nous vous conseillons de paramétrer les notifications de bannettes"
};
diff --git a/src/frontend/service/featureTour.service.ts b/src/frontend/service/featureTour.service.ts
new file mode 100644
index 00000000000..d2bd1ba64cd
--- /dev/null
+++ b/src/frontend/service/featureTour.service.ts
@@ -0,0 +1,98 @@
+import { Injectable } from '@angular/core';
+import { LANG } from '../app/translate.component';
+import { JoyrideService } from 'ngx-joyride';
+import { LocalStorageService } from './local-storage.service';
+import { HeaderService } from './header.service';
+import { FunctionsService } from './functions.service';
+import { Router } from '@angular/router';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class FeatureTourService {
+
+ lang: any = LANG;
+
+ currentStepType: string = '';
+
+ tour: any[] = [
+ {
+ type: 'notification',
+ stepId: 'admin_notif',
+ },
+ {
+ type: 'notification',
+ stepId: 'notifTour@administration/notifications',
+ },
+ {
+ type: 'notification',
+ stepId: 'notifTour2@administration/notifications',
+ },
+ {
+ type: 'notification',
+ stepId: 'notifTour3@administration/notifications',
+ },
+ {
+ type: 'notification',
+ stepId: 'notifTour4@administration/notifications',
+ },
+ {
+ type: 'email',
+ stepId: 'admin_email_server',
+ },
+ ];
+
+ featureTourEnd: any[] = [];
+
+ constructor(
+ private readonly joyrideService: JoyrideService,
+ private localStorage: LocalStorageService,
+ private headerService: HeaderService,
+ private functionService: FunctionsService,
+ private router: Router
+ ) {
+ this.getCurrentStepType();
+ }
+
+ init() {
+ if (!this.functionService.empty(this.currentStepType)) {
+ setTimeout(() => {
+ const steps = this.tour.filter(step => step.type === this.currentStepType).map(step => step.stepId);
+ this.joyrideService.startTour(
+ { steps: steps }
+ ).subscribe(
+ step => {
+ /*Do something*/
+ },
+ error => {
+ /*handle error*/
+ },
+ () => {
+ console.log('end tour');
+ this.router.navigate(['/administration']);
+ this.endTour();
+ }
+ );
+ /*this.joyrideService.startTour(
+ { steps: ['admin_email_server', 'admin_notif', 'notifTour@administration/notifications', 'notifTour2@administration/notifications', 'notifTour3@administration/notifications', 'notifTour4@administration/notifications', 'admin_users'] }
+ );*/
+ }, 500);
+ }
+ }
+
+ getCurrentStepType() {
+ if (this.localStorage.get(`featureTourEnd_${this.headerService.user.id}`) !== null) {
+ this.featureTourEnd = JSON.parse(this.localStorage.get(`featureTourEnd_${this.headerService.user.id}`));
+ }
+ const unique = [...new Set(this.tour.map(item => item.type))];
+
+ this.currentStepType = unique.filter(stepType => this.featureTourEnd.indexOf(stepType) === -1)[0];
+ }
+
+ endTour() {
+ this.featureTourEnd.push(this.currentStepType);
+ this.localStorage.save(`featureTourEnd_${this.headerService.user.id}`, JSON.stringify(this.featureTourEnd));
+ this.getCurrentStepType();
+ }
+
+}
--
GitLab