src/ClientApp/app/components/database/create.page.html
<database-nav [dbid]="db?.id" [dbname]="db?.name" current="{{ 'db.nav.CreatePage' | translate }}"></database-nav>
<div class="panel panel-default">
<div class="panel-heading">
<ng-container *ngIf="enableCodeMode">
<button *ngIf="!codeMode" type="button" (click)="gotoCode()" class="btn btn-primary btn-xs pull-right">{{ 'db.create.GotoCode' | translate }}</button>
<button *ngIf="codeMode" type="button" (click)="gotoGui()" class="btn btn-primary btn-xs pull-right">{{ 'db.create.GotoGui' | translate }}</button>
</ng-container>
<h3 class="panel-title">{{ 'db.create.PageTitle' | translate }}</h3>
</div>
<div *ngIf="codeMode" class="panel-body">
<textarea class="form-control" rows="24" [(ngModel)]="code"></textarea>
</div>
<div *ngIf="!codeMode" class="panel-body panel-container">
<div class="form-horizontal">
<div class="form-group">
<label for="inputTxType" class="col-sm-2 control-label">{{ 'db.create.TxType' | translate }}</label>
<div class="col-sm-10">
<select id="inputTxType" [(ngModel)]="selectedType" class="form-control">
<option value="schema">{{ 'db.create.SchemaTx' | translate }}</option>
<option value="data">{{ 'db.create.DataTx' | translate }}</option>
<option value="lock">{{ 'db.create.LockTx' | translate }}</option>
</select>
</div>
</div>
<div *ngIf="loaded" class="list-group">
<!--schema tx-->
<ng-container *ngIf="selectedType=='schema'">
<div class="list-group-item" *ngFor="let action of schemaActions; let idx = index">
<small>
<span class="text-muted">{{ 'db.create.schema.IndexTitle' | translate: {number: idx + 1} }}</span>
</small>
<small class="pull-right">
<a href="javascript:void(0)" (click)="removeAction(schemaActions, idx)">
<span class="glyphicon glyphicon-remove"></span>
{{ 'db.create.schema.DeleteButtonText' | translate }}
</a>
|
<a href="javascript:void(0)" (click)="duplicateAction(schemaActions, idx)">
<span class="glyphicon glyphicon-copy"></span>
{{ 'db.create.schema.DuplicateButtonText' | translate }}
</a>
</small>
<div class="form-group">
<label for="inputActionType" class="col-sm-2 control-label">{{ 'db.create.schema.TypeLabel' | translate }}</label>
<div class="col-sm-10">
<select id="inputActionType" [(ngModel)]="action.type" class="form-control">
<option value="create">{{ 'db.create.schema.CreateAction' | translate }}</option>
<option value="modify">{{ 'db.create.schema.ModifyAction' | translate }}</option>
<option value="drop">{{ 'db.create.schema.DropAction' | translate }}</option>
</select>
</div>
</div>
<!--common for update/drop action-->
<ng-container *ngIf="action.type=='drop' || action.type=='modify'">
<div class="form-group">
<label for="selectSchemaTableName" class="col-sm-2 control-label">{{ 'db.create.schema.TableNameLabel' | translate }}</label>
<div class="col-sm-10">
<select id="selectSchemaTableName" [(ngModel)]="action.tableName" class="form-control">
<option *ngFor="let table of tables" [value]="table.Name">{{table.Name}}</option>
</select>
</div>
</div>
</ng-container>
<!--create action-->
<ng-container *ngIf="action.type=='create'">
<div class="form-group">
<label for="inputSchemaTableName" class="col-sm-2 control-label">{{ 'db.create.schema.TableNameLabel' | translate }}</label>
<div class="col-sm-10">
<input [(ngModel)]="action.tableName" type="text" class="form-control" id="inputSchemaTableName"
placeholder="{{ 'db.create.schema.TableNamePlaceholder' | translate }}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">{{ 'db.create.schema.ColumnsLabel' | translate }}</label>
<div class="col-sm-10">
<ng2-smart-table [settings]="createSchemaActionDef" [source]="action.columns"></ng2-smart-table>
</div>
</div>
</ng-container>
<!--update action-->
<ng-container *ngIf="action.type=='modify'">
<div class="form-group">
<label class="col-sm-2 control-label">{{ 'db.create.schema.AddOrModifyColumns' | translate }}</label>
<div class="col-sm-10">
<ng2-smart-table [settings]="updateModifySchemaActionDef" [source]="action.modifyColumns"></ng2-smart-table>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">{{ 'db.create.schema.DropColumns' | translate }}</label>
<div class="col-sm-10">
<ng2-smart-table [settings]="updateDropSchemaActionDef" [source]="action.dropColumns"></ng2-smart-table>
</div>
</div>
</ng-container>
<!--drop action-->
<!--<ng-container *ngIf="action.type=='drop'">
</ng-container>-->
</div>
</ng-container>
<!--data tx-->
<ng-container *ngIf="selectedType=='data'">
<div class="list-group-item" *ngFor="let action of dataActions; let idx = index">
<small>
<span class="text-muted">{{ 'db.create.data.IndexTitle' | translate: {number: idx + 1} }}</span>
</small>
<small class="pull-right">
<a href="javascript:void(0)" (click)="removeAction(dataActions, idx)">
<span class="glyphicon glyphicon-remove"></span>
{{ 'db.create.data.DeleteButtonText' | translate }}
</a>
|
<a href="javascript:void(0)" (click)="duplicateAction(dataActions, idx)">
<span class="glyphicon glyphicon-copy"></span>
{{ 'db.create.data.DuplicateButtonText' | translate }}
</a>
</small>
<div class="form-group">
<label for="inputActionType" class="col-sm-2 control-label">{{ 'db.create.data.TypeLabel' | translate }}</label>
<div class="col-sm-10">
<select id="inputActionType" [(ngModel)]="action.type" class="form-control">
<option value="insert">{{ 'db.create.data.InsertAction' | translate }}</option>
<option value="update">{{ 'db.create.data.UpdateAction' | translate }}</option>
<option value="delete">{{ 'db.create.data.DeleteAction' | translate }}</option>
</select>
</div>
</div>
<!--common for all action-->
<div class="alert alert-warning" *ngIf="!action.type">{{ 'db.create.data.NoActionTypeWarning' | translate }}</div>
<ng-container *ngIf="action.type">
<div class="form-group">
<label for="selectDataTableName" class="col-sm-2 control-label">{{ 'db.create.data.TableNameLabel' | translate }}</label>
<div class="col-sm-10">
<select id="selectDataTableName" [(ngModel)]="action.tableName" class="form-control">
<option *ngFor="let table of tables" [value]="table.Name">{{table.Name}}</option>
</select>
</div>
</div>
<div class="alert alert-warning" *ngIf="!action.tableName">{{ 'db.create.data.NoTableNameWarning' | translate }}</div>
</ng-container>
<ng-container *ngIf="action.tableName">
<!--pk value for update/delete action-->
<ng-container *ngIf="action.type=='update' || action.type=='delete'">
<div class="form-group">
<label class="col-sm-2 control-label">{{ 'db.create.data.PkValueLabel' | translate }}</label>
<div class="col-sm-10">
<input [(ngModel)]="action.pkval" type="text" class="form-control">
</div>
</div>
</ng-container>
<!--column for update/insert action-->
<ng-container *ngIf="action.type=='insert' || action.type=='update'">
<div class="well">
<div class="form-group form-group-sm form-group-compact"
[class.has-success]="col==highlightColumn && idx==0"
[class.has-feedback]="col==highlightColumn && idx==0"
*ngFor="let col of dataActionColumns[action.tableName]">
<label class="col-sm-2 control-label">{{col}}</label>
<div class="col-sm-10">
<input [(ngModel)]="action.columns[col]" type="text" class="form-control">
<span *ngIf="col==highlightColumn && idx==0" class="glyphicon glyphicon-hand-left form-control-feedback" aria-hidden="true"></span>
</div>
</div>
</div>
</ng-container>
</ng-container>
</div>
</ng-container>
<!--lock tx-->
<ng-container *ngIf="selectedType=='lock'">
<div class="form-group">
<label for="inputLockScripts" class="col-sm-2 control-label">{{ 'db.create.lock.LockScriptsLabel' | translate }}</label>
<div class="col-sm-10">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#lockSelect" role="tab" data-toggle="tab">{{ 'db.create.lock.TabSelectTitle' | translate }}</a></li>
<li role="presentation"><a href="#lockManual" role="tab" data-toggle="tab">{{ 'db.create.lock.TabManualTitle' | translate }}</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="lockSelect">
<div class="help-block"></div>
<div class="col-xs-6">
<div class="panel panel-success">
<div class="panel-heading">{{ 'db.create.lock.LockEnableKeyListTitle' | translate }}</div>
<div class="list-group drag-list-group" [dragula]="'lock-drag-bag'" [dragulaModel]="lockEnableKeys">
<div class="list-group-item" *ngFor="let text of lockEnableKeys" [innerHtml]="text.name"></div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-warning">
<div class="panel-heading">{{ 'db.create.lock.LockCandidateKeyListTitle' | translate }}</div>
<div class="list-group drag-list-group" [dragula]="'lock-drag-bag'" [dragulaModel]="lockCandidateKeys">
<div class="list-group-item" *ngFor="let text of lockCandidateKeys" [innerHtml]="text.name"></div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="lockManual">
<textarea #lockScriptsTextBox class="form-control" rows="7" [(ngModel)]="lockScripts"></textarea>
<div class="help-block">
<a href="javascript:void(0)" (click)="example('single')">{{ 'db.create.lock.SingleUserLockExample' | translate }}</a>
|
<a href="javascript:void(0)" (click)="example('multiple')">{{ 'db.create.lock.MultipleUserLockExample' | translate }}</a>
|
<div class="btn-group">
<button type="button" class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ 'db.create.lock.InsertAddressButtonText' | translate }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li *ngFor="let key of keyList">
<a href="javascript:void(0)" (click)="insert(key.pubKey)">{{key.name}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item" *ngFor="let target of lockTargets; let idx = index">
<small>
<span class="text-muted">{{ 'db.create.lock.IndexTitle' | translate: {number: idx + 1} }}</span>
</small>
<small class="pull-right">
<a href="javascript:void(0)" (click)="removeAction(lockTargets, idx)">
<span class="glyphicon glyphicon-remove"></span>
{{ 'db.create.lock.DeleteButtonText' | translate }}
</a>
|
<a href="javascript:void(0)" (click)="duplicateAction(lockTargets, idx)">
<span class="glyphicon glyphicon-copy"></span>
{{ 'db.create.lock.DuplicateButtonText' | translate }}
</a>
</small>
<div class="form-group">
<label for="inputLockTarget" class="col-sm-2 control-label">{{ 'db.create.lock.LockTargetLabel' | translate }}</label>
<div class="col-sm-10">
<select id="inputLockTarget" [(ngModel)]="target.type" class="form-control">
<option value="database">{{ 'db.create.lock.DatabaseType' | translate }}</option>
<option value="schema">{{ 'db.create.lock.TableSchemaType' | translate }}</option>
<option value="row">{{ 'db.create.lock.TableRowDataType' | translate }}</option>
<option value="cell">{{ 'db.create.lock.TableCellDataType' | translate }}</option>
<option value="column">{{ 'db.create.lock.TableColumnDataType' | translate }}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">{{ 'db.create.lock.PublicPermissionLabel' | translate }}</label>
<div class="col-sm-10">
<label *ngFor="let permission of permissionList" class="checkbox-inline" data-toggle="tooltip" data-placement="top" title="{{permission.desc}}">
<input type="checkbox" [ngModel]="target.permissions?.indexOf(permission.value) > -1" (ngModelChange)="onPermissionChange(target, permission.value,$event)"> {{permission.name}}
</label>
</div>
</div>
<!--common for all action-->
<!--<div class="alert alert-warning" *ngIf="!target.type">请先选择操作类型</div>-->
<ng-container *ngIf="target.type && target.type != 'database'">
<div class="form-group">
<label for="selectDataTableName" class="col-sm-2 control-label">{{ 'db.create.lock.TableNameLabel' | translate }}</label>
<div class="col-sm-10">
<select id="selectDataTableName" [(ngModel)]="target.tableName" class="form-control">
<option *ngFor="let table of tables" [value]="table.Name">{{table.Name}}</option>
</select>
</div>
</div>
<!--<div class="alert alert-warning" *ngIf="!action.tableName">请先选择操作表格</div>-->
</ng-container>
<ng-container *ngIf="target.tableName">
<!--pk value for row/cell target-->
<ng-container *ngIf="target.type=='row' || target.type=='cell'">
<div class="form-group">
<label class="col-sm-2 control-label">{{ 'db.create.lock.PkValueLabel' | translate }}</label>
<div class="col-sm-10">
<input [(ngModel)]="target.pkval" type="text" class="form-control">
</div>
</div>
</ng-container>
<!--column for cell/column action-->
<ng-container *ngIf="target.type=='cell' || target.type == 'column'">
<div class="form-group">
<label for="selectColumnName" class="col-sm-2 control-label">{{ 'db.create.lock.ColumnNameLabel' | translate }}</label>
<div class="col-sm-10">
<select id="selectColumnName" [(ngModel)]="target.col" class="form-control">
<option *ngFor="let col of dataActionColumns[target.tableName]" [value]="col">{{col}}</option>
</select>
</div>
</div>
</ng-container>
</ng-container>
</div>
</ng-container>
<button *ngIf="selectedType" type="button" class="list-group-item" (click)="appendAction()">
<span class="glyphicon glyphicon-plus"></span>
<ng-container [ngSwitch]="selectedType">
<ng-template [ngSwitchCase]="'data'">
{{ 'db.create.data.AppendButtonText' | translate }}
</ng-template>
<ng-template [ngSwitchCase]="'schema'">
{{ 'db.create.schema.AppendButtonText' | translate }}
</ng-template>
<ng-template [ngSwitchCase]="'lock'">
{{ 'db.create.lock.AppendButtonText' | translate }}
</ng-template>
</ng-container>
</button>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-2 control-label">
<input type="checkbox" [(ngModel)]="enableUnlockScripts">
{{ 'db.create.unlock.UnlockScriptsLabel' | translate }}
</label>
<div class="col-sm-10">
<ng-container *ngIf="enableUnlockScripts">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#unlockSelect" role="tab" data-toggle="tab">{{ 'db.create.unlock.TabSelectTitle' | translate }}</a></li>
<li role="presentation"><a href="#unlockManual" role="tab" data-toggle="tab">{{ 'db.create.unlock.TabManualTitle' | translate }}</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="unlockSelect">
<select class="form-control" [(ngModel)]="selectedUnlockKey">
<option *ngFor="let key of keyList" value="{{key.name}}">{{key.name}}</option>
</select>
</div>
<div role="tabpanel" class="tab-pane fade" id="unlockManual">
<textarea #unlockScriptsTextBox class="form-control" rows="7" [(ngModel)]="unlockScripts"></textarea>
</div>
</div>
</ng-container>
</div>
</div>
</div>
<div class="panel-footer text-right text-center-xs">
<div class="form-inline">
<div class="form-group">
<label for="inputPrivateKey">{{ 'db.create.key.PrivatekeyLabel' | translate }}</label>
<select id="inputPrivateKey" class="form-control" (change)="onPrivateKeyChange($event.target.value)" [(ngModel)]="selectedPrivateKey">
<optgroup label="{{ 'db.create.key.StoredPrivateKeyGroup' | translate }}">
<option *ngFor="let key of keyList" value="{{key.name}}">{{key.name}}</option>
</optgroup>
<optgroup label="{{ 'db.create.key.OtherKeyGroup' | translate }}">
<option value="import">{{ 'db.create.key.ImportOption' | translate }}</option>
<!--<option value="manage">{{ 'db.create.key.ManageOption' | translate }}</option>-->
</optgroup>
</select>
</div>
<input *ngIf="selectedPrivateKey == 'import'" [(ngModel)]="inputPrivateKey" type="text" class="form-control">
<button type="button" class="btn btn-primary btn-block-xs" [class.disabled]="codeMode" (click)="submit()">{{ 'db.create.SubmitTx' | translate }}</button>
</div>
</div>
</div>