트리형 팝업 구현

정의

• Grid 트리형 팝업

기능

• RowList 구조에서 부모(Arrow Icon이 존재하는 것) / 자식 요소 나누어서 렌더링
• 항목명 옆에 체크박스는 AllSelect
• CheckBox Limit가 존재하고 없으면 Default 50
• 부모의 체크박스를 클릭하면 해당 그룹에 묶인 자식들의 체크박스가 모두 Check
• 자식을 누르면 해당 자식만 Check
• 부모의 아이콘을 누르면 해당 그룹의 자식들이 모두 접힘.
• 부모/ 자식 요소 중에서 자식의 자식이 20개까지 존재할 수 있음.

문제

1. RowList가 1차원 배열로 내려오면 어떻게 부모와 자식을 구분할 것인가?
2. 자식 요 소안에 자식이 계속 존재하면 어떻게 들여쓰기 스타일을 먹여줄 것인가?

해결

{
	prop_id: '',
	attr_type: EN_ATTR_TYPE.Renderer,
	attr_id: 'grid_tree',
	data: {
			group_prop_id: 'item_group', // 그룹을 식별하는 prop_id
			parent_group_prop_id: 'parent_item_group', // 부모 그룹 prop_id
	},
},



=========================================================================

protected getRowindent(
		data_model: any,
		data_models: any[],
		grid_tree?: {
			group_prop_id: string; // 그룹을 식별하는 prop_id
			parent_group_prop_id: string; // 부모 그룹 prop_id
		}
	) {
		if (!grid_tree) {
			return;
		}
		let result = 1;
		// grid_tree가 있는 prop을 찾는다. 무조건 하나만 있어야 한다고 전제한다
		const parent_group_prop_id = grid_tree?.parent_group_prop_id;
		const parent_item_group = data_model[parent_group_prop_id];
		if (parent_item_group) {
			result = infiniteLoop(parent_item_group, parent_group_prop_id, data_models, result);
		}

		return result;

		function infiniteLoop(parent_item_group, parent_group_prop_id, data_models, result) {
			result++;
			const parents_exist = data_models.find((data_model) => data_model.item_group === parent_item_group);
			const parent_group_prop = parents_exist?.[parent_group_prop_id];

			if (parent_group_prop) {
				return infiniteLoop(parent_group_prop, parent_group_prop_id, data_models, result);
			}

			return result;
		}
	}

설명

1. parent_item_group에 빈값이면 부모요소, 값이있으면 자식요소
2. 부모요소라면 return, 자식요소라면 재귀로 infiniteLoop함수를 돌린다.
3. 1번 반복 gn result return
4. 해당 result 값대로 indent 적용.