이슈 상세 연관,하위 테이블 표시 설정 - [프론트]

wyu

2021-11-24 b69416fc721e8f0eb478536bf0d98ae3f6c4811e

 src/main/webapp/views/issue/issueDetail.html

@@ -53,7 +53,7 @@
        </div>
    </div>
-->
    <!-- 테이블 -->
<!-- 테이블 -->
<!--
    <div class="support-ticket ">
        <div class="st-body">
@@ -64,7 +64,7 @@
        </div>
    </div>
-->
    <!--    페이징 -->
<!--    페이징 -->
<!--
    <div class="controls-below-table text-center">
        <ul uib-pagination
@@ -86,15 +86,21 @@
<!--    상세 화면   -->
<div class="support-ticket-content-w" ng-controller="issueDetailController">
    <div class="support-ticket-content">
        <div class="support-ticket-content-header issue-detail-word-break">
            <h3 class="ticket-header">
                <div class="tasks-header-w mb-10">
        <span ng-if="vm.viewer.parentIssueVo != null" class="badge" ng-style="{'background-color' : vm.viewer.issueStatusVo.color, 'border-color' : vm.viewer.issueStatusVo.color, 'color' : '#FFFFFF' }">
            <span>상위 이슈:{{vm.viewer.parentIssueVo.title}}</span>
        </span>

        <div class="">
            <span class="h3-div">{{vm.viewer.title}}</span>
        </div>
        <div class="support-ticket-content-header issue-detail-word-break" style="height: 5vh">
            <span class="ticket-header">
                <div class="tasks-header-w">
                    <span class="tags">
                        <span class="tag">{{vm.viewer.projectVo.projectKey}}-{{vm.viewer.issueNumber}} &nbsp; / &nbsp; {{vm.viewer.projectVo.name}}</span>
                    </span>
                </div>
                {{vm.viewer.title}}
            </h3>
            </span>

            <a class="show-ticket-info cursor">
                <i class="os-icon os-icon-email-forward mr-20" ng-click="fn.sendMail(vm.viewer.id, vm.viewer.projectVo.id)" data-toggle="tooltip" data-placement="right" title="다른 사용자에게 이슈 보내기"></i>
