We are a group of developers working on a web application that accepts forms filled and sent by our users and present it in an overall view. Our main form view looks like this:
There are multiple forms on this page. The form on the left is the parent form which contains general questions about the project. The right panels are more detailed questions and are about sub-projects. The forms are lengthy and contain different types of properties (form elements) in them.
The parent form is static and is opened on page load. We have given no options to close or minimize it. The right panels (child forms) are collapsed by default and open by click and the contents are then rendered. This is done to reduce the page load time.
I have annotated the picture so I don't have to explain everything myself. Everything in the picture that has a rectangle around it is a (Backbone) view by itself.
To make it even more complex, look at this other picture:
Look at the photo slider view. Each slide in that slider is again, a view by itself. The manipulation buttons are rendered along with each slide so moving them somewhere else (like next to the "move left/right" buttons) is quite a pain. That is why we have not done it.
Now look at the grand child form's fields that I have marked as "properties with relationships". If you change them, they become highlighted (with a yellow hollow color around them) and that changes a whole lot other things in the "child form" and the "parent form". We have managed that kind of relationship when saving the page but this kind of relationship adds to the complexity of the view.
I guess you already have figured it out by now but I'm going to say it anyway: the code has grown out of hand. It is truly a can of worms. There are more than 30 functions in the base view file and 15 other views attached to this page. Multiple people have worked on this view and because it is a big file (base file: 2500 LOC), everybody has just tried to do their bit of task and not think about refactoring or simplifying the design of the page. The page is flawed because it is not extensible. For example, the grand-child forms have two more levels of child forms and we cannot add them to the page. We have been discussing for days on how to redesign this page but none of us seems to come up with a good idea.
Now the question here is how can we redesign this page so it keeps all the functionality but with much simpler code?
We are OK with a total redesign, a total new concept. We want to write the whole thing from scratch. All your ideas are appreciated.
