Skip to content
This repository was archived by the owner on May 26, 2025. It is now read-only.

Commit 68e83d7

Browse files
Andrei0872Andrei0872
authored
feat/observers: update to new ui (#287)
1 parent 36bf29a commit 68e83d7

40 files changed

Lines changed: 1867 additions & 372 deletions

‎src/_variables.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1-
$bg-global: #f2f2f2;
1+
$bg-global: #f8f8f8 /* #f2f2f2 */;
22

33
$primary: #5e288d;
44
$secondary: #333;
55
$yellow: #fbd844;
66
$danger: #fd0001;
77
$gray: #ddd2e7;
88
$gray-dark: #7b8184;
9+
10+
$base-gray: #AFAFAF;
11+
$light-gray: #F3F1F1;
12+
$muted-gray: #B6B6B6;
13+
$readable-dark-gray: #6B6B6B;
14+
$darker-gray: #454545;
15+
16+
$primary-purple: #5F288D;
17+
$delete-color: #F16359;

‎src/app/components/components.module.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ import {OptionComponent} from './forms/option/option.component';
2626
import {FormsComponent} from './forms/forms.component';
2727
import {DragDropModule} from '@angular/cdk/drag-drop';
2828

29+
import { TableModule } from '../table/table.module'
30+
import { ObserverImportComponent } from './observers/observer-import/observer-import.component';
31+
2932
export let components = [
3033
AnswerComponent,
3134
AnswerListComponent,
@@ -50,6 +53,7 @@ export let components = [
5053
StatisticsValueComponent,
5154
NotificationsComponent,
5255
LoginComponent,
56+
ObserverImportComponent,
5357
];
5458

5559
@NgModule({
@@ -58,7 +62,8 @@ export let components = [
5862
imports: [
5963
SharedModule,
6064
NgMultiSelectDropDownModule.forRoot(),
61-
DragDropModule
65+
DragDropModule,
66+
TableModule,
6267
]
6368
})
6469
export class ComponentsModule {

‎src/app/components/header/header.component.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@
99
opacity: 0;
1010
display: block;
1111
transition: max-height .2s;
12+
pointer-events: none;
1213
}
1314

1415
.collapse.show {
1516
max-height: 20rem;
1617
opacity: 1;
1718
transition: max-height .2s, opacity .2s;
19+
pointer-events: all;
1820
}
1921

2022
.nav-item {

‎src/app/components/observers/observer-import/observer-import.component.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<div class="container-fluid">
2+
<div class="d-flex mb-4">
3+
<div class="mr-auto">
4+
<app-base-button
5+
[custom-styles]="{ fontSize: '1.2rem' }"
6+
[variant]="BaseButtonVariants.ALLTRANSPARENT"
7+
[routerLink]="['/observatori']"
8+
>
9+
<div class="d-flex align-items-center">
10+
<svg class="c-profile__back-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
11+
xmlns="http://www.w3.org/2000/svg">
12+
<path d="M19 12H5" stroke="#6B6B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
13+
<path d="M8 16L4 12L8 8" stroke="#6B6B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
14+
</svg>
15+
&nbsp;
16+
<span>{{ 'BACK' | translate }}</span>
17+
</div>
18+
</app-base-button>
19+
</div>
20+
</div>
21+
22+
<div class="mb-2 mt-4 ml-3 c-import__title">
23+
<h2 class="d-inline h4">{{ 'OBSERVERS_IMPORT' | translate }}</h2>
24+
</div>
25+
26+
<div class="card-body c-import__card-body">
27+
<form
28+
novalidate
29+
[formGroup]="formGroup"
30+
(ngSubmit)="onSubmit()"
31+
>
32+
<div class="form-group">
33+
<label for="ngoId">ID Ngo</label>
34+
<input
35+
formControlName="ngoId"
36+
id="ngoId"
37+
type="text"
38+
class="form-control"
39+
/>
40+
</div>
41+
42+
<div class="form-group">
43+
<label for="file">{{ 'SELECT_FILE' | translate }}</label>
44+
<input
45+
type="file"
46+
class="form-control"
47+
id="file"
48+
(change)="onFileChange($event)"
49+
/>
50+
</div>
51+
52+
<app-base-button
53+
class="c-profile__button mt-3"
54+
[custom-styles]="{ fontWeight: 'normal' }"
55+
[variant]="BaseButtonVariants.BGYELLOW"
56+
type="submit"
57+
[disabled]="formGroup.invalid"
58+
>
59+
{{ 'IMPORT' | translate }}
60+
</app-base-button>
61+
</form>
62+
</div>
63+
</div>

‎src/app/components/observers/observer-import/observer-import.component.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@import '../../../../variables';
2+
3+
$label-text-color: #636363;
4+
$border-color: #EDEDED;
5+
6+
.c-import {
7+
&__title {
8+
color: $darker-gray;
9+
}
10+
11+
12+
&__card-body {
13+
width: 50%;
14+
15+
@media all and (max-width: 700px) {
16+
& {
17+
width: 100%;
18+
}
19+
}
20+
21+
@media all and (min-width: 700px) and (max-width: 920px) {
22+
& {
23+
width: 75%;
24+
}
25+
}
26+
27+
input.form-control[class] {
28+
padding: 1.4rem 0.7rem;
29+
border-radius: 6px;
30+
border: 1px solid $border-color;
31+
}
32+
}
33+
}
34+
35+
.form-group {
36+
label {
37+
color: $label-text-color;
38+
font-size: 1.15rem;
39+
}
40+
}

‎src/app/components/observers/observer-import/observer-import.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ObserverImportComponent } from './observer-import.component';
4+
5+
describe('ObserverImportComponent', () => {
6+
let component: ObserverImportComponent;
7+
let fixture: ComponentFixture<ObserverImportComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ObserverImportComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ObserverImportComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/components/observers/observer-import/observer-import.component.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Component, Inject, OnInit } from '@angular/core';
2+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3+
import { ToastrService } from 'ngx-toastr';
4+
import { ObserversService } from 'src/app/services/observers.service';
5+
import { BASE_BUTTON_VARIANTS, Variants } from 'src/app/shared/base-button/base-button.component';
6+
7+
@Component({
8+
selector: 'observer-import',
9+
templateUrl: './observer-import.component.html',
10+
styleUrls: ['./observer-import.component.scss']
11+
})
12+
export class ObserverImportComponent implements OnInit {
13+
14+
formGroup: FormGroup
15+
16+
constructor (
17+
private fb: FormBuilder,
18+
private toastr: ToastrService,
19+
private observerService: ObserversService,
20+
@Inject(BASE_BUTTON_VARIANTS) public BaseButtonVariants: typeof Variants
21+
) { }
22+
23+
ngOnInit(): void {
24+
this.formGroup = this.fb.group({
25+
ngoId: ['', Validators.required],
26+
file: ['', Validators.required],
27+
});
28+
}
29+
30+
onSubmit () {
31+
const formData = new FormData();
32+
formData.append('file', this.formGroup.get('file').value);
33+
formData.append('ongId', this.formGroup.get('ngoId').value);
34+
35+
this.observerService.uploadCsv(formData).subscribe(
36+
(res) => {
37+
this.toastr.success(
38+
`${res} observers have been added successfully`,
39+
'Success'
40+
);
41+
},
42+
(err) => {
43+
this.toastr.error('Encountered error while uploading csv', 'Error');
44+
}
45+
);
46+
}
47+
48+
onFileChange(event) {
49+
if (event.target.files.length > 0) {
50+
const file = event.target.files[0];
51+
this.formGroup.get('file').setValue(file);
52+
}
53+
}
54+
}

0 commit comments

Comments
 (0)