card actions

resources/assets/js/cards-actions.js

@@ -0,0 +1,55 @@
+'use strict';
+
+(function () {
+    const collapseElementList = [].slice.call(document.querySelectorAll('.card-collapsible'));
+
+    if (collapseElementList) {
+        collapseElementList.map(function (collapseElement) {
+            collapseElement.addEventListener('click', event => {
+                event.preventDefault();
+                // Collapse the element
+                new bootstrap.Collapse(collapseElement.closest('.card').querySelector('.collapse'));
+                // Toggle collapsed class in `.card-header` element
+                collapseElement.closest('.card-header').classList.toggle('collapsed');
+                // Toggle class ri-arrow-down-s-line & ri-arrow-up-s-line
+                Helpers._toggleClass(collapseElement.firstElementChild, 'ri-arrow-down-s-line', 'ri-arrow-up-s-line');
+            });
+        });
+    }
+})();
+
+// Card reload (jquery)
+// --------------------------------------------------------------------
+$(function () {
+    const cardReload = $('.card-reload');
+    if (cardReload.length) {
+        cardReload.on('click', function (e) {
+            e.preventDefault();
+            var $this = $(this);
+            $this.closest('.card').block({
+                message:
+                    '<div class="sk-fold sk-primary"><div class="sk-fold-cube"></div><div class="sk-fold-cube"></div><div class="sk-fold-cube"></div><div class="sk-fold-cube"></div></div><h5>LOADING...</h5>',
+
+                css: {
+                    backgroundColor: 'transparent',
+                    border: '0'
+                },
+                overlayCSS: {
+                    backgroundColor: $('html').hasClass('dark-style') ? '#000' : '#fff',
+                    opacity: 0.55
+                }
+            });
+            setTimeout(function () {
+                $this.closest('.card').unblock();
+                if ($this.closest('.card').find('.card-alert').length) {
+                    $this
+                        .closest('.card')
+                        .find('.card-alert')
+                        .html(
+                            '<div class="alert alert-solid-danger alert-dismissible fade show" role="alert"><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><span class="fw-medium">Holy grail!</span> Your success/error message here.</div>'
+                        );
+                }
+            }, 2500);
+        });
+    }
+});