Files
redash/client/app/visualizations/table/table-editor.html

174 lines
8.4 KiB
HTML

<div class="table-editor-container">
<ul class="tab-nav">
<li ng-class="{active: $ctrl.currentTab == 'columns'}" ng-if="$ctrl.options.globalSeriesType != 'custom'">
<a ng-click="$ctrl.setCurrentTab('columns')">Columns</a>
</li>
<li ng-class="{active: $ctrl.currentTab == 'grid'}">
<a ng-click="$ctrl.setCurrentTab('grid')">Grid</a>
</li>
</ul>
<div ng-if="$ctrl.currentTab == 'grid'" class="m-t-10 m-b-10">
<div class="form-group">
<label>Items per page</label>
<select ng-options="value for value in $ctrl.allowedItemsPerPage"
ng-model="$ctrl.options.itemsPerPage" class="form-control">
</select>
</div>
</div>
<div ng-if="$ctrl.currentTab == 'columns'" class="table-editor-query-columns m-t-10 m-b-10"
ui-sortable ng-model="$ctrl.options.columns">
<div ng-repeat="column in $ctrl.options.columns">
<div class="table-editor-column-header form-group">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" ng-model="column.visible"></span>
<input class="form-control" ng-model="column.title" ng-model-options="{ allowInvalid: true, debounce: 200 }">
</div>
</div>
<div class="form-group">
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-default btn-xs"
ng-click="column.alignContent = 'left'"
ng-class="{active: column.alignContent == 'left'}"><i class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-default btn-xs"
ng-click="column.alignContent = 'center'"
ng-class="{active: column.alignContent == 'center'}"><i class="fa fa-align-center"></i></button>
<button type="button" class="btn btn-default btn-xs"
ng-click="column.alignContent = 'right'"
ng-class="{active: column.alignContent == 'right'}"><i class="fa fa-align-right"></i></button>
</div>
</div>
<div class="form-group">
<label class="ui-sortable-bypass"><input type="checkbox" ng-model="column.allowSearch"> Use for search</label>
</div>
<div class="form-group">
<label>Display as:</label>
<select ng-options="item.value as item.name for item in $ctrl.displayAsOptions"
ng-model="column.displayAs" class="form-control">
</select>
</div>
<div ng-if="column.displayAs == 'string'">
<div class="form-group">
<label class="ui-sortable-bypass"><input type="checkbox" ng-model="column.allowHTML"> Allow HTML content</label>
</div>
<div ng-if="column.allowHTML" class="form-group">
<label class="ui-sortable-bypass"><input type="checkbox" ng-model="column.highlightLinks"> Highlight links</label>
</div>
</div>
<div ng-if="column.displayAs == 'number'">
<div class="form-group">
<label for="table-editor-{{ column.name }}-number-format">
Number format
<span class="m-l-5"
uib-popover-html="'Format <a href=&quot;https://redash.io/help/user-guide/visualizations/formatting-numbers&quot; target=&quot;_blank&quot;>specs.</a>'"
popover-trigger="'click outsideClick'"><i class="fa fa-question-circle"></i></span>
</label>
<input class="form-control" ng-model="column.numberFormat" ng-model-options="{ allowInvalid: true, debounce: 200 }"
id="table-editor-{{ column.name }}-number-format">
</div>
</div>
<div ng-if="column.displayAs == 'datetime'">
<div class="form-group">
<label for="table-editor-{{ column.name }}-datetime-format">
Date/Time format
<span class="m-l-5"
uib-popover-html="'Format <a href=&quot;https://momentjs.com/docs/#/displaying/format/&quot; target=&quot;_blank&quot;>specs.</a>'"
popover-trigger="'click outsideClick'"><i class="fa fa-question-circle"></i></span>
</label>
<input class="form-control" ng-model="column.dateTimeFormat" ng-model-options="{ allowInvalid: true, debounce: 200 }"
id="table-editor-{{ column.name }}-datetime-format">
</div>
</div>
<div ng-if="column.displayAs == 'boolean'">
<div class="form-group">
<label for="table-editor-{{ column.name }}-boolean-false">Value for <code>false</code></label>
<input class="form-control" ng-model="column.booleanValues[0]" ng-model-options="{ allowInvalid: true, debounce: 200 }"
id="table-editor-{{ column.name }}-boolean-false">
</div>
<div class="form-group">
<label for="table-editor-{{ column.name }}-boolean-true">Value for <code>true</code></label>
<input class="form-control" ng-model="column.booleanValues[1]" ng-model-options="{ allowInvalid: true, debounce: 200 }"
id="table-editor-{{ column.name }}-boolean-true">
</div>
</div>
<div ng-if="column.displayAs == 'image'">
<div class="form-group">
<label for="table-editor-{{ column.name }}-image-url-template">URL template</label>
<input class="form-control" ng-model="column.imageUrlTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
id="table-editor-{{ column.name }}-image-url-template">
</div>
<div class="form-group">
<label>
Size
<span class="m-l-5"
uib-popover-html="'Any positive integer value that specifies size in pixels. Leave empty to use default value.'"
popover-trigger="'click outsideClick'" popover-placement="top-left"><i class="fa fa-question-circle"></i></span>
</label>
<div class="d-flex">
<input class="form-control" ng-model="column.imageWidth" ng-model-options="{ allowInvalid: true, debounce: 200 }"
placeholder="Width">
<span class="form-control-static m-l-5 m-r-5">&times;</span>
<input class="form-control" ng-model="column.imageHeight" ng-model-options="{ allowInvalid: true, debounce: 200 }"
placeholder="Height">
</div>
</div>
<div class="form-group">
<label for="table-editor-{{ column.name }}-image-title-template">Title template</label>
<input class="form-control" ng-model="column.imageTitleTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
id="table-editor-{{ column.name }}-image-title-template">
</div>
<div class="form-group">
<label class="ui-sortable-bypass text-muted" style="font-weight: normal; cursor: pointer;"
uib-popover-html="templateHint"
popover-trigger="'click outsideClick'" popover-placement="top-left">
Format specs <i class="fa fa-question-circle m-l-5"></i>
</label>
</div>
</div>
<div ng-if="column.displayAs == 'link'">
<div class="form-group">
<label for="table-editor-{{ column.name }}-link-url-template">URL template</label>
<input class="form-control" ng-model="column.linkUrlTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
id="table-editor-{{ column.name }}-link-url-template">
</div>
<div class="form-group">
<label for="table-editor-{{ column.name }}-link-text-template">Text template</label>
<input class="form-control" ng-model="column.linkTextTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
id="table-editor-{{ column.name }}-link-text-template">
</div>
<div class="form-group">
<label for="table-editor-{{ column.name }}-link-title-template">Title template</label>
<input class="form-control" ng-model="column.linkTitleTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
id="table-editor-{{ column.name }}-link-title-template">
</div>
<div class="form-group">
<label class="ui-sortable-bypass"><input type="checkbox" ng-model="column.linkOpenInNewTab"> Open in new tab</label>
</div>
<div class="form-group">
<label class="ui-sortable-bypass text-muted" style="font-weight: normal; cursor: pointer;"
uib-popover-html="templateHint"
popover-trigger="'click outsideClick'" popover-placement="top-left">
Format specs <i class="fa fa-question-circle m-l-5"></i>
</label>
</div>
</div>
</div>
</div>
</div>