트랜잭션 서비스 클래스 계층

Transaction, State, Transaction Log

트랜잭션은 트랜잭션 서비스의 주요 구성 요소입니다. 트랜잭션은 실제로 데이터에 대해 실행하는 모든 작업입니다. Transaction 인터페이스는 id, newValue 및 type의 세 가지 속성을 정의합니다.

트랜잭션의 id 데이터 레코드별로 고유해야 하며 이 트랜잭션이 영향을 미치는 레코드를 정의합니다. type 실행하는 작업에 따라 ADD, DELETE 및 UPDATE의 세 가지 트랜잭션 유형 중 하나일 수 있습니다. newValue 에는 ADD 트랜잭션을 추가하는 경우 새 레코드의 값이 포함됩니다. 기존 레코드를 업데이트하는 경우 newValue 변경 사항만 포함됩니다. 동일한 ID를 가진 UPDATE 유형의 트랜잭션이 여러 개 있을 수 있습니다. 레코드를 삭제하는 경우 newValue 삭제된 레코드의 값이 포함됩니다.

트랜잭션 서비스 사용 방법 항목에서 각 트랜잭션 유형을 추가하는 방법에 대한 예를 볼 수 있습니다.

트랜잭션을 추가할 때마다 트랜잭션 로그 및 실행 취소 스택에 추가됩니다. 그러면 트랜잭션 로그의 모든 변경 사항이 레코드별로 누적됩니다. 이 시점부터 서비스는 집계된 State 유지합니다. State 고유한 레코드로 구성되며 모든 레코드는 위에서 언급한 지원되는 거래 유형 중 하나일 수 있습니다.

거래를 추가하는 동안 다음을 호출하여 보류 중인 거래를 설정할 수 있습니다. startPending. 모든 후속 거래는 귀하가 전화할 때까지 단일 거래로 누적됩니다. endPending. 합격하면 true에게 endPending 누적된 모든 트랜잭션은 트랜잭션 로그와 실행 취소 스택에 단일 트랜잭션으로 추가됩니다.

Using igxBaseTransaction

우리의 그리드 모듈은 행 편집 기능을 허용하는 보류 중인 세션 기능을 사용하여 트랜잭션 서비스(igxBaseTransactionService)의 매우 기본적인 구현을 제공합니다. startPending 및 endPending 행 편집을 사용하면 여러 셀별 작업을 단일 변경 사항으로 결합할 수 있습니다. 이는 단일 레코드의 여러 셀을 편집하면 단일 트랜잭션이 생성되고 행 편집 이벤트만 처리할 수 있음을 의미합니다.

누적된 상태가 부분 개체이므로 서비스를 사용하여 어떤 셀이 편집되었는지 확인하고 해당 셀을 중심으로 UI를 구축할 수도 있습니다.

igxBaseTransactionService 에는 실행 취소 스택이 없으므로 실행 취소/다시 실행 기능을 제공하지 않습니다.

igxBaseTransactionService 사용하여 행 편집을 활성화하는 방법에 대한 자세한 예는 다음 주제에서 제공됩니다.

General information on igxTransactionService and igxHierarchicalTransactionService

igxTransactionService 및 igxHierarchicalTransactionService는 Transaction Service 인터페이스를 구현하는 삽입 가능한 미들웨어입니다. 구성 요소는 이를 사용하여 기본 데이터에 영향을 주지 않고 변경 사항을 누적할 수 있습니다. 공급자는 데이터에 대한 하나 또는 모든 변경 사항에 액세스하고, 조작 (실행 취소 및 다시 실행)하고, 삭제하거나 커밋하기 위해 API를 노출합니다.

