Files
danbooru/app/views/posts/partials/show/_edit.html.erb
evazion b3a4c7aa43 posts: rewrite tag counter widget in React.
Rewrite the tag counter widget (the one above the tag edit box) to use
React. This is a trial run for using React elsewhere.

We actually use Preact instead of React because it's lighter weight.
We use Mobx for state management because it's cleaner than React's
setState or useState.

This incidentally fixes a couple bugs:

* The tag counter wasn't updated when deleting tags with backspace
* The tag counter wasn't updated when pasting in new tags.
2020-08-02 16:48:45 -05:00

71 lines
2.9 KiB
Plaintext

<% unless CurrentUser.user.is_builder? %>
<div style="margin-bottom: 1em;">
<p>Before editing, read the <%= link_to "how to tag guide", wiki_page_path(:id => "howto:tag") %>.</p>
</div>
<% end %>
<%= render "sources/info" %>
<%= edit_form_for(post, html: { id: "form" }) do |f| %>
<%= f.input :tags_query, as: :hidden, input_html: { id: nil, name: "tags_query", value: params[:q] } %>
<%= f.input :pool_id, as: :hidden, input_html: { id: nil, name: "pool_id", value: params[:pool_id] } %>
<%= f.input :favgroup_id, as: :hidden, input_html: { id: nil, name: "favgroup_id", value: params[:favgroup_id] } %>
<%= f.input :old_tag_string, as: :hidden, input_html: { value: post.tag_string } %>
<%= f.input :old_parent_id, as: :hidden, input_html: { value: post.parent_id } %>
<%= f.input :old_source, as: :hidden, input_html: { value: post.source } %>
<%= f.input :old_rating, as: :hidden, input_html: { value: post.rating } %>
<% if post.is_rating_locked? %>
This post is rating locked.
<% else %>
<%= f.input :rating, collection: [["Explicit", "e"], ["Questionable", "q"], ["Safe", "s"]], as: :radio_buttons, boolean_style: :inline %>
<% end %>
<fieldset class="inline-fieldset">
<label>Notes</label>
<%= f.input :has_embedded_notes, label: "Embed notes", as: :boolean, boolean_style: :inline, disabled: post.is_note_locked? %>
</fieldset>
<% if policy(post).can_lock_rating? || policy(post).can_lock_notes? || policy(post).can_lock_status? %>
<fieldset class="inline-fieldset">
<label>Lock</label>
<% if policy(post).can_lock_rating? %>
<%= f.input :is_rating_locked, label: "Rating", as: :boolean, boolean_style: :inline %>
<% end %>
<% if policy(post).can_lock_notes? %>
<%= f.input :is_note_locked, label: "Notes", as: :boolean, boolean_style: :inline %>
<% end %>
<% if policy(post).can_lock_status? %>
<%= f.input :is_status_locked, label: "Status", as: :boolean, boolean_style: :inline %>
<% end %>
</fieldset>
<% end %>
<%= f.input :parent_id, label: "Parent", input_html: { size: 60 }, as: :string %>
<%= f.input :source, input_html: { size: 60 } %>
<div class="input fixed-width-container" id="tags-container">
<div class="header">
<%= f.label :tag_string, "Tags" %>
<span class="options">
<span data-tag-counter data-for="#post_tag_string"></span>
<a href="javascript:void(0)"><i id="open-edit-dialog" class="fas fa-arrows-alt" title="detach" data-shortcut="shift+e"></i></a>
</span>
</div>
<div>
<%= f.input :tag_string, label: false, input_html: { size: "60x5", spellcheck: false, "data-autocomplete": "tag-edit", "data-shortcut": "e", value: post.presenter.split_tag_list_text + " " } %>
</div>
<%= render "related_tags/buttons" %>
</div>
<div class="input">
<%= f.submit "Submit" %>
</div>
<%= render "related_tags/container" %>
<% end %>