[BUG]: The field view is not working as expected JCB 5.0.0-Alpha6

jjs commented

2024-03-21 20:42:02 +00:00

What Happened?

When opening an existing field, the Property dropdown menus are completely open.

Steps to reproduce the Bug

install 5.0.0-alpha6 and open an existing field

Which Joomla version are you compiling in?

5.0.3

Which PHP version are you compiling in?

8.2

Which Joomla versions are you targeting?

5.0.3

Which PHP version are you targeting?

not important

Which Web server is JCB running on?

Apache

Which Relational Database is JCB running on?

Mariadb

Which OS is JCB running on?

Linux ubuntu

Which JCB version are you using?

5.0.0-alpha6

Which Joomla version is JCB installed on?

Joomla 5

Where in JCB did this issue occur?

Field(admin_view), Fields(admin_views)

On which browsers did you encounter the issue?

Firefox

Additional Comments

No response

### What Happened? When opening an existing field, the Property dropdown menus are completely open. ### Steps to reproduce the Bug install 5.0.0-alpha6 and open an existing field ### Which Joomla version are you compiling in? 5.0.3 ### Which PHP version are you compiling in? 8.2 ### Which Joomla versions are you targeting? 5.0.3 ### Which PHP version are you targeting? not important ### Which Web server is JCB running on? Apache ### Which Relational Database is JCB running on? Mariadb ### Which OS is JCB running on? Linux ubuntu ### Which JCB version are you using? 5.0.0-alpha6 ### Which Joomla version is JCB installed on? Joomla 5 ### Where in JCB did this issue occur? Field(admin_view), Fields(admin_views) ### On which browsers did you encounter the issue? Firefox ### Additional Comments _No response_

field-error.png

32 KiB

jjs added the

Bug

label 2024-03-21 20:42:02 +00:00

Llewellyn changed title from ~~[BUG]: JCB 5.0.0-Alpha6~~ to [BUG]: The field view is not working as expected JCB 5.0.0-Alpha6

2024-03-24 19:09:40 +00:00

Llewellyn commented

2024-03-24 19:41:27 +00:00

Owner

The field view is broken period and I need to convert and rewrite the whole view, since it has lots of custom jQuery and outdated field structures.

This is a serious setback, and once I realized this I halted all other work towards Joomla 4 and 5. This is now our main focus before we can move out of alpha to beta.

I have already forked (save as copy) the view to target Joomla 4&5 exclusively in JCB. I have also started on the refactoring.

But I have clients who does not care to much to have JCB in Joomla 5, just that they components move to Joomla 4 or 5... this means I am limited in time.

how can you help?

I was hoping you would ask... well basically this code needs refactoring. Should you understand what its doing and have the courage to convert it to pure JavaScript... then please go-head.

You can ignore to top part of the field.js for now.

Since the code is maintained in my JCB how this will work, is you will in your Joomla 5 JCB hack the code until it is correct, and past the all the code here as a codeblock and I will take it from there to add it to JCB.

Fixing the fields

Well the above refactoring should fix this, since our error is:

which is on line 576, we are still working with repeatable fields in the Joomla 3 way, fixing this will fix most of the issues... but not all of them, therefore a whole refactoring is needed.