보다 구체적인 예에서 igxTransactionService 및 igxHierarchicalTransactionService IgxGrid의 셀 편집 및 행 편집 모두에 사용할 수 있습니다. 셀 편집을 위한 트랜잭션은 셀 편집 모드를 종료할 때 추가됩니다. 행 편집이 시작되면 그리드는 startPending 호출하여 트랜잭션 서비스를 보류 상태로 설정합니다. 편집된 각 셀은 보류 중인 트랜잭션 로그에 추가되며 기본 트랜잭션 로그에는 추가되지 않습니다. 행이 편집 모드를 종료하면 모든 변경 사항이 기본 트랜잭션 로그와 실행 취소 로그에 단일 트랜잭션으로 추가됩니다.

두 경우 모두(셀 편집 및 행 편집) 그리드 편집 상태는 업데이트, 추가 및 삭제된 모든 행과 마지막 상태로 구성됩니다. 나중에 한 번에 또는 ID별로 검사, 조작 및 제출할 수 있습니다. 변경 사항은 편집 모드에 따라 개별 셀이나 행에 대해 수집되고 데이터 행/레코드별로 누적됩니다.

Using igxTransactionService

igxTransactionService igxBaseTransactionService 확장합니다.

데이터 작업을 수행할 때 구성 요소가 트랜잭션을 사용하도록 하려면 다음을 정의해야 합니다. igxTransactionService 구성 요소의 공급자로서 providers 정렬.

igxTransactionService는 실행 취소 스택을 제공하므로 실행 취소/다시 실행 기능을 활용할 수 있습니다. 실행 취소 스택은 실제로 트랜잭션 배열을 포함하는 배열입니다. igxTransactionService 사용할 때 Undo 스택에 트랜잭션이 있는지 이해하기 위해 canUndo 접근자를 확인할 수 있습니다. 있는 경우 undo 메소드를 사용하여 마지막 트랜잭션을 제거하고 redo 마지막 실행 취소된 트랜잭션을 적용할 수 있습니다.

다음 주제에서 일괄 편집 기능을 갖춘 igxGrid가 구현되는 방법에 대한 자세한 예를 찾을 수 있습니다.

그리드 일괄 편집

Using igxHierarchicalTransactionService

igxHierarchicalTransactionService igxTransactionService 확장합니다.

igxHierarchicalTransactionService는 상위와 하위 간의 관계를 처리하도록 설계되었습니다(예를 들어 igxTreeGrid와 같이 계층적 데이터 구조가 있는 경우 이 서비스를 사용하세요). 이 서비스는 ADD 트랜잭션을 추가할 때 예상한 위치에 새 레코드가 추가되도록 보장합니다. 상위 레코드를 삭제하면 해당 하위 항목이 더 높은 수준의 계층 구조로 승격되거나 구현에 따라 상위 레코드와 함께 삭제됩니다. 구체적인 예를 보려면 트리 그리드의 cascadeOnDelete 속성을 볼 수 있습니다. 값에 따라 상위 레코드를 삭제하면 하위 레코드에 다른 영향을 미칩니다.

애플리케이션에서 사용자가 이미 삭제되어 트랜잭션이 커밋되기를 기다리고 있는 상위 레코드에 하위 레코드를 추가하려고 시도하는 시나리오를 처리할 수 있습니다. Transaction Service에서는 삭제될 상위 레코드에 레코드를 추가하는 것을 허용하지 않으며 콘솔에 오류 메시지가 표시됩니다. 그러나 다음 코드를 사용하여 상위 요소가 삭제되는지 확인하고 사용자에게 경고를 구현할 수 있습니다.

    const state = this.transactions.getState(parentRecordID);
    if (state && state.type === TransactionType.DELETE) {
        // Implement your logic here
    }

다음 주제에서 일괄 편집 기능을 갖춘 igxTreeGrid 및 igxHierarchicalGrid 구현되는 방법에 대한 자세한 예를 찾을 수 있습니다.

Transaction Factory

