- Vue JS COMPLETE

This commit is contained in:
Vincent BRIDIER 2020-09-21 09:38:10 +02:00
parent 10cb439c40
commit 2aceab8657
15 changed files with 131 additions and 204 deletions

View file

@ -440,8 +440,6 @@ class DossierController extends Controller
return json_encode(true);
}
/* TODO : VUEJS */
public function loadFolders(Request $request)
{
$folders = array();

View file

@ -46,8 +46,8 @@ class MediaController extends Controller
$societes = Societe::orderBy('libelle')->get();
$marques = Marque::all();
$dossier_id = $request->get('d');
$sujet_id = $request->get('s');
$dossier_id = $request->get('d') !== null ? $request->get('d') : -1;
$sujet_id = $request->get('s') !== null ? $request->get('s') : 1;
$textSearch = $request->get('t');
$recherche_id = $request->get('r');
@ -86,6 +86,7 @@ class MediaController extends Controller
'currentSujet' => $sujet_id,
'currentFilters' => $filters,
'paniers' => $paniers,
'textSearch' => $textSearch
]);
}
@ -94,16 +95,7 @@ class MediaController extends Controller
$media = Media::where('uid', $uid)->first();
if (!$media)
abort(404);
$infos = [
'id' => $media->id,
'preview' => $media->folder . $media->uid . '_preview.' . $media->extension,
'src' => $media->folder . $media->uid . $media->extension,
'depot' => 0,
'typemedia' => $media->typemedia_id,
'ext' => $media->extension,
'dossier_id' => $media->dossier_id
];
return redirect()->route('media_manager')->with('autoOpen', $infos);
return redirect()->route('media_manager')->with('autoOpen', $media);
}
/**
@ -267,7 +259,8 @@ class MediaController extends Controller
}
// Filtre recherche texte
if ($tmp = array_search('search', array_column($filters, 'type'))) {
$tmp = array_search('search', array_column($filters, 'type'));
if ($tmp !== false) {
$tmpFilters = [];
$search = strtolower(trim($filters[$tmp]['value']));
@ -468,7 +461,8 @@ class MediaController extends Controller
}
// Filtre type de média
if ($tmp = array_search('typemedia_id', array_column($filters, 'type'))) {
$tmp = array_search('typemedia_id', array_column($filters, 'type'));
if ($tmp !== false) {
$oTmp = [];
foreach ($filters[$tmp]['value'] as $type) {
$oTmp = array_merge($oTmp, [
@ -490,7 +484,8 @@ class MediaController extends Controller
}
// Filtre type de vue
if ($tmp = array_search('typevue_id', array_column($filters, 'type'))) {
$tmp = array_search('typevue_id', array_column($filters, 'type'));
if ($tmp !== false) {
$oTmp = [];
foreach ($filters[$tmp]['value'] as $type) {
$oTmp = array_merge($oTmp, [
@ -512,7 +507,8 @@ class MediaController extends Controller
}
// Filtre liason avec Arcadia
if ($tmp = array_search('arcadia_id', array_column($filters, 'type'))) {
$tmp = array_search('arcadia_id', array_column($filters, 'type'));
if ($tmp !== false) {
$esArcadia = [
[
'exists' => [
@ -524,7 +520,8 @@ class MediaController extends Controller
}
// Filtre etiquette
if ($tmp = array_search('etiquette_id', array_column($filters, 'type'))) {
$tmp = array_search('etiquette_id', array_column($filters, 'type'));
if ($tmp !== false) {
$oTmp = [];
foreach ($filters[$tmp]['value'] as $item) {
$oTmp = array_merge($oTmp, [
@ -554,8 +551,6 @@ class MediaController extends Controller
),
);
//echo json_encode($query); exit;
$sort = [
[
$orderField => [

View file

@ -10,8 +10,20 @@ use Illuminate\Support\Facades\Storage;
trait ArcadiaLink {
public static function checkRequiredValues($media)
{
$required = ['sujet_id', 'typemedia_id', 'typevue_id', 'variante_id', 'langue_id', 'version'];
foreach ($required as $v)
if ($media->$v === NULL)
return false;
return true;
}
public static function create($media)
{
if (!self::checkRequiredValues($media))
return;
$media->isLocked = 1;
$media->save();
self::convert(self::getXML($media, "C"), $media);
@ -21,6 +33,10 @@ trait ArcadiaLink {
{
if ($media->arcadia_id === NULL)
return;
if (!self::checkRequiredValues($media))
return;
$media->isLocked = 1;
$media->save();
self::convert(self::getXML($media, "M"), $media);
@ -31,6 +47,9 @@ trait ArcadiaLink {
if ($media->arcadia_id === NULL)
return;
if (!self::checkRequiredValues($media))
return;
$media->isLocked = 1;
$media->save();
self::convert(self::getXML($media, "S"), $media);
@ -41,6 +60,9 @@ trait ArcadiaLink {
if ($media->arcadia_id === NULL)
return;
if (!self::checkRequiredValues($media))
return;
$media->isLocked = 1;
$media->save();
self::convert(self::getXML($media, "R"), $media);

2
public/css/app.css vendored

File diff suppressed because one or more lines are too long

2
public/js/app.js vendored

File diff suppressed because one or more lines are too long

View file

@ -4,7 +4,7 @@
<div class="media_container">
<div v-show="loader" class="loader"><i class="fal fa-circle-notch fa-spin"></i></div>
<div class="wrapper">
<div v-for="media in medias.data" @dragstart="dragStart(media, $event)" v-on:dblclick="edit(media)" @click="select(media)" class="imageItem" :draggable="medias.draggable" :aria-grabbed="storeGrabbed.filter(e => e.id === media.id).length > 0">
<div v-for="media in medias.data" @dragstart="dragStart(media, $event)" v-on:dblclick="edit(media)" @click="select(media)" :class=" isCAQuery && media.id !== lastVersion.id ? 'imageItem not-last-version' : 'imageItem'" :draggable="medias.draggable" :aria-grabbed="storeGrabbed.filter(e => e.id === media.id).length > 0">
<div class="etiquette" :style="'background-color:' + media.etiquette.color + '; border-color:' + media.etiquette.color + ';'" :data-id="media.etiquette.etiquette_id" >{{media.etiquette.libelle}}</div>
@ -67,7 +67,12 @@
limit: 50,
scrollLoader: false,
loader: false,
infiniteId: ''
infiniteId: '',
isCAQuery: false,
lastVersion: {
version: 0,
id: 0
}
}
},
watch: {
@ -132,6 +137,21 @@
}
this.scrollLoader = false;
}
// Si requete CA alors on cherche la version la plus récente plus griser les autres
if (response.data.isCAQuery !== undefined){
const _this2 = this;
this.isCAQuery = true;
_.each(this.medias.data, function (value) {
if (value.version > _this2.lastVersion.version) {
_this2.lastVersion.version = value.version;
_this2.lastVersion.id = value.id;
}
});
}else{
this.isCAQuery = false;
}
this.offset = this.offset + this.limit;
})
.catch(function (error) {

View file

@ -1,8 +1,8 @@
<template>
<div class="search_wrapper">
<div class="search_filters group">
<input v-model="sTexte" class="search_value" type="text" placeholder="rechercher un média..." v-on:keyup.enter="addText">
<a @click="addText" href="#" class="btn btn-square btn-black search_btn">Rechercher</a>
<input v-model="sTexte" class="search_value" type="text" placeholder="rechercher un média..." v-on:keyup.enter="addText()">
<a @click="addText()" href="#" class="btn btn-square btn-black search_btn">Rechercher</a>
<div class="filter_selector filter" data-lib-type="Type de média : " data-type="typemedia_id">
<div class="filter_btn">Type de média <i class="fas fa-caret-down"></i></div>
<div class="list" style="display:none;">
@ -59,6 +59,7 @@
this.oEtiquettes = JSON.parse(this.etiquettes);
},
props: [
'textsearch',
'typemedias',
'etiquettes'
],
@ -82,7 +83,8 @@
'sTypemedias': [],
'sEtiquettes': [],
'sReferentiel': [],
'sTexte': ''
'sTexte': '',
'initText': 0
}
},
watch: {
@ -103,14 +105,21 @@
}
},
methods: {
addText() {
addText(text = false) {
let filter = this.storeFilters.findIndex(e => e.type === 'search');
if (filter !== -1){
this.$delete(this.storeFilters, filter);
}
if (this.sTexte.length > 0) {
this.storeFilters.push({ type: 'search', legend: 'Recherche : ', value: this.sTexte, libelle: this.sTexte });
if (text !== false){
this.sTexte = text;
this.storeFilters.push({ type: 'search', legend: 'Recherche : ', value: text, libelle: text });
}else{
if (this.sTexte.length > 0) {
this.storeFilters.push({ type: 'search', legend: 'Recherche : ', value: this.sTexte, libelle: this.sTexte });
}
}
this.$store.commit({
type: 'updateFilters',
filters: this.storeFilters
@ -179,6 +188,8 @@
this.sEtiquettes = [];
if (this.storeFilters[index].type === 'arcadia_id')
this.sReferentiel = [];
if (this.storeFilters[index].type === 'search')
this.sTexte = '';
if (this.storeFilters.length > 0){
this.$delete(this.storeFilters, index);
this.$store.commit({
@ -200,6 +211,10 @@
type: 'updateFilters',
filters: []
});
if (this.textsearch.length && this.initText === 0) {
this.addText(this.textsearch);
this.initText = 1;
}
},
resetFolder() {
this.$store.commit({

View file

@ -12,7 +12,7 @@
:data-id="item.id">
<div
:class="item.parent_id === null ? 'dd-handle dd3-handle no-handle' : 'dd-handle dd3-handle'"></div>
<div @click="selectFolder(item)" @drop="moveMedia($event, item.id)" @dragover.prevent @dragenter.prevent
<div @click="selectFolder(item)" @drop="moveMedia($event, item)" @dragover.prevent @dragenter.prevent
:class="item.id === storeFolder ? 'dd3-content selected' : 'dd3-content'">
<input type="text" value="" class="input_rename" maxlength="100">
<span>{{item.libelle}}</span>
@ -26,7 +26,7 @@
:data-id="item2.id">
<div
:class="item2.parent_id === null ? 'dd-handle dd3-handle no-handle' : 'dd-handle dd3-handle'"></div>
<div @click="selectFolder(item2)" @drop="moveMedia($event, item2.id)" @dragover.prevent @dragenter.prevent
<div @click="selectFolder(item2)" @drop="moveMedia($event, item2)" @dragover.prevent @dragenter.prevent
:class="item2.id === storeFolder ? 'dd3-content selected' : 'dd3-content'">
<input type="text" value="" class="input_rename" maxlength="100">
<span>{{item2.libelle}}</span>
@ -41,7 +41,7 @@
:data-id="item3.id">
<div
:class="item3.parent_id === null ? 'dd-handle dd3-handle no-handle' : 'dd-handle dd3-handle'"></div>
<div @click="selectFolder(item3)" @drop="moveMedia($event, item3.id)" @dragover.prevent @dragenter.prevent
<div @click="selectFolder(item3)" @drop="moveMedia($event, item3)" @dragover.prevent @dragenter.prevent
:class="item3.id === storeFolder ? 'dd3-content selected' : 'dd3-content'">
<input type="text" value="" class="input_rename" maxlength="100">
<span>{{item3.libelle}}</span>
@ -113,9 +113,8 @@
this.renderItems();
this.isLoading = false;
// TODO : Séléction du dossier ou sous-dossiers dans le paramètres. /!\ il faut une récursive pour trouver le dossier enfant
if (toSelectFolder !== false){
//console.log(toSelectFolder);
this.selectFolder(toSelectFolder);
}
}).catch(function (error) {
@ -171,18 +170,18 @@
console.log(error);
});
},
moveMedia(evt, folder_id) {
moveMedia(evt, folder) {
// Si on déplace dans un autre dossier que le dossier actuel du/des media(s) séléctionné(s)
if (this.storeGrabbed[0].dossier_id !== folder_id) {
if (this.storeGrabbed[0].dossier_id !== folder.id) {
const _this2 = this;
this.$loading.show({delay:0});
axios.post('/ajax/move-media', {
medias: this.storeGrabbed,
dossier_id : folder_id,
dossier_id : folder.id,
}).then(response => {
// On met un timeout pour être sûr qu'Elatic est update lors du reload du DisplayComponent
// On met un timeout pour être sûr qu'Elastic est update lors du reload du DisplayComponent
setTimeout(function(){
_this2.initFolders(folder_id);
_this2.initFolders(folder);
_this2.$store.commit({
type: 'Reload',
reload: Math.random()

View file

@ -30,16 +30,38 @@
export default {
name: "EditComponent",
props: [
'typemedias',
'langues',
'societes',
'marques',
'etiquettes',
'copyrights'
],
props: {
open: {
type: String,
required: false,
},
typemedias: {
type: String
},
langues: {
type: String
},
societes: {
type: String
},
marques: {
type: String
},
etiquettes: {
type: String
},
copyrights: {
type: String
},
},
mounted() {
console.log('EditComponent Mounted.');
if (this.open !== undefined) {
this.$store.commit({
type: 'updateMedia',
media: JSON.parse(this.open)
});
}
},
computed: {
storeMedia () {

124
resources/js/media.js vendored
View file

@ -194,130 +194,6 @@ $(document).ready(function() {
});
// ---- Chargement des média
window.loadMedia = function(sujet_id, saveSearch = 0){
return;
$.ajax({
url: '/ajax/load-media',
method: 'POST',
dataType : 'json',
data: {
dossier_id : $(window).data('currentFolder'),
sujet_id : sujet_id,
filters : JSON.stringify($(window).data('filter')),
offset : $(window).data('offset'),
limit : $(window).data('limit'),
orderField : $("#order_select").val(),
order : $('#order_select option:selected').attr('data-order'),
saveSearch : saveSearch,
},
success: function(result){
var data = result.data;
if(data.length == 0){
$(window).data('noMedia', true);
}
var draggable = result.draggable;
// TODO : isCAQuery vuejs
if (result.isCAQuery){
var LVId = 0;
var LVV = 0;
}
$.each(data, function (index, item) {
if (result.isCAQuery && item.version > LVV){
LVId = item.id;
LVV = item.version;
}
var ico = "";
var detail = "";
var statut = "";
var itemClass = "";
var thumb = "";
var preview = "";
switch (item.typemedia_id) {
case 1:
case 5:
ico = '<i class="fas fa-file-image"></i>';
detail = " - "+item.largeur+"x"+item.hauteur+"px";
if(item.extension == "pdf" || item.extension == "ai" || item.extension == "psd"){
thumb = item.folder+item.uid+"_thumb.png";
preview = item.folder+item.uid+"_preview.png";
}else{
thumb = item.folder+item.uid+"_thumb."+item.extension;
preview = item.folder+item.uid+"_preview."+item.extension;
}
break;
case 2:
ico = '<i class="fas fa-file-image"></i>';
thumb = item.folder+item.uid+"."+item.extension;
preview = item.folder+item.uid+"."+item.extension;
break;
case 3:
ico = '<i class="fas fa-file-video"></i>';
detail = " - durée "+item.duree;
itemClass = "video";
break;
case 4:
ico = '<i class="fas fa-file-audio"></i>';
detail = " - durée "+item.duree;
itemClass = "son";
break;
default:
}
switch (item.statut) {
case 0:
statut = "Brouillon";
break;
case 1:
statut = "Public";
break;
case 2:
statut = "Public étendu";
break;
}
output += '<div class="imageItem" data-id="'+item.id+'" data-depot="'+result.isDepot+'" data-ext="'+item.extension+'" data-typemedia="'+item.typemedia_id+'" data-preview="'+preview+'" data-src="'+item.folder+item.uid+"."+item.extension+'" data-dossier="'+ item.dossier_id +'" draggable="'+draggable+'" aria-grabbed="false">';
output += '<div class="etiquette" style="background-color:'+item.etiquette.color+'; border-color:'+item.etiquette.color+';" data-id="'+item.etiquette.etiquette_id+'" >'+item.etiquette.libelle+'</div>';
output += '<div class="contextMenu"><ul>';
output += '<li class="menu-option editItem"><i class="fas fa-edit"></i> Editer</li>';
output += '<li class="menu-option downloadItem"><i class="fas fa-file-download"></i> Télécharger</li>';
output += '<li class="menu-option addBasket"><i class="fas fa-shopping-basket"></i> Ajouter au panier</li>';
// if($(window).data('CurrentUserRole') === 1 || $(window).data('CurrentUserRole') === 4 ){
// output += '<li class="menu-option deleteItem"><i class="fas fa-trash-alt"></i> Supprimer</li>';
// }
if($(window).data('CurrentUserRole') !== 2){
output += '<li class="menu-option tagItem"><i class="fas fa-tags"></i> Etiquette</li>';
}
output += '</ul></div>';
output += '<div class="media '+itemClass+'" style="background-image:url('+thumb+')"></div>';
output += '<p class="libelle">'+item.libelle+'</p>';
output += '<div class="info">'+ico+item.extension+' - '+item.taille+detail+' - v'+item.version+'</div>';
output += '<div class="statut stat'+item.statut+'">'+statut+'</div>';
output += '</div>';
});
$('.media_container .wrapper').append(output);
if($(window).data('offset') == 0){
$(".media_container .loader").hide();
}else{
$(".main_content .scrollLoader").hide();
}
$(window).data('offset', $(window).data('offset')+$(window).data('limit'));
$(window).data('ajaxready', true);
if (result.isCAQuery){
$(".imageItem[data-id='"+ LVId +"']").addClass('last-version');
}
}
});
}
// ---- Supression de médias
function removeMedias(medias){

View file

@ -415,7 +415,7 @@
&:hover{
background-color: $grey;
}
&.last-version ~ :not(.last-version) {
&.not-last-version {
opacity: 0.5;
}
}

View file

@ -21,6 +21,7 @@
gtag('config', 'UA-148734400-1');
</script>
<script src="{{ asset('js/openseadragon.min.js') }}"></script>
</head>
<body>
<div id="vue-app" style="display: inline;">
@ -53,14 +54,6 @@
</div>
@yield('media_edit')
@if (Auth::check() && Auth::user()->role != 2)
<div class="uploader-window">
<div class="uploader-window-content">
<h1>Déposez vos fichiers pour les téléverser</h1>
</div>
</div>
@endif
</div>
<!-- Scripts -->
<script src="{{ asset('js/jquery.fancybox.min.js') }}" defer></script>

View file

@ -1,3 +1,7 @@
@section('media_edit')
<mm-me-edit typemedias='@json($typemedias)' langues='@json($langues)' societes='@json($societes)' marques='@json($marques)' etiquettes='@json($etiquettes)' copyrights='@json($copyrights)'></mm-me-edit>
@if (session('autoOpen'))
<mm-me-edit open='@json(session('autoOpen'))' typemedias='@json($typemedias)' langues='@json($langues)' societes='@json($societes)' marques='@json($marques)' etiquettes='@json($etiquettes)' copyrights='@json($copyrights)'></mm-me-edit>
@else
<mm-me-edit typemedias='@json($typemedias)' langues='@json($langues)' societes='@json($societes)' marques='@json($marques)' etiquettes='@json($etiquettes)' copyrights='@json($copyrights)'></mm-me-edit>
@endif
@endsection

View file

@ -9,7 +9,7 @@
</div>
<div class="main_content">
<header>
<mm-filters typemedias='@json($typemedias)' etiquettes='@json($etiquettes)'></mm-filters>
<mm-filters textsearch="{{$textSearch}}" typemedias='@json($typemedias)' etiquettes='@json($etiquettes)'></mm-filters>
<div class="action_wrapper group">
<mm-actions csrf="{{csrf_token()}}" etiquettes='@json($etiquettes)'></mm-actions>
<div class="display">
@ -26,30 +26,11 @@
@endsection
@section('scripts')
@if (session('autoOpen'))
<script>
$(document).ready(function() {
openEditor({
id: {{session('autoOpen')['id']}},
preview: "{{session('autoOpen')['preview']}}",
src: "{{session('autoOpen')['src']}}",
depot: {{session('autoOpen')['depot']}},
typemedia: {{session('autoOpen')['typemedia']}},
ext: "{{session('autoOpen')['ext']}}",
dossier_id: @if (session('autoOpen')['dossier_id']){{session('autoOpen')['dossier_id']}}@else null @endif
}, null, null);
});
</script>
@endif
<!-- TODO : Faire le tri des js ci-dessous -->
<script src="{{ asset('js/jquery.nestable.min.js') }}" defer></script>
<script src="{{ asset('js/uploadfile/vendor/jquery.ui.widget.js') }}"></script>
<script src="{{ asset('js/uploadfile/jquery.iframe-transport.js') }}"></script>
@if (Auth::check() && Auth::user()->role != 2)
<!-- TODO : Fix à revoir -->
<script src="{{ asset('js/uploadfile/jquery.fileupload.js') }}"></script>
@endif
<script src="{{ asset('js/fabric.js') }}"></script>
<script src="{{ asset('js/darkroom.js') }}"></script>
<script src="{{ asset('js/openseadragon.min.js') }}"></script>
<script src="{{ asset('js/jquery.caret.min.js') }}"></script>
@endsection

View file

@ -11,6 +11,8 @@
|
*/
// TODO : Faire le tri des routes
Route::group(['middleware' => ['auth']], function () {
// Les pages Front
Route::get('/', 'CommunController@index')->name('home');