Skip to content

Commit f3ceb9e

Browse files
aledguedesaledguedes
committed
ajuste no componente de upload
1 parent 54bbffe commit f3ceb9e

21 files changed

Lines changed: 1789 additions & 1511 deletions

‎db.json‎

Lines changed: 1360 additions & 1317 deletions
Large diffs are not rendered by default.

‎src/app/app.routes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const routes: Routes = [
5555
loadComponent: () => import('./pages/categories/components/category-edit/category-edit.component').then(c => c.CategoryEditComponent),
5656
}
5757
]
58-
}
58+
},
5959
]
6060
},
6161
];

‎src/app/pages/components/upload-box/upload-box.component.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="input-bx">
2+
<h6 class="mb-4 text-center">Imagens do produto</h6>
3+
<form id="file-upload-form" class="uploader">
4+
<input [disabled]="countImages >= numMaxImages" id="upload" type="file" name="file-upload" multiple accept="image/*" (change)="onSelectFile($event)"
5+
hidden />
6+
<label for="upload" class="upload-label">
7+
<span><i class="ri-upload-cloud-line"></i></span>
8+
<p class="m-0 py-3">Select a file or drag here</p>
9+
</label>
10+
</form>
11+
@if (countImages >= numMaxImages) {
12+
<small class="max-image text-rigth">Número máximo de imagens para upload atingido!</small>
13+
}
14+
</div>

‎src/app/pages/components/upload-box/upload-box.component.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
$theme: #454cad;
2+
$dark-text: #5f6982;
3+
4+
h6 {
5+
line-height: 1;
6+
color: $theme;
7+
}
8+
9+
.box-input {
10+
width: 100%;
11+
border-radius: 5px;
12+
}
13+
14+
.upload-label {
15+
width: 100%;
16+
min-height: 100px;
17+
background-color: #fafafa;
18+
display: flex;
19+
flex-direction: column;
20+
justify-content: center;
21+
align-items: center;
22+
border: 2px dashed #c8c7c7;
23+
}
24+
25+
.upload-label span {
26+
font-size: 50px;
27+
color: $theme;
28+
}
29+
30+
.upload-label span p {
31+
color: $theme;
32+
}
33+
34+
.max-image {
35+
color: var(--red-600);
36+
font-weight: 700;
37+
}

‎src/app/pages/components/upload-box/upload-box.component.spec.ts‎

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

‎src/app/pages/components/upload-box/upload-box.component.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Component, Input } from '@angular/core';
2+
import { DataRxjsService } from '../../../services/rxjs/data-rxjs.service';
3+
4+
@Component({
5+
selector: 'app-upload-box',
6+
standalone: true,
7+
imports: [],
8+
templateUrl: './upload-box.component.html',
9+
styleUrl: './upload-box.component.scss'
10+
})
11+
export class UploadBoxComponent {
12+
@Input() numMaxImages: number = 0;
13+
@Input() countImages: number = 0;
14+
15+
selectedFiles?: FileList;
16+
previews: FileUp[] = [];
17+
selectedFileNames: string[] = [];
18+
19+
constructor(
20+
private rxjs: DataRxjsService
21+
) { }
22+
23+
onSelectFile(event: any) {
24+
let previewsImages: any[] = [];
25+
this.selectedFiles = event.target.files;
26+
if (this.selectedFiles && this.selectedFiles.length > 0) {
27+
for (let i = 0; i < this.selectedFiles.length; i++) {
28+
const file = this.selectedFiles[i];
29+
const reader = new FileReader();
30+
31+
reader.onload = (e: any) => {
32+
previewsImages.push({
33+
name: file.name,
34+
type: file.type,
35+
size: this.formatBytes(file.size),
36+
url: e.target.result
37+
});
38+
this.rxjs.sendImagesToPreview(previewsImages);
39+
};
40+
41+
reader.readAsDataURL(file);
42+
}
43+
}
44+
}
45+
46+
formatBytes(bytes: number) {
47+
if (bytes === 0) return '0 Bytes';
48+
const k = 1024;
49+
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
50+
const i = Math.floor(Math.log(bytes) / Math.log(k));
51+
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
52+
}
53+
}
54+
55+
interface FileUp {
56+
name: string,
57+
url: string,
58+
size: string,
59+
type: string
60+
}

