Skip to content

Commit

Permalink
feat(graph): connect edge to back (#58)
Browse files Browse the repository at this point in the history 
Co-authored-by: Arash <[email protected]>
  • Loading branch information
@Arminmow @Arash-Azarpoor
Arminmow and Arash-Azarpoor authored Aug 26, 2024
1 parent f12ccbd commit b958bba
Show file tree
Hide file tree
Showing 11 changed files with 319 additions and 85 deletions.
20 changes: 19 additions & 1 deletion angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@
"outputPath": "dist/group4-front",
"index": "src/index.html",
"browser": "src/main.ts",
"fileReplacements": [
{
"replace": "src/environments/environment.prod.ts",
"with": "src/environments/environment.ts"
}
],
"polyfills": [
"zone.js"
],
Expand Down Expand Up @@ -56,12 +62,24 @@
"maximumError": "8kB"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
"sourceMap": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
]
}
},
"defaultConfiguration": "production"
Expand Down
141 changes: 90 additions & 51 deletions ...nents/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,76 +6,115 @@
@switch (current) { @case (0) {
<div class="upload-container">
<h4 nz-typography>Create an edge category</h4>
<p nz-paragraph>Or dont , you can use existing categories</p>
<input nz-input placeholder="Edge category" type="number" />
<div class="input-container">
<p nz-paragraph>Or dont , you can use existing categories</p>
<input nz-input placeholder="Edge category" type="text" [(ngModel)]="edgeCategory" />
</div>
<div class="upload-container__btn-container">

<div class="upload-container__btn-container__nav-btn-container">
@if (current !==0) {
<button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round" (click)="back()">Back</button>
}
<button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round" (click)="next()">Next</button>
</div>
<button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round">Submit</button>
<button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round" (click)="addEdgeCategory()">
Submit
</button>
</div>
</div>
} @case (1) {
<div class="upload-container">
<h4 nz-typography>Upload edges file</h4>
<h5 nz-typography>Select which edge category</h5>
<nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select an edge category">
<nz-option nzLabel="Jack" nzValue="jack"></nz-option>
<nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
<nz-option nzLabel="Tom" nzValue="tom"></nz-option>
</nz-select>
<h5 nz-typography>Edge <span nz-typography nz-tooltip nzTooltipTitle="Unique key header name"><u>UKHN</u></span></h5>
<input nz-input placeholder="UniqueKey header name" type="number" />
<div class="key-container">
<div>
<form nz-form [formGroup]="uploadForm">
<div class="input-container">
<h5 nz-typography>Select which edge category</h5>
<nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select an edge category" [(ngModel)]="edgeCategory" formControlName="EdgeCategoryName" >
@for (item of edgeCategoryList; track $index) {
<nz-option nzLabel="{{ item }}" nzValue="{{ item }}"></nz-option>
}
</nz-select>
</div>
<div class="input-container">
<h5 nz-typography>
Edge <span nz-typography nz-tooltip nzTooltipTitle="Unique key header name"><u>UKHN</u></span>
</h5>
<input nz-input placeholder="UniqueKey header name" type="text" formControlName="UniqueKeyHeaderName" />
</div>
<div class="key-container">
<div class="input-container">
<h5 nz-typography>Source node category</h5>
<nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a node category category">
<nz-option nzLabel="Jack" nzValue="jack"></nz-option>
<nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
<nz-option nzLabel="Tom" nzValue="tom"></nz-option>
<nz-select
nzShowSearch
nzAllowClear
nzPlaceHolder="Select a node category"
[(ngModel)]="sourceNodeCategory"
formControlName="SourceNodeCategoryName"
style="width: 100%;"
>
@for (item of nodeCategoryList; track $index) {
<nz-option nzLabel="{{ item }}" nzValue="{{ item }}"></nz-option>
}
</nz-select>
</div>
<div class="input-container">
<h5 nz-typography>
Source <span nz-typography nz-tooltip nzTooltipTitle="Unique key header name"><u>UKHN</u></span>
</h5>
<input nz-input placeholder="Source UKHN" type="text" formControlName="SourceNodeHeaderName" />
</div>
</div>
<div>
<h5 nz-typography>Source <span nz-typography nz-tooltip nzTooltipTitle="Unique key header name"><u>UKHN</u></span></h5>
<input nz-input placeholder="Source UKHN" type="number" />
</div>

</div>
<div class="key-container">
<div>
<div class="key-container">
<div class="input-container">
<h5 nz-typography>Target node category</h5>
<nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a node category category">
<nz-option nzLabel="Jack" nzValue="jack"></nz-option>
<nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
<nz-option nzLabel="Tom" nzValue="tom"></nz-option>
<nz-select
nzShowSearch
nzAllowClear
nzPlaceHolder="Select a node category"
[(ngModel)]="targetNodeCategory"
formControlName="TargetNodeCategoryName"
style="width: 100%;"
>
@for (item of nodeCategoryList; track $index) {
<nz-option nzLabel="{{ item }}" nzValue="{{ item }}"></nz-option>
}
</nz-select>
</div>
<div class="input-container">
<h5 nz-typography>
Target <span nz-typography nz-tooltip nzTooltipTitle="Unique key header name"><u>UKHN</u></span>
</h5>
<input nz-input placeholder="Target UKHN" type="text" formControlName="TargetNodeHeaderName" />
</div>
</div>
<div>
<h5 nz-typography>Target <span nz-typography nz-tooltip nzTooltipTitle="Unique key header name"><u>UKHN</u></span></h5>
<input nz-input placeholder="Target UKHN" type="number" />
<div class="input-container">
<h5 nz-typography>Upload edges file</h5>
<nz-upload
nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
[nzHeaders]="{ authorization: 'authorization-text' }"
(nzChange)="handleChange($event)"
[nzBeforeUpload]="beforeUpload"
>
<button nz-button>
<span nz-icon nzType="upload"></span>
Click to Upload
</button>
</nz-upload>
</div>
</div>
<h5 nz-typography>Upload edges file</h5>
<nz-upload
nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
[nzHeaders]="{ authorization: 'authorization-text' }"
(nzChange)="handleChange($event)"
>
<button nz-button>
<span nz-icon nzType="upload"></span>
Click to Upload
</button>
</nz-upload>
<div class="upload-container__btn-container">
<button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round" (click)="back()">Back</button>
<div class="upload-container__btn-container__nav-btn-container">

<button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round">Submit</button>
<div class="upload-container__btn-container">
<button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round" (click)="back()">Back</button>
<div class="upload-container__btn-container__nav-btn-container">
<button
class="btn"
nz-button
nzType="primary"
[nzSize]="'default'"
nzShape="round"
(click)="submit()"
[disabled]="!uploadForm.valid">
Submit
</button>
</div>
</div>
</div>
</form>
</div>
} }
57 changes: 41 additions & 16 deletions ...nents/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,50 @@
.upload-container{
.upload-container {
display: flex;
flex-direction: column;
gap: 2rem;

h4,
h5 {
margin: 0;
}

.input-container {
display: flex;
flex-direction: column;
gap: 1rem;
}

&__btn-container {
display: flex;
justify-content: space-between;

&__nav-btn-container {
display: flex;
gap: 1rem;
}
}

form {
display: flex;
flex-direction: column;
gap: 2rem;

&__btn-container{
display: flex;
justify-content: space-between;

&__nav-btn-container{
display: flex;
gap: 1rem;
}
button:disabled {
color: rgba(0, 0, 0, 0.25);
border-color: #d9d9d9;
background: #f5f5f5;
text-shadow: none;
box-shadow: none;
}
}
}

.btn{
background-color: #1f66a8;
border: 0;
.btn {
background-color: #1f66a8;
border: 0;
}

.key-container{
display: flex;
gap: 1rem;
}
.key-container {
display: flex;
gap: 1rem;
}
4 changes: 3 additions & 1 deletion ...ts/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { UploadEdgeComponent } from './upload-edge.component';
import { provideHttpClient } from '@angular/common/http';

describe('UploadEdgeComponent', () => {
let component: UploadEdgeComponent;
let fixture: ComponentFixture<UploadEdgeComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [UploadEdgeComponent]
imports: [UploadEdgeComponent],
providers: [provideHttpClient()]
})
.compileComponents();

Expand Down
Loading

0 comments on commit b958bba

Please sign in to comment.