<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<div ng-controller="CubeDimensionsCtrl">
<ng-form name="forms.cube_dimension_form" novalidate>
<!-- Dimensions Summary -->
    <div class="dataTables_wrapper form-inline no-footer">
        <div class="row">
            <div class="col-xs-6" ng-if="state.mode=='edit'">
                <button type="button" class="btn btn-default" ng-disabled="!metaModel.model.fact_table.length||instance.status=='READY'"
                        ng-click="openAutoGenModal()" >
                    <i class="fa fa-building-o"></i> Add Dimensions
                </button>
            </div>
            <div ng-class="(state.mode=='edit')?'col-xs-6':'col-xs-12'">
                <span class="pull-right input-icon input-icon-right nav-search" style="margin-left: 22px;">
                    <input type="text" placeholder="Filter ..." class="nav-search-input" ng-model="dimState.filter"/>
                    <i class="ace-icon fa fa-search nav-search-icon"></i>
                </span>
            </div>
        </div>
        <table class="table table-striped table-hover" ng-if="cubeMetaFrame.dimensions.length > 0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Table Alias</th>
                    <th>Type</th>
                    <th>Column</th>
                    <th ng-if="state.mode=='edit'">Actions</th>
                </tr>
            </thead>
            <tbody class="cube-dimension">
                <tr ng-repeat="dimension in cubeMetaFrame.dimensions | filter:dimState.filter track by $index">
                    <!--ID -->
                    <td>
                        <b>{{($index + 1)}}</b>
                    </td>
                    <!--Name -->
                    <td>
                        <span>{{dimension.name}}</span>
                    </td>
                    <!--Table Name -->
                    <td>
                        <span>{{dimension.table}}</span>
                    </td>
                    <!--Type-->
                    <td>
                        <span class="label label-primary" ng-repeat="t in getDimType(dimension)">{{t}}</span>
                    </td>
                    <!--Columns-->
                    <td>
                        <div ng-repeat="t in getDimType(dimension)">
                            <div ng-switch="t">
                                <span  ng-switch-when="derived">
                                    {{dimension.derived}}
                                </span>
                                <span ng-switch-when="normal">
                                    {{dimension.column}}
                                </span>
                            </div>
                        </div>
                    </td>
                    <td ng-if="state.mode=='edit'">
                        <!--edit button-->
                        <button class="btn btn-xs btn-info" ng-disabled="instance.status=='READY'"
                                ng-click="editDim(dimension)"><i class="fa fa-pencil"></i>
                        </button>
                        <!-- remove button-->
                        <button class="btn btn-xs btn-danger" ng-disabled="instance.status=='READY'"
                                ng-click="removeDim(dimension)"><i class="fa fa-trash-o"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="space-16"></div>
    <div class="callout callout-warning dimensions-conflict-area" ng-if="dimConflicts.length">
        <h4>There are following columns defined in multiple dimensions. <small>This is not recommended!</small></h4>
        <div class="row" ng-repeat="c in dimConflicts">
            <div class="col-xs-3">
                <code>{{c.table}}.{{c.column}}</code>
            </div>
            <div class="col-xs-3">
                <ul class="list-unstyled">
                    <li ng-repeat="d in c.dims">{{$index +1}} - {{d.name}}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Edit Dimension Form -->
    <script type="text/ng-template" id="addEditDimension.html">
        <div class="modal-header">
            <h4 class="box-title lighter">Edit Dimension
                <span class="label label-primary" ng-repeat="t in dimType">{{t}}</span>
            </h4>
        </div>
        <div class="modal-body">
            <ng-form name="edit_dim_form">
            <div class="row">
                <div class="col-xs-8">
                    <!--Name-->
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Name</b></label>
                            <div class="col-xs-12 col-sm-6">
                                <input type="text" placeholder="Name.." class="form-control" name="dim_name"
                                       tooltip="dimension name.." tooltip-trigger="focus"
                                       ng-model="newDimension.name" required />
                            </div>
                            <div class="col-xs-12 col-sm-3">
                                <div class="text-warning" ng-if="edit_dim_form.dim_name.$error.required  && edit_dim_form.dim_name.$dirty">
                                    The Dimension Name is required.
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--Table Name: derived dimension only allows lookup tables-->
                    <div class="form-group">
                        <div class="row">
                            <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Table Name</b></label>
                            <div class="col-xs-12 col-sm-6" >
                              <span>{{newDimension.table}}</span>
                            </div>
                            <div class="col-xs-12 col-sm-3">
                                <div class="text-info" ng-if="dimType.indexOf('derived') >= 0">
                                    Derived dimension only comes from lookup table.
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--Normal Dimension: choose one column-->
                    <div class="form-group" ng-if="dimType.indexOf('normal') >= 0">
                        <div class="row">
                            <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default">
                              <b>Column Name</b>
                            </label>
                            <div class="col-xs-12 col-sm-6">
                              <span>{{newDimension.column}}</span>
                            </div>
                        </div>
                    </div>
                    <!--Derived Dimension-->
                    <div ng-if="dimType.indexOf('derived') >= 0">
                        <div class="form-group">
                            <div class="row">
                                <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default">
                                    <b>Column Name</b>
                                </label>
                                <div class="col-sm-6 ">
                                    <div ng-repeat="derived in newDimension.derived track by $index">
                                      <span >
                                       {{newDimension.derived[$index]}}
                                      </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div  ng-if="modelsManager.availableLookupTables.indexOf(newDimension.table)!=-1">
                        <div  class="row">
                            <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default">
                                <b>Type</b>
                            </label>
                            <div class="col-xs-12 col-sm-6">
                                <label>
                                    <input type="radio" ng-model="newDimension.normal" value="true" > Normal
                                </label>
                                <label>
                                    <input type="radio" ng-model="newDimension.normal" value="false" > Derived
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </ng-form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-disabled="edit_dim_form.$invalid" ng-click="checkDimension()?ok():''">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>


    <script type="text/ng-template" id="autoGenDimension.html">
        <div class="modal-header large-popover">
            <h4 class="box-title lighter">Auto Generate Dimensions <i kylinpopover placement="right" title="Auto Generate Rules" template="AutoDimensionsTip.html" class="fa fa-info-circle"></i> <small>This is a helper for you to batch generate dimensions.</small></h4>
            <div class="col-xs-12">
                Visit <a href="http://kylin.apache.org/docs/howto/howto_optimize_cubes.html" target="_blank">derived column</a> for more about derived column.
            </div>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-solid">
                        <div class="box-body">
                          <ul class="list-unstyled columns-region">
                              <!--FactTable-->
                              <div ng-repeat="table in modelsManager.availableFactTables track by $index"   class="panel-default " >
                                <h4>{{table}}&nbsp;[FactTable]</h4>
                                <table class="table table-striped table-hover ng-scope">
                                  <tr >
                                    <td class="col-xs-2"><label><input type="checkbox" ng-model="selectedColumns[table].all" ng-change="autoChangeAll(table)">&nbsp;Select All</label></td>
                                    <td class="col-xs-4"><label>Name</label></td>
                                    <td class="col-xs-3"><label>Columns</label></td>
                                    <td colspan="2" class="col-xs-3"></td>
                                  </tr>
                                  <tr ng-repeat="col in availableColumns[table] track by col.table + '.' + col.name" >
                                    <td >
                                      <label class="dim-checkbox-label">
                                      <input type="checkbox" ng-model="selectedColumns[table][col.name].selected" ng-change="autoChange(table,col.name)">
                                      </label>
                                    </td>
                                    <td >
                                      <input type="text"  placeholder={{col.name}} ng-model="selectedColumns[table][col.name].name" ng-disabled="!selectedColumns[table][col.name].selected" style="width:90%;">
                                    </td>
                                    <td>
                                      {{col.name}}
                                    </td>
                                    <td colspan="2"></td>
                                  </tr>
                                </table>
                              </div>
                              <!--LookUp Table-->
                              <div ng-repeat="table in modelsManager.availableLookupTables track by $index"  class="panel-default" >
                                <h4>{{table}}&nbsp;[LookupTable]</h4>
                                <table class="table table-striped table-hover ng-scope">
                                  <tr class="row" >
                                    <td class="col-xs-2"><label><input type="checkbox" ng-model="selectedColumns[table].all" ng-change="autoChangeAll(table)">&nbsp;Select All</label></td>
                                    <td class="col-xs-4"><label>Name</label></td>
                                    <td class="col-xs-3"><label>Columns</label></td>
                                    <td colspan="2" class="col-xs-3"></td>
                                  </tr>
                                  <tr ng-repeat="col in availableColumns[table] track by col.table + '.' + col.name" class="row">
                                    <td class=>
                                      <label class="dim-checkbox-label">
                                      <input type="checkbox" ng-model="selectedColumns[table][col.name].selected" ng-change="autoChange(table,col.name)">
                                      </label>
                                    </td>
                                    <td >
                                      <input type="text" ng-model="selectedColumns[table][col.name].name"  ng-disabled="!selectedColumns[table][col.name].selected" style="width:90%;">
                                    </td>
                                    <td >
                                      {{col.name}}
                                    </td>
                                    <td  >
                                      <label> <input type="radio" ng-model="selectedColumns[table][col.name].normal" value="true" ng-disabled="!selectedColumns[table][col.name].selected"> Normal </label>
                                    </td>
                                    <td >
                                      <label> <input type="radio" ng-model="selectedColumns[table][col.name].normal" value="false" ng-disabled="!selectedColumns[table][col.name].selected"> Derived </label>
                                    </td>
                                  </tr>
                                </table>
                              </div>
                          </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            <button class="btn btn-primary" ng-disabled="" ng-click="checkAutoDimension()?ok():''">OK</button>
        </div>
    </script>
    </ng-form>
</div>
<script type="text/ng-template" id="AutoDimensionsTip.html">
  <div class="row">
    <div class="col-xs-12">
      <ol class="text-info">
        <li>In fact table: one normal dimension will be auto generated per column.</li>
        <li>In lookup table: you can choose to generate a derived column or a normal column.</li>
      </ol>
    </div>
  </div>
</script>
