rails_admin_image_manager 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +125 -0
  4. data/Rakefile +36 -0
  5. data/app/assets/config/rails_admin_image_manager_manifest.js +2 -0
  6. data/app/assets/fonts/FontAwesome.otf +0 -0
  7. data/app/assets/fonts/Simple-Line-Icons.eot +0 -0
  8. data/app/assets/fonts/Simple-Line-Icons.svg +1369 -0
  9. data/app/assets/fonts/Simple-Line-Icons.ttf +0 -0
  10. data/app/assets/fonts/Simple-Line-Icons.woff +0 -0
  11. data/app/assets/fonts/fontawesome-webfont.eot +0 -0
  12. data/app/assets/fonts/fontawesome-webfont.svg +2671 -0
  13. data/app/assets/fonts/fontawesome-webfont.ttf +0 -0
  14. data/app/assets/fonts/fontawesome-webfont.woff +0 -0
  15. data/app/assets/fonts/fontawesome-webfont.woff2 +0 -0
  16. data/app/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  17. data/app/assets/fonts/glyphicons-halflings-regular.svg +288 -0
  18. data/app/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  19. data/app/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  20. data/app/assets/fonts/glyphicons-halflings-regular.woff2 +0 -0
  21. data/app/assets/images/rails_admin_image_manager/image.png +0 -0
  22. data/app/assets/javascripts/rails_admin_image_manager/app-compiled.js.erb +34896 -0
  23. data/app/assets/javascripts/rails_admin_image_manager/app-vue.js +51 -0
  24. data/app/assets/javascripts/rails_admin_image_manager/application.js +17 -0
  25. data/app/assets/javascripts/rails_admin_image_manager/base.js.erb +62 -0
  26. data/app/assets/javascripts/rails_admin_image_manager/ckeditor_plugin.js.erb +58 -0
  27. data/app/assets/javascripts/rails_admin_image_manager/components/confirmationOverlay.vue +69 -0
  28. data/app/assets/javascripts/rails_admin_image_manager/components/imageInsertButton.vue +41 -0
  29. data/app/assets/javascripts/rails_admin_image_manager/components/imageInsertOverlay.vue +92 -0
  30. data/app/assets/javascripts/rails_admin_image_manager/components/imageListing.vue +167 -0
  31. data/app/assets/javascripts/rails_admin_image_manager/components/imageShow.vue +112 -0
  32. data/app/assets/javascripts/rails_admin_image_manager/components/imageTagSelector.vue +94 -0
  33. data/app/assets/javascripts/rails_admin_image_manager/components/imageUpload.vue +94 -0
  34. data/app/assets/javascripts/rails_admin_image_manager/components/listingFilter.vue +32 -0
  35. data/app/assets/javascripts/rails_admin_image_manager/components/notificationOverlay.vue +47 -0
  36. data/app/assets/javascripts/rails_admin_image_manager/components/progressOverlay.vue +37 -0
  37. data/app/assets/javascripts/rails_admin_image_manager/components/searchAutocomplete.vue +140 -0
  38. data/app/assets/javascripts/rails_admin_image_manager/editor/image_manager_picker.js.erb +41 -0
  39. data/app/assets/javascripts/rails_admin_image_manager/filters/index.js +7 -0
  40. data/app/assets/javascripts/rails_admin_image_manager/libs/helpers.js +13 -0
  41. data/app/assets/javascripts/rails_admin_image_manager/libs/lazyload.js +63 -0
  42. data/app/assets/javascripts/rails_admin_image_manager/router/index.js +55 -0
  43. data/app/assets/javascripts/rails_admin_image_manager/stores/ckeditor.js +25 -0
  44. data/app/assets/javascripts/rails_admin_image_manager/stores/index.js +16 -0
  45. data/app/assets/javascripts/rails_admin_image_manager/stores/medias.js +342 -0
  46. data/app/assets/javascripts/rails_admin_image_manager/stores/overlay.js +57 -0
  47. data/app/assets/javascripts/rails_admin_image_manager/stores/railsAdmin.js +28 -0
  48. data/app/assets/javascripts/rails_admin_image_manager/vendors/fuse.min.js +9 -0
  49. data/app/assets/javascripts/rails_admin_image_manager/vendors/oneui.min.js +8 -0
  50. data/app/assets/javascripts/rails_admin_image_manager/vendors/underscore.min.js +6 -0
  51. data/app/assets/stylesheets/rails_admin_image_manager/_font.scss +2845 -0
  52. data/app/assets/stylesheets/rails_admin_image_manager/application.css +16 -0
  53. data/app/assets/stylesheets/rails_admin_image_manager/global.css.erb +3723 -0
  54. data/app/assets/stylesheets/rails_admin_image_manager/global.sass +1 -0
  55. data/app/assets/stylesheets/rails_admin_image_manager/vendors/bootstrap.min.css +5 -0
  56. data/app/assets/stylesheets/rails_admin_image_manager/vendors/oneui.css +8865 -0
  57. data/app/controllers/rails_admin_image_manager/application_controller.rb +41 -0
  58. data/app/controllers/rails_admin_image_manager/home_controller.rb +8 -0
  59. data/app/controllers/rails_admin_image_manager/images_controller.rb +117 -0
  60. data/app/helpers/rails_admin_image_manager/application_helper.rb +4 -0
  61. data/app/jobs/rails_admin_image_manager/application_job.rb +4 -0
  62. data/app/models/rails_admin_image_manager/application_record.rb +5 -0
  63. data/app/models/rails_admin_image_manager/file.rb +78 -0
  64. data/app/models/rails_admin_image_manager/tag.rb +41 -0
  65. data/app/views/layouts/rails_admin_image_manager/application.html.erb +26 -0
  66. data/app/views/rails_admin/main/_form_image_manager_picker.html.erb +45 -0
  67. data/app/views/rails_admin_image_manager/images/index.html.erb +2 -0
  68. data/config/initializers/rails_admin/image_manager_file.rb +87 -0
  69. data/config/initializers/rails_admin/image_manager_tag.rb +22 -0
  70. data/config/locales/rails_admin_image_manager.en.yml +33 -0
  71. data/config/locales/rails_admin_image_manager.fr.yml +33 -0
  72. data/config/routes.rb +12 -0
  73. data/db/migrate/20170626000000_create_image_manager.rb +37 -0
  74. data/lib/dynamic_paperclip_patch.rb +92 -0
  75. data/lib/generators/rails_admin_image_manager/install/install_generator.rb +22 -0
  76. data/lib/paperclip_patch.rb +22 -0
  77. data/lib/rails_admin_image_manager.rb +46 -0
  78. data/lib/rails_admin_image_manager/engine.rb +36 -0
  79. data/lib/rails_admin_image_manager/has_managed_file.rb +47 -0
  80. data/lib/rails_admin_image_manager/rails_admin/config/fields/types/image_manager_picker.rb +49 -0
  81. data/lib/rails_admin_image_manager/version.rb +3 -0
  82. data/lib/tasks/rails_admin_image_manager_tasks.rake +4 -0
  83. metadata +253 -0
