"부서 관리" 및 "사용자 관리" 프론트 완료

이민희

2021-11-05 fe1b9e8b4e54fb22022a0d13cc57b72bc8ba9840

"부서 관리" 및 "사용자 관리" 프론트 완료

 src/main/java/kr/wisestone/owl/service/impl/DepartmentManageServiceImpl.java

@@ -98,6 +98,11 @@
            throw new OwlRuntimeException(
                    this.messageAccessor.getMessage(MsgConstants.PROJECT_REMOVE_NOT_SELECT));
        }

        for (Long departmentId : departmentManageForm.getRemoveIds()) {
            this.departmentManageRepository.deleteById(departmentId);
        }

        this.departmentManageRepository.flush();
    }

@@ -106,8 +111,9 @@
    public void detailDepartment(Map<String, Object> resJsonData, DepartmentManageCondition departmentManageCondition) {
        DepartmentManageVo departmentManageVo = new DepartmentManageVo();

        if (departmentManageVo.getId() != null) {
            DepartmentManage departmentManage = this.getDepartment(departmentManageCondition.getId());
        Long departmentId = departmentManageCondition.getId();
        if (departmentId != null) {
            DepartmentManage departmentManage = this.getDepartment(departmentId);
            departmentManageVo = ConvertUtil.copyProperties(departmentManage, DepartmentManageVo.class);
        }
        resJsonData.put(Constants.RES_KEY_CONTENTS, departmentManageVo);

 src/main/java/kr/wisestone/owl/service/impl/UserWorkspaceServiceImpl.java

@@ -106,21 +106,21 @@
    public void modifyUserWorkspace(UserWorkspaceForm userWorkspaceForm) {
        UserWorkspace userWorkspace = this.getUserWorkspace(userWorkspaceForm.getId());

        UserLevel currentUserlevel = userWorkspace.getUser().getUserLevel();
        if (currentUserlevel.getId() != userWorkspaceForm.getLevelId()) {
            // 사용자 등급 변경시
            User user = userWorkspace.getUser();

        // 사용자 등급 변경
        UserLevel currentUserlevel = user.getUserLevel();
        if (currentUserlevel.getId() != userWorkspaceForm.getLevelId()) {
            UserLevel userLevel = this.userLevelService.getUserLevel(userWorkspaceForm.getLevelId());
            user.setUserLevel(userLevel);
            userWorkspace.setUser(user);
        }

        //todo 부서 변경시
        DepartmentManage currentDepartment = userWorkspace.getUser().getDepartmentManage();
        if (currentDepartment.getId() != userWorkspaceForm.getDepartmentId()) {
        // 부서 변경
        DepartmentManage currentDepartment = user.getDepartmentManage();
        if (currentDepartment == null || (userWorkspaceForm.getDepartmentId() != null && currentDepartment.getId() != userWorkspaceForm.getDepartmentId())) {
            // 부서명 변경시
            User user = userWorkspace.getUser();
            DepartmentManage departmentManage = this.departmentManageService.getDepartment(userWorkspaceForm.getLevelId());
            DepartmentManage departmentManage = this.departmentManageService.getDepartment(userWorkspaceForm.getDepartmentId());
            user.setDepartmentManage(departmentManage);
            userWorkspace.setUser(user);
        }
@@ -137,7 +137,7 @@
                            this.messageAccessor.getMessage(MsgConstants.WORKSPACE_MAX_USER_EXCESS_NOT_INCLUDE));
                }
            } else {
                User user = userWorkspace.getUser();
                user = userWorkspace.getUser();
                //  참여 대기 사용자가 현재 해당 업무 공간을 사용하고 있을 경우 즉시 해당 업무 공간에서 튕기게 한다.
                if (user.getLastWorkspaceId().equals(userWorkspace.getWorkspace().getId())) {
                    //  업무 공간에 참여하던 사용자에게 제외 알림 및 화면 새로고침

 src/main/resources/mybatis/query-template/departmentManage-template.xml

@@ -13,10 +13,10 @@
        department_manage dm
        WHERE 1=1
        <if test="departmentName != '' and departmentName != null">
            AND ul.department_name like CONCAT('%',#{departmentName},'%')
            AND dm.department_name like CONCAT('%',#{departmentName},'%')
        </if>
        <if test="id != '' and id != null">
            AND ul.id like CONCAT('%',#{id},'%')
            AND dm.id like CONCAT('%',#{id},'%')
        </if>
        <if test="pageSize != '' and pageSize != null">
            limit #{pageSize} offset #{page};
@@ -30,7 +30,10 @@
        department_manage dm
        WHERE 1=1
        <if test="departmentName != '' and departmentName != null">
            AND ul.department_name like CONCAT('%',#{departmentName},'%')
            AND dm.department_name like CONCAT('%',#{departmentName},'%')
        </if>
        <if test="id != '' and id != null">
            AND dm.id like CONCAT('%',#{id},'%')
        </if>
    </select>
</mapper>

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

@@ -330,15 +330,24 @@

                                        case "DEPARTMENT_MODIFY":
                                            if ($rootScope.checkMngPermission('USER_PERMISSION_MNG_WORKSPACE')) {
                                                makeTag += "<span class='titlename cursor table-word-break-all' ng-click='event.modifyDepartment(data.id)'>" + scope.data.departmentName + "</span>";
                                                makeTag += "<span class='titlename cursor table-word-break-all' ng-click='event.departmentModify(data.id)'>" + scope.data.departmentName + "</span>";
                                            }
                                            else {
                                                makeTag += "<span class='titlename cursor table-word-break-all'>" + scope.data.departmentName + "</span>";
                                            }
                                            break;

                                        case "DEPARTMENT_COUNT":
                                            if ($rootScope.checkMngPermission('USER_PERMISSION_MNG_WORKSPACE')) {
                                                makeTag += "<span class='titlename cursor table-word-break-all' ng-click='event.modifyDepartmentCount(data.id)'>" + scope.data.departmentCount + "</span>";
                                            }
                                            else {
                                                makeTag += "<span class='titlename cursor table-word-break-all'>" + scope.data.departmentCount + "</span>";
                                            }
                                            break;

                                        case "DEPARTMENT_OPTION" :
                                            makeTag +="<select class='form-control input-sm' ng-model='data.departmentId' ng-change=''><option ng-repeat='department in data.departments' ng-value='department.fieldKey'>{{::department.fieldValue}}</option></select>";
                                            makeTag +="<select class='form-control input-sm' ng-model='data.departmentId' ng-change='event.modifyUserWorkspace(data)'><option ng-repeat='department in data.departments' ng-value='department.fieldKey'>{{::department.fieldValue}}</option></select>";
                                            break;

                                        case "LEVEL_OPTION" :

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

@@ -758,7 +758,8 @@
        "manageDepartment": "부서 관리",
        "departmentName": "부서명",
        "departmentEx": "부서설명",
        "departmentCount": "부서인원"
        "departmentCount": "부서인원",
        "departmentUser": "부서 팀원"
    },
    "tasks": {
        "agileBoardTitle": "칸반 보드"

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

@@ -12,7 +12,7 @@
            function ($scope, $rootScope, $log, $resourceProvider, $uibModalInstance, UserWorkspace, parameter, SweetAlert, $filter) {

                $scope.fn = {
                    getDepartmentList : getDepartmentList,  //  부서 관리 리스트
                    detail : detail,  //  상세 조회
                    cancel : cancel,    //  팝업 창 닫기
                    formSubmit : formSubmit,    //  폼 전송
                    formCheck : formCheck,  //  폼 체크
@@ -22,28 +22,28 @@
                    id : parameter.id,
                    form : {
                        departmentName : "",
                        departmentEx : ""
                        departmentDescription : ""
                    }
                };

                //  부서 관리 목록 조회
                function getDepartmentList() {

                //  상세 정보
                function detail() {
                    var conditions = {
                        id : $scope.vm.id
                    };
                        id : parameter.id
                    }

                    //테이블 리스트 데이터 컨트롤러 요청
                    UserWorkspace.departmentFind($resourceProvider.getContent(conditions,
                        $resourceProvider.getPageContent(0, 10))).then(function (result) {
                    UserWorkspace.departmentDetail($resourceProvider.getContent(
                        conditions,
                        $resourceProvider.getPageContent(0, 1))).then(function (result) {

                        if (result.data.message.status === "success") {
                            $scope.vm.form.departmentName = result.data.data[0].departmentName; //departmentName 가져오기
                            $scope.vm.form.departmentDescription = result.data.data[0].departmentDescription; //departmentEx 가져오기

                            if (angular.isDefined(result.data.data)) {
                                $scope.vm.form.departmentName = result.data.data.departmentName;
                                $scope.vm.form.departmentDescription = result.data.data.departmentDescription;
                            }
                        }
                        else {
                            SweetAlert.error($filter("translate")("managementWorkspace.failedToSelectWorkspaceFullDepartmentList"), result.data.message.message); // "부서 관리 목록 조회 실패"
                            SweetAlert.swal($filter("translate")("customField.failedToDetailUserDefinedFields"), result.data.message.message, "error"); // "사용자 정의 필드 상세 정보 조회 실패"
                        }
                    });
                }
@@ -57,16 +57,16 @@
                }

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

                    var content = {
                        id : parameter.id,
                        title : $rootScope.preventXss($scope.vm.form.departmentName),
                        description : $rootScope.preventXss($scope.vm.form.departmentDescription)
                        departmentName : $rootScope.preventXss($scope.vm.form.departmentName),
                        departmentDescription : $rootScope.preventXss($scope.vm.form.departmentDescription)
                    };

                    UserWorkspace.modifyDepartment($resourceProvider.getContent(condition,
                    UserWorkspace.departmentModify($resourceProvider.getContent(
                        content,
                        $resourceProvider.getPageContent(0, 0))).then(function (result) {

@@ -91,7 +91,7 @@
                    $(document).unbind("keydown");  //  단축키 이벤트 제거
                }

                $scope.fn.getDepartmentList();
                $scope.fn.detail();

            }]);
    });

 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"], function () {
                                "crypto", "reservationDisableUserService", "workspacePaymentAddController", "workspaceUserLevelController", "workspaceDepartmentConfigController", "levelModifyController","departmentModifyController"], function () {
                                deferred.resolve();
                            });


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

@@ -9,8 +9,8 @@
    ],
    function (app, angular) {
        app.controller('workspaceDepartmentConfigController', ['$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', '$timeout',
            function ($scope, $rootScope, $log, $resourceProvider, SweetAlert, $uibModal, $q, $state, $tableProvider, Payment, Workspace, UserWorkspace, $filter, $timeout) {


                /*  $scope.fn 상속 중  */
@@ -18,6 +18,7 @@
                $scope.fn.makeTableConfigs = makeTableConfigs;  //  부서 관리 목록 테이블 설정
                $scope.fn.initSearchDepartment = initSearchDepartment;  //  검색 조건 초기화
                $scope.fn.departmentAdd = departmentAdd;    //  부서 추가
                $scope.fn.removes = removes;  // 부서 삭제

                /*  $scope.vm 상속 중  */
                $scope.vm.search = {
@@ -36,7 +37,8 @@

                //  테이블 이벤트
                $scope.vm.tableEvent2 = {
                    modifyDepartment : modifyDepartment //부서명 변경
                    departmentModify : departmentModify, //부서명 변경
                    modifyDepartmentCount : modifyDepartmentCount //부서 팀원 변경
                };

                //  부서 관리 리스트 불러오기
@@ -46,6 +48,7 @@

                //  검색 조건 초기화
                function initSearchDepartment() {
                    $scope.vm.search.departmentName = "";
                    $scope.fn.getDepartmentList(0);
                }

@@ -73,7 +76,9 @@
                        .setHName("manageDepartment.departmentCount")
                        .setHWidth("width-120-p")
                        .setDAlign("text-center")
                        .setDName("departmentCount"));
                        .setDName("departmentCount")
                        .setDType("renderer")
                        .setDRenderer("DEPARTMENT_COUNT"));
                }

                //  부서 관리 목록 조회
@@ -93,7 +98,7 @@
                    }

                    var conditions = {
                        name : $scope.vm.search.departmentName //부서명
                        departmentName : $scope.vm.search.departmentName //부서명
                    };

                    //테이블 리스트 데이터 컨트롤러 요청
@@ -129,8 +134,8 @@
                    });
                }

                //  부서명 수정
                function modifyDepartment(id) {
                //  부서 수정
                function departmentModify(id) {
                    $uibModal.open({
                        templateUrl : 'views/workspace/workspaceDepartmentModify.html',
                        size : "md",
@@ -146,6 +151,83 @@
                    });
                }

                //  부서 인원 수정
                function modifyDepartmentCount(id) {
                    $uibModal.open({
                        templateUrl : 'views/workspace/workspaceDepartmentCountModify.html',
                        size : "md",
                        controller : 'departmentCountModifyController',
                        backdrop : 'static',
                        resolve : {
                            parameter : function () {
                                return {
                                    id : id
                                };
                            }
                        }
                    });
                }

                //  사용자 정의 필드 삭제 팝업
                function removes() {
                    var removeIds = [];

                    angular.forEach($scope.vm.responseData.data, function (data) {
                        if (data.checked) {
                            removeIds.push(data.id);
                        }
                    });

                    if (removeIds.length < 1) {
                        SweetAlert.swal({
                            title : $filter("translate")("common.checkPurgingTargets"), // 삭제 대상 확인
                            text : $filter("translate")("common.selectDestinationDeletion"), // 삭제 대상을 선택하세요.
                            type : "warning"
                        });
                        return;
                    }

                    //  삭제 알림
                    SweetAlert.swal({
                            title : $filter("translate")("customField.deleteUserDefinedFields"), // "사용자 정의 필드 삭제"
                            text : $filter("translate")("customField.wantToDeleteSelectUserDefinedFields"), // "선택한 사용자 정의 필드를 삭제하겠습니까? 삭제된 사용자 정의 필드는 복구할 수 없습니다."
                            type : "warning",
                            showCancelButton : true,
                            confirmButtonColor : "#DD6B55",
                            confirmButtonText : $filter("translate")("common.delete"), // 삭제
                            cancelButtonText : $filter("translate")("common.cancel"), // 취소
                            closeOnConfirm : false,
                            closeOnCancel : true
                        },
                        function (isConfirm) {
                            SweetAlert.close();

                            if (isConfirm) {
                                $rootScope.spinner = true;

                                UserWorkspace.departmentRemove($resourceProvider.getContent(
                                    { removeIds : removeIds },
                                    $resourceProvider.getPageContent(0, 0))).then(function (result) {

                                    if (result.data.message.status === "success") {
                                        $timeout(function () {
                                            SweetAlert.success($filter("translate")("common.deleteSucceeded"), result.data.message.message); // 삭제 성공
                                        }, 100);

                                        $scope.fn.getDepartmentList(0);
                                    }
                                    else {
                                        $timeout(function () {
                                            SweetAlert.error($filter("translate")("common.deleteFailed"), result.data.message.message); // 삭제 실패
                                        }, 100);
                                    }

                                    $rootScope.spinner = false;
                                });
                            }
                        });
                }

                $scope.fn.makeTableConfigs();
                $scope.fn.getDepartmentList();


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

@@ -47,6 +47,7 @@
                };

                $scope.vm.levels = [];
                $scope.vm.departments = [];
                $scope.vm.tableConfigs = [];
                $scope.vm.responseData = {
                    data : []
@@ -56,7 +57,7 @@
                $scope.vm.tableEvent = {
                    modifyUserWorkspace : modifyUserWorkspace,   //  업무 공간 참여하는 사용자의 참여 상태 변경
                    modifyLevel : modifyLevel,   //  사용자 등급명 변경
                    //modifyDepartment : modifyDepartment //  부서 변경
                    departmentModify : departmentModify //  부서 변경
                };

                //  사용자 등급 수정
@@ -65,6 +66,24 @@
                        templateUrl : 'views/workspace/workspaceLevelModify.html',
                        size : "md",
                        controller : 'levelModifyController',
                        backdrop : 'static',
                        resolve : {
                            parameter : function () {
                                return {
                                    id : id,
                                    //levelName : [$scope.vm.form.]
                                };
                            }
                        }
                    });
                }

                //  부서 수정
                function departmentModify(id) {
                    $uibModal.open({
                        templateUrl : 'views/workspace/workspaceDepartmentModify.html',
                        size : "md",
                        controller : 'departmentModifyController',
                        backdrop : 'static',
                        resolve : {
                            parameter : function () {
@@ -212,7 +231,9 @@
                            angular.forEach($scope.vm.responseData.data, function (data) {
                                // data.levelId = $scope.vm.levels[idx].fieldKey;
                                data.levels = [];
                                data.departments = [];
                                data.levels = $scope.vm.levels.slice();
                                data.departments = $scope.vm.departments.slice();
                                idx++;
                            });
                        }
@@ -251,12 +272,12 @@
                // 부서 목록
                function getDepartments() {
                    var deferred = $q.defer();
                    $scope.vm.departments = [];

                    UserWorkspace.departmentFind($resourceProvider.getContent({},
                        $resourceProvider.getPageContent(0, 1000))).then(function (result) {

                        if (result.data.message.status === "success") {
                            $scope.vm.search.departments = result.data.data;
                            angular.forEach(result.data.data, function (department) {
                                $scope.vm.departments.push({
                                    fieldKey : department.id,

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

@@ -39,6 +39,12 @@
                    return response;
                });
            },
            departmentDetail : function (conditions) {
                return $http.post("departmentManage/detail", conditions).then(function (response) {
                    $log.debug("부서 상세 : ", response);
                    return response;
                });
            },
            departmentAdd : function (conditions) {
                return $http.post("departmentManage/add", conditions).then(function (response) {
                    $log.debug("부서 생성 결과 : ", response);

 src/main/webapp/scripts/main.js

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

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

@@ -33,12 +33,10 @@
            <div class="form-group">
                <label>
                    <span translate="common.departmentEx">부서 설명</span>
                    <code class="highlighter-rouge">*</code>
                </label>
                <summernote
                        class="summernote"
                        lang="ko-KR"
                        required
                        config="vm.options"
                        ng-model="vm.form.description"
                        target=".note-editable"></summernote>

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

@@ -77,7 +77,7 @@
                        <div class="col-xl-2">
                            <div class="form-group">
                                <label translate="common.departmentName">부서명</label>
                                <input class="form-control" type="text" ng-model="vm.search.DepatmentName" maxlength="10">
                                <input class="form-control" type="text" ng-model="vm.search.departmentName" maxlength="10">
                            </div>
                        </div>


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

New file
@@ -0,0 +1,43 @@
<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="departmentCountModifyForm">
            <div class="form-group">
                <label><span translate="common.departmentUser">부서 팀원</span> </label>
                <js-autocomplete-multi data-input-name="users"
                                       selected-model="vm.form.users"
                                       search="vm.userName"
                                       source="fn.getUserList(vm.userName, vm.form.users.concat(vm.form.managers))"
                                       input-disabled="false"
                                       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="select3-selection__choicediv mt-10">
                    <span class="select3-selection__choice" ng-repeat="user in vm.form.users">
                        <span class="avatar-w"><img ng-src="{{user.profile}}"></span>
                        <span>{{user.name}}({{user.account}})</span>
                        <span class="select3-selection__choice__remove" ng-click="fn.removeUsr($index)">×</span>
                    </span>
                </div>
            </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/workspaceDepartmentModify.html

@@ -33,14 +33,12 @@
            <div class="form-group">
                <label>
                    <span translate="manageDepartment.departmentEx">부서 설명</span>
                    <code class="highlighter-rouge">*</code>
                </label>
                <summernote
                        class="summernote"
                        lang="ko-KR"
                        required
                        config="vm.options"
                        ng-model="vm.form.description"
                        ng-model="vm.form.departmentDescription"
                        target=".note-editable"></summernote>
            </div>
        </form>

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

@@ -13,11 +13,11 @@
            <table class="table table-lightborder">
                <tr>
                    <td>
                        <label for="levelModifyForm1"><span translate="managementWorkspace.levelName">등급명</span><code class="highlighter-rouge">*</code></label>
                        <label for="levelModifyForm"><span translate="managementWorkspace.levelName">등급명</span><code class="highlighter-rouge">*</code></label>
                    </td>
                    <td>
                        <div class="input-group mb-0 mr-sm-0 mb-sm-0">
                            <input id="levelModifyForm1"
                            <input id="levelModifyForm"
                                   name="levelName"
                                   type="text"
                                   class="form-control"

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

@@ -108,7 +108,7 @@
                                <ng-dropdown-multiselect class="multiSelect cursor"
                                                         data-input-name="departments"
                                                         selected-model="vm.search.departments"
                                                         options="::vm.departments"></ng-dropdown-multiselect>
                                                         options="vm.departments"></ng-dropdown-multiselect>
                            </div>
                        </div>