Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more/ Remove button #3

Merged
merged 3 commits into from
Oct 6, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions Web/Controller/Bids.hs
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,7 @@ createMailBid bid = do

createMailBid mailBid

Just mailBid
|> pure
Just mailBid |> pure
else
pure Nothing

Expand Down
1 change: 1 addition & 0 deletions Web/Controller/Items.hs
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Config
instance Controller ItemsController where
action ItemsAction = do
items <- query @Item
|> orderByDesc #id
|> fetch
>>= collectionFetchRelated #bids

Expand Down
65 changes: 42 additions & 23 deletions Web/View/Items/New.hs
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ data NewView = NewView { item :: Item, bidSteps :: [BidStep] }

instance View NewView where
html NewView { .. } = [hsx|

<script src={assetPath "/multiple-field.js"} />

<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href={ItemsAction}>Items</a></li>
Expand All @@ -19,37 +22,53 @@ renderForm :: Item -> [BidStep] -> Html
renderForm item bidSteps = formFor item [hsx|
{(textField #title)}

{forEachWithIndex bidSteps renderFormBidStep}
<div class="multiple-field-wrapper border p-4 my-4">

<div class="multiple-field-inner">
{forEachWithIndex bidSteps renderFormBidStep}

</div>



<div class="multiple-field-add btn btn-secondary mt-4">Add Another Bid Step</div>
</div>

{submitButton}
|]

-- renderFormBidStep :: BidStep -> Html
renderFormBidStep (index, bidStep) = [hsx|
<h3>Bid Step #{index + 1}</h3>
<div class="form-group">
<label>
Min
</label>
<input type="number" name="min" value="{get #min bidStep}" class={classes ["form-control", ("is-invalid", isInvalidMin)]}/>
{minFeedback}
</div>
<fieldset class="multiple-field border p-4 my-4">
<div class="d-flex flex-row justify-content-between">
<h3>Bid Step</h3>
<a class="multiple-field-remove" href="javascript:void(0)">X</a>
</div>

<div class="form-group">
<label>
Max
</label>
<input type="number" name="max" value="{get #max bidStep}" class={classes ["form-control", ("is-invalid", isInvalidMax)]}/>
{maxFeedback}
</div>
<div class="form-group">
<label>
Min
</label>
<input type="number" name="min" value="{get #min bidStep}" class={classes ["form-control", ("is-invalid", isInvalidMin)]}/>
{minFeedback}
</div>

<div class="form-group">
<label>
Step
</label>
<input type="number" name="max" value="{get #step bidStep}" class={classes ["form-control", ("is-invalid", isInvalidStep)]}/>
{stepFeedback}
</div>
<div class="form-group">
<label>
Max
</label>
<input type="number" name="max" value="{get #max bidStep}" class={classes ["form-control", ("is-invalid", isInvalidMax)]}/>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To fix the console warnings try this:

-value="{get #max bidStep}"
+value={inputValue (get #max bidStep)}

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mpscholten 👋

If I change to value="... I get

The specified value "{inputValue (get #min bidStep)}" cannot be parsed, or is out of range.

Removing the quotes (") results with no errors, however the default value is now set to 0 (instead of remaining blank).

Selection_999(283)

btw, if I manually remove the 0, and try to submit, I'd still get an error:

Selection_999(284)

Selection_999(285)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes the quotes need to be removed :)

Try this:

value={if didChange #max bidStep
    then inputValue (get #max bidStep)
    else ""
}

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, the if didChange did the trick.

{maxFeedback}
</div>

<div class="form-group">
<label>
Step
</label>
<input type="number" name="max" value="{get #step bidStep}" class={classes ["form-control", ("is-invalid", isInvalidStep)]}/>
{stepFeedback}
</div>
</fieldset>
|]
where
isInvalidMin = isJust (getValidationFailure #min bidStep)
Expand Down
50 changes: 50 additions & 0 deletions static/multiple-field.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
$(document).on('ready turbolinks:load', function () {
// This is called on the first page load *and* also when the page is changed by turbolinks.

$(this).find('form .multiple-field-add')
// Main wrapper.
.parent('fieldset.multiple-field-wrapper')
// Find the first element.
.find('fieldset.multiple-field');

$(this).find('form .multiple-field-add').click(function() {
// Copy the first fieldset, without the values.
$(this)
// Main wrapper.
.parents('div.multiple-field-wrapper')
// Find the first element.
.find('fieldset.multiple-field').first()
// Clone (along with handlers) and append.
.clone(true).appendTo('div.multiple-field-inner')
// Reset values.
.find('input').val('');

// Bind and new Remove
attachRemoveMultipleField();

});

const attachRemoveMultipleField = function() {
$(document).find('form .multiple-field-remove').click(function() {
const $parent = $(this).parents('div.multiple-field-wrapper');
const numberOfMultipleField = $parent.find('fieldset.multiple-field').length;

if (numberOfMultipleField === 1) {
// Keep the element, but reset its values.
$(this).parents('fieldset.multiple-field').find('input').val('');
}
else {
// Remove element.
$(this).parents('fieldset.multiple-field').remove();
}

});
}

attachRemoveMultipleField();





});