워크플로우 시작점/종점 선택 목록 -> 상태(상태 속성) 형식으로 보이도록 수정

박지현

2022-03-03 8da80f4b57946a591fa3562c988996648d24b905

 src/main/webapp/custom_components/js-workflow/js-workflow.directive.js

@@ -5,8 +5,8 @@

define(['app', 'angular', 'd3'],
    function (app, angular, d3) {
        app.directive('jsWorkflow', ["$log", "$rootScope", "IssueStatus", "$resourceProvider", "SweetAlert", '$filter',
            function ($log, $rootScope, IssueStatus, $resourceProvider, SweetAlert, $filter) {
        app.directive('jsWorkflow', ["$log", "$rootScope", "IssueStatus", "$resourceProvider", "SweetAlert", '$filter', '$injector', '$controller',
            function ($log, $rootScope, IssueStatus, $resourceProvider, SweetAlert, $filter, $injector, $controller) {
                return {
                    scope : {
                        issueStatusList : '=issueStatusList',
@@ -15,6 +15,7 @@
                        firstStatusExist : "=firstStatusExist",
                        middleStatusExist : "=middleStatusExist",
                        lastStatusExist : "=lastStatusExist",
                        departments : "=departments"
                    },
                    restrict : 'E',
                    replace : true,
@@ -54,12 +55,15 @@
                            defaultAddIssueStatusId : defaultAddIssueStatusId,   //  이슈 상태 추가 셀렉트 박스에서 첫번째 옵션 항목을 기본 선택되게 한다.
                            checkReadyType : checkReadyType,    //  다이어그램안에 상태 속성 '대기'인 이슈 상태가 존재하는지 확인한다.
                            getOptionColor : getOptionColor,  //  이슈 상태의 색상 정보를 가져온다.
                            changeDepartment : changeDepartment,
                            removeDepartment : removeDepartment
                        };

                        //  변수 모음
                        $scope.vm.targetIssueStatusList = [];
                        $scope.vm.issueStatuses = [];   //  선택 가능한 이슈 상태 목록
                        $scope.vm.addIssueStatusId = null;   //  추가하는 이슈 상태 아이디
                        $scope.vm.issueStatusVos = []; // 화면에 있는 이슈 상태 목록
                        $scope.vm.width = 0;  //  넓이
                        $scope.vm.height = 0;  //  높이
                        $scope.vm.svg = null;   //  svg 정보
@@ -76,12 +80,34 @@
                        $scope.vm.targetStatusId = null;    //  연결하는 이슈 상태 아이디
                        $scope.vm.transitionIdGenerator = 100;  //  전이선 임시 id 값

                        $scope.vm.departments = []; // 부서 목록
                        $scope.vm.departmentName = "" // 선택된 부서 이름

                        angular.extend(this, $controller('autoCompleteController', {$scope : $scope, $injector : $injector}));

                        $scope.$watch("issueStatusList", function (newValue) {
                            if ($rootScope.isDefined(newValue)) {
                                $scope.fn.startDiagram();
                                setWorkflowDepartments();
                            }
                        });
                        })

                        // 저장된 담당부서 설정하기
                        function setWorkflowDepartments() {
                            var workflowDepartmentVos = [];

                            angular.forEach($scope.issueStatusList, function (issueStatus) {
                                angular.forEach($scope.vm.issueStatusVos, function (issueStatusVo) {
                                    if (issueStatusVo.id === issueStatus.id) {
                                        var issueStatusWorkflowDepartments = {
                                            workflowDepartmentVos : workflowDepartmentVos,
                                            workflowDepartmentName : ""
                                        }
                                        issueStatusVo = Object.assign(issueStatusVo, issueStatusWorkflowDepartments);
                                    }
                                });
                            })
                        }

                        //  이슈 상태 추가 셀렉트 박스에서 첫번째 옵션 항목을 기본 선택되게 한다.
                        function defaultAddIssueStatusId() {
@@ -150,6 +176,17 @@

                            angular.forEach($scope.vm.issueStatusVos, function (startStatus) {
                                if ($scope.vm.targetStatusId != startStatus.id) {
                                    switch (startStatus.issueStatusType) {
                                        case 'READY' :
                                            startStatus.issueStatusTypeKr = '대기'
                                            break;
                                        case 'OPEN' :
                                            startStatus.issueStatusTypeKr = '진행'
                                            break;
                                        case 'CLOSE' :
                                            startStatus.issueStatusTypeKr = '종료'
                                            break;
                                    }
                                    availableStatus.push(startStatus);
                                }
                            });
@@ -256,6 +293,7 @@
                            return color;
                        }


                        //  이슈 상태를 다이어그램에 추가한다.
                        function addStatus() {
                            if ($rootScope.isDefined($scope.vm.addIssueStatusId)) {
@@ -278,6 +316,9 @@
                                        issueStatus.yLocation = Math.random() * ($scope.vm.height - 50);

                                        $scope.vm.issueStatusVos.push(issueStatus);

                                        // 담당 부서 추가
                                        addWorkflowDepartment(issueStatus);
                                        break;
                                    }
                                }
@@ -286,6 +327,8 @@

                                $scope.fn.defaultAddIssueStatusId();
                                $scope.fn.startDiagram();


                            }
                        }

@@ -333,6 +376,8 @@
                            $scope.fn.updateClientChangePosition();

                            $scope.fn.startDiagram();

                            removeWorkflowDepartment(targetIssueStatus);
                        }

                        //  전이선을 다이어그램에 추가한다.
@@ -549,6 +594,17 @@
                                        }

                                        if (!exist) {
                                            switch (issueStatus.issueStatusType) {
                                                case 'READY' :
                                                    issueStatus.issueStatusTypeKr = '대기'
                                                    break;
                                                case 'OPEN' :
                                                    issueStatus.issueStatusTypeKr = '진행'
                                                    break;
                                                case 'CLOSE' :
                                                    issueStatus.issueStatusTypeKr = '종료'
                                                    break;
                                            }
                                            $scope.vm.issueStatuses.push(issueStatus);
                                        }
                                    });