@@ -106,163 +112,312 @@
                <span class="issue-close" ng-click="fn.listView()"><i class="os-icon os-icon-close" data-toggle="tooltip" data-placement="left" title="상세 화면 닫기"></i></span>
            </a>
        </div>

        <label class="issue-detail-label"><span translate="issue.issueType">이슈 유형</span> </label>
        <span class="status-pill smaller"
              ng-style="{'background-color': vm.viewer.issueTypeVo.color }"></span><span>{{vm.viewer.issueTypeVo.name}}</span>
        <span class="offset-1"> {{vm.viewer.registerDate}}</span>
        <label class="issue-detail-label offset-1"><span translate="common.register">등록자</span></label>
        <span class="select3-selection__choice">
            <span class="avatar-w"><img ng-src="{{vm.viewer.registerVo.profile}}"></span>
            <span>{{vm.viewer.registerVo.byName}}</span>
        </span>
        <div class="ticket-thread">
            <div class="todo-content">
                <h6 class="todo-content-subheader mt-20" translate="common.detailInformation">상세 정보</h6>
                <h6 class="todo-content-subheader" translate="issue.issueInfo">이슈 정보</h6>
                <div class="row mt-20">
                    <div class="col-md-4">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-xxl-12">
                                    <div class="form-group">
                                        <label class="issue-detail-label"><span translate="common.assigneeTeam">담당부서</span> </label>
                                        <div class="">
                                            <div class="select3-selection__choicediv">
                                                <span class="select3-selection__choice" ng-repeat="department in vm.viewer.departmentVos">
                                                    <span>{{::department.byName}}</span>
                                                </span>

                                                <span ng-if="vm.viewer.departmentVos.length < 1" translate="common.noDepartment">담당부서가 없습니다.</span>
                                                            <i class="fa fa-edit fa-2x issue-status-edit cursor"
                                                               ng-click="fn.modifyIssueDepartment()" data-toggle="tooltip" data-placement="right" title="담당자 변경 하기"></i>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label class="issue-detail-label"><span translate="common.period">기간</span></label>
                                    <div class="">
                                        <span translate="{{vm.viewer.startDate}}"></span> ~ <span
                                            translate="{{vm.viewer.completeDate}}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="issue-detail-label"><span translate="common.importance">중요도</span></label>
                            <label class="issue-detail-label offset-1"><span translate="common.priority">우선 순위</span></label>
                            <label class="issue-detail-label offset-1"><span translate="issue.issueStatus">이슈 상태</span></label>
                            <div class="">
                                    <span class="badge"
                                          ng-style="{'background-color' : vm.viewer.severityVo.color, 'border-color' : vm.viewer.severityVo.color, 'color' : '#FFFFFF' }"
                                          translate="{{vm.viewer.severityVo.name}}"></span>
                            </div>
                        </div>
                    </div>
                                <span class="badge" ng-style="{'background-color' : vm.viewer.severityVo.color, 'border-color' : vm.viewer.severityVo.color, 'color' : '#FFFFFF' }" translate="{{vm.viewer.severityVo.name}}"></span>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="issue-detail-label"><span translate="common.priority">우선 순위</span></label>
                            <div class="">
                                    <span class="badge"
                                          ng-style="{'background-color' : vm.viewer.priorityVo.color, 'border-color' : vm.viewer.priorityVo.color, 'color' : '#FFFFFF' }"
                                          translate="{{vm.viewer.priorityVo.name}}"></span>
                            </div>
                        </div>
                    </div>
                                <span class="badge offset-1" ng-style="{'background-color' : vm.viewer.priorityVo.color, 'border-color' : vm.viewer.priorityVo.color, 'color' : '#FFFFFF' }" translate="{{vm.viewer.priorityVo.name}}"></span>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="issue-detail-label"><span translate="issue.issueStatus">이슈 상태</span></label>
                            <!--    권한을 갖고 있을 때 -->
                            <div ng-if="vm.viewer.modifyPermissionCheck">
                                <span class="editForm badge mr-5"
                                      ng-style="{'background-color' : vm.viewer.issueStatusVo.color, 'border-color' : vm.viewer.issueStatusVo.color, 'color' : '#FFFFFF' }">{{vm.viewer.issueStatusVo.name}}</span>
                                <i class="fa fa-edit fa-2x issue-status-edit cursor"
                                   ng-click="fn.modifyIssueStatus()" data-toggle="tooltip" data-placement="right" title="일감 상태 변경 하기"></i>
                            </div>

                            <!--    권한이 없을 때    -->
                            <div ng-if="!vm.viewer.modifyPermissionCheck">
                                <span class="editForm badge mr-5"
                                      ng-style="{'background-color' : vm.viewer.issueStatusVo.color, 'border-color' : vm.viewer.issueStatusVo.color, 'color' : '#FFFFFF' }">{{vm.viewer.issueStatusVo.name}}</span>
                                <!--    권한을 갖고 있을 때 -->
                                <span ng-if="vm.viewer.modifyPermissionCheck">
                                    <span class="editForm badge mr-5 offset-1" ng-style="{'background-color' : vm.viewer.issueStatusVo.color, 'border-color' : vm.viewer.issueStatusVo.color, 'color' : '#FFFFFF' }">{{vm.viewer.issueStatusVo.name}}</span><i class="fa fa-edit fa-2x issue-status-edit cursor" ng-click="fn.modifyIssueStatus()" data-toggle="tooltip" data-placement="right" title="일감 상태 변경 하기"></i>
                                </span>
                                <!--    권한이 없을 때    -->
                                <span ng-if="!vm.viewer.modifyPermissionCheck">
                                    <span class="editForm badge mr-5 offset-1" ng-style="{'background-color' : vm.viewer.issueStatusVo.color, 'border-color' : vm.viewer.issueStatusVo.color, 'color' : '#FFFFFF' }">{{vm.viewer.issueStatusVo.name}}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="issue-detail-label"><span translate="issue.issueType">이슈 타입</span> </label>
                            <div class="">
                                <span class="status-pill smaller"
                                      ng-style="{'background-color': vm.viewer.issueTypeVo.color }"></span><span>{{vm.viewer.issueTypeVo.name}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="issue-detail-label"><span translate="common.period">기간</span></label>
                            <div class="">
                                <span translate="{{vm.viewer.startDate}}"></span> ~ <span
                                    translate="{{vm.viewer.completeDate}}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="issue-detail-label"><span translate="common.changeDate">변경일</span> </label>
                            <div class="">
                                {{vm.viewer.modifyDate}}
                            </div>
                            <h6 class="info_font" translate="common.detectingInfo">탐지정보</h6>
                        </div>
                    </div>
                </div>

                <!-- 사용자 정의 필드 -->
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="issue-detail-label"><span translate="common.registrationDate">등록일</span>
                            </label>
                            <div class="">
                                {{vm.viewer.registerDate}}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="issue-detail-label"><span translate="common.register">등록자</span></label>
                            <div class="">
                                <div class="select3-selection__choicediv">
                                    <span class="select3-selection__choice">
                                        <span class="avatar-w"><img ng-src="{{vm.viewer.registerVo.profile}}"></span>
                                        <span>{{vm.viewer.registerVo.byName}}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xxl-12">
                        <div class="form-group">
                            <label class="issue-detail-label"><span translate="common.assigneeTeam">담당부서</span> </label>
                            <div class="">
                                <div class="select3-selection__choicediv">
                                    <span class="select3-selection__choice" ng-repeat="user in vm.viewer.userVos">
                                        <span class="avatar-w"><img ng-src="{{::user.profile}}"></span>
                                        <span>{{::user.byName}}</span>
                                    </span>

                                    <span ng-if="vm.viewer.userVos.length < 1" translate="common.noAssignee">
                                        담당자가 없습니다.
                                    </span>
                                    <i class="fa fa-edit fa-2x issue-status-edit cursor"
                                       ng-click="fn.modifyIssueUser()" data-toggle="tooltip" data-placement="right" title="담당자 변경 하기"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4" ng-repeat="issueCustomField in vm.viewer.issueCustomFields">
                    <div class="col-md-2" ng-repeat="issueCustomField in vm.viewer.issueCustomFields">
                        <label class="issue-detail-label">{{::issueCustomField.customFieldVo.name}}</label>

                        <div ng-switch on="issueCustomField.customFieldVo.customFieldType">
                            <!-- 기본 입력 -->
                            <div ng-switch-when="INPUT" class="form-group">
                            <div ng-switch-when="INPUT">
                                <!--    읽기 모드   -->
                                <span class="issue-detail-word-break">{{::issueCustomField.useValues}}</span>
                                <span ng-if="!$root.isDefined(issueCustomField.useValues)">-</span>
                            </div>

                            <!-- 단일 셀렉트 -->
                            <div ng-switch-when="SINGLE_SELECT" class="form-group">
                            <div ng-switch-when="SINGLE_SELECT">
                                <span class="issue-detail-word-break">{{::issueCustomField.useValues}}</span>
                                <span ng-if="!$root.isDefined(issueCustomField.useValues)">-</span>
                            </div>

                            <!-- 멀티 셀렉트 -->
                            <div ng-switch-when="MULTI_SELECT" class="form-group">
                            <div ng-switch-when="MULTI_SELECT">
                                <span class="issue-detail-word-break"
                                      ng-repeat="useValue in issueCustomField.useValues">{{::useValue.value}}, </span>
                                ng-repeat="useValue in issueCustomField.useValues">{{::useValue.value}}, </span>
                                <span ng-if="!$root.isDefined(issueCustomField.useValues)">-</span>
                            </div>
                        </div>
                    </div>
                </div>

                <h6 class="todo-content-subheader mt-20" translate="issue.relationIssue">연관 일감</h6>
                <!--    테이블 -->
                           <!-- <div class="">
                                <label class="issue-detail-label"><span>{{vm.viewer.issueCustomFieldValueVos[0].useValue}}</span> </label>
                                <div class="">
                                    <span>{{vm.viewer.issueCustomFieldValueVos[0].customFieldVo.name}}</span>
                                </div>
                                <span ng-if="vm.viewer.userVos.length < 1" translate="common.noAssignee">담당자가 없습니다.</span>
                            </div>-->
                <hr>
<!--                <span class="tag">{{vm.viewer.projectVo.projectKey}}-{{vm.viewer.issueNumber}} &nbsp; / &nbsp; {{vm.viewer.projectVo.name}}</span>-->
                <div class="row">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <h6 class="info_font" translate="companyField.info">업체정보</h6>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <span translate="companyField.companyName">업체명</span>:
                            <span>{{vm.viewer.issueCompanyVos[0].name}}</span>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="companyField.manager">담당자</span>:
                                <span>{{vm.viewer.issueCompanyVos[0].manager}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="companyField.tel">전화번호</span>:
                                <span>{{vm.viewer.issueCompanyVos[0].tel}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="companyField.email">이메일</span>:
                                <span class="email_color">{{vm.viewer.issueCompanyVos[0].email}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="companyField.memo">비고</span>:
                                <span>{{vm.viewer.issueCompanyVos[0].memo}}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <h6 class="info_font" translate="ispField.info">ISP정보</h6>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <span translate="ispField.ispName">ISP명</span>:
                            <span>{{vm.viewer.issueIspVos[0].name}}</span>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <span translate="ispField.code">코드</span>:
                            <span>{{vm.viewer.issueIspVos[0].code}}</span>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="ispField.manager">담당자</span>:
                                <span>{{vm.viewer.issueIspVos[0].manager}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="ispField.tel">전화번호</span>:
                                <span>{{vm.viewer.issueIspVos[0].tel}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="ispField.email">이메일</span>:
                                <span class="email_color">{{vm.viewer.issueIspVos[0].email}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="ispField.memo">비고</span>:
                                <span>{{vm.viewer.issueIspVos[0].memo}}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <h6 class="info_font" translate="hostingField.info">호스팅정보</h6>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <span translate="hostingField.hostingName">호스팅명</span>:
                            <span>{{vm.viewer.issueHostingVos[0].name}}</span>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <span translate="hostingField.code">코드</span>:
                            <span>{{vm.viewer.issueHostingVos[0].code}}</span>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="hostingField.manager">담당자</span>:
                                <span>{{vm.viewer.issueHostingVos[0].manager}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="hostingField.tel">전화번호</span>:
                                <span>{{vm.viewer.issueHostingVos[0].tel}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="hostingField.email">이메일</span>:
                                <span class="email_color">{{vm.viewer.issueHostingVos[0].email}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div class="form-group">
                            <div class="">
                                <span translate="hostingField.memo">비고</span>:
                                <span>{{vm.viewer.issueHostingVos[0].memo}}</span>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="row mt-30">
                    <div class="col-md-10">
                        <span class="info_font h3" translate="issue.relationIssue">연관 이슈</span>
                    </div>
                    <div class="col-md-1">
                        <button class="btn btn-darkgrey offset-12" ng-click="fn.addRelationIssueTableConfig()" type="button"><span translate="issue.settingTableDisplay">테이블 표시 설정</span></button>
                    </div>
                </div>

                <!--  연관 이슈 테이블 -->
                <div class="mt-10 issue-detail-word-break width-100">
                    <js-table data="vm.viewer.issueRelationVos" table-configs="vm.relTableConfigs"
                                  event="relTableEvent" detail-view="true" hide-header="false" use-sort="false"></js-table>
                              event="relTableEvent" detail-view="true" hide-header="false" use-sort="false"></js-table>

                    <div class="row">
                        <div class="col-sm-4">
@@ -291,14 +446,22 @@
                        <div class="col-auto vertical-middle">
                            <button type="button" class="btn btn-primary form-control input-sm"
                                    ng-click="fn.addRelationIssue()"
                                    translate="issue.addRelationIssue">추가</button>
                                    translate="issue.addRelationIssue">연관 이슈 추가</button>
                        </div>

                    </div>
                </div>

                <h6 class="todo-content-subheader mt-20" translate="issue.downIssue">하위 일감</h6>
                <!--    테이블 -->
                <div class="row mt-30">
                    <div class="col-md-10">
                        <span class="info_font h3" translate="issue.downIssue">하위 이슈</span>
                    </div>
                    <div class="col-md-1">
                        <button class="btn btn-darkgrey offset-12"  ng-click="fn.addDownIssueTableConfig()" type="button"><span translate="issue.settingTableDisplay">테이블 표시 설정</span></button>
                    </div>
                </div>

                <!-- 하위 이슈 테이블 -->
                <div class="mt-10 issue-detail-word-break width-100">
                    <js-table data="vm.viewer.issueDownVos" table-configs="vm.downTableConfigs"
                              event="downTableEvent" detail-view="true" hide-header="false" use-sort="false"></js-table>
@@ -325,7 +488,7 @@
                    </div>
                </div>

                <h6 class="todo-content-subheader mt-20" translate="common.content">내용</h6>
                <h6 class="todo-content-subheader mt-30" translate="common.content">내용</h6>
                <div class="box mt-10 issue-detail-word-break width-100" >
                    <div ng-bind-html="$root.$sce.trustAsHtml(vm.viewer.description)"></div>
                    <span class="fc-grey" ng-if="!$root.isDefined(vm.viewer.description)" translate="common.noContent">
@@ -517,6 +680,9 @@
                                         translate="common.noRecord">
                                        기록이 없습니다.
                                    </div>
                                    <div>
                                        {{vm.viewer.issueHistoryVos}}
                                    </div>

                                    <div class="activity-item"
                                         ng-repeat="issueHistory in vm.viewer.issueHistoryVos">
@@ -536,4 +702,4 @@
            </div>
        </div>
    </div>
</div>
</div>