search

Draggable / formeo

Drag & Drop Form Builder
http://draggable.github.io/formeo/
MIT License
533 stars 197 forks source link

GitHub resources not available #359

Closed Adrian-PIMSS closed 3 weeks ago

Adrian-PIMSS commented 1 month ago

The following resources are no longer available on GitHub: https://draggable.github.io/formeo/assets/js/formeo.min.js https://draggable.github.io/formeo/assets/css/formeo.min.css

Here is an example when navigating to the css file in the browser:

image

sops21 commented 3 weeks ago

Also https://draggable.github.io/formeo/assets/img/formeo-sprite.svg and https://draggable.github.io/formeo/assets/lang/en-US.lang

are having the same issues and breaking the library.

kevinchappell commented 3 weeks ago

Yikes. That's pretty bad I will have this fixed tomorrow

kevinchappell commented 3 weeks ago

All of these assets should now be restored

https://draggable.github.io/formeo/assets/js/formeo.min.js https://draggable.github.io/formeo/assets/css/formeo.min.css https://draggable.github.io/formeo/assets/img/formeo-sprite.svg https://draggable.github.io/formeo/assets/lang/en-US.lang

Adrian-PIMSS commented 2 weeks ago

The JavaScript asset is now available, however the minified CSS is not available:

image

kevinchappell commented 2 weeks ago

@Adrian-PIMSS can you try now? https://draggable.github.io/formeo/assets/css/formeo.min.css

Adrian-PIMSS commented 2 weeks ago

The asset formeo.min.css is now available.

However, we are still having issues with the updated component. There are differences between the component used on the demo site compared to the production version which we are using.

On the demo site https://draggable.github.io/formeo/ I added a Header, Paragraph, Divider, Select and Text Inout. This is what was displayed: image

Note that the demo site uses demo.min.css and demo.min.js.

Adding the same controls on our website, gives the following results:

image

The name of each control is missing. The 6 dots selector is missing. The border of each control is missing. Our website is using the formeo.min.css and formeo.min.js versions.

This is now critical for us because our application that is live in production is broken.

kevinchappell commented 2 weeks ago

The asset formeo.min.css is now available.

However, we are still having issues with the updated component. There are differences between the component used on the demo site compared to the production version which we are using.

On the demo site https://draggable.github.io/formeo/ I added a Header, Paragraph, Divider, Select and Text Inout. This is what was displayed: image

Note that the demo site uses demo.min.css and demo.min.js.

Adding the same controls on our website, gives the following results:

image

The name of each control is missing. The 6 dots selector is missing. The border of each control is missing. Our website is using the formeo.min.css and formeo.min.js versions.

This is now critical for us because our application that is live in production is broken.

Thank you for the detailed feedback, I will look further into this issue.

The demo site uses formeo by way of import syntax but demos on codepen use formeo the way you described. Can you compare your app to the codepen demo? https://codepen.io/kevinchappell/pen/NrXoRw

kevinchappell commented 2 weeks ago

:tada: This issue has been resolved in version 2.2.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

kevinchappell commented 2 weeks ago

@Adrian-PIMSS Can you have another try with the latest version 2.2.0? formeo now attempts to load version specific style and svg resources, if they are not present yet it will load the fallback which is the latest version hosted on github pages. What this means is now you shouldn't need to manually define style and svg resources. see minimal example below.

<!DOCTYPE html>
  <html lang="en" xml:lang="en">
  <head>
    <script src="https://draggable.github.io/formeo/assets/js/formeo.min.js"></script>
    <title>Formeo Basic Test</title>
  </head>
  <body>
    <div id="formeo-editor"></div>
    <script>
      const formeo = new FormeoEditor({ editorContainer: '#formeo-editor' });
    </script>
  </body>
</html>
Adrian-PIMSS commented 2 weeks ago

Ok we shall try that. I will get back to you with the results.

Adrian-PIMSS commented 2 weeks ago

@kevinchappell We have now tested the change you suggested and that has overcome the problem with the 6 dots selector:

image

The outlines for boxes and titles (Header, Number and so on) are now also correctly displayed. Thanks for resolving this.

However, we do now have a new issue. When we attempt to save the design of the form, then it generates an error.

image

We have traced this to the object that holds the details for the Column. The property for ClassName was previously a string, but it is now expecting an array of strings. We can get the data for the form design to save if we change the ClassName to an array. See here:

