add common rename entity action + modal
This commit is contained in:
@@ -1,15 +1,96 @@
|
||||
import { UmbRenameRepository } from '../rename.action.js';
|
||||
import { UmbRenameModalData, UmbRenameModalValue } from './rename-modal.token.js';
|
||||
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
|
||||
import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
|
||||
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
|
||||
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
|
||||
import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
|
||||
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
|
||||
|
||||
@customElement('umb-rename-modal')
|
||||
export class UmbRenameModalElement extends UmbModalBaseElement<UmbRenameModalData, UmbRenameModalValue> {
|
||||
render() {
|
||||
return html` <uui-dialog-layout class="uui-text"> THIS IS MY RENAME MODAL </uui-dialog-layout> `;
|
||||
#renameRepository?: UmbRenameRepository;
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.#observeRepository();
|
||||
}
|
||||
|
||||
static styles = [UmbTextStyles];
|
||||
#observeRepository() {
|
||||
if (!this.data?.renameRepositoryAlias) throw new Error('A rename repository alias is required');
|
||||
|
||||
new UmbExtensionApiInitializer(
|
||||
this,
|
||||
umbExtensionsRegistry,
|
||||
this.data.renameRepositoryAlias,
|
||||
[this],
|
||||
(permitted, ctrl) => {
|
||||
this.#renameRepository = permitted ? (ctrl.api as UmbRenameRepository) : undefined;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
async #onSubmit(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
if (!this.#renameRepository) throw new Error('Rename repository is not available');
|
||||
if (!this.data?.unique) throw new Error('Unique identifier is not available');
|
||||
|
||||
const form = event.target as HTMLFormElement;
|
||||
if (!form) return;
|
||||
|
||||
const isValid = form.checkValidity();
|
||||
if (!isValid) return;
|
||||
|
||||
const formData = new FormData(form);
|
||||
const name = formData.get('name') as string;
|
||||
|
||||
const { data } = await this.#renameRepository.rename(this.data?.unique, name);
|
||||
|
||||
if (data) {
|
||||
this.updateValue({ newName: data });
|
||||
this._submitModal();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<umb-body-layout headline=${'Rename'}>
|
||||
<uui-box>
|
||||
<uui-form>
|
||||
<form id="RenameForm" @submit="${this.#onSubmit}">
|
||||
<uui-form-layout-item>
|
||||
<uui-label id="nameLabel" for="name" slot="label" required>Name</uui-label>
|
||||
<uui-input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Enter new name..."
|
||||
required
|
||||
required-message="Name is required"></uui-input>
|
||||
</uui-form-layout-item>
|
||||
</form>
|
||||
</uui-form>
|
||||
</uui-box>
|
||||
|
||||
<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._rejectModal}"></uui-button>
|
||||
<uui-button
|
||||
form="RenameForm"
|
||||
type="submit"
|
||||
slot="actions"
|
||||
color="positive"
|
||||
look="primary"
|
||||
label="Rename"></uui-button>
|
||||
</umb-body-layout>
|
||||
`;
|
||||
}
|
||||
|
||||
static styles = [
|
||||
UmbTextStyles,
|
||||
css`
|
||||
#name {
|
||||
width: 100%;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
export default UmbRenameModalElement;
|
||||
|
||||
@@ -2,10 +2,13 @@ import { UMB_RENAME_MODAL_ALIAS } from './manifests.js';
|
||||
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
|
||||
|
||||
export interface UmbRenameModalData {
|
||||
renameRepositoryAlias: string;
|
||||
unique: string;
|
||||
}
|
||||
|
||||
export interface UmbRenameModalValue {}
|
||||
export interface UmbRenameModalValue {
|
||||
newName: string;
|
||||
}
|
||||
|
||||
export const UMB_RENAME_MODAL = new UmbModalToken<UmbRenameModalData, UmbRenameModalValue>(UMB_RENAME_MODAL_ALIAS, {
|
||||
modal: {
|
||||
|
||||
@@ -2,9 +2,10 @@ import { UMB_RENAME_MODAL } from './modal/rename-modal.token.js';
|
||||
import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
|
||||
import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
|
||||
import { UmbModalManagerContext, UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
|
||||
import { DataSourceResponse } from '@umbraco-cms/backoffice/repository';
|
||||
|
||||
export interface UmbRenameRepository {
|
||||
rename(unique: string, name: string): Promise<void>;
|
||||
rename(unique: string, name: string): Promise<DataSourceResponse<string>>;
|
||||
}
|
||||
|
||||
export class UmbRenameEntityAction extends UmbEntityActionBase<UmbRenameRepository> {
|
||||
@@ -25,10 +26,12 @@ export class UmbRenameEntityAction extends UmbEntityActionBase<UmbRenameReposito
|
||||
const modalContext = this.#modalManagerContext?.open(UMB_RENAME_MODAL, {
|
||||
data: {
|
||||
unique: this.unique,
|
||||
renameRepositoryAlias: this.repositoryAlias,
|
||||
},
|
||||
});
|
||||
|
||||
modalContext.onSubmit().then((value) => {
|
||||
debugger;
|
||||
console.log(value);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -38,7 +38,6 @@ export interface MetaEntityAction {
|
||||
* "Umb.Repository.Documents"
|
||||
* ]
|
||||
*/
|
||||
// TODO: Could we find the repository based on entityTypes?
|
||||
repositoryAlias: string;
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user