@fleetbase/ember-ui 0.3.16 → 0.3.17
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.
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</InputGroup>
|
|
28
28
|
{{else if (eq this.customFieldComponent "money-input")}}
|
|
29
29
|
<InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
|
|
30
|
-
<MoneyInput class="w-full" @wrapperClass="x-fleetops-input-height shadow-md" @value={{this.value}} @canSelectCurrency={{
|
|
30
|
+
<MoneyInput class="w-full" @wrapperClass="x-fleetops-input-height shadow-md" @value={{this.value}} @canSelectCurrency={{@canSelectCurrency}} @currency={{or @currency "USD"}} @onChange={{this.onChangeHandler}} />
|
|
31
31
|
</InputGroup>
|
|
32
32
|
{{else if (eq this.customFieldComponent "date-time-input")}}
|
|
33
33
|
<InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
<div class="field-value">
|
|
4
4
|
{{#if this.isBoolean}}
|
|
5
5
|
<Badge @status={{if this.value "success" ""}}>{{if this.value "Yes" "No"}}</Badge>
|
|
6
|
+
{{else if this.isFile}}
|
|
7
|
+
<File @file={{this.value}} @onDownload={{this.downloadFile}} class="custom-field-file" />
|
|
6
8
|
{{else}}
|
|
7
9
|
{{n-a this.value}}
|
|
8
10
|
{{/if}}
|
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
import Component from '@glimmer/component';
|
|
2
2
|
import { tracked } from '@glimmer/tracking';
|
|
3
|
-
import {
|
|
3
|
+
import { inject as service } from '@ember/service';
|
|
4
|
+
import { action } from '@ember/object';
|
|
4
5
|
|
|
5
6
|
export default class CustomFieldValueComponent extends Component {
|
|
7
|
+
@service store;
|
|
8
|
+
@service fetch;
|
|
6
9
|
@tracked customField;
|
|
7
10
|
@tracked value;
|
|
8
11
|
@tracked subject;
|
|
9
|
-
|
|
12
|
+
|
|
13
|
+
get isBoolean() {
|
|
14
|
+
return this.customField?.type === 'boolean';
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
get isFile() {
|
|
18
|
+
return this.customField?.type === 'file-upload';
|
|
19
|
+
}
|
|
10
20
|
|
|
11
21
|
constructor(owner, { customField, subject }) {
|
|
12
22
|
super(...arguments);
|
|
@@ -17,7 +27,18 @@ export default class CustomFieldValueComponent extends Component {
|
|
|
17
27
|
|
|
18
28
|
#getValueFromSubject(customField, subject) {
|
|
19
29
|
const cfValue = (subject.get('custom_field_values') ?? []).find((cfv) => cfv.custom_field_uuid === customField.id);
|
|
20
|
-
|
|
21
|
-
|
|
30
|
+
let value = cfValue?.value ?? null;
|
|
31
|
+
// If custom field is file upload normalize value to image
|
|
32
|
+
if (value && customField?.type === 'file-upload') {
|
|
33
|
+
const parsed = typeof value === 'string' ? JSON.parse(value) : value;
|
|
34
|
+
const normalized = this.store.normalize('file', parsed);
|
|
35
|
+
value = this.store.push(normalized);
|
|
36
|
+
}
|
|
37
|
+
return value;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@action downloadFile() {
|
|
41
|
+
const file = this.value;
|
|
42
|
+
return this.fetch.download('files/download', { file: file.id }, { fileName: file.filename, mimeType: file.content_type });
|
|
22
43
|
}
|
|
23
44
|
}
|
|
@@ -12,44 +12,74 @@
|
|
|
12
12
|
{{/if}}
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<div class="
|
|
34
|
-
<div class="
|
|
35
|
-
|
|
15
|
+
{{#if this.hasActions}}
|
|
16
|
+
<div class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
17
|
+
<DropdownButton
|
|
18
|
+
@dropdownId="file-actions-{{@file.id}}"
|
|
19
|
+
@icon={{or @dropdownIcon "ellipsis-v"}}
|
|
20
|
+
@iconSize="sm"
|
|
21
|
+
@iconPrefix={{@dropdownButtonIconPrefix}}
|
|
22
|
+
@text={{@dropdownButtonText}}
|
|
23
|
+
@size="xs"
|
|
24
|
+
@horizontalPosition="left"
|
|
25
|
+
@calculatePosition={{@dropdownButtonCalculatePosition}}
|
|
26
|
+
@renderInPlace={{or @dropdownButtonRenderInPlace true}}
|
|
27
|
+
@wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}}
|
|
28
|
+
@triggerClass={{@dropdownButtonTriggerClass}}
|
|
29
|
+
@registerAPI={{@registerAPI}}
|
|
30
|
+
@onInsert={{this.onDropdownButtonInsert}}
|
|
31
|
+
as |dd|
|
|
32
|
+
>
|
|
33
|
+
<div class="next-dd-menu mt-0" role="menu">
|
|
34
|
+
<div class="px-1 pt-2">
|
|
35
|
+
<div class="text-xs px-2 text-gray-500 dark:text-gray-400 font-medium">
|
|
36
|
+
{{t "component.file.dropdown-label"}}
|
|
37
|
+
</div>
|
|
36
38
|
</div>
|
|
39
|
+
<div class="next-dd-menu-seperator"></div>
|
|
40
|
+
{{#if @onDelete}}
|
|
41
|
+
<div role="group" class="px-1">
|
|
42
|
+
<a
|
|
43
|
+
href="javascript:;"
|
|
44
|
+
role="menuitem"
|
|
45
|
+
class="next-dd-item xs-text text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
|
|
46
|
+
{{on "click" (dropdown-fn dd @onDelete this.file)}}
|
|
47
|
+
>
|
|
48
|
+
<FaIcon @icon="trash" @size="sm" class="mr-2" @prefix={{@dropdownButtonIconPrefix}} />
|
|
49
|
+
{{t "common.delete"}}
|
|
50
|
+
</a>
|
|
51
|
+
</div>
|
|
52
|
+
{{/if}}
|
|
53
|
+
{{#if @onDownload}}
|
|
54
|
+
<div role="group" class="px-1">
|
|
55
|
+
<a
|
|
56
|
+
href="javascript:;"
|
|
57
|
+
role="menuitem"
|
|
58
|
+
class="next-dd-item xs-text"
|
|
59
|
+
{{on "click" (dropdown-fn dd @onDownload this.file)}}
|
|
60
|
+
>
|
|
61
|
+
<FaIcon @icon="download" @size="sm" class="mr-2" @prefix={{@dropdownButtonIconPrefix}} />
|
|
62
|
+
{{t "common.download"}}
|
|
63
|
+
</a>
|
|
64
|
+
</div>
|
|
65
|
+
{{/if}}
|
|
66
|
+
{{#if @onPreview}}
|
|
67
|
+
<div role="group" class="px-1">
|
|
68
|
+
<a
|
|
69
|
+
href="javascript:;"
|
|
70
|
+
role="menuitem"
|
|
71
|
+
class="next-dd-item xs-text"
|
|
72
|
+
{{on "click" (dropdown-fn dd @onPreview this.file)}}
|
|
73
|
+
>
|
|
74
|
+
<FaIcon @icon="magnifying-glass" @size="sm" class="mr-2" @prefix={{@dropdownButtonIconPrefix}} />
|
|
75
|
+
{{t "common.preview"}}
|
|
76
|
+
</a>
|
|
77
|
+
</div>
|
|
78
|
+
{{/if}}
|
|
37
79
|
</div>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
href="javascript:;"
|
|
42
|
-
role="menuitem"
|
|
43
|
-
class="next-dd-item xs-text text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
|
|
44
|
-
{{on "click" (dropdown-fn dd @onDelete this.file)}}
|
|
45
|
-
>
|
|
46
|
-
<FaIcon @icon="trash" @size="sm" class="mr-2" @prefix={{@dropdownButtonIconPrefix}} />
|
|
47
|
-
{{t "common.delete"}}
|
|
48
|
-
</a>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</DropdownButton>
|
|
52
|
-
</div>
|
|
80
|
+
</DropdownButton>
|
|
81
|
+
</div>
|
|
82
|
+
{{/if}}
|
|
53
83
|
|
|
54
84
|
<div class="flex items-center justify-between px-2 py-1.5 border-t border-gray-100 dark:border-gray-700">
|
|
55
85
|
<span class="text-xs text-gray-700 dark:text-gray-300 truncate font-medium">
|
package/addon/components/file.js
CHANGED
|
@@ -9,4 +9,8 @@ export default class FileComponent extends Component {
|
|
|
9
9
|
get isImage() {
|
|
10
10
|
return isImageFile(this.file);
|
|
11
11
|
}
|
|
12
|
+
|
|
13
|
+
get hasActions() {
|
|
14
|
+
return typeof this.args.onDelete === 'function' || typeof this.args.onDownload === 'function' || typeof this.args.onPreview === 'function';
|
|
15
|
+
}
|
|
12
16
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fleetbase/ember-ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.17",
|
|
4
4
|
"description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"fleetbase-ui",
|