사용자의 부서 수정 기능 프론트 작업

이민희

2021-11-10 12aa85287c8a8f911de3fd6424b74811d33aff9a

사용자의 부서 수정 기능 프론트 작업

 src/main/webapp/custom_components/js-table/tableColumnGenerator.directive.js

@@ -132,6 +132,18 @@
                                            makeTag += "</ul>";
                                            break;

                                        case "USE_DEPARTMENT_LIST" :
                                            makeTag += "<ul class='ul-not-comma'>";

                                            makeTag += "<div style='cursor: pointer' ng-click='event.modifyUserDepartments(scope.data.id)'>";
                                            angular.forEach(scope.data.departments, function (department) { //departmentVO로 수정 체크 필요
                                                makeTag += "<li>" + department.fieldValue + "</li>";
                                            });
                                            makeTag += "</div>";

                                            makeTag += "</ul>";
                                            break;

                                        case "CONFIG" :
                                            makeTag += '<a ng-click="event.modify(data.id)"><i class="fa fa-pencil fa-lg" uib-tooltip="수정"></i></a>';
                                            break;

 src/main/webapp/i18n/ko/global.json

@@ -147,7 +147,8 @@
        "failedToSelectWorkspaceFullUserList": "업무 공간 전체 사용자 목록 조회 실패",
        "failedToSelectWorkspaceFullLevelList": "사용자 등급 목록 조회 실패",
        "failedToSelectWorkspaceFullDepartmentList": "부서 목록 조회 실패",
        "failedToModifyUserLevel": "사용자 등급 상세 정보 조회 실패"
        "failedToModifyUserLevel": "사용자 등급 상세 정보 조회 실패",
        "failedToDepartmentsOfUserDetails": "사용자의 부서 상세 정보 조회 실패"
    },
    "issue": {
        "issueType": "이슈 유형",

 src/main/webapp/scripts/app/workspace/workspace.js

@@ -34,7 +34,7 @@
                            var deferred = $q.defer();
                            require(["modalFormAutoScroll", "workspaceController", "workspaceLevelAddController", "workspaceDepartmentAddController", "workspacePaymentExecuteController", "workspaceUserConfigController", "workspacePaymentModifyController",
                                "workspacePaymentAgreeTermController", "paymentService", "userWorkspaceService", "workspaceService", "numberOnly", 'jsTable', 'tableColumnGenerator', 'summerNote', 'summerNote-ko-KR', 'formSubmit',
                                "crypto", "reservationDisableUserService", "workspacePaymentAddController", "workspaceUserLevelController", "workspaceDepartmentConfigController", "levelModifyController","departmentModifyController"], function () {
                                "crypto", "reservationDisableUserService", "workspacePaymentAddController", "workspaceUserLevelController", "workspaceDepartmentConfigController", "levelModifyController","departmentModifyController","workspaceDepartmentModifyController"], function () {
                                deferred.resolve();
                            });


 src/main/webapp/scripts/app/workspace/workspaceDepartmentConfig.controller.js

@@ -107,8 +107,10 @@

                        if (result.data.message.status === "success") {
                            $scope.vm.page.selectedPage = currentPage + 1;
                            /*if(result.data.data[0].id == 1){
                                result.data.data.shift();
                            }*/
                            $scope.vm.responseData = result.data;

                        }
                        else {
                            SweetAlert.error($filter("translate")("managementWorkspace.failedToSelectWorkspaceFullDepartmentList"), result.data.message.message); // 부서 목록 조회 실패
@@ -137,7 +139,7 @@
                //  부서 수정
                function departmentModify(id) {
                    $uibModal.open({
                        templateUrl : 'views/workspace/workspaceDepartmentModify.html',
                        templateUrl : 'views/workspace/departmentModify.html',
                        size : "md",
                        controller : 'departmentModifyController',
                        backdrop : 'static',

 src/main/webapp/scripts/app/workspace/workspaceDepartmentModify.controller.js

New file
@@ -0,0 +1,112 @@
/**
 * Created by wisestone on 2018-05-08.
 */
'use strict';

define([
        'app',
        'angular'
    ],
    function (app, angular) {
        app.controller('workspaceDepartmentModifyController', ['$scope', '$rootScope', '$log', '$resourceProvider', '$uibModalInstance', 'UserWorkspace', 'parameter', 'SweetAlert', '$filter', '$injector', '$controller',
            function ($scope, $rootScope, $log, $resourceProvider, $uibModalInstance, UserWorkspace, parameter, SweetAlert, $filter, $injector, $controller) {

                $scope.fn = {
                    cancel : cancel,    //  팝업 창 닫기
                    formSubmit : formSubmit,    //  폼 전송
                    formCheck : formCheck,  //  폼 체크
                    detail : detail,    //  상세 정보 조회
                    removeDepartments : removeDepartments,  //  추가한 부서 제거
                };

                $scope.vm = {
                    id : parameter.id,
                    form : {
                        id : parameter.id,
                        /*users : [],*/
                        departments : [] // 부서
                    },
                    departmentName : "", //부서명 검색
                    /*autoCompletePage : {
                        project : {
                            page : 0,
                            totalPage : 0
                        }
                    },*/
                };
                angular.extend(this, $controller('autoCompleteController', {$scope : $scope, $injector : $injector}));

                //  선택 한 부서 제거
                function removeDepartments(index) {
                    $scope.vm.form.departments.splice(index, 1);
                }

                function formCheck(formInvalid) {
                    if (formInvalid) {
                        return true;
                    }

                    return false;
                }

                //  폼 전송
                function formSubmit() {
                    $rootScope.spinner = true;

                    var content = {
                        id : $scope.vm.form.id,
                        departmentName : (function () {
                            var departmentIds = [];
                            angular.forEach($scope.vm.form.departments, function (department) {
                                departmentIds.push(department.id);
                            });
                            return departmentIds;
                        })()
                    };

                    //user_department INSERT 요청
                    UserWorkspace.userDepartmentModify($resourceProvider.getContent(
                        content,
                        $resourceProvider.getPageContent(0, 0))).then(function (result) {

                        if (result.data.message.status === "success") {
                            $scope.fn.cancel();
                            //  목록 화면 갱신
                            $rootScope.$broadcast("getUserWorkspaceList", {});
                        }
                        else {
                            SweetAlert.error($filter("translate")("managementWorkspace.failedDepartmentRegistration"), result.data.message.message);
                        }

                        $rootScope.spinner = false;
                    });

                }

                //  팝업 창 닫기
                function cancel() {
                    $rootScope.$broadcast("closeLayer");    //  팝업이 열리고 나서 js-multi, js-single 등에서 body 이벤트가 날아가는 현상 수정
                    $uibModalInstance.dismiss('cancel');
                    $(document).unbind("keydown");  //  단축키 이벤트 제거
                }

                function detail() {
                    UserWorkspace.userDepartmentDetail($resourceProvider.getContent(
                        $scope.vm.search,
                        $resourceProvider.getPageContent(0, 1))).then(function (result) {

                        if (result.data.message.status === "success") {
                            if (angular.isDefined(result.data.data)) {
                                $scope.vm.form.departments = result.data.data.userDepartmentVos; //체크 필요
                            }
                        }
                        else {
                            SweetAlert.error($filter("translate")("managementWorkspace.failedToDepartmentsOfUserDetails"), result.data.message.message); //"사용자의 부서 상세 정보 조회 실패"
                        }
                    });
                }

                $scope.fn.detail();

            }]);
    });

 src/main/webapp/scripts/app/workspace/workspaceUserConfig.controller.js

@@ -9,8 +9,8 @@
    ],
    function (app, angular) {
        app.controller('workspaceUserConfigController', ['$scope', '$rootScope', '$log', '$resourceProvider', 'SweetAlert', '$uibModal', '$q', '$state', '$tableProvider', 'Payment', 'Workspace',
            'UserWorkspace', '$filter',
            function ($scope, $rootScope, $log, $resourceProvider, SweetAlert, $uibModal, $q, $state, $tableProvider, Payment, Workspace, UserWorkspace, $filter) {
            'UserWorkspace', '$filter', '$injector', '$controller',
            function ($scope, $rootScope, $log, $resourceProvider, SweetAlert, $uibModal, $q, $state, $tableProvider, Payment, Workspace, UserWorkspace, $filter, $injector, $controller) {


                /*  $scope.fn 상속 중  */
@@ -55,7 +55,10 @@
                //  테이블 이벤트
                $scope.vm.tableEvent = {
                    modifyUserWorkspace : modifyUserWorkspace,   //  업무 공간 참여하는 사용자의 참여 상태 변경
                    modifyUserDepartments : modifyUserDepartments //사용자 부서 변경
                };

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

                //  상세 정보
                $scope.$on("getUserWorkspaceList", function () {
@@ -99,8 +102,7 @@
                        .setHWidth("width-120-p")
                        .setDAlign("text-center")
                        .setDType("renderer")
                        .setDName("department")
                        .setDRenderer("DEPARTMENT_OPTION"));
                        .setDRenderer("USE_DEPARTMENT_LIST"));
                    $scope.vm.tableConfigs.push($tableProvider.config()
                        .setHName("common.level")
                        .setHWidth("width-120-p")
@@ -267,6 +269,24 @@
                        }
                    });
                }

                //  사용자가 속해있는 부서 수정 팝업
                function modifyUserDepartments(id) {
                    $uibModal.open({
                        templateUrl : 'views/workspace/workspaceDepartmentModify.html',
                        size : "xlg",
                        controller : 'workspaceDepartmentModifyController',
                        backdrop : 'static',
                        windowClass : 'workflow-window',
                        resolve : {
                            parameter : function () {
                                return {
                                    id : id
                                };
                            }
                        }
                    });
                }
            }
        ]);
    }

 src/main/webapp/scripts/components/userWorkspace/userWorkspace.service.js

@@ -77,6 +77,18 @@
                    return response;
                });
            },
            userDepartmentModify : function (conditions) {
                return $http.post("userWorkspace/modifyDepartment", conditions).then(function (response) {
                    $log.debug("사용자의 부서 수정 결과 : ", response);
                    return response;
                });
            },
            userDepartmentDetail : function (conditions) {
                return $http.post("userWorkspace/detailDepartment", conditions).then(function (response) {
                    $log.debug("사용자의 부서 상세보기 결과 : ", response);
                    return response;
                });
            },
            modify : function (conditions) {
                return $http.post("userWorkspace/modify", conditions).then(function (response) {
                    $log.debug("참여 상태 수정 결과 : ", response);

 src/main/webapp/scripts/components/utils/autoComplete.controller.js

@@ -18,6 +18,7 @@
                var Project = $injector.get("Project");
                var Workflow = $injector.get("Workflow");
                var Issue = $injector.get("Issue");
                var UserWorkspace = $injector.get("UserWorkspace");
                var $log = $injector.get("$log");
                var SweetAlert = $injector.get("SweetAlert");

@@ -26,6 +27,7 @@
                $scope.fn.getProjectList = getProjectList;  //  프로젝트 목록 정보를 조회한다.
                $scope.fn.getIssueList = getIssueList;  //  일감 목록 정보를 조회한다.
                $scope.fn.getWorkflowList = getWorkflowList;    //  워크플로우 목록 정보를 조회한다.
                $scope.fn.getDepartmentList = getDepartmentList;    //  부서 목록 정보를 조회한다.

                function getUserList(query, excludeList, page, callBack) {
                    var conditions = {
@@ -109,6 +111,49 @@
                    return deferred.promise;
                }

                function getDepartmentList(query, excludeList, page, callBack) {
                    var conditions = {
                        departmentName : query,
                        userId : (function () {
                            var userId = "";

                            if ($rootScope.isDefined($scope.vm.form)) {
                                angular.forEach($scope.vm.form.users, function (user) {
                                    userId = user.id;
                                });
                            }
                            return userId;
                        })(),
                        excludeIds : (function () { //어떤 역할?
                            var excludeIds = [];

                            angular.forEach(excludeList, function (exclude) {
                                excludeIds.push(exclude.id);
                            });

                            return excludeIds;
                        })()
                    };
                    var deferred = $q.defer();

                    UserWorkspace.find($resourceProvider.getContent(         //  페이징 업데이트가 필요한 컴포넌트 일경우, page 업데이트가 있을 경우 기본 10개씩 가져오고 아닐경우 25개씩 가져온다.
                        conditions, $resourceProvider.getPageContent($rootScope.isDefined(page) ? page : 0, $rootScope.isDefined(page) ? 10 : 25))).then(function (result) {
                        if (result.data.message.status === "success") {

                            if ($rootScope.isDefined(callBack)) {
                                callBack(result);
                            }

                            deferred.resolve(result.data.data);
                        }
                        else {
                            SweetAlert.swal($filter("translate")("managementWorkspace.failedToSelectWorkspaceFullDepartmentList"), result.data.message.message, "error"); // "부서 목록 조회 실패"
                        }
                    });

                    return deferred.promise;
                }

                function getWorkflowList(query, excludeList, page, callBack) {
                    var conditions = {
                        name : query,

 src/main/webapp/scripts/main.js

@@ -227,11 +227,12 @@
        'workspaceUserLevelController' : 'app/workspace/workspaceUserLevelConfig.controller',  //  사용자 관리 컨트롤러
        'workspaceLevelAddController' : 'app/workspace/workspaceLevelAdd.controller',  //  사용자 등급 추가 컨트롤러
        'levelModifyController' : 'app/workspace/levelModify.controller',  //  사용자 등급 수정 컨트롤러
        'departmentModifyController' : 'app/workspace/departmentModify.controller',  //  사용자 등급 수정 컨트롤러
        'departmentModifyController' : 'app/workspace/departmentModify.controller',  //  부서 수정 컨트롤러
        'workspaceDepartmentAddController' : 'app/workspace/workspaceDepartmentAdd.controller',  //  부서 추가 컨트롤러
        'workspaceDepartmentConfigController' : 'app/workspace/workspaceDepartmentConfig.controller',  //  사용자 부서 관리 컨트롤러
        'workspaceService' : 'components/workspace/workspace.service',  //  업무 공간에 관련된 통신을 담당한다.
        'paymentService' : 'components/payment/payment.service',    //  결재에 관련된 통신을 담당한다.
        'workspaceDepartmentModifyController' : 'app/workspace/workspaceDepartmentModify.controller',  //  사용자 부서 수정 컨트롤러

        /*  사용자 */
        'userRoute' : 'app/user/user',  //  사용자에 관련된 route 정보

 src/main/webapp/views/workspace/departmentModify.html

New file
@@ -0,0 +1,56 @@
<div class="formModal">
    <div class="modal-header faded smaller">
        <div class="modal-title">
            <strong>부서명 수정</strong>
        </div>
        <button aria-label="Close" class="close" type="button" ng-click="fn.cancel()">
            <span aria-hidden="true"> &times;</span>
        </button>
    </div>

    <div class="modal-body">
        <form role="form" name="departmentModifyForm">
            <div class="form-group">
                <label for="departmentModifyForm1">
                    <span translate="common.departmentName">부서명</span>
                    <code class="highlighter-rouge">*</code>
                </label>
                <input id="departmentModifyForm1"
                       name="name"
                       type="text"
                       class="form-control"
                       autofocus
                       kr-input
                       input-regex="[^a-zA-Z0-9 가-힣ㄱ-ㅎㅏ-ㅣ\u318D\u119E\u11A2\u2022\u2025a\u00B7\uFE55]"
                       autocomplete="off"
                       ng-model="vm.form.departmentName"
                       ng-maxlength="200"
                       maxlength="200"
                       required>
                <!--<small translate="notice.enterSpecialCharacters">제목에는 특수 문자를 입력할 수 없습니다.</small>-->
            </div>

            <div class="form-group">
                <label>
                    <span translate="manageDepartment.departmentEx">부서 설명</span>
                </label>
                <summernote
                        class="summernote"
                        lang="ko-KR"
                        config="vm.options"
                        ng-model="vm.form.departmentDescription"
                        target=".note-editable"></summernote>
            </div>
        </form>
    </div>

    <div class="modal-footer buttons-on-right">
        <button type="button" class="btn btn-md btn-grey" ng-click="fn.cancel()"><span translate="common.cancel">취소</span></button>
        <button type="button" class="btn btn-md btn-primary bold"
                js-short-cut
                js-short-cut-action="(fn.formCheck(departmentModifyForm.$invalid) || $root.spinner) ? null : fn.formSubmit()"
                ng-disabled="fn.formCheck(departmentModifyForm.$invalid)"
                ng-click="fn.formSubmit()"><span translate="common.save">저장</span>
        </button>
    </div>
</div>

 src/main/webapp/views/workspace/workspaceDepartmentConfig.html

@@ -45,13 +45,13 @@
                        </div>
                    </div>
                    <div class="col-sm-6 text-right" ng-if="$root.checkMngPermission('USER_PERMISSION_MNG_WORKSPACE')">
                        <form class="form-inline justify-content-sm-end pull-right ng-pristine ng-valid" method="post" action="/departmentManage/downloadExcel" name="departmentManageListForm">
                        <form class="form-inline justify-content-sm-end pull-right ng-pristine ng-valid" method="post" action="/department/downloadExcel" name="departmentListForm">
                            <input type="hidden" name="conditions" autocomplete="off">
                            <div class="btn-group">
                                <button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><span translate="common.addFunction" class="ng-scope">추가기능</span>
                                </button>
                                <div aria-labelledby="dropdownMenuButton2" class="dropdown-menu left-menu" x-placement="bottom-start">
                                    <a class="dropdown-item cursor ng-isolate-scope" form-submit="departmentManageListForm" make-search-conditions="fn.makeSearchConditions()"><span translate="common.downloadExcel" class="ng-scope">엑셀 다운로드</span></a>
                                    <a class="dropdown-item cursor ng-isolate-scope" form-submit="departmentListForm" make-search-conditions="fn.makeSearchConditions()"><span translate="common.downloadExcel" class="ng-scope">엑셀 다운로드</span></a>
                                    <a class="dropdown-item cursor" ng-click="fn.removes()"> <span translate="common.delete" class="ng-scope">삭제</span></a>
                                </div>
                            </div>

 src/main/webapp/views/workspace/workspaceDepartmentModify.html

@@ -1,7 +1,7 @@
<div class="formModal">
<div class="formModal" xmlns:cursor="http://www.w3.org/1999/xhtml">
    <div class="modal-header faded smaller">
        <div class="modal-title">
            <strong>부서명 수정</strong>
            <strong>부서 수정</strong>
        </div>
        <button aria-label="Close" class="close" type="button" ng-click="fn.cancel()">
            <span aria-hidden="true"> &times;</span>
@@ -9,37 +9,24 @@
    </div>

    <div class="modal-body">
        <form role="form" name="departmentModifyForm">
        <form role="form" name="departmentsModifyForm">
            <div class="form-group">
                <label for="departmentModifyForm1">
                    <span translate="common.departmentName">부서명</span>
                    <code class="highlighter-rouge">*</code>
                </label>
                <input id="departmentModifyForm1"
                       name="name"
                       type="text"
                       class="form-control"
                       autofocus
                       kr-input
                       input-regex="[^a-zA-Z0-9 가-힣ㄱ-ㅎㅏ-ㅣ\u318D\u119E\u11A2\u2022\u2025a\u00B7\uFE55]"
                       autocomplete="off"
                       ng-model="vm.form.departmentName"
                       ng-maxlength="200"
                       maxlength="200"
                       required>
                <!--<small translate="notice.enterSpecialCharacters">제목에는 특수 문자를 입력할 수 없습니다.</small>-->
            </div>
                <label><span translate="common.departmentName">부서명</span> </label>
                <js-autocomplete-multi data-input-name="departments"
                                       selected-model="vm.form.departments"
                                       search="vm.departmentName"
                                       source="fn.getDepartments(vm.departmentName, vm.form.departments)"
                                       input-disabled="false"> <!--concat 체크 필요-->
                                       <!--translation-texts="{ count : 'common.userNum', empty : 'common.emptyUser' }"
                                       extra-settings="{ displayProp : 'byName' , idProp : 'id', imageable : true, imagePathProp : 'profile', type : 'user', maxlength : 100, autoResize : true }"-->
                </js-autocomplete-multi>

            <div class="form-group">
                <label>
                    <span translate="manageDepartment.departmentEx">부서 설명</span>
                </label>
                <summernote
                        class="summernote"
                        lang="ko-KR"
                        config="vm.options"
                        ng-model="vm.form.departmentDescription"
                        target=".note-editable"></summernote>
                <div class="select3-selection__choicediv mt-10">
                    <span class="select3-selection__choice" ng-repeat="department in vm.form.departments">
                        <span>{{department.name}}</span> <!--부서 이름 출력-->
                        <span class="select3-selection__choice__remove" ng-click="fn.removeDepartments($index)">×</span>
                    </span>
                </div>
            </div>
        </form>
    </div>
@@ -48,9 +35,9 @@
        <button type="button" class="btn btn-md btn-grey" ng-click="fn.cancel()"><span translate="common.cancel">취소</span></button>
        <button type="button" class="btn btn-md btn-primary bold"
                js-short-cut
                js-short-cut-action="(fn.formCheck(departmentModifyForm.$invalid) || $root.spinner) ? null : fn.formSubmit()"
                ng-disabled="fn.formCheck(departmentModifyForm.$invalid)"
                js-short-cut-action="(fn.formCheck(departmentsModifyForm.$invalid) || $root.spinner) ? null : fn.formSubmit()"
                ng-disabled="fn.formCheck(departmentsModifyForm.$invalid)"
                ng-click="fn.formSubmit()"><span translate="common.save">저장</span>
        </button>
    </div>
</div>
</div>