@dataclouder/ngx-agent-cards 0.0.78 → 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,29 +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.buttonActions = [
|
|
2700
|
-
{ label: 'Edit', icon: 'pi pi-pencil', title: 'edit' },
|
|
2701
|
-
{ label: 'Delete', icon: 'pi pi-trash', title: 'delete' },
|
|
2702
|
-
{ label: 'Details', icon: 'pi pi-info', title: 'details' },
|
|
2703
|
-
{ label: 'Select', icon: 'pi pi-check', title: 'select' },
|
|
2704
|
-
];
|
|
2705
|
-
this.conversationCards = [];
|
|
2709
|
+
this.onAction = new EventEmitter();
|
|
2710
|
+
this.columns = DefaultColumns;
|
|
2711
|
+
this.buttonActions = DefaultActions;
|
|
2712
|
+
this.agentCards = [];
|
|
2706
2713
|
this.cardEventSubs = [];
|
|
2707
2714
|
this.cardComponent = null;
|
|
2708
2715
|
this.isLoading = false;
|
|
2709
|
-
// this.getCustomButtons = (card: IAgentCard) => {
|
|
2710
|
-
//
|
|
2711
|
-
// return [...this.getCustomButtons(card), { label: 'Eliminar', icon: 'pi pi-trash', command: () => this.deleteCard(card._id) }];
|
|
2712
|
-
// };
|
|
2713
2716
|
}
|
|
2714
2717
|
ngOnInit() {
|
|
2715
2718
|
this.filterConfig.returnProps = { _id: 1, title: 1, assets: 1, description: 1, 'characterCard.data.description': 1, 'characterCard.data.name': 1 };
|
|
@@ -2746,7 +2749,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2746
2749
|
this.cdr.detectChanges();
|
|
2747
2750
|
console.log('loadConversationCards', this.filterConfig);
|
|
2748
2751
|
const response = await this.agentCardService.findFilteredAgentCards(this.filterConfig);
|
|
2749
|
-
this.
|
|
2752
|
+
this.agentCards = response.rows;
|
|
2750
2753
|
this.totalRecords = response.count;
|
|
2751
2754
|
// this.subscribeDinamicInstantToEvents();
|
|
2752
2755
|
setTimeout(() => {
|
|
@@ -2772,7 +2775,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2772
2775
|
}
|
|
2773
2776
|
async deleteCard(id) {
|
|
2774
2777
|
await this.agentCardService.deleteConversationCard(id);
|
|
2775
|
-
this.
|
|
2778
|
+
this.agentCards = this.agentCards.filter((card) => card._id !== id);
|
|
2776
2779
|
this.deleteEvent.emit(id);
|
|
2777
2780
|
this.toastService.success({ title: 'Conversation card deleted', subtitle: 'The conversation card has been deleted' });
|
|
2778
2781
|
}
|
|
@@ -2786,7 +2789,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2786
2789
|
text,
|
|
2787
2790
|
};
|
|
2788
2791
|
const response = await this.agentCardService.filterConversationCards(filters);
|
|
2789
|
-
this.
|
|
2792
|
+
this.agentCards = response.rows;
|
|
2790
2793
|
this.totalRecords = response.count;
|
|
2791
2794
|
this.cdr.detectChanges();
|
|
2792
2795
|
this.subscribeDinamicInstantToEvents();
|
|
@@ -2796,7 +2799,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2796
2799
|
this.cdr.detectChanges();
|
|
2797
2800
|
console.log('filterChange', filters);
|
|
2798
2801
|
const response = await this.agentCardService.filterConversationCards(filters);
|
|
2799
|
-
this.
|
|
2802
|
+
this.agentCards = response.rows;
|
|
2800
2803
|
this.totalRecords = response.count;
|
|
2801
2804
|
this.isLoading = false;
|
|
2802
2805
|
this.cdr.detectChanges();
|
|
@@ -2804,22 +2807,24 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2804
2807
|
}
|
|
2805
2808
|
doAction({ item, action }) {
|
|
2806
2809
|
console.log('doAction', { item, action });
|
|
2807
|
-
debugger;
|
|
2808
2810
|
if (action.title === 'edit') {
|
|
2809
2811
|
this.goToEdit(item._id);
|
|
2812
|
+
this.onAction.emit({ item, action });
|
|
2810
2813
|
}
|
|
2811
2814
|
else if (action.title === 'delete') {
|
|
2812
2815
|
this.deleteCard(item._id);
|
|
2816
|
+
this.onAction.emit({ item, action });
|
|
2813
2817
|
}
|
|
2814
2818
|
else if (action.title === 'details') {
|
|
2815
2819
|
this.goToDetails(item._id);
|
|
2820
|
+
this.onAction.emit({ item, action });
|
|
2816
2821
|
}
|
|
2817
2822
|
else {
|
|
2818
2823
|
console.log('Unknown action:', action);
|
|
2819
2824
|
}
|
|
2820
2825
|
}
|
|
2821
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 }); }
|
|
2822
|
-
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 === '
|
|
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"] }] }); }
|
|
2823
2828
|
}
|
|
2824
2829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, decorators: [{
|
|
2825
2830
|
type: Component,
|
|
@@ -2833,7 +2838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2833
2838
|
SkeletonModule,
|
|
2834
2839
|
SpeedDialModule,
|
|
2835
2840
|
QuickTableComponent,
|
|
2836
|
-
], standalone: true, template: "@if(viewMode === '
|
|
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"] }]
|
|
2837
2842
|
}], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
|
|
2838
2843
|
type: Inject,
|
|
2839
2844
|
args: [CONVERSATION_AI_TOKEN]
|
|
@@ -2856,6 +2861,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2856
2861
|
type: Output
|
|
2857
2862
|
}], onSelect: [{
|
|
2858
2863
|
type: Output
|
|
2864
|
+
}], onAction: [{
|
|
2865
|
+
type: Output
|
|
2859
2866
|
}], outlets: [{
|
|
2860
2867
|
type: ViewChildren,
|
|
2861
2868
|
args: ['outlet']
|