image

But, we have been using the formeo control for a number of years and our customers have hundreds of forms defined with the Column object holding the ClassName as a string. When we try to load the forms after modifying the ClassName to an array then we get an error. We cannot feasibly amend all the data for our customers to change it to an array. Can you advise on this please.

kevinchappell commented 2 weeks ago

The className should accept string or array, i will ensure it does today. Can you provide some test data so i can replicate how you're using formeo?

kevinchappell commented 2 weeks ago

@Adrian-PIMSS i am not able to replicate the issue so I think I need more information to help. I tried form data with column classname as a string and as string[] and both worked. The class definition for columns has not changed in 6 years and I am not sure where you are getting the schema you are referring to. image

We have traced this to the object that holds the details for the Column.

can you link to it in the repo? the screenshot of the class schema is not from this project

Adrian-PIMSS commented 1 week ago

Hi @kevinchappell - The screenshot I provided is from our code for the objects we use in our application to represent the data from the formeo control when a form design is made. I will get a sample payload across to you tomorrow.

Adrian-PIMSS commented 4 days ago

Hello @kevinchappell Sorry it's taken a few days to get back to you. Here is an example where we created a basic form with only a Header, Textbox and Number on the form. Here is a JSON view of the payload that will be saved for that basic form:

image

Here is the payload itself:

{"Template":"{\"id\":\"ac62994f-e1b9-4880-b523-b23a2d568e9b\",\"stages\":{\"2d7d7981-04e2-4fe7-95ec-834ebe94d6a9\":{\"children\":[\"b2bb51a2-f37f-4255-9190-d51ab7fcd2d3\",\"d36e2b1e-2942-4e38-8686-d1b8414d99e3\",\"8cf7df6b-9fdc-4f03-bbe2-bb41b82b5922\"],\"id\":\"2d7d7981-04e2-4fe7-95ec-834ebe94d6a9\"}},\"rows\":{\"b2bb51a2-f37f-4255-9190-d51ab7fcd2d3\":{\"config\":{\"fieldset\":false,\"legend\":\"\",\"inputGroup\":false},\"children\":[\"1c71ea88-5ab0-41c5-951e-5c53f4a4b69b\"],\"className\":[\"formeo-row\"],\"id\":\"b2bb51a2-f37f-4255-9190-d51ab7fcd2d3\"},\"d36e2b1e-2942-4e38-8686-d1b8414d99e3\":{\"config\":{\"fieldset\":false,\"legend\":\"\",\"inputGroup\":false},\"children\":[\"eb2d3f15-e6d2-4783-a70f-6e213a4fbcac\"],\"className\":[\"formeo-row\"],\"id\":\"d36e2b1e-2942-4e38-8686-d1b8414d99e3\"},\"8cf7df6b-9fdc-4f03-bbe2-bb41b82b5922\":{\"config\":{\"fieldset\":false,\"legend\":\"\",\"inputGroup\":false},\"children\":[\"0b1f44f3-e740-4527-a55b-58ebef9a031d\"],\"className\":[\"formeo-row\"],\"id\":\"8cf7df6b-9fdc-4f03-bbe2-bb41b82b5922\"}},\"columns\":{\"1c71ea88-5ab0-41c5-951e-5c53f4a4b69b\":{\"config\":{\"width\":\"100%\"},\"children\":[\"c9b2078f-05c8-4f98-82af-68c01640126c\"],\"className\":[\"formeo-column\"],\"id\":\"1c71ea88-5ab0-41c5-951e-5c53f4a4b69b\"},\"eb2d3f15-e6d2-4783-a70f-6e213a4fbcac\":{\"config\":{\"width\":\"100%\"},\"children\":[\"929b7c6d-fe6d-47a1-b6d2-748aae0eca52\"],\"className\":[\"formeo-column\"],\"id\":\"eb2d3f15-e6d2-4783-a70f-6e213a4fbcac\"},\"0b1f44f3-e740-4527-a55b-58ebef9a031d\":{\"config\":{\"width\":\"100%\"},\"children\":[\"08f91142-fd27-4235-bc3b-fdbf3483ebc1\"],\"className\":[\"formeo-column\"],\"id\":\"0b1f44f3-e740-4527-a55b-58ebef9a031d\"}},\"fields\":{\"c9b2078f-05c8-4f98-82af-68c01640126c\":{\"conditions\":[{\"if\":[{\"source\":\"\",\"sourceProperty\":\"value\",\"comparison\":\"equals\",\"target\":\"\",\"targetProperty\":\"value\"}],\"then\":[{\"target\":\"\",\"targetProperty\":\"value\",\"assignment\":\"equals\",\"value\":\"\"}]}],\"tag\":\"h1\",\"attrs\":{\"tag\":[{\"label\":\"H1\",\"value\":\"h1\",\"selected\":true},{\"label\":\"H2\",\"value\":\"h2\",\"selected\":false},{\"label\":\"H3\",\"value\":\"h3\",\"selected\":false},{\"label\":\"H4\",\"value\":\"h4\",\"selected\":false}],\"className\":\"\"},\"config\":{\"label\":\"Header\",\"hideLabel\":true,\"editableContent\":true},\"meta\":{\"group\":\"html\",\"icon\":\"header\",\"id\":\"html.header\"},\"content\":\"Header\",\"action\":{},\"id\":\"c9b2078f-05c8-4f98-82af-68c01640126c\"},\"929b7c6d-fe6d-47a1-b6d2-748aae0eca52\":{\"conditions\":[{\"if\":[{\"source\":\"\",\"sourceProperty\":\"value\",\"comparison\":\"equals\",\"target\":\"\",\"targetProperty\":\"value\"}],\"then\":[{\"target\":\"\",\"targetProperty\":\"value\",\"assignment\":\"equals\",\"value\":\"\"}]}],\"tag\":\"input\",\"attrs\":{\"required\":false,\"type\":\"text\",\"className\":\"\"},\"config\":{\"label\":\"Text Input\"},\"meta\":{\"group\":\"common\",\"icon\":\"text-input\",\"id\":\"text-input\"},\"id\":\"929b7c6d-fe6d-47a1-b6d2-748aae0eca52\"},\"08f91142-fd27-4235-bc3b-fdbf3483ebc1\":{\"conditions\":[{\"if\":[{\"source\":\"\",\"sourceProperty\":\"value\",\"comparison\":\"equals\",\"target\":\"\",\"targetProperty\":\"value\"}],\"then\":[{\"target\":\"\",\"targetProperty\":\"value\",\"assignment\":\"equals\",\"value\":\"\"}]}],\"tag\":\"input\",\"attrs\":{\"type\":\"number\",\"required\":false,\"className\":\"\"},\"config\":{\"label\":\"Number\"},\"meta\":{\"group\":\"common\",\"icon\":\"hash\",\"id\":\"number\"},\"id\":\"08f91142-fd27-4235-bc3b-fdbf3483ebc1\"}}}"}1

