@commercetools-frontend-extensions/export-resources-modal 0.1.0 → 1.0.3

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 CHANGED
@@ -3,7 +3,6 @@
3
3
  Package for exporting resources from Merchant Center Applications.
4
4
 
5
5
  > This library takes into account that you are building a Merchant Center Applications which documentation you can find [here](https://docs.commercetools.com/custom-applications/).
6
-
7
6
  > The components follow the same principles of the [UIKit](https://github.com/commercetools/ui-kit) components.
8
7
 
9
8
  ## Getting started
@@ -16,6 +15,113 @@ $ npm install --save @commercetools-frontend-extensions/export-resources-modal
16
15
  $ yarn add @commercetools-frontend-extensions/export-resources-modal
17
16
  ```
18
17
 
18
+ ## Description
19
+
20
+ Export Resources Modal is an internal component used to export resources into csv or json files, it's using [Exporter Services](https://github.com/commercetools/commercetools-exporter) to create async export Job.
21
+
22
+ ## Usage
23
+
24
+ ```js
25
+ import { ExportResourcesModal } from '@commercetools-frontend-extensions/export-resources-modal';
26
+
27
+ // in case export all the resources
28
+ <ExportResourcesModal
29
+ isOpen={true}
30
+ outputFormat="csv"
31
+ resourceType="category"
32
+ allResourcesCount={143}
33
+ exportSelectionType="allResources"
34
+ columns={[
35
+ { key: 'externalId' },
36
+ { key: 'createdAt' },
37
+ { key: 'lastModifiedAt' },
38
+ { key: 'name', isLocalised: true },
39
+ ]}
40
+ renderProperties={()=>(
41
+ <>
42
+ - The category parent is referenced by externalId or key.
43
+ </>
44
+ )}
45
+ closeModal={() => {
46
+ ...
47
+ }}
48
+ />
49
+
50
+ // in case export only resources matching filters & search
51
+ <ExportResourcesModal
52
+ isOpen={true}
53
+ outputFormat="csv"
54
+ resourceType="category"
55
+ allResourcesCount={143}
56
+ exportSelectionType="onlyMatching"
57
+ columns={[
58
+ { key: 'externalId' },
59
+ { key: 'createdAt' },
60
+ { key: 'lastModifiedAt' },
61
+ { key: 'name', isLocalised: true },
62
+ ]}
63
+ appliedFilters={
64
+ [
65
+ {
66
+ key: 'name',
67
+ value: 'name(en="John")'
68
+ },
69
+ ]
70
+ }
71
+ renderProperties={()=>(
72
+ <>
73
+ - The category parent is referenced by externalId or key.
74
+ </>
75
+ )}
76
+ closeModal={() => {
77
+ ...
78
+ }}
79
+ />
80
+
81
+ // in case export only selected resources
82
+ <ExportResourcesModal
83
+ isOpen={true}
84
+ outputFormat="csv"
85
+ resourceType="category"
86
+ allResourcesCount={143}
87
+ exportSelectionType="onlySelected"
88
+ selectedResourceIds={['02ed9a7d-7c1f-40da-b2b7-4cca6752bf29', '04051276-1641-4e01-a03e-d4de16b7e4eb', 'ac7d9f7b-5c7d-4dd3-b82b-8555ab4a2a6e']}
89
+ columns={[
90
+ { key: 'externalId' },
91
+ { key: 'createdAt' },
92
+ { key: 'lastModifiedAt' },
93
+ { key: 'name', isLocalised: true },
94
+ ]}
95
+ renderProperties={()=>(
96
+ <>
97
+ - The category parent is referenced by externalId or key.
98
+ </>
99
+ )}
100
+ closeModal={() => {
101
+ ...
102
+ }}
103
+ />
104
+ ```
105
+
106
+ ## Properties
107
+
108
+ | Props | Type | Required | Default | Description |
109
+ | ------------------------ | ----------------------------------------------------------------------------- | :---------------------------------------------------------: | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
110
+ | `isOpen` | `boolean` | ✅ Required | | Indicates whether the Modal is open or closed. The parent component needs to manage this state |
111
+ | `outputFormat` | `string`<br/>Possible values: `json`, `csv` | | `json` | The file format to export |
112
+ | `closeModal` | `function` | ✅ Required | | Called when the page closes click on overlay, click on close button, press ESC. If the function is not provided, the page cannot be closed by any of the listed options |
113
+ | `resourceType` | `string` | ✅ Required | | The type of the resource, example: `category`, `product`... |
114
+ | `allResourcesCount` | `Number` | ✅ Required | | The count of all resources of identified `resourceType` |
115
+ | `exportSelectionType` | `string` <br/>Possible values:<br/>`allResources, onlyMatching, onlySelected` | | `allResources` | The type of export, so either export all resources or export only resources that match the filters & search or export only selected resources |
116
+ | `matchingResourcesCount` | `Number` | ✅ Required only if `exportSelectionType` is `onlyMatching` | | The count of resources that matches the filters & search |
117
+ | `selectedResourceIds` | `array` | ✅ Required only if `exportSelectionType` is `onlySelected` | | Array of Ids of the selected resources |
118
+ | `columns` | `array` | ✅ Required | | Array of the columns to export |
119
+ | `columns[].key` | `string` | ✅ Required | | The unique key of the column that is used to identify data type |
120
+ | `columns[].isLocalised` | `boolean` | ✅ Required | | The column is a localised field |
121
+ | `appliedSearchTerms` | `array` | | [] | Array of the search terms that are used when `exportSelectionType` is `onlyMatching` |
122
+ | `appliedFilters` | `array` | | [] | Array of the filters that are used when `exportSelectionType` is `onlyMatching` |
123
+ | `renderProperties` | `function` | ✅ Required | | A prop to render properties that are resource-specific |
124
+
19
125
  ## Releasing
20
126
 
21
127
  This package uses [`changesets`](https://github.com/atlassian/changesets) in order to do releases to NPM.