Editable.php 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <?php
  2. namespace Dcat\Admin\Grid\Displayers;
  3. use Dcat\Admin\Admin;
  4. use Dcat\Admin\Support\Helper;
  5. class Editable extends AbstractDisplayer
  6. {
  7. protected $selector = 'grid-column-editable';
  8. public function display($refresh = false)
  9. {
  10. $this->addScript();
  11. $this->addStyle();
  12. $value = Helper::render($this->value);
  13. $label = __('admin.save');
  14. return <<<HTML
  15. <div class="d-inline">
  16. <span class="{$this->selector}" contenteditable="true">{$value}</span>
  17. <span class="save hidden"
  18. data-value="{$this->value}"
  19. data-name="{$this->column->getName()}"
  20. data-id="{$this->getKey()}"
  21. data-refresh="{$refresh}"
  22. data-url="{$this->getUrl()}">
  23. {$label}
  24. </span>
  25. <div class="d-none"></div>
  26. </div>
  27. HTML;
  28. }
  29. protected function getUrl()
  30. {
  31. return $this->resource().'/'.$this->getKey();
  32. }
  33. protected function addStyle()
  34. {
  35. $color = Admin::color()->link();
  36. $primary = Admin::color()->primary();
  37. Admin::style(
  38. <<<CSS
  39. .{$this->selector}{border-bottom:dashed 1px $color;color: $color;display: inline-block; -webkit-user-modify: read-write-plaintext-only;}
  40. .{$this->selector}+.save{margin-left: 0.4rem;color: $color}
  41. body.dark-mode .{$this->selector}{color: $primary;border-color: $primary;}
  42. body.dark-mode .{$this->selector}+.save{color: $primary}
  43. CSS
  44. );
  45. }
  46. protected function addScript()
  47. {
  48. $script = <<<JS
  49. $(".{$this->selector}").on("click", function() {
  50. $(this).next().removeClass("hidden");
  51. }).on('blur', function () {
  52. var icon = $(this).next();
  53. setTimeout(function () {
  54. icon.addClass("hidden")
  55. }, 200)
  56. });
  57. $('.{$this->selector}+.save').on("click",function() {
  58. var obj = $(this),
  59. url = obj.data('url'),
  60. name = obj.data('name'),
  61. refresh = obj.data('refresh'),
  62. old_value = obj.data('value'),
  63. value = obj.prev().html(),
  64. tmp = obj.next();
  65. tmp.html(value);
  66. value = tmp.text().replace(new RegExp("<br>","g"), '').replace(new RegExp("&nbsp;","g"), '').trim();
  67. var data = {
  68. _method: 'PUT'
  69. };
  70. if (name.indexOf('.') === -1) {
  71. data[name] = value;
  72. } else {
  73. name = name.split('.');
  74. data[name[0]] = {};
  75. data[name[0]][name[1]] = value;
  76. }
  77. Dcat.NP.start();
  78. $.ajax({
  79. url: url,
  80. type: "POST",
  81. data: data,
  82. success: function (data) {
  83. if (data.status) {
  84. obj.attr('data-value',value).addClass("hidden").prev().html(value);
  85. Dcat.success(data.message);
  86. refresh && Dcat.reload()
  87. } else {
  88. obj.prev().html(old_value);
  89. Dcat.error(data.message);
  90. }
  91. },
  92. error:function(a,b,c) {
  93. obj.prev().html(old_value);
  94. Dcat.handleAjaxError(a, b, c);
  95. },
  96. complete:function(a,b) {
  97. Dcat.NP.done();
  98. }
  99. });
  100. return false;
  101. })
  102. JS;
  103. Admin::script($script);
  104. }
  105. }