uqac-websem-project/frontend/WebSem/app/views/articles.html

<div layout="column" layout-fill layout-align="top" angular-busy="appUtils.cgBusy(itemType + '.table')">

    <div flex>
        <md-toolbar class="md-table-toolbar md-default" ng-show="isModal || (!isFilterShown && selected.length == 0)">
            <div class="md-toolbar-tools">
                <span>{{ itemType + '.name' | translate }}</span>
                <span flex></span>
                <md-button ng-show="isModal && items != null" class="md-icon-button" ng-click="addItemDialog()" title="{{ 'common.new' | translate }}">
                    <md-icon class="material-icons">add</md-icon>
                </md-button>
                <md-button ng-show="!isModal" class="md-icon-button" ui-sref="{{itemType}}_add" title="{{ 'common.new' | translate }}">
                    <md-icon class="material-icons">add</md-icon>
                </md-button>
                <md-button ng-show="!isModal" class="md-icon-button" ng-click="showFilter(true)" title="{{ 'common.filter' | translate }}">
                    <md-icon class="material-icons">search</md-icon>
                </md-button>
                <md-button ng-show="!isModal" class="md-icon-button" ng-click="getItems()" title="{{ 'common.refresh' | translate }}">
                    <md-icon class="material-icons">refresh</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-toolbar class="md-table-toolbar md-default" ng-show="isModal || (isFilterShown && selected.length == 0)">
            <div class="md-toolbar-tools">
                <md-icon class="material-icons">search</md-icon>
                <form autocomplete="off">
                    <md-input-container class="md-block" flex-gt-sm>
                        <label>{{ 'common.filter' | translate }}</label>
                        <input type="text" ng-model="query.filter" ng-model-options="{debounce: 500}" ng-change="getItems()">
                    </md-input-container>

                </form>
                <md-button ng-show="!isModal" class="md-icon-button" ng-click="showFilter(false)" title="{{ 'common.close' | translate }}">
                    <md-icon class="material-icons">close</md-icon>
                </md-button>
                <md-button class="md-icon-button" ng-click="getItems()" title="{{ 'common.refresh' | translate }}">
                    <md-icon class="material-icons">refresh</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length > 0">
            <div class="md-toolbar-tools">
                <span>{{ itemType + '.selectedItems' | translate:{count:selected.length} }}</span>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="askRemoveSelected()" title="{{ 'common.delete' | translate }}">
                    <md-icon class="material-icons">delete</md-icon>
                </md-button>
            </div>
        </md-toolbar>
    </div>

    <div flex>
        <md-table-container>
            <table md-table md-row-select multiple ng-model="selected" >
                <thead md-head md-order="query.order" md-on-reorder="getItems">
                <tr md-row>
                    <th md-column md-order-by="id"><span>{{ itemType + '.title' | translate }}</span></th>
                    <th md-column md-order-by="type"><span>{{ itemType + '.type' | translate }}</span></th>
                    <th md-column md-order-by="createdAt">{{ 'common.createdAt' | translate }}</th>
                    <th md-column md-order-by="updatedAt">{{ 'common.updatedAt' | translate }}</th>
                    <th class="col-icon-1" md-column>{{ 'common.actions' | translate }}</th>
                </tr>
                </thead>
                <tbody md-body>
                <tr md-row md-select="item" md-select-id="id" ng-repeat="item in items.data">
                    <td md-cell>{{item.title}}</td>
                    <td md-cell>{{ itemType + '.types.' + item.type | translate }}</td>
                    <td md-cell>{{item.createdAt | formatDateTime}}</td>
                    <td md-cell>{{item.updatedAt == null ? ('common.never' | translate ) : (item.updatedAt | formatDateTime)}}</td>
                    <td class="col-icon-1" md-cell>
                        <md-menu ng-show="!isModal">
                            <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
                                <md-icon class="material-icons">more_vert</md-icon>
                            </md-button>
                            <md-menu-content>
                                <md-menu-item>
                                    <md-button ui-sref="{{itemType}}_edit({id: item.id, item: item})">
                                        <md-icon class="material-icons">mode_edit</md-icon>
                                        {{ 'common.edit' | translate }}
                                    </md-button>
                                </md-menu-item>
                                <md-menu-item>
                                    <md-button ng-click="editItem(item)">
                                        <md-icon class="material-icons">border_color</md-icon>
                                        {{ 'common.editDialog' | translate }}
                                    </md-button>
                                </md-menu-item>
                                <md-menu-divider></md-menu-divider>
                                <md-menu-item>
                                    <md-button ng-click="askRemoveOne(item)">
                                        <md-icon class="material-icons">delete</md-icon>
                                        {{ 'common.delete' | translate }}
                                    </md-button>
                                </md-menu-item>
                            </md-menu-content>
                        </md-menu>

                        <md-button ng-show="isModal" class="md-icon-button" ng-click="selectItem(item)" title="{{ 'common.select' | translate }}">
                            <md-icon class="material-icons">done</md-icon>
                        </md-button>
                    </td>
                </tr>
                </tbody>
            </table>
        </md-table-container>
    </div>

    <md-table-pagination md-label="{{appUtils.mdTableLabels()}}" class="col-xs-11" md-limit="query.limit" md-limit-options="[5, 10, 20]"
                         md-page="query.page" md-total="{{items.count}}" md-on-paginate="getItems" md-page-select></md-table-pagination>

    <div ng-repeat="error in busy.errors(itemType + '.table')" class="isa_error">
        <i class="fa fa-times-circle"></i>
        {{ error.data.message }}
    </div>
</div>