We save this payload to the database, so it can be loaded when we are using the form to capture data. We use objects that we have defined to represent the structure of the payload, one of these is a Columns object to represent the column in the Formeo control. This has always had the property ClassName defined as a string, but since the recent updates (20 Oct 2024) it has given an error when trying to put data into the Columns object because it wants to put an array in the ClassName property instead. This is the code change we had to make in order to get it to save:

image

However, we have hundreds of forms saved already with their layout having the ClassName defined as a string. When these forms attempt to load, it gives an error because the data has ClassName stored as a string, but it is attempting to put in into the array object that we have had to change.

I hope this makes sense! If you need more info please let me know.

kevinchappell commented 4 days ago

@Adrian-PIMSS I understand your concern about impacting customers however I am 95% sure this error is coming from a schema you have defined in your software. The changes that shipped on October 20th were:

The line change you shared does not exist in the Formeo project and all components (Stage, Row, Column and Field) use the same base class of Component so any change to className definition would have been done there and impacted all components.

Additionally, I created a Codepen with the payload you shared and did not observe any issue. I then created a second version where I modified the payload so one column had a string className and the another has a string[] className and again there was no issue.

What version of formeo are you experiencing the issue with? Can you create an example online that reproduces the issue?

kevinchappell commented 4 days ago

Update: I was able to kind of replicate the error. it doesnt happen in formeo itself but I auto-generated a schema which also defined className as a string. This is technically a different issue than the one we've been discussing on so I created a new one we can follow-up on.

Adrian-PIMSS commented 3 days ago

Many thanks for continuing to look at this @kevinchappell I can see the new issue you have created.