526 lines
17 KiB
HTML
526 lines
17 KiB
HTML
<div class="clr-flex-row clr-form-control m-0">
|
|
<div class="clr-control-container">
|
|
<clr-checkbox-wrapper>
|
|
<input clrCheckbox [(ngModel)]="dynamicWhereClause" type="checkbox" />
|
|
<label class="clr-control-label">Dynamic where clause</label>
|
|
</clr-checkbox-wrapper>
|
|
</div>
|
|
|
|
<div class="clr-control-container ml-15">
|
|
<clr-checkbox-wrapper>
|
|
<input
|
|
clrCheckbox
|
|
[(ngModel)]="usePickers"
|
|
(change)="usePickersChange()"
|
|
type="checkbox"
|
|
id="usePickers"
|
|
/>
|
|
<label class="clr-control-label"> Use pickers </label>
|
|
</clr-checkbox-wrapper>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clr-row">
|
|
<div class="select clr-col-md-2 mb-30">
|
|
<clr-select-container>
|
|
<label>Group logic</label>
|
|
<select
|
|
[disabled]="clauses?.queryObj?.length < 1"
|
|
[(ngModel)]="groupLogic"
|
|
(ngModelChange)="setGroupLogic(groupLogic)"
|
|
clrSelect
|
|
>
|
|
<option
|
|
*ngFor="let logic of logicOperators"
|
|
[selected]="logicOperators[0]"
|
|
>
|
|
{{ logic }}
|
|
</option>
|
|
</select>
|
|
</clr-select-container>
|
|
</div>
|
|
<div class="clr-col-md-10 mb-30">
|
|
<pre class="line-numbers language-markup">
|
|
<div *ngIf="whereClauseLoading" class="progresStatic progress loop">
|
|
<progress></progress>
|
|
</div>
|
|
|
|
<code class="language-sql">{{whereClause}}</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div
|
|
class="clauses-container clr-col-md-12"
|
|
[class.clr-col-md-10]="clauses?.queryObj?.length > 1"
|
|
>
|
|
<div *ngIf="clauses?.queryObj?.length > 1"></div>
|
|
|
|
<div
|
|
class="clause-row"
|
|
*ngFor="let clause of clauses.queryObj; let clauseIndex = index"
|
|
>
|
|
<div class="clr-row" [class.invalid-clause]="clause.invalidClause">
|
|
<div class="clause-logic clr-col-md-2">
|
|
<div class="select">
|
|
<clr-select-container>
|
|
<label>Logic</label>
|
|
|
|
<select
|
|
[(ngModel)]="clause.clauseLogic"
|
|
(ngModelChange)="setLogic()"
|
|
[disabled]="clause.elements.length < 2"
|
|
clrSelect
|
|
>
|
|
<option
|
|
*ngFor="let logic of logicOperators"
|
|
[selected]="logicOperators[0]"
|
|
>
|
|
{{ logic }}
|
|
</option>
|
|
</select>
|
|
</clr-select-container>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<button
|
|
*ngIf="innerWidth > 768"
|
|
class="btn btn-primary btn-block mt-10"
|
|
(click)="addGroupClause()"
|
|
>
|
|
<clr-icon shape="plus"></clr-icon>
|
|
<span>Group</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="clause-query clr-col-md-10">
|
|
<clr-icon
|
|
*ngIf="clauses.queryObj.length > 1"
|
|
(click)="removeGroupClause(clauseIndex)"
|
|
shape="times"
|
|
size="36"
|
|
class="remove-group-clause-button"
|
|
></clr-icon>
|
|
|
|
<div
|
|
class="clr-row"
|
|
*ngFor="let query of clause.elements; let queryIndex = index"
|
|
[class.invalid-clause]="query.invalidClause"
|
|
>
|
|
<!-- VARIABLE -->
|
|
<div class="variable-col form-group clr-col-md-3">
|
|
<div class="datalist-wrapper">
|
|
<app-soft-select
|
|
label="Variable"
|
|
[id]="'select_vals_var_id' + queryIndex + '_' + clauseIndex"
|
|
[inputId]="'vals_var_id' + queryIndex + '_' + clauseIndex"
|
|
[emitOnlySelected]="true"
|
|
[(value)]="query.variable"
|
|
(onInputEvent)="
|
|
variableInputChange(
|
|
query.variable,
|
|
queryIndex,
|
|
clauseIndex,
|
|
$event
|
|
)
|
|
"
|
|
>
|
|
<option *ngFor="let column of cols">
|
|
{{ column.NAME }}
|
|
</option>
|
|
</app-soft-select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OPERATOR -->
|
|
<div class="operator-col form-group clr-col-md-3">
|
|
<clr-select-container>
|
|
<label>Operator</label>
|
|
<select
|
|
[(ngModel)]="query.operator"
|
|
(ngModelChange)="
|
|
setVariableOperator(queryIndex, query.operator, clauseIndex)
|
|
"
|
|
clrSelect
|
|
>
|
|
<option *ngFor="let opr of query.operators">{{ opr }}</option>
|
|
</select>
|
|
</clr-select-container>
|
|
</div>
|
|
|
|
<!-- VALUE -->
|
|
<div
|
|
*ngVar="
|
|
query.ddtype === 'DATE' ||
|
|
query.ddtype === 'DATETIME' ||
|
|
query.ddtype === 'TIME' as isDateTime
|
|
"
|
|
class="value-col form-group clr-col-md-3"
|
|
>
|
|
<div
|
|
*ngIf="query.operator === 'IN' || query.operator === 'NOT IN'"
|
|
class="checkbox-vals"
|
|
>
|
|
<button
|
|
(click)="
|
|
currentQueryIndex = queryIndex;
|
|
currentClauseIndex = clauseIndex
|
|
"
|
|
type="button"
|
|
class="btn btn-link"
|
|
>
|
|
Choose values
|
|
</button>
|
|
<ng-container
|
|
*ngTemplateOutlet="
|
|
checkboxValues;
|
|
context: {
|
|
query: query,
|
|
queryIndex: queryIndex,
|
|
clauseIndex: clauseIndex
|
|
}
|
|
"
|
|
>
|
|
</ng-container>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="
|
|
query.operator !== 'BETWEEN' &&
|
|
query.operator !== 'IN' &&
|
|
query.operator !== 'NOT IN' &&
|
|
query.operator !== 'LIKE' &&
|
|
query.operator !== 'CONTAINS' &&
|
|
query.operator !== 'BEGINS_WITH'
|
|
"
|
|
class="single-field-vals"
|
|
>
|
|
<ng-container
|
|
*ngTemplateOutlet="
|
|
isDateTime && usePickers ? picker : notPicker;
|
|
context: {
|
|
query: query,
|
|
queryIndex: queryIndex,
|
|
clauseIndex: clauseIndex,
|
|
isDateTime: isDateTime
|
|
}
|
|
"
|
|
>
|
|
<!-- Based on check above, here correct ng-template will be put (picker or dropdown) -->
|
|
</ng-container>
|
|
</div>
|
|
|
|
<div *ngIf="query.operator === 'BETWEEN'" class="range-vals">
|
|
<div class="from">
|
|
<ng-container
|
|
*ngTemplateOutlet="
|
|
isDateTime && usePickers ? picker : notPickerRange;
|
|
context: {
|
|
range: 'start',
|
|
query: query,
|
|
queryValueIndex: 0,
|
|
queryIndex: queryIndex,
|
|
clauseIndex: clauseIndex,
|
|
isDateTime: isDateTime
|
|
}
|
|
"
|
|
>
|
|
<!-- Based on check above, here correct ng-template will be put (picker or dropdown) -->
|
|
</ng-container>
|
|
</div>
|
|
|
|
<div class="to">
|
|
<ng-container
|
|
*ngTemplateOutlet="
|
|
isDateTime && usePickers ? picker : notPickerRange;
|
|
context: {
|
|
range: 'end',
|
|
query: query,
|
|
queryValueIndex: 1,
|
|
queryIndex: queryIndex,
|
|
clauseIndex: clauseIndex,
|
|
isDateTime: isDateTime
|
|
}
|
|
"
|
|
>
|
|
<!-- Based on check above, here correct ng-template will be put (picker or dropdown) -->
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="
|
|
query.operator === 'LIKE' ||
|
|
query.operator === 'BEGINS_WITH' ||
|
|
query.operator === 'CONTAINS'
|
|
"
|
|
class="contains-vals"
|
|
>
|
|
<label class="clr-control-label">Value</label>
|
|
|
|
<input
|
|
class="input-val"
|
|
type="text"
|
|
[(ngModel)]="query.value"
|
|
(ngModelChange)="
|
|
setVariableValues($event, queryIndex, clauseIndex)
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clause-buttons clr-col-md-2 btn-group">
|
|
<button
|
|
class="btn btn-warning btn-block"
|
|
(click)="removeClause(queryIndex, clauseIndex)"
|
|
[disabled]="clauses.queryObj[clauseIndex].elements.length === 1"
|
|
>
|
|
<clr-icon shape="minus"></clr-icon>
|
|
<span></span>
|
|
</button>
|
|
|
|
<button
|
|
class="btn btn-success btn-block"
|
|
(click)="addClause(clauseIndex)"
|
|
>
|
|
<clr-icon shape="plus"></clr-icon>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- If type is DATE, DATETIME or TIME -->
|
|
<ng-template
|
|
#picker
|
|
let-query="query"
|
|
let-queryValueIndex="queryValueIndex"
|
|
let-queryIndex="queryIndex"
|
|
let-clauseIndex="clauseIndex"
|
|
>
|
|
<ng-container [ngSwitch]="query.ddtype">
|
|
<ng-container *ngSwitchCase="'DATE'">
|
|
<app-soft-select
|
|
label="Value"
|
|
type="date"
|
|
[disableSoftselect]="true"
|
|
[inputId]="'vals_date' + queryIndex + '_' + clauseIndex"
|
|
[value]="
|
|
queryValueIndex !== undefined
|
|
? (query.value[queryValueIndex] | sasToJsDate)
|
|
: (query.value | sasToJsDate)
|
|
"
|
|
(valueChange)="
|
|
dateChange($event, query, queryIndex, clauseIndex, queryValueIndex)
|
|
"
|
|
>
|
|
<!-- In case we want to enable dropdown on the pickers, uncomment below -->
|
|
<!-- <ng-container *ngFor="let value of query.values">
|
|
<option *ngIf="value.unformatted !== null">
|
|
{{ value.formatted | dateTimeFormatter: 'date' }}
|
|
</option>
|
|
</ng-container> -->
|
|
</app-soft-select>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'DATETIME'">
|
|
<app-soft-select
|
|
label="Value"
|
|
type="date"
|
|
[disableSoftselect]="true"
|
|
[inputId]="'vals_date' + queryIndex + '_' + clauseIndex"
|
|
[value]="
|
|
queryValueIndex !== undefined
|
|
? (query.value[queryValueIndex] | sasToJsDate: 'seconds')
|
|
: (query.value | sasToJsDate: 'seconds')
|
|
"
|
|
(valueChange)="getQueryDateTime(clauseIndex, queryIndex).date = $event"
|
|
(onInputEvent)="
|
|
dateTimeChange(query, queryIndex, clauseIndex, queryValueIndex)
|
|
"
|
|
>
|
|
<!-- In case we want to enable dropdown on the pickers, uncomment below -->
|
|
<!-- <ng-container *ngFor="let value of query.values">
|
|
<option *ngIf="value.unformatted !== null">
|
|
{{ value.formatted | dateTimeFormatter: 'date' }}
|
|
</option>
|
|
</ng-container> -->
|
|
</app-soft-select>
|
|
|
|
<app-soft-select
|
|
type="time"
|
|
[disableSoftselect]="true"
|
|
[inputId]="'vals_time' + queryIndex + '_' + clauseIndex"
|
|
[value]="
|
|
queryValueIndex !== undefined
|
|
? (query.value[queryValueIndex] | sasToJsDate: 'seconds' : true)
|
|
: (query.value | sasToJsDate: 'seconds' : true)
|
|
"
|
|
(valueChange)="getQueryDateTime(clauseIndex, queryIndex).time = $event"
|
|
(onInputEvent)="
|
|
dateTimeChange(query, queryIndex, clauseIndex, queryValueIndex)
|
|
"
|
|
>
|
|
<!-- In case we want to enable dropdown on the pickers, uncomment below -->
|
|
<!-- <ng-container *ngFor="let value of query.values">
|
|
<option *ngIf="value.unformatted !== null">
|
|
{{ value.formatted | dateTimeFormatter: 'time' }}
|
|
</option>
|
|
</ng-container> -->
|
|
</app-soft-select>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'TIME'">
|
|
<app-soft-select
|
|
label="Value"
|
|
type="time"
|
|
[disableSoftselect]="true"
|
|
[inputId]="'vals_' + queryIndex + '_' + clauseIndex"
|
|
[value]="
|
|
queryValueIndex !== undefined
|
|
? (query.value[queryValueIndex] | secondsParser)
|
|
: (query.value | secondsParser)
|
|
"
|
|
(onInputEvent)="
|
|
timeChange($event, query, queryIndex, clauseIndex, queryValueIndex)
|
|
"
|
|
>
|
|
<!-- In case we want to enable dropdown on the pickers, uncomment below -->
|
|
<!-- <ng-container *ngFor="let value of query.values">
|
|
<option *ngIf="value.unformatted !== null">
|
|
{{ value.formatted | dateTimeFormatter: 'time' }}
|
|
</option>
|
|
</ng-container> -->
|
|
</app-soft-select>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-template>
|
|
|
|
<ng-template
|
|
#notPicker
|
|
let-isDateTime="isDateTime"
|
|
let-query="query"
|
|
let-queryIndex="queryIndex"
|
|
let-clauseIndex="clauseIndex"
|
|
>
|
|
<app-soft-select
|
|
label="Value"
|
|
[secondLabel]="'Variable'"
|
|
[emitOnlySelected]="query.valueVariable"
|
|
[inputId]="'vals_' + queryIndex + '_' + clauseIndex"
|
|
(selectedLabelChange)="selectedLabelChange($event, query)"
|
|
[(value)]="query.value"
|
|
[enableLoadMore]="query.nobs > query.values.length"
|
|
(onInputEvent)="
|
|
setVariableValues($event.target.value, queryIndex, clauseIndex)
|
|
"
|
|
(onAutocompleteLoadingMore)="
|
|
onAutocompleteLoadingMore($event, query.variable, queryIndex, clauseIndex)
|
|
"
|
|
>
|
|
<div *ngIf="!query.valueVariable">
|
|
<option [value]="column.unformatted" *ngFor="let column of query.values">
|
|
{{ column.formatted.trim() }}
|
|
</option>
|
|
</div>
|
|
|
|
<div *ngIf="query.valueVariable">
|
|
<ng-container *ngFor="let column of cols">
|
|
<option [value]="column.NAME" *ngIf="column.TYPE === query.type">
|
|
{{ column.NAME }}
|
|
</option>
|
|
</ng-container>
|
|
</div>
|
|
</app-soft-select>
|
|
</ng-template>
|
|
|
|
<ng-template
|
|
#notPickerRange
|
|
let-range="range"
|
|
let-query="query"
|
|
let-queryValueIndex="queryValueIndex"
|
|
let-queryIndex="queryIndex"
|
|
let-clauseIndex="clauseIndex"
|
|
>
|
|
<app-soft-select
|
|
label="Value"
|
|
[inputId]="'vals-' + range + '_' + queryIndex + '_' + clauseIndex"
|
|
[(value)]="query.value[queryValueIndex]"
|
|
[enableLoadMore]="query.nobs > query.values.length"
|
|
(onInputEvent)="setVariableValues(query.value, queryIndex, clauseIndex)"
|
|
(onAutocompleteLoadingMore)="
|
|
onAutocompleteLoadingMore($event, query.variable, queryIndex, clauseIndex)
|
|
"
|
|
[disabled]="
|
|
queryValueIndex !== undefined
|
|
? range !== 'start'
|
|
? !query.value[0]
|
|
: false
|
|
: false
|
|
"
|
|
>
|
|
<option [value]="column.formatted" *ngFor="let column of query.values">
|
|
{{ column.formatted }}
|
|
</option>
|
|
</app-soft-select>
|
|
</ng-template>
|
|
|
|
<ng-template
|
|
#checkboxValues
|
|
let-query="query"
|
|
let-queryIndex="queryIndex"
|
|
let-clauseIndex="clauseIndex"
|
|
>
|
|
<clr-modal
|
|
[clrModalOpen]="
|
|
currentQueryIndex === queryIndex && currentClauseIndex === clauseIndex
|
|
"
|
|
[clrModalClosable]="false"
|
|
class="in-values-modal"
|
|
>
|
|
<h3 class="modal-title">Select values</h3>
|
|
<div class="modal-body">
|
|
<h5 *ngIf="!isArr(query.value)" class="no-values">
|
|
No values available.
|
|
</h5>
|
|
|
|
<section class="form-block" *ngIf="isArr(query.value)">
|
|
<clr-checkbox-container>
|
|
<clr-checkbox-wrapper
|
|
*ngFor="let column of query.values; let i = index"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
clrCheckbox
|
|
[(ngModel)]="query.value[i].checked"
|
|
(ngModelChange)="
|
|
setVariableValues($event, queryIndex, clauseIndex)
|
|
"
|
|
/>
|
|
|
|
<label>
|
|
{{ column.formatted }}
|
|
</label>
|
|
</clr-checkbox-wrapper>
|
|
</clr-checkbox-container>
|
|
</section>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
(click)="currentQueryIndex = -1; currentClauseIndex = -1"
|
|
type="button"
|
|
class="btn btn-outline"
|
|
>
|
|
Apply
|
|
</button>
|
|
</div>
|
|
</clr-modal>
|
|
</ng-template>
|