Refactor worker form modal to enhance layout and improve button labeling for better usability

This commit is contained in:
Ross
2025-12-17 16:03:06 +00:00
parent b6f5288eed
commit 3fd0e1ed99
@@ -198,64 +198,84 @@
<p class="help">Quick editors for common lists so you don't need to edit JSON manually.</p> <p class="help">Quick editors for common lists so you don't need to edit JSON manually.</p>
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Out of programme</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="oop-list"></div> <h5 class="subtitle is-6" style="margin:0">Out of programme</h5>
<button type="button" class="button is-small" id="add-oop">Add OOP</button> <button type="button" class="button is-small" id="add-oop">Add</button>
</div>
<div id="oop-list" style="margin-top:0.5rem"></div>
</div> </div>
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Not available to work</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="nav-list"></div> <h5 class="subtitle is-6" style="margin:0">Not available to work</h5>
<button type="button" class="button is-small" id="add-nav">Add unavailability</button> <button type="button" class="button is-small" id="add-nav">Add</button>
</div>
<div id="nav-list" style="margin-top:0.5rem"></div>
</div> </div>
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Preferences not to work</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="pref-list"></div> <h5 class="subtitle is-6" style="margin:0">Preferences not to work</h5>
<button type="button" class="button is-small" id="add-pref">Add preference</button> <button type="button" class="button is-small" id="add-pref">Add</button>
</div>
<div id="pref-list" style="margin-top:0.5rem"></div>
</div> </div>
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Work requests</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="wr-list"></div> <h5 class="subtitle is-6" style="margin:0">Work requests</h5>
<button type="button" class="button is-small" id="add-wr">Add request</button> <button type="button" class="button is-small" id="add-wr">Add</button>
</div>
<div id="wr-list" style="margin-top:0.5rem"></div>
</div> </div>
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Locum availability</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="loc-list"></div> <h5 class="subtitle is-6" style="margin:0">Locum availability</h5>
<button type="button" class="button is-small" id="add-loc">Add locum availability</button> <button type="button" class="button is-small" id="add-loc">Add</button>
</div>
<div id="loc-list" style="margin-top:0.5rem"></div>
</div> </div>
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Forced assignments (week,day,shift)</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="fa-list"></div> <h5 class="subtitle is-6" style="margin:0">Forced assignments (week,day,shift)</h5>
<button type="button" class="button is-small" id="add-fa">Add forced assignment</button> <button type="button" class="button is-small" id="add-fa">Add</button>
</div>
<div id="fa-list" style="margin-top:0.5rem"></div>
</div> </div>
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Forced assignments by date</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="fabd-list"></div> <h5 class="subtitle is-6" style="margin:0">Forced assignments by date</h5>
<button type="button" class="button is-small" id="add-fabd">Add forced assignment by date</button> <button type="button" class="button is-small" id="add-fabd">Add</button>
</div>
<div id="fabd-list" style="margin-top:0.5rem"></div>
</div> </div>
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Hard day dependencies</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="hdd-list"></div> <h5 class="subtitle is-6" style="margin:0">Hard day dependencies</h5>
<button type="button" class="button is-small" id="add-hdd">Add dependency</button> <button type="button" class="button is-small" id="add-hdd">Add</button>
</div>
<div id="hdd-list" style="margin-top:0.5rem"></div>
</div> </div>
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Hard day exclusions</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="hde-list"></div> <h5 class="subtitle is-6" style="margin:0">Hard day exclusions</h5>
<button type="button" class="button is-small" id="add-hde">Add exclusion</button> <button type="button" class="button is-small" id="add-hde">Add</button>
</div>
<div id="hde-list" style="margin-top:0.5rem"></div>
</div> </div>
<div class="column is-half"> <div class="column is-full">
<h5 class="subtitle is-6">Allowed multi-shift sets</h5> <div style="display:flex;justify-content:space-between;align-items:center;">
<div id="ams-list"></div> <h5 class="subtitle is-6" style="margin:0">Allowed multi-shift sets</h5>
<button type="button" class="button is-small" id="add-ams">Add set</button> <button type="button" class="button is-small" id="add-ams">Add</button>
</div>
<div id="ams-list" style="margin-top:0.5rem"></div>
</div> </div>
</div> </div>
</div> </div>