@verdocs/web-sdk 2.2.0 → 2.2.1
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/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/verdocs-button.cjs.entry.js +26 -0
- package/dist/cjs/{verdocs-button_2.cjs.entry.js → verdocs-help-icon.cjs.entry.js} +0 -20
- package/dist/cjs/{verdocs-settings-organization_2.cjs.entry.js → verdocs-settings-api-keys_4.cjs.entry.js} +165 -2
- package/dist/cjs/verdocs-settings.cjs.entry.js +1 -1
- package/dist/cjs/verdocs-table.cjs.entry.js +27 -0
- package/dist/cjs/verdocs-web-sdk.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/controls/verdocs-table/verdocs-table.css +25 -0
- package/dist/collection/components/controls/verdocs-table/verdocs-table.js +71 -0
- package/dist/collection/components/controls/verdocs-table/verdocs-table.stories.js +25 -0
- package/dist/collection/components/embeds/verdocs-settings/verdocs-settings.js +1 -1
- package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.css +38 -0
- package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.js +179 -0
- package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.stories.js +11 -0
- package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.css +38 -0
- package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.js +210 -0
- package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.stories.js +17 -0
- package/dist/components/Strings.js +6 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.js +3 -0
- package/dist/components/verdocs-settings-api-keys.d.ts +11 -0
- package/dist/components/verdocs-settings-api-keys.js +6 -0
- package/dist/components/verdocs-settings-api-keys2.js +108 -0
- package/dist/components/verdocs-settings-members.d.ts +11 -0
- package/dist/components/verdocs-settings-members.js +6 -0
- package/dist/components/verdocs-settings-members2.js +123 -0
- package/dist/components/verdocs-settings.js +31 -13
- package/dist/components/verdocs-table.d.ts +11 -0
- package/dist/components/verdocs-table.js +6 -0
- package/dist/components/verdocs-table2.js +41 -0
- package/dist/custom-elements.json +24 -0
- package/dist/docs.json +254 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/verdocs-button.entry.js +22 -0
- package/dist/esm/{verdocs-button_2.entry.js → verdocs-help-icon.entry.js} +1 -20
- package/dist/esm/{verdocs-settings-organization_2.entry.js → verdocs-settings-api-keys_4.entry.js} +164 -3
- package/dist/esm/verdocs-settings.entry.js +1 -1
- package/dist/esm/verdocs-table.entry.js +23 -0
- package/dist/esm/verdocs-web-sdk.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/verdocs-button.entry.js +1 -0
- package/dist/esm-es5/verdocs-help-icon.entry.js +1 -0
- package/dist/esm-es5/verdocs-settings-api-keys_4.entry.js +1 -0
- package/dist/esm-es5/verdocs-settings.entry.js +1 -1
- package/dist/esm-es5/verdocs-table.entry.js +1 -0
- package/dist/esm-es5/verdocs-web-sdk.js +1 -1
- package/dist/types/components/controls/verdocs-table/verdocs-table.d.ts +21 -0
- package/dist/types/components/controls/verdocs-table/verdocs-table.stories.d.ts +7 -0
- package/dist/types/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.d.ts +44 -0
- package/dist/types/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.stories.d.ts +4 -0
- package/dist/types/components/settings/verdocs-settings-members/verdocs-settings-members.d.ts +43 -0
- package/dist/types/components/settings/verdocs-settings-members/verdocs-settings-members.stories.d.ts +8 -0
- package/dist/types/components.d.ts +112 -0
- package/dist/verdocs-web-sdk/p-268a29a9.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-606e0405.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-647cdb84.system.js +1 -1
- package/dist/verdocs-web-sdk/p-7213a107.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-84f9fe5d.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-ab26744f.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-d309ef6f.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-db4cfbfe.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-df90b36d.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-e248947e.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-fbabbcea.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
- package/package.json +1 -1
- package/dist/esm-es5/verdocs-button_2.entry.js +0 -1
- package/dist/esm-es5/verdocs-settings-organization_2.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-0fecb805.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-229a6849.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-4821f318.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-888adbc2.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-ce22913a.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-de192808.system.entry.js +0 -1
@@ -0,0 +1,71 @@
|
|
1
|
+
import { Host, h } from '@stencil/core';
|
2
|
+
/**
|
3
|
+
* Display a simple table of data. Columns and data cells may have custom renderers defined to
|
4
|
+
* support creating interactive table layouts.
|
5
|
+
*/
|
6
|
+
export class VerdocsTable {
|
7
|
+
constructor() {
|
8
|
+
this.columns = [];
|
9
|
+
this.data = [];
|
10
|
+
}
|
11
|
+
render() {
|
12
|
+
return (h(Host, { class: "table-wrapper" }, h("table", { class: "table" }, h("thead", null, h("tr", { class: "row header-row" }, this.columns.map((col, i) => {
|
13
|
+
return h("th", { class: `col header-col col-${i} col-${col.id}`, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id });
|
14
|
+
}))), h("tbody", null, this.data.map(row => (h("tr", { class: "row data-row" }, this.columns.map((col, i) => {
|
15
|
+
var _a;
|
16
|
+
return h("td", { class: `col data-col col-${i} col-${col.id}` }, ((_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, row)) || row[col.id]);
|
17
|
+
// return <td class={`col data-col col-${i} col-${col.id}`} innerHTML={col.renderCell?.(col, row) || row[col.id]} />;
|
18
|
+
}))))))));
|
19
|
+
}
|
20
|
+
static get is() { return "verdocs-table"; }
|
21
|
+
static get originalStyleUrls() {
|
22
|
+
return {
|
23
|
+
"$": ["verdocs-table.scss"]
|
24
|
+
};
|
25
|
+
}
|
26
|
+
static get styleUrls() {
|
27
|
+
return {
|
28
|
+
"$": ["verdocs-table.css"]
|
29
|
+
};
|
30
|
+
}
|
31
|
+
static get properties() {
|
32
|
+
return {
|
33
|
+
"columns": {
|
34
|
+
"type": "unknown",
|
35
|
+
"mutable": false,
|
36
|
+
"complexType": {
|
37
|
+
"original": "IColumn[]",
|
38
|
+
"resolved": "IColumn[]",
|
39
|
+
"references": {
|
40
|
+
"IColumn": {
|
41
|
+
"location": "local"
|
42
|
+
}
|
43
|
+
}
|
44
|
+
},
|
45
|
+
"required": false,
|
46
|
+
"optional": false,
|
47
|
+
"docs": {
|
48
|
+
"tags": [],
|
49
|
+
"text": "The columns to display"
|
50
|
+
},
|
51
|
+
"defaultValue": "[]"
|
52
|
+
},
|
53
|
+
"data": {
|
54
|
+
"type": "unknown",
|
55
|
+
"mutable": false,
|
56
|
+
"complexType": {
|
57
|
+
"original": "any[]",
|
58
|
+
"resolved": "any[]",
|
59
|
+
"references": {}
|
60
|
+
},
|
61
|
+
"required": false,
|
62
|
+
"optional": false,
|
63
|
+
"docs": {
|
64
|
+
"tags": [],
|
65
|
+
"text": "The rows to display"
|
66
|
+
},
|
67
|
+
"defaultValue": "[]"
|
68
|
+
}
|
69
|
+
};
|
70
|
+
}
|
71
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import { html } from 'lit-html';
|
2
|
+
export default {
|
3
|
+
title: 'Controls/Table',
|
4
|
+
component: 'verdocs-table',
|
5
|
+
args: {
|
6
|
+
columns: [
|
7
|
+
{ id: 'id', header: 'ID' },
|
8
|
+
{ id: 'name', header: 'Name' },
|
9
|
+
{
|
10
|
+
id: 'date',
|
11
|
+
header: 'Date',
|
12
|
+
renderHeader: () => 'Past Due Since',
|
13
|
+
renderCell: (_, row) => `<span style="color: red">${new Date(row.date).toLocaleDateString()}</a>`,
|
14
|
+
},
|
15
|
+
],
|
16
|
+
data: [
|
17
|
+
{ id: '123', name: 'Test 1', date: new Date() },
|
18
|
+
{ id: '456', name: 'Test 2', date: new Date() },
|
19
|
+
],
|
20
|
+
},
|
21
|
+
parameters: {
|
22
|
+
layout: 'fullscreen',
|
23
|
+
},
|
24
|
+
};
|
25
|
+
export const Table = ({ columns, data }) => html `<verdocs-table .columns=${columns} .data=${data} />`;
|
@@ -29,7 +29,7 @@ export class VerdocsSettings {
|
|
29
29
|
if (!this.endpoint.session) {
|
30
30
|
return (h(Host, null, h("verdocs-loader", null)));
|
31
31
|
}
|
32
|
-
return (h(Host, null, h("div", { class: "tabs" }, h("div", { class: `tab ${this.tab === 'profile' ? 'active' : ''}`, onClick: () => (this.tab = 'profile') }, "Profile"), h("div", { class: `tab ${this.tab === 'organization' ? 'active' : ''}`, onClick: () => (this.tab = 'organization') }, "Organization")), this.tab === 'profile' && h("verdocs-settings-profile", { endpoint: this.endpoint }), this.tab === 'organization' && h("verdocs-settings-organization", { endpoint: this.endpoint })));
|
32
|
+
return (h(Host, null, h("div", { class: "tabs" }, h("div", { class: `tab ${this.tab === 'profile' ? 'active' : ''}`, onClick: () => (this.tab = 'profile') }, "Profile"), h("div", { class: `tab ${this.tab === 'organization' ? 'active' : ''}`, onClick: () => (this.tab = 'organization') }, "Organization"), h("div", { class: `tab ${this.tab === 'members' ? 'active' : ''}`, onClick: () => (this.tab = 'members') }, "Members"), h("div", { class: `tab ${this.tab === 'apikeys' ? 'active' : ''}`, onClick: () => (this.tab = 'apikeys') }, "API Keys")), this.tab === 'profile' && h("verdocs-settings-profile", { endpoint: this.endpoint }), this.tab === 'organization' && h("verdocs-settings-organization", { endpoint: this.endpoint }), this.tab === 'members' && h("verdocs-settings-members", { endpoint: this.endpoint }), this.tab === 'apikeys' && h("verdocs-settings-api-keys", { endpoint: this.endpoint })));
|
33
33
|
}
|
34
34
|
static get is() { return "verdocs-settings"; }
|
35
35
|
static get originalStyleUrls() {
|
package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.css
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
verdocs-settings-api-keys {
|
2
|
+
display: flex;
|
3
|
+
padding: 10px;
|
4
|
+
font-size: 18px;
|
5
|
+
flex-wrap: nowrap;
|
6
|
+
border-radius: 6px;
|
7
|
+
color: #33364b;
|
8
|
+
flex-direction: column;
|
9
|
+
font-family: "Inter", "Barlow", sans-serif;
|
10
|
+
}
|
11
|
+
verdocs-settings-api-keys .table {
|
12
|
+
margin: 12px 0;
|
13
|
+
}
|
14
|
+
verdocs-settings-api-keys .role {
|
15
|
+
font-size: 12px;
|
16
|
+
width: 32px;
|
17
|
+
height: 32px;
|
18
|
+
border-radius: 32px;
|
19
|
+
background: #777777;
|
20
|
+
color: #ffffff;
|
21
|
+
font-weight: 700;
|
22
|
+
display: flex;
|
23
|
+
align-items: center;
|
24
|
+
justify-content: center;
|
25
|
+
}
|
26
|
+
verdocs-settings-api-keys .col.col-actions {
|
27
|
+
align-items: center;
|
28
|
+
text-align: center;
|
29
|
+
}
|
30
|
+
verdocs-settings-api-keys .col.col-actions svg {
|
31
|
+
cursor: pointer;
|
32
|
+
width: 24px;
|
33
|
+
height: 24px;
|
34
|
+
fill: #777777;
|
35
|
+
}
|
36
|
+
verdocs-settings-api-keys .col.col-actions svg:hover {
|
37
|
+
fill: red;
|
38
|
+
}
|
package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.js
ADDED
@@ -0,0 +1,179 @@
|
|
1
|
+
import { ApiKeys } from '@verdocs/js-sdk/Organizations';
|
2
|
+
import { VerdocsEndpoint } from '@verdocs/js-sdk';
|
3
|
+
import { h, Host } from '@stencil/core';
|
4
|
+
import { VerdocsToast } from '../../../utils/Toast';
|
5
|
+
import { SDKError } from '../../../utils/errors';
|
6
|
+
import { capitalize } from '@verdocs/js-sdk/Utils/Strings';
|
7
|
+
/**
|
8
|
+
* Displays a settings form that allows the user to manage their API keys.
|
9
|
+
*/
|
10
|
+
export class VerdocsSettingsApiKeys {
|
11
|
+
constructor() {
|
12
|
+
this.endpoint = VerdocsEndpoint.getDefault();
|
13
|
+
this.keys = [];
|
14
|
+
}
|
15
|
+
componentWillLoad() {
|
16
|
+
this.endpoint.loadSession();
|
17
|
+
if (!this.endpoint.session) {
|
18
|
+
console.log('[SETTINGS] Must be authenticated');
|
19
|
+
return;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
async componentDidLoad() {
|
23
|
+
var _a, _b, _c;
|
24
|
+
try {
|
25
|
+
this.keys = await ApiKeys.getKeys(this.endpoint, this.endpoint.session.organization_id);
|
26
|
+
}
|
27
|
+
catch (e) {
|
28
|
+
(_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
|
29
|
+
VerdocsToast('Unable to load members. Please try again later');
|
30
|
+
}
|
31
|
+
}
|
32
|
+
render() {
|
33
|
+
if (!this.endpoint.session) {
|
34
|
+
console.log('[SETTINGS] Must be authenticated');
|
35
|
+
return h(Host, { class: "authentication-required" }, "Must be authenticated");
|
36
|
+
}
|
37
|
+
return (h(Host, null, h("h1", null, "API Keys"), h("verdocs-table", { data: this.keys, columns: [
|
38
|
+
{ id: 'name', header: 'Name' },
|
39
|
+
{ id: 'client_id', header: 'Client ID' },
|
40
|
+
{ id: 'profile_id', header: 'Acts as', renderCell: (_, row) => { var _a, _b; return `${capitalize((_a = row.profile) === null || _a === void 0 ? void 0 : _a.first_name)} ${capitalize((_b = row.profile) === null || _b === void 0 ? void 0 : _b.last_name)}`; } },
|
41
|
+
] }), h("verdocs-button", { label: "Add API Key", size: "normal", disabled: true })));
|
42
|
+
}
|
43
|
+
static get is() { return "verdocs-settings-api-keys"; }
|
44
|
+
static get originalStyleUrls() {
|
45
|
+
return {
|
46
|
+
"$": ["verdocs-settings-api-keys.scss"]
|
47
|
+
};
|
48
|
+
}
|
49
|
+
static get styleUrls() {
|
50
|
+
return {
|
51
|
+
"$": ["verdocs-settings-api-keys.css"]
|
52
|
+
};
|
53
|
+
}
|
54
|
+
static get properties() {
|
55
|
+
return {
|
56
|
+
"endpoint": {
|
57
|
+
"type": "unknown",
|
58
|
+
"mutable": false,
|
59
|
+
"complexType": {
|
60
|
+
"original": "VerdocsEndpoint",
|
61
|
+
"resolved": "VerdocsEndpoint",
|
62
|
+
"references": {
|
63
|
+
"VerdocsEndpoint": {
|
64
|
+
"location": "import",
|
65
|
+
"path": "@verdocs/js-sdk"
|
66
|
+
}
|
67
|
+
}
|
68
|
+
},
|
69
|
+
"required": false,
|
70
|
+
"optional": false,
|
71
|
+
"docs": {
|
72
|
+
"tags": [],
|
73
|
+
"text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
|
74
|
+
},
|
75
|
+
"defaultValue": "VerdocsEndpoint.getDefault()"
|
76
|
+
}
|
77
|
+
};
|
78
|
+
}
|
79
|
+
static get states() {
|
80
|
+
return {
|
81
|
+
"keys": {}
|
82
|
+
};
|
83
|
+
}
|
84
|
+
static get events() {
|
85
|
+
return [{
|
86
|
+
"method": "sdkError",
|
87
|
+
"name": "sdkError",
|
88
|
+
"bubbles": true,
|
89
|
+
"cancelable": true,
|
90
|
+
"composed": true,
|
91
|
+
"docs": {
|
92
|
+
"tags": [],
|
93
|
+
"text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
|
94
|
+
},
|
95
|
+
"complexType": {
|
96
|
+
"original": "SDKError",
|
97
|
+
"resolved": "SDKError",
|
98
|
+
"references": {
|
99
|
+
"SDKError": {
|
100
|
+
"location": "import",
|
101
|
+
"path": "../../../utils/errors"
|
102
|
+
}
|
103
|
+
}
|
104
|
+
}
|
105
|
+
}, {
|
106
|
+
"method": "memberInvited",
|
107
|
+
"name": "memberInvited",
|
108
|
+
"bubbles": true,
|
109
|
+
"cancelable": true,
|
110
|
+
"composed": true,
|
111
|
+
"docs": {
|
112
|
+
"tags": [],
|
113
|
+
"text": "Event fired when the user chooses to invite a new member."
|
114
|
+
},
|
115
|
+
"complexType": {
|
116
|
+
"original": "{endpoint: VerdocsEndpoint; member: IProfile}",
|
117
|
+
"resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
|
118
|
+
"references": {
|
119
|
+
"VerdocsEndpoint": {
|
120
|
+
"location": "import",
|
121
|
+
"path": "@verdocs/js-sdk"
|
122
|
+
},
|
123
|
+
"IProfile": {
|
124
|
+
"location": "import",
|
125
|
+
"path": "@verdocs/js-sdk/Users/Types"
|
126
|
+
}
|
127
|
+
}
|
128
|
+
}
|
129
|
+
}, {
|
130
|
+
"method": "memberUpdated",
|
131
|
+
"name": "memberUpdated",
|
132
|
+
"bubbles": true,
|
133
|
+
"cancelable": true,
|
134
|
+
"composed": true,
|
135
|
+
"docs": {
|
136
|
+
"tags": [],
|
137
|
+
"text": "Event fired when the user chooses to invite a new member."
|
138
|
+
},
|
139
|
+
"complexType": {
|
140
|
+
"original": "{endpoint: VerdocsEndpoint; member: IProfile}",
|
141
|
+
"resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
|
142
|
+
"references": {
|
143
|
+
"VerdocsEndpoint": {
|
144
|
+
"location": "import",
|
145
|
+
"path": "@verdocs/js-sdk"
|
146
|
+
},
|
147
|
+
"IProfile": {
|
148
|
+
"location": "import",
|
149
|
+
"path": "@verdocs/js-sdk/Users/Types"
|
150
|
+
}
|
151
|
+
}
|
152
|
+
}
|
153
|
+
}, {
|
154
|
+
"method": "memberRemoved",
|
155
|
+
"name": "memberRemoved",
|
156
|
+
"bubbles": true,
|
157
|
+
"cancelable": true,
|
158
|
+
"composed": true,
|
159
|
+
"docs": {
|
160
|
+
"tags": [],
|
161
|
+
"text": "Event fired when the user chooses to invite a new member."
|
162
|
+
},
|
163
|
+
"complexType": {
|
164
|
+
"original": "{endpoint: VerdocsEndpoint; member: IProfile}",
|
165
|
+
"resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
|
166
|
+
"references": {
|
167
|
+
"VerdocsEndpoint": {
|
168
|
+
"location": "import",
|
169
|
+
"path": "@verdocs/js-sdk"
|
170
|
+
},
|
171
|
+
"IProfile": {
|
172
|
+
"location": "import",
|
173
|
+
"path": "@verdocs/js-sdk/Users/Types"
|
174
|
+
}
|
175
|
+
}
|
176
|
+
}
|
177
|
+
}];
|
178
|
+
}
|
179
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { html } from 'lit-html';
|
2
|
+
export default {
|
3
|
+
title: 'Settings/Api Keys',
|
4
|
+
component: 'verdocs-settings-api-keys',
|
5
|
+
args: {},
|
6
|
+
argTypes: {},
|
7
|
+
parameters: {
|
8
|
+
layout: 'fullscreen',
|
9
|
+
},
|
10
|
+
};
|
11
|
+
export const ApiKeys = () => html ` <verdocs-settings-api-keys /> `;
|
package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.css
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
verdocs-settings-members {
|
2
|
+
display: flex;
|
3
|
+
padding: 10px;
|
4
|
+
font-size: 18px;
|
5
|
+
flex-wrap: nowrap;
|
6
|
+
border-radius: 6px;
|
7
|
+
color: #33364b;
|
8
|
+
flex-direction: column;
|
9
|
+
font-family: "Inter", "Barlow", sans-serif;
|
10
|
+
}
|
11
|
+
verdocs-settings-members .table {
|
12
|
+
margin: 12px 0;
|
13
|
+
}
|
14
|
+
verdocs-settings-members .role {
|
15
|
+
font-size: 12px;
|
16
|
+
width: 32px;
|
17
|
+
height: 32px;
|
18
|
+
border-radius: 32px;
|
19
|
+
background: #777777;
|
20
|
+
color: #ffffff;
|
21
|
+
font-weight: 700;
|
22
|
+
display: flex;
|
23
|
+
align-items: center;
|
24
|
+
justify-content: center;
|
25
|
+
}
|
26
|
+
verdocs-settings-members .col.col-actions {
|
27
|
+
align-items: center;
|
28
|
+
text-align: center;
|
29
|
+
}
|
30
|
+
verdocs-settings-members .col.col-actions svg {
|
31
|
+
cursor: pointer;
|
32
|
+
width: 24px;
|
33
|
+
height: 24px;
|
34
|
+
fill: #777777;
|
35
|
+
}
|
36
|
+
verdocs-settings-members .col.col-actions svg:hover {
|
37
|
+
fill: red;
|
38
|
+
}
|
package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.js
ADDED
@@ -0,0 +1,210 @@
|
|
1
|
+
import { Members } from '@verdocs/js-sdk/Organizations';
|
2
|
+
import { VerdocsEndpoint } from '@verdocs/js-sdk';
|
3
|
+
import { h, Host } from '@stencil/core';
|
4
|
+
import { VerdocsToast } from '../../../utils/Toast';
|
5
|
+
import { SDKError } from '../../../utils/errors';
|
6
|
+
import { capitalize } from '@verdocs/js-sdk/Utils/Strings';
|
7
|
+
const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
|
8
|
+
const getRoleLabel = (roles) => {
|
9
|
+
if (roles.find(role => role.name === 'owner') !== undefined)
|
10
|
+
return 'Owner';
|
11
|
+
if (roles.find(role => role.name === 'admin') !== undefined)
|
12
|
+
return 'Admin';
|
13
|
+
if (roles.find(role => role.name === 'member') !== undefined)
|
14
|
+
return 'Member';
|
15
|
+
if (roles.find(role => role.name === 'basic_user') !== undefined)
|
16
|
+
return 'Basic User';
|
17
|
+
if (roles.find(role => role.name === 'contact') !== undefined)
|
18
|
+
return 'Contact';
|
19
|
+
};
|
20
|
+
const getRoleColor = (roles) => {
|
21
|
+
if (roles.find(role => role.name === 'owner') !== undefined)
|
22
|
+
return '#9333ea';
|
23
|
+
if (roles.find(role => role.name === 'admin') !== undefined)
|
24
|
+
return '#2563eb';
|
25
|
+
if (roles.find(role => role.name === 'member') !== undefined)
|
26
|
+
return '#16a34a';
|
27
|
+
if (roles.find(role => role.name === 'basic_user') !== undefined)
|
28
|
+
return '#ea580c';
|
29
|
+
if (roles.find(role => role.name === 'contact') !== undefined)
|
30
|
+
return '#52525B';
|
31
|
+
};
|
32
|
+
/**
|
33
|
+
* Displays a settings form that allows the user to manage their Verdocs profile.
|
34
|
+
*/
|
35
|
+
export class VerdocsSettingsMembers {
|
36
|
+
constructor() {
|
37
|
+
this.endpoint = VerdocsEndpoint.getDefault();
|
38
|
+
this.members = [];
|
39
|
+
}
|
40
|
+
componentWillLoad() {
|
41
|
+
this.endpoint.loadSession();
|
42
|
+
if (!this.endpoint.session) {
|
43
|
+
console.log('[SETTINGS] Must be authenticated');
|
44
|
+
return;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
async componentDidLoad() {
|
48
|
+
var _a, _b, _c;
|
49
|
+
try {
|
50
|
+
this.members = await Members.getMembers(this.endpoint, this.endpoint.session.organization_id);
|
51
|
+
}
|
52
|
+
catch (e) {
|
53
|
+
(_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
|
54
|
+
VerdocsToast('Unable to load members. Please try again later');
|
55
|
+
}
|
56
|
+
}
|
57
|
+
render() {
|
58
|
+
if (!this.endpoint.session) {
|
59
|
+
console.log('[SETTINGS] Must be authenticated');
|
60
|
+
return h(Host, { class: "authentication-required" }, "Must be authenticated");
|
61
|
+
}
|
62
|
+
return (h(Host, null, h("h1", null, "Members"), h("verdocs-table", { data: this.members, columns: [
|
63
|
+
{
|
64
|
+
id: 'name',
|
65
|
+
renderHeader: () => 'Member',
|
66
|
+
renderCell: (_, row) => (h("div", { style: { display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' } }, h("div", { class: "role", style: { backgroundColor: getRoleColor(row.roles) } }, row.first_name.charAt(0), " ", row.last_name.charAt(0)), h("span", null, capitalize(row.first_name), " ", capitalize(row.last_name)))),
|
67
|
+
},
|
68
|
+
{ id: 'email', header: 'E-mail Address' },
|
69
|
+
{ id: 'phone', header: 'Phone Number' },
|
70
|
+
{ id: 'roles', header: 'Role', renderCell: (_, row) => `${getRoleLabel(row.roles)}` },
|
71
|
+
{ id: 'actions', header: 'Actions', renderCell: () => h("span", { innerHTML: TrashIcon, onClick: () => { } }) },
|
72
|
+
] }), h("verdocs-button", { label: "Invite New Member", size: "normal", disabled: true })));
|
73
|
+
}
|
74
|
+
static get is() { return "verdocs-settings-members"; }
|
75
|
+
static get originalStyleUrls() {
|
76
|
+
return {
|
77
|
+
"$": ["verdocs-settings-members.scss"]
|
78
|
+
};
|
79
|
+
}
|
80
|
+
static get styleUrls() {
|
81
|
+
return {
|
82
|
+
"$": ["verdocs-settings-members.css"]
|
83
|
+
};
|
84
|
+
}
|
85
|
+
static get properties() {
|
86
|
+
return {
|
87
|
+
"endpoint": {
|
88
|
+
"type": "unknown",
|
89
|
+
"mutable": false,
|
90
|
+
"complexType": {
|
91
|
+
"original": "VerdocsEndpoint",
|
92
|
+
"resolved": "VerdocsEndpoint",
|
93
|
+
"references": {
|
94
|
+
"VerdocsEndpoint": {
|
95
|
+
"location": "import",
|
96
|
+
"path": "@verdocs/js-sdk"
|
97
|
+
}
|
98
|
+
}
|
99
|
+
},
|
100
|
+
"required": false,
|
101
|
+
"optional": false,
|
102
|
+
"docs": {
|
103
|
+
"tags": [],
|
104
|
+
"text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
|
105
|
+
},
|
106
|
+
"defaultValue": "VerdocsEndpoint.getDefault()"
|
107
|
+
}
|
108
|
+
};
|
109
|
+
}
|
110
|
+
static get states() {
|
111
|
+
return {
|
112
|
+
"members": {}
|
113
|
+
};
|
114
|
+
}
|
115
|
+
static get events() {
|
116
|
+
return [{
|
117
|
+
"method": "sdkError",
|
118
|
+
"name": "sdkError",
|
119
|
+
"bubbles": true,
|
120
|
+
"cancelable": true,
|
121
|
+
"composed": true,
|
122
|
+
"docs": {
|
123
|
+
"tags": [],
|
124
|
+
"text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
|
125
|
+
},
|
126
|
+
"complexType": {
|
127
|
+
"original": "SDKError",
|
128
|
+
"resolved": "SDKError",
|
129
|
+
"references": {
|
130
|
+
"SDKError": {
|
131
|
+
"location": "import",
|
132
|
+
"path": "../../../utils/errors"
|
133
|
+
}
|
134
|
+
}
|
135
|
+
}
|
136
|
+
}, {
|
137
|
+
"method": "memberInvited",
|
138
|
+
"name": "memberInvited",
|
139
|
+
"bubbles": true,
|
140
|
+
"cancelable": true,
|
141
|
+
"composed": true,
|
142
|
+
"docs": {
|
143
|
+
"tags": [],
|
144
|
+
"text": "Event fired when the user chooses to invite a new member."
|
145
|
+
},
|
146
|
+
"complexType": {
|
147
|
+
"original": "{endpoint: VerdocsEndpoint; member: IProfile}",
|
148
|
+
"resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
|
149
|
+
"references": {
|
150
|
+
"VerdocsEndpoint": {
|
151
|
+
"location": "import",
|
152
|
+
"path": "@verdocs/js-sdk"
|
153
|
+
},
|
154
|
+
"IProfile": {
|
155
|
+
"location": "import",
|
156
|
+
"path": "@verdocs/js-sdk/Users/Types"
|
157
|
+
}
|
158
|
+
}
|
159
|
+
}
|
160
|
+
}, {
|
161
|
+
"method": "memberUpdated",
|
162
|
+
"name": "memberUpdated",
|
163
|
+
"bubbles": true,
|
164
|
+
"cancelable": true,
|
165
|
+
"composed": true,
|
166
|
+
"docs": {
|
167
|
+
"tags": [],
|
168
|
+
"text": "Event fired when the user chooses to invite a new member."
|
169
|
+
},
|
170
|
+
"complexType": {
|
171
|
+
"original": "{endpoint: VerdocsEndpoint; member: IProfile}",
|
172
|
+
"resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
|
173
|
+
"references": {
|
174
|
+
"VerdocsEndpoint": {
|
175
|
+
"location": "import",
|
176
|
+
"path": "@verdocs/js-sdk"
|
177
|
+
},
|
178
|
+
"IProfile": {
|
179
|
+
"location": "import",
|
180
|
+
"path": "@verdocs/js-sdk/Users/Types"
|
181
|
+
}
|
182
|
+
}
|
183
|
+
}
|
184
|
+
}, {
|
185
|
+
"method": "memberRemoved",
|
186
|
+
"name": "memberRemoved",
|
187
|
+
"bubbles": true,
|
188
|
+
"cancelable": true,
|
189
|
+
"composed": true,
|
190
|
+
"docs": {
|
191
|
+
"tags": [],
|
192
|
+
"text": "Event fired when the user chooses to invite a new member."
|
193
|
+
},
|
194
|
+
"complexType": {
|
195
|
+
"original": "{endpoint: VerdocsEndpoint; member: IProfile}",
|
196
|
+
"resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
|
197
|
+
"references": {
|
198
|
+
"VerdocsEndpoint": {
|
199
|
+
"location": "import",
|
200
|
+
"path": "@verdocs/js-sdk"
|
201
|
+
},
|
202
|
+
"IProfile": {
|
203
|
+
"location": "import",
|
204
|
+
"path": "@verdocs/js-sdk/Users/Types"
|
205
|
+
}
|
206
|
+
}
|
207
|
+
}
|
208
|
+
}];
|
209
|
+
}
|
210
|
+
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { html } from 'lit-html';
|
2
|
+
export default {
|
3
|
+
title: 'Settings/Members',
|
4
|
+
component: 'verdocs-settings-members',
|
5
|
+
args: {},
|
6
|
+
argTypes: {
|
7
|
+
onMemberInvited: { action: 'memberInvited' },
|
8
|
+
onMemberUpdated: { action: 'memberUpdated' },
|
9
|
+
onMemberRemoved: { action: 'memberRemoved' },
|
10
|
+
},
|
11
|
+
parameters: {
|
12
|
+
layout: 'fullscreen',
|
13
|
+
},
|
14
|
+
};
|
15
|
+
export const Members = ({ onMemberInvited, onMemberUpdated, onMemberRemoved }) => html `
|
16
|
+
<verdocs-settings-members @memberInvited=${onMemberInvited} @memberUpdated=${onMemberUpdated} @memberRemoved=${onMemberRemoved} />
|
17
|
+
`;
|
@@ -46,12 +46,15 @@ export { VerdocsSearchTabs as VerdocsSearchTabs } from '../types/components/elem
|
|
46
46
|
export { VerdocsSelectInput as VerdocsSelectInput } from '../types/components/controls/verdocs-select-input/verdocs-select-input';
|
47
47
|
export { VerdocsSend as VerdocsSend } from '../types/components/embeds/verdocs-send/verdocs-send';
|
48
48
|
export { VerdocsSettings as VerdocsSettings } from '../types/components/embeds/verdocs-settings/verdocs-settings';
|
49
|
+
export { VerdocsSettingsApiKeys as VerdocsSettingsApiKeys } from '../types/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys';
|
50
|
+
export { VerdocsSettingsMembers as VerdocsSettingsMembers } from '../types/components/settings/verdocs-settings-members/verdocs-settings-members';
|
49
51
|
export { VerdocsSettingsOrganization as VerdocsSettingsOrganization } from '../types/components/settings/verdocs-settings-organization/verdocs-settings-organization';
|
50
52
|
export { VerdocsSettingsProfile as VerdocsSettingsProfile } from '../types/components/settings/verdocs-settings-profile/verdocs-settings-profile';
|
51
53
|
export { VerdocsSign as VerdocsSign } from '../types/components/embeds/verdocs-sign/verdocs-sign';
|
52
54
|
export { VerdocsSignatureDialog as VerdocsSignatureDialog } from '../types/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog';
|
53
55
|
export { VerdocsQuickFilter as VerdocsSpinner } from '../types/components/controls/verdocs-spinner/verdocs-spinner';
|
54
56
|
export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/components/envelopes/verdocs-status-indicator/verdocs-status-indicator';
|
57
|
+
export { VerdocsTable as VerdocsTable } from '../types/components/controls/verdocs-table/verdocs-table';
|
55
58
|
export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
|
56
59
|
export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/templates/verdocs-template-card/verdocs-template-card';
|
57
60
|
export { VerdocsTemplateCreate as VerdocsTemplateCreate } from '../types/components/templates/verdocs-template-create/verdocs-template-create';
|
package/dist/components/index.js
CHANGED
@@ -46,12 +46,15 @@ export { VerdocsSearchTabs, defineCustomElement as defineCustomElementVerdocsSea
|
|
46
46
|
export { VerdocsSelectInput, defineCustomElement as defineCustomElementVerdocsSelectInput } from './verdocs-select-input.js';
|
47
47
|
export { VerdocsSend, defineCustomElement as defineCustomElementVerdocsSend } from './verdocs-send.js';
|
48
48
|
export { VerdocsSettings, defineCustomElement as defineCustomElementVerdocsSettings } from './verdocs-settings.js';
|
49
|
+
export { VerdocsSettingsApiKeys, defineCustomElement as defineCustomElementVerdocsSettingsApiKeys } from './verdocs-settings-api-keys.js';
|
50
|
+
export { VerdocsSettingsMembers, defineCustomElement as defineCustomElementVerdocsSettingsMembers } from './verdocs-settings-members.js';
|
49
51
|
export { VerdocsSettingsOrganization, defineCustomElement as defineCustomElementVerdocsSettingsOrganization } from './verdocs-settings-organization.js';
|
50
52
|
export { VerdocsSettingsProfile, defineCustomElement as defineCustomElementVerdocsSettingsProfile } from './verdocs-settings-profile.js';
|
51
53
|
export { VerdocsSign, defineCustomElement as defineCustomElementVerdocsSign } from './verdocs-sign.js';
|
52
54
|
export { VerdocsSignatureDialog, defineCustomElement as defineCustomElementVerdocsSignatureDialog } from './verdocs-signature-dialog.js';
|
53
55
|
export { VerdocsSpinner, defineCustomElement as defineCustomElementVerdocsSpinner } from './verdocs-spinner.js';
|
54
56
|
export { VerdocsStatusIndicator, defineCustomElement as defineCustomElementVerdocsStatusIndicator } from './verdocs-status-indicator.js';
|
57
|
+
export { VerdocsTable, defineCustomElement as defineCustomElementVerdocsTable } from './verdocs-table.js';
|
55
58
|
export { VerdocsTemplateAttachments, defineCustomElement as defineCustomElementVerdocsTemplateAttachments } from './verdocs-template-attachments.js';
|
56
59
|
export { VerdocsTemplateCard, defineCustomElement as defineCustomElementVerdocsTemplateCard } from './verdocs-template-card.js';
|
57
60
|
export { VerdocsTemplateCreate, defineCustomElement as defineCustomElementVerdocsTemplateCreate } from './verdocs-template-create.js';
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
2
|
+
|
3
|
+
interface VerdocsSettingsApiKeys extends Components.VerdocsSettingsApiKeys, HTMLElement {}
|
4
|
+
export const VerdocsSettingsApiKeys: {
|
5
|
+
prototype: VerdocsSettingsApiKeys;
|
6
|
+
new (): VerdocsSettingsApiKeys;
|
7
|
+
};
|
8
|
+
/**
|
9
|
+
* Used to define this component and all nested components recursively.
|
10
|
+
*/
|
11
|
+
export const defineCustomElement: () => void;
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import { V as VerdocsSettingsApiKeys$1, d as defineCustomElement$1 } from './verdocs-settings-api-keys2.js';
|
2
|
+
|
3
|
+
const VerdocsSettingsApiKeys = VerdocsSettingsApiKeys$1;
|
4
|
+
const defineCustomElement = defineCustomElement$1;
|
5
|
+
|
6
|
+
export { VerdocsSettingsApiKeys, defineCustomElement };
|