PS-558_tag-selection

databox/api/.gitignore

@@ -22,3 +22,15 @@
 .phpunit.result.cache
 /phpunit.xml
 ###< symfony/phpunit-bridge ###
+
+###> phpunit/phpunit ###
+/phpunit.xml
+.phpunit.result.cache
+###< phpunit/phpunit ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

databox/api/assets/admin.js

@@ -0,0 +1,16 @@
+/*
+ * 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 (admin.css in this case)
+import './styles/admin.css';
+
+// start the Stimulus application
+import './bootstrap';
+
+import './controllers/initialValuesSource_controller'
+import './controllers/initialValuesAll_controller'
+
+

databox/api/assets/app.js

@@ -0,0 +1,12 @@
+/*
+ * 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';
+
+// start the Stimulus application
+import './bootstrap';

databox/api/assets/bootstrap.js

@@ -0,0 +1,11 @@
+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);

databox/api/assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

databox/api/assets/controllers/initialValuesAll_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus';
+import $ from 'jquery'
+
+export default class extends Controller {
+    static targets = ['input'];
+    static outlets = ['initialValuesSource'];
+
+    initialValuesSourceOutletConnected(e) {
+        // tomselect will only be set AFTER connect (?) so we update the select after return (in fact 1 ms is enough...)
+        // https://github.com/hotwired/stimulus/issues/618
+        setTimeout(
+            () => { this.render(); },
+            100
+        );
+    }
+
+    tagChanged(js) {
+        this.inputTarget.value = js;
+    }
+
+    render() {
+        let tagName = '';
+        try {
+            const js = JSON.parse(this.inputTarget.value);
+            if (js.type === 'metadata') {
+                tagName = js.value;
+            }
+        }
+        catch (e) {
+            // bad json, ignore
+        }
+
+        const otherController = this.application.getControllerForElementAndIdentifier($('.initialValuesSource')[0], 'initialValuesSource');
+        otherController.jsTagChanged(tagName);
+    }
+}

databox/api/assets/controllers/initialValuesSource_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from '@hotwired/stimulus';
+import $ from 'jquery'
+import TomSelect      from "tom-select"
+
+export default class extends Controller {
+    static targets = ['input'];
+
+    initialize() {
+        this.handler = null;
+        this.tagNameToSet = null;
+    }
+
+    render(event) {
+        const tagName = event.target.tomselect.getValue();
+        let js = '';
+        if(tagName !== '') {
+            js = JSON.stringify(
+                {
+                    'type': 'metadata',
+                    'value': tagName
+                },
+                null,
+                4
+            );
+        }
+
+        const otherController = this.application.getControllerForElementAndIdentifier($('.initialValuesAll')[0], 'initialValuesAll');
+        otherController.tagChanged(js);
+    }
+
+    gethandler(tom) {
+        return (data) => {
+            if (data && data[0].entityId === tom.tagNameToSet) {
+                tom.setValue(data[0].entityId, true);
+            }
+            else {
+                tom.setValue('', true);    // silent=true: do NOT generate "changed" event (else it will clear the js)
+            }
+        };
+    };
+
+    jsTagChanged(tagName) {
+        const tom = $('.initialValuesSource SELECT')[0].tomselect;
+        if(!tom) {
+            return;
+        }
+
+        // load("") would load 100 first elements, we don't want that
+        if(tagName) {
+            // we can update the select value only after load is finished
+            if(!this.handler) {
+                tom.on('load', this.handler = this.gethandler(tom));
+            }
+            tom.load(tom.tagNameToSet = tagName);
+            // tom will NOT call the handler if no need to fetch data (cache ?) so we enforce setValue just in case.
+            tom.setValue(tagName, true);
+        }
+        else {
+            tom.setValue('', true);
+        }
+    }
+}

databox/api/assets/styles/admin.css

@@ -0,0 +1,23 @@
+.form-group.helpAtRight .form-control {
+    width:50%;
+    float: left;
+}
+.form-group.helpAtRight .form-help {
+    padding-left:10px;
+    display: block;
+    width: 50%;
+    float: right;
+}
+.form-group.helpAtRight .form-help .label {
+    font-size: x-small;
+    font-weight: bold;
+}
+.form-group.helpAtRight .form-help CODE {
+    font-size: x-small;
+    white-space: pre-wrap;
+}
+
+.initialValuesAll TEXTAREA {
+    font-family: monospace;
+    font-size: smaller;
+}

databox/api/composer.json

@@ -161,6 +161,7 @@
         "symfony/serializer": "^5.2.0",
         "symfony/twig-bundle": "^5.2.0",
         "symfony/validator": "^5.2.0",
+        "symfony/webpack-encore-bundle": "^2.0",
         "symfony/yaml": "^5.2.0"
     },
     "require-dev": {

databox/api/config/bundles.php

@@ -33,4 +33,5 @@
     Exercise\HTMLPurifierBundle\ExerciseHTMLPurifierBundle::class => ['all' => true],
     Alchemy\MetadataManipulatorBundle\AlchemyMetadataManipulatorBundle::class => ['all' => true],
     Alchemy\WorkflowBundle\AlchemyWorkflowBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];