The field view is broken period and I need to convert and rewrite the whole view, since it has lots of custom jQuery and outdated field structures. > This is a **serious setback**, and once I realized this I halted all other work towards Joomla 4 and 5. This is now our main focus before we can move out of alpha to beta. I have already forked (save as copy) the view to target Joomla 4&5 exclusively in JCB. I have also started on the refactoring. > But I have clients who does not care to much to have JCB in Joomla 5, just that they components move to Joomla 4 or 5... this means I am limited in time. ### how can you help? I was hoping you would ask... well basically [this code](https://git.vdm.dev/joomla/Component-Builder/src/commit/8548530b6da9494470cdc7e095e7f215c0d26ff2/media/js/field.js#L531-L932) needs refactoring. Should you understand what its doing and have the courage to convert it to pure JavaScript... then please go-head. You can ignore to top part of the [field.js](https://git.vdm.dev/joomla/Component-Builder/src/commit/8548530b6da9494470cdc7e095e7f215c0d26ff2/media/js/field.js) for now. Since the code is maintained in my JCB how this will work, is you will in your Joomla 5 JCB hack the code until it is correct, and past the all the code here as a ```codeblock``` and I will take it from there to add it to JCB. ### Fixing the fields Well the above refactoring should fix this, since our error is: ![image](https://git.vdm.dev/attachments/4335a3ad-98d1-4f1f-ab73-b4b4f64a02f8) which is on [line 576](https://git.vdm.dev/joomla/Component-Builder/src/commit/8548530b6da9494470cdc7e095e7f215c0d26ff2/media/js/field.js#L576), we are still working with repeatable fields in the Joomla 3 way, fixing this will fix most of the issues... but not all of them, therefore a whole refactoring is needed.

image.png

18 KiB

jjs commented

2024-03-25 21:12:42 +00:00

Author

We'll wish I could understand it all, but I don't.

I asked Chatgpt to help, is that allowed?? well any it should be converted to pure JavaScript now:

document.addEventListener("DOMContentLoaded", function() {
    // get type value
    var fieldtype = document.querySelector("#jform_fieldtype option:checked").value;
    getFieldTypeProperties(fieldtype, false);
    // get the linked details
    getLinked();
    // get the validation rules
    getValidationRulesTable();
    // set button to create more fields
    addButton('validation_rule', 'validation_rules_header', 2);
    // get the field type text
    var fieldText = document.querySelector("#jform_fieldtype option:checked").textContent.toLowerCase();
    // now check if database input is needed
    dbChecker(fieldText);
    // check and load all the custom code edit buttons
    getEditCustomCodeButtons();
});

// the options row id key
var rowIdKey = 'properties';

function getFieldTypeProperties(fieldtype, db) {
    getCodeFrom_server(fieldtype, 'type', 'type', 'fieldTypeProperties').then(function(result) {
        if (result.subform) {
            // load the list of properties
            propertiesArray = result.nameListOptions;
            // remove previous forms if exist
            document.querySelectorAll('.prop_removal').forEach(function(el) {
                el.remove();
            });
            // hide notice
            document.querySelector('.note_select_field_type').closest('.control-group').remove();
            // append to note_filter_information class
            document.querySelector('.note_filter_information').closest('.control-group').insertAdjacentHTML('afterbegin', result.extra);
            // append to note_filter_information class
            if (result.textarea) {
                result.textarea.forEach(function(tField) {
                    // append to note_filter_information class
                    document.querySelector('.note_filter_information').closest('.control-group').insertAdjacentHTML('afterbegin', tField);
                });
            }
            // append to note_filter_information class
            document.querySelector('.note_filter_information').closest('.control-group').insertAdjacentHTML('afterbegin', result.subform);
            // add the watcher
            rowWatcher();
            // initialize the new form
            document.querySelectorAll('div.subform-repeatable').forEach(function(el) {
                el.subformRepeatable();
            });
            // update all the list fields to only show items not selected already
            propertyDynamicSet();
            // set the field type info
            document.getElementById('help').remove();
            document.querySelector('.helpNote').insertAdjacentHTML('beforeend', '<div id="help">' + result.description + '<br />' + result.values_description + '</div>');
            // load the database properties if not set and defaults were found
            if (db && result.database) {
                // update datatype
                document.getElementById('jform_datatype').value = result.database.datatype;
                document.getElementById('jform_datatype').dispatchEvent(new Event("change"));
                // be sure to remove from no required
                updateFieldRequired('datatype', 0);
                // update datalength
                document.getElementById('jform_datalenght').value = result.database.datalenght;
                document.getElementById('jform_datalenght').dispatchEvent(new Event("change"));
                // be sure to remove from no required
                updateFieldRequired('datalenght', 0);
                // load the datalength_other if needed
                if ('Other' === result.database.datalenght) {
                    document.getElementById('jform_datalenght_other').value = result.database.datalenght_other;
                    // be sure to remove from no required
                    updateFieldRequired('datalenght_other', 0);
                }
                // update datadefault
                document.getElementById('jform_datadefault').value = result.database.datadefault;
                document.getElementById('jform_datadefault').dispatchEvent(new Event("change"));
                // load the datadefault_other if needed
                if ('Other' === result.database.datadefault) {
                    document.getElementById('jform_datadefault_other').value = result.database.datadefault_other;
                    // be sure to remove from no required
                    updateFieldRequired('datadefault_other', 0);
                }
                // update indexes
                document.getElementById('jform_indexes').value = result.database.indexes;
                document.getElementById('jform_indexes').dispatchEvent(new Event("change"));
                // be sure to remove from no required
                updateFieldRequired('indexes', 0);
                // update store
                document.getElementById('jform_store').value = result.database.store;
                document.getElementById('jform_store').dispatchEvent(new Event("change"));
                // be sure to remove from no required
                updateFieldRequired('store', 0);
            }
        }
    });
}

