Merge pull request #2008 from umbraco/bugfix/v14/member-localizations-and-time-formatting

madsrasmussen · web-flow · commit 8074f98c8e3d · 2024-06-19T14:13:02.000+02:00
Bugfix: Member localizations and time formatting
diff --git a/src/assets/lang/da-dk.ts b/src/assets/lang/da-dk.ts
@@ -538,6 +538,7 @@ export default {
 		selectContentType: 'Vælg indholdstype',
 		selectMediaStartNode: 'Vælg startnode for mediearkivet',
 		selectMember: 'Vælg medlem',
+		selectMembers: 'Vælg medlemmer',
 		selectMemberGroup: 'Vælg medlemsgruppe',
 		selectMemberType: 'Vælg medlemstype',
 		selectNode: 'Vælg node',
@@ -762,6 +763,7 @@ export default {
 		deleted: 'Slettet',
 		deleting: 'Sletter...',
 		design: 'Design',
+		details: 'Detaljer',
 		dictionary: 'Ordbog',
 		dimensions: 'Dimensioner',
 		discard: 'Kassér',
@@ -808,6 +810,7 @@ export default {
 		message: 'Besked',
 		move: 'Flyt',
 		name: 'Navn',
+		never: 'Aldrig',
 		new: 'Ny',
 		next: 'Næste',
 		no: 'Nej',
@@ -850,6 +853,7 @@ export default {
 		submit: 'Indsend',
 		type: 'Type',
 		typeToSearch: 'Skriv for at søge...',
+		unknown: 'Ukendt',
 		unknownUser: 'Ukendt bruger',
 		under: 'under',
 		up: 'Op',
diff --git a/src/assets/lang/en-us.ts b/src/assets/lang/en-us.ts
@@ -549,6 +549,7 @@ export default {
 		selectContentType: 'Select content type',
 		selectMediaStartNode: 'Select media start node',
 		selectMember: 'Select member',
+		selectMembers: 'Select members',
 		selectMemberGroup: 'Select member group',
 		selectMemberType: 'Select member type',
 		selectNode: 'Select node',
@@ -821,6 +822,7 @@ export default {
 		message: 'Message',
 		move: 'Move',
 		name: 'Name',
+		never: 'Never',
 		new: 'New',
 		next: 'Next',
 		no: 'No',
@@ -870,6 +872,7 @@ export default {
 		type: 'Type',
 		typeName: 'Type Name',
 		typeToSearch: 'Type to search...',
+		unknown: 'Unknown',
 		unknownUser: 'Unknown user',
 		under: 'under',
 		up: 'Up',
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
@@ -560,6 +560,7 @@ export default {
 		selectContentType: 'Select content type',
 		selectMediaStartNode: 'Select media start node',
 		selectMember: 'Select member',
+		selectMembers: 'Select members',
 		selectMemberGroup: 'Select member group',
 		selectMemberType: 'Select member type',
 		selectNode: 'Select node',
@@ -830,6 +831,7 @@ export default {
 		message: 'Message',
 		move: 'Move',
 		name: 'Name',
+		never: 'Never',
 		new: 'New',
 		next: 'Next',
 		no: 'No',
@@ -879,6 +881,7 @@ export default {
 		type: 'Type',
 		typeName: 'Type Name',
 		typeToSearch: 'Type to search...',
+		unknown: 'Unknown',
 		unknownUser: 'Unknown user',
 		under: 'under',
 		up: 'Up',
diff --git a/src/packages/members/member-group/collection/views/table/member-group-table-collection-view.element.ts b/src/packages/members/member-group/collection/views/table/member-group-table-collection-view.element.ts
@@ -16,7 +16,7 @@ export class UmbMemberGroupTableCollectionViewElement extends UmbLitElement {
 	@state()
 	private _tableColumns: Array<UmbTableColumn> = [
 		{
-			name: 'Name',
+			name: this.localize.term('general_name'),
 			alias: 'memberGroupName',
 		},
 	];
diff --git a/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts b/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts
@@ -182,6 +182,7 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
 					${this.#renderOpenButton(item)}
 					<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>
 				</uui-action-bar>
+				<umb-icon slot="icon" name="icon-users"></umb-icon>
 			</uui-ref-node>
 		`;
 	}
diff --git a/src/packages/members/member-group/workspace/views/info/member-type-workspace-view-info.element.ts b/src/packages/members/member-group/workspace/views/info/member-type-workspace-view-info.element.ts
@@ -23,17 +23,19 @@ export class UmbMemberTypeWorkspaceViewMemberInfoElement extends UmbLitElement i
 
 	render() {
 		return html` <div id="left-column">
-				<uui-box headline="Member Group">
+				<uui-box headline=${this.localize.term('content_membergroup')}>
 					<div id="no-properties">
-						<umb-localize key="member_memberGroupNoProperties"></umb-localize>
+						<umb-localize key="member_memberGroupNoProperties">
+							Member groups have no additional properties for editing.
+						</umb-localize>
 					</div>
 				</uui-box>
 			</div>
 
 			<div id="right-column">
-				<uui-box headline="General">
+				<uui-box headline=${this.localize.term('general_general')}>
 					<div class="property">
-						<b>Id</b>
+						<b><umb-localize key="general_id">Id</umb-localize></b>
 						<span>${this._unique}</span>
 					</div>
 				</uui-box>
diff --git a/src/packages/members/member/collection/views/table/member-table-collection-view.element.ts b/src/packages/members/member/collection/views/table/member-table-collection-view.element.ts
@@ -16,7 +16,7 @@ export class UmbMemberTableCollectionViewElement extends UmbLitElement {
 	@state()
 	private _tableColumns: Array<UmbTableColumn> = [
 		{
-			name: 'Name',
+			name: this.localize.term('general_name'),
 			alias: 'memberName',
 		},
 	];
diff --git a/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
@@ -46,7 +46,7 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
 	}
 
 	render() {
-		return html`<umb-body-layout headline="Select members">
+		return html`<umb-body-layout headline=${this.localize.term('defaultdialogs_selectMembers')}>
 			<uui-box>
 				${repeat(
 					this.#filteredMembers,
@@ -64,8 +64,12 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
 				)}
 			</uui-box>
 			<div slot="actions">
-				<uui-button label="Close" @click=${this.#close}></uui-button>
-				<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
+				<uui-button label=${this.localize.term('general_cancel')} @click=${this.#close}></uui-button>
+				<uui-button
+					label=${this.localize.term('general_submit')}
+					look="primary"
+					color="positive"
+					@click=${this.#submit}></uui-button>
 			</div>
 		</umb-body-layout> `;
 	}
diff --git a/src/packages/members/member/workspace/manifests.ts b/src/packages/members/member/workspace/manifests.ts
@@ -67,7 +67,7 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
 		js: () => import('./views/member/member-workspace-view-member.element.js'),
 		weight: 200,
 		meta: {
-			label: 'Member',
+			label: '#treeHeaders_member',
 			pathname: 'member',
 			icon: 'icon-user',
 		},
diff --git a/src/packages/members/member/workspace/member-workspace.context.ts b/src/packages/members/member/workspace/member-workspace.context.ts
@@ -399,43 +399,40 @@ export class UmbMemberWorkspaceContext
 		this.#currentData.setValue({ ...currentData, ...data });
 	}
 
-	get email() {
+	get email(): string {
 		return this.#get('email') || '';
 	}
 
-	get username() {
+	get username(): string {
 		return this.#get('username') || '';
 	}
 
-	get isLockedOut() {
+	get isLockedOut(): boolean {
 		return this.#get('isLockedOut') || false;
 	}
 
-	get isTwoFactorEnabled() {
+	get isTwoFactorEnabled(): boolean {
 		return this.#get('isTwoFactorEnabled') || false;
 	}
 
-	get isApproved() {
+	get isApproved(): boolean {
 		return this.#get('isApproved') || false;
 	}
 
-	get failedPasswordAttempts() {
+	get failedPasswordAttempts(): number {
 		return this.#get('failedPasswordAttempts') || 0;
 	}
 
-	//TODO Use localization for "never"
-	get lastLockOutDate() {
-		return this.#get('lastLockoutDate') || 'never';
+	get lastLockOutDate(): string | null {
+		return this.#get('lastLockoutDate') ?? null;
 	}
 
-	get lastLoginDate() {
-		return this.#get('lastLoginDate') || 'never';
+	get lastLoginDate(): string | null {
+		return this.#get('lastLoginDate') ?? null;
 	}
 
-	get lastPasswordChangeDate() {
-		const date = this.#get('lastPasswordChangeDate');
-		if (!date) return 'never';
-		return new Date(date).toLocaleString();
+	get lastPasswordChangeDate(): string | null {
+		return this.#get('lastPasswordChangeDate') ?? null;
 	}
 
 	get memberGroups() {
diff --git a/src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts b/src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts
@@ -1,5 +1,6 @@
 // import { UMB_COMPOSITION_PICKER_MODAL, type UmbCompositionPickerModalData } from '../../../modals/index.js';
 import { UMB_MEMBER_WORKSPACE_CONTEXT } from '../../member-workspace.context-token.js';
+import { TimeFormatOptions } from './utils.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -19,10 +20,12 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 
 	@state()
 	private _editMemberTypePath = '';
+
 	@state()
-	private _createDate = 'Unknown';
+	private _createDate = this.localize.term('general_unknown');
+
 	@state()
-	private _updateDate = 'Unknown';
+	private _updateDate = this.localize.term('general_unknown');
 
 	@state()
 	private _unique = '';
@@ -45,8 +48,8 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 		this.consumeContext(UMB_MEMBER_WORKSPACE_CONTEXT, async (context) => {
 			this.#workspaceContext = context;
 			this.observe(this.#workspaceContext.contentTypeUnique, (unique) => (this._memberTypeUnique = unique || ''));
-			this.observe(this.#workspaceContext.createDate, (date) => (this._createDate = date || 'Unknown'));
-			this.observe(this.#workspaceContext.updateDate, (date) => (this._updateDate = date || 'Unknown'));
+			this.observe(this.#workspaceContext.createDate, (date) => (this._createDate = this.#setDateFormat(date)));
+			this.observe(this.#workspaceContext.updateDate, (date) => (this._updateDate = this.#setDateFormat(date)));
 			this.observe(this.#workspaceContext.unique, (unique) => (this._unique = unique || ''));
 
 			const memberType = (await this.#memberTypeItemRepository.requestItems([this._memberTypeUnique])).data?.[0];
@@ -56,37 +59,36 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 		});
 	}
 
+	#setDateFormat(date: string | undefined | null): string {
+		if (!date) return this.localize.term('general_unknown');
+		return this.localize.date(date, TimeFormatOptions);
+	}
+
 	render() {
 		return this.#renderGeneralSection();
 	}
 
 	#renderGeneralSection() {
 		return html`
 			<div class="general-item">
-				<umb-localize class="headline" key="content_createDate"></umb-localize>
-				<span>
-					<umb-localize-date .date=${this._createDate}></umb-localize-date>
-				</span>
+				<umb-localize class="headline" key="content_createDate">Created</umb-localize>
+				<span> ${this._createDate} </span>
 			</div>
 			<div class="general-item">
-				<umb-localize class="headline" key="content_updateDate"></umb-localize>
-				<span>
-					<umb-localize-date .date=${this._updateDate}></umb-localize-date>
-				</span>
+				<umb-localize class="headline" key="content_updateDate">Last edited</umb-localize>
+				<span> ${this._updateDate} </span>
 			</div>
 			<div class="general-item">
-				<span class="headline">Member Type</span>
-				<div class="member-type-edit">
-					<uui-icon .name=${this._memberTypeIcon}></uui-icon>
-					<span>${this._memberTypeName}</span>
-					<uui-button
-						look="secondary"
-						href=${this._editMemberTypePath + 'edit/' + this._memberTypeUnique}
-						label=${this.localize.term('general_edit')}></uui-button>
-				</div>
+				<umb-localize class="headline" key="content_membertype">Member Type</umb-localize>
+				<uui-ref-node
+					standalone
+					.name=${this._memberTypeName}
+					.href=${this._editMemberTypePath + 'edit/' + this._memberTypeUnique}>
+					<umb-icon slot="icon" .name=${this._memberTypeIcon}></umb-icon>
+				</uui-ref-node>
 			</div>
 			<div class="general-item">
-				<umb-localize class="headline" key="template_id"></umb-localize>
+				<umb-localize class="headline" key="template_id">Id</umb-localize>
 				<span>${this._unique}</span>
 			</div>
 		`;
@@ -95,17 +97,6 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 	static styles = [
 		UmbTextStyles,
 		css`
-			.member-type-edit {
-				display: flex;
-				align-items: center;
-			}
-			.member-type-edit uui-icon {
-				margin-right: var(--uui-size-space-1);
-			}
-			.member-type-edit uui-button {
-				margin-left: auto;
-			}
-
 			.general-item {
 				display: flex;
 				flex-direction: column;
diff --git a/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts b/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
diff --git a/src/packages/members/member/workspace/views/member/utils.ts b/src/packages/members/member/workspace/views/member/utils.ts
diff --git a/src/packages/user/user/utils.ts b/src/packages/user/user/utils.ts
diff --git a/src/packages/user/user/workspace/components/user-workspace-info/user-workspace-info.element.ts b/src/packages/user/user/workspace/components/user-workspace-info/user-workspace-info.element.ts

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export class UmbMemberGroupTableCollectionViewElement extends UmbLitElement {`
`16`	`16`	`@state()`
`17`	`17`	`private _tableColumns: Array<UmbTableColumn> = [`
`18`	`18`	`{`
`19`		`- name: 'Name',`
	`19`	`+ name: this.localize.term('general_name'),`
`20`	`20`	`alias: 'memberGroupName',`
`21`	`21`	`},`
`22`	`22`	`];`
Original file line number	Diff line number	Diff line change
`@@ -182,6 +182,7 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen`
`182`	`182`	`${this.#renderOpenButton(item)}`
`183`	`183`	`<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>`
`184`	`184`	`</uui-action-bar>`
	`185`	`+ <umb-icon slot="icon" name="icon-users"></umb-icon>`
`185`	`186`	`</uui-ref-node>`
`186`	`187`	`;
`187`	`188`	`}`
Original file line number	Diff line number	Diff line change
`@@ -399,43 +399,40 @@ export class UmbMemberWorkspaceContext`
`399`	`399`	`this.#currentData.setValue({ ...currentData, ...data });`
`400`	`400`	`}`
`401`	`401`
`402`		`- get email() {`
	`402`	`+ get email(): string {`
`403`	`403`	`return this.#get('email') \|\| '';`
`404`	`404`	`}`
`405`	`405`
`406`		`- get username() {`
	`406`	`+ get username(): string {`
`407`	`407`	`return this.#get('username') \|\| '';`
`408`	`408`	`}`
`409`	`409`
`410`		`- get isLockedOut() {`
	`410`	`+ get isLockedOut(): boolean {`
`411`	`411`	`return this.#get('isLockedOut') \|\| false;`
`412`	`412`	`}`
`413`	`413`
`414`		`- get isTwoFactorEnabled() {`
	`414`	`+ get isTwoFactorEnabled(): boolean {`
`415`	`415`	`return this.#get('isTwoFactorEnabled') \|\| false;`
`416`	`416`	`}`
`417`	`417`
`418`		`- get isApproved() {`
	`418`	`+ get isApproved(): boolean {`
`419`	`419`	`return this.#get('isApproved') \|\| false;`
`420`	`420`	`}`
`421`	`421`
`422`		`- get failedPasswordAttempts() {`
	`422`	`+ get failedPasswordAttempts(): number {`
`423`	`423`	`return this.#get('failedPasswordAttempts') \|\| 0;`
`424`	`424`	`}`
`425`	`425`
`426`		`- //TODO Use localization for "never"`
`427`		`- get lastLockOutDate() {`
`428`		`- return this.#get('lastLockoutDate') \|\| 'never';`
	`426`	`+ get lastLockOutDate(): string \| null {`
	`427`	`+ return this.#get('lastLockoutDate') ?? null;`
`429`	`428`	`}`
`430`	`429`
`431`		`- get lastLoginDate() {`
`432`		`- return this.#get('lastLoginDate') \|\| 'never';`
	`430`	`+ get lastLoginDate(): string \| null {`
	`431`	`+ return this.#get('lastLoginDate') ?? null;`
`433`	`432`	`}`
`434`	`433`
`435`		`- get lastPasswordChangeDate() {`
`436`		`- const date = this.#get('lastPasswordChangeDate');`
`437`		`- if (!date) return 'never';`
`438`		`- return new Date(date).toLocaleString();`
	`434`	`+ get lastPasswordChangeDate(): string \| null {`
	`435`	`+ return this.#get('lastPasswordChangeDate') ?? null;`
`439`	`436`	`}`
`440`	`437`
`441`	`438`	`get memberGroups() {`