@dataclouder/ngx-agent-cards 0.0.78 → 0.0.80
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,31 +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
|
-
{ field: 'assets.image.url', header: 'Image', type: 'image' },
|
|
2696
|
-
{ field: 'characterCard.data.name', header: 'Character Name', type: 'text' },
|
|
2697
|
-
{ field: 'title', header: 'Title', type: 'text' },
|
|
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.agentCards = [];
|
|
2706
2710
|
this.cardEventSubs = [];
|
|
2707
2711
|
this.cardComponent = null;
|
|
2708
|
-
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
2712
|
}
|
|
2714
2713
|
ngOnInit() {
|
|
2714
|
+
this.columns = DefaultColumns;
|
|
2715
|
+
this.buttonActions = DefaultActions;
|
|
2715
2716
|
this.filterConfig.returnProps = { _id: 1, title: 1, assets: 1, description: 1, 'characterCard.data.description': 1, 'characterCard.data.name': 1 };
|
|
2716
2717
|
this.loadConversationCards();
|
|
2717
2718
|
this.cardComponent = this.customCardComponent || DCConversationCardUIComponent;
|
|
@@ -2746,7 +2747,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2746
2747
|
this.cdr.detectChanges();
|
|
2747
2748
|
console.log('loadConversationCards', this.filterConfig);
|
|
2748
2749
|
const response = await this.agentCardService.findFilteredAgentCards(this.filterConfig);
|
|
2749
|
-
this.
|
|
2750
|
+
this.agentCards = response.rows;
|
|
2750
2751
|
this.totalRecords = response.count;
|
|
2751
2752
|
// this.subscribeDinamicInstantToEvents();
|
|
2752
2753
|
setTimeout(() => {
|
|
@@ -2772,7 +2773,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2772
2773
|
}
|
|
2773
2774
|
async deleteCard(id) {
|
|
2774
2775
|
await this.agentCardService.deleteConversationCard(id);
|
|
2775
|
-
this.
|
|
2776
|
+
this.agentCards = this.agentCards.filter((card) => card._id !== id);
|
|
2776
2777
|
this.deleteEvent.emit(id);
|
|
2777
2778
|
this.toastService.success({ title: 'Conversation card deleted', subtitle: 'The conversation card has been deleted' });
|
|
2778
2779
|
}
|
|
@@ -2786,7 +2787,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2786
2787
|
text,
|
|
2787
2788
|
};
|
|
2788
2789
|
const response = await this.agentCardService.filterConversationCards(filters);
|
|
2789
|
-
this.
|
|
2790
|
+
this.agentCards = response.rows;
|
|
2790
2791
|
this.totalRecords = response.count;
|
|
2791
2792
|
this.cdr.detectChanges();
|
|
2792
2793
|
this.subscribeDinamicInstantToEvents();
|
|
@@ -2796,7 +2797,7 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2796
2797
|
this.cdr.detectChanges();
|
|
2797
2798
|
console.log('filterChange', filters);
|
|
2798
2799
|
const response = await this.agentCardService.filterConversationCards(filters);
|
|
2799
|
-
this.
|
|
2800
|
+
this.agentCards = response.rows;
|
|
2800
2801
|
this.totalRecords = response.count;
|
|
2801
2802
|
this.isLoading = false;
|
|
2802
2803
|
this.cdr.detectChanges();
|
|
@@ -2804,22 +2805,25 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2804
2805
|
}
|
|
2805
2806
|
doAction({ item, action }) {
|
|
2806
2807
|
console.log('doAction', { item, action });
|
|
2807
|
-
debugger;
|
|
2808
2808
|
if (action.title === 'edit') {
|
|
2809
2809
|
this.goToEdit(item._id);
|
|
2810
|
+
super.doAction({ item, action });
|
|
2810
2811
|
}
|
|
2811
2812
|
else if (action.title === 'delete') {
|
|
2812
2813
|
this.deleteCard(item._id);
|
|
2814
|
+
super.doAction({ item, action });
|
|
2813
2815
|
}
|
|
2814
2816
|
else if (action.title === 'details') {
|
|
2815
2817
|
this.goToDetails(item._id);
|
|
2818
|
+
super.doAction({ item, action });
|
|
2816
2819
|
}
|
|
2817
2820
|
else {
|
|
2818
2821
|
console.log('Unknown action:', action);
|
|
2822
|
+
super.doAction({ item, action });
|
|
2819
2823
|
}
|
|
2820
2824
|
}
|
|
2821
2825
|
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 === '
|
|
2826
|
+
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", actions: "actions" }, 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]=\"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
2827
|
}
|
|
2824
2828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, decorators: [{
|
|
2825
2829
|
type: Component,
|
|
@@ -2833,7 +2837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2833
2837
|
SkeletonModule,
|
|
2834
2838
|
SpeedDialModule,
|
|
2835
2839
|
QuickTableComponent,
|
|
2836
|
-
], standalone: true, template: "@if(viewMode === '
|
|
2840
|
+
], 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
2841
|
}], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
|
|
2838
2842
|
type: Inject,
|
|
2839
2843
|
args: [CONVERSATION_AI_TOKEN]
|
|
@@ -2848,6 +2852,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2848
2852
|
type: Input
|
|
2849
2853
|
}], getCustomButtons: [{
|
|
2850
2854
|
type: Input
|
|
2855
|
+
}], actions: [{
|
|
2856
|
+
type: Input
|
|
2851
2857
|
}], goToDetailsEvent: [{
|
|
2852
2858
|
type: Output
|
|
2853
2859
|
}], goToEditEvent: [{
|