diff --git a/app/assets/javascripts/vue.js b/app/assets/javascripts/vue.js
index fed7ffb9dca58b443c59407c574fc09451238225..1394abd16d1c22a72ff984c8475972930003e9c2 100644
--- a/app/assets/javascripts/vue.js
+++ b/app/assets/javascripts/vue.js
@@ -1,2 +1,2 @@
-//= require vue/dist/vue.global.prod.js
-//= require vuedraggable/dist/vuedraggable.umd.js
+//= require vue/dist/vue.global.js
+//= require vue-draggable-next/dist/vue-draggable-next.global.js
diff --git a/app/views/admin/communication/website/blocks/edit.html.erb b/app/views/admin/communication/website/blocks/edit.html.erb
index 779db9acc7e90163b5833e90f96c1b39759f848d..0a5805595b78d65ce35897eb30ba676bae5e437f 100644
--- a/app/views/admin/communication/website/blocks/edit.html.erb
+++ b/app/views/admin/communication/website/blocks/edit.html.erb
@@ -20,6 +20,9 @@
<script>
var app = Vue.createApp({
+ components: {
+ draggable: VueDraggableNext.VueDraggableNext,
+ },
data() {
return { data: <%= @block.data.to_json.html_safe %> }
}
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 c15536488f419ff9da45dbdaaa0fc82ae5032775..0eea24e470f84e5361f7de3ecf2eab5045e605f3 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
@@ -1,48 +1,48 @@
<a class="<%= button_classes('mb-4') %>" v-on:click="data.elements.push({title: 'Role name', persons: []})">Add role</a>
-
-
-<div class="card" v-for="element in data.elements">
- <div class="card-body">
- <div class="row">
- <div class="col-md-4">
- <div class="row">
- <div class="col-md-11">
- <input class="form-control" type="text" v-model="element.title">
- </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(element), 1)">
- <i class="fas fa-times"></i>
- </a>
- </div>
- </div>
- </div>
- <div class="offset-md-1 col-md-7">
- <div class="row">
- <div class="col-md-8">
- <p>People</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>
+<draggable class="dragArea list-group w-full" :list="data.elements">
+ <div class="card" v-for="element in data.elements">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-md-4">
+ <div class="row">
+ <div class="col-md-11">
+ <input class="form-control" type="text" v-model="element.title">
+ </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(element), 1)">
+ <i class="fas fa-times"></i>
+ </a>
+ </div>
</div>
</div>
- <div v-for="person in element.persons" class="mb-2">
+ <div class="offset-md-1 col-md-7">
<div class="row">
- <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 class="col-md-8">
+ <p>People</p>
</div>
- <div class="col-md-6">
- <input class="form-control" type="text" v-model="person.role" placeholder="Type role here">
+ <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="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 v-for="person in element.persons" class="mb-2">
+ <div class="row">
+ <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-6">
+ <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>
</div>
</div>
</div>
-</div>
+</draggable>
diff --git a/package.json b/package.json
index 92597de2fddc638f4d6ddd9b405af62784167c29..a81ea6c43a13401c8c44bb415d09a557b8529947 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"sortablejs": "^1.14.0",
"trix": "^1.3.1",
"vue": "^3.2.31",
+ "vue-draggable-next": "^2.1.1",
"vuedraggable": "4.1.0"
}
}
diff --git a/yarn.lock b/yarn.lock
index e304774dceb71140fbe4a994e5bc817bd0e2cd94..d2c268ba14f424468dcbf9dce4178a28fe6494e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -178,6 +178,11 @@ trix@^1.3.1:
resolved "https://registry.yarnpkg.com/trix/-/trix-1.3.1.tgz#ccce8d9e72bf0fe70c8c019ff558c70266f8d857"
integrity sha512-BbH6mb6gk+AV4f2as38mP6Ucc1LE3OD6XxkZnAgPIduWXYtvg2mI3cZhIZSLqmMh9OITEpOBCCk88IVmyjU7bA==
+vue-draggable-next@^2.1.1:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/vue-draggable-next/-/vue-draggable-next-2.1.1.tgz#49886da82f116d11b3e4df7674320fdacf5d7e04"
+ integrity sha512-f5lmA7t6LMaL4viR7dU30zzvqJzaKQs0ymL0Jy9UDT9uiZ2tXF3MzPzEvpTH2UODXZJkT+SnjeV1fXHMsgXLYA==
+
vue@^3.2.31:
version "3.2.31"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"