Skip to content

Commit

Permalink
chore(edit-ema): Support widgets in warning drag and drop #26644 (#27314
Browse files Browse the repository at this point in the history 
)

* dev: allow wigdets drag and drop in any container

* clean up
  • Loading branch information
@rjvelazco
rjvelazco authored Jan 11, 2024
1 parent 281e806 commit 6ded0f4
Show file tree
Hide file tree
Showing 9 changed files with 134 additions and 30 deletions.
3 changes: 2 additions & 1 deletion ...tte/components/edit-ema-palette-content-type/edit-ema-palette-content-type.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
{
variable: contenttype.variable,
name: contenttype.name,
contentType: contenttype.variable
contentType: contenttype.variable,
baseType: contenttype.baseType
} | json
"
[attr.data-testId]="'content-type-' + i"
Expand Down
21 changes: 14 additions & 7 deletions .../components/edit-ema-palette-content-type/edit-ema-palette-content-type.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@ export const CONTENT_TYPE_MOCK = [
{
name: 'Test Content Type',
variable: 'Test1',
icon: 'icon'
icon: 'icon',
baseType: 'CONTENT'
},
{
name: 'Test Content Type 2',
variable: 'Test2',
icon: 'icon'
icon: 'icon',
baseType: 'CONTENT'
}
];

Expand Down Expand Up @@ -54,12 +56,14 @@ describe('EditEmaPaletteContentTypeComponent', () => {
spectator.triggerEventHandler('[data-testId="content-type-0"]', 'dragstart', {
variable: 'test',
name: 'Test',
contentType: 'test'
contentType: 'test',
baseType: 'CONTENT'
});
expect(dragSpy).toHaveBeenCalledWith({
variable: 'test',
name: 'Test',
contentType: 'test'
contentType: 'test',
baseType: 'CONTENT'
});
});

Expand All @@ -69,12 +73,14 @@ describe('EditEmaPaletteContentTypeComponent', () => {
spectator.triggerEventHandler('[data-testId="content-type-0"]', 'dragend', {
variable: 'test',
name: 'Test',
contentType: 'test'
contentType: 'test',
baseType: 'CONTENT'
});
expect(dragSpy).toHaveBeenCalledWith({
variable: 'test',
name: 'Test',
contentType: 'test'
contentType: 'test',
baseType: 'CONTENT'
});
});

Expand All @@ -94,7 +100,8 @@ describe('EditEmaPaletteContentTypeComponent', () => {
expect(data).toEqual({
variable: 'Test1',
name: 'Test Content Type',
contentType: 'Test1'
contentType: 'Test1',
baseType: 'CONTENT'
});
});

Expand Down
7 changes: 5 additions & 2 deletions ...lette/components/edit-ema-palette-contentlets/edit-ema-palette-contentlets.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,11 @@
class="contentlet-card"
*ngFor="let contentlet of contentlets.items; let i = index"
[attr.data-item]="
{ identifier: contentlet.identifier, contentType: contentlet?.contentType }
| json
{
identifier: contentlet.identifier,
contentType: contentlet?.contentType,
baseType: contentlet.baseType
} | json
"
[attr.data-testId]="'contentlet-' + i"
(dragstart)="dragStart.emit($event)"
Expand Down
3 changes: 2 additions & 1 deletion ...te/components/edit-ema-palette-contentlets/edit-ema-palette-contentlets.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@ describe('EditEmaPaletteContentletsComponent', () => {
expect(spectator.query('[data-testId="contentlet-0"]')).toHaveAttribute('data-item');
expect(data).toEqual({
identifier: CONTENTLETS_MOCK[0].identifier,
contentType: CONTENTLETS_MOCK[0].contentType
contentType: CONTENTLETS_MOCK[0].contentType,
baseType: CONTENTLETS_MOCK[0].baseType
});
});

