dromo-uploader-angular 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -21
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -6,38 +6,43 @@ Check out our [developer documentation here](https://developer.dromo.io/)
|
|
|
6
6
|
|
|
7
7
|
Install the packge using `npm install dromo-uploader-angular`
|
|
8
8
|
|
|
9
|
-
Import
|
|
9
|
+
Import module and add to imports
|
|
10
10
|
|
|
11
11
|
```TypeScript
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
// app.module.ts
|
|
13
|
+
|
|
14
|
+
import { DromoUploaderModule } from 'dromo-uploader-angular';
|
|
14
15
|
|
|
15
16
|
@NgModule({
|
|
16
|
-
declarations: [AppComponent
|
|
17
|
+
declarations: [AppComponent],
|
|
17
18
|
imports: [BrowserModule, DromoUploaderModule],
|
|
18
19
|
providers: [],
|
|
19
20
|
bootstrap: [AppComponent],
|
|
20
21
|
})
|
|
22
|
+
|
|
21
23
|
export class AppModule {}
|
|
22
24
|
```
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
The DromoUploaderModule provides the Dromo Uploader component, with the selector `lib-dromo-uploader`.
|
|
27
|
+
|
|
28
|
+
You may create a wrapper component which provides the Dromo Uploader component with
|
|
29
|
+
your configuration.
|
|
25
30
|
|
|
26
31
|
```TypeScript
|
|
32
|
+
// my-uploader.component.ts
|
|
33
|
+
|
|
34
|
+
import { Component } from '@angular/core';
|
|
27
35
|
import {
|
|
28
36
|
DromoMethods,
|
|
29
37
|
IColumnHook,
|
|
30
|
-
IColumnHookInput,
|
|
31
38
|
IRowDeleteHook,
|
|
32
|
-
IDeveloperField,
|
|
33
|
-
IDeveloperSettings,
|
|
34
39
|
IRowHook,
|
|
35
|
-
IUser,
|
|
36
40
|
IStepHook,
|
|
37
41
|
IUploadStepData,
|
|
38
42
|
} from 'dromo-uploader-angular';
|
|
43
|
+
|
|
39
44
|
@Component({
|
|
40
|
-
selector: '
|
|
45
|
+
selector: 'my-uploader',
|
|
41
46
|
template: `
|
|
42
47
|
<lib-dromo-uploader
|
|
43
48
|
[licenseKey]="licenseKey"
|
|
@@ -53,24 +58,27 @@ import {
|
|
|
53
58
|
class="dromo-importer"
|
|
54
59
|
[onCancel]="onCancel"
|
|
55
60
|
[onResults]="onResults"
|
|
56
|
-
>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
61
|
+
>
|
|
62
|
+
Import with Dromo!
|
|
63
|
+
</lib-dromo-uploader>
|
|
64
|
+
`
|
|
60
65
|
})
|
|
61
|
-
export class DromoImporterComponent implements DromoMethods {
|
|
62
|
-
constructor() {}
|
|
63
66
|
|
|
67
|
+
export class MyUploader implements DromoMethods {
|
|
64
68
|
licenseKey = 'YOUR_LICENSE_KEY_HERE';
|
|
65
|
-
|
|
66
|
-
|
|
69
|
+
|
|
70
|
+
user = { id: 'angular tester' };
|
|
71
|
+
|
|
72
|
+
fields = [
|
|
67
73
|
{ label: 'first name', key: 'first_name' },
|
|
68
74
|
{ label: 'email address', key: 'email' },
|
|
69
75
|
];
|
|
70
|
-
|
|
76
|
+
|
|
77
|
+
settings = {
|
|
71
78
|
importIdentifier: 'angular imports',
|
|
72
79
|
developmentMode: true,
|
|
73
80
|
};
|
|
81
|
+
|
|
74
82
|
rowHooks: IRowHook[] = [
|
|
75
83
|
(record) => {
|
|
76
84
|
const newRecord = { ...record };
|
|
@@ -79,9 +87,11 @@ export class DromoImporterComponent implements DromoMethods {
|
|
|
79
87
|
return newRecord;
|
|
80
88
|
},
|
|
81
89
|
];
|
|
90
|
+
|
|
82
91
|
rowDeleteHooks: IRowDeleteHook[] = [
|
|
83
92
|
(record) => alert(`deleted ${record.index}`),
|
|
84
93
|
];
|
|
94
|
+
|
|
85
95
|
columnHooks: IColumnHook[] = [
|
|
86
96
|
{
|
|
87
97
|
fieldName: 'email',
|
|
@@ -109,6 +119,7 @@ export class DromoImporterComponent implements DromoMethods {
|
|
|
109
119
|
];
|
|
110
120
|
|
|
111
121
|
onCancel = () => alert('Something I said?');
|
|
122
|
+
|
|
112
123
|
onResults = (data: any[], metaData: any) => {
|
|
113
124
|
alert(`Submitted ${data.length} records`);
|
|
114
125
|
console.table(data);
|
|
@@ -116,6 +127,7 @@ export class DromoImporterComponent implements DromoMethods {
|
|
|
116
127
|
};
|
|
117
128
|
|
|
118
129
|
class = 'dromo-button';
|
|
130
|
+
|
|
119
131
|
styles = {
|
|
120
132
|
'background-color': 'rgb(0, 123, 255)',
|
|
121
133
|
border: '1px solid rgb(0, 123, 255)',
|
|
@@ -128,7 +140,5 @@ export class DromoImporterComponent implements DromoMethods {
|
|
|
128
140
|
'font-size': '16px',
|
|
129
141
|
'box-shadow': '5px 5px 5px 0px #7F7F7F',
|
|
130
142
|
};
|
|
131
|
-
|
|
132
|
-
ngOnInit(): void {}
|
|
133
143
|
}
|
|
134
144
|
```
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dromo-uploader-angular",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
|
|
6
6
|
"@angular/core": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"dromo-uploader-js": "^1.2.
|
|
9
|
+
"dromo-uploader-js": "^1.2.30",
|
|
10
10
|
"tslib": "^2.0.0"
|
|
11
11
|
},
|
|
12
12
|
"module": "fesm2015/dromo-uploader-angular.mjs",
|