diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/member-group.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/member-group.data.ts index f4c4b355a3..e5c63f701d 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/member-group.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/member-group.data.ts @@ -1,9 +1,8 @@ -import type { MemberGroupDetails } from '../../packages/members/member-groups/types.js'; import { UmbEntityData } from './entity.data.js'; import { createEntityTreeItem } from './utils.js'; import { EntityTreeItemResponseModel, PagedEntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; -export const data: Array = [ +export const data: Array = [ { name: 'Member Group AAA', type: 'member-group', diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/entity-actions/manifests.ts index 47aa5e7d75..37bc371e54 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/entity-actions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/entity-actions/manifests.ts @@ -1,4 +1,5 @@ -import { MEMBER_GROUP_REPOSITORY_ALIAS } from '../repository/manifests.js'; +import { UMB_MEMBER_GROUP_DETAIL_REPOSITORY_ALIAS } from '../repository/index.js'; +import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../entity.js'; import type { ManifestEntityAction } from '@umbraco-cms/backoffice/extension-registry'; import { UmbDeleteEntityAction } from '@umbraco-cms/backoffice/entity-action'; @@ -11,8 +12,8 @@ const entityActions: Array = [ meta: { icon: 'icon-trash', label: 'Delete', - repositoryAlias: MEMBER_GROUP_REPOSITORY_ALIAS, - entityTypes: ['member-group'], + repositoryAlias: UMB_MEMBER_GROUP_DETAIL_REPOSITORY_ALIAS, + entityTypes: [UMB_MEMBER_GROUP_ENTITY_TYPE], }, }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/entity.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/entity.ts new file mode 100644 index 0000000000..8cfdf47241 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/entity.ts @@ -0,0 +1,2 @@ +export const UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE = 'member-group-root'; +export const UMB_MEMBER_GROUP_ENTITY_TYPE = 'member-group'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/index.ts new file mode 100644 index 0000000000..3d76f338dd --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/index.ts @@ -0,0 +1 @@ +export * from './repository/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/menu-item/manifests.ts index daface74f4..e8ab53dda4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/menu-item/manifests.ts @@ -1,16 +1,18 @@ +import { UMB_MEMBER_MENU_ALIAS } from '../../menu.manifests.js'; +import { UMB_MEMBER_GROUP_TREE_ALIAS } from '../tree/index.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; const menuItem: ManifestTypes = { type: 'menuItem', kind: 'tree', - alias: 'Umb.MenuItem.MemberGroups', - name: 'Member Groups Menu Item', - weight: 800, + alias: 'Umb.MenuItem.MemberGroup', + name: 'Member Group Menu Item', + weight: 400, meta: { label: 'Member Groups', icon: 'icon-folder', - treeAlias: 'Umb.Tree.MemberGroups', - menus: ['Umb.Menu.Members'], + treeAlias: UMB_MEMBER_GROUP_TREE_ALIAS, + menus: [UMB_MEMBER_MENU_ALIAS], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/index.ts new file mode 100644 index 0000000000..5270ef41c2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/index.ts @@ -0,0 +1,2 @@ +export { UmbMemberGroupDetailRepository } from './member-group-detail.repository.js'; +export { UMB_MEMBER_GROUP_DETAIL_REPOSITORY_ALIAS } from './manifests.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/manifests.ts new file mode 100644 index 0000000000..d075fd0739 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/manifests.ts @@ -0,0 +1,22 @@ +import { UmbMemberGroupDetailRepository } from './member-group-detail.repository.js'; +import { UmbMemberGroupDetailStore } from './member-group-detail.store.js'; +import type { ManifestRepository, ManifestStore } from '@umbraco-cms/backoffice/extension-registry'; + +export const UMB_MEMBER_GROUP_DETAIL_REPOSITORY_ALIAS = 'Umb.Repository.MemberGroup.Detail'; +export const UMB_MEMBER_GROUP_DETAIL_STORE_ALIAS = 'Umb.Store.MemberGroup.Detail'; + +const repository: ManifestRepository = { + type: 'repository', + alias: UMB_MEMBER_GROUP_DETAIL_REPOSITORY_ALIAS, + name: 'MemberGroup Detail Detail Repository', + api: UmbMemberGroupDetailRepository, +}; + +const store: ManifestStore = { + type: 'store', + alias: UMB_MEMBER_GROUP_DETAIL_STORE_ALIAS, + name: 'MemberGroup Detail Store', + api: UmbMemberGroupDetailStore, +}; + +export const manifests = [repository, store]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/member-group-detail.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/member-group-detail.repository.ts new file mode 100644 index 0000000000..f9bb8cc4d9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/member-group-detail.repository.ts @@ -0,0 +1,9 @@ +import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository'; + +export class UmbMemberGroupDetailRepository extends UmbRepositoryBase { + constructor(host: UmbControllerHost) { + super(host); + console.log('UmbMemberGroupDetailRepository'); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/member-group-detail.store.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/member-group-detail.store.ts new file mode 100644 index 0000000000..9e2f994141 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/detail/member-group-detail.store.ts @@ -0,0 +1,25 @@ +import type { UmbMemberGroupDetailModel } from '../../types.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import { UmbStoreBase } from '@umbraco-cms/backoffice/store'; +import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; +import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; + +/** + * @export + * @class UmbMemberGroupDetailStore + * @extends {UmbStoreBase} + * @description - Data Store for MemberGroup Detail + */ +export class UmbMemberGroupDetailStore extends UmbStoreBase { + constructor(host: UmbControllerHostElement) { + super( + host, + UMB_MEMBER_GROUP_DETAIL_STORE_CONTEXT.toString(), + new UmbArrayState([], (x) => x.id), + ); + } +} + +export const UMB_MEMBER_GROUP_DETAIL_STORE_CONTEXT = new UmbContextToken( + 'UmbMemberGroupDetailStore', +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/index.ts new file mode 100644 index 0000000000..5f534ec83a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/index.ts @@ -0,0 +1 @@ +export { UmbMemberGroupDetailRepository, UMB_MEMBER_GROUP_DETAIL_REPOSITORY_ALIAS } from './detail/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/manifests.ts index 88d03c4c19..448c479022 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/manifests.ts @@ -1,32 +1,3 @@ -import { UmbMemberGroupRepository } from './member-group.repository.js'; -import { UmbMemberGroupStore } from './member-group.store.js'; -import { UmbMemberGroupTreeStore } from './member-group.tree.store.js'; -import type { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry'; +import { manifests as detailManifests } from './detail/manifests.js'; -export const MEMBER_GROUP_REPOSITORY_ALIAS = 'Umb.Repository.MemberGroup'; - -const repository: ManifestRepository = { - type: 'repository', - alias: MEMBER_GROUP_REPOSITORY_ALIAS, - name: 'Member Group Repository', - api: UmbMemberGroupRepository, -}; - -export const MEMBER_GROUP_STORE_ALIAS = 'Umb.Store.MemberGroup'; -export const MEMBER_GROUP_TREE_STORE_ALIAS = 'Umb.Store.MemberGroupTree'; - -const store: ManifestStore = { - type: 'store', - alias: MEMBER_GROUP_STORE_ALIAS, - name: 'Member Group Store', - api: UmbMemberGroupStore, -}; - -const treeStore: ManifestTreeStore = { - type: 'treeStore', - alias: MEMBER_GROUP_TREE_STORE_ALIAS, - name: 'Member Group Tree Store', - api: UmbMemberGroupTreeStore, -}; - -export const manifests = [store, treeStore, repository]; +export const manifests = [...detailManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/member-group.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/member-group.repository.ts deleted file mode 100644 index 1b90246683..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/member-group.repository.ts +++ /dev/null @@ -1,191 +0,0 @@ -import type { MemberGroupDetails } from '../types.js'; -import { UmbMemberGroupTreeStore, UMB_MEMBER_GROUP_TREE_STORE_CONTEXT_TOKEN } from './member-group.tree.store.js'; -import { UmbMemberGroupDetailServerDataSource } from './sources/member-group.detail.server.data.js'; -import { UmbMemberGroupStore, UMB_MEMBER_GROUP_STORE_CONTEXT_TOKEN } from './member-group.store.js'; -import { UmbMemberGroupTreeServerDataSource } from './sources/member-group.tree.server.data.js'; -import { UmbBaseController, type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification'; -import { UmbDetailRepository } from '@umbraco-cms/backoffice/repository'; -import type { UmbTreeRepository, UmbTreeDataSource } from '@umbraco-cms/backoffice/tree'; -import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; -import { UmbApi } from '@umbraco-cms/backoffice/extension-api'; - -// TODO => Update type when backend updated -export class UmbMemberGroupRepository - extends UmbBaseController - implements UmbTreeRepository, UmbDetailRepository, UmbApi -{ - #init!: Promise; - - #treeSource: UmbTreeDataSource; - #treeStore?: UmbMemberGroupTreeStore; - - #detailSource: UmbMemberGroupDetailServerDataSource; - #store?: UmbMemberGroupStore; - - #notificationContext?: UmbNotificationContext; - - constructor(host: UmbControllerHost) { - super(host); - // TODO: figure out how spin up get the correct data source - this.#treeSource = new UmbMemberGroupTreeServerDataSource(this); - this.#detailSource = new UmbMemberGroupDetailServerDataSource(this); - - this.consumeContext(UMB_MEMBER_GROUP_TREE_STORE_CONTEXT_TOKEN, (instance) => { - this.#treeStore = instance; - }); - - this.consumeContext(UMB_MEMBER_GROUP_STORE_CONTEXT_TOKEN, (instance) => { - this.#store = instance; - }); - - this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => { - this.#notificationContext = instance; - }); - } - - // TREE: - async requestTreeRoot() { - await this.#init; - - const data = { - id: null, - type: 'member-group-root', - name: 'Member Groups', - icon: 'icon-folder', - hasChildren: true, - }; - - return { data }; - } - - async requestRootTreeItems() { - await this.#init; - - const { data, error } = await this.#treeSource.getRootItems(); - - if (data) { - this.#treeStore?.appendItems(data.items); - } - - return { data, error }; - } - - async requestTreeItemsOf(parentId: string | null) { - return { data: undefined, error: { title: 'Not implemented', message: 'Not implemented' } }; - } - - async requestItemsLegacy(ids: Array) { - await this.#init; - - if (!ids) { - throw new Error('Ids are missing'); - } - - const { data, error } = await this.#treeSource.getItems(ids); - - return { data, error }; - } - - async rootTreeItems() { - await this.#init; - return this.#treeStore!.rootItems; - } - - async treeItemsOf(parentId: string | null) { - await this.#init; - return this.#treeStore!.childrenOf(parentId); - } - - async itemsLegacy(ids: Array) { - await this.#init; - return this.#treeStore!.items(ids); - } - - // DETAIL - - async createScaffold() { - await this.#init; - return this.#detailSource.createScaffold(); - } - - async requestById(id: string) { - await this.#init; - - // TODO: should we show a notification if the id is missing? - // Investigate what is best for Acceptance testing, cause in that perspective a thrown error might be the best choice? - if (!id) { - throw new Error('Id is missing'); - } - const { data, error } = await this.#detailSource.read(id); - - if (data) { - this.#store?.append(data); - } - return { data, error }; - } - - async byId(id: string) { - if (!id) throw new Error('Id is missing'); - await this.#init; - return this.#store!.byId(id); - } - - async create(detail: MemberGroupDetails) { - await this.#init; - - if (!detail.name) { - throw new Error('Name is missing'); - } - - const { data, error } = await this.#detailSource.create(detail); - - if (!error) { - const notification = { data: { message: `Member group '${detail.name}' created` } }; - this.#notificationContext?.peek('positive', notification); - } - - return { data, error }; - } - - async save(id: string, memberGroup: MemberGroupDetails) { - if (!id) throw new Error('Id is missing'); - if (!memberGroup) throw new Error('Member group is missing'); - - await this.#init; - - const { error } = await this.#detailSource.update(id, memberGroup); - - if (!error) { - this.#store?.append(memberGroup); - this.#treeStore?.updateItem(memberGroup.id, memberGroup); - - const notification = { data: { message: `Member group '${memberGroup.name} saved` } }; - this.#notificationContext?.peek('positive', notification); - } - - return { error }; - } - - async delete(id: string) { - if (!id) throw new Error('Id is missing'); - - await this.#init; - - const { error } = await this.#detailSource.delete(id); - - if (!error) { - // TODO: we currently don't use the detail store for anything. - // Consider to look up the data before fetching from the server. - // Consider notify a workspace if a template is deleted from the store while someone is editing it. - // TODO: would be nice to align the stores on methods/methodNames. - this.#store?.remove([id]); - this.#treeStore?.removeItem(id); - - const notification = { data: { message: `Document deleted` } }; - this.#notificationContext?.peek('positive', notification); - } - - return { error }; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/member-group.store.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/member-group.store.ts deleted file mode 100644 index f2a4ab5215..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/member-group.store.ts +++ /dev/null @@ -1,42 +0,0 @@ -import type { MemberGroupDetails } from '../types.js'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; -import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; -import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; -import { UmbStoreBase } from '@umbraco-cms/backoffice/store'; - -/** - * @export - * @class UmbMemberGroupStore - * @extends {UmbStoreBase} - * @description - Data Store for Member Groups - */ -export class UmbMemberGroupStore extends UmbStoreBase { - #data = new UmbArrayState([], (x) => x.id); - - constructor(host: UmbControllerHostElement) { - super( - host, - UMB_MEMBER_GROUP_STORE_CONTEXT_TOKEN.toString(), - new UmbArrayState([], (x) => x.id) - ); - } - - append(memberGroup: MemberGroupDetails) { - this._data.append([memberGroup]); - } - - /** - * Retrieve a member from the store - * @param {string} id - * @memberof UmbMemberGroupStore - */ - byId(id: MemberGroupDetails['id']) { - return this._data.asObservablePart((x) => x.find((y) => y.id === id)); - } - - remove(uniques: string[]) { - this._data.remove(uniques); - } -} - -export const UMB_MEMBER_GROUP_STORE_CONTEXT_TOKEN = new UmbContextToken('UmbMemberGroupStore'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/sources/member-group.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/sources/member-group.detail.server.data.ts deleted file mode 100644 index ad2fe4a442..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/sources/member-group.detail.server.data.ts +++ /dev/null @@ -1,126 +0,0 @@ -import type { MemberGroupDetails } from '../../types.js'; -import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; -import { UmbDataSource } from '@umbraco-cms/backoffice/repository'; - -/** - * @description - A data source for the MemberGroup detail that fetches data from the server - * @export - * @class UmbMemberGroupDetailServerDataSource - * @implements {MemberGroupDetailDataSource} - */ -// TODO => Provide type when it is available -export class UmbMemberGroupDetailServerDataSource implements UmbDataSource { - #host: UmbControllerHost; - - constructor(host: UmbControllerHost) { - this.#host = host; - } - - /** - * @description - Creates a new MemberGroup scaffold - * @return {*} - * @memberof UmbMemberGroupDetailServerDataSource - */ - async createScaffold() { - const data: MemberGroupDetails = { - name: '', - } as MemberGroupDetails; - - return { data }; - } - - /** - * @description - Fetches a MemberGroup with the given id from the server - * @param {string} id - * @return {*} - * @memberof UmbMemberGroupDetailServerDataSource - */ - read(id: string) { - //return tryExecuteAndNotify(this.#host, MemberGroupResource.getMemberGroup({ id })) as any; - // TODO: use backend cli when available. - return tryExecuteAndNotify(this.#host, fetch(`/umbraco/management/api/v1/member-group/${id}`)) as any; - } - - /** - * @description - Updates a MemberGroup on the server - * @param {MemberGroupDetails} memberGroup - * @return {*} - * @memberof UmbMemberGroupDetailServerDataSource - */ - async update(id: string, memberGroup: MemberGroupDetails) { - if (!memberGroup.id) { - throw new Error('Member Group id is missing'); - } - - const payload = { id: memberGroup.id, requestBody: memberGroup }; - //return tryExecuteAndNotify(this.#host, MemberGroupResource.putMemberGroupByKey(payload)); - // TODO: use backend cli when available. - return tryExecuteAndNotify( - this.#host, - fetch(`/umbraco/management/api/v1/member-group/${memberGroup.id}`, { - method: 'PUT', - body: JSON.stringify(payload), - headers: { - 'Content-Type': 'application/json', - }, - }), - ) as any; - } - - /** - * @description - Inserts a new MemberGroup on the server - * @param {MemberGroupDetails} data - * @return {*} - * @memberof UmbMemberGroupDetailServerDataSource - */ - async create(data: MemberGroupDetails) { - const requestBody = { - name: data.name, - }; - - //return tryExecuteAndNotify(this.#host, MemberGroupResource.postMemberGroup({ requestBody })); - // TODO: use backend cli when available. - return tryExecuteAndNotify( - this.#host, - fetch(`/umbraco/management/api/v1/member-group/`, { - method: 'POST', - body: JSON.stringify(requestBody), - headers: { - 'Content-Type': 'application/json', - }, - }), - ) as any; - } - - /** - * @description - Deletes a MemberGroup on the server - * @param {string} id - * @return {*} - * @memberof UmbMemberGroupDetailServerDataSource - */ - async trash(id: string) { - return this.delete(id); - } - - /** - * @description - Deletes a MemberGroup on the server - * @param {string} id - * @return {*} - * @memberof UmbMemberGroupDetailServerDataSource - */ - async delete(id: string) { - if (!id) { - throw new Error('Id is missing'); - } - - //return await tryExecuteAndNotify(this.#host, MemberGroupResource.deleteMemberGroupByKey({ id })); - // TODO: use backend cli when available. - return tryExecuteAndNotify( - this.#host, - fetch(`/umbraco/management/api/v1/member-group/${id}`, { - method: 'DELETE', - }), - ) as any; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/sources/member-group.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/sources/member-group.tree.server.data.ts deleted file mode 100644 index f976405daa..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/sources/member-group.tree.server.data.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { MemberGroupResource } from '@umbraco-cms/backoffice/backend-api'; -import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { type UmbTreeDataSource } from '@umbraco-cms/backoffice/tree'; -import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; - -/** - * A data source for the Member Group tree that fetches data from the server - * @export - * @class UmbMemberGroupTreeServerDataSource - * @implements {UmbTreeDataSource} - */ -export class UmbMemberGroupTreeServerDataSource implements UmbTreeDataSource { - #host: UmbControllerHost; - - /** - * Creates an instance of UmbMemberGroupTreeServerDataSource. - * @param {UmbControllerHost} host - * @memberof UmbMemberGroupTreeServerDataSource - */ - constructor(host: UmbControllerHost) { - this.#host = host; - } - - /** - * Fetches the root items for the tree from the server - * @return {*} - * @memberof UmbMemberGroupTreeServerDataSource - */ - async getRootItems() { - return tryExecuteAndNotify(this.#host, MemberGroupResource.getTreeMemberGroupRoot({})); - } - - /** - * Fetches the children of a given parent id from the server - * @param {(string | null)} parentId - * @return {*} - * @memberof UmbMemberGroupTreeServerDataSource - */ - async getChildrenOf(parentId: string | null) { - // Not implemented for this tree - return {}; - } - - /** - * Fetches the items for the given ids from the server - * @param {Array} ids - * @return {*} - * @memberof UmbMemberGroupTreeServerDataSource - */ - async getItems(ids: Array) { - if (!ids || ids.length === 0) { - throw new Error('Ids are missing'); - } - - return tryExecuteAndNotify( - this.#host, - MemberGroupResource.getMemberGroupItem({ - id: ids, - }), - ); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/index.ts new file mode 100644 index 0000000000..ea15369be8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/index.ts @@ -0,0 +1,9 @@ +export { UmbMemberGroupTreeRepository } from './member-group-tree.repository.js'; +export { + UMB_MEMBER_GROUP_TREE_REPOSITORY_ALIAS, + UMB_MEMBER_GROUP_TREE_STORE_ALIAS, + UMB_MEMBER_GROUP_TREE_ALIAS, +} from './manifests.js'; +export { UMB_MEMBER_GROUP_TREE_STORE_CONTEXT } from './member-group-tree.store.js'; +export { type UmbMemberGroupTreeStore } from './member-group-tree.store.js'; +export * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/manifests.ts index bdb3a68bf7..6f5490951f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/manifests.ts @@ -1,15 +1,37 @@ -import { MEMBER_GROUP_REPOSITORY_ALIAS } from '../repository/manifests.js'; -import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extension-registry'; +import { UMB_MEMBER_GROUP_ENTITY_TYPE, UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE } from '../entity.js'; +import { UmbMemberGroupTreeRepository } from './member-group-tree.repository.js'; +import { UmbMemberGroupTreeStore } from './member-group-tree.store.js'; +import type { + ManifestRepository, + ManifestTree, + ManifestTreeItem, + ManifestTreeStore, +} from '@umbraco-cms/backoffice/extension-registry'; -const treeAlias = 'Umb.Tree.MemberGroups'; +export const UMB_MEMBER_GROUP_TREE_REPOSITORY_ALIAS = 'Umb.Repository.MemberGroup.Tree'; +export const UMB_MEMBER_GROUP_TREE_STORE_ALIAS = 'Umb.Store.MemberGroup.Tree'; +export const UMB_MEMBER_GROUP_TREE_ALIAS = 'Umb.Tree.MemberGroup'; + +const treeRepository: ManifestRepository = { + type: 'repository', + alias: UMB_MEMBER_GROUP_TREE_REPOSITORY_ALIAS, + name: 'MemberGroup Tree Repository', + api: UmbMemberGroupTreeRepository, +}; + +const treeStore: ManifestTreeStore = { + type: 'treeStore', + alias: UMB_MEMBER_GROUP_TREE_STORE_ALIAS, + name: 'MemberGroup Tree Store', + api: UmbMemberGroupTreeStore, +}; const tree: ManifestTree = { type: 'tree', - alias: treeAlias, - name: 'Member Groups Tree', - weight: 100, + alias: UMB_MEMBER_GROUP_TREE_ALIAS, + name: 'MemberGroup Tree', meta: { - repositoryAlias: MEMBER_GROUP_REPOSITORY_ALIAS, + repositoryAlias: UMB_MEMBER_GROUP_TREE_REPOSITORY_ALIAS, }, }; @@ -17,10 +39,10 @@ const treeItem: ManifestTreeItem = { type: 'treeItem', kind: 'entity', alias: 'Umb.TreeItem.MemberGroup', - name: 'Member Group Tree Item', + name: 'MemberGroup Tree Item', meta: { - entityTypes: ['member-group-root', 'member-group'], + entityTypes: [UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE, UMB_MEMBER_GROUP_ENTITY_TYPE], }, }; -export const manifests = [tree, treeItem]; +export const manifests = [treeRepository, treeStore, tree, treeItem]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/member-group-tree.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/member-group-tree.repository.ts new file mode 100644 index 0000000000..4c39ede044 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/member-group-tree.repository.ts @@ -0,0 +1,28 @@ +import { UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE } from '../entity.js'; +import { UmbMemberGroupTreeServerDataSource } from './member-group-tree.server.data-source.js'; +import { UmbMemberGroupTreeItemModel, UmbMemberGroupTreeRootModel } from './types.js'; +import { UMB_MEMBER_GROUP_TREE_STORE_CONTEXT } from './member-group-tree.store.js'; +import { UmbTreeRepositoryBase } from '@umbraco-cms/backoffice/tree'; +import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbApi } from '@umbraco-cms/backoffice/extension-api'; + +export class UmbMemberGroupTreeRepository + extends UmbTreeRepositoryBase + implements UmbApi +{ + constructor(host: UmbControllerHost) { + super(host, UmbMemberGroupTreeServerDataSource, UMB_MEMBER_GROUP_TREE_STORE_CONTEXT); + } + + async requestTreeRoot() { + const data = { + id: null, + type: UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE, + name: 'Member Groups', + icon: 'icon-folder', + hasChildren: true, + }; + + return { data }; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/member-group-tree.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/member-group-tree.server.data-source.ts new file mode 100644 index 0000000000..a47df66843 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/member-group-tree.server.data-source.ts @@ -0,0 +1,61 @@ +import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/tree'; +import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +/** + * A data source for the MemberGroup tree that fetches data from the server + * @export + * @class UmbMemberGroupTreeServerDataSource + * @implements {UmbTreeDataSource} + */ +export class UmbMemberGroupTreeServerDataSource implements UmbTreeDataSource { + #host: UmbControllerHost; + + /** + * Creates an instance of UmbMemberGroupTreeServerDataSource. + * @param {UmbControllerHost} host + * @memberof UmbMemberGroupTreeServerDataSource + */ + constructor(host: UmbControllerHost) { + this.#host = host; + } + + /** + * Fetches the root items for the tree from the server + * @return {*} + * @memberof UmbMemberGroupTreeServerDataSource + */ + async getRootItems(): Promise { + alert('not implemented'); + //return tryExecuteAndNotify(this.#host, MemberGroupResource.getTreeMemberGroupRoot({})); + } + + /** + * Fetches the children of a given parent id from the server + * @param {(string)} parentId + * @return {*} + * @memberof UmbMemberGroupTreeServerDataSource + */ + async getChildrenOf(parentId: string | null): Promise { + alert('not implemented'); + /* TODO: should we make getRootItems() internal + so it only is a server concern that there are two endpoints? */ + /* + if (parentId === null) { + return this.getRootItems(); + } else { + return tryExecuteAndNotify( + this.#host, + MemberGroupResource.getTreeMemberGroupChildren({ + parentId, + }), + ); + } + */ + } + + // TODO: remove when interface is cleaned up + async getItems(unique: Array): Promise { + throw new Error('Dot not use this method. Use the item source instead'); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/member-group.tree.store.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/member-group-tree.store.ts similarity index 58% rename from src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/member-group.tree.store.ts rename to src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/member-group-tree.store.ts index 52ad906621..1bb09263ba 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/repository/member-group.tree.store.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/member-group-tree.store.ts @@ -1,12 +1,12 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/tree'; -import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; /** * @export * @class UmbMemberGroupTreeStore - * @extends {UmbEntityTreeStore} - * @description - Tree Data Store for Member Groups + * @extends {UmbStoreBase} + * @description - Tree Data Store for MemberGroup Items */ export class UmbMemberGroupTreeStore extends UmbEntityTreeStore { /** @@ -15,10 +15,10 @@ export class UmbMemberGroupTreeStore extends UmbEntityTreeStore { * @memberof UmbMemberGroupTreeStore */ constructor(host: UmbControllerHostElement) { - super(host, UMB_MEMBER_GROUP_TREE_STORE_CONTEXT_TOKEN.toString()); + super(host, UMB_MEMBER_GROUP_TREE_STORE_CONTEXT.toString()); } } -export const UMB_MEMBER_GROUP_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken( +export const UMB_MEMBER_GROUP_TREE_STORE_CONTEXT = new UmbContextToken( 'UmbMemberGroupTreeStore', ); diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/types.ts new file mode 100644 index 0000000000..8bea00f33b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/types.ts @@ -0,0 +1,5 @@ +import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree'; + +export type UmbMemberGroupTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel; +export type UmbMemberGroupTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/types.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/types.ts index 9fc89986e2..0e2370ed9a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/types.ts @@ -1,5 +1,5 @@ -import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; -export interface MemberGroupDetails extends EntityTreeItemResponseModel { +export interface UmbMemberGroupDetailModel extends EntityTreeItemResponseModel { id: string; // TODO: Remove this when the backend is fixed } diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/index.ts new file mode 100644 index 0000000000..38d60d5873 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/index.ts @@ -0,0 +1 @@ +export { UMB_MEMBER_GROUP_WORKSPACE_ALIAS } from './manifests.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/manifests.ts index afee21b7f3..83d139f995 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/manifests.ts @@ -1,59 +1,23 @@ -import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace'; +import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../entity.js'; import type { ManifestWorkspace, ManifestWorkspaceAction, ManifestWorkspaceEditorView, } from '@umbraco-cms/backoffice/extension-registry'; +export const UMB_MEMBER_GROUP_WORKSPACE_ALIAS = 'Umb.Workspace.MemberGroup'; + const workspace: ManifestWorkspace = { type: 'workspace', - alias: 'Umb.Workspace.MemberGroup', - name: 'Member Group Workspace', + alias: UMB_MEMBER_GROUP_WORKSPACE_ALIAS, + name: 'MemberGroup Workspace', loader: () => import('./member-group-workspace.element.js'), meta: { - entityType: 'member-group', + entityType: UMB_MEMBER_GROUP_ENTITY_TYPE, }, }; -const workspaceViews: Array = [ - { - type: 'workspaceEditorView', - alias: 'Umb.WorkspaceView.MemberGroup.Info', - name: 'Member Group Workspace Info View', - loader: () => import('./views/info/workspace-view-member-group-info.element.js'), - weight: 90, - meta: { - label: 'Info', - pathname: 'info', - icon: 'info', - }, - conditions: [ - { - alias: 'Umb.Condition.WorkspaceAlias', - match: workspace.alias, - }, - ], - }, -]; - -const workspaceActions: Array = [ - { - type: 'workspaceAction', - alias: 'Umb.WorkspaceAction.MemberGroup.Save', - name: 'Save Member Group Workspace Action', - api: UmbSaveWorkspaceAction, - meta: { - label: 'Save', - look: 'primary', - color: 'positive', - }, - conditions: [ - { - alias: 'Umb.Condition.WorkspaceAlias', - match: workspace.alias, - }, - ], - }, -]; +const workspaceViews: Array = []; +const workspaceActions: Array = []; export const manifests = [workspace, ...workspaceViews, ...workspaceActions]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace-editor.element.ts index de0fa1ce06..add2a3ad1c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace-editor.element.ts @@ -1,70 +1,20 @@ -import type { MemberGroupDetails } from '../types.js'; -import { UMB_MEMBER_GROUP_WORKSPACE_CONTEXT } from './member-group-workspace.context.js'; -import { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -/** - * @element umb-member-group-edit-workspace - * @description - Element for displaying a Member Group Workspace - */ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit'; + @customElement('umb-member-group-workspace-editor') -export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement { - #workspaceContext?: typeof UMB_MEMBER_GROUP_WORKSPACE_CONTEXT.TYPE; - - @state() - private _memberGroup?: MemberGroupDetails; - - constructor() { - super(); - - this.consumeContext(UMB_MEMBER_GROUP_WORKSPACE_CONTEXT, (instance) => { - this.#workspaceContext = instance; - this.#observeMemberGroup(); - }); - } - - #observeMemberGroup() { - if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.data, (data) => (this._memberGroup = data)); - } - - // TODO. find a way where we don't have to do this for all workspaces. - #handleInput(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext?.setName(target.value); - } - } - } - +export class UmbMemberGroupWorkspaceEditorElement extends LitElement { render() { - return html` - - `; + return html` MemberGroup Workspace `; } static styles = [ + UmbTextStyles, css` :host { display: block; width: 100%; height: 100%; } - - #header { - margin: 0 var(--uui-size-layout-1); - flex: 1 1 auto; - } - - #name { - width: 100%; - flex: 1 1 auto; - align-items: center; - } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.context.ts index 7dd14b2039..da129a9079 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.context.ts @@ -1,73 +1,48 @@ -import { UmbMemberGroupRepository } from '../repository/member-group.repository.js'; -import type { MemberGroupDetails } from '../types.js'; +import { UmbMemberGroupDetailRepository } from '../repository/index.js'; +import type { UmbMemberGroupDetailModel } from '../types.js'; +import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../entity.js'; +import { UMB_MEMBER_GROUP_WORKSPACE_ALIAS } from './manifests.js'; import { UmbSaveableWorkspaceContextInterface, UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; -import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; -type EntityType = MemberGroupDetails; export class UmbMemberGroupWorkspaceContext - extends UmbWorkspaceContext - implements UmbSaveableWorkspaceContextInterface + extends UmbWorkspaceContext + implements UmbSaveableWorkspaceContextInterface { - #data = new UmbObjectState(undefined); - data = this.#data.asObservable(); - name = this.#data.asObservablePart((data) => data?.name); - constructor(host: UmbControllerHostElement) { - super(host, 'Umb.Workspace.MemberGroup', new UmbMemberGroupRepository(host)); + super(host, UMB_MEMBER_GROUP_WORKSPACE_ALIAS, new UmbMemberGroupDetailRepository(host)); } - getData() { - return this.#data.getValue(); + getEntityType(): string { + return UMB_MEMBER_GROUP_ENTITY_TYPE; } getEntityId() { - return this.getData()?.id || ''; + return '1234'; } - getEntityType() { - return 'member-group'; - } - - setName(name: string) { - this.#data.update({ name }); - } - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - setPropertyValue(alias: string, value: string) { - // Not implemented for this context - member groups have no properties for editing - return; - } - - async load(entityId: string) { - const { data } = await this.repository.requestById(entityId); - if (data) { - this.#data.next(data); - } - } - - async create() { - const { data } = await this.repository.createScaffold(); - if (!data) return; - this.setIsNew(true); - this.#data.next(data); + getData() { + return 'fake' as unknown as UmbMemberGroupDetailModel; } async save() { - if (!this.#data.value) return; - await this.repository.save(this.#data.value.id, this.#data.value); - this.setIsNew(true); + console.log('save'); + } + + async load(id: string) { + console.log('load', id); } public destroy(): void { - this.#data.destroy(); + console.log('destroy'); } } - - -export const UMB_MEMBER_GROUP_WORKSPACE_CONTEXT = new UmbContextToken( +export const UMB_MEMBER_GROUP_WORKSPACE_CONTEXT = new UmbContextToken< + UmbSaveableWorkspaceContextInterface, + UmbMemberGroupWorkspaceContext +>( 'UmbWorkspaceContext', - (context): context is UmbMemberGroupWorkspaceContext => context.getEntityType?.() === 'member-group' + (context): context is UmbMemberGroupWorkspaceContext => context.getEntityType?.() === UMB_MEMBER_GROUP_ENTITY_TYPE, ); diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.element.ts index db9637f3d8..ec112b5c54 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.element.ts @@ -1,14 +1,10 @@ -import { UmbMemberGroupWorkspaceContext } from './member-group-workspace.context.js'; import { UmbMemberGroupWorkspaceEditorElement } from './member-group-workspace-editor.element.js'; -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; +import { UmbMemberGroupWorkspaceContext } from './member-group-workspace.context.js'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import type { UmbRoute } from '@umbraco-cms/backoffice/router'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -/** - * @element umb-member-group-workspace - * @description - Element for displaying a Member Group Workspace - */ @customElement('umb-member-group-workspace') export class UmbMemberGroupWorkspaceElement extends UmbLitElement { #workspaceContext = new UmbMemberGroupWorkspaceContext(this); @@ -27,7 +23,7 @@ export class UmbMemberGroupWorkspaceElement extends UmbLitElement { ]; render() { - return html` `; + return html` `; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.stories.ts index 64cbe84fdb..39f4ac530a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.stories.ts @@ -2,13 +2,13 @@ import './member-group-workspace.element.js'; import { Meta, Story } from '@storybook/web-components'; -import { data } from '../../../../mocks/data/member-group.data.js'; +import { data } from '../../../../mocks/data/member.data.js'; import type { UmbMemberGroupWorkspaceElement } from './member-group-workspace.element.js'; import { html } from '@umbraco-cms/backoffice/external/lit'; export default { - title: 'Workspaces/Member Group', + title: 'Workspaces/MemberGroup', component: 'umb-member-group-workspace', id: 'umb-member-group-workspace', } as Meta; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts deleted file mode 100644 index c2c47047b9..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { UMB_MEMBER_GROUP_WORKSPACE_CONTEXT } from '../../member-group-workspace.context.js'; -import type { MemberGroupDetails } from '../../../types.js'; -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -@customElement('umb-workspace-view-member-group-info') -export class UmbWorkspaceViewMemberGroupInfoElement extends UmbLitElement { - @state() - private _memberGroup?: MemberGroupDetails; - - #workspaceContext?: typeof UMB_MEMBER_GROUP_WORKSPACE_CONTEXT.TYPE; - - constructor() { - super(); - - this.consumeContext(UMB_MEMBER_GROUP_WORKSPACE_CONTEXT, (instance) => { - this.#workspaceContext = instance; - this.#observeMemberGroup(); - }); - } - - #observeMemberGroup() { - if (!this.#workspaceContext) return; - - this.observe(this.#workspaceContext.data, (memberGroup) => { - if (!memberGroup) return; - this._memberGroup = memberGroup; - }); - } - - private _renderGeneralInfo() { - return html` - - -
${this._memberGroup?.id}
- - - `; - } - - private _renderMemberGroupInfo() { - return html` - - Member groups have no additional properties for editing. - - `; - } - - render() { - return html` ${this._renderMemberGroupInfo()}${this._renderGeneralInfo()} `; - } - - static styles = [ - UmbTextStyles, - css` - :host { - display: flex; - margin: var(--uui-size-layout-1); - gap: var(--uui-size-layout-1); - justify-content: space-between; - } - - uui-box { - margin-bottom: var(--ui-size-layout-1); - } - - uui-box:first-child { - flex: 1 1 75%; - } - - uui-box:last-child { - min-width: 320px; - } - `, - ]; -} - -export default UmbWorkspaceViewMemberGroupInfoElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-workspace-view-member-group-info': UmbWorkspaceViewMemberGroupInfoElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.stories.ts deleted file mode 100644 index a63df06ab7..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import './workspace-view-member-group-info.element.js'; - -import { Meta, Story } from '@storybook/web-components'; -import type { UmbWorkspaceViewMemberGroupInfoElement } from './workspace-view-member-group-info.element.js'; -import { html } from '@umbraco-cms/backoffice/external/lit'; - -//import { data } from '../../../../../core/mocks/data/data-type.data.js'; -//import { UmbDataTypeContext } from '../../data-type.context.js'; - -export default { - title: 'Workspaces/Data Type/Views/Info', - component: 'umb-workspace-view-member-group-info', - id: 'umb-workspace-view-member-group-info', - decorators: [ - (story) => { - return html`TODO: make use of mocked workspace context??`; - /*html` - ${story()} - `,*/ - }, - ], -} as Meta; - -export const AAAOverview: Story = () => - html` `; -AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/members/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/members/menu-item/manifests.ts index d28c74e953..144b72ffdb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/members/menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/members/menu-item/manifests.ts @@ -1,3 +1,4 @@ +import { UMB_MEMBER_MENU_ALIAS } from '../../menu.manifests.js'; import { UMB_MEMBER_TREE_ALIAS } from '../tree/index.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; @@ -11,7 +12,7 @@ const menuItem: ManifestTypes = { label: 'Members', icon: 'icon-folder', treeAlias: UMB_MEMBER_TREE_ALIAS, - menus: ['Umb.Menu.Members'], + menus: [UMB_MEMBER_MENU_ALIAS], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/menu.manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/menu.manifests.ts index 64970ac68e..ec49273360 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/menu.manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/menu.manifests.ts @@ -1,8 +1,10 @@ import { ManifestMenu } from '@umbraco-cms/backoffice/extension-registry'; +export const UMB_MEMBER_MENU_ALIAS = 'Umb.Menu.Member'; + const menu: ManifestMenu = { type: 'menu', - alias: 'Umb.Menu.Members', + alias: UMB_MEMBER_MENU_ALIAS, name: 'Members Menu', meta: { label: 'Members',