Ohm-Management - Projektarbeit B-ME
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.

data-iterable.js 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
  2. function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
  3. import VBtn from '../components/VBtn';
  4. import VIcon from '../components/VIcon';
  5. import VSelect from '../components/VSelect';
  6. import Filterable from './filterable';
  7. import Themeable from './themeable';
  8. import Loadable from './loadable';
  9. import { getObjectValueByPath, isObject } from '../util/helpers';
  10. import { consoleWarn } from '../util/console';
  11. /**
  12. * DataIterable
  13. *
  14. * @mixin
  15. *
  16. * Base behavior for data table and data iterator
  17. * providing selection, pagination, sorting and filtering.
  18. *
  19. */
  20. /* @vue/component */
  21. export default {
  22. name: 'data-iterable',
  23. mixins: [Filterable, Loadable, Themeable],
  24. props: {
  25. expand: Boolean,
  26. hideActions: Boolean,
  27. disableInitialSort: Boolean,
  28. mustSort: Boolean,
  29. noResultsText: {
  30. type: String,
  31. default: '$vuetify.dataIterator.noResultsText'
  32. },
  33. nextIcon: {
  34. type: String,
  35. default: '$vuetify.icons.next'
  36. },
  37. prevIcon: {
  38. type: String,
  39. default: '$vuetify.icons.prev'
  40. },
  41. rowsPerPageItems: {
  42. type: Array,
  43. default: function _default() {
  44. return [5, 10, 25, {
  45. text: '$vuetify.dataIterator.rowsPerPageAll',
  46. value: -1
  47. }];
  48. }
  49. },
  50. rowsPerPageText: {
  51. type: String,
  52. default: '$vuetify.dataIterator.rowsPerPageText'
  53. },
  54. selectAll: [Boolean, String],
  55. search: {
  56. required: false
  57. },
  58. filter: {
  59. type: Function,
  60. default: function _default(val, search) {
  61. return val != null && typeof val !== 'boolean' && val.toString().toLowerCase().indexOf(search) !== -1;
  62. }
  63. },
  64. customFilter: {
  65. type: Function,
  66. default: function _default(items, search, filter) {
  67. search = search.toString().toLowerCase();
  68. if (search.trim() === '') return items;
  69. return items.filter(function (i) {
  70. return Object.keys(i).some(function (j) {
  71. return filter(i[j], search);
  72. });
  73. });
  74. }
  75. },
  76. customSort: {
  77. type: Function,
  78. default: function _default(items, index, isDescending) {
  79. if (index === null) return items;
  80. return items.sort(function (a, b) {
  81. var sortA = getObjectValueByPath(a, index);
  82. var sortB = getObjectValueByPath(b, index);
  83. if (isDescending) {
  84. var _ref = [sortB, sortA];
  85. sortA = _ref[0];
  86. sortB = _ref[1];
  87. }
  88. // Check if both are numbers
  89. if (!isNaN(sortA) && !isNaN(sortB)) {
  90. return sortA - sortB;
  91. }
  92. // Check if both cannot be evaluated
  93. if (sortA === null && sortB === null) {
  94. return 0;
  95. }
  96. var _map = [sortA, sortB].map(function (s) {
  97. return (s || '').toString().toLocaleLowerCase();
  98. });
  99. var _map2 = _slicedToArray(_map, 2);
  100. sortA = _map2[0];
  101. sortB = _map2[1];
  102. if (sortA > sortB) return 1;
  103. if (sortA < sortB) return -1;
  104. return 0;
  105. });
  106. }
  107. },
  108. value: {
  109. type: Array,
  110. default: function _default() {
  111. return [];
  112. }
  113. },
  114. items: {
  115. type: Array,
  116. required: true,
  117. default: function _default() {
  118. return [];
  119. }
  120. },
  121. totalItems: {
  122. type: Number,
  123. default: null
  124. },
  125. itemKey: {
  126. type: String,
  127. default: 'id'
  128. },
  129. pagination: {
  130. type: Object,
  131. default: function _default() {}
  132. }
  133. },
  134. data: function data() {
  135. return {
  136. searchLength: 0,
  137. defaultPagination: {
  138. descending: false,
  139. page: 1,
  140. rowsPerPage: 5,
  141. sortBy: null,
  142. totalItems: 0
  143. },
  144. expanded: {},
  145. actionsClasses: 'v-data-iterator__actions',
  146. actionsRangeControlsClasses: 'v-data-iterator__actions__range-controls',
  147. actionsSelectClasses: 'v-data-iterator__actions__select',
  148. actionsPaginationClasses: 'v-data-iterator__actions__pagination'
  149. };
  150. },
  151. computed: {
  152. computedPagination: function computedPagination() {
  153. return this.hasPagination ? this.pagination : this.defaultPagination;
  154. },
  155. computedRowsPerPageItems: function computedRowsPerPageItems() {
  156. var _this = this;
  157. return this.rowsPerPageItems.map(function (item) {
  158. return isObject(item) ? Object.assign({}, item, {
  159. text: _this.$vuetify.t(item.text)
  160. }) : { value: item, text: Number(item).toLocaleString(_this.$vuetify.lang.current) };
  161. });
  162. },
  163. hasPagination: function hasPagination() {
  164. var pagination = this.pagination || {};
  165. return Object.keys(pagination).length > 0;
  166. },
  167. hasSelectAll: function hasSelectAll() {
  168. return this.selectAll !== undefined && this.selectAll !== false;
  169. },
  170. itemsLength: function itemsLength() {
  171. if (this.hasSearch) return this.searchLength;
  172. return this.totalItems || this.items.length;
  173. },
  174. indeterminate: function indeterminate() {
  175. return this.hasSelectAll && this.someItems && !this.everyItem;
  176. },
  177. everyItem: function everyItem() {
  178. var _this2 = this;
  179. return this.filteredItems.length && this.filteredItems.every(function (i) {
  180. return _this2.isSelected(i);
  181. });
  182. },
  183. someItems: function someItems() {
  184. var _this3 = this;
  185. return this.filteredItems.some(function (i) {
  186. return _this3.isSelected(i);
  187. });
  188. },
  189. getPage: function getPage() {
  190. var rowsPerPage = this.computedPagination.rowsPerPage;
  191. return rowsPerPage === Object(rowsPerPage) ? rowsPerPage.value : rowsPerPage;
  192. },
  193. pageStart: function pageStart() {
  194. return this.getPage === -1 ? 0 : (this.computedPagination.page - 1) * this.getPage;
  195. },
  196. pageStop: function pageStop() {
  197. return this.getPage === -1 ? this.itemsLength : this.computedPagination.page * this.getPage;
  198. },
  199. filteredItems: function filteredItems() {
  200. return this.filteredItemsImpl();
  201. },
  202. selected: function selected() {
  203. var selected = {};
  204. for (var index = 0; index < this.value.length; index++) {
  205. var key = getObjectValueByPath(this.value[index], this.itemKey);
  206. selected[key] = true;
  207. }
  208. return selected;
  209. },
  210. hasSearch: function hasSearch() {
  211. return this.search != null;
  212. }
  213. },
  214. watch: {
  215. items: function items() {
  216. var _this4 = this;
  217. if (this.pageStart >= this.itemsLength) {
  218. this.resetPagination();
  219. }
  220. var newItemKeys = new Set(this.items.map(function (item) {
  221. return getObjectValueByPath(item, _this4.itemKey);
  222. }));
  223. var selection = this.value.filter(function (item) {
  224. return newItemKeys.has(getObjectValueByPath(item, _this4.itemKey));
  225. });
  226. if (selection.length !== this.value.length) {
  227. this.$emit('input', selection);
  228. }
  229. },
  230. search: function search() {
  231. var _this5 = this;
  232. this.$nextTick(function () {
  233. _this5.updatePagination({ page: 1, totalItems: _this5.itemsLength });
  234. });
  235. },
  236. 'computedPagination.sortBy': 'resetPagination',
  237. 'computedPagination.descending': 'resetPagination'
  238. },
  239. methods: {
  240. initPagination: function initPagination() {
  241. if (!this.rowsPerPageItems.length) {
  242. consoleWarn('The prop \'rows-per-page-items\' can not be empty', this);
  243. } else {
  244. this.defaultPagination.rowsPerPage = this.rowsPerPageItems[0];
  245. }
  246. this.defaultPagination.totalItems = this.items.length;
  247. this.updatePagination(Object.assign({}, this.defaultPagination, this.pagination));
  248. },
  249. updatePagination: function updatePagination(val) {
  250. var pagination = this.hasPagination ? this.pagination : this.defaultPagination;
  251. var updatedPagination = Object.assign({}, pagination, val);
  252. this.$emit('update:pagination', updatedPagination);
  253. if (!this.hasPagination) {
  254. this.defaultPagination = updatedPagination;
  255. }
  256. },
  257. isSelected: function isSelected(item) {
  258. return this.selected[getObjectValueByPath(item, this.itemKey)];
  259. },
  260. isExpanded: function isExpanded(item) {
  261. return this.expanded[getObjectValueByPath(item, this.itemKey)];
  262. },
  263. filteredItemsImpl: function filteredItemsImpl() {
  264. if (this.totalItems) return this.items;
  265. var items = this.items.slice();
  266. if (this.hasSearch) {
  267. for (var _len = arguments.length, additionalFilterArgs = Array(_len), _key = 0; _key < _len; _key++) {
  268. additionalFilterArgs[_key] = arguments[_key];
  269. }
  270. items = this.customFilter.apply(this, [items, this.search, this.filter].concat(_toConsumableArray(additionalFilterArgs)));
  271. this.searchLength = items.length;
  272. }
  273. items = this.customSort(items, this.computedPagination.sortBy, this.computedPagination.descending);
  274. return this.hideActions && !this.hasPagination ? items : items.slice(this.pageStart, this.pageStop);
  275. },
  276. resetPagination: function resetPagination() {
  277. this.computedPagination.page !== 1 && this.updatePagination({ page: 1 });
  278. },
  279. sort: function sort(index) {
  280. var _computedPagination = this.computedPagination,
  281. sortBy = _computedPagination.sortBy,
  282. descending = _computedPagination.descending;
  283. if (sortBy === null) {
  284. this.updatePagination({ sortBy: index, descending: false });
  285. } else if (sortBy === index && !descending) {
  286. this.updatePagination({ descending: true });
  287. } else if (sortBy !== index) {
  288. this.updatePagination({ sortBy: index, descending: false });
  289. } else if (!this.mustSort) {
  290. this.updatePagination({ sortBy: null, descending: null });
  291. } else {
  292. this.updatePagination({ sortBy: index, descending: false });
  293. }
  294. },
  295. toggle: function toggle(value) {
  296. var _this6 = this;
  297. var selected = Object.assign({}, this.selected);
  298. for (var index = 0; index < this.filteredItems.length; index++) {
  299. var key = getObjectValueByPath(this.filteredItems[index], this.itemKey);
  300. selected[key] = value;
  301. }
  302. this.$emit('input', this.items.filter(function (i) {
  303. var key = getObjectValueByPath(i, _this6.itemKey);
  304. return selected[key];
  305. }));
  306. },
  307. createProps: function createProps(item, index) {
  308. var _this7 = this;
  309. var props = { item: item, index: index };
  310. var keyProp = this.itemKey;
  311. var itemKey = getObjectValueByPath(item, keyProp);
  312. Object.defineProperty(props, 'selected', {
  313. get: function get() {
  314. return _this7.selected[itemKey];
  315. },
  316. set: function set(value) {
  317. if (itemKey == null) {
  318. consoleWarn('"' + keyProp + '" attribute must be defined for item', _this7);
  319. }
  320. var selected = _this7.value.slice();
  321. if (value) selected.push(item);else selected = selected.filter(function (i) {
  322. return getObjectValueByPath(i, keyProp) !== itemKey;
  323. });
  324. _this7.$emit('input', selected);
  325. }
  326. });
  327. Object.defineProperty(props, 'expanded', {
  328. get: function get() {
  329. return _this7.expanded[itemKey];
  330. },
  331. set: function set(value) {
  332. if (itemKey == null) {
  333. consoleWarn('"' + keyProp + '" attribute must be defined for item', _this7);
  334. }
  335. if (!_this7.expand) {
  336. for (var key in _this7.expanded) {
  337. _this7.expanded.hasOwnProperty(key) && _this7.$set(_this7.expanded, key, false);
  338. }
  339. }
  340. _this7.$set(_this7.expanded, itemKey, value);
  341. }
  342. });
  343. return props;
  344. },
  345. genItems: function genItems() {
  346. if (!this.itemsLength && !this.items.length) {
  347. var noData = this.$slots['no-data'] || this.$vuetify.t(this.noDataText);
  348. return [this.genEmptyItems(noData)];
  349. }
  350. if (!this.filteredItems.length) {
  351. var noResults = this.$slots['no-results'] || this.$vuetify.t(this.noResultsText);
  352. return [this.genEmptyItems(noResults)];
  353. }
  354. return this.genFilteredItems();
  355. },
  356. genPrevIcon: function genPrevIcon() {
  357. var _this8 = this;
  358. return this.$createElement(VBtn, {
  359. props: {
  360. disabled: this.computedPagination.page === 1,
  361. icon: true,
  362. flat: true
  363. },
  364. on: {
  365. click: function click() {
  366. var page = _this8.computedPagination.page;
  367. _this8.updatePagination({ page: page - 1 });
  368. }
  369. },
  370. attrs: {
  371. 'aria-label': this.$vuetify.t('$vuetify.dataIterator.prevPage')
  372. }
  373. }, [this.$createElement(VIcon, this.$vuetify.rtl ? this.nextIcon : this.prevIcon)]);
  374. },
  375. genNextIcon: function genNextIcon() {
  376. var _this9 = this;
  377. var pagination = this.computedPagination;
  378. var disabled = pagination.rowsPerPage < 0 || pagination.page * pagination.rowsPerPage >= this.itemsLength || this.pageStop < 0;
  379. return this.$createElement(VBtn, {
  380. props: {
  381. disabled: disabled,
  382. icon: true,
  383. flat: true
  384. },
  385. on: {
  386. click: function click() {
  387. var page = _this9.computedPagination.page;
  388. _this9.updatePagination({ page: page + 1 });
  389. }
  390. },
  391. attrs: {
  392. 'aria-label': this.$vuetify.t('$vuetify.dataIterator.nextPage')
  393. }
  394. }, [this.$createElement(VIcon, this.$vuetify.rtl ? this.prevIcon : this.nextIcon)]);
  395. },
  396. genSelect: function genSelect() {
  397. var _this10 = this;
  398. return this.$createElement('div', {
  399. 'class': this.actionsSelectClasses
  400. }, [this.$vuetify.t(this.rowsPerPageText), this.$createElement(VSelect, {
  401. attrs: {
  402. 'aria-label': this.$vuetify.t(this.rowsPerPageText)
  403. },
  404. props: {
  405. items: this.computedRowsPerPageItems,
  406. value: this.computedPagination.rowsPerPage,
  407. hideDetails: true,
  408. menuProps: {
  409. auto: true,
  410. dark: this.dark,
  411. light: this.light,
  412. minWidth: '75px'
  413. }
  414. },
  415. on: {
  416. input: function input(val) {
  417. _this10.updatePagination({
  418. page: 1,
  419. rowsPerPage: val
  420. });
  421. }
  422. }
  423. })]);
  424. },
  425. genPagination: function genPagination() {
  426. var _this11 = this;
  427. var pagination = '–';
  428. if (this.itemsLength) {
  429. var _$vuetify;
  430. var stop = this.itemsLength < this.pageStop || this.pageStop < 0 ? this.itemsLength : this.pageStop;
  431. pagination = this.$scopedSlots.pageText ? this.$scopedSlots.pageText({
  432. pageStart: this.pageStart + 1,
  433. pageStop: stop,
  434. itemsLength: this.itemsLength
  435. }) : (_$vuetify = this.$vuetify).t.apply(_$vuetify, ['$vuetify.dataIterator.pageText'].concat(_toConsumableArray([this.pageStart + 1, stop, this.itemsLength].map(function (n) {
  436. return Number(n).toLocaleString(_this11.$vuetify.lang.current);
  437. }))));
  438. }
  439. return this.$createElement('div', {
  440. 'class': this.actionsPaginationClasses
  441. }, [pagination]);
  442. },
  443. genActions: function genActions() {
  444. var rangeControls = this.$createElement('div', {
  445. 'class': this.actionsRangeControlsClasses
  446. }, [this.genPagination(), this.genPrevIcon(), this.genNextIcon()]);
  447. return [this.$createElement('div', {
  448. 'class': this.actionsClasses
  449. }, [this.$slots['actions-prepend'] ? this.$createElement('div', {}, this.$slots['actions-prepend']) : null, this.rowsPerPageItems.length > 1 ? this.genSelect() : null, rangeControls, this.$slots['actions-append'] ? this.$createElement('div', {}, this.$slots['actions-append']) : null])];
  450. }
  451. }
  452. };
  453. //# sourceMappingURL=data-iterable.js.map