‎src/app/pages/components/upload-preview/upload-preview.component.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@if (previews.length > 0) {
2+
<div id="file-wapper" class="w-100">
3+
<h3 class="uploaded mb-4 text-center">Imagens selecionadas</h3>
4+
<div class="grid">
5+
@for (preview of previews; track $index) {
6+
<div class="col-6">
7+
<div class="show-files-box border w-100" style="background: #FFF;">
8+
<div class="left">
9+
<img [src]="preview.url" class="preview-image" width="80px" />
10+
<div class="flex-column align-items-center justify-content-center ms-3">
11+
<p class="file-type text-center">{{ preview.type }}</p>
12+
<p class="m-0 file-title">{{ preview.name }}</p>
13+
<p class="m-0 file-size">{{ preview.size }}</p>
14+
</div>
15+
</div>
16+
</div>
17+
<div class="rigth">
18+
<span class="check-file"><i class="ri-check-line"></i></span>
19+
</div>
20+
</div>
21+
}
22+
</div>
23+
</div>
24+
}

‎src/app/pages/components/upload-preview/upload-preview.component.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
$theme: #454cad;
2+
$dark-text: #5f6982;
3+
4+
.uploaded {
5+
// margin: 30px 0;
6+
font-size: 16px;
7+
font-weight: 700;
8+
color: $theme;
9+
}
10+
11+
.show-files-box {
12+
display: flex;
13+
align-items: center;
14+
justify-content: space-between;
15+
margin: 10px 0;
16+
padding: 10px 15px;
17+
box-shadow: #0000000d 0px 0px 0px 1px,
18+
#d1d5db3d 0px 0px 0px 1px inset;
19+
// min-height: 90px;
20+
}
21+
22+
.show-files-box .left {
23+
display: flex;
24+
align-items: center;
25+
flex-wrap: wrap;
26+
gap: 10px;
27+
}
28+
29+
.show-files-box .file-type {
30+
background-color: $theme;
31+
color: #FFF;
32+
padding: 5px 10px;
33+
text-transform: capitalize;
34+
font-weight: 700;
35+
border-radius: 3px;
36+
font-size: 13px;
37+
}
38+
39+
.show-files-box .file-title {
40+
font-size: 16px;
41+
font-weight: 600;
42+
}
43+
44+
.show-files-box .rigth .check-file {
45+
background-color: #256320;
46+
color: #FFF;
47+
width: 40px;
48+
height: 40px;
49+
font-size: 24px;
50+
line-height: 25px;
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
font-weight: 700;
55+
border-radius: 50%;
56+
}

‎src/app/pages/components/upload-preview/upload-preview.component.spec.ts‎

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

‎src/app/pages/components/upload-preview/upload-preview.component.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Component, EventEmitter, Input, Output } from '@angular/core';
2+
import { DataRxjsService } from '../../../services/rxjs/data-rxjs.service';
3+
4+
@Component({
5+
selector: 'app-upload-preview',
6+
standalone: true,
7+
imports: [],
8+
templateUrl: './upload-preview.component.html',
9+
styleUrl: './upload-preview.component.scss'
10+
})
11+
export class UploadPreviewComponent {
12+
13+
@Input() maxImages: number = 0;
14+
@Output() countImgaes: any = new EventEmitter<number>();
15+
16+
previews: any[] = [];
17+
18+
constructor(
19+
private rxjs: DataRxjsService
20+
) { }
21+
22+
ngOnInit(): void {
23+
this.rxjs.previewImages$.subscribe(images => {
24+
if (images) {
25+
const maxImages = this.maxImages;
26+
const totalImages = this.previews.length + images.length;
27+
28+
if (totalImages <= maxImages) {
29+
images.forEach((item: any) => {
30+
this.previews.push(item);
31+
});
32+
} else {
33+
const remainingSlots = maxImages - this.previews.length;
34+
const newImages = images.slice(0, remainingSlots);
35+
36+
newImages.forEach((item: any) => {
37+
this.previews.push(item);
38+
});
39+
}
40+
}
41+
this.countImgaes.emit(this.previews.length);
42+
});
43+
44+
}
45+
46+
}

0 commit comments

Comments
 (0)