#21483 Update contentlet suggestions result (#1923)

* improve contentlet-block styles

* configure web components on block editor project

* progress

* update block contentlet style

* feedback

* working

Co-authored-by: Rafael <[email protected]>

libs/block-editor/src/lib/extensions/components/suggestions-list-item/suggestions-list-item.component.html

@@ -1,9 +1,23 @@
-<div class="icon-wrapper">
+<div class="icon-wrapper" [class.dot-contentlet]="data?.contentlet">
     <i class="material-icons" *ngIf="icon; else thumbnail">{{ url }}</i>
 
     <ng-template #thumbnail>
-        <img [src]="url" alt="" />
+        <dot-contentlet-thumbnail *ngIf="data?.contentlet else image "
+                                  [contentlet]="data.contentlet"
+                                  [width]="42"
+                                  [height]="42"
+                                  [iconSize]="'42px'"
+        ></dot-contentlet-thumbnail>
     </ng-template>
 </div>
+<div class='data-wrapper'>
+    <span>{{ label }}</span>
+    <div *ngIf="data?.contentlet" class="state">
+        <dot-state-icon [state]="data.contentlet" size="16px"></dot-state-icon>
+        <dot-badge bordered="true">{{data.contentlet.language}}</dot-badge>
+    </div>
+</div>
 
-<span>{{ label }}</span>
+<ng-template #image>
+    <img [src]="url" alt="" />
+</ng-template>

libs/block-editor/src/lib/extensions/components/suggestions-list-item/suggestions-list-item.component.scss

@@ -19,4 +19,40 @@
     height: 32px;
     justify-content: center;
     width: 32px;
