cloud-ide-shared 1.0.44 → 1.0.45
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.
- package/fesm2022/cloud-ide-shared.mjs +148 -9
- package/fesm2022/cloud-ide-shared.mjs.map +1 -1
- package/index.d.ts +21 -0
- package/package.json +1 -1
|
@@ -831,7 +831,10 @@ class CideSharedOrgStructureComponent {
|
|
|
831
831
|
this.entityService.getEntityList({}).subscribe({
|
|
832
832
|
next: (response) => {
|
|
833
833
|
if (response?.success && response?.data) {
|
|
834
|
+
console.log('Raw entities received:', response.data.length);
|
|
834
835
|
const structure = this.buildOrgStructure(response.data);
|
|
836
|
+
console.log('Built organization structure:', structure);
|
|
837
|
+
console.log('Root nodes count:', structure.length);
|
|
835
838
|
this.orgStructure.set(structure);
|
|
836
839
|
}
|
|
837
840
|
else {
|
|
@@ -840,6 +843,7 @@ class CideSharedOrgStructureComponent {
|
|
|
840
843
|
this.loading.set(false);
|
|
841
844
|
},
|
|
842
845
|
error: (error) => {
|
|
846
|
+
console.error('Error loading organization structure:', error);
|
|
843
847
|
this.error.set('Error loading organization structure');
|
|
844
848
|
this.loading.set(false);
|
|
845
849
|
}
|
|
@@ -849,35 +853,170 @@ class CideSharedOrgStructureComponent {
|
|
|
849
853
|
* Build organization structure from flat entity list
|
|
850
854
|
*/
|
|
851
855
|
buildOrgStructure(entities) {
|
|
856
|
+
console.log('🔨 Building organization structure...');
|
|
857
|
+
// Remove duplicate entities based on _id
|
|
858
|
+
const uniqueEntities = this.removeDuplicateEntities(entities);
|
|
859
|
+
console.log(`✅ After deduplication: ${uniqueEntities.length} unique entities`);
|
|
852
860
|
const nodeMap = new Map();
|
|
853
861
|
const rootNodes = [];
|
|
862
|
+
const orphanedEntities = [];
|
|
854
863
|
// First pass: create all nodes
|
|
855
|
-
|
|
864
|
+
uniqueEntities.forEach(entity => {
|
|
856
865
|
const node = {
|
|
857
866
|
...entity,
|
|
858
867
|
children: []
|
|
859
868
|
};
|
|
860
869
|
nodeMap.set(entity._id || '', node);
|
|
861
870
|
});
|
|
862
|
-
// Second pass: build hierarchy
|
|
863
|
-
|
|
871
|
+
// Second pass: build hierarchy with validation
|
|
872
|
+
uniqueEntities.forEach(entity => {
|
|
864
873
|
const node = nodeMap.get(entity._id || '');
|
|
865
874
|
if (node) {
|
|
866
875
|
const parentId = entity.syen_id_syen;
|
|
867
|
-
if (parentId && parentId !== ""
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
876
|
+
if (parentId && parentId !== "") {
|
|
877
|
+
// Entity has a parent ID - validate it exists
|
|
878
|
+
if (nodeMap.has(parentId)) {
|
|
879
|
+
const parent = nodeMap.get(parentId);
|
|
880
|
+
parent.children = parent.children || [];
|
|
881
|
+
parent.children.push(node);
|
|
882
|
+
console.log(`✓ Connected "${entity.syen_name}" to parent with ID: ${parentId}`);
|
|
883
|
+
}
|
|
884
|
+
else {
|
|
885
|
+
// Parent ID specified but parent doesn't exist - treat as orphaned
|
|
886
|
+
console.warn(`⚠️ ORPHANED ENTITY: "${entity.syen_name}" (ID: ${entity._id}) references non-existent parent ID: ${parentId}`);
|
|
887
|
+
console.warn(' This entity will be shown as a root node, but the data should be fixed at the API level.');
|
|
888
|
+
orphanedEntities.push(entity);
|
|
889
|
+
rootNodes.push(node);
|
|
890
|
+
}
|
|
871
891
|
}
|
|
872
892
|
else {
|
|
893
|
+
// No parent ID - this is a root node
|
|
873
894
|
rootNodes.push(node);
|
|
895
|
+
console.log(`✓ Root entity: "${entity.syen_name}"`);
|
|
874
896
|
}
|
|
875
897
|
}
|
|
876
898
|
});
|
|
899
|
+
// Report summary
|
|
900
|
+
if (orphanedEntities.length > 0) {
|
|
901
|
+
console.error(`❌ BACKEND DATA ISSUE: Found ${orphanedEntities.length} orphaned entity(ies) with invalid parent references.`);
|
|
902
|
+
console.error('Orphaned entities:', orphanedEntities.map(e => ({ id: e._id, name: e.syen_name, invalidParentId: e.syen_id_syen })));
|
|
903
|
+
}
|
|
904
|
+
console.log(`📊 Organization structure summary: ${rootNodes.length} root nodes, ${uniqueEntities.length - rootNodes.length} child nodes`);
|
|
877
905
|
// Sort children recursively
|
|
878
906
|
this.sortChildrenRecursively(rootNodes);
|
|
879
907
|
return rootNodes;
|
|
880
908
|
}
|
|
909
|
+
/**
|
|
910
|
+
* Remove duplicate entities based on _id
|
|
911
|
+
* Priority logic when duplicates exist:
|
|
912
|
+
* 1. Keep entity with syenm_isdefault: true
|
|
913
|
+
* 2. If neither/both default, keep one with syenm_isloggedin: true
|
|
914
|
+
* 3. Otherwise, keep the one with more non-null fields
|
|
915
|
+
*/
|
|
916
|
+
removeDuplicateEntities(entities) {
|
|
917
|
+
const entityMap = new Map();
|
|
918
|
+
const duplicateIds = new Set();
|
|
919
|
+
entities.forEach(entity => {
|
|
920
|
+
const id = entity._id;
|
|
921
|
+
if (id) {
|
|
922
|
+
if (!entityMap.has(id)) {
|
|
923
|
+
// First occurrence, add it
|
|
924
|
+
entityMap.set(id, entity);
|
|
925
|
+
}
|
|
926
|
+
else {
|
|
927
|
+
// Duplicate found - apply priority logic
|
|
928
|
+
duplicateIds.add(id);
|
|
929
|
+
const existing = entityMap.get(id);
|
|
930
|
+
const shouldReplace = this.shouldReplaceEntity(existing, entity);
|
|
931
|
+
if (shouldReplace) {
|
|
932
|
+
console.warn(`⚠️ DUPLICATE ENTITY DETECTED - Replacing duplicate entity:`, {
|
|
933
|
+
id: id,
|
|
934
|
+
name: existing.syen_name,
|
|
935
|
+
existingMappingId: existing.entity_mapping_id,
|
|
936
|
+
newMappingId: entity.entity_mapping_id,
|
|
937
|
+
reason: this.getReplacementReason(existing, entity)
|
|
938
|
+
});
|
|
939
|
+
entityMap.set(id, entity);
|
|
940
|
+
}
|
|
941
|
+
else {
|
|
942
|
+
console.warn(`⚠️ DUPLICATE ENTITY DETECTED - Keeping original entity:`, {
|
|
943
|
+
id: id,
|
|
944
|
+
name: existing.syen_name,
|
|
945
|
+
existingMappingId: existing.entity_mapping_id,
|
|
946
|
+
discardedMappingId: entity.entity_mapping_id,
|
|
947
|
+
reason: this.getReplacementReason(existing, entity)
|
|
948
|
+
});
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
}
|
|
952
|
+
});
|
|
953
|
+
if (duplicateIds.size > 0) {
|
|
954
|
+
console.error(`❌ BACKEND DATA ISSUE: Found ${duplicateIds.size} duplicate entity ID(s). This should be fixed at the API level.`);
|
|
955
|
+
console.error('Duplicate entity IDs:', Array.from(duplicateIds));
|
|
956
|
+
}
|
|
957
|
+
return Array.from(entityMap.values());
|
|
958
|
+
}
|
|
959
|
+
/**
|
|
960
|
+
* Determine if a new entity should replace the existing one
|
|
961
|
+
* Based on priority: default status > logged in status > field completeness
|
|
962
|
+
*/
|
|
963
|
+
shouldReplaceEntity(existing, newEntity) {
|
|
964
|
+
// Priority 1: Check default status
|
|
965
|
+
const existingIsDefault = existing.syenm_isdefault;
|
|
966
|
+
const newIsDefault = newEntity.syenm_isdefault;
|
|
967
|
+
if (newIsDefault && !existingIsDefault) {
|
|
968
|
+
return true; // Replace with default entity
|
|
969
|
+
}
|
|
970
|
+
if (!newIsDefault && existingIsDefault) {
|
|
971
|
+
return false; // Keep existing default entity
|
|
972
|
+
}
|
|
973
|
+
// Priority 2: Check logged in status (if both have same default status)
|
|
974
|
+
const existingIsLoggedIn = existing.syenm_isloggedin;
|
|
975
|
+
const newIsLoggedIn = newEntity.syenm_isloggedin;
|
|
976
|
+
if (newIsLoggedIn && !existingIsLoggedIn) {
|
|
977
|
+
return true; // Replace with logged in entity
|
|
978
|
+
}
|
|
979
|
+
if (!newIsLoggedIn && existingIsLoggedIn) {
|
|
980
|
+
return false; // Keep existing logged in entity
|
|
981
|
+
}
|
|
982
|
+
// Priority 3: Compare field completeness
|
|
983
|
+
const existingFieldCount = this.countNonNullFields(existing);
|
|
984
|
+
const newFieldCount = this.countNonNullFields(newEntity);
|
|
985
|
+
return newFieldCount > existingFieldCount;
|
|
986
|
+
}
|
|
987
|
+
/**
|
|
988
|
+
* Get human-readable reason for entity replacement decision
|
|
989
|
+
*/
|
|
990
|
+
getReplacementReason(existing, newEntity) {
|
|
991
|
+
const existingIsDefault = existing.syenm_isdefault;
|
|
992
|
+
const newIsDefault = newEntity.syenm_isdefault;
|
|
993
|
+
const existingIsLoggedIn = existing.syenm_isloggedin;
|
|
994
|
+
const newIsLoggedIn = newEntity.syenm_isloggedin;
|
|
995
|
+
if (newIsDefault && !existingIsDefault) {
|
|
996
|
+
return 'New entity is marked as default';
|
|
997
|
+
}
|
|
998
|
+
if (!newIsDefault && existingIsDefault) {
|
|
999
|
+
return 'Existing entity is marked as default';
|
|
1000
|
+
}
|
|
1001
|
+
if (newIsLoggedIn && !existingIsLoggedIn) {
|
|
1002
|
+
return 'New entity is logged in';
|
|
1003
|
+
}
|
|
1004
|
+
if (!newIsLoggedIn && existingIsLoggedIn) {
|
|
1005
|
+
return 'Existing entity is logged in';
|
|
1006
|
+
}
|
|
1007
|
+
const existingFieldCount = this.countNonNullFields(existing);
|
|
1008
|
+
const newFieldCount = this.countNonNullFields(newEntity);
|
|
1009
|
+
if (newFieldCount > existingFieldCount) {
|
|
1010
|
+
return `New entity has more complete data (${newFieldCount} vs ${existingFieldCount} fields)`;
|
|
1011
|
+
}
|
|
1012
|
+
return `Existing entity has more complete data (${existingFieldCount} vs ${newFieldCount} fields)`;
|
|
1013
|
+
}
|
|
1014
|
+
/**
|
|
1015
|
+
* Count non-null fields in an entity
|
|
1016
|
+
*/
|
|
1017
|
+
countNonNullFields(entity) {
|
|
1018
|
+
return Object.values(entity).filter(value => value !== null && value !== undefined && value !== '').length;
|
|
1019
|
+
}
|
|
881
1020
|
/**
|
|
882
1021
|
* Calculate level of a node based on its parent
|
|
883
1022
|
*/
|
|
@@ -952,7 +1091,7 @@ class CideSharedOrgStructureComponent {
|
|
|
952
1091
|
});
|
|
953
1092
|
}
|
|
954
1093
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSharedOrgStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
955
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSharedOrgStructureComponent, isStandalone: true, selector: "cide-shared-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n @if (loading()) {\n <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n </div>\n } @else if (error()) {\n <div class=\"tw-text-center tw-py-12\">\n <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n </div>\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n <cide-ele-icon>refresh</cide-ele-icon>\n Try Again\n </button>\n </div>\n } @else if (orgStructure().length === 0) {\n <div class=\"tw-text-center tw-py-12\">\n <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n </div>\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n @if (mode() === 'view') {\n <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n <cide-ele-icon>add</cide-ele-icon>\n Create First Entity\n </button>\n }\n </div>\n } @else {\n <!-- Organization Chart Container -->\n <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n <!-- Chart Content with Background Pattern -->\n <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n @for (rootNode of orgStructure(); track rootNode._id) {\n <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n <!-- Render node recursively with unlimited depth -->\n <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n <div class=\"tw-flex tw-flex-col tw-items-center\">\n \n <!-- Entity Card -->\n <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n [class.level-0]=\"level === 0\"\n [class.level-1]=\"level === 1\"\n [class.level-2]=\"level === 2\"\n [class.level-3]=\"level === 3\"\n [class.level-4]=\"level === 4\"\n [class.level-5]=\"level === 5\"\n (click)=\"viewEntity(node._id)\">\n \n <!-- Card Content -->\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <!-- Avatar -->\n <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n </div>\n \n <!-- Entity Info -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n [cideEleTooltip]=\"node.syen_name || ''\" \n [tooltipPlacement]=\"'top'\"\n [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n </div>\n </div>\n \n <!-- Action Icons -->\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <!-- Phone Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n </button>\n \n <!-- Email Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n </button>\n \n <!-- LinkedIn Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n </button>\n \n <!-- Document Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n </button>\n \n <!-- More Options Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n </button>\n </div>\n \n <!-- Status Badge -->\n <div class=\"tw-flex-shrink-0\">\n @if (node.syen_isactive) {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n Active\n </div>\n } @else {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n Inactive\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Children Entities (Recursive) -->\n @if (node.children && node.children.length > 0) {\n <!-- Flexible Connection Lines -->\n <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n <!-- Connection dot -->\n <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n </div>\n \n <!-- Flexible SVG Lines -->\n <div class=\"tw-relative tw-w-full tw-flex tw-justify-center flexible-connection-lines\">\n @if (node.children && node.children.length === 1) {\n <!-- Single child - simple vertical line -->\n <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n }\n @else if (node.children && node.children.length > 1) {\n <!-- Multiple children - flexible design -->\n <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 100%; height: 40px; top: 0;\">\n <!-- Vertical line from parent -->\n <line x1=\"50%\" y1=\"0\" x2=\"50%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n \n <!-- Horizontal line spanning children -->\n <line x1=\"20%\" y1=\"15\" x2=\"80%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n \n <!-- Vertical lines to children -->\n @for (child of node.children; track child._id; let i = $index) {\n <line [attr.x1]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \n y1=\"15\" \n [attr.x2]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \n y2=\"35\" \n stroke=\"#9333ea\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"/>\n <!-- Connection dot -->\n <circle [attr.cx]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n }\n </svg>\n }\n </div>\n \n <!-- Children Container - Flexible Layout -->\n <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n @for (child of node.children; track child._id) {\n <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n <!-- Child node -->\n <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
|
|
1094
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSharedOrgStructureComponent, isStandalone: true, selector: "cide-shared-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n @if (loading()) {\n <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n </div>\n } @else if (error()) {\n <div class=\"tw-text-center tw-py-12\">\n <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n </div>\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n <cide-ele-icon>refresh</cide-ele-icon>\n Try Again\n </button>\n </div>\n } @else if (orgStructure().length === 0) {\n <div class=\"tw-text-center tw-py-12\">\n <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n </div>\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n @if (mode() === 'view') {\n <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n <cide-ele-icon>add</cide-ele-icon>\n Create First Entity\n </button>\n }\n </div>\n } @else {\n <!-- Organization Chart Container -->\n <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n <!-- Chart Content with Background Pattern -->\n <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n @for (rootNode of orgStructure(); track rootNode._id) {\n <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n <!-- Render node recursively with unlimited depth -->\n <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n <div class=\"tw-flex tw-flex-col tw-items-center\">\n \n <!-- Entity Card -->\n <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n [class.level-0]=\"level === 0\"\n [class.level-1]=\"level === 1\"\n [class.level-2]=\"level === 2\"\n [class.level-3]=\"level === 3\"\n [class.level-4]=\"level === 4\"\n [class.level-5]=\"level === 5\"\n (click)=\"viewEntity(node._id)\">\n \n <!-- Card Content -->\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <!-- Avatar -->\n <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n </div>\n \n <!-- Entity Info -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n [cideEleTooltip]=\"node.syen_name || ''\" \n [tooltipPlacement]=\"'top'\"\n [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n </div>\n </div>\n \n <!-- Action Icons -->\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <!-- Phone Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n </button>\n \n <!-- Email Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n </button>\n \n <!-- LinkedIn Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n </button>\n \n <!-- Document Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n </button>\n \n <!-- More Options Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n </button>\n </div>\n \n <!-- Status Badge -->\n <div class=\"tw-flex-shrink-0\">\n @if (node.syen_isactive) {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n Active\n </div>\n } @else {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n Inactive\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Children Entities (Recursive) -->\n @if (node.children && node.children.length > 0) {\n <!-- Connection Lines Container -->\n <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n <!-- Connection dot at parent -->\n <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n </div>\n \n <!-- Simplified Connection Lines -->\n <div class=\"tw-relative tw-w-full tw-flex tw-justify-center\" style=\"min-height: 40px;\">\n @if (node.children.length === 1) {\n <!-- Single child - simple vertical line -->\n <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n }\n @else {\n <!-- Multiple children - use calculated positions -->\n <svg class=\"tw-absolute\" [attr.width]=\"(node.children.length * 280) + 'px'\" \n style=\"height: 40px; left: 50%; transform: translateX(-50%); top: 0; overflow: visible;\">\n <!-- Vertical line from parent (centered) -->\n <line [attr.x1]=\"(node.children.length * 280) / 2\" \n y1=\"0\" \n [attr.x2]=\"(node.children.length * 280) / 2\" \n y2=\"15\" \n stroke=\"#9333ea\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"/>\n \n <!-- Horizontal line spanning children -->\n <line [attr.x1]=\"140\" \n y1=\"15\" \n [attr.x2]=\"(node.children.length * 280) - 140\" \n y2=\"15\" \n stroke=\"#9333ea\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"/>\n \n <!-- Vertical lines to each child -->\n @for (child of node.children; track child._id; let i = $index) {\n @let xPosition = 140 + (i * 280);\n <line [attr.x1]=\"xPosition\" \n y1=\"15\" \n [attr.x2]=\"xPosition\" \n y2=\"35\" \n stroke=\"#9333ea\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"/>\n <!-- Connection dot -->\n <circle [attr.cx]=\"xPosition\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n }\n </svg>\n }\n </div>\n \n <!-- Children Container - Flexible Layout -->\n <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n @for (child of node.children; track child._id) {\n <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n <!-- Child node -->\n <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
|
|
956
1095
|
}
|
|
957
1096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSharedOrgStructureComponent, decorators: [{
|
|
958
1097
|
type: Component,
|
|
@@ -962,7 +1101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
962
1101
|
CideIconComponent,
|
|
963
1102
|
CideSpinnerComponent,
|
|
964
1103
|
TooltipDirective
|
|
965
|
-
], template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n @if (loading()) {\n <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n </div>\n } @else if (error()) {\n <div class=\"tw-text-center tw-py-12\">\n <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n </div>\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n <cide-ele-icon>refresh</cide-ele-icon>\n Try Again\n </button>\n </div>\n } @else if (orgStructure().length === 0) {\n <div class=\"tw-text-center tw-py-12\">\n <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n </div>\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n @if (mode() === 'view') {\n <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n <cide-ele-icon>add</cide-ele-icon>\n Create First Entity\n </button>\n }\n </div>\n } @else {\n <!-- Organization Chart Container -->\n <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n <!-- Chart Content with Background Pattern -->\n <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n @for (rootNode of orgStructure(); track rootNode._id) {\n <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n <!-- Render node recursively with unlimited depth -->\n <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n <div class=\"tw-flex tw-flex-col tw-items-center\">\n \n <!-- Entity Card -->\n <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n [class.level-0]=\"level === 0\"\n [class.level-1]=\"level === 1\"\n [class.level-2]=\"level === 2\"\n [class.level-3]=\"level === 3\"\n [class.level-4]=\"level === 4\"\n [class.level-5]=\"level === 5\"\n (click)=\"viewEntity(node._id)\">\n \n <!-- Card Content -->\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <!-- Avatar -->\n <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n </div>\n \n <!-- Entity Info -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n [cideEleTooltip]=\"node.syen_name || ''\" \n [tooltipPlacement]=\"'top'\"\n [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n </div>\n </div>\n \n <!-- Action Icons -->\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <!-- Phone Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n </button>\n \n <!-- Email Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n </button>\n \n <!-- LinkedIn Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n </button>\n \n <!-- Document Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n </button>\n \n <!-- More Options Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n </button>\n </div>\n \n <!-- Status Badge -->\n <div class=\"tw-flex-shrink-0\">\n @if (node.syen_isactive) {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n Active\n </div>\n } @else {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n Inactive\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Children Entities (Recursive) -->\n @if (node.children && node.children.length > 0) {\n <!-- Flexible Connection Lines -->\n <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n <!-- Connection dot -->\n <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n </div>\n \n <!-- Flexible SVG Lines -->\n <div class=\"tw-relative tw-w-full tw-flex tw-justify-center flexible-connection-lines\">\n @if (node.children && node.children.length === 1) {\n <!-- Single child - simple vertical line -->\n <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n }\n @else if (node.children && node.children.length > 1) {\n <!-- Multiple children - flexible design -->\n <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 100%; height: 40px; top: 0;\">\n <!-- Vertical line from parent -->\n <line x1=\"50%\" y1=\"0\" x2=\"50%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n \n <!-- Horizontal line spanning children -->\n <line x1=\"20%\" y1=\"15\" x2=\"80%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n \n <!-- Vertical lines to children -->\n @for (child of node.children; track child._id; let i = $index) {\n <line [attr.x1]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \n y1=\"15\" \n [attr.x2]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \n y2=\"35\" \n stroke=\"#9333ea\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"/>\n <!-- Connection dot -->\n <circle [attr.cx]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n }\n </svg>\n }\n </div>\n \n <!-- Children Container - Flexible Layout -->\n <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n @for (child of node.children; track child._id) {\n <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n <!-- Child node -->\n <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"] }]
|
|
1104
|
+
], template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n @if (loading()) {\n <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n </div>\n } @else if (error()) {\n <div class=\"tw-text-center tw-py-12\">\n <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n </div>\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n <cide-ele-icon>refresh</cide-ele-icon>\n Try Again\n </button>\n </div>\n } @else if (orgStructure().length === 0) {\n <div class=\"tw-text-center tw-py-12\">\n <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n </div>\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n @if (mode() === 'view') {\n <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n <cide-ele-icon>add</cide-ele-icon>\n Create First Entity\n </button>\n }\n </div>\n } @else {\n <!-- Organization Chart Container -->\n <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n <!-- Chart Content with Background Pattern -->\n <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n @for (rootNode of orgStructure(); track rootNode._id) {\n <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n <!-- Render node recursively with unlimited depth -->\n <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n <div class=\"tw-flex tw-flex-col tw-items-center\">\n \n <!-- Entity Card -->\n <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n [class.level-0]=\"level === 0\"\n [class.level-1]=\"level === 1\"\n [class.level-2]=\"level === 2\"\n [class.level-3]=\"level === 3\"\n [class.level-4]=\"level === 4\"\n [class.level-5]=\"level === 5\"\n (click)=\"viewEntity(node._id)\">\n \n <!-- Card Content -->\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <!-- Avatar -->\n <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n </div>\n \n <!-- Entity Info -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n [cideEleTooltip]=\"node.syen_name || ''\" \n [tooltipPlacement]=\"'top'\"\n [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n </div>\n </div>\n \n <!-- Action Icons -->\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <!-- Phone Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n </button>\n \n <!-- Email Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n </button>\n \n <!-- LinkedIn Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n </button>\n \n <!-- Document Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n </button>\n \n <!-- More Options Icon -->\n <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n </button>\n </div>\n \n <!-- Status Badge -->\n <div class=\"tw-flex-shrink-0\">\n @if (node.syen_isactive) {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n Active\n </div>\n } @else {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n Inactive\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Children Entities (Recursive) -->\n @if (node.children && node.children.length > 0) {\n <!-- Connection Lines Container -->\n <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n <!-- Connection dot at parent -->\n <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n </div>\n \n <!-- Simplified Connection Lines -->\n <div class=\"tw-relative tw-w-full tw-flex tw-justify-center\" style=\"min-height: 40px;\">\n @if (node.children.length === 1) {\n <!-- Single child - simple vertical line -->\n <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n }\n @else {\n <!-- Multiple children - use calculated positions -->\n <svg class=\"tw-absolute\" [attr.width]=\"(node.children.length * 280) + 'px'\" \n style=\"height: 40px; left: 50%; transform: translateX(-50%); top: 0; overflow: visible;\">\n <!-- Vertical line from parent (centered) -->\n <line [attr.x1]=\"(node.children.length * 280) / 2\" \n y1=\"0\" \n [attr.x2]=\"(node.children.length * 280) / 2\" \n y2=\"15\" \n stroke=\"#9333ea\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"/>\n \n <!-- Horizontal line spanning children -->\n <line [attr.x1]=\"140\" \n y1=\"15\" \n [attr.x2]=\"(node.children.length * 280) - 140\" \n y2=\"15\" \n stroke=\"#9333ea\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"/>\n \n <!-- Vertical lines to each child -->\n @for (child of node.children; track child._id; let i = $index) {\n @let xPosition = 140 + (i * 280);\n <line [attr.x1]=\"xPosition\" \n y1=\"15\" \n [attr.x2]=\"xPosition\" \n y2=\"35\" \n stroke=\"#9333ea\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"/>\n <!-- Connection dot -->\n <circle [attr.cx]=\"xPosition\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n }\n </svg>\n }\n </div>\n \n <!-- Children Container - Flexible Layout -->\n <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n @for (child of node.children; track child._id) {\n <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n <!-- Child node -->\n <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"] }]
|
|
966
1105
|
}], propDecorators: { allowSwitching: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSwitching", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], entityClick: [{ type: i0.Output, args: ["entityClick"] }], entitySelect: [{ type: i0.Output, args: ["entitySelect"] }], entityView: [{ type: i0.Output, args: ["entityView"] }] } });
|
|
967
1106
|
|
|
968
1107
|
class CideSharedProgramSectionSelectorComponent {
|