# tikops-ux (dvarena enhanced frontend)

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.0.   

향상된 프론트엔드 UI 디자인 및 기능을 구현하기 위한 라이브러리입니다.   

[primeng](https://www.primefaces.org/primeng/) 오픈소스 라이브러리를 확장합니다.   
Copyright (c) 2016-2022 PrimeTek   

<br>

개발 목표
* 디자인 개선 및 통일
* 코드 재사용 (component, 공통 파일)
* 프론트 소스 최소화
* 공통 기능 개선 반영
* 코드 자동화 (snippet, cli, function)

<br>

## How to Use
<hr>
<br>
1. 관련 라이브러리를 설치합니다.

```
npm install primeng
npm install primeicons
npm install primeflex
npm install tikops-ux
```

<br>

2. global style(dv-styles.scss)에 css 파일을 import합니다.

```
@import "../node_modules/primeicons/primeicons.css";
@import "../node_modules/primeng/resources/themes/saga-blue/theme.css";
@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeflex/primeflex.css";
@import "../node_modules/tikops-ux/styles/dv-styles.scss";
```
<br>

* 프론트엔드를 bootstrap > primeflex로 리팩토링하기 전이라면 자동 마이그레이션 스타일 시트도 import합니다.
```
@import "../node_modules/tikops-ux/styles/bootstrap-migration.scss";
```

<br>

3. 라이브러리 모듈을 import합니다.

```
import { DvComponentsModule } from "tikops-ux/components";
@NgModule({
    ...
    imports: [
    ...
    DvComponentsModule
    ],
})
export class MyModule { }
```

<br>


4. 뷰에서 selector로 컴포넌트를 바인딩합니다.

```
<dv-button></dv-button>
```

<br>


5. prefix 사용을 위한 파일을 포함하고 있습니다.
* utils/typescript.code-snippets
<br>

<br>

## Components
<hr>
<br>

### dv-base-modal
<br>

modal 컴포넌트입니다. open close 관련 단축키 기능을 포함합니다.   
primeng [Dialog](https://primefaces.org/primeng/dialog) 확장 컴포넌트입니다.   
<br>

* snippet prefix : dv-base-modal

```
<dv-base-modal #dvModal
    [width]="width"
    [title]="title"
    [errorStatus]="errorStatus"
    [okLabel]="okLabel"
    [okTooltip]="okTooltip"
    [cancelLabel]="cancelLabel"
    [cancelTooltip]="cancelTooltip"
    (handleOpen)="handleOpen()"
    (handleClose)="handleClose()"
    (handleSave)="handleSave()">
    <div contents>
        contents
    </div>
    <ng-template #additionalButtons>
        <dv-button label="Click">
        </dv-button>
    </ng-template>
</dv-base-modal>
```

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|width|DvModalWidth|DvModalWidth.MEDIUM|모달 너비|
|title|string|""|모달 타이틀|
|errorStatus|string|""|저장 오류 시 메시지. 왼쪽 아래 표시|
|okLabel|string|"저 장"|저장 버튼 label|
|okTooltip|string|"작성하신 데이터를 저장합니다.(alt z)"|저장 버튼 tooltip|
|cancelLabel|string|"취 소"|취소 버튼 label|
|cancelTooltip|string|"데이터를 저장하지 않고 팝업을 종료합니다.(alt c)"|취소 버튼 tooltip|
|modal|boolean|true|modal/popup 구분. true면 modal, false면 popup(modaless)|
|isCurrentPopup|boolean|true|dvCom currentPopupPage 지정 여부. true 시 단축키 사용 대상이 됩니다.|
|isFocusButton|boolean|false|ok/cancel 버튼의 autofocus 지정 여부. true 설정 시 팝업이 열릴 때 기본 ok/cancel이 autofocus 대상이 됩니다.|

<br>

#### Events
|이름|파라미터|설명|
|---|---|---|
|handleOpen||모달 오픈 시 발생되는 이벤트|
|handleClose||모달 닫기 시 발생되는 이벤트|
|handleSave||저장 버튼 클릭 시 발생되는 이벤트|

<br>

---

<br>

### dv-page-comment

mainContents 상단 메뉴명과 메뉴 코멘트 컴포넌트입니다.

<br>

* snippet prefix : dv-pc

```
<dv-page-comment
    [menuTitle]="menuTitle"
    [menuComment]="menuComment"
    [commentList]="commentList"
    [menuItems]="menuItems">
</dv-page-comment>
```

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|menuTitle|string|""|메뉴 이름|
|menuComment|string|""|메뉴 설명(주)|
|commentList|string[]|[]|메뉴 설명(부)|
|menuItems|MenuItem[]|[]|primeng api MenuItem 사용. 우측에 표시되는 [Breadcrumb](https://primefaces.org/primeng/breadcrumb) 입니다.|

<br>

***

<br>

### dv-button

primeng [button](https://primefaces.org/primeng/button) 확장 컴포넌트입니다.

<br>

* snippet prefix : dv-btn

```
<dv-button
    label="Click"
    icon="fas fa-pencil-alt"
    tooltip="버튼입니다."
    tooltipPosition="right"
    [additionalClass]="additionalClass"
    [disabled]="false"
    [hidden]="true"
    (handleClick)="handleClick($event)">
</dv-button>
```

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|icon|string|""|icon class (fontawsome)|
|label|string|""|label 이름|
|tooltip|string|""|툴팁 텍스트|
|tooltipPosition|string|"top"|툴팁 표시 방향 (top/bottom/left/right)|
|additionalClass|string|""|추가로 스타일을 적용해야 하는 경우 덧붙일 element class|
|disabled|boolean|false|disabled 여부|
|hidden|boolean|false|hidden 여부|
|autofocus|boolean|false|autofocus 적용 여부|

<br>

#### Events

|이름|파라미터|설명|
|---|---|---|
|handleClick||버튼 클릭 시 발생 이벤트|

<br>

***

<br>

### dv-dropdown

primeng [dropdown](https://primefaces.org/primeng/dropdown) 확장 컴포넌트입니다.

<br>

* snippet prefix : dv-dd

```
<dv-dropdown
    [item]="dropdownItem"
    optionLabel="name"
    [isDisabled]="false"
    styleClass=""
    inputId=""
    [(value)]="currentCode"
    filterBy="name"
    (change)="handleChange($event)"
>
</dv-dropdown>
```
<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|item|DropdownItem<T>|null|필수값. DropdownItem interface 참고|
|optionLabel|string|""|DropdownItem에서 표시되는 옵션명|
|isDisabled|boolean|false|disabled 여부|
|styleClass|string|""|추가 element class|
|inputId|string|""|dropdown id. programmatic focus 등을 위해 추가됨|
|value|string|""|바인딩 값. valueChange와 양방향 바인딩 가능|
|filterBy|string|""|필터링 사용 시 필터 대상 옵션명|

<br>

#### Events
|이름|파라미터|설명|
|---|---|---|
|change|event: T; 선택된 옵션|옵션 선택 이벤트|
|valueChange|event: string; 선택된 옵션 코드|옵션 선택 시 값 변경 이벤트|

<br>

***

<br>


### dv-datepicker

primeng [Calendar](https://primefaces.org/primeng/calendar) 확장 컴포넌트입니다.

<br>

* snippet prefix : dv-dp

```
<dv-datepicker
    [(value)]="dt"
    [tooltipText]="tooltipText"
    [tooltipPosition]="tooltipPosition"
    [mode]="mode"
    [yearRange]="yearRange"
    (change)="handleChange()">
</dv-datepicker>
```
<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|value|DateInfo|null|utils/DateInfo 사용. valueChange 이벤트로 양방향 바인딩 가능|
|tooltipText|string|""|툴팁 텍스트|
|tooltipPosition|string|"top"|툴팁 방향|
|mode|CalendarTypeView|"date"|캘린더 타입. date, month, year|

<br>

#### Events
|이름|파라미터|설명|
|---|---|---|
|valueChange|event: DvDateInfo; 변경된 값|값 변경 이벤트|
|change||날짜 변경 이벤트 (valueChange와 같으나 값 넘기지 않음)|

<br>


***

<br>

### dv-search-input

primeng [InputGroup](https://primefaces.org/primeng/inputgroup) 확장 컴포넌트입니다.

<br>

* snippet prefix : dv-si

```
<dv-search-input
    placeholder="placeholder"
    tooltipText="tooltipText"
    [(value)]="inputValue"
    [isMain]="true"
    (handleClick)="handleClick()">
</dv-search-input>
```

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|placeholder|string|""|placeholder|
|tooltipText|string|""|버튼 tooltip|
|value|string|""|input value|
|isMain|boolean|false|한 페이지에 여러 search-input이 있을 때 autofocus 설정할 main search-input|
|disabled|boolean|false|disabled 여부|

<br>

#### Events

|이름|파라미터|설명|
|---|---|---|
|handleClick||검색 버튼 클릭 시 이벤트|
|valueChange|event: string; 입력된 값|값 변경 시 이벤트|

<br>

***

<br>

### dv-base-table

primeng [Table](https://primefaces.org/primeng/table) 확장 컴포넌트입니다.  
셀 복사/붙여넣기를 지원합니다.

<br>

* snippet prefix : dv-bt

```
<dv-base-table
    [isResizable]="true"
    [items]="viewDatas.getItems()"
    [columnItems]="mainTableInfo.columns"
    [getColumClass]="getColumClass"
    [isEditable]="true"
    [isScroll]="isScroll"
    [scrollHeight]="scrollHeight"
    [dataName]="dataName"
    [mobileColumns]="getMobileColumns()"
    [draggableKey]="draggableKey"
    [droppableKey]="droppableKey"
    [getTdTooltip]="getTdTooltip"
    (setClickedRow)="setClickedRow(event)"
    (editDataCall)="editClick(event)"
    (dragStart)="dragStart(event)"
    (dragEnd)="dragEnd()"
    (dropEnd)="dropEnd(event)">
    <ng-template #additionalTh>
        <th class="text-center bg-table-header" style="width: 70px;">버튼</th>
    </ng-template>
    <ng-template let-row #additionalTd>
        <td class="text-center">
            <dv-button icon="fas fa-cloud-download-alt"></dv-button>
        </td>
    </ng-template>
    <ng-template #additionalThMobile>
        <span>버튼</span>
    </ng-template>
    <ng-template let-row #additionalTdMobile>
        <dv-button icon="fas fa-cloud-download-alt"></dv-button>
    </ng-template>
</dv-base-table>
```

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|isResizable|boolean|true|컬럼 사이즈 조절 기능 사용 여부|
|items|any[]|[]|데이터 리스트|
|columnItems|DvArrayList<DvColumnInfo>|null|표시 컬럼 리스트|
|isEditable|boolean|false|기본 수정 버튼 사용 여부|
|isScroll|boolean|false|테이블 스크롤 true/false<br>true인 경우 scrollHeight 값을 같이 설정<br>frozenColumn을 사용하는 경우에도 true 처리 필요|
|scrollHeight|string|""|테이블의 고정 높이 설정. 단위도 같이 입력 (e.g. 300px)|
|dataName|string|""|모바일 테이블에서 보여줄 타이틀|
|mobileColumns|any[]|[]|모바일 사이즈 테이블에 출력할 데이터. 컬럼 필드명의 리스트|
|draggableKey|string|""|데이터를 드래그 가능한 테이블로 사용 시 설정하는 키 값|
|droppableKey|string|""|드래그 아이템을 드랍 가능한 테이블로 사용 시 설정하는 키 값|
|getColumClass|(row: any, col: DvColumnInfo) => string|null|특정 컬럼의 class 추가|
|getTdTooltip|(row: any, col: DvColumnInfo) => string|null|특정 컬럼의 tooltip 대체|

<br>

#### Events
|이름|파라미터|설명|
|---|---|---|
|setClickedRow|event.index: number; 클릭 row index(row.index가 아닌 for문 index)<br>event.row: any; 클릭된 row<br>event.field: string; 클릭된 column field|row 클릭 시 발생 이벤트|
|editDataCall|event: any; 클릭된 row|수정 버튼 클릭 시 발생 이벤트|
|dragStart|event: any; 선택된 row|draggable 테이블의 아이템 드래그 시 발생 이벤트<br>droppable table과 직접 연결된 것은 아니기 때문에 droppable과 사용 시 해당 아이템을 변수에 넣어둘 필요가 있음|
|dragEnd||drag 중인 아이템을 놓았을 때 발생 이벤트|
|dropEnd|event.event: Event; drop browser Event<br>event.targetIdx: number; 테이블에서 드랍된 위치의 index|droppable 테이블에 아이템 드랍 시 발생 이벤트|
|handleDraggedItems|event: any[]; 드래그 범위 아이템 리스트|드래그 시 발생 이벤트. ROW draggableKey가 있으면 발생하지 않음.|

<br>


***

<br>

### dv-paginator

primeng [Paginator](https://primefaces.org/primeng/paginator) 확장 컴포넌트입니다.

<br>

* snippet prefix : dv-pgn

```
<dv-paginator #pPaginator
    [selectedCount]="selectedCount"
    [pagePerRows]="pagePerRows"
    [totalRows]="totalRows"
    [isSelectable]="true"
    leftText="선택"
    (pageChange)="paginate($event)">
</dv-paginator>
```

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|selectedCount|number|0|선택된 로우 수|
|pagePerRows|number|0|한 페이지에 표시할 로우 수|
|totalRows|number|0|총 로우 수|
|isSelectable|boolean|true|선택 표시 여부|
|leftText|string|"선택"|선택 수량 표시 텍스트|

<br>

#### Events
|이름|파라미터|설명|
|---|---|---|
|pageChange|event.first: number; 첫 번째 로우 index<br>event.rows: number; 페이지에 표시되는 로우 수<br>event.page: number; 변경된 페이지 번호<br>event.pageCount: number; 총 페이지 수|페이지 변경 시 이벤트|

<br>

***

<br>

### dv-search-dynamic

primeng [AutoComplete](https://primeng.org/autocomplete) 확장 컴포넌트입니다.

<br>

* snippet prefix : dv-sd

```
<dv-search-dynamic
    [(value)]="value"
    [searchParams]="searchParams"
    [disabled]="false"
    [config]="searchConfig"
    [cancelText]="cancelText">
</dv-search-dynamic>
```

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|value|any|null|선택 데이터|
|searchParams|any|{}|API Call 시 파라미터|
|disabled|boolean|false|disabled 여부|
|config|DvSearchConfig|null|API Call 설정|
|cancelText|string|"선택 취소"|null 값 반환하는 데이터의 display 텍스트. 빈 문자열 입력 시 null 선택 사라짐|
|inputId|string|""|input의 id값 설정|

<br>

#### Events
|이름|파라미터|설명|
|---|---|---|
|valueChange|event: any; 선택된 데이터|데이터 선택 시 이벤트|

<br>


***

<br>

### dv-sidebar

primeng [Sidebar](https://primeng.org/sidebar) 확장 컴포넌트입니다.

<br>

* snippet prefix : dv-sidebar

```
<dv-sidebar
    [position]="position"
    [(display)]="display"
    [size]="size"
    title="sidebar"
    [leftText]="leftText"
    [okLabel]="okLabel"
    [okTooltip]="okTooltip"
    [cancelLabel]="cancelLabel"
    [cancelTooltip]="cancelTooltip"
    (save)="handleSave()"
    (cancel)="handleCancel()">
    <span contents>
        contents
    </span>
    <ng-template #additionalButtons>
        <dv-button label="Click"></dv-button>
    </ng-template>
</dv-sidebar>
```

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|position|string|"right"|sidebar 위치. left, right, bottom, top|
|display|boolean|false|sidebar show/hide 상태값|
|size|string|"md"|sidebar 크기. sm, md, lg, full|
|title|string|""|제목|
|leftText|string|""|errorStatus 텍스트|
|okLabel|string|"저 장"|기본 저장 버튼 텍스트. 빈 문자열이면 버튼 hidden|
|okTooltip|string|"작성하신 데이터를 저장합니다."|기본 저장 버튼 툴팁 텍스트|
|cancelLabel|string|"취 소"|기본 취소 버튼 텍스트. 빈 문자열이면 버튼 hidden|
|cancelTooltip|string|"데이터를 저장하지 않고 사이드바를 닫습니다."|기본 취소 버튼 툴팁 텍스트|
|modal|boolean|true|modal/modaless 구분. true면 modal, false면 modaless|
|styleObj|object|{}|Inline style of the component|

<br>

#### Events
|이름|파라미터|설명|
|---|---|---|
|displayChange|event: boolean; show/hide 상태값|show/hide 상태 변경 시 이벤트|
|save||저장 버튼 클릭 시 이벤트|
|cancel||취소 버튼 클릭 시 이벤트|

<br>


***

<br>

### dv-overlaypanel

primeng [OverlayPanel](https://primeng.org/overlaypanel) 확장 컴포넌트입니다.
기본 사용은 DvOverlaypanelTableController class를 상속받아 구현합니다. (SampleOverlayComponent 참고)

<br>

* snippet prefix : dv-overlaypanel

```
<dv-overlaypanel #op (onHide)="release()">
    <ng-template pTemplate>
        <dv-base-table
            [items]="viewDatas.getItems()"
            [columnItems]="mainTableInfo.columns"
            [isEditable]="false">
        </dv-base-table>
    </ng-template>
</dv-overlaypanel>
```

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|showCloseIcon|boolean|true|panel 우상단 닫기 버튼 show/hide|
|style|any|null|Inline style of the component.|
|styleClass|string|null|Style class of the component.|

<br>

#### Events
|이름|파라미터|설명|
|---|---|---|
|onShow||show 시 이벤트|
|onHide||hide 시 이벤트|

<br>

---

<br>

## models

<br>

### DropdownItem

|이름|타입|설명|
|---|---|---|
|selected|T|dropdown component의 option list에서 선택된 옵션|
|options|T[]|dropdown component의 option list. 선택 시 selected 값에 바인딩|

<br>

---

<br>

## utils

<br>

### dv-divider

divider의 여백을 0으로 하는 divider styleClass 입니다.

<br>

* snippet prefix : dv-div

```
<p-divider styleClass="dv-divider"></p-divider>
```

<br>

---

<br>

### dv-overlaypanel-table-controller

dv-overlaypanel 내부에 dv-base-table을 사용할 때 테이블 데이터 조작을 위한 추상 클래스입니다.

<br>

#### Properties
|이름|타입|default|설명|
|---|---|---|---|
|op|DvOverlayPanelComponent||ViewChile DvOverlayPanelComponent|
|viewDatas|DvArrayList<T>||테이블에 표시되는 데이터 리스트|
|mainTableInfo|DvTableInfo|null|테이블 컬럼|
|event|any|null|overlaypanel open 클릭 이벤트. overlaypanel 위치 설정을 위해 클릭 이벤트를 꼭 할당할 필요가 있습니다.|