Disable/dim the Save button until step inputs have been changed

[tech4GT]

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The Issue:
We need to disable the Save button which is used to save changes to a step until changes have been made to the step
Here's where the Save button is made:

image-sequencer/examples/lib/defaultHtmlStepUi.js

Lines 94 to 96 in 630eb77

	$(step.ui.querySelector("div.details")).append(
	"<p><button class='btn btn-default btn-save'>Save</button></p>"
	);

We can use the same kinds of selectors to modify it, add more text, change the styling -- using Bootstrap styles:

https://getbootstrap.com/docs/3.3/css/

[gitmate]

GitMate.io thinks the contributor most likely able to help you is @jywarren.

A possibly related issue is #231 ("Save as module" button on Dynamic module).

[gitmate]

GitMate.io thinks the contributor most likely able to help you is @jywarren.

A possibly related issue is #231 ("Save as module" button on Dynamic module).

[ebinxavier]

I would like to contribute something to this project. I am a first-timer, I have cloned the project locally and I need to modify this file "image-sequencer/examples/lib/defaultHtmlStepUi.js" right? Please help me I am new to github and open source.

[tech4GT]

Hello there!! Welcome to the community!!😁

[tech4GT]

So what you should do is fork this project and then clone your own fork. Create a new branch and do the changes on it, commit the changes and push them onto your github fork. Then You can open a Pull request to this repository with your work.

[ebinxavier]

okay, I have forked and cloned the source. Let me familiarize the project. I will try to do my best. :)

[ronmaple]

Hello,

This is my first time trying to contribute. So far I'm just trying to understand the issue. I've installed and run locally, and tried it out on the 'brightness' field as my first attempt.

So basically, the displayed button on the screen shot is one of the buttons we're trying to disable when the field is empty?

What I did was I just selected the form with jquery (var trythis), and evaluated for an empty field that executes a disable attribute on the selected button.

So essentially this is the idea, but either create a series of code to manually select and change each one, or a more dynamic 'one function changes all' type of thing?

[tech4GT]

Hello @ronmaple Welcome to the community first of all!!😁
What we want here is that the Save button for each step shall remain disabled until the value of the field is changed. Right now as the user starts typing into the field of selects a new option from the dropdown the Save button should become enabled. Down the line we will add some form of verification for the inputs that are typed in the fields as well.

[tech4GT]

I think you should write a function with the following signature and set it on the change() of every field.

function toggleSaveButton(field){
// Find the associated save with this field and enable or disable it based on the value
}

You can find the documentation for jQuery change() here https://api.jquery.com/change/

[ronmaple]

Sorry for the late response, I've been busy.

I'm attempting again today and I'm starting off with the Brightness module to test.

Note that I also changed the creation of the Save button to always disable on load - not sure if this is something you guys would desire.

It's hard coded for now. I'll figure out how to dynamically change them, hopefully in the next couple of days.

[ronmaple]

Looking into using paramName to select for the fields... and have a switch statement on a change event listener for inputDesc.type

[Mridul97]

Hello I am new to github and would like to contribute something to this project, I have forked this project and cloned my own fork. Can I work on this issue ? I am a first timer, so I may require some help.

[tech4GT]

Hi @Mridul97 welcome to publiclab 😄
You can go ahead for sure!

[Mridul97]

I tried to start a local environment to test the UI. I did these steps :

1. Made a package.json file using npm init.
2. Installed image-sequencer using npm install image-sequencer --save
3. Tried to run a local environment using npm start
   But I could not run a local environment, I got errors. Please help me how to run a local environment to test UI. This is my first time working on an open source project.

[Mridul97]

I also tried to do the following steps :-

1. Go to the project folder.
2. Installed all the dependencies in package.json using npm install
3. Tried to run a local environment using npm start

But it failed again, I got many errors. Please help me how to run a local environment to test UI. I have tried all the steps given in the README.md but not able to run the local environment.
Please Help!!

[tech4GT]

Hey there! Sorry for the trouble. So you need to

• fork and clone the project
• run npm I
• run npm start

[Mridul97]

Hey I tried those steps but I am getting errors. Please have a look.

[tech4GT]

Oh actually you don't have grunt installed!!
Try this npm install -g grunt grunt-cli

[Mridul97]

Yes, that solved the errors. Thank you

[Mridul97]

Hey, I made a change to disable/enable 'save' button. Please take a look. Pull request #322.

[jywarren]

Solved! Thanks!