Skip to content

Commit ad7cd14

Browse files
filipbechiOvergaard
filipbech
authored and
iOvergaard
committed
localize document-info
1 parent 94c1381 commit ad7cd14

File tree

2 files changed

+61
-34
lines changed

2 files changed

+61
-34
lines changed

‎src/packages/core/localization/localize.element.ts

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
99
@customElement('umb-localize')
1010
export class UmbLocalizeElement extends UmbLitElement {
1111
/**
12-
* The key to localize. The key is case sensitive.
12+
* The key to localize. The key is case sensitive. For non-term localizations, this is the input
1313
* @attr
1414
* @example key="general_ok"
1515
*/
@@ -34,10 +34,36 @@ export class UmbLocalizeElement extends UmbLitElement {
3434
@property()
3535
debug = false;
3636

37+
@property()
38+
type: 'term' | 'date' | 'number' | 'relativeTime' = 'term';
39+
40+
@property()
41+
unit: Intl.RelativeTimeFormatUnit = 'seconds';
42+
43+
@property()
44+
options?: Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | Intl.RelativeTimeFormatOptions;
45+
3746
@state()
3847
protected get text(): string {
39-
const localizedValue = this.localize.term(this.key, ...(this.args ?? []));
48+
let localizedValue = '';
4049

50+
switch (this.type) {
51+
case 'term':
52+
localizedValue = this.localize.term(this.key, ...(this.args ?? []));
53+
break;
54+
case 'date':
55+
localizedValue = this.localize.date(this.key, this.options as Intl.DateTimeFormatOptions);
56+
break;
57+
case 'number':
58+
localizedValue = this.localize.number(this.key, this.options as Intl.NumberFormatOptions);
59+
break;
60+
case 'relativeTime':
61+
localizedValue = this.localize.relativeTime(+this.key, this.unit, this.options as Intl.RelativeTimeFormatOptions);
62+
break;
63+
default:
64+
throw('unsupported type')
65+
break;
66+
}
4167
// If the value is the same as the key, it means the key was not found.
4268
if (localizedValue === this.key) {
4369
(this.getHostElement() as HTMLElement).setAttribute('data-localize-missing', this.key);
@@ -50,11 +76,11 @@ export class UmbLocalizeElement extends UmbLitElement {
5076
}
5177

5278
protected render() {
53-
return this.text
79+
return this.text.trim()
5480
? html`${unsafeHTML(this.text)}`
5581
: this.debug
56-
? html`<span style="color:red">${this.key}</span>`
57-
: html`<slot></slot>`;
82+
? html`<span style="color:red">${this.key}</span>`
83+
: html`<slot></slot>`;
5884
}
5985

6086
static styles = [

‎src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
138138

139139
render() {
140140
return html`<div class="container">
141-
<uui-box headline="Links" style="--uui-box-default-padding: 0;"> ${this.#renderLinksSection()} </uui-box>
142-
<uui-box headline="History">
141+
<uui-box headline=${this.localize.term('general_links')} style="--uui-box-default-padding: 0;"> ${this.#renderLinksSection()} </uui-box>
142+
<uui-box headline=${this.localize.term('general_history')}>
143143
<umb-history-list>
144144
${repeat(
145145
this._historyList,
@@ -164,43 +164,44 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
164164
</a>
165165
<div class="link-item">
166166
<span class="link-language">en-EN</span>
167-
<span class="link-content italic"> This document is published but is not in the cache</span>
167+
<span class="link-content italic"><umb-localize key="content_parentNotPublishedAnomaly"></umb-localize></span>
168168
</div>
169169
</div>`;
170170
}
171171

172172
#renderGeneralSection() {
173173
return html`
174174
<div class="general-item">
175-
<strong>Status</strong>
176-
<span><uui-tag color="positive" look="primary" label="Published">Published</uui-tag></span>
175+
<strong>${this.localize.term('content_publishStatus')}</strong>
176+
<span><uui-tag color="positive" look="primary" label=${this.localize.term('content_published')}><umb-localize key="content_published"></umb-localize></uui-tag></span>
177177
</div>
178178
<div class="general-item">
179-
<strong>Created Date</strong>
180-
<span>...</span>
179+
<strong><umb-localize key="content_createDate"></umb-localize></strong>
180+
<span><umb-localize key="${new Date}" type="date"></umb-localize></span>
181181
</div>
182182
<div class="general-item">
183-
<strong>Document Type</strong>
183+
<strong><umb-localize key="content_documentType"></umb-localize></strong>
184184
<uui-button
185185
href=${this._editDocumentTypePath + 'edit/' + this._documentTypeId}
186-
label="Edit Document Type"></uui-button>
186+
label=${this.localize.term('general_edit')}></uui-button>
187187
</div>
188188
<div class="general-item">
189-
<strong>Template</strong>
190-
<span>template picker?</span>
189+
<strong><umb-localize key="template_template"></umb-localize></strong>
190+
<span>IMPLEMENT template picker?</span>
191191
</div>
192192
<div class="general-item">
193-
<strong>Id</strong>
193+
<strong><umb-localize key="template_id"></umb-localize></strong>
194194
<span>...</span>
195195
</div>
196196
`;
197197
}
198198

199199
#renderHistory(history: HistoryNode) {
200-
return html` <umb-history-item .name="${history.userName}" .detail="${history.timestamp}">
201-
<span class="log-type">${this.#renderTag(history.logType)} ${this.#renderTagDescription(history.logType)}</span>
202-
<uui-button label="Rollback" look="secondary" slot="actions">
203-
<uui-icon name="umb:undo"></uui-icon> Rollback
200+
return html` <umb-history-item .name="${history.userName}" .detail="${this.localize.date(history.timestamp!)}">
201+
<span class="log-type">${this.#renderTag(history.logType)} ${this.#renderTagDescription(history.logType, history)}</span>
202+
<uui-button label=${this.localize.term('actions_rollback')} look="secondary" slot="actions">
203+
<uui-icon name="umb:undo"></uui-icon>
204+
<umb-localize key="actions_rollback"></umb-localize>
204205
</uui-button>
205206
</umb-history-item>`;
206207
}
@@ -220,34 +221,34 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
220221
#renderTag(type?: HistoryLogType) {
221222
switch (type) {
222223
case 'Publish':
223-
return html`<uui-tag look="primary" color="positive" label="Publish">Publish</uui-tag>`;
224+
return html`<uui-tag look="primary" color="positive" label=${this.localize.term('content_publish')}><umb-localize key="content_publish"></umb-localize></uui-tag>`;
224225
case 'Unpublish':
225-
return html`<uui-tag look="primary" color="warning" label="Unpublish">Unpublish</uui-tag>`;
226+
return html`<uui-tag look="primary" color="warning" label=${this.localize.term('content_unpublish')}><umb-localize key="content_unpublish"></umb-localize></uui-tag>`;
226227
case 'Save':
227-
return html`<uui-tag look="primary" label="Save">Save</uui-tag>`;
228+
return html`<uui-tag look="primary" label=${this.localize.term('auditTrails_smallSave')}><umb-localize key="auditTrails_smallSave"></umb-localize></uui-tag>`;
228229
case 'ContentVersionEnableCleanup':
229-
return html`<uui-tag look="secondary" label="Content Version Enable Cleanup">Save</uui-tag>`;
230+
return html`<uui-tag look="secondary" label=${this.localize.term('contentTypeEditor_historyCleanupEnableCleanup')}><umb-localize key="contentTypeEditor_historyCleanupEnableCleanup"></umb-localize></uui-tag>`;
230231
case 'ContentVersionPreventCleanup':
231-
return html`<uui-tag look="secondary" label="Content Version Prevent Cleanup">Save</uui-tag>`;
232+
return html`<uui-tag look="secondary" label=${this.localize.term('contentTypeEditor_historyCleanupPreventCleanup')}><umb-localize key="contentTypeEditor_historyCleanupPreventCleanup"></umb-localize></uui-tag>`;
232233
default:
233-
return 'Could not detech log type';
234+
return 'Could not detect log type';
234235
}
235236
}
236237

237-
#renderTagDescription(type?: HistoryLogType, params?: string) {
238+
#renderTagDescription(type?: HistoryLogType, params?: HistoryNode) {
238239
switch (type) {
239240
case 'Publish':
240-
return html`Content published`;
241+
return this.localize.term('auditTrails_publish');
241242
case 'Unpublish':
242-
return html`Content unpublished`;
243+
return this.localize.term('auditTrails_unpublish');
243244
case 'Save':
244-
return html`Content saved`;
245+
return this.localize.term('auditTrails_save');
245246
case 'ContentVersionEnableCleanup':
246-
return html`Cleanup enabled for version: ${params}`;
247+
return this.localize.term('auditTrails_contentversionenablecleanup', [params?.nodeId]);
247248
case 'ContentVersionPreventCleanup':
248-
return html`Cleanup disabled for version: ${params}`;
249+
return this.localize.term('auditTrails_contentversionpreventcleanup', [params?.nodeId]);
249250
default:
250-
return 'Could not detech log type';
251+
return 'Could not detect log type';
251252
}
252253
}
253254

0 commit comments

Comments
 (0)