refractor user group

assets/andy/cobaform.html

@@ -92,6 +92,7 @@
         hx-on::reponse-error="cobaerror()"
         hx-on::send-error="cobaerror()"
         id="kt_form_1"
+        hx-include="#cobaid, #test"
       >
         <div id="change">
           <div class="form-group">
@@ -131,7 +132,23 @@
           submit
         </button>
       </form>
+      <input
+        id="cobaid"
+        name="cobaid"
+        type="hidden"
+        placeholder="coba"
+        value="1"
+        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+      />
     </div>
+    <input
+      id="test"
+      name="paginat"
+      type="hidden"
+      placeholder="coba"
+      value="2"
+      class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+    />
 
     <div id="testttt" class="p-6" hx-swap-oob="#testttt">
       ;adkj;djf;
@@ -144,6 +161,21 @@
     >
       Show live toast
     </button>
+    <input
+      class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+      type="text"
+      name="search"
+      id="searchsas5b2f51246d4698262a5b7c241dd59884"
+      placeholder="Cari Kode/Nama"
+      hx-get="http://google.com"
+      hx-trigger="input changed delay:500ms, search"
+      hx-target="#cobakeyup"
+      hx-indicator=""
+      value=""
+      hx-include="#cobaid"
+      hx-swap="outerHTML"
+      autocomplete="off"
+    />
 
     <div
       class="position-fixed bottom-0 right-0 p-3"
@@ -175,6 +207,43 @@
         </div>
       </div>
     </div>
+    <div id="cobakeyup"></div>
+    <div class="card card-custom">
+      <div class="card-header">
+        <div class="card-title">
+          <h3 class="card-label">Card Blocking</h3>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="overlay-wrapper">
+          <div class="form-group">
+            <label>Address Line 1</label>
+            <input
+              type="text"
+              class="form-control form-control-solid form-control-lg"
+              name="address1"
+              placeholder="Address Line 1"
+            />
+            <span class="form-text text-muted">Please enter your Address.</span>
+          </div>
+          <div class="form-group">
+            <label>Address Line 2</label>
+            <input
+              type="text"
+              class="form-control form-control-solid form-control-lg"
+              name="address1"
+              placeholder="Address Line 1"
+            />
+            <span class="form-text text-muted"
+              >Please enter your Address 2.</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="overlay-layer bg-dark-o-10">
+        <div class="spinner spinner-primary"></div>
+      </div>
+    </div>
 
     <!--begin::Global Config(global config for global JS scripts)-->
     <script src="asset-corporate-portal/js/ktappsetting.js"></script>

assets/asset-corporate-portal/css/sas.bundle.css

@@ -5200,6 +5200,40 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
   height: auto;
 }
 
+/* ### OVERLAY */
+.overlay-loading {
+  position: relative !important;
+}
+.overlay-loading .overlay-layer {
+  position: absolute !important ;
+  top: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-pack: center !important;
+  -ms-flex-pack: center !important;
+  justify-content: center !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  -webkit-transition: all 0.3s ease !important;
+  transition: all 0.3s ease !important;
+  opacity: 0 !important;
+}
+.overlay-loading.overlay-block .overlay-layer,
+.overlay-layer {
+  -webkit-transition: all 0.3s ease !important;
+  transition: all 0.3s ease !important;
+  opacity: 1 !important;
+}
+.overlay-loading.overlay-block {
+  cursor: wait !important;
+}
+
 /* ### BUTTON HOVER TEXT */
 /* ###  */
 /* ## PRIMARY */

assets/mcu/mike/t0007.html

@@ -2109,7 +2109,40 @@ License: You must have a valid license purchased only from themeforest(the above
       <!--end:: Footer-->
     </div>
     <!--end:: Wrapper-->
+    <button type="button" class="btn btn-primary" id="liveToastBtn">
+      Show live toast
+    </button>
 
+    <div
+      class="position-fixed bottom-0 right-0 p-3"
+      style="z-index: 5; right: 0; bottom: 0;"
+    >
+      <div
+        id="liveToast"
+        class="toast hide"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        data-delay="2000"
+      >
+        <div class="toast-header">
+          <img src="..." class="rounded mr-2" alt="..." />
+          <strong class="mr-auto">Bootstrap</strong>
+          <small>11 mins ago</small>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body">
+          Hello, world! This is a toast message.
+        </div>
+      </div>
+    </div>
     <script>
       var HOST_URL =
         "https://preview.keenthemes.com/metronic/theme/html/tools/preview";