Ignite UI for Angular 내부 트랜잭션의 구체적인 구현에서는 그리드 값에 따라 적절한 트랜잭션 서비스를 인스턴스화하기 위해 팩토리가 사용됩니다. batchEditing. 두 개의 별도 트랜잭션 팩토리가 있습니다. IgxFlatTransactionFactory (사용 Grid 그리고 Hierarchical Grid) 그리고 IgxHierarchicalTransactionFactory (사용 트리 그리드). 두 클래스 모두 하나의 메서드만 노출합니다. create- 적절한 새 인스턴스를 반환합니다. 유형. 매개변수가 전달되었습니다(TRANSACTION_TYPE)은 내부적으로 사용됩니다 -None 다음과 같은 경우에 사용됩니다. batchEditing ~이다 거짓 그리고 Base- 일괄 편집이 활성화된 경우. 안 enum 사용됩니다(대신 true-false 플래그)에 따라 확장이 가능합니다.

Using Transaction Factory

IgxFlatTransactionFactory 및 IgxHierarchicalTransactionFactory 모두 root에서 제공되며 공용 API에 노출됩니다. 임의의 검사에 따라 트랜잭션 서비스의 새 인스턴스를 인스턴스화하려는 경우 트랜잭션 팩토리를 사용할 수 있습니다.

아래 예에서는 임의(hasUndo) 플래그에 따라 다양한 트랜잭션 서비스를 인스턴스화하는 방법을 볼 수 있습니다.

import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from 'igniteui-angular';
// import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from '@infragistics/igniteui-angular'; for licensed package

export class MyCustomComponent {
    ...
    constructor(private transactionFactory: IgxFlatTransactionFactory) {}
    ...
    public transaction!: IgxTransactionService<Transaction, State>;

    public set hasUndo(val: boolean) {
        if (val) {
            this.transactions = this.transactionFactory.create(TRANSACTION_TYPE.Base);
        } else {
            this.transactions = this.transactionFactory.create(TRANSACTION_TYPE.None);
        }
    }
}

사용자 정의 구현을 제공하기 위해 두 팩토리 클래스 모두 DI 계층 구조(providers 배열 사용)에서 확장 및 재정의될 수 있습니다. 이는 팩토리에 의해 인스턴스화되는 모든 클래스가 공개라는 사실과 결합되어 내부적으로 트랜잭션 구현을 사용하는 구성 요소에 제공되는 내용에 대한 많은 제어를 제공합니다.

예를 들어 IgxGridComponent에서 내부적으로 사용하는 트랜잭션 서비스를 재정의하려면 다음을 수행할 수 있습니다.

먼저 사용자 정의 팩토리 클래스를 정의합니다.

import { IgxFlatTransactionFactory, TRANSACTION_TYPE, IgxBaseTransactionService,
TransactionService, Transaction, State } from 'igniteui-angular';
// import { IgxFlatTransactionFactory, TRANSACTION_TYPE, IgxBaseTransactionService,
// TransactionService, Transaction, State } from '@infragistics/igniteui-angular'; for licensed package

class CustomTransactionService extends IgxBaseTransactionService {
    ...
}

export class CustomTransactionFactory extends IgxFlatTransactionFactory {
    ...
    create(type: TRANSACTION_TYPE): TransactionService<Transaction, State> {
        if (type === TRANSACTION_TYPE.Base) {
            return new CustomTransactionService();
        }
        super.create(type);
    }
}

그런 다음 구성 요소의 providers 배열에서 IgxFlatTransactionFactory (igx-grid에서 사용)를 사용자 정의 구현으로 재정의합니다.

import { IgxFlatTransactionFactory } from 'igniteui-angular';
// import { IgxFlatTransactionFactory } from '@infragistics/igniteui-angular'; for licensed package
import { CustomTransactionFactory } from '../custom-factory.ts';

@Component({
    selector: 'app-grid-view',
    template: `<igx-grid [batchEditing]="true" [data]="data" [autoGenerate]="true"></igx-grid>`,
    providers: [{ provide: IgxFlatTransactionFactory, useClass: CustomTransactionFactory }]
})

export class GridViewComponent {
    ...
}

이제 batchEditing true로 설정되면 그리드는 CustomTransactionService의 인스턴스를 수신하게 됩니다.