You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

articlesCategory.html 6.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <div layout="column" layout-fill layout-align="top" angular-busy="appUtils.cgBusy(itemType + '.table')">
  2. <div flex>
  3. <md-toolbar class="md-table-toolbar md-default" ng-show="isModal || (!isFilterShown && selected.length == 0)">
  4. <div class="md-toolbar-tools">
  5. <span>{{ itemType + '.name' | translate }}</span>
  6. <span flex></span>
  7. <md-button ng-show="isModal && items != null" class="md-icon-button" ng-click="addItemDialog()" title="{{ 'common.new' | translate }}">
  8. <md-icon class="material-icons">add</md-icon>
  9. </md-button>
  10. <md-button ng-show="!isModal" class="md-icon-button" ui-sref="{{itemType}}_add" title="{{ 'common.new' | translate }}">
  11. <md-icon class="material-icons">add</md-icon>
  12. </md-button>
  13. <md-button ng-show="!isModal" class="md-icon-button" ng-click="showFilter(true)" title="{{ 'common.filter' | translate }}">
  14. <md-icon class="material-icons">search</md-icon>
  15. </md-button>
  16. <md-button ng-show="!isModal" class="md-icon-button" ng-click="getItems()" title="{{ 'common.refresh' | translate }}">
  17. <md-icon class="material-icons">refresh</md-icon>
  18. </md-button>
  19. </div>
  20. </md-toolbar>
  21. <md-toolbar class="md-table-toolbar md-default" ng-show="isModal || (isFilterShown && selected.length == 0)">
  22. <div class="md-toolbar-tools">
  23. <md-icon class="material-icons">search</md-icon>
  24. <form autocomplete="off">
  25. <md-input-container class="md-block" flex-gt-sm>
  26. <label>{{ 'common.filter' | translate }}</label>
  27. <input type="text" ng-model="query.filter" ng-model-options="{debounce: 500}" ng-change="getItems()">
  28. </md-input-container>
  29. </form>
  30. <md-button ng-show="!isModal" class="md-icon-button" ng-click="showFilter(false)" title="{{ 'common.close' | translate }}">
  31. <md-icon class="material-icons">close</md-icon>
  32. </md-button>
  33. <md-button class="md-icon-button" ng-click="getItems()" title="{{ 'common.refresh' | translate }}">
  34. <md-icon class="material-icons">refresh</md-icon>
  35. </md-button>
  36. </div>
  37. </md-toolbar>
  38. <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length > 0">
  39. <div class="md-toolbar-tools">
  40. <span>{{ itemType + '.selectedItems' | translate:{count:selected.length} }}</span>
  41. <span flex></span>
  42. <md-button class="md-icon-button" ng-click="askRemoveSelected()" title="{{ 'common.delete' | translate }}">
  43. <md-icon class="material-icons">delete</md-icon>
  44. </md-button>
  45. </div>
  46. </md-toolbar>
  47. </div>
  48. <div flex>
  49. <md-table-container>
  50. <table md-table md-row-select multiple ng-model="selected" >
  51. <thead md-head md-order="query.order" md-on-reorder="getItems">
  52. <tr md-row>
  53. <th md-column md-order-by="id"><span>{{ itemType + '.title' | translate }}</span></th>
  54. <th md-column md-order-by="type"><span>{{ itemType + '.type' | translate }}</span></th>
  55. <th md-column md-order-by="createdAt">{{ 'common.createdAt' | translate }}</th>
  56. <th md-column md-order-by="updatedAt">{{ 'common.updatedAt' | translate }}</th>
  57. <th class="col-icon-1" md-column>{{ 'common.actions' | translate }}</th>
  58. </tr>
  59. </thead>
  60. <tbody md-body>
  61. <tr md-row md-select="item" md-select-id="id" ng-repeat="item in items.data">
  62. <td md-cell>{{item.title}}</td>
  63. <td md-cell>{{ itemType + '.types.' + item.type | translate }}</td>
  64. <td md-cell>{{item.createdAt | formatDateTime}}</td>
  65. <td md-cell>{{item.updatedAt == null ? ('common.never' | translate ) : (item.updatedAt | formatDateTime)}}</td>
  66. <td class="col-icon-1" md-cell>
  67. <md-menu ng-show="!isModal">
  68. <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
  69. <md-icon class="material-icons">more_vert</md-icon>
  70. </md-button>
  71. <md-menu-content>
  72. <md-menu-item>
  73. <md-button ui-sref="{{itemType}}_edit({id: item.id, item: item})">
  74. <md-icon class="material-icons">mode_edit</md-icon>
  75. {{ 'common.edit' | translate }}
  76. </md-button>
  77. </md-menu-item>
  78. <md-menu-item>
  79. <md-button ng-click="editItem(item)">
  80. <md-icon class="material-icons">border_color</md-icon>
  81. {{ 'common.editDialog' | translate }}
  82. </md-button>
  83. </md-menu-item>
  84. <md-menu-divider></md-menu-divider>
  85. <md-menu-item>
  86. <md-button ng-click="askRemoveOne(item)">
  87. <md-icon class="material-icons">delete</md-icon>
  88. {{ 'common.delete' | translate }}
  89. </md-button>
  90. </md-menu-item>
  91. </md-menu-content>
  92. </md-menu>
  93. <md-button ng-show="isModal" class="md-icon-button" ng-click="selectItem(item)" title="{{ 'common.select' | translate }}">
  94. <md-icon class="material-icons">done</md-icon>
  95. </md-button>
  96. </td>
  97. </tr>
  98. </tbody>
  99. </table>
  100. </md-table-container>
  101. </div>
  102. <md-table-pagination md-label="{{appUtils.mdTableLabels()}}" class="col-xs-11" md-limit="query.limit" md-limit-options="[5, 10, 20]"
  103. md-page="query.page" md-total="{{items.count}}" md-on-paginate="getItems" md-page-select></md-table-pagination>
  104. <div ng-repeat="error in busy.errors(itemType + '.table')" class="isa_error">
  105. <i class="fa fa-times-circle"></i>
  106. {{ error.data.message }}
  107. </div>
  108. </div>