@dataclouder/ngx-agent-cards 0.0.77 → 0.0.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2679,6 +2679,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2679
2679
|
// This component contains a really avanced strategy to dinamically render Conversation Cards Details so every app can implement it with their own Style and Behavior
|
|
2680
2680
|
// The trick is use NGFOR with ngComponentOutlet and pass input, problem is, is not possible to get Outpus events, Option one is use injector with ngComponentOutlet and pass context function to handle , but somehow it inject html and due to sanity im not able to see popups
|
|
2681
2681
|
// So solution is handle subcription in this component manually. if i have access to all references, i can do everything manually.
|
|
2682
|
+
const DefaultColumns = [
|
|
2683
|
+
{ field: 'assets.image.url', header: 'Image', type: 'image' },
|
|
2684
|
+
{ field: 'characterCard.data.name', header: 'Character Name', type: 'text' },
|
|
2685
|
+
{ field: 'title', header: 'Title', type: 'text' },
|
|
2686
|
+
];
|
|
2687
|
+
const DefaultActions = [
|
|
2688
|
+
{ label: 'Edit', icon: 'pi pi-pencil', title: 'edit' },
|
|
2689
|
+
{ label: 'Delete', icon: 'pi pi-trash', title: 'delete' },
|
|
2690
|
+
{ label: 'Details', icon: 'pi pi-info', title: 'details' },
|
|
2691
|
+
{ label: 'Select', icon: 'pi pi-check', title: 'select' },
|
|
2692
|
+
];
|
|
2682
2693
|
class AgentCardListComponent extends PaginationBase {
|
|
2683
2694
|
constructor(agentCardService, toastService, route, router, cdr) {
|
|
2684
2695
|
super(route, router);
|
|
@@ -2687,23 +2698,21 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2687
2698
|
this.cdr = cdr;
|
|
2688
2699
|
this.viewMode = 'cards';
|
|
2689
2700
|
this.gridLayout = true;
|
|
2701
|
+
// @deprecated use onAction
|
|
2690
2702
|
this.goToDetailsEvent = new EventEmitter();
|
|
2703
|
+
// @deprecated use onAction
|
|
2691
2704
|
this.goToEditEvent = new EventEmitter();
|
|
2705
|
+
// @deprecated use onAction
|
|
2692
2706
|
this.deleteEvent = new EventEmitter();
|
|
2707
|
+
// @deprecated use onAction
|
|
2693
2708
|
this.onSelect = new EventEmitter();
|
|
2694
|
-
this.
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
];
|
|
2699
|
-
this.conversationCards = [];
|
|
2709
|
+
this.onAction = new EventEmitter();
|
|
2710
|
+
this.columns = DefaultColumns;
|
|
2711
|
+
this.buttonActions = DefaultActions;
|
|
2712
|
+
this.agentCards = [];
|
|
2700
2713
|
this.cardEventSubs = [];
|
|
2701
2714
|
this.cardComponent = null;
|
|
2702
2715
|
this.isLoading = false;
|
|
2703
|
-
// this.getCustomButtons = (card: IAgentCard) => {
|
|
2704
|
-
//
|
|
2705
|
-
// return [...this.getCustomButtons(card), { label: 'Eliminar', icon: 'pi pi-trash', command: () => this.deleteCard(card._id) }];
|
|
2706
|
-
// };
|
|
2707
2716
|
}
|
|
2708
2717
|
ngOnInit() {
|
|
2709
2718
|
this.filterConfig.returnProps = { _id: 1, title: 1, assets: 1, description: 1, 'characterCard.data.description': 1, 'characterCard.data.name': 1 };
|
|
@@ -2740,7 +2749,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2740
2749
|
this.cdr.detectChanges();
|
|
2741
2750
|
console.log('loadConversationCards', this.filterConfig);
|
|
2742
2751
|
const response = await this.agentCardService.findFilteredAgentCards(this.filterConfig);
|
|
2743
|
-
this.
|
|
2752
|
+
this.agentCards = response.rows;
|
|
2744
2753
|
this.totalRecords = response.count;
|
|
2745
2754
|
// this.subscribeDinamicInstantToEvents();
|
|
2746
2755
|
setTimeout(() => {
|
|
@@ -2766,7 +2775,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2766
2775
|
}
|
|
2767
2776
|
async deleteCard(id) {
|
|
2768
2777
|
await this.agentCardService.deleteConversationCard(id);
|
|
2769
|
-
this.
|
|
2778
|
+
this.agentCards = this.agentCards.filter((card) => card._id !== id);
|
|
2770
2779
|
this.deleteEvent.emit(id);
|
|
2771
2780
|
this.toastService.success({ title: 'Conversation card deleted', subtitle: 'The conversation card has been deleted' });
|
|
2772
2781
|
}
|
|
@@ -2780,7 +2789,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2780
2789
|
text,
|
|
2781
2790
|
};
|
|
2782
2791
|
const response = await this.agentCardService.filterConversationCards(filters);
|
|
2783
|
-
this.
|
|
2792
|
+
this.agentCards = response.rows;
|
|
2784
2793
|
this.totalRecords = response.count;
|
|
2785
2794
|
this.cdr.detectChanges();
|
|
2786
2795
|
this.subscribeDinamicInstantToEvents();
|
|
@@ -2790,18 +2799,32 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2790
2799
|
this.cdr.detectChanges();
|
|
2791
2800
|
console.log('filterChange', filters);
|
|
2792
2801
|
const response = await this.agentCardService.filterConversationCards(filters);
|
|
2793
|
-
this.
|
|
2802
|
+
this.agentCards = response.rows;
|
|
2794
2803
|
this.totalRecords = response.count;
|
|
2795
2804
|
this.isLoading = false;
|
|
2796
2805
|
this.cdr.detectChanges();
|
|
2797
2806
|
this.subscribeDinamicInstantToEvents();
|
|
2798
2807
|
}
|
|
2799
|
-
|
|
2800
|
-
console.log('
|
|
2801
|
-
|
|
2808
|
+
doAction({ item, action }) {
|
|
2809
|
+
console.log('doAction', { item, action });
|
|
2810
|
+
if (action.title === 'edit') {
|
|
2811
|
+
this.goToEdit(item._id);
|
|
2812
|
+
this.onAction.emit({ item, action });
|
|
2813
|
+
}
|
|
2814
|
+
else if (action.title === 'delete') {
|
|
2815
|
+
this.deleteCard(item._id);
|
|
2816
|
+
this.onAction.emit({ item, action });
|
|
2817
|
+
}
|
|
2818
|
+
else if (action.title === 'details') {
|
|
2819
|
+
this.goToDetails(item._id);
|
|
2820
|
+
this.onAction.emit({ item, action });
|
|
2821
|
+
}
|
|
2822
|
+
else {
|
|
2823
|
+
console.log('Unknown action:', action);
|
|
2824
|
+
}
|
|
2802
2825
|
}
|
|
2803
2826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: i1$3.ActivatedRoute }, { token: i1$3.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2804
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { viewMode: "viewMode", customCardComponent: "customCardComponent", gridLayout: "gridLayout", getCustomButtons: "getCustomButtons" }, outputs: { goToDetailsEvent: "goToDetailsEvent", goToEditEvent: "goToEditEvent", deleteEvent: "deleteEvent", onSelect: "onSelect" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"
|
|
2827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { viewMode: "viewMode", customCardComponent: "customCardComponent", gridLayout: "gridLayout", getCustomButtons: "getCustomButtons" }, outputs: { goToDetailsEvent: "goToDetailsEvent", goToEditEvent: "goToEditEvent", deleteEvent: "deleteEvent", onSelect: "onSelect", onAction: "onAction" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"buttonActions\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n}@else{\n\n<dc-filter-bar [isAdmin]=\"true\" (onNew)=\"goToEdit()\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChange($event)\"></dc-filter-bar>\n\n<div class=\"conversation-card-lists\">\n @if(!isLoading) {\n <div [ngClass]=\"{ 'cards-container': gridLayout }\">\n @for (card of agentCards; track card) {\n <div style=\"position: relative\">\n <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card }\"> </ng-container>\n\n @if(getCustomButtons) {\n <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n <p-speeddial\n [model]=\"getCustomButtons(card)\"\n [radius]=\"70\"\n type=\"quarter-circle\"\n direction=\"down-left\"\n [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n@if(isLoading) {\n<div>\n <p-skeleton styleClass=\"mb-2\" />\n <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(agentCards.length === 0) {\n<div>\n <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n [showCurrentPageReport]=\"true\"\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"paginatorFirst\"\n [rows]=\"paginatorRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;height:100%;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i3$2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "customFilters"], outputs: ["onChangeSort", "onNew", "onSearch", "onFilterChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i5$2.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["onlyView", "columns", "tableData", "actions"], outputs: ["onAction"] }] }); }
|
|
2805
2828
|
}
|
|
2806
2829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, decorators: [{
|
|
2807
2830
|
type: Component,
|
|
@@ -2815,7 +2838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2815
2838
|
SkeletonModule,
|
|
2816
2839
|
SpeedDialModule,
|
|
2817
2840
|
QuickTableComponent,
|
|
2818
|
-
], standalone: true, template: "@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"
|
|
2841
|
+
], standalone: true, template: "@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"buttonActions\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n}@else{\n\n<dc-filter-bar [isAdmin]=\"true\" (onNew)=\"goToEdit()\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChange($event)\"></dc-filter-bar>\n\n<div class=\"conversation-card-lists\">\n @if(!isLoading) {\n <div [ngClass]=\"{ 'cards-container': gridLayout }\">\n @for (card of agentCards; track card) {\n <div style=\"position: relative\">\n <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card }\"> </ng-container>\n\n @if(getCustomButtons) {\n <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n <p-speeddial\n [model]=\"getCustomButtons(card)\"\n [radius]=\"70\"\n type=\"quarter-circle\"\n direction=\"down-left\"\n [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n@if(isLoading) {\n<div>\n <p-skeleton styleClass=\"mb-2\" />\n <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(agentCards.length === 0) {\n<div>\n <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n [showCurrentPageReport]=\"true\"\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"paginatorFirst\"\n [rows]=\"paginatorRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;height:100%;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"] }]
|
|
2819
2842
|
}], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
|
|
2820
2843
|
type: Inject,
|
|
2821
2844
|
args: [CONVERSATION_AI_TOKEN]
|
|
@@ -2838,6 +2861,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2838
2861
|
type: Output
|
|
2839
2862
|
}], onSelect: [{
|
|
2840
2863
|
type: Output
|
|
2864
|
+
}], onAction: [{
|
|
2865
|
+
type: Output
|
|
2841
2866
|
}], outlets: [{
|
|
2842
2867
|
type: ViewChildren,
|
|
2843
2868
|
args: ['outlet']
|