Skip to content
Snippets Groups Projects
Commit 434fda4f authored by alexisben's avatar alexisben
Browse files

Block partner: add temporary image field

parents e98363dd 809e2846
No related branches found
No related tags found
No related merge requests found
......@@ -25,6 +25,25 @@
},
data() {
return { data: <%= @block.data.to_json.html_safe %> }
},
methods: {
// TODO : replace by real image upload
onFileImageChange(event, object, key) {
var files = event.target.files || event.dataTransfer.files;
if (!files.length)
return;
this.assignImage(files[0], object, key);
},
assignImage(file, object, key) {
var image = new Image();
var reader = new FileReader();
reader.onload = function(event){
object[key] = event.target.result;
}.bind(this);
reader.readAsDataURL(file);
}
}
});
app.mount('#app')
......
......@@ -3,7 +3,6 @@
Add role
</a>
<div class="row">
<draggable class="col-md-11" :list="data.elements">
<div class="card" v-for="element in data.elements">
......
<a class="<%= button_classes('mb-4') %>"
v-on:click="data.elements.push({name: '', url: '', logo: ''})">
Add partner
<a class="<%= button_classes('mb-4') %>"
v-on:click="data.elements.push({title: '', partners: [] })">
Add category
</a>
<div class="row">
<draggable class="col-md-6" :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">
<div class="card" v-for="element in data.elements">
<div class="card-header pb-0 nav justify-content-between">
<div class="d-flex">
<a class="btn ps-0">
<i class="fa fa-bars handle"></i>
</a>
<h3>{{ element.title }}</h3>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">Partner's name</label>
<input class="form-control" type="text" v-model="element.name" placeholder="Type partner's name here">
<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 class="card-header">
<div class="row">
<div class="col-10">
<label class="form-label" for="">Title</label>
<input class="form-control form-control-lg"
type="text"
v-model="element.title"
placeholder="Type category name here">
</div>
<div class="mb-3">
<label class="form-label">Partner's url</label>
<input class="form-control" type="url" v-model="element.url" placeholder="Type partner's url here">
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<p>Partner for {{ element.title }}</p>
</div>
<div class="mb-3">
<label class="form-label">Partner's logo</label>
<input class="form-control" type="file" v-model="element.logo">
<div class="col-md-4 text-end">
<a class="<%= button_classes('mt-n1') %>"
v-on:click="element.partners.push({name: '', url: '', logo: ''})">
Add partner
</a>
</div>
</div>
</div>
</draggable>
<draggable :list="element.partners" class="list-group">
<div v-for="partner in element.partners" class="list-group-item">
<div class="row">
<div class="col-1">
<a class="btn ps-0">
<i class="fa fa-bars handle"></i>
</a>
</div>
<div class="col-lg-3 col-sm-10">
<label class="form-label">
Name :
<input class="form-control mb-2"
type="text"
v-model="partner.name"
placeholder="Type partner's name here">
</label>
</div>
<div class="offset-lg-0 col-lg-3 offset-sm-1 col-sm-10">
<label class="form-label">
Url <small>(starting with http:// )</small>:
<input class="form-control mb-2"
type="text"
v-model="partner.url"
placeholder="Type partner's url here">
</label>
</div>
<div class="offset-lg-0 col-lg-4 offset-sm-1 col-sm-10">
<%# TODO : Replace by real image upload %>
<label class="form-label">
Logo :
<input class="form-control mb-2"
type="file"
accept="image/*"
@change="onFileImageChange( $event, partner, 'logo' )">
</div>
\ No newline at end of file
<div v-if="partner.logo">
<img :src="partner.logo" class="img-fluid" />
<a class="btn btn-sm btn-danger mt-1"
v-on:click="partner.logo=''">
Remove
<i class="fas fa-times"></i>
</a>
</div>
</label>
</div>
<div class="col-1 text-end">
<a class="btn btn-sm btn-danger mt-1"
v-on:click="element.partners.splice(element.partners.indexOf(person), 1)">
<i class="fas fa-times"></i>
</a>
</div>
</div>
</div>
</draggable>
</div>
</div>
</draggable>
<% @block.data['elements'].each do |element| %>
<div class="card">
<div class="card-body">
<h2 class="card-title"><%= element['name'] %></h2>
<p><%= element['url'] %></p>
<% if element['logo'] %>
<%#= kamifusen_tag element['logo'], class: 'img-fluid' %>
<% end %>
<h2><%= element['title'] %></h2>
<div class="row">
<% element['partners'].each do |partner| %>
<div class="col-md-3">
<article class="card">
<div class="card-body">
<%# TODO : Replace by kamifusen %>
<% if partner['logo'] %>
<img src="<%= partner['logo'] %>" class="img-fluid mb-2" />
<% end %>
<h3 class="card-title h5"><%= partner['name'] %></h3>
<p class="mb-0"><%= partner['url'] %></p>
</div>
</article>
</div>
</div>
<% end %>
</div>
<% end %>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment