IF YOU WOULD LIKE TO GET AN ACCOUNT, please write an email to s dot adaszewski at gmail dot com. User accounts are meant only to report issues and/or generate pull requests. This is a purpose-specific Git hosting for ADARED projects. Thank you for your understanding!
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.

wb-toolbox-dialog.js 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. //
  2. // Copyright (C) Stanislaw Adaszewski, 2020
  3. // Contact: s.adaszewski@gmail.com
  4. // Website: https://adared.ch/wba
  5. // License: GNU Affero General Public License, Version 3
  6. //
  7. import { h, Component } from 'preact';
  8. import WBTable from 'wb-table';
  9. import WBNameAndUuid from 'wb-name-and-uuid';
  10. import wbFetchObjects from 'wb-fetch-objects';
  11. import wbFormatDate from 'wb-format-date';
  12. class WBToolboxDialog extends Component {
  13. constructor(...args) {
  14. super(...args);
  15. this.state.rows = [];
  16. this.state.selectedValues = {};
  17. }
  18. componentDidMount() {
  19. this.fetchRows();
  20. }
  21. componentWillReceiveProps(nextProps) {
  22. this.props = nextProps;
  23. this.fetchRows();
  24. }
  25. fetchRows() {
  26. const { items, id, selectMany, onAccepted } = this.props;
  27. const { arvHost, arvToken } = this.props.app.state;
  28. const { selectedValues } = this.state;
  29. let prom = wbFetchObjects(arvHost, arvToken,
  30. items);
  31. let lookup;
  32. prom = prom.then(lkup => (lookup = lkup));
  33. prom = prom.then(() => wbFetchObjects(arvHost, arvToken,
  34. items.map(uuid => lookup[uuid].owner_uuid)));
  35. let ownerLookup;
  36. prom = prom.then(lkup => (ownerLookup = lkup));
  37. prom = prom.then(() => {
  38. const rows = items.map((uuid, idx) => {
  39. const it = lookup[uuid];
  40. const ow = ownerLookup[it.owner_uuid];
  41. let r = [];
  42. if (selectMany)
  43. r.push();
  44. r = r.concat([
  45. selectMany ? (
  46. <div>
  47. <input type="checkbox" checked={ (uuid in selectedValues) }
  48. onChange={ e => {
  49. if (e.target.value === 'on')
  50. selectedValues[uuid] = true;
  51. else
  52. delete selectedValues[uuid];
  53. } } /> { '\u00A0' }
  54. </div>
  55. ) : (
  56. <button class="btn btn-outline-primary" title="Use"
  57. onclick={ () => {
  58. $('#' + id).modal('hide');
  59. onAccepted(uuid);
  60. } }>
  61. <i class="fas fa-hand-pointer"></i>
  62. </button>
  63. ),
  64. ( <WBNameAndUuid uuid={ uuid } lookup={ lookup }
  65. onLinkClicked={ () => $('#' + id).modal('hide') } /> ),
  66. it.kind,
  67. wbFormatDate(it.created_at),
  68. ( <WBNameAndUuid uuid={ it.owner_uuid } lookup={ ownerLookup }
  69. onLinkClicked={ () => $('#' + id).modal('hide') } /> )
  70. ]);
  71. return r;
  72. });
  73. this.setState({ rows });
  74. });
  75. }
  76. render({ id, selectMany, onAccepted, items, app }, { rows, selectedValues }) {
  77. return (
  78. <div class="modal" id={ id } tabindex="-1" role="dialog">
  79. <div class="modal-dialog modal-lg" role="document">
  80. <div class="modal-content">
  81. <div class="modal-header">
  82. <h5 class="modal-title">Browse Toolbox</h5>
  83. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  84. <span aria-hidden="true">&times;</span>
  85. </button>
  86. </div>
  87. <div class="modal-body">
  88. <div class="mb-2">
  89. { selectMany ? (
  90. <button class="btn btn-outline-primary mr-2" onclick={ () => {
  91. items.map(uuid => (selectedValues[uuid] = true));
  92. this.fetchRows();
  93. } }>
  94. Select All
  95. </button>
  96. ) : null }
  97. { selectMany ? (
  98. <button class="btn btn-outline-primary mr-2" onclick={ () => {
  99. this.setState({ 'selectedValues' : {} });
  100. this.fetchRows();
  101. } }>
  102. Select None
  103. </button>
  104. ) : null }
  105. <button class="btn btn-outline-primary mr-2" onclick={ () => {
  106. app.clearToolbox();
  107. this.props.items = [];
  108. this.fetchRows();
  109. } } >
  110. Clear Toolbox
  111. </button>
  112. <button class="btn btn-outline-primary mr-2" onclick={ () => {
  113. app.loadToolbox();
  114. this.props.items = app.state.toolboxItems;
  115. this.fetchRows();
  116. } } >
  117. Refresh Toolbox
  118. </button>
  119. </div>
  120. <WBTable columns={ [ '', 'Name', 'Kind', 'Created At', 'Owner' ] }
  121. rows={ rows } />
  122. </div>
  123. <div class="modal-footer">
  124. { selectMany ? (
  125. <button type="button" class="btn btn-primary" onclick={
  126. () => {
  127. $('#' + id).modal('hide');
  128. onAccepted(items.filter(uuid => (uuid in selectedValues)));
  129. }
  130. }>Accept</button>
  131. ) : null }
  132. <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. );
  138. }
  139. }
  140. WBToolboxDialog.defaultProps = {
  141. 'onAccepted': () => {}
  142. };
  143. export default WBToolboxDialog;