initial commit

project/assets/app.js

@@ -0,0 +1,17 @@
+import './bootstrap.js';
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+// import './styles/app.css';
+import './styles/global.scss';
+import './styles/main.less';
+
+global.jQuery = global.$ = require('jquery');
+require('@fortawesome/fontawesome-free/css/all.min.css');
+require('bootstrap');
+$('[data-toggle="tooltip"]').tooltip();

project/assets/bootstrap.js

@@ -0,0 +1,10 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.[jt]sx?$/
+));
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

project/assets/controllers.json

@@ -0,0 +1,15 @@
+{
+    "controllers": {
+        "@symfony/ux-turbo": {
+            "turbo-core": {
+                "enabled": true,
+                "fetch": "eager"
+            },
+            "mercure-turbo-stream": {
+                "enabled": false,
+                "fetch": "eager"
+            }
+        }
+    },
+    "entrypoints": []
+}

project/assets/controllers/customers_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus';
+import $ from 'jquery';
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+const _NEED_LENGTH_TO_SEARCH_CLIENT = 3;
+export default class extends Controller {
+    searchInput;
+    tableAll;
+    connect() {
+        this.searchInput = $('#customerListSearch');
+        this.tableAll = $('#customerListTable');
+        this.initSearch();
+    }
+    initSearch() {
+        const masterThs = this;
+        this.searchInput.on('keyup', e => {
+            const value = masterThs.searchInput.val().toLowerCase();
+            if (value.length < _NEED_LENGTH_TO_SEARCH_CLIENT) {
+                masterThs.searchInput.addClass("is-invalid");
+                masterThs.tableAll.find('tr').show();
+                if (value.length === 0) {
+                    masterThs.searchInput.removeClass("is-invalid");
+                }
+                return false;
+            }
+            masterThs.searchInput.removeClass("is-invalid");
+            masterThs.tableAll.find('tr').filter((e,tmp) => {
+                const t = $(tmp)
+                t.toggle(t.html().toLowerCase().indexOf(value) > -1);
+            });
+        })
+    }
+}

project/assets/controllers/hello_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    connect() {
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+    }
+}

project/assets/styles/app.css

@@ -0,0 +1,20 @@
+body {
+    background-color: lightgray;
+}
+.reports-all .col {
+    margin-bottom: 20px;
+}
+.reports-months-all {
+    margin-bottom: 20px;
+}
+/*.status-row {*/
+/*    background-color: lightgray;*/
+/*}*/
+a {
+    text-decoration: none !important;
+}
+
+.reports-all .report-one .fa{
+    padding: 5px 20px;
+    font-size: 20px;
+}

project/assets/styles/global.scss

@@ -0,0 +1,2 @@
+@import "~bootstrap/scss/bootstrap";
+@import "app.css";

project/assets/styles/main.less

@@ -0,0 +1,33 @@
+body {
+  background-color: #e6e6e6;
+}
+.reports-all {
+  .col {
+    margin-bottom: 20px;
+  }
+  .report-one {
+    .fa{
+      margin: auto;
+      font-size: 20px;
+    }
+    .btn-group {
+      width: 100%;
+    }
+    .report-number {
+      position: absolute;
+      right: 0;
+      .badge {
+        font-size: 15px;
+      }
+    }
+  }
+}
+.reports-months-all {
+  margin-bottom: 20px;
+}
+/*.status-row {*/
+/*    background-color: lightgray;*/
+/*}*/
+a {
+  text-decoration: none !important;
+}