member type property options

Author: loivsen

src/packages/core/content-type/types.ts

@@ -44,6 +44,13 @@ export interface UmbPropertyTypeModel {
 	variesBySegment: boolean;
 	validation: UmbPropertyTypeValidationModel;
 	appearance: UmbPropertyTypeAppearanceModel;
+	visibility?: UmbPropertyTypeVisibilityModel;
+	isSensitive?: boolean;
+}
+
+export interface UmbPropertyTypeVisibilityModel {
+	memberCanEdit: boolean;
+	memberCanView: boolean;
 }
 
 export interface UmbPropertyTypeValidationModel {

src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts

@@ -312,6 +312,21 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 								<span>* ${this.localize.term('general_mandatory')}</span>
 							</uui-tag>`
 						: nothing}
+					${this.property.visibility?.memberCanView === true
+						? html`<uui-tag look="default">
+								<uui-icon name="icon-eye"></uui-icon> ${this.localize.term('contentTypeEditor_showOnMemberProfile')}
+							</uui-tag>`
+						: nothing}
+					${this.property.visibility?.memberCanEdit === true
+						? html`<uui-tag look="default">
+								<uui-icon name="icon-edit"></uui-icon> ${this.localize.term('contentTypeEditor_memberCanEdit')}
+							</uui-tag>`
+						: nothing}
+					${this.property.isSensitive === true
+						? html`<uui-tag look="default">
+								<uui-icon name="icon-lock"></uui-icon> ${this.localize.term('contentTypeEditor_isSensitiveData')}
+							</uui-tag>`
+						: nothing}
 				</div>`
 			: nothing;
 	}
@@ -433,6 +448,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 			.types > div uui-icon,
 			.inherited uui-icon {
 				vertical-align: sub;
+				margin-right: var(--uui-size-space-1);
 			}
 
 			.inherited {
@@ -446,6 +462,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 				top: var(--uui-size-space-2);
 				left: var(--uui-size-space-2);
 				display: flex;
+				flex-flow: wrap;
 				gap: var(--uui-size-space-2);
 			}
 

src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts

@@ -61,6 +61,9 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 	@query('#alias-input')
 	private _aliasInput!: UUIInputLockElement;
 
+	@state()
+	private _entityType?: string;
+
 	constructor() {
 		super();
 
@@ -82,6 +85,7 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 		this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, (instance) => {
 			this.observe(instance.variesByCulture, (variesByCulture) => (this._contentTypeVariesByCulture = variesByCulture));
 			this.observe(instance.variesBySegment, (variesBySegment) => (this._contentTypeVariesBySegment = variesBySegment));
+			this._entityType = instance.getEntityType();
 		}).passContextAliasMatches();
 	}
 
@@ -142,6 +146,20 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 		});
 	}
 
+	#onToggleShowOnMemberProfile(e: UUIBooleanInputEvent) {
+		const memberCanEdit = this._data?.visibility?.memberCanEdit ?? false;
+		this.updateValue({ visibility: { memberCanView: e.target.checked, memberCanEdit } });
+	}
+
+	#onToggleMemberCanEdit(e: UUIBooleanInputEvent) {
+		const memberCanView = this._data?.visibility?.memberCanView ?? false;
+		this.updateValue({ visibility: { memberCanEdit: e.target.checked, memberCanView } });
+	}
+
+	#onToggleIsSensitiveData(e: UUIBooleanInputEvent) {
+		this.updateValue({ isSensitive: e.target.checked });
+	}
+
 	#onToggleAliasLock() {
 		this._aliasLocked = !this._aliasLocked;
 		if (this._aliasLocked && !this._data?.alias) {
@@ -255,10 +273,40 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 					</b>
 					<div id="appearances">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
 				</div>
+				${this.#renderMemberTypeOptions()}
 			</uui-box>
 		`;
 	}
 
+	#renderMemberTypeOptions() {
+		if (this._entityType !== 'member-type') return nothing;
+		return html` <hr />
+			<div class="container">
+				<b style="margin-bottom: var(--uui-size-space-3)">
+					<umb-localize key="general_options">Options</umb-localize>
+				</b>
+				<div>
+					<uui-toggle
+						?checked=${this._data?.visibility?.memberCanView}
+						@change=${this.#onToggleShowOnMemberProfile}
+						label=${this.localize.term('contentTypeEditor_showOnMemberProfile')}></uui-toggle>
+					<div>${this.localize.term('contentTypeEditor_showOnMemberProfileDescription')}</div>
+
+					<uui-toggle
+						?checked=${this._data?.visibility?.memberCanEdit}
+						@change=${this.#onToggleMemberCanEdit}
+						label=${this.localize.term('contentTypeEditor_memberCanEdit')}></uui-toggle>
+					<div>${this.localize.term('contentTypeEditor_memberCanEditDescription')}</div>
+
+					<uui-toggle
+						?checked=${this._data?.isSensitive}
+						@change=${this.#onToggleIsSensitiveData}
+						label=${this.localize.term('contentTypeEditor_isSensitiveData')}></uui-toggle>
+					<div>${this.localize.term('contentTypeEditor_isSensitiveDataDescription')}</div>
+				</div>
+			</div>`;
+	}
+
 	#renderAlignLeftIcon() {
 		return html`<button
 			type="button"

src/packages/members/member-type/repository/detail/member-type-detail.server.data-source.ts

@@ -97,6 +97,8 @@ export class UmbMemberTypeServerDataSource implements UmbDetailDataSource<UmbMem
 					variesBySegment: property.variesBySegment,
 					validation: property.validation,
 					appearance: property.appearance,
+					visibility: property.visibility,
+					isSensitive: property.isSensitive,
 				};
 			}),
 			containers: data.containers.map((container) => {
@@ -146,8 +148,8 @@ export class UmbMemberTypeServerDataSource implements UmbDetailDataSource<UmbMem
 					container: property.container ? { id: property.container.id } : null,
 					sortOrder: property.sortOrder,
 					alias: property.alias,
-					isSensitive: false,
-					visibility: { memberCanEdit: true, memberCanView: true },
+					isSensitive: property.isSensitive ?? false,
+					visibility: property.visibility ?? { memberCanEdit: false, memberCanView: false },
 					name: property.name,
 					description: property.description,
 					dataType: { id: property.dataType.unique },
@@ -206,8 +208,8 @@ export class UmbMemberTypeServerDataSource implements UmbDetailDataSource<UmbMem
 					id: property.id,
 					container: property.container ? { id: property.container.id } : null,
 					sortOrder: property.sortOrder,
-					isSensitive: false,
-					visibility: { memberCanEdit: true, memberCanView: true },
+					isSensitive: property.isSensitive ?? false,
+					visibility: property.visibility ?? { memberCanEdit: false, memberCanView: false },
 					alias: property.alias,
 					name: property.name,
 					description: property.description,