@@ -599,10 +655,99 @@
                            });
                        }

                        // function  getWorkflowDepartments() {
                        //     $scope.vm.departments = [];
                        //
                        //     if ($scope.vm.activeTarget != null) {
                        //         return issueStatus.workflowDepartments;
                        //     }
                        //     return null;
                        // }

                        // 담당부서 설정
                        function setWorkflowDepartment(targetIssueStatus) {
                            if (targetIssueStatus != null) {
                                angular.forEach($scope.vm.issueStatusVos, function (issueStatusVo) {
                                    if (issueStatusVo.id === targetIssueStatus.id) {
                                        $scope.vm.departmentName = issueStatusVo.workflowDepartmentName;
                                        $scope.vm.departments = [];
                                        angular.forEach(issueStatusVo.workflowDepartmentVos, function (workflowDepartment) {
                                            $scope.vm.departments.push(workflowDepartment.departmentVo);
                                        });
                                    }
                                });
                            }
                        }

                        //  선택 한 부서 제거
                        function removeDepartment(index) {
                            if (index < $scope.vm.departments.length) {
                                $scope.vm.departments.splice(index, 1);
                                changeDepartment();
                            }
                        }

                        function changeDepartment() {
                            if ($scope.vm.activeTarget != null) {
                                var targetIssueStatus = $scope.vm.activeTarget.issueStatus;

                                // null 체크
                                if (targetIssueStatus != null) {
                                    var myIssueStatus = null;
                                    angular.forEach($scope.vm.issueStatusVos, function (issueStatusVo) {
                                        if (issueStatusVo.id === targetIssueStatus.id) {
                                            myIssueStatus = issueStatusVo;
                                        }
                                    });

                                    if (myIssueStatus != null) {
                                        if ($scope.vm.departments != null) {
                                            var workflowDepartments = [];

                                            angular.forEach($scope.vm.departments, function (department) {
                                                var workflowDepartment = {
                                                    departmentVo : department
                                                }
                                                workflowDepartments.push(workflowDepartment);
                                            });
                                            myIssueStatus.workflowDepartmentVos = workflowDepartments;
                                        }
                                    }
                                }
                            }
                        }

                        // 담당부서 추가
                        function addWorkflowDepartment(targetIssueStatus)
                        {
                            if ($scope.departments != null && $scope.departments.length > 0) {
                                var workflowDepartmentVos = [];
                                angular.forEach($scope.vm.issueStatusVos, function (issueStatusVo) {
                                    if (issueStatusVo.id === targetIssueStatus.id) {
                                        var issueStatusWorkflowDepartments = {
                                            workflowDepartmentVos : workflowDepartmentVos,
                                            workflowDepartmentName : ""
                                        }
                                        issueStatusVo = Object.assign(issueStatusVo, issueStatusWorkflowDepartments);
                                    }
                                });
                            }
                        }

                        // 담당부서 삭제
                        function removeWorkflowDepartment(targetIssueStatus)
                        {
                            if ($scope.vm.workflowDepartmentVos != null && $scope.vm.workflowDepartmentVos.length > 0) {
                                $scope.vm.workflowDepartmentVos = $scope.vm.workflowDepartmentVos.filter((el) => el.issueStatus.id === targetIssueStatus.id);
                            }
                        }

                        //  타겟을 클릭했을 때 색상을 변경한다.
                        //  담당 부서를 불러온다
                        function targetClick(target) {
                            $scope.vm.activeTarget = angular.copy(target[0][0]["__data__"]);

                            setWorkflowDepartment($scope.vm.activeTarget.issueStatus);
                            // node 일경우
                            if ($scope.vm.activeTarget.type == "01") {
                                //  노드, 링크 전체 초기화