Organization chart #226

app/views/admin/communication/blocks/templates/organization_chart/_edit.html.erb

 <a  class="<%= button_classes('mb-4') %>"
-    v-on:click="data.elements.push({title: '', persons: []})">
-    Add role
+    v-on:click="data.elements.push({id: '', role: ''})">
+    Add person
 </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">
+<draggable :list="data.elements" class="list-group">
+  <div v-for="person in data.elements" 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="flex-fill">
-        <div class="mb-3">
-          <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"
-                  :id="'element-title-' + elementIndex">
-        </div>
-        <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>
-          <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">
-                    <% current_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>
-          </draggable>
-        </div>
+      <div class="col-md-5">
+        <select class="form-select select" v-model="person.id">
+          <% current_university.people.ordered.each_with_index do |person, index| %>
+          <option value="<%= person.id %>"><%= person.last_name %>, <%= person.first_name %></option>
+          <% end %>
+        </select>
       </div>
-      <div>
-        <a  class="btn btn-sm btn-danger ms-3"
-            v-on:click="data.elements.splice(data.elements.indexOf(element), 1)">
+      <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="data.elements.splice(data.elements.indexOf(person), 1)">
             <i class="fas fa-times"></i>
         </a>
       </div>
     </div>
-    <hr class="my-5">
   </div>
 </draggable>

app/views/admin/communication/blocks/templates/organization_chart/_show.html.erb

-<% @block.data['elements'].each do |element| %>
-  <h2><%= element['title'] %></h2>
-  <div class="row">
-    <% element['persons'].each do |person| %>
-      <%
-      p = current_university.people.find person['id']
-      next if p.nil?
-      %>
-      <div class="col-md-3">
-        <article class="card">
-          <div class="card-body">
-            <h3 class="card-title h5"><%= link_to p, [:admin, p] %></h3>
-            <p class="mb-0"><%= person['role'] %></p>
-          </div>
-        </article>
-      </div>
-    <% end %>
-  </div>
-<% end if @block.data %>
+<div class="row">
+  <% @block.data['elements'].each do |person| %>
+    <%
+    next unless person.has_key? 'id'
+    id = person['id']
+    next if id.blank?
+    p = current_university.people.find person['id']
+    next if p.nil?
+    %>
+    <div class="col-md-3">
+      <article class="card">
+        <div class="card-body">
+          <h3 class="card-title h5"><%= link_to p, [:admin, p] %></h3>
+          <p class="mb-0"><%= person['role'] %></p>
+        </div>
+      </article>
+    </div>
+  <% end if @block.data %>
+</div>

app/views/admin/communication/blocks/templates/organization_chart/_static.html.erb

 <% if block.data.has_key?('elements') %>
-<% block.data['elements'].each do |element| %>
-      - title: >
-          <%= prepare_text_for_static element['title'] %>
-        persons:
-<%
-element['persons'].each do |person|
-  p = block.university.people.find person['id']
+<% block.data['elements'].each do |person|
+  next unless person.has_key? 'id'
+  id = person['id']
+  next if id.blank?
+  p = block.university.people.find id
 %>
-          - slug: "<%= p.slug %>"
-            role: >
-              <%= prepare_text_for_static person['role'] %>
-<% end %>
+      - slug: "<%= p.slug %>"
+        role: >
+          <%= prepare_text_for_static person['role'] %>
 <% end %>
 <% end %>