Implement delete project (UI) (#749)

* delete project update project onboarding * fix style source
frain-dev · Jun 11, 2022 · 19ba730 · 19ba730
1 parent e6e9016
commit 19ba730
Show file tree

Hide file tree

Showing 16 changed files with 229 additions and 83 deletions.
diff --git a/...c/app/private/components/create-project-component/create-project-component.component.html b/...c/app/private/components/create-project-component/create-project-component.component.html
@@ -212,7 +212,7 @@ <h3 class="margin-top__24px margin-bottom__16px">Disable Failing Endpoints</h3>
 	</div>
 
 	<div class="button-container flex flex__justify-end margin-top__32px margin-bottom__40px">
-		<button routerLink="/" class="button button__white padding-y__12px padding-x__28px rounded__8px margin-right__16px" type="button">Cancel</button>
+		<button routerLink="/" class="button button__white padding-y__12px padding-x__28px rounded__8px margin-right__16px" type="button" *ngIf="action !== 'update'">Cancel</button>
 
 		<button class="button button__primary button--has-icon padding-y__12px padding-x__28px rounded__8px" [disabled]="isCreatingProject" *ngIf="action === 'create'">
 			Create Project

diff --git a/...src/app/private/components/create-project-component/create-project-component.component.ts b/...src/app/private/components/create-project-component/create-project-component.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { GROUP } from 'src/app/models/group.model';
 import { GeneralService } from 'src/app/services/general/general.service';
 import { PrivateService } from '../../private.service';
@@ -72,7 +72,7 @@ export class CreateProjectComponent implements OnInit {
 			this.privateService.activeProjectDetails = response.data;
 			this.isCreatingProject = false;
 			this.generalService.showNotification({ message: 'Project created successfully!', style: 'success' });
-			this.onAction.emit({ action: 'createProject', data: response.data });
+			this.onAction.emit(response.data);
 		} catch (error: any) {
 			this.isCreatingProject = false;
 			this.generalService.showNotification({ message: error.message, style: 'error' });
@@ -90,7 +90,7 @@ export class CreateProjectComponent implements OnInit {
 		try {
 			const response = await this.createProjectService.updateProject(this.projectForm.value);
 			this.generalService.showNotification({ message: 'Project updated successfully!', style: 'success' });
-			this.onAction.emit({ action: 'updateProject', data: response.data });
+			this.onAction.emit(response.data);
 			this.isCreatingProject = false;
 		} catch (error) {
 			this.isCreatingProject = false;

diff --git a/web/ui/dashboard/src/app/private/pages/create-project/create-project.component.html b/web/ui/dashboard/src/app/private/pages/create-project/create-project.component.html
@@ -16,23 +16,23 @@ <h2 class="font__16px font__weight-600">Create Project</h2>
 	</div>
 
 	<div class="modal--body padding-all__0px">
-		<app-create-project-component (onAction)="$event.action == 'cancel' ? cancel() : createProject($event?.data)" *ngIf="projectStage === 'createProject'"></app-create-project-component>
+		<app-create-project-component (onAction)="$event?.action == 'cancel' ? cancel() : createProject($event)" *ngIf="projectStage === 'createProject'"></app-create-project-component>
 
 		<div class="card padding-all__24px margin-bottom__24px" *ngIf="projectStage !== 'createProject'">
 			<ul class="setup-steps flex flex__align-items-center border__bottom padding-bottom__24px">
-				<li class="setup-step--step" *ngIf="projectType === 'incoming'" [ngClass]="{ done: projectStage !== 'createSource', current: projectStage == 'createSource' }">
-					<div class="line"></div>
+				<li class="setup-step--step" [ngClass]="{ done: projectStage != 'createApplication', current: projectStage == 'createApplication' }">
+					<div class="line bg__primary"></div>
 					<div class="margin-top__4px flex flex__align-items-center">
 						<div class="checkbox margin-all__0px width__16px height__16px border__all rounded__50px"></div>
-						<div class="text margin-left__8px font__14px font__weight-500">Create Source</div>
+						<div class="text margin-left__8px font__14px font__weight-500">Create Application</div>
 					</div>
 				</li>
 
-				<li class="setup-step--step" [ngClass]="{ done: projectStage == 'createSubscription', current: projectStage == 'createApplication' }">
-					<div class="line bg__primary"></div>
+				<li class="setup-step--step" *ngIf="projectType === 'incoming'" [ngClass]="{ done: projectStage == 'createSubscription', current: projectStage == 'createSource' }">
+					<div class="line"></div>
 					<div class="margin-top__4px flex flex__align-items-center">
 						<div class="checkbox margin-all__0px width__16px height__16px border__all rounded__50px"></div>
-						<div class="text margin-left__8px font__14px font__weight-500">Create Application</div>
+						<div class="text margin-left__8px font__14px font__weight-500">Create Source</div>
 					</div>
 				</li>
 
@@ -61,7 +61,7 @@ <h3 class="margin-top__24px font__weight-600 font__18px">Create your first subsc
 
 		<app-create-source
 			*ngIf="projectStage === 'createSource' && privateService.activeProjectDetails.uid"
-			(onAction)="$event?.action == 'cancel' ? cancel() : projectType == 'incoming' ? onProjectOnboardingComplete() : (projectStage = 'createApplication')"
+			(onAction)="$event?.action == 'cancel' ? cancel() : (projectStage = 'createSubscription')"
 		></app-create-source>
 
 		<app-create-app

diff --git a/web/ui/dashboard/src/app/private/pages/create-project/create-project.component.ts b/web/ui/dashboard/src/app/private/pages/create-project/create-project.component.ts
@@ -24,7 +24,7 @@ export class CreateProjectComponent implements OnInit {
 
 	async createProject(newProjectData: GROUP) {
 		this.projectType = newProjectData.type;
-		newProjectData.type === 'incoming' ? (this.projectStage = 'createSource') : (this.projectStage = 'createApplication');
+		this.projectStage = 'createApplication';
 	}
 
 	cancel() {

diff --git a/web/ui/dashboard/src/app/private/pages/project/project.component.html b/web/ui/dashboard/src/app/private/pages/project/project.component.html
@@ -48,7 +48,7 @@
 		</div>
 	</aside>
 
-	<main class="width__100 margin-left__24px margin-top__16px animate">
+	<main class="width__100 margin-left__24px margin-top__16px animate position__relative">
 		<router-outlet></router-outlet>
 	</main>
 </div>
diff --git a/web/ui/dashboard/src/app/private/pages/project/settings/settings.component.html b/web/ui/dashboard/src/app/private/pages/project/settings/settings.component.html
@@ -1,3 +1,5 @@
+<convoy-loader *ngIf="isloading"></convoy-loader>
+
 <h1 class="font__12px font__weight-500 flex flex__align-items-center text__uppercase margin-bottom__24px">
 	<span routerLink="/projects" class="font__weight-500 pointer-cursor">Projects</span>
 	<svg width="16" height="16" class="margin-x__4px">
@@ -11,3 +13,12 @@ <h1 class="font__12px font__weight-500 flex flex__align-items-center text__upper
 </h1>
 
 <app-create-project-component [action]="'update'"></app-create-project-component>
+
+<section class="card padding-all__24px margin-top__24px">
+	<h1 class="color__danger">Delete Project</h1>
+	<p class="color__grey width__500px margin-top__16px">
+		Deleting this project will delete all of it's data including events, apps, and config.
+		<strong>Are you sure you want to delete this project?</strong>
+	</p>
+	<button class="button button__danger margin-top__28px" (click)="deleteProject()">Delete</button>
+</section>
diff --git a/web/ui/dashboard/src/app/private/pages/project/settings/settings.component.scss b/web/ui/dashboard/src/app/private/pages/project/settings/settings.component.scss
@@ -0,0 +1,3 @@
+.width__500px {
+	width: 500px;
+}
diff --git a/web/ui/dashboard/src/app/private/pages/project/settings/settings.component.ts b/web/ui/dashboard/src/app/private/pages/project/settings/settings.component.ts
@@ -1,13 +1,31 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { PrivateService } from 'src/app/private/private.service';
+import { GeneralService } from 'src/app/services/general/general.service';
+import { SettingsService } from './settings.service';
 
 @Component({
 	selector: 'app-settings',
 	templateUrl: './settings.component.html',
 	styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent implements OnInit {
-	constructor(public privateService: PrivateService) {}
+	isloading = false;
+
+	constructor(public privateService: PrivateService, private settingsService: SettingsService, private router: Router, private generalService: GeneralService) {}
 
 	ngOnInit(): void {}
+
+	async deleteProject() {
+		this.isloading = true;
+
+		try {
+			await this.settingsService.deleteProject();
+			this.generalService.showNotification({ message: 'Project deleted successfully', style: 'success' });
+			this.router.navigateByUrl('/projects');
+			this.isloading = false;
+		} catch (error) {
+			this.isloading = false;
+		}
+	}
 }
diff --git a/web/ui/dashboard/src/app/private/pages/project/settings/settings.module.ts b/web/ui/dashboard/src/app/private/pages/project/settings/settings.module.ts
@@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
 import { SettingsComponent } from './settings.component';
 import { Routes, RouterModule } from '@angular/router';
 import { CreateProjectComponentModule } from 'src/app/private/components/create-project-component/create-project-component.module';
+import { LoaderModule } from 'src/app/private/components/loader/loader.module';
 
 const routes: Routes = [{ path: '', component: SettingsComponent }];
 
 @NgModule({
 	declarations: [SettingsComponent],
-	imports: [CommonModule, RouterModule.forChild(routes), CreateProjectComponentModule]
+	imports: [CommonModule, RouterModule.forChild(routes), CreateProjectComponentModule, LoaderModule]
 })
 export class SettingsModule {}
diff --git a/web/ui/dashboard/src/app/private/pages/project/settings/settings.service.ts b/web/ui/dashboard/src/app/private/pages/project/settings/settings.service.ts
@@ -1,9 +1,26 @@
 import { Injectable } from '@angular/core';
+import { HTTP_RESPONSE } from 'convoy-app/lib/models/http.model';
+import { PrivateService } from 'src/app/private/private.service';
+import { HttpService } from 'src/app/services/http/http.service';
 
 @Injectable({
-  providedIn: 'root'
+	providedIn: 'root'
 })
 export class SettingsService {
+	constructor(private http: HttpService, private privateService: PrivateService) {}
 
-  constructor() { }
+	deleteProject(): Promise<HTTP_RESPONSE> {
+		return new Promise(async (resolve, reject) => {
+			try {
+				const sourceResponse = await this.http.request({
+					url: `${this.privateService.urlFactory('org')}/groups/${this.privateService.activeProjectDetails.uid}`,
+					method: 'delete'
+				});
+
+				return resolve(sourceResponse);
+			} catch (error: any) {
+				return reject(error);
+			}
+		});
+	}
 }
diff --git a/web/ui/dashboard/src/app/private/pages/project/sources/sources.component.ts b/web/ui/dashboard/src/app/private/pages/project/sources/sources.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { PAGINATION } from 'convoy-app/lib/models/global.model';
 import { SOURCE } from 'src/app/models/group.model';
 import { PrivateService } from 'src/app/private/private.service';
+import { GeneralService } from 'src/app/services/general/general.service';
 import { SourcesService } from './sources.service';
 
 @Component({
@@ -18,7 +19,7 @@ export class SourcesComponent implements OnInit {
 	isLoadingSources = false;
 	projectId = this.privateService.activeProjectDetails.uid;
 
-	constructor(private route: ActivatedRoute, private router: Router, private sourcesService: SourcesService, public privateService: PrivateService) {
+	constructor(private route: ActivatedRoute, private router: Router, private sourcesService: SourcesService, public privateService: PrivateService, private generalService: GeneralService) {
 		this.route.queryParams.subscribe(params => {
 			this.activeSource = this.sources?.content.find(source => source.uid === params?.id);
 		});
@@ -54,6 +55,7 @@ export class SourcesComponent implements OnInit {
 	}
 
 	closeCreateSourceModal() {
+		this.generalService.showNotification({ message: 'Source created successfully', style: 'success' });
 		this.router.navigateByUrl('/projects/' + this.projectId + '/sources');
 	}
 }
diff --git a/web/ui/dashboard/src/app/private/pages/projects/projects.component.html b/web/ui/dashboard/src/app/private/pages/projects/projects.component.html
@@ -1,72 +1,92 @@
-<div class="page padding-top__60px">
-	<div class="page__head">
-		<div>
-			<h3 class="margin-bottom__8px">Projects</h3>
-			<p class="page__head--sub">All your project's summary at a glance</p>
+<convoy-loader *ngIf="isloadingOrganisations"></convoy-loader>
+
+<ng-container *ngIf="!isloadingOrganisations && organisations.length > 0">
+	<div class="page padding-top__60px">
+		<div class="page__head">
+			<div>
+				<h3 class="margin-bottom__8px">Projects</h3>
+				<p class="page__head--sub">All your project's summary at a glance</p>
+			</div>
 		</div>
-	</div>
 
-	<ul class="grid projects-grid" *ngIf="isLoadingProjects">
-		<li *ngFor="let index of projectsLoaderIndex">
-			<div class="card rounded__8px border__all bg__white">
-				<div class="padding-x__24px padding-top__24px padding-bottom__14px border__bottom">
-					<div class="skeleton-loader header"></div>
-				</div>
-				<div class="flex flex__align-items-center border__bottom">
-					<div class="border__right padding-y__8px padding-x__24px">
-						<div class="skeleton-loader text"></div>
+		<ul class="grid projects-grid" *ngIf="isLoadingProjects">
+			<li *ngFor="let index of projectsLoaderIndex">
+				<div class="card rounded__8px border__all bg__white">
+					<div class="padding-x__24px padding-top__24px padding-bottom__14px border__bottom">
+						<div class="skeleton-loader header"></div>
 					</div>
-					<div class="flex flex__align-items-center flex__justify-between width__60 padding-y__8px padding-x__24px">
-						<div>
+					<div class="flex flex__align-items-center border__bottom">
+						<div class="border__right padding-y__8px padding-x__24px">
 							<div class="skeleton-loader text"></div>
 						</div>
-						<div><div class="skeleton-loader small"></div></div>
+						<div class="flex flex__align-items-center flex__justify-between width__60 padding-y__8px padding-x__24px">
+							<div>
+								<div class="skeleton-loader text"></div>
+							</div>
+							<div><div class="skeleton-loader small"></div></div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</li>
-	</ul>
+			</li>
+		</ul>
 
-	<ul class="grid projects-grid" *ngIf="!isLoadingProjects">
-		<li *ngFor="let project of projects">
-			<a [routerLink]="'/projects/' + project.uid" class="card rounded__8px bg__white display__block">
-				<div class="padding-x__24px padding-y__16px border__bottom flex flex__align-items-center flex__justify-between">
-					<div class="flex flex__align-items-center">
-						<div class="width__24px height__24px rounded__50px margin-right__8px flex flex__align-items-center flex__justify-center" style="background: var(--primary-color-500)">
-							<svg width="16" height="16" fill="var(--primary-color)" stroke="var(--primary-color)">
-								<use xlink:href="#top-right-icon"></use>
-							</svg>
+		<ul class="grid projects-grid" *ngIf="!isLoadingProjects">
+			<li *ngFor="let project of projects">
+				<a [routerLink]="'/projects/' + project.uid" class="card rounded__8px bg__white display__block">
+					<div class="padding-x__24px padding-y__16px border__bottom flex flex__align-items-center flex__justify-between">
+						<div class="flex flex__align-items-center">
+							<div class="width__24px height__24px rounded__50px margin-right__8px flex flex__align-items-center flex__justify-center" style="background: var(--primary-color-500)">
+								<svg width="16" height="16" fill="var(--primary-color)" stroke="var(--primary-color)">
+									<use xlink:href="#top-right-icon"></use>
+								</svg>
+							</div>
+							<h4 class="pointer-cursor">{{ project.name }}</h4>
 						</div>
-						<h4 class="pointer-cursor">{{ project.name }}</h4>
+						<div class="tag tag--Primary font__10px text__uppercase">{{ project.type || '-' }}</div>
 					</div>
-					<div class="tag tag--Primary font__10px text__uppercase">{{ project.type || '-' }}</div>
-				</div>
 
-				<div class="flex flex__align-items-center">
-					<div class="font__12px font__weight-500 color__grey border__right width__40 padding-y__8px padding-x__24px">
-						<span class="color__black margin-right__8px">{{ project.statistics.messages_sent }}</span>
-						<span class="color__grey">Events Sent</span>
-					</div>
-					<div class="flex flex__align-items-center flex__justify-between flex__align-items-center width__60 padding-y__8px padding-x__24px">
-						<div class="font__12px font__weight-500 color__grey">
-							<span class="color__black margin-right__8px">{{ project.statistics.total_apps }}</span>
-							<span class="color__grey">Apps</span>
+					<div class="flex flex__align-items-center">
+						<div class="font__12px font__weight-500 color__grey border__right width__40 padding-y__8px padding-x__24px">
+							<span class="color__black margin-right__8px">{{ project.statistics.messages_sent }}</span>
+							<span class="color__grey">Events Sent</span>
+						</div>
+						<div class="flex flex__align-items-center flex__justify-between flex__align-items-center width__60 padding-y__8px padding-x__24px">
+							<div class="font__12px font__weight-500 color__grey">
+								<span class="color__black margin-right__8px">{{ project.statistics.total_apps }}</span>
+								<span class="color__grey">Apps</span>
+							</div>
+							<svg width="20" height="20" fill="var(--primary-color)">
+								<use xlink:href="#arrow-right-icon"></use>
+							</svg>
 						</div>
-						<svg width="20" height="20" fill="var(--primary-color)">
-							<use xlink:href="#arrow-right-icon"></use>
-						</svg>
 					</div>
-				</div>
-			</a>
-		</li>
+				</a>
+			</li>
+
+			<li>
+				<a routerLink="./new" class="card new-project-card rounded__8px bg__white flex flex__align-items-center flex__justify-center padding-y__32px">
+					<svg width="22" height="22" class="margin-right__8px" fill="var(--primary-color)">
+						<use xlink:href="#plus-icon"></use>
+					</svg>
+					<span class="color__primary font__weight-500">Create new project</span>
+				</a>
+			</li>
+		</ul>
+	</div>
+</ng-container>
+
+<div class="page padding-top__60px" *ngIf="organisations.length == 0">
+	<div class="page--empty-state">
+		<div class="page--empty-state--img">
+			<img src="/assets/img/org-empty-img.svg" alt="add group empty" />
+		</div>
+		<h3>You have no organisation yet</h3>
+		<p>Create an organisation to get started with sending/receiving webhooks</p>
+		<button class="button button__primary" (click)="showOrganisationModal = true">Create Organisation</button>
+	</div>
+</div>
 
-		<li>
-			<a routerLink="./new" class="card new-project-card rounded__8px bg__white flex flex__align-items-center flex__justify-center padding-y__32px">
-				<svg width="22" height="22" class="margin-right__8px" fill="var(--primary-color)">
-					<use xlink:href="#plus-icon"></use>
-				</svg>
-				<span class="color__primary font__weight-500">Create new project</span>
-			</a>
-		</li>
-	</ul>
+<div class="_overlay z-index--2" *ngIf="showOrganisationModal" (click)="showOrganisationModal = false"></div>
+<div class="modal modal__right z-index--3" *ngIf="showOrganisationModal">
+	<app-create-organisation (closeModal)="setOrganisation()"></app-create-organisation>
 </div>