function getFieldPropertyDesc(field, targetForm) {
    // get the ID
    var id = field.id;
    // build the target array
    var target = id.split('__');
    // get property value
    var property = field.

We'll wish I could understand it all, but I don't. I asked Chatgpt to help, is that allowed?? well any it should be converted to pure JavaScript now: ``` document.addEventListener("DOMContentLoaded", function() { // get type value var fieldtype = document.querySelector("#jform_fieldtype option:checked").value; getFieldTypeProperties(fieldtype, false); // get the linked details getLinked(); // get the validation rules getValidationRulesTable(); // set button to create more fields addButton('validation_rule', 'validation_rules_header', 2); // get the field type text var fieldText = document.querySelector("#jform_fieldtype option:checked").textContent.toLowerCase(); // now check if database input is needed dbChecker(fieldText); // check and load all the custom code edit buttons getEditCustomCodeButtons(); }); // the options row id key var rowIdKey = 'properties'; function getFieldTypeProperties(fieldtype, db) { getCodeFrom_server(fieldtype, 'type', 'type', 'fieldTypeProperties').then(function(result) { if (result.subform) { // load the list of properties propertiesArray = result.nameListOptions; // remove previous forms if exist document.querySelectorAll('.prop_removal').forEach(function(el) { el.remove(); }); // hide notice document.querySelector('.note_select_field_type').closest('.control-group').remove(); // append to note_filter_information class document.querySelector('.note_filter_information').closest('.control-group').insertAdjacentHTML('afterbegin', result.extra); // append to note_filter_information class if (result.textarea) { result.textarea.forEach(function(tField) { // append to note_filter_information class document.querySelector('.note_filter_information').closest('.control-group').insertAdjacentHTML('afterbegin', tField); }); } // append to note_filter_information class document.querySelector('.note_filter_information').closest('.control-group').insertAdjacentHTML('afterbegin', result.subform); // add the watcher rowWatcher(); // initialize the new form document.querySelectorAll('div.subform-repeatable').forEach(function(el) { el.subformRepeatable(); }); // update all the list fields to only show items not selected already propertyDynamicSet(); // set the field type info document.getElementById('help').remove(); document.querySelector('.helpNote').insertAdjacentHTML('beforeend', '<div id="help">' + result.description + '<br />' + result.values_description + '</div>'); // load the database properties if not set and defaults were found if (db && result.database) { // update datatype document.getElementById('jform_datatype').value = result.database.datatype; document.getElementById('jform_datatype').dispatchEvent(new Event("change")); // be sure to remove from no required updateFieldRequired('datatype', 0); // update datalength document.getElementById('jform_datalenght').value = result.database.datalenght; document.getElementById('jform_datalenght').dispatchEvent(new Event("change")); // be sure to remove from no required updateFieldRequired('datalenght', 0); // load the datalength_other if needed if ('Other' === result.database.datalenght) { document.getElementById('jform_datalenght_other').value = result.database.datalenght_other; // be sure to remove from no required updateFieldRequired('datalenght_other', 0); } // update datadefault document.getElementById('jform_datadefault').value = result.database.datadefault; document.getElementById('jform_datadefault').dispatchEvent(new Event("change")); // load the datadefault_other if needed if ('Other' === result.database.datadefault) { document.getElementById('jform_datadefault_other').value = result.database.datadefault_other; // be sure to remove from no required updateFieldRequired('datadefault_other', 0); } // update indexes document.getElementById('jform_indexes').value = result.database.indexes; document.getElementById('jform_indexes').dispatchEvent(new Event("change")); // be sure to remove from no required updateFieldRequired('indexes', 0); // update store document.getElementById('jform_store').value = result.database.store; document.getElementById('jform_store').dispatchEvent(new Event("change")); // be sure to remove from no required updateFieldRequired('store', 0); } } }); } function getFieldPropertyDesc(field, targetForm) { // get the ID var id = field.id; // build the target array var target = id.split('__'); // get property value var property = field. ```

Llewellyn commented

2024-03-26 04:22:26 +00:00

Owner

Changing the code without testing it is not ideal "using ChatGPT" further more this is not all the code that need changing... there is 294 more lines.

With each change the area must be tested, and ensured that the change delivers the expected outcome, else its not really a production ready outcome.

I will be giving some time to this today, or later this week... we will see.

Changing the code without testing it is not ideal "using ChatGPT" further more this is not all the code that need changing... there is 294 more lines. With each change the area must be tested, and ensured that the change delivers the expected outcome, else its not really a production ready outcome. I will be giving some time to this today, or later this week... we will see.

Llewellyn referenced this issue

2024-03-26 10:03:18 +00:00

JCB 5.0.0 Alpha-3 Error: 500 jquery::ui not found. #1076

Robot referenced this issue from a commit

2024-03-26 20:32:03 +00:00

Release of v4.0.0-alpha7

Robot referenced this issue from a commit

2024-03-26 20:45:17 +00:00

Release of v5.0.0-alpha7

Robot referenced this issue from a commit

2024-03-26 20:51:34 +00:00

Release of v5.0.0-alpha7

jjs commented

2024-03-27 21:06:43 +00:00

Author

Seems to be solved.
Thanks a lot.

Seems to be solved. Thanks a lot.

jjs closed this issue

2024-03-27 21:06:44 +00:00

Llewellyn commented

2024-03-28 10:16:40 +00:00

Owner

Nope... we have begun. But there is still so much to do, I have not refactored the JS away from jQuery, and the same dynamic nature we have in Joomla 3 is not yet functional in Joomla 4 and 5.

But yes the view is working again. You can say the car is running but the air-con and speed control is not working :)

We can leave this issue as resolved... but I wanted to state that the area still needs much attention.

Nope... we have begun. But there is still so much to do, I have not refactored the JS away from jQuery, and the same dynamic nature we have in Joomla 3 is not yet functional in Joomla 4 and 5. But yes the view is working again. You can say the car is running but the air-con and speed control is not working :) We can leave this issue as resolved... but I wanted to state that the area still needs much attention.

👍 1

jjs commented

2024-04-07 14:47:18 +00:00

Author

Thanks!

[BUG]: The field view is not working as expected JCB 5.0.0-Alpha6 #1096

What Happened?

Steps to reproduce the Bug

Which Joomla version are you compiling in?

Which PHP version are you compiling in?

Which Joomla versions are you targeting?

Which PHP version are you targeting?

Which Web server is JCB running on?

Which Relational Database is JCB running on?

Which OS is JCB running on?

Which JCB version are you using?

Which Joomla version is JCB installed on?

Where in JCB did this issue occur?

On which browsers did you encounter the issue?

Additional Comments

how can you help?

Fixing the fields