[WIP] Working on uploader

resources/views/components/options-tree.blade.php

@@ -0,0 +1,7 @@
+@if (isset($list) && count($list))
+	@foreach($list as $key => $optgroup)
+		<optgroup label="{{ $optgroup['label'] }}">
+			@include('components.options', ['list' => $optgroup['options']])
+		</optgroup>
+	@endforeach
+@endif

resources/views/components/select-tree.blade.php

@@ -0,0 +1,13 @@
+<select
+	name="{{ $name }}"
+	@if (isset($id_name))id="{{ $id_name }}"@endif
+	class="@if (isset($class)){{ $class }} @else form-control @endif"
+	@if (isset($style))style="{{ $style }}" @endif
+	@if (isset($required))required="required"@endif
+	@if (isset($multiple))multiple="multiple"@endif
+>
+	@if (isset($with_empty))
+		<option>{{ $with_empty }}</option>
+	@endif
+	@include('components.options-tree')
+</select>

resources/views/components/select.blade.php

@@ -6,7 +6,9 @@
 	@if (isset($required))required="required"@endif
 	@if (isset($multiple))multiple="multiple"@endif
 >
-	<option></option>
+	@if (isset($with_empty))
+		<option>{{ $with_empty }}</option>
+	@endif
 	@if (isset($complex) && $complex)
 		@include('components.options-complex')
 	@else

resources/views/components/toggle.blade.php

@@ -0,0 +1 @@
+<input type="checkbox" name="{{ $name }}" @if ($value)checked @endif class="active-checkbox" data-toggle="toggle" data-size="mini" data-width="50" data-height="25" data-onstyle="success" data-offstyle="danger">

resources/views/components/uploader/block_image.blade.php

@@ -0,0 +1,13 @@
+<div class="col row-image"></div>
+
+	<button type="button" class="btn btn-danger delete-image-btn"><i class="fa fa-minus-circle"></i></button>
+
+	<div class="thumbnail">
+		<img src="{{ $image['url'] }}" class="img-fluid" height="92">
+		<div class="caption">
+			<h3>{{  $image['title'] }}</h3>
+			<p>Poids : {{ $image['filesize'] }}</p>
+		</div>
+	</div>	
+
+</div>

resources/views/components/uploader/block_image_new.blade.php

@@ -0,0 +1,10 @@
+<div class="col row-new-image row-image mt-3 mb-2">
+
+	<p>
+	<button type="button" class="btn btn-danger delete-new-image-btn"><i class="fa fa-minus-circle"></i></button>
+	Photo <span class="row-image-number"></span>
+	</p>
+	
+	<input name="images[]" type="file" class="file" data-show-upload="false" data-show-caption="true" data-msg-placeholder="Choisissez une photo">
+
+</div>

resources/views/components/uploader/file-data.blade.php

@@ -0,0 +1,5 @@
+	<label>Titre</label>
+	<input name="images[][title]" type="text" class="form-control">
+	
+	<label>Type de photo</label>
+	@include('components.select',['name' => 'images[][type_image_id]' , 'list' => isset($type_images) ? $type_images : null])

resources/views/components/uploader/mini-gallery.blade.php

@@ -0,0 +1,34 @@
+@if ($images)
+	<div class="row" id="uploader-mini-gallery">
+		@foreach($images as $image)
+			<figure class="mr-2">
+				<img src="{{ $image['url'] }}" class="img-thumbnail img-caption" style="max-height:92px;">
+				<figcaption class="text-center pt-2">
+					<button type="button" class="btn btn-xs btn-outline-secondary">
+						<i class="fas fa-expand-alt" data-id="{{ $image['id'] }}"></i>
+					</button>
+					<button type="button" class="btn btn-xs btn-outline-danger">
+						<i class="fas fa-trash" data-id="{{ $image['id'] }}"></i>
+					</button>
+				</figcaption>
+			</figure>
+		@endforeach
+	</div>
+@endif
+
+@push('js')
+	<script>
+		$('#uploader-mini-gallery .fa-trash').click(function() {
+			id = $(this).data('id');
+			console.log(id);
+			$.ajax({
+				type: 'DELETE',
+				url: {{  route('Botanic.Admin.Varieties.deleteImage') }},
+				data: {id: id},
+				success: function(data) {
+					source = data;
+				}
+			});
+		})
+	</script>
+@endpush

resources/views/components/uploader/widget.blade.php

@@ -0,0 +1,34 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Photos</h3>
+		<div class="card-tools">
+			<button type="button" class="btn btn-xs btn-primary add-image pull-right">Ajout <i class="fa fa-plus"></i></button>
+		</div>
+	</div>
+	<div class="card-body pb-0">
+		@include('components.uploader.mini-gallery', ['images' => $images])
+
+		<div id="uploader-new-images"></div>
+		@include('components.uploader.block_image_new', ['name' => 'images[]', 'required' => true])
+	</div>
+</div>
+
+@push('js')
+	<script>
+		function append_image() {
+			$("#uploader-new-images .file").fileinput();
+		}
+
+		$("#uploader-new-images").appender({
+			rowSection: '.row-new-image',
+			type: '.row-image',
+			addBtn: '.add-image',
+			appendEffect: 'fade',
+			addClass: 'animated fadeIn',
+			rowNumber: '.row-image-number',
+			deleteBtn: '.delete-new-image-btn',
+			callback: append_image,
+			hideSection: true
+		});
+	</script>
+@endpush