299 lines
10 KiB
HTML
299 lines
10 KiB
HTML
|
<div class="container">
|
||
|
|
<div class="gnb">
|
||
|
|
<mat-toolbar>logo</mat-toolbar>
|
||
|
|
<mat-tab-group
|
||
|
|
mat-stretch-tabs
|
||
|
|
animationDuration="0ms"
|
||
|
|
backgroundColor="transparent"
|
||
|
|
class="global-menu"
|
||
|
|
[selectedIndex]="2"
|
||
|
|
>
|
||
|
|
<mat-tab aria-label="Group">
|
||
|
|
<ng-template mat-tab-label>
|
||
|
|
<div class="icon-item" matTooltip="그룹" matTooltipPosition="after">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="24"
|
||
|
|
height="24"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="1.5"
|
||
|
|
stroke-linecap="butt"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
>
|
||
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||
|
|
<circle cx="12" cy="7" r="4"></circle>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
</mat-tab>
|
||
|
|
<mat-tab aria-label="Chat">
|
||
|
|
<ng-template mat-tab-label>
|
||
|
|
<div
|
||
|
|
class="icon-item"
|
||
|
|
matBadgeHidden="false"
|
||
|
|
matBadge="275"
|
||
|
|
matBadgeColor="accent"
|
||
|
|
matBadgePosition="above after"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="24"
|
||
|
|
height="24"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="#000000"
|
||
|
|
stroke-width="1.5"
|
||
|
|
stroke-linecap="butt"
|
||
|
|
stroke-linejoin="bevel"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
</mat-tab>
|
||
|
|
<mat-tab aria-label="Organization">
|
||
|
|
<ng-template mat-tab-label>
|
||
|
|
<div class="icon-item">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="24"
|
||
|
|
height="24"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="#000000"
|
||
|
|
stroke-width="1.5"
|
||
|
|
stroke-linecap="butt"
|
||
|
|
stroke-linejoin="bevel"
|
||
|
|
>
|
||
|
|
<circle class="st0" cx="18.4" cy="18.5" r="3" />
|
||
|
|
<circle class="st0" cx="12" cy="5" r="3" />
|
||
|
|
<path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
|
||
|
|
<circle class="st0" cx="6.1" cy="18.5" r="3" />
|
||
|
|
<path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
|
||
|
|
<line class="st0" x1="12" y1="8" x2="12" y2="9" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
</mat-tab>
|
||
|
|
|
||
|
|
<mat-tab aria-label="Message">
|
||
|
|
<ng-template mat-tab-label>
|
||
|
|
<div class="icon-item">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="24"
|
||
|
|
height="24"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="#000000"
|
||
|
|
stroke-width="1.5"
|
||
|
|
stroke-linecap="butt"
|
||
|
|
stroke-linejoin="bevel"
|
||
|
|
>
|
||
|
|
<polygon
|
||
|
|
points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
</mat-tab>
|
||
|
|
</mat-tab-group>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="menu-container">
|
||
|
|
<div class="contents">
|
||
|
|
<mat-drawer-container class="example-container" style="height: 600px;">
|
||
|
|
<mat-drawer #rightSideDrawer mode="side" opened style="width: 400px;">
|
||
|
|
<mat-toolbar>
|
||
|
|
<div>Organization</div>
|
||
|
|
<div></div>
|
||
|
|
</mat-toolbar>
|
||
|
|
<div class="list-section">
|
||
|
|
<div class="title-section">
|
||
|
|
<div class="title">
|
||
|
|
<h3>조직도</h3>
|
||
|
|
<div class="btn-box">
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
[matMenuTriggerFor]="menu"
|
||
|
|
aria-label="group menu"
|
||
|
|
>
|
||
|
|
<mat-icon>more_vert</mat-icon>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="list"><app-tree></app-tree></div>
|
||
|
|
</div>
|
||
|
|
</mat-drawer>
|
||
|
|
<!-- (click)="onClickToggle($event)" -->
|
||
|
|
<mat-drawer-content style="width: 500px;">
|
||
|
|
<mat-toolbar>
|
||
|
|
<div><span>Today</span>2020.05.05</div>
|
||
|
|
<div>
|
||
|
|
<div class="app-layout-native-title-bar-actions">
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
class="button app-layout-native-title-bar-minimize"
|
||
|
|
>
|
||
|
|
<!--<mat-icon>minimize</mat-icon>-->
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="20"
|
||
|
|
height="20"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="butt"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
>
|
||
|
|
<line x1="5" y1="18" x2="19" y2="18"></line>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
class="button app-layout-native-title-bar-maximize"
|
||
|
|
>
|
||
|
|
<ng-container [ngSwitch]="'Maximized'">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="20"
|
||
|
|
height="20"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="butt"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
*ngSwitchCase="'Maximized'"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
class="st0"
|
||
|
|
d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
class="st0"
|
||
|
|
d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="20"
|
||
|
|
height="20"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="butt"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
*ngSwitchDefault
|
||
|
|
>
|
||
|
|
<rect
|
||
|
|
x="5"
|
||
|
|
y="5"
|
||
|
|
width="12"
|
||
|
|
height="12"
|
||
|
|
rx="2"
|
||
|
|
ry="2"
|
||
|
|
></rect>
|
||
|
|
</svg>
|
||
|
|
</ng-container>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
class="button app-layout-native-title-bar-close"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="20"
|
||
|
|
height="20"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="butt"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
>
|
||
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</mat-toolbar>
|
||
|
|
<div class="contents-main">
|
||
|
|
<!-- search start-->
|
||
|
|
<div fxLayout="column" fxFlex="1 1 auto" class="ingegrated-search">
|
||
|
|
<div class="org-search-container">
|
||
|
|
<mat-form-field class="example-full-width" appearance="none">
|
||
|
|
<mat-select placeholder="전체">
|
||
|
|
<mat-option
|
||
|
|
*ngFor="let searchItem of searchItemList"
|
||
|
|
[value]="searchItem"
|
||
|
|
>
|
||
|
|
{{ searchItem.itemName }}
|
||
|
|
</mat-option>
|
||
|
|
</mat-select>
|
||
|
|
</mat-form-field>
|
||
|
|
<mat-form-field>
|
||
|
|
<input matInput placeholder="검색어를 입력하세요." />
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
*ngIf="true"
|
||
|
|
class="icon-button font-accent-color"
|
||
|
|
aria-label="Clear"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="20"
|
||
|
|
height="20"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="butt"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
>
|
||
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
|
|
</svg>
|
||
|
|
<!-- <mat-icon>close</mat-icon> -->
|
||
|
|
<!-- <i class="mdi mdi-close">X</i> -->
|
||
|
|
</button>
|
||
|
|
</mat-form-field>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- search end-->
|
||
|
|
<!-- content table start-->
|
||
|
|
<app-organization-detail-table></app-organization-detail-table>
|
||
|
|
<!-- content table end-->
|
||
|
|
contents area
|
||
|
|
</div>
|
||
|
|
</mat-drawer-content>
|
||
|
|
</mat-drawer-container>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<div>
|
||
|
|
<span>현재버전 0.0.11</span>
|
||
|
|
<span>최신버전 0.0.11</span>
|
||
|
|
</div>
|
||
|
|
<div style="right: 0;">
|
||
|
|
HelpDesk 1661-9066
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<mat-menu #menu="matMenu">
|
||
|
|
<button mat-menu-item>Item 1</button>
|
||
|
|
<button mat-menu-item>Item 2</button>
|
||
|
|
</mat-menu>
|