diff --git a/app/views/admin/communication/website/blocks/templates/organization_chart/_edit.html.erb b/app/views/admin/communication/website/blocks/templates/organization_chart/_edit.html.erb index f20c350ca5f7dcbbb9e3f1b1918e2d90e8a9ec07..680fddee0ef261515961c4c0def692c7c21d0370 100644 --- a/app/views/admin/communication/website/blocks/templates/organization_chart/_edit.html.erb +++ b/app/views/admin/communication/website/blocks/templates/organization_chart/_edit.html.erb @@ -3,66 +3,75 @@ Add role </a> -<div class="row"> - <draggable class="col-md-11" :list="data.elements"> - <div class="card" v-for="element in data.elements"> - <div class="card-header pb-0 nav justify-content-between"> - <a class="btn ps-0"> - <i class="fa fa-bars handle"></i> - </a> - <a class="btn btn-sm btn-danger mt-1" v-on:click="data.elements.splice(data.elements.indexOf(element), 1)"> - <i class="fas fa-times"></i> - </a> +<draggable :list="data.elements" handle=".elementHandle"> + <div v-for="(element, elementIndex) in data.elements"> + <div class="d-flex"> + <div> + <a class="btn ps-0 elementHandle"> + <i class="fa fa-bars handle"></i> + </a> </div> - <div class="card-body"> + <div class="flex-fill"> <div class="mb-3"> - <label class="form-label">Role Title</label> - <input class="form-control" + <label class="visually-hidden" + aria-label="Title" + :for="'element-title-' + elementIndex"> + Title + </label> + <input class="form-control form-control-lg" type="text" v-model="element.title" - placeholder="Type role name here"> + placeholder="Type role name here" + :id="'element-title-' + elementIndex"> </div> - - <div class="row"> - <div class="col-md-8"> - <p>People for {{ element.title }}</p> - </div> - <div class="col-md-4 text-end"> - <a class="<%= button_classes('mt-n1') %>" - v-on:click="element.persons.push({id: '', role: ''})"> - Add person - </a> + <div> + <div class="row"> + <div class="col-md-8"> + <p>People for “{{ element.title }}â€</p> + </div> + <div class="col-md-4 text-end"> + <a class="<%= button_classes('mt-n1') %>" + v-on:click="element.persons.push({id: '', role: ''})"> + Add person + </a> + </div> </div> - </div> - - <draggable :list="element.persons" class="list-group"> - <div v-for="person in element.persons" class="list-group-item"> - <div class="row"> - <div class="col-md-1"> - <a class="btn ps-0"> - <i class="fa fa-bars handle"></i> - </a> - </div> - <div class="col-md-5"> - <select class="form-select select" v-model="person.id"> - <% @website.university.people.ordered.each_with_index do |person, index| %> - <option value="<%= person.id %>"><%= person.last_name %>, <%= person.first_name %></option> - <% end %> - </select> - </div> - <div class="col-md-5"> - <input class="form-control" type="text" v-model="person.role" placeholder="Type role here"> - </div> - <div class="col-md-1 text-end"> - <a class="btn btn-sm btn-danger mt-1" - v-on:click="element.persons.splice(element.persons.indexOf(person), 1)"> - <i class="fas fa-times"></i> - </a> + <draggable :list="element.persons" class="list-group"> + <div v-for="person in element.persons" class="list-group-item"> + <div class="row"> + <div class="col-md-1"> + <a class="btn ps-0"> + <i class="fa fa-bars handle"></i> + </a> + </div> + <div class="col-md-5"> + <select class="form-select select" v-model="person.id"> + <% @website.university.people.ordered.each_with_index do |person, index| %> + <option value="<%= person.id %>"><%= person.last_name %>, <%= person.first_name %></option> + <% end %> + </select> + </div> + <div class="col-md-5"> + <input class="form-control" type="text" v-model="person.role" placeholder="Type role here"> + </div> + <div class="col-md-1 text-end"> + <a class="btn btn-sm btn-danger mt-1" + v-on:click="element.persons.splice(element.persons.indexOf(person), 1)"> + <i class="fas fa-times"></i> + </a> + </div> </div> </div> - </div> - </draggable> + </draggable> + </div> + </div> + <div> + <a class="btn btn-sm btn-danger ms-3" + v-on:click="data.elements.splice(data.elements.indexOf(element), 1)"> + <i class="fas fa-times"></i> + </a> </div> </div> - </draggable> -</div> + <hr class="my-5"> + </div> +</draggable>