+
+    dot-contentlet-thumbnail {
+        align-items: center;
+        display: block;
+        position: relative;
+        width: 42px;
+        height: 42px;
+    }
+
+    &.dot-contentlet{
+        width: 42px;
+        height: 42px;
+        flex-basis: 42px;
+    }
+
+
+}
+
+.data-wrapper {
+    overflow: hidden;
+
+    >span {
+        overflow: hidden;
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .state {
+        margin-top: $spacing-1;
+        display: flex;
+
+        dot-state-icon {
+            margin-right: $spacing-1;
+        }
+    }
 }

libs/block-editor/src/lib/extensions/components/suggestions-list-item/suggestions-list-item.component.ts

@@ -5,25 +5,27 @@ import { FocusableOption } from '@angular/cdk/a11y';
 @Component({
     selector: 'dotcms-suggestions-list-item',
     templateUrl: './suggestions-list-item.component.html',
-    styleUrls: ['./suggestions-list-item.component.scss'],
+    styleUrls: ['./suggestions-list-item.component.scss']
 })
 export class SuggestionsListItemComponent implements FocusableOption, OnInit {
-    @HostBinding('attr.role') role = 'list-item'
-    @HostBinding('attr.tabindex') tabindex = '-1'
+    @HostBinding('attr.role') role = 'list-item';
+    @HostBinding('attr.tabindex') tabindex = '-1';
 
     @HostBinding('attr.data-index')
-    @Input() index: number;
+    @Input()
+    index: number;
 
     @Input() command: () => void;
     @Input() label = '';
     @Input() url = '';
+    @Input() data = null;
 
     icon = false;
 
-    constructor(private element: ElementRef) { }
+    constructor(private element: ElementRef) {}
 
     ngOnInit() {
-        this.icon = this.icon = typeof( this.url ) === 'string' && !(this.url.split('/').length > 1);
+        this.icon = this.icon = typeof this.url === 'string' && !(this.url.split('/').length > 1);
     }
 
     getLabel(): string {
@@ -46,8 +48,8 @@ export class SuggestionsListItemComponent implements FocusableOption, OnInit {
 
     /**
      *
-     * Check if the element is a visible area 
-     * 
+     * Check if the element is a visible area
+     *
      * @private
      * @return {*}  {boolean}
      * @memberof SuggestionsListItemComponent
@@ -61,7 +63,7 @@ export class SuggestionsListItemComponent implements FocusableOption, OnInit {
     /**
      *
      * If true, the top of the element will be aligned to the top of the visible area
-     * of the scrollable ancestorIf true, the top of the element will be aligned to 
+     * of the scrollable ancestorIf true, the top of the element will be aligned to
      * the top of the visible area of the scrollable ancestor.
      *
      * @private
@@ -70,8 +72,8 @@ export class SuggestionsListItemComponent implements FocusableOption, OnInit {
      */
     private alignToTop(): boolean {
         const { top } = this.element.nativeElement.getBoundingClientRect();
-        const { top: containerTop} = this.element.nativeElement.parentElement.getBoundingClientRect();
+        const { top: containerTop } =
+            this.element.nativeElement.parentElement.getBoundingClientRect();
         return top < containerTop;
     }
-
 }

libs/block-editor/src/lib/extensions/components/suggestions/suggestions.component.html

@@ -10,6 +10,7 @@ <h3>{{title}}</h3>
             [index]="i"
             [label]="item.label"
             [url]="item.icon"
+            [data]="item.data"
         >
         </dotcms-suggestions-list-item>
     </dotcms-suggestion-list>

libs/block-editor/src/lib/extensions/components/suggestions/suggestions.component.ts

@@ -28,6 +28,7 @@ export interface DotMenuItem extends Omit<MenuItem, 'icon'> {
     icon: string | SafeUrl;
     isActive?: () => boolean;
     attributes?: Record<string, unknown>;
+    data?: Record<string, unknown>;
 }
 
 @Component({
@@ -211,7 +212,10 @@ export class SuggestionsComponent implements OnInit, AfterViewInit {
                                                 this.getContentletLanguage(languageId);
                                             return {
                                                 label: contentlet.title,
-                                                icon: 'image',
+                                                icon: 'contentlet/image',
+                                                data: {
+                                                    contentlet: contentlet
+                                                },
                                                 command: () => {
                                                     this.onSelection({
                                                         payload: contentlet,

libs/block-editor/src/lib/extensions/services/suggestions/suggestions.service.ts

@@ -9,6 +9,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Injectable()
 export class SuggestionsService {
+
     constructor(private http: HttpClient) {}
 
     get defaultHeaders() {
@@ -26,16 +27,12 @@ export class SuggestionsService {
     }
 
     getContentlets(contentType = ''): Observable<DotCMSContentlet[]> {
-        return (
-            this.http
-                // eslint-disable-next-line max-len
-                .get(
-                    `/api/content/render/false/query/+contentType:${contentType}%20+languageId:1%20+deleted:false%20+working:true/orderby/modDate%20desc`,
-                    {
-                        headers: this.defaultHeaders
-                    }
-                )
-                .pipe(pluck('contentlets'))
-        );
+        return this.http
+            .post('/api/content/_search', {
+                query: `+contentType:${contentType} +languageId:1 +deleted:false +working:true`,
+                sort: 'modDate desc',
+                offset: 0
+            })
+            .pipe(pluck('entity', 'jsonObjectView', 'contentlets'));
     }
 }

libs/dotcms-models/src/lib/dot-contentlet.model.ts

@@ -1,21 +1,25 @@
 export interface DotCMSContentlet {
     archived: boolean;
     baseType: string;
+    deleted?: boolean;
     binary?: string;
     binaryContentAsset?: string;
     binaryVersion?: string;
     contentType: string;
     file?: string;
     folder: string;
+    hasLiveVersion?: boolean;
     hasTitleImage: boolean;
     host: string;
     hostName: string;
     identifier: string;
     inode: string;
     image?: string;
     languageId: number;
+    language?: string;
     live: boolean;
     locked: boolean;
+    mimeType?: string;
     modDate: string;
     modUser: string;
     modUserName: string;
@@ -27,7 +31,4 @@ export interface DotCMSContentlet {
     text?: string;
     url: string;
     working: boolean;
-    hasLiveVersion?: boolean;
-    deleted?: boolean;
-    language?: string;
 }