From f606e6a6996ad28847b4fad2e5e0ea08d7f3a495 Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Fri, 18 Feb 2022 17:40:58 +0100
Subject: [PATCH] Block Organization Chart : add sortable to role
---
app/assets/javascripts/vue.js | 4 +-
.../website/blocks/edit.html.erb | 3 +
.../organization_chart/_edit.html.erb | 72 +++++++++----------
package.json | 1 +
yarn.lock | 5 ++
5 files changed, 47 insertions(+), 38 deletions(-)
diff --git a/app/assets/javascripts/vue.js b/app/assets/javascripts/vue.js
index fed7ffb9d..1394abd16 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 779db9acc..0a5805595 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 c15536488..0eea24e47 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 92597de2f..a81ea6c43 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 e304774dc..d2c268ba1 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"
--
GitLab