fuzi_fauzia/hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-04-19 12:53:45 +07:00
commit 71a3a661dc
1943 changed files with 246917 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/content/pages/dropzone/dropzone.component.css Normal file
View File

@@ -0,0 +1,31 @@
* {
font-family: Lato;
}
ngx-dropzone,
.custom-dropzone {
margin: 20px;
}
:host ::ng-deep .dropzone {
max-width: fit-content !important;
}
:host ::ng-deep .dropzone1 {
position: unset !important;
overflow-wrap: break-word;
}
:host ::ng-deep .dz-default {
font-size: 2rem;
color: #666ee8 !important;
text-align: center;
}
:host ::ng-deep ._dropzone{
border: 2px dashed #666ee8;
}
:host ::ng-deep .custom-dropzone {
height: 250px;
background: #333;
color: #fff;
border: 5px dashed #666ee8 !important;
}

127
src/app/content/pages/dropzone/dropzone.component.html Normal file
View File

@@ -0,0 +1,127 @@
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<!-- Dropzone section start -->
<section id="dropzone-examples" *blockUI="'dropzoneGallery'; message: 'Loading'">
<div class="row">
<div class="col-12">
<m-card [options]="options" (reloadFunction)="reloadDorpzone($event)">
<ng-container mCardHeaderTitle>
Single File Upload
</ng-container>
<ng-container mCardBody>
<p class="card-text">This example uploads a single file using ngx-dropzone.
User can either click on the dropzone area and select single files or just drop all selected files
in the dropzone area. This example is the most basic setup for dropzone.</p>
<div class = "card-content collapse show">
<div class ="card-header">
<h4 class="card-title">The default dropzone.</h4>
</div>
<ngx-dropzone class="_dropzone" (change)="SelectSingleFile($event)">
<ngx-dropzone-label>
<div class="dz-default dz-message">
<span class = "dz-default">Drop files here to upload</span>
</div>
</ngx-dropzone-label>
<ngx-dropzone-preview class="dropzone" *ngFor="let f of file" [removable]="true" (removed)="SinglefileonRemove(f)">
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
<div class ="card-header">
<h4 class="card-title">The disabled but expanding dropzone.</h4>
</div>
<ngx-dropzone class="_dropzone" (change)="SelectSingleFile($event)" [disabled]="true" [expandable]="true">
<ngx-dropzone-label>
<div class="dz-default dz-message">
<span class = "dz-default">Drop files here to upload</span>
</div>
</ngx-dropzone-label>
<ngx-dropzone-preview class="dropzone" *ngFor="let f of file">
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
<div class ="card-header">
<h4 class="card-title">A custom dropzone.</h4>
</div>
<div class="custom-dropzone" ngx-dropzone [accept]="'image/*'" (change)="SelectSingleFile($event)">
<ngx-dropzone-label>
<div class="dz-default dz-message">
<span class = "dz-default">My custome dropzone</span>
</div>
</ngx-dropzone-label>
<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of file" [file]="f" [removable]="true" (removed)="SinglefileonRemove(f)">
<ngx-dropzone-label class="dropzone1">{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-image-preview>
</div>
</div>
</ng-container>
</m-card>
</div>
</div>
<div class="row">
<div class="col-12">
<m-card [options]="options" (reloadFunction)="reloadDorpzone($event)">
<ng-container mCardHeaderTitle>
Multiple File Upload
</ng-container>
<ng-container mCardBody>
<p class="card-text">This example uploads a multiple files using ngx-dropzone.
By default, dropzone is a multiple file uploader. User can either click
on the dropzone area and select multiple files or just drop all selected files
in the dropzone area. This example is the most basic setup for dropzone.</p>
<ngx-dropzone class="_dropzone" (change)="SelectMultipleFile($event)">
<ngx-dropzone-label>
<div class="dz-default dz-message">
<span class = "dz-default">Drop files here to upload</span>
</div>
</ngx-dropzone-label>
<ngx-dropzone-preview class="dropzone" *ngFor="let f of files" [removable]="true" (removed)="MultiplefilesonRemove(f)">
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
<div class ="card-header">
<h4 class="card-title">The disabled but expanding dropzone.</h4>
</div>
<ngx-dropzone class="_dropzone" (change)="SelectMultipleFile($event)" [disabled]="true" [expandable]="true">
<ngx-dropzone-label>
<div class="dz-default dz-message">
<span class = "dz-default">Drop files here to upload</span>
</div>
</ngx-dropzone-label>
<ngx-dropzone-preview class="dropzone" *ngFor="let f of files">
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
<div class ="card-header">
<h4 class="card-title">A custom dropzone.</h4>
</div>
<div class="custom-dropzone" ngx-dropzone [accept]="'image/*'" (change)="SelectMultipleFile($event)">
<ngx-dropzone-label>
<div class="dz-default dz-message">
<span class = "dz-default">My custome dropzone</span>
</div>
</ngx-dropzone-label>
<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f" [removable]="true" (removed)="MultiplefilesonRemove(f)">
<ngx-dropzone-label class="dropzone1">{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-image-preview>
</div>
</ng-container>
</m-card>
</div>
</div>
</section>
<!-- // Dropzone section end -->
</div>
</div>
</div>
<!-- END: Content-->

25
src/app/content/pages/dropzone/dropzone.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DropzoneComponent } from './dropzone.component';
describe('DropzoneComponent', () => {
let component: DropzoneComponent;
let fixture: ComponentFixture<DropzoneComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DropzoneComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(DropzoneComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

60
src/app/content/pages/dropzone/dropzone.component.ts Normal file
View File

@@ -0,0 +1,60 @@
import { Component, OnInit } from '@angular/core';
import { NgBlockUI, BlockUI } from 'ng-block-ui';
@Component({
selector: 'app-dropzone',
templateUrl: './dropzone.component.html',
styleUrls: ['./dropzone.component.css']
})
export class DropzoneComponent implements OnInit {
public breadcrumb: any;
@BlockUI('dropzoneGallery') blockUIDropzone: NgBlockUI;
constructor() { }
ngOnInit(): void {
this.breadcrumb = {
'mainlabel': 'Dropzone',
'links': [
{
'name': 'Home',
'isLink': true,
'link': '/dashboard/sales'
},
{
'name': 'Page',
'isLink': true,
'link': ''
},
{
'name': 'Dropzone',
'isLink': false
}
]
};
}
options = {
close: true,
expand: true,
minimize: true,
reload: true
};
files: File[] = [];
SelectMultipleFile(event) {
this.files.push(...event.addedFiles);
}
file: any;
SelectSingleFile(event) {
this.file = event.addedFiles;
}
MultiplefilesonRemove(event) {
this.files.splice(this.files.indexOf(event), 1);
}
SinglefileonRemove(event) {
this.file.splice(this.files.indexOf(event), 1);
}
reloadDorpzone() {
this.blockUIDropzone.start('Loading..');
setTimeout(() => {
this.blockUIDropzone.stop();
}, 2500);
}
}

25
src/app/content/pages/dropzone/dropzone.module.ts Normal file
View File

@@ -0,0 +1,25 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DropzoneComponent } from './dropzone.component';
import { RouterModule } from '@angular/router';
import { NgxDropzoneModule } from 'ngx-dropzone';
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
import { BlockUIModule } from 'ng-block-ui';
import { CardModule } from '../../partials/general/card/card.module';
@NgModule({
declarations: [DropzoneComponent],
imports: [
CommonModule,
NgxDropzoneModule,
BreadcrumbModule,
BlockUIModule,
CardModule,
RouterModule.forChild([
{
path: 'dropzone',
component: DropzoneComponent
}
])
]
})
export class DropzoneModule { }