Expand Down
85 changes: 76 additions & 9 deletions .../src/lib/edit-ema-editor/components/ema-page-dropzone/ema-page-dropzone.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const ACTION_MOCK: ActionPayload = {
container: {
acceptTypes: 'file',
identifier: '789',
maxContentlets: 2,
maxContentlets: 100,
uuid: '2',
contentletsId: ['123', '455']
},
Expand All @@ -29,6 +29,11 @@ const ACTION_MOCK: ActionPayload = {
pageId: '123'
};

const ITEM_MOCK = {
contentType: 'file',
baseType: 'FILEASSET'
};

const getBoundsMock = (payload: ActionPayload): Row[] => {
return [
{
Expand Down Expand Up @@ -91,7 +96,12 @@ describe('EmaPageDropzoneComponent', () => {
});

beforeEach(() => {
spectator = createComponent();
spectator = createComponent({
props: {
rows: [],
item: ITEM_MOCK
}
});
dotMessageService = spectator.inject(DotMessageService, true);
});

Expand Down Expand Up @@ -161,8 +171,8 @@ describe('EmaPageDropzoneComponent', () => {
it('should handle drop event correctly', () => {
jest.spyOn(spectator.component.place, 'emit');

spectator.setInput('item', ITEM_MOCK);
spectator.setInput('rows', BOUNDS_MOCK);
spectator.setInput('contentType', 'file');
spectator.detectComponentChanges();

spectator.triggerEventHandler('div[data-type="contentlet"]', 'drop', {
Expand Down Expand Up @@ -198,12 +208,61 @@ describe('EmaPageDropzoneComponent', () => {
// Additional assertions as necessary
});

it('should allow drag and drop when baseType is WIDGET', () => {
jest.spyOn(spectator.component.place, 'emit');

spectator.setInput('item', {
baseType: 'WIDGET',
contentType: 'NOT_ACCEPTED_CONTENT_TYPE'
});
spectator.setInput('rows', BOUNDS_MOCK);
spectator.detectComponentChanges();

spectator.triggerEventHandler('div[data-type="contentlet"]', 'drop', {
target: {
clientY: 100,
getBoundingClientRect: () => {
return {
top: 100,
height: 100
};
},
dataset: {
payload: JSON.stringify(ACTION_MOCK)
}
}
});

spectator.detectChanges();

const errorZone = spectator.query('.drop-zone_error');

// Check that the error message is not displayed
expect(errorZone).toBeFalsy();

// Assert that the pointerPosition is reset
expect(spectator.component.pointerPosition).toEqual({
left: '0',
width: '0',
opacity: '0',
top: '0'
});

expect(spectator.component.place.emit).toHaveBeenCalledWith({
...ACTION_MOCK,
position: 'after'
});
});

it('should not emit place event when the contentType is not accepted in the container', () => {
const spyDotMessageSerivice = jest.spyOn(dotMessageService, 'get');
jest.spyOn(spectator.component.place, 'emit');

spectator.setInput('item', {
...ITEM_MOCK,
contentType: 'NOT_ACCEPTED_CONTENT_TYPE'
});
spectator.setInput('rows', BOUNDS_MOCK);
spectator.setInput('contentType', 'NOT_ACCEPTED_CONTENT_TYPE');
spectator.detectComponentChanges();

spectator.triggerEventHandler('div.drop-zone_error', 'drop', {
Expand Down Expand Up @@ -231,8 +290,16 @@ describe('EmaPageDropzoneComponent', () => {
it('should not emit place event when container is full', () => {
const spyDotMessageSerivice = jest.spyOn(dotMessageService, 'get');
jest.spyOn(spectator.component.place, 'emit');
spectator.setInput('rows', BOUNDS_MOCK);
spectator.setInput('contentType', 'file');
const NEW_BOUNDS_MOCK = getBoundsMock({
...ACTION_MOCK,
container: {
...ACTION_MOCK.container,
maxContentlets: 2
}
});

spectator.setInput('item', ITEM_MOCK);
spectator.setInput('rows', NEW_BOUNDS_MOCK);
spectator.detectComponentChanges();

spectator.triggerEventHandler('div.drop-zone_error', 'drop', {
Expand Down Expand Up @@ -270,7 +337,7 @@ describe('EmaPageDropzoneComponent', () => {
);
});

it('should show"one maximum content error when container is full and only allow one', () => {
it('should show one maximum content error when container is full and only allow one', () => {
jest.spyOn(spectator.component.place, 'emit');

const spyDotMessageSerivice = jest.spyOn(dotMessageService, 'get');
Expand All @@ -282,8 +349,8 @@ describe('EmaPageDropzoneComponent', () => {
}
});

spectator.setInput('item', ITEM_MOCK);
spectator.setInput('rows', NEW_BOUNDS_MOCK);
spectator.setInput('contentType', 'file');
spectator.detectComponentChanges();

spectator.triggerEventHandler('div.drop-zone_error', 'drop', {
Expand Down Expand Up @@ -322,8 +389,8 @@ describe('EmaPageDropzoneComponent', () => {
});

it('should set pointer on drag over', () => {
spectator.setInput('item', ITEM_MOCK);
spectator.setInput('rows', BOUNDS_MOCK);
spectator.setInput('contentType', 'file');
spectator.detectComponentChanges();

const stopPropagationSpy = jest.fn();
Expand Down
16 changes: 13 additions & 3 deletions ...rtlet/src/lib/edit-ema-editor/components/ema-page-dropzone/ema-page-dropzone.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
} from '@angular/core';

import { DotMessageService } from '@dotcms/data-access';
import { DotCMSBaseTypesContentTypes } from '@dotcms/dotcms-models';

import { ActionPayload, ContainerPayload } from '../../../shared/models';

Expand Down Expand Up @@ -38,6 +39,11 @@ interface Column {
containers: Container[];
}

export interface EmaDragItem {
baseType: string;
contentType: string;
}

export interface Row {
x: number;
y: number;
Expand All @@ -56,7 +62,7 @@ export interface Row {
})
export class EmaPageDropzoneComponent {
@Input() rows: Row[] = [];
@Input() contentType: string;
@Input() item: EmaDragItem;
@Output() place = new EventEmitter<ActionPayload>();

private readonly dotMessageService: DotMessageService = inject(DotMessageService);
Expand Down Expand Up @@ -160,7 +166,7 @@ export class EmaPageDropzoneComponent {
if (!this.isValidContentType(acceptTypes)) {
return this.dotMessageService.get(
'edit.ema.page.dropzone.invalid.contentlet.type',
this.contentType
this.item.contentType
);
}

Expand All @@ -185,9 +191,13 @@ export class EmaPageDropzoneComponent {
}

private isValidContentType(acceptTypes: string) {
if (this.item.baseType === DotCMSBaseTypesContentTypes.WIDGET) {
return true;
}

const acceptTypesArr = acceptTypes.split(',');

return acceptTypesArr.includes(this.contentType);
return acceptTypesArr.includes(this.item.contentType);
}

private contentCanFitInContainer({ contentletsId, maxContentlets }: ContainerPayload): boolean {
Expand Down
4 changes: 2 additions & 2 deletions ...web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,9 @@
(addContent)="addContentlet($event)"
data-testId="contentlet-tools" />
<dot-ema-page-dropzone
*ngIf="!!rows.length && !!dragItemType && !currentDevice"
*ngIf="!!rows.length && !!dragItem && !currentDevice"
[rows]="rows"
[contentType]="dragItemType"
[item]="dragItem"
(place)="onPlaceItem($event)"
data-testId="dropzone" />
</div>
Expand Down
13 changes: 10 additions & 3 deletions .../libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ const dragEventMock = {
item: JSON.stringify({
identifier: '123',
title: 'hello world',
contentType: 'File'
contentType: 'File',
baseType: 'CONTENT'
})
}
}
Expand Down Expand Up @@ -1314,7 +1315,10 @@ describe('EditEmaEditorComponent', () => {
dropZone = spectator.query(EmaPageDropzoneComponent);

expect(dropZone.rows).toBe(BOUNDS_MOCK);
expect(dropZone.contentType).toBe('File');
expect(dropZone.item).toEqual({
contentType: 'File',
baseType: 'CONTENT'
});
});

it('should hide drop zone on palette drop', () => {
Expand All @@ -1336,8 +1340,11 @@ describe('EditEmaEditorComponent', () => {

let dropZone = spectator.query(EmaPageDropzoneComponent);

expect(dropZone.item).toEqual({
contentType: 'File',
baseType: 'CONTENT'
});
expect(dropZone.rows).toBe(BOUNDS_MOCK);
expect(dropZone.contentType).toBe('File');

spectator.triggerEventHandler(EditEmaPaletteComponent, 'dragEnd', {});
spectator.detectComponentChanges();
Expand Down
12 changes: 10 additions & 2 deletions core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { EmaContentletToolsComponent } from './components/ema-contentlet-tools/e
import { EmaFormSelectorComponent } from './components/ema-form-selector/ema-form-selector.component';
import {
ContentletArea,
EmaDragItem,
EmaPageDropzoneComponent,
Row
} from './components/ema-page-dropzone/ema-page-dropzone.component';
Expand Down Expand Up @@ -122,7 +123,7 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {

rows: Row[] = [];
contentlet!: ContentletArea;
dragItemType: string;
dragItem: EmaDragItem;

// This should be in the store, but experienced an issue that triggers a reload in the whole store when the device is updated
currentDevice: DotDevice & { icon?: string };
Expand Down Expand Up @@ -291,7 +292,10 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
};

const item = JSON.parse(dataset.item);
this.dragItemType = item?.contentType;
this.dragItem = {
baseType: item.baseType,
contentType: item.contentType
};

this.draggedPayload = {
type: dataset.type,
Expand All @@ -312,6 +316,10 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
*/
onDragEnd(_event: DragEvent) {
this.rows = [];
this.dragItem = {
baseType: '',
contentType: ''
};
}

/**
Expand Down

0 comments on commit 6ded0f4

Please sign in to comment.