@@ -0,0 +1,51 @@
1
+ import Vue from 'vue'
2
+ import axios from 'axios'
3
+ import vueAxios from 'vue-axios'
4
+ import router from './router'
5
+
6
+ import {mapState} from 'vuex'
7
+ import store from './stores'
8
+
9
+ import imageInsertOverlay from './components/imageInsertOverlay.vue'
10
+ import progressOverlay from './components/progressOverlay.vue'
11
+ import notificationOverlay from './components/notificationOverlay.vue'
12
+ import confirmationOverlay from './components/confirmationOverlay.vue'
13
+
14
+ import './filters'
15
+
16
+ document.addEventListener("DOMContentLoaded", function() {
17
+
18
+ let csrfElement = document.querySelectorAll('meta[name="csrf-token"]')[0]
19
+ axios.defaults.headers.common['X-CSRF-Token'] = csrfElement.getAttribute('content')
20
+ let appElement = document.getElementById('vue-image-manager')
21
+
22
+ axios.defaults.baseURL = AJAX_ENDPOINT
23
+
24
+ Vue.use(vueAxios, axios)
25
+ Vue.config.productionTip = false
26
+ const imageManager = new Vue({
27
+ el: '#vue-image-manager',
28
+ components: {imageInsertOverlay, progressOverlay, notificationOverlay, confirmationOverlay},
29
+ store: store,
30
+ router,
31
+ computed: {
32
+ ...mapState('overlayStore', ['showProgress'])
33
+ },
34
+ mounted: function () {
35
+ // Checking if we are from CKEDITOR
36
+ if (this.$el.attributes['input-id'] !== undefined && this.$el.attributes['input-id'] !== undefined) {
37
+ this.$store.dispatch('railsAdmin/setInputId', this.$el.attributes['input-id'].value)
38
+ }
39
+ if (this.$el.attributes['ck-fn'] !== undefined && this.$el.attributes['ck-id'] !== undefined) {
40
+ this.$store.dispatch('ckEditorStore/setCkId', this.$el.attributes['ck-fn'].value)
41
+ this.$store.dispatch('ckEditorStore/setCkFun', this.$el.attributes['ck-id'].value)
42
+ }
43
+ // Opening inser overlay if we have selectImage in queryString
44
+ if (this.$el.attributes['ck-selected-image-id'] !== undefined) {
45
+ this.$store.dispatch('mediasStore/fetchSingleImage', this.$el.attributes['ck-selected-image-id'].value).then(()=> {
46
+ this.$store.dispatch('overlayStore/showInsertOverlay', true)
47
+ })
48
+ }
49
+ }
50
+ })
51
+ });
@@ -0,0 +1,17 @@
1
+ // This is a manifest file that'll be compiled into application.js, which will include all the files
2
+ // listed below.
3
+ //
4
+ // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5
+ // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
6
+ //
7
+ // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8
+ // compiled file. JavaScript code in this file should be added after the last require_* statement.
9
+ //
10
+ // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
11
+ // about supported directives.
12
+ //
13
+
14
+
15
+ //= require rails_admin_image_manager/vendors/underscore.min.js
16
+ //= require rails_admin_image_manager/vendors/oneui.min.js
17
+ //= require rails_admin_image_manager/app-compiled.js
@@ -0,0 +1,62 @@
1
+ //= require rails_admin_image_manager/editor/image_manager_picker
2
+
3
+ window.addQueryString = function ( url, params ) {
4
+ var queryString = [];
5
+ if (!params) return url;
6
+ else {
7
+ for (var i in params) queryString.push(i + "=" + encodeURIComponent( params[i]));
8
+ }
9
+ return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
10
+ }
11
+
12
+ window.insertImageManagerMedia = function(idImage, idInput, url) {
13
+ $('#'+idInput).val(idImage)
14
+ $("[data-manager-preview='"+idInput+"']").attr('src',url)
15
+ $('#deselect_'+idInput).show();
16
+ }
17
+
18
+ var popup = function( url, width, height, options ) {
19
+ width = width || '80%';
20
+ height = height || '70%';
21
+
22
+ if ( typeof width == 'string' && width.length > 1 && width.substr( width.length - 1, 1 ) == '%' )
23
+ width = parseInt( window.screen.width * parseInt( width, 10 ) / 100, 10 );
24
+
25
+ if ( typeof height == 'string' && height.length > 1 && height.substr( height.length - 1, 1 ) == '%' )
26
+ height = parseInt( window.screen.height * parseInt( height, 10 ) / 100, 10 );
27
+
28
+ if ( width < 640 )
29
+ width = 640;
30
+
31
+ if ( height < 420 )
32
+ height = 420;
33
+
34
+ var top = parseInt( ( window.screen.height - height ) / 2, 10 ),
35
+ left = parseInt( ( window.screen.width - width ) / 2, 10 );
36
+
37
+ options = ( options || 'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes' ) + ',width=' + width +
38
+ ',height=' + height +
39
+ ',top=' + top +
40
+ ',left=' + left;
41
+
42
+ var popupWindow = window.open( '', null, options, true );
43
+
44
+ // Blocked by a popup blocker.
45
+ if ( !popupWindow )
46
+ return false;
47
+
48
+ try {
49
+ // Chrome is problematic with moveTo/resizeTo, but it's not really needed here (http://dev.ckeditor.com/ticket/8855).
50
+ var ua = navigator.userAgent.toLowerCase();
51
+ if ( ua.indexOf( ' chrome/' ) == -1 ) {
52
+ popupWindow.moveTo( left, top );
53
+ popupWindow.resizeTo( width, height );
54
+ }
55
+ popupWindow.focus();
56
+ popupWindow.location.href = url;
57
+ } catch ( e ) {
58
+ popupWindow = window.open( url, null, options, true );
59
+ }
60
+
61
+ return true;
62
+ }
@@ -0,0 +1,58 @@
1
+ <% self.class.include RailsAdminImageManager::Engine.routes.url_helpers %>
2
+ window.addQueryString = function ( url, params ) {
3
+ var queryString = [];
4
+ if (!params) return url;
5
+ else {
6
+ for (var i in params) queryString.push(i + "=" + encodeURIComponent( params[i]));
7
+ }
8
+ return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
9
+ }
10
+
11
+ if (!CKEDITOR.plugins.get( 'imageManager')) {
12
+ CKEDITOR.plugins.add( 'imageManager', {
13
+ init: function( editor ) {
14
+ var openManager = function(ele){
15
+ var params = {};
16
+ if (ele != null && ele.$.getAttribute('data-image-id')) {
17
+ params.selectImage = ele.$.getAttribute('data-image-id');
18
+ }
19
+ params.CKEditor = editor.name;
20
+ params.CKEditorFuncNum = editor._.insertImagefn;
21
+
22
+ var url = addQueryString('<%= image_manager_index_path %>', params);
23
+ editor.popup(url, 1105, 500);
24
+ }
25
+
26
+ editor._.insertImagefn = CKEDITOR.tools.addFunction(function(src, id, title){
27
+ this.insertHtml('<img src="' + src + '" data-image-id="' + id + '" alt="'+title+'" />');
28
+ }, editor);
29
+
30
+
31
+ editor.ui.addButton( 'imageManager', {
32
+ label: 'Ajouter une image',
33
+ command: 'insertManagerImage',
34
+ icon: "<%= asset_path 'rails_admin_image_manager/image.png' %>"
35
+ });
36
+
37
+ editor.on( 'doubleclick', function(evt) {
38
+ var element = evt.data.element;
39
+ if (element.is('img') && !element.data('cke-realelement') && !element.isReadOnly()) {
40
+ editor.execCommand('insertManagerImage');
41
+ }
42
+ evt.preventDefault();
43
+ });
44
+
45
+ editor.addCommand( 'insertManagerImage', {
46
+ exec: function(editor) {
47
+ var sel = editor.getSelection();
48
+ openManager(sel.getSelectedElement())
49
+ }
50
+ });
51
+
52
+ }
53
+ });
54
+
55
+ // CKEDITOR.plugins.contextMenu.removeAll()
56
+ CKEDITOR.config.removePlugins = 'liststyle,tabletools,contextmenu';
57
+ CKEDITOR.config.extraPlugins = 'imageManager';
58
+ }
@@ -0,0 +1,69 @@
1
+ <template>
2
+ <transition name="fade">
3
+ <div v-if="confirmation.msg" class="confirmation-overlay">
4
+ <div class="confirmation-overlay__box block">
5
+ <div class="block-header">
6
+ <ul class="block-options">
7
+ <li><button type="button" @click="close"><i class="fa fa-times"></i></button></li>
8
+ </ul>
9
+ <h2 class="block-title">Confirmation</h2>
10
+ </div>
11
+ <div class="block-content">
12
+ <div class="row items-push">
13
+ <div class="col-sm-12">
14
+ <p>{{ confirmation.msg }}</p>
15
+ <div class="btn-group">
16
+ <button type="button" @click="close" class="btn btn-default" name="button">Annuler</button>
17
+ <button type="button" @click="callCallback" class="btn btn-danger" name="button">Supprimer</button>
18
+ </div>
19
+ </div>
20
+ </div>
21
+ </div>
22
+ </div>
23
+ </div>
24
+ </transition>
25
+ </template>
26
+
27
+ <script>
28
+ import {mapState} from 'vuex'
29
+
30
+ export default {
31
+ computed: {
32
+ ...mapState('overlayStore', ['confirmation'])
33
+ },
34
+ methods: {
35
+ close() {
36
+ this.$store.dispatch('overlayStore/clearConfirmation')
37
+ },
38
+ callCallback() {
39
+ this.confirmation.callback()
40
+ this.close()
41
+ }
42
+ }
43
+ }
44
+ </script>
45
+
46
+ <style media="screen" lang='sass'>
47
+ .confirmation-overlay::after
48
+ position: fixed
49
+ content: ""
50
+ display: block
51
+ top: 0
52
+ left: 0
53
+ right: 0
54
+ bottom: 0
55
+ background-color: rgba(255, 255, 255, 0.5)
56
+ z-index: 10
57
+
58
+ .confirmation-overlay__box
59
+ box-shadow: 0 0 200px rgba(0, 0, 0, 0.5)
60
+ position: fixed
61
+ background-color: white
62
+ top: 50%
63
+ left: 50%
64
+ transform: translate(-50%,-50%)
65
+ width: 100%
66
+ max-width: 640px
67
+ z-index: 20
68
+
69
+ </style>
@@ -0,0 +1,41 @@
1
+ <template>
2
+ <button typ="button" class="btn btn-xs btn-default" @click.prevent="insert()">Utiliser</button>
3
+ </template>
4
+
5
+ <script>
6
+ import {mapState} from 'vuex'
7
+
8
+ export default {
9
+ props: ['id', 'saveMethod'],
10
+ data () {
11
+ return {}
12
+ },
13
+ methods: {
14
+ insert () {
15
+ let doIt = (response) => {
16
+ let id = this.id || response.data.id
17
+ if (this.$store.state.ckEditorStore.ckId != "") {
18
+ if (id) {
19
+ this.$store.dispatch('mediasStore/fetchSingleImage', this.id).then(()=> {
20
+ this.$store.dispatch('overlayStore/showInsertOverlay', true)
21
+ })
22
+ } else {
23
+ this.$store.dispatch('overlayStore/showInsertOverlay', true)
24
+ }
25
+ } else {
26
+ this.$store.dispatch('railsAdmin/insertImage', id)
27
+ }
28
+ }
29
+ if (typeof this.saveMethod == "function") {
30
+ this.saveMethod().then(doIt).catch(() => { console.log('Erreur lors de la sauvegarde');})
31
+ } else {
32
+ doIt()
33
+ }
34
+
35
+ }
36
+ }
37
+ }
38
+ </script>
39
+
40
+ <style media="screen">
41
+ </style>
@@ -0,0 +1,92 @@
1
+ <template>
2
+ <transition name="fade">
3
+ <div class="image-insert-overlay form-horizontal block" v-if="showInsertOverlay">
4
+ <button @click="close" class="image-insert-overlay__close" type="button"><i class="fa fa-times"></i></button>
5
+ <div class="block-content">
6
+ <p><img :src="currentImgSrc" style="width: 100%;" alt=""></p>
7
+ <div class="form-group">
8
+ <div class="col-sm-6">
9
+ <div class="form-material">
10
+ <input class="form-control" type="number" v-model="imgWidth" @keyup="keepRatio('width')">
11
+ <label for="material-text">Largeur</label>
12
+ </div>
13
+ </div>
14
+ <div class="col-sm-6">
15
+ <div class="form-material">
16
+ <input class="form-control" type="number" v-model="imgHeight" @keyup="keepRatio('height')">
17
+ <label for="material-textarea-large">Hauteur</label>
18
+ </div>
19
+ </div>
20
+ </div>
21
+ <div class="form-group">
22
+ <div class="col-sm-12">
23
+ <button type="button" class="btn btn-primary" @click="insert()">Insérer</button>
24
+ <button type="button" class="btn btn-default" @click="close()">Annuler</button>
25
+ </div>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ </transition>
30
+ </template>
31
+
32
+ <script>
33
+ import {mapState} from 'vuex'
34
+
35
+ export default {
36
+ data () {
37
+ return {
38
+ imgWidth: 800,
39
+ imgHeight: 600,
40
+ ratio: 800/600
41
+ }
42
+ },
43
+ computed: {
44
+ ...mapState('overlayStore', ['showInsertOverlay']),
45
+ ...mapState('mediasStore', ['currentImgSrc'])
46
+ },
47
+ methods: {
48
+ insert () {
49
+ this.$store.dispatch('mediasStore/useImage', [this.imgWidth, this.imgHeight])
50
+ this.$store.dispatch('overlayStore/showInsertOverlay', false)
51
+ },
52
+ close() {
53
+ this.$store.dispatch('overlayStore/showInsertOverlay', false)
54
+ },
55
+ keepRatio(e) {
56
+ if (e == 'width') {
57
+ this.imgHeight = parseInt(this.imgWidth / this.ratio)
58
+ } else {
59
+ this.imgWidth = parseInt(this.imgHeight * this.ratio)
60
+ }
61
+ }
62
+ }
63
+ }
64
+ </script>
65
+
66
+ <style media="screen">
67
+ .image-insert-overlay {
68
+ box-shadow: 0 0 200px rgba(0, 0, 0, 0.5);
69
+ position: fixed;
70
+ top: 50%;
71
+ left: 50%;
72
+ transform: translate(-50%,-50%);
73
+ width: 100%;
74
+ max-width: 475px;
75
+ z-index: 20;
76
+ max-height: 100vh;
77
+ overflow-y: auto;
78
+ }
79
+ .fade-enter-active, .fade-leave-active {
80
+ transition: opacity .5s
81
+ }
82
+ .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
83
+ opacity: 0
84
+ }
85
+ .image-insert-overlay__close {
86
+ position: absolute;
87
+ top: 0;
88
+ right: 0;
89
+ background-color: transparent;
90
+ border: none;
91
+ }
92
+ </style>
@@ -0,0 +1,167 @@
1
+ <template>
2
+ <div class="content animated fadeIn">
3
+ <div class="block">
4
+ <div class="block-header">
5
+ <search-autocomplete></search-autocomplete>
6
+ </div>
7
+ <div class="block-content">
8
+
9
+ <div class="row">
10
+ <div class="col-sm-6">
11
+ <p>
12
+ <router-link v-if="!readOnly" class="btn btn-primary" :to="{ name: 'createImage'}"><i class="fa fa-plus"></i> Ajouter une image</router-link>
13
+ <button v-if="searchedQuery || selectedFilter" @click="resetSearchAndFilters" class="btn btn-default" ><i class="fa fa-undo"></i> Annuler la recherche</button>
14
+ </p>
15
+
16
+ <p v-if="searchedQuery">Recherche: {{ searchedQuery }}</p>
17
+
18
+ </div>
19
+ </div>
20
+ <div class="row items-push" v-if="grid">
21
+ <div class="listing-element" v-for="(image, key) in imageListItems">
22
+ <div class="img-container">
23
+ <img class="img-responsive" :src="image.src" alt="">
24
+ <div class="img-options">
25
+ <div class="img-options-content">
26
+ <h4 class="h6 font-w400 text-white-op push-15">{{ image.name }}</h4>
27
+ <router-link v-if="!readOnly" class="btn btn-sm btn-default" :to="{ name: 'showImage', params: { id: image.id }}">Modifier</router-link>
28
+ <image-insert-button :id="image.id"/>
29
+ <a v-if="!readOnly" class="btn btn-sm btn-default" @click="deleteImage(image)" href="javascript:void(0)">Supprimer</a>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ <div class="row items-push" v-if="!grid ">
36
+ <div class="table-responsive">
37
+ <table class="table table-striped table-vcenter">
38
+ <thead>
39
+ <tr>
40
+ <td width="110px">Image</td>
41
+ <td><listing-filter label="Titre" type="title" ></listing-filter></td>
42
+ <td width="140px"><listing-filter label="Ajouté le" type="date" ></listing-filter></td>
43
+ <td width="150px" class="text-center">Actions</td>
44
+ </tr>
45
+ </thead>
46
+ <tbody>
47
+ <tr v-for="(image, key) in imageListItems">
48
+ <td>
49
+ <router-link :to="{ name: 'showImage', params: { id: image.id }}"><img width="100px" :src="image.src" alt=""></router-link>
50
+ </td>
51
+ <td>
52
+ {{image.name}}
53
+ </td>
54
+ <td>{{ image.created_at | formatDate }}</td>
55
+ <td class="text-right">
56
+ <image-insert-button :id="image.id"/>
57
+ <router-link v-if="!readOnly" class="btn btn-xs btn-default" :to="{ name: 'showImage', params: { id: image.id }}"><i class="fa fa-edit"></i></router-link>
58
+ <a v-if="!readOnly" class="btn btn-xs btn-default" @click="deleteImage(image)" href="javascript:void(0)"><i class="fa fa-trash-o"></i></a>
59
+ </td>
60
+ </tr>
61
+ </tbody>
62
+ </table>
63
+ </div>
64
+ </div>
65
+ <div class="row text-center items-push">
66
+ <div class="col-sm-12">
67
+ <button type="button" v-if="showMoreButton()" class="btn btn-default" @click="fetchImage">Plus d'image</button>
68
+ </div>
69
+ </div>
70
+
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ </template>
76
+
77
+ <script>
78
+ import imageInsertButton from './imageInsertButton.vue'
79
+ import imageTagSelector from './imageTagSelector.vue'
80
+ import searchAutocomplete from './searchAutocomplete.vue'
81
+ import listingFilter from './listingFilter.vue'
82
+ import Lazyload from '../libs/lazyload.js'
83
+ import { formatDate } from '../libs/helpers.js'
84
+ import {mapState} from 'vuex'
85
+ export default {
86
+ components: {imageInsertButton, imageTagSelector, searchAutocomplete, listingFilter},
87
+ data () {
88
+ return {
89
+ grid: false,
90
+ lazyload: new Lazyload(()=> {
91
+ this.fetchImage()
92
+ }),
93
+ page: 1,
94
+ isFetching: false,
95
+ query: '',
96
+ searchedQuery: '',
97
+ selectedFilter: ''
98
+ }
99
+ },
100
+ computed: {
101
+ ...mapState('mediasStore', ['imageListItems', 'maxImageListItems', 'tags', 'activeFilters', 'readOnly'])
102
+ },
103
+ methods:{
104
+ fetchImage() {
105
+ if (!this.isFetching && (this.maxImageListItems == -1 || this.imageListItems.length < this.maxImageListItems) ) {
106
+ this.isFetching = true
107
+ this.$store.dispatch('mediasStore/setSearchPage', this.activeFilters.page + 1)
108
+ this.$store.dispatch('mediasStore/fetchImage').then(()=> {
109
+ this.isFetching = false
110
+ })
111
+ }
112
+ },
113
+ showMoreButton() {
114
+ return (this.maxImageListItems > this.imageListItems.length && this.activeFilters.tags.length <= 0 && this.activeFilters.search == '')
115
+ },
116
+ resetSearchAndFilters() {
117
+ this.query = ''
118
+ this.selectedFilter = ''
119
+ this.searchedQuery = ''
120
+ this.$store.dispatch('mediasStore/clearImgListing')
121
+ this.$store.dispatch('mediasStore/setSearchPage', 1)
122
+ this.$store.dispatch('mediasStore/fetchImage')
123
+ },
124
+ deleteImage(image){
125
+ this.$store.dispatch('overlayStore/pushConfirmation', { msg: 'Voulez vous supprimer l\'image définitivement?', callback: () => {
126
+ this.$store.dispatch('mediasStore/deleteImg', image.id)
127
+ }})
128
+ }
129
+ },
130
+ created() {
131
+ this.$store.dispatch('mediasStore/setSearchPage', this.page)
132
+ this.$store.dispatch('mediasStore/fetchImage')
133
+ },
134
+ mounted() {
135
+ this.lazyload.start()
136
+ this.$store.dispatch('mediasStore/fetchTags')
137
+ }
138
+ }
139
+ </script>
140
+
141
+ <style media="screen" lang="sass">
142
+ .table > thead td
143
+ text-transform: uppercase
144
+ .add-image-link
145
+ margin-bottom: 15px
146
+
147
+ .img-options-content .btn
148
+ margin: 4px
149
+
150
+ .add-image-link
151
+ display: flex
152
+ align-items: center
153
+ justify-content: center
154
+ width: 100%
155
+ font-size: 50px
156
+ // width: 250px
157
+ // height: 250px
158
+
159
+ .listing-element
160
+ margin: 10px
161
+ float: left
162
+ width: 150px
163
+
164
+ .btn-sm.btn
165
+ padding: 0 5px
166
+ font-size: 11px
167
+ </style>