From bac18e9bb4dc75326c6f838199fce26e7e728f2b Mon Sep 17 00:00:00 2001 From: Soumya Prasad Rana Date: Thu, 9 Nov 2023 23:15:31 +0530 Subject: [PATCH] YORN DIALOG AND LOGIN VIEW CHANGE --- .../admin/admin-home/admin-home.component.ts | 135 ++++++++------ .../application-properties.component.ts | 27 ++- .../dynamic-objects.component.ts | 22 ++- .../admin/team-stats/team-stats.component.ts | 168 ++++++++++-------- .../dynamicobject-app-home.component.ts | 25 ++- .../home/home-page/home-page.component.ts | 46 +++-- .../login-view/login-view.component.html | 65 ++++++- .../login-view/login-view.component.scss | 5 + .../services/userdefinedfunctions.service.ts | 11 ++ .../tools-technotes.component.ts | 23 ++- src/app/public/vmm/add-vm/add-vm.component.ts | 17 ++ .../alert-dialog/alert-dialog.module.ts | 3 + .../snapshots-dialog.component.ts | 18 +- .../alert-dialog/yorn-dialog.component.html | 24 +++ .../alert-dialog/yorn-dialog.component.scss | 44 +++++ .../alert-dialog/yorn-dialog.component.ts | 55 ++++++ .../widget/animations/route-animations.ts | 134 ++++++-------- .../widget/footer/footer.component.html | 2 +- .../nav/side-nav/side-nav.component.html | 4 +- .../widget/nav/side-nav/side-nav.component.ts | 78 ++++---- .../nav/top-nav-docs/top-nav.component.html | 4 +- .../widget/nav/top-nav/top-nav.component.html | 4 +- src/assets/images/undraw_remotely_2j6y.svg | 1 + 23 files changed, 614 insertions(+), 301 deletions(-) create mode 100644 src/app/public/widget/alert-dialog/yorn-dialog.component.html create mode 100644 src/app/public/widget/alert-dialog/yorn-dialog.component.scss create mode 100644 src/app/public/widget/alert-dialog/yorn-dialog.component.ts create mode 100644 src/assets/images/undraw_remotely_2j6y.svg diff --git a/src/app/public/admin/admin-home/admin-home.component.ts b/src/app/public/admin/admin-home/admin-home.component.ts index b1139f9..31de22c 100644 --- a/src/app/public/admin/admin-home/admin-home.component.ts +++ b/src/app/public/admin/admin-home/admin-home.component.ts @@ -9,28 +9,29 @@ * @modify date 2022-02-26 18:26:41 * @desc Admin Home Component */ -import { Component, OnInit } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; -import { Router } from '@angular/router'; -import { AuthserviceService } from '../../services/authservice.service'; -import { NodeclientService } from '../../services/nodeclient.service'; -import { SpinnerService } from '../../services/spinner-service'; -import { TeamService } from '../../services/teams.service'; -import { UserService } from '../../services/users.service'; -import { AlertDialogComponent } from '../../widget/alert-dialog/alert-dialog.component'; -import { InputDialogComponent } from '../../widget/alert-dialog/input-dialog.component'; -import { ToastService } from '../../widget/toast/toast-service'; -import { AdminConfig } from '../admin.config'; +import { Component, OnInit } from "@angular/core"; +import { MatDialog } from "@angular/material/dialog"; +import { Router } from "@angular/router"; +import { AuthserviceService } from "../../services/authservice.service"; +import { NodeclientService } from "../../services/nodeclient.service"; +import { SpinnerService } from "../../services/spinner-service"; +import { TeamService } from "../../services/teams.service"; +import { UserService } from "../../services/users.service"; +import { AlertDialogComponent } from "../../widget/alert-dialog/alert-dialog.component"; +import { InputDialogComponent } from "../../widget/alert-dialog/input-dialog.component"; +import { YornDialogComponent } from "../../widget/alert-dialog/yorn-dialog.component"; +import { ToastService } from "../../widget/toast/toast-service"; +import { AdminConfig } from "../admin.config"; @Component({ - selector: 'app-admin-home', - templateUrl: './admin-home.component.html', - styleUrls: ['./admin-home.component.scss'], + selector: "app-admin-home", + templateUrl: "./admin-home.component.html", + styleUrls: [ "./admin-home.component.scss" ], }) export class AdminHomeComponent implements OnInit { cardsMetaData: any; teamList: any; userList: any; - loggedUser:any; + loggedUser: any; constructor( private _spinner: SpinnerService, private _client: NodeclientService, @@ -38,20 +39,20 @@ export class AdminHomeComponent implements OnInit { private router: Router, private tms: TeamService, private userService: UserService, - private _auth:AuthserviceService, - private toastService:ToastService + private _auth: AuthserviceService, + private toastService: ToastService ) { this.cardsMetaData = AdminConfig.cardsMetaData; if (_client.deviceIsMobile()) { for (var row in this.cardsMetaData) { for (var col in this.cardsMetaData[row]) { //console.log(this.cardsMetaData[row][col]); - this.cardsMetaData[row][col].cardHeight = '200'; - this.cardsMetaData[row][col].cardWidth = '300'; + this.cardsMetaData[row][col].cardHeight = "200"; + this.cardsMetaData[row][col].cardWidth = "300"; } } } - this.loggedUser=_auth.getUser(); + this.loggedUser = _auth.getUser(); } deleteTeam() { //console.log('Delete User Called'); @@ -72,7 +73,7 @@ export class AdminHomeComponent implements OnInit { parseList(res: any) { var list = []; for (var item in res) { - list.push(res[item]['team_name']); + list.push(res[item]["team_name"]); } return list; } @@ -80,17 +81,20 @@ export class AdminHomeComponent implements OnInit { console.log(list); this.openDialogInput( { - title: 'Choose a team', - label: 'Team', - placeholder: 'Select team', + title: "Choose a team", + label: "Team", + placeholder: "Select team", list: list, - bindLabel: 'team', + bindLabel: "team", }, - (res: any) => { - console.log('data from close:', res); + async (res: any) => { + console.log("data from close:", res); res = res.dataCtrl; - - if (!window.confirm('Delete team:' + res + '?')) { + let userConfirmation = await this.openYornDialog({ + title: "Prompt", + message: `

Do you really want to remove this team "${res}"?

`, + }); + if (!userConfirmation) { return; } this._spinner.setSpinnerState(true); @@ -99,15 +103,15 @@ export class AdminHomeComponent implements OnInit { .deleteTeam(res) .then((res2: any) => { res2 = JSON.parse(res2); - if (res2.status == 'SUCCESS') { + if (res2.status == "SUCCESS") { this._spinner.setSpinnerState(false); - + this.openDialog( { - type: 'message', - message: 'Team deleted successfully!', + type: "message", + message: "Team deleted successfully!", }, - function () { + function() { window.location.reload(); } ); @@ -115,7 +119,7 @@ export class AdminHomeComponent implements OnInit { this._spinner.setSpinnerState(false); this.openDialog( { - type: 'alert', + type: "alert", message: res2.message, }, null @@ -127,7 +131,7 @@ export class AdminHomeComponent implements OnInit { this._spinner.setSpinnerState(false); this.openDialog( { - type: 'alert', + type: "alert", message: err.message, }, null @@ -142,12 +146,12 @@ export class AdminHomeComponent implements OnInit { this.dialog .open(AlertDialogComponent, { data: data, - panelClass: 'app-dialog-class', + panelClass: "app-dialog-class", }) .afterClosed() .toPromise() .then((res: any) => { - if (typeof callback == 'function') { + if (typeof callback == "function") { callback(); } }); @@ -156,15 +160,15 @@ export class AdminHomeComponent implements OnInit { this.dialog .open(InputDialogComponent, { data: data, - panelClass: 'app-dialog-class', + panelClass: "app-dialog-class", - width: '500px', + width: "500px", }) .afterClosed() .toPromise() .then((res) => { //console.log(res); - if (typeof callback == 'function' && res != '' && res != null) { + if (typeof callback == "function" && res != "" && res != null) { callback(res); } }); @@ -188,11 +192,11 @@ export class AdminHomeComponent implements OnInit { //console.log(list); this.openDialogInput( { - title: 'Choose a user', - label: 'Username', - placeholder: 'Select user', + title: "Choose a user", + label: "Username", + placeholder: "Select user", list: list, - bindLabel: 'user_id', + bindLabel: "user_id", }, (res: any) => { //console.log('data from close:', res); @@ -207,22 +211,26 @@ export class AdminHomeComponent implements OnInit { .promoteUser(res.user.user_id) .then((res2: any) => { res2 = JSON.parse(res2); - if (res2.status == 'Success') { - if(this.loggedUser.useToast){ - this.toastService.showSuccess('User promoted to Team Lead.',5000); - }else{ - this.openDialog( - { - type: 'message', - message: 'User promoted to Team Lead.', - }, - null - );} + if (res2.status == "Success") { + if (this.loggedUser.useToast) { + this.toastService.showSuccess( + "User promoted to Team Lead.", + 5000 + ); + } else { + this.openDialog( + { + type: "message", + message: "User promoted to Team Lead.", + }, + null + ); + } } else { this._spinner.setSpinnerState(false); this.openDialog( { - type: 'alert', + type: "alert", message: res2.message, }, null @@ -234,7 +242,7 @@ export class AdminHomeComponent implements OnInit { this._spinner.setSpinnerState(false); this.openDialog( { - type: 'alert', + type: "alert", message: err.message, }, null @@ -252,4 +260,13 @@ export class AdminHomeComponent implements OnInit { ); } ngOnInit(): void {} + openYornDialog(data: any) { + return this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: "app-dialog-class", + }) + .afterClosed() + .toPromise(); + } } diff --git a/src/app/public/admin/application-properties/application-properties.component.ts b/src/app/public/admin/application-properties/application-properties.component.ts index 6292839..9c98bb8 100644 --- a/src/app/public/admin/application-properties/application-properties.component.ts +++ b/src/app/public/admin/application-properties/application-properties.component.ts @@ -28,6 +28,7 @@ import { ApplicationpropsService } from '../../services/applicationprops.service import { NodeclientService } from '../../services/nodeclient.service'; import { SpinnerService } from '../../services/spinner-service'; import { AlertDialogComponent } from '../../widget/alert-dialog/alert-dialog.component'; +import { YornDialogComponent } from '../../widget/alert-dialog/yorn-dialog.component'; @Component({ selector: 'app-application-properties', @@ -130,14 +131,15 @@ export class ApplicationPropertiesComponent implements OnInit { } this.updatePropList[event.prop_name] = event.prop_value; } - updateProps() { - if ( - !window.confirm( - 'Update Properties :' + JSON.stringify(this.updatePropList) + ' ?' - ) - ) { - return; - } + async updateProps() { + let userConfirmation = await this.openYornDialog({ + title: "Prompt", + message: `

Do you really want to update these properties: "${JSON.stringify(this.updatePropList)}"?

`, + }); + if (!userConfirmation) { + return; + } + //console.log(this.updatePropList); // display form values on success var headers = new HttpHeaders({ @@ -204,4 +206,13 @@ export class ApplicationPropertiesComponent implements OnInit { } }); } + openYornDialog(data: any) { + return this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: "app-dialog-class", + }) + .afterClosed() + .toPromise(); + } } diff --git a/src/app/public/admin/dynamic-objects/dynamic-objects.component.ts b/src/app/public/admin/dynamic-objects/dynamic-objects.component.ts index b086221..96139f6 100644 --- a/src/app/public/admin/dynamic-objects/dynamic-objects.component.ts +++ b/src/app/public/admin/dynamic-objects/dynamic-objects.component.ts @@ -34,6 +34,7 @@ import { MatDialog } from '@angular/material/dialog'; import { AlertDialogComponent } from '../../widget/alert-dialog/alert-dialog.component'; import { NodeclientService } from '../../services/nodeclient.service'; import { DynamicObjectsService } from '../../services/dynamicobjects.service'; +import { YornDialogComponent } from '../../widget/alert-dialog/yorn-dialog.component'; const LOCAL_STORAGE_KEY = 'dynamicObjectListGridState'; const DEFAULT_PAGE_SIZE = 25; @@ -383,14 +384,14 @@ export class ToolsDynamicObjectsComponent implements OnInit { this.loggedUser.permissions.delete_vm ); }, - action: (_event: any, args: any) => { + action: async (_event: any, args: any) => { const dataContext = args.dataContext; const row = args?.row ?? 0; - if ( - confirm( - `Do you really want to remove this object "${dataContext.description}"? CAUTION: This action will remove all data from object table.` - ) - ) { + let userConfirmation = await this.openYornDialog({ + title: "Prompt", + message: `

Do you really want to remove this object "${dataContext.description}"? CAUTION: This action will remove all data from object table.

`, + }); + if (userConfirmation) { this.spinner.setSpinnerState(true); this.dynamicObjectService .deleteDynamicObject(dataContext.name) @@ -548,4 +549,13 @@ export class ToolsDynamicObjectsComponent implements OnInit { localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(gridState); } } + openYornDialog(data: any) { + return this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: "app-dialog-class", + }) + .afterClosed() + .toPromise(); + } } diff --git a/src/app/public/admin/team-stats/team-stats.component.ts b/src/app/public/admin/team-stats/team-stats.component.ts index 5e78bd2..674ecf1 100644 --- a/src/app/public/admin/team-stats/team-stats.component.ts +++ b/src/app/public/admin/team-stats/team-stats.component.ts @@ -9,28 +9,33 @@ * @modify date 2022-11-24 18:06:39 * @desc Team Stats Component */ -import { Component, OnInit } from '@angular/core'; -import { UserService } from '../../services/users.service'; -import { GroupByPipe } from 'ngx-pipes'; -import { SpinnerService } from '../../services/spinner-service'; -import { MatDialog } from '@angular/material/dialog'; -import { AlertDialogComponent } from '../../widget/alert-dialog/alert-dialog.component'; -import { AuthserviceService } from '../../services/authservice.service'; -import { ToastService } from '../../widget/toast/toast-service'; +import { Component, OnInit } from "@angular/core"; +import { UserService } from "../../services/users.service"; +import { GroupByPipe } from "ngx-pipes"; +import { SpinnerService } from "../../services/spinner-service"; +import { MatDialog } from "@angular/material/dialog"; +import { AlertDialogComponent } from "../../widget/alert-dialog/alert-dialog.component"; +import { AuthserviceService } from "../../services/authservice.service"; +import { ToastService } from "../../widget/toast/toast-service"; +import { YornDialogComponent } from "../../widget/alert-dialog/yorn-dialog.component"; @Component({ - selector: 'app-team-stats', - templateUrl: './team-stats.component.html', - styleUrls: ['./team-stats.component.scss'], + selector: "app-team-stats", + templateUrl: "./team-stats.component.html", + styleUrls: [ "./team-stats.component.scss" ], }) export class TeamStatsComponent implements OnInit { list: any = []; temp: any = {}; - loggedUser:any; - constructor(private us: UserService, - private _spinner:SpinnerService, - private dialog: MatDialog,private _auth:AuthserviceService, - private toastService:ToastService) { - us.getTeamStats() + loggedUser: any; + constructor( + private us: UserService, + private _spinner: SpinnerService, + private dialog: MatDialog, + private _auth: AuthserviceService, + private toastService: ToastService + ) { + us + .getTeamStats() .then((res: any) => { res = JSON.parse(res); for (var key in res) { @@ -40,78 +45,101 @@ export class TeamStatsComponent implements OnInit { .catch((error) => { //console.log(error); }); - this.loggedUser=_auth.getUser(); + this.loggedUser = _auth.getUser(); } - resetPassword(user:String){ - if ( - confirm(`Do you really want to reset password for user "${user}"?`) - ){ + async resetPassword(user: String) { + let userConfirmation = await this.openYornDialog({ + title: "Prompt", + message: `

Do you really want to reset password for user "${user}"?

`, + }); + if (userConfirmation) { this._spinner.setSpinnerState(true); this.us - .resetUserPassword(user) - .then((res2: any) => { - res2 = JSON.parse(res2); - if (res2.status == 'Success' || res2.status==true) { - this.us.setNeedRefresh(true); - if(this.loggedUser.useToast){ - this.toastService.showSuccess('User password updated successfully!',5000); - this.openDialog( - { - type: 'message', - message: 'Updated password for user: '+user+' is '+atob(res2.newPassword).toString(), - }, - null - ); - }else{ - this.openDialog( - { - type: 'message', - message: 'User password updated successfully!'+'\n'+'Updated password for user: '+user+' is '+atob(res2.newPassword).toString(), - }, - null - ); - } - } else { - this._spinner.setSpinnerState(false); - this.openDialog( - { - type: 'alert', - message: res2.message, - }, - null - ); - } - }) - .catch((err: any) => { - //console.log('Error:', err); - this._spinner.setSpinnerState(false); - this.openDialog( - { - type: 'alert', - message: err.message, - }, - null - ); - }); - + .resetUserPassword(user) + .then((res2: any) => { + res2 = JSON.parse(res2); + if (res2.status == "Success" || res2.status == true) { + this.us.setNeedRefresh(true); + if (this.loggedUser.useToast) { + this.toastService.showSuccess( + "User password updated successfully!", + 5000 + ); + this.openDialog( + { + type: "message", + message: + "Updated password for user: " + + user + + " is " + + atob(res2.newPassword).toString(), + }, + null + ); + } else { + this.openDialog( + { + type: "message", + message: + "User password updated successfully!" + + "\n" + + "Updated password for user: " + + user + + " is " + + atob(res2.newPassword).toString(), + }, + null + ); + } + } else { this._spinner.setSpinnerState(false); + this.openDialog( + { + type: "alert", + message: res2.message, + }, + null + ); + } + }) + .catch((err: any) => { + //console.log('Error:', err); + this._spinner.setSpinnerState(false); + this.openDialog( + { + type: "alert", + message: err.message, + }, + null + ); + }); + this._spinner.setSpinnerState(false); } } openDialog(data: any, callback: any) { this.dialog .open(AlertDialogComponent, { data: data, - panelClass: 'app-dialog-class', + panelClass: "app-dialog-class", }) .afterClosed() .toPromise() .then((res: any) => { - if (typeof callback == 'function') { + if (typeof callback == "function") { callback(); } }); } + openYornDialog(data: any) { + return this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: "app-dialog-class", + }) + .afterClosed() + .toPromise(); + } ngOnInit(): void {} } diff --git a/src/app/public/dynamicobjects/dynamicobject-app-home/dynamicobject-app-home.component.ts b/src/app/public/dynamicobjects/dynamicobject-app-home/dynamicobject-app-home.component.ts index 55ff23d..e56ab28 100644 --- a/src/app/public/dynamicobjects/dynamicobject-app-home/dynamicobject-app-home.component.ts +++ b/src/app/public/dynamicobjects/dynamicobject-app-home/dynamicobject-app-home.component.ts @@ -46,6 +46,7 @@ import { Clipboard } from '@angular/cdk/clipboard'; import { UserDefinedFunctionsService } from '../../services/userdefinedfunctions.service'; import { HttpHeaders } from '@angular/common/http'; import { UserDefinedFunctionDialogComponent } from '../../widget/alert-dialog/userdefinedfunction-dialog.component'; +import { YornDialogComponent } from '../../widget/alert-dialog/yorn-dialog.component'; @Component({ selector: 'app-dynamicobject-app-home', templateUrl: './dynamicobject-app-home.component.html', @@ -706,16 +707,17 @@ export class DynamicObjectAppHomeComponent implements OnInit { this.loggedUser.permissions.delete_vm );*/ }, - action: (_event: any, args: any) => { + action: async (_event: any, args: any) => { const dataContext = args.dataContext; const row = args?.row ?? 0; - if ( - confirm( - `Do you really want to remove this record "${JSON.stringify( + let userConfirmation = await this.openYornDialog({ + title: "Prompt", + message: `

Do you really want to remove this record "${JSON.stringify( dataContext - )}"?` - ) - ) { + )}" ?

`, + }); + if (userConfirmation) { + this.spinner.setSpinnerState(true); this.dynamicobjectappServie .deleteDynamicObjectAppRecord(this.app, dataContext) @@ -1047,4 +1049,13 @@ export class DynamicObjectAppHomeComponent implements OnInit { setTimeout(() => $(cellNode).empty().html(componentOutput.domElement)); } } + openYornDialog(data: any) { + return this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: "app-dialog-class", + }) + .afterClosed() + .toPromise(); + } } diff --git a/src/app/public/home/home-page/home-page.component.ts b/src/app/public/home/home-page/home-page.component.ts index eec9f19..a35bc5e 100644 --- a/src/app/public/home/home-page/home-page.component.ts +++ b/src/app/public/home/home-page/home-page.component.ts @@ -54,6 +54,7 @@ import { SlickCustomTooltip } from "@slickgrid-universal/custom-tooltip-plugin"; import { LinkComponent } from "../../widget/path/link.component"; import { SnapshotsDialogComponent } from "../../widget/alert-dialog/snapshots-dialog.component"; import { IPComponent } from "../../widget/path/ip.component"; +import { YornDialogComponent } from "../../widget/alert-dialog/yorn-dialog.component"; const LOCAL_STORAGE_KEY = "gridState"; const DEFAULT_PAGE_SIZE = 25; @@ -539,7 +540,7 @@ export class HomePageComponent implements OnInit { } ); } - release(_event: any, args: any) { + async release(_event: any, args: any) { //console.log(this.selectedRows); const dataContext = args.dataContext; @@ -552,7 +553,11 @@ export class HomePageComponent implements OnInit { this.selectedRows.length > 1 && isincludedielectedRows ) { - if (!window.confirm("Release selected vms ?")) { + let userConfirmation = await this.openYornDialog({ + title: "Rlease VMS", + message: `

Do you really want to release selected VMs ?

`, + }); + if (!userConfirmation) { return; } args.ipList = this.selectedRows; @@ -640,7 +645,11 @@ export class HomePageComponent implements OnInit { }); return; } - if (!window.confirm("Release VM:" + dataContext.ip + "?")) { + let userConfirmation = await this.openYornDialog({ + title: "Rlease VM", + message: `

Do you really want to release VM ${dataContext.ip} ?

`, + }); + if (!userConfirmation) { return; } this.spinner.setSpinnerState(true); @@ -1052,6 +1061,15 @@ export class HomePageComponent implements OnInit { } }); } + openYornDialog(data: any) { + return this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: "app-dialog-class", + }) + .afterClosed() + .toPromise(); + } openImportDialog(data: any, callback: any) { this.dialog .open(FileChooseDialogComponent, { @@ -1282,12 +1300,14 @@ export class HomePageComponent implements OnInit { command: "add-domment", title: "Add Comment", iconCssClass: "fa fa-edit", - action: (_event: any, args: any) => { + action: async (_event: any, args: any) => { const dataContext = args.dataContext; //const row = args?.row ?? 0; - if ( - confirm(`Do you really want to remove this vm "${dataContext.ip}"?`) - ) { + var userConfirmation = await this.openYornDialog({ + title: "Remove VM", + message: `Do you really want to remove this vm "${dataContext.ip}"?`, + }); + if (userConfirmation) { this.spinner.setSpinnerState(true); this.vms .deleteVM(dataContext.ip) @@ -1469,14 +1489,14 @@ export class HomePageComponent implements OnInit { this.loggedUser.permissions.delete_vm ); }, - action: (_event: any, args: any) => { + action: async (_event: any, args: any) => { const dataContext = args.dataContext; //const row = args?.row ?? 0; - if ( - confirm( - `Do you really want to remove this vm "${dataContext.ip}"?` - ) - ) { + var userConfirmation = await this.openYornDialog({ + title: "Remove VM", + message: `Do you really want to remove this vm "${dataContext.ip}"?`, + }); + if (userConfirmation) { this.spinner.setSpinnerState(true); this.vms .deleteVM(dataContext.ip) diff --git a/src/app/public/login/login-view/login-view.component.html b/src/app/public/login/login-view/login-view.component.html index 550415b..74be6f6 100644 --- a/src/app/public/login/login-view/login-view.component.html +++ b/src/app/public/login/login-view/login-view.component.html @@ -12,15 +12,66 @@ @desc Relationships Graph Component Html --> +
+
+
+
+ Image +
+
+
+
+
+

Welcome!

+

Please login to use VM Assignment Portal.

+
+
+ +
+ + +
+
Username is required
+
+
+
+ + + +
+
Password is required
+
+
+ + +
+
+ +
+
+
+
+
+
+ + + - + + +
- +
@@ -53,9 +104,9 @@

Welcome!

- +
- - + --> + \ No newline at end of file diff --git a/src/app/public/login/login-view/login-view.component.scss b/src/app/public/login/login-view/login-view.component.scss index e0a7e95..31eab88 100644 --- a/src/app/public/login/login-view/login-view.component.scss +++ b/src/app/public/login/login-view/login-view.component.scss @@ -41,3 +41,8 @@ a.carousel-control-next { .carousel-indicators [data-bs-target] { background-color: var(--blue); } +.btn-login { + height: 54px !important; + padding-left: 30px !important; + padding-right: 30px !important; +} diff --git a/src/app/public/services/userdefinedfunctions.service.ts b/src/app/public/services/userdefinedfunctions.service.ts index e390672..56f7b0f 100644 --- a/src/app/public/services/userdefinedfunctions.service.ts +++ b/src/app/public/services/userdefinedfunctions.service.ts @@ -17,6 +17,7 @@ import { ActivatedRoute, Router } from "@angular/router"; import { Filters } from "angular-slickgrid"; import { AlertDialogComponent } from "../widget/alert-dialog/alert-dialog.component"; import { InputDialogComponent } from "../widget/alert-dialog/input-dialog.component"; +import { YornDialogComponent } from "../widget/alert-dialog/yorn-dialog.component"; import { ToastService } from "../widget/toast/toast-service"; import { AuthserviceService } from "./authservice.service"; import { DynamicObjectAppService } from "./dynamicobjectapp.service"; @@ -97,6 +98,7 @@ export class UserDefinedFunctionsService { return { openAlertDialog: this.openDialog.bind(this), openInputDialog: this.openDialogInput.bind(this), + openYornDialog: this.openYornDialog.bind(this), }; case "nodeclient": return this._client; @@ -416,4 +418,13 @@ export class UserDefinedFunctionsService { if (this.app != app) this.needReload = true; this.app = app; } + openYornDialog(data: any) { + return this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: "app-dialog-class", + }) + .afterClosed() + .toPromise(); + } } diff --git a/src/app/public/tools/tools-technotes/tools-technotes.component.ts b/src/app/public/tools/tools-technotes/tools-technotes.component.ts index 47eca65..5fd9660 100644 --- a/src/app/public/tools/tools-technotes/tools-technotes.component.ts +++ b/src/app/public/tools/tools-technotes/tools-technotes.component.ts @@ -35,6 +35,7 @@ import { MatDialog } from '@angular/material/dialog'; import { AlertDialogComponent } from '../../widget/alert-dialog/alert-dialog.component'; import { NodeclientService } from '../../services/nodeclient.service'; import { TechnotesService } from '../../services/technotes.service'; +import { YornDialogComponent } from '../../widget/alert-dialog/yorn-dialog.component'; const LOCAL_STORAGE_KEY = 'technotesGridState'; const DEFAULT_PAGE_SIZE = 25; @@ -400,14 +401,15 @@ export class ToolsTechnotesComponent implements OnInit { this.loggedUser.permissions.delete_vm ); }, - action: (_event: any, args: any) => { + action: async (_event: any, args: any) => { const dataContext = args.dataContext; const row = args?.row ?? 0; - if ( - confirm( - `Do you really want to remove this technote "${dataContext.description}"?` - ) - ) { + let userConfirmation = await this.openYornDialog({ + title: "Prompt", + message: `

Do you really want to remove this technote "${dataContext.description}"?

`, + }); + if (userConfirmation) { + this.spinner.setSpinnerState(true); this.technotesServie .deleteTechnote(dataContext.id) @@ -565,4 +567,13 @@ export class ToolsTechnotesComponent implements OnInit { localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(gridState); } } + openYornDialog(data: any) { + return this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: "app-dialog-class", + }) + .afterClosed() + .toPromise(); + } } diff --git a/src/app/public/vmm/add-vm/add-vm.component.ts b/src/app/public/vmm/add-vm/add-vm.component.ts index d0d94ee..a3df695 100644 --- a/src/app/public/vmm/add-vm/add-vm.component.ts +++ b/src/app/public/vmm/add-vm/add-vm.component.ts @@ -27,6 +27,7 @@ import { AlertDialogComponent } from '../../widget/alert-dialog/alert-dialog.com import { AuthserviceService } from '../../services/authservice.service'; import { VmsService } from '../../services/vms.service'; import { ToastService } from '../../widget/toast/toast-service'; +import { YornDialogComponent } from '../../widget/alert-dialog/yorn-dialog.component'; @Component({ selector: 'app-add-vm', templateUrl: './add-vm.component.html', @@ -54,6 +55,7 @@ export class AddVmComponent implements OnInit { private vms: VmsService, private toastService:ToastService ) { + tms .getTeams() .then((res) => { @@ -177,4 +179,19 @@ export class AddVmComponent implements OnInit { } }); } + + openYornDialog(data: any, callback: any) { + this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: 'app-dialog-class', + }) + .afterClosed() + .toPromise() + .then((res) => { + if (typeof callback == 'function') { + callback(res); + } + }); + } } diff --git a/src/app/public/widget/alert-dialog/alert-dialog.module.ts b/src/app/public/widget/alert-dialog/alert-dialog.module.ts index 3af2d55..bb658ec 100644 --- a/src/app/public/widget/alert-dialog/alert-dialog.module.ts +++ b/src/app/public/widget/alert-dialog/alert-dialog.module.ts @@ -28,6 +28,7 @@ import { TreeModule } from "../tree-diagram/tree.module"; import { TakeSnapInputDialogComponent } from "./takesnap-dialog.component"; import { TaskOutputDialogComponent } from "./vsphere-task-output-dialog.component"; import { UserDefinedFunctionDialogComponent } from "./userdefinedfunction-dialog.component"; +import { YornDialogComponent } from "./yorn-dialog.component"; import { AngularShellModule } from "../angular-shell/angular-shell.module"; @NgModule({ declarations: [ @@ -43,6 +44,7 @@ import { AngularShellModule } from "../angular-shell/angular-shell.module"; TakeSnapInputDialogComponent, TaskOutputDialogComponent, UserDefinedFunctionDialogComponent, + YornDialogComponent, ], imports: [ CommonModule, @@ -67,6 +69,7 @@ import { AngularShellModule } from "../angular-shell/angular-shell.module"; TakeSnapInputDialogComponent, TaskOutputDialogComponent, UserDefinedFunctionDialogComponent, + YornDialogComponent, ], }) export class AlertModule {} diff --git a/src/app/public/widget/alert-dialog/snapshots-dialog.component.ts b/src/app/public/widget/alert-dialog/snapshots-dialog.component.ts index e5c8572..7b7b111 100644 --- a/src/app/public/widget/alert-dialog/snapshots-dialog.component.ts +++ b/src/app/public/widget/alert-dialog/snapshots-dialog.component.ts @@ -19,6 +19,7 @@ import { ToastService } from '../toast/toast-service'; import { AlertDialogComponent } from './alert-dialog.component'; import { TakeSnapInputDialogComponent } from './takesnap-dialog.component'; import { TaskOutputDialogComponent } from './vsphere-task-output-dialog.component'; +import { YornDialogComponent } from './yorn-dialog.component'; export interface DialogData { snapshots?:any; @@ -50,9 +51,13 @@ export class SnapshotsDialogComponent implements OnInit { console.log("takeSnapView"); this.takeSnapshot(this.data.hostname); } - revertSnapshot():void{ + async revertSnapshot(){ console.log("revertSnapshot"); - if(confirm(`Do you want to revert machine state to ${this.selectedSnap.name}?`)){ + let userConfirmation = await this.openYornDialog({ + title: "Prompt", + message: `

Do you want to revert machine state to ${this.selectedSnap.name}?

`, + }); + if (userConfirmation) { this.spinner.setSpinnerState(true); this.vms.revertSnap(this.data.hostname,this.selectedSnap.name,this.selectedSnap.snapid).then((res:any)=>{ console.log(res); @@ -192,4 +197,13 @@ getObject(){ } }); } + openYornDialog(data: any) { + return this.dialog + .open(YornDialogComponent, { + data: data, + panelClass: "app-dialog-class", + }) + .afterClosed() + .toPromise(); + } } diff --git a/src/app/public/widget/alert-dialog/yorn-dialog.component.html b/src/app/public/widget/alert-dialog/yorn-dialog.component.html new file mode 100644 index 0000000..22c6498 --- /dev/null +++ b/src/app/public/widget/alert-dialog/yorn-dialog.component.html @@ -0,0 +1,24 @@ +

+ + + {{data.title}} + + + +

+ + +
+
+

+
+
+
+ + + + +
+
+
+ \ No newline at end of file diff --git a/src/app/public/widget/alert-dialog/yorn-dialog.component.scss b/src/app/public/widget/alert-dialog/yorn-dialog.component.scss new file mode 100644 index 0000000..4928b65 --- /dev/null +++ b/src/app/public/widget/alert-dialog/yorn-dialog.component.scss @@ -0,0 +1,44 @@ +.snapDialog { + padding: 20px; + margin: 30px; +} + +.titleBar { + float: right; + margin-top: 3px; + width: 100%; + text-align: end; + background: #a5a5a5; + padding-right: 3px; +} + +.titleicon { + margin-left: 5px; +} + +.alertMssg { + color: #000; + font-size: 13px; + width: 100%; + margin-top: 20px; + height: 80%; +} + +.ngx-select__choices { + z-index: 9999; +} + +::ng-deep .app-dialog-class { + mat-dialog-container { + padding-top: 10px !important; + padding-left: 10px !important; + padding-right: 10px !important; + overflow: hidden; + } +} + +.float-end { + float: inline-end !important; + /*fallback for chrome*/ + float: right !important; +} \ No newline at end of file diff --git a/src/app/public/widget/alert-dialog/yorn-dialog.component.ts b/src/app/public/widget/alert-dialog/yorn-dialog.component.ts new file mode 100644 index 0000000..92258ae --- /dev/null +++ b/src/app/public/widget/alert-dialog/yorn-dialog.component.ts @@ -0,0 +1,55 @@ +// Copyright (c) 2022 soumya +// +// This software is released under the MIT License. +// https://opensource.org/licenses/MIT +/** + * @author [soumya] + * @email [soumyaprasad.rana@gmail.com] + * @create date 2022-02-26 18:26:41 + * @modify date 2022-04-19 18:26:41 + * @desc Input Dialog Component + */ +import { Component, Inject, OnInit } from "@angular/core"; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, +} from "@angular/material/dialog"; + +export interface DialogData { + iconClass?: string; + message?: string; + title?: string; + titleIcon?: boolean; + closeCallback?: any; +} +@Component({ + selector: "app-yorn-dialog", + templateUrl: "./yorn-dialog.component.html", + styleUrls: [ "./yorn-dialog.component.scss" ], +}) +export class YornDialogComponent implements OnInit { + submitted = false; + + constructor( + @Inject(MAT_DIALOG_DATA) public data: DialogData, + private dialogRef: MatDialogRef + ) {} + + ngOnInit(): void {} + + onSubmit(value: boolean) { + this.submitted = true; + + this.dialogRef.close(value); + } + onClose() { + this.dialogRef.close(false); + if ( + this.data.closeCallback && + typeof this.data.closeCallback == "function" + ) { + this.data.closeCallback(); + } + } +} diff --git a/src/app/public/widget/animations/route-animations.ts b/src/app/public/widget/animations/route-animations.ts index c26f2a2..6190ec4 100644 --- a/src/app/public/widget/animations/route-animations.ts +++ b/src/app/public/widget/animations/route-animations.ts @@ -17,38 +17,24 @@ import { query, group, useAnimation, -} from '@angular/animations'; -import { getFilterParsedObjectResult } from 'angular-slickgrid'; -import { - bounceInDown, - bounceInUp, - bounceInLeft, - lightSpeedIn, - fadeInDown, - rotateInUpRight, - flip, - rubberBand, - fadeIn, - bounceIn, -} from 'ng-animate'; +} from "@angular/animations"; +import { fadeIn } from "ng-animate"; const globalAnimation = fadeIn; const globalTiming = 0.5; const globalDelay = 0; -export const homeModule = trigger('routeAnimations', [ +export const homeModule = trigger("routeAnimations", [ // The '* => *' will trigger the animation to change between any two states - transition('notFoundx => dash', [ + transition("notFoundx => dash", [ + style({ opacity: 0 }), + animate(1000, style({ opacity: 1 })), + ]), + transition("* => notFoundx", [ style({ opacity: 0 }), animate(1000, style({ opacity: 1 })), ]), - transition( - '* => notFoundx', - - [style({ opacity: 0 }), animate(1000, style({ opacity: 1 }))] - ), //Dash to -> chart transition( - 'dash => chart', - + "dash => chart", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -56,8 +42,7 @@ export const homeModule = trigger('routeAnimations', [ ), //backward transition( - 'chart => dash', - + "chart => dash", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -65,14 +50,14 @@ export const homeModule = trigger('routeAnimations', [ ), //backward transition( - '* => dash', + "* => dash", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, }) ), transition( - '* => chart', + "* => chart", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -80,19 +65,19 @@ export const homeModule = trigger('routeAnimations', [ ), ]); -export const vmmModule = trigger('routeAnimations', [ +export const vmmModule = trigger("routeAnimations", [ // The '* => *' will trigger the animation to change between any two states - transition('notFoundx => dash', [ + transition("notFoundx => dash", [ style({ opacity: 0 }), animate(1000, style({ opacity: 1 })), ]), - transition('* => notFoundx', [ + transition("* => notFoundx", [ style({ opacity: 0 }), animate(1000, style({ opacity: 1 })), ]), //Child Module Entry transition( - '* => vmm', + "* => vmm", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -100,7 +85,7 @@ export const vmmModule = trigger('routeAnimations', [ ), //Dash to -> chart transition( - 'vmm => add', + "vmm => add", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -108,7 +93,7 @@ export const vmmModule = trigger('routeAnimations', [ ), //backward transition( - 'add => dash', + "add => dash", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -116,19 +101,19 @@ export const vmmModule = trigger('routeAnimations', [ ), ]); -export const adminModule = trigger('routeAnimations', [ +export const adminModule = trigger("routeAnimations", [ // The '* => *' will trigger the animation to change between any two states - transition('notFoundx => dash', [ + transition("notFoundx => dash", [ style({ opacity: 0 }), animate(1000, style({ opacity: 1 })), ]), - transition('* => notFoundx', [ + transition("* => notFoundx", [ style({ opacity: 0 }), animate(1000, style({ opacity: 1 })), ]), //Child Module Entry transition( - '* => admin', + "* => admin", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -136,7 +121,7 @@ export const adminModule = trigger('routeAnimations', [ ), //Dash to -> chart transition( - 'admin => addTeam', + "admin => addTeam", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -144,7 +129,7 @@ export const adminModule = trigger('routeAnimations', [ ), //backward transition( - 'addTeam => dash', + "addTeam => dash", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -152,20 +137,19 @@ export const adminModule = trigger('routeAnimations', [ ), ]); -export const UserModule = trigger('routeAnimations', [ +export const UserModule = trigger("routeAnimations", [ // The '* => *' will trigger the animation to change between any two states - transition('notFoundx => dash', [ + transition("notFoundx => dash", [ + style({ opacity: 0 }), + animate(1000, style({ opacity: 1 })), + ]), + transition("* => notFoundx", [ style({ opacity: 0 }), animate(1000, style({ opacity: 1 })), ]), - transition( - '* => notFoundx', - - [style({ opacity: 0 }), animate(1000, style({ opacity: 1 }))] - ), //Child Module Entry transition( - '* => user', + "* => user", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -173,8 +157,7 @@ export const UserModule = trigger('routeAnimations', [ ), //Dash to -> chart transition( - 'user => add', - + "user => add", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -182,8 +165,7 @@ export const UserModule = trigger('routeAnimations', [ ), //backward transition( - 'add => dash', - + "add => dash", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -191,19 +173,19 @@ export const UserModule = trigger('routeAnimations', [ ), ]); -export const ToolsModule = trigger('routeAnimations', [ +export const ToolsModule = trigger("routeAnimations", [ // The '* => *' will trigger the animation to change between any two states - transition('notFoundx => dash', [ + transition("notFoundx => dash", [ style({ opacity: 0 }), animate(1000, style({ opacity: 1 })), ]), - transition('* => notFoundx', [ + transition("* => notFoundx", [ style({ opacity: 0 }), animate(1000, style({ opacity: 1 })), ]), //Child Module Entry transition( - '* => tools', + "* => tools", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -211,8 +193,7 @@ export const ToolsModule = trigger('routeAnimations', [ ), //Dash to -> chart transition( - 'tools => dtb', - + "tools => dtb", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -220,8 +201,7 @@ export const ToolsModule = trigger('routeAnimations', [ ), //backward transition( - 'dtb => tools', - + "dtb => tools", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -230,8 +210,7 @@ export const ToolsModule = trigger('routeAnimations', [ //Dash to -> chart transition( - 'tools => ltb', - + "tools => ltb", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -239,8 +218,7 @@ export const ToolsModule = trigger('routeAnimations', [ ), //backward transition( - 'ltb => tools', - + "ltb => tools", useAnimation(globalAnimation, { // Set the duration to 5seconds and delay to 2seconds params: { timing: globalTiming, delay: globalDelay }, @@ -324,34 +302,34 @@ export const ToolsModule = trigger('routeAnimations', [ ) ]); */ -export const slider = trigger('routeAnimations', [ - transition('x => chxxart', slideTo('left', 100)), - transition('groupx => dxash', slideTo('right', 100)), +export const slider = trigger("routeAnimations", [ + transition("x => chxxart", slideTo("left", 100)), + transition("groupx => dxash", slideTo("right", 100)), ]); function slideTo(direction: string, top: number) { const optional = { optional: true }; return [ query( - ':enter, :leave', + ":enter, :leave", [ style({ - position: 'absolute', + position: "absolute", top: top, [direction]: 0, - width: '100%', + width: "100%", }), ], optional ), - query(':enter', [style({ [direction]: '-100%' })]), + query(":enter", [ style({ [direction]: "-100%" }) ]), group([ query( - ':leave', - [animate('600ms ease', style({ [direction]: '100%' }))], + ":leave", + [ animate("600ms ease", style({ [direction]: "100%" })) ], optional ), - query(':enter', [animate('600ms ease', style({ [direction]: '0%' }))]), + query(":enter", [ animate("600ms ease", style({ [direction]: "0%" })) ]), ]), // Normalize the page style... Might not be necessary @@ -362,16 +340,16 @@ function slideTo(direction: string, top: number) { } function fadeOut() { return [ - query(':enter', [style({ opacity: 0 })], { optional: true }), + query(":enter", [ style({ opacity: 0 }) ], { optional: true }), query( - ':leave', + ":leave", // here we apply a style and use the animate function to apply the style over 0.3 seconds - [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], + [ style({ opacity: 1 }), animate("0.2s", style({ opacity: 0 })) ], { optional: true } ), query( - ':enter', - [style({ opacity: 0 }), animate('0.2s', style({ opacity: 1 }))], + ":enter", + [ style({ opacity: 0 }), animate("0.2s", style({ opacity: 1 })) ], { optional: true } ), ]; diff --git a/src/app/public/widget/footer/footer.component.html b/src/app/public/widget/footer/footer.component.html index adac0e2..491e64b 100644 --- a/src/app/public/widget/footer/footer.component.html +++ b/src/app/public/widget/footer/footer.component.html @@ -2,6 +2,6 @@

- VM Assignment Portal 2.1.0 © 2023 All rights reserved. + VM Assignment Portal 2.11.0 © 2023 All rights reserved.

diff --git a/src/app/public/widget/nav/side-nav/side-nav.component.html b/src/app/public/widget/nav/side-nav/side-nav.component.html index d0b5cec..b5b1cc8 100644 --- a/src/app/public/widget/nav/side-nav/side-nav.component.html +++ b/src/app/public/widget/nav/side-nav/side-nav.component.html @@ -63,8 +63,8 @@ style="color:#e91e63" class="fa fa-circle"> Material Hot Pink - + - +