Open nileshtrivedi opened 3 years ago
I have implemented the first version of AJAX-powered FiveStarComponent.
Code is in: app/components/five_star_component.html.erb and a demo can be seen at /components.
app/components/five_star_component.html.erb
<%= form_with(model: @review) do |form| %> <div x-data="{ val: <%= @review.overall_score.to_json %>, orig: <%= @review.overall_score.to_json %> }" class="flex ml-8 cursor-pointer text-orange-600" @click="orig = val; $nextTick(() => { Rails.fire($el.parentElement,'submit') });" > <input type="number" name="review[overall_score]" :value="orig" class="hidden"/> <span class="text-gray-400" @mouseenter="val = null" @mouseleave="val = orig">⨯</span> <template x-for="item in [1,2,3,4,5]"> <span x-text="val >= item ? '★' : '☆'" @mouseenter="val = item" @mouseleave="val = orig"></span> </template> </div> <input type="hidden" name="review[item_id]" value="<%= @review.item_id %>" /> <% end %>
Listing down all remaining tasks for this here:
mouseenter
mouseleave
I have implemented the first version of AJAX-powered FiveStarComponent.![image](https://user-images.githubusercontent.com/19304/97776767-14511c80-1b91-11eb-9212-a2525d488b96.png)
Code is in:
app/components/five_star_component.html.erb
and a demo can be seen at /components.Listing down all remaining tasks for this here:
mouseenter
ormouseleave
events