rails_admin_image_manager 0.1.15 → 0.1.20

data/app/assets/javascripts/rails_admin_image_manager/app-vue.js

@@ -11,6 +11,8 @@ import progressOverlay from './components/progressOverlay.vue'
 import notificationOverlay from './components/notificationOverlay.vue'
 import confirmationOverlay from './components/confirmationOverlay.vue'
 
+import './filters'
+
 document.addEventListener("DOMContentLoaded", function() {
 
   let csrfElement = document.querySelectorAll('meta[name="csrf-token"]')[0]

data/app/assets/javascripts/rails_admin_image_manager/components/imageInsertButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button typ="button" class="btn btn-sm btn-default" @click.prevent="insert()">Utiliser l'image</button>
+  <button typ="button" class="btn btn-xs btn-default" @click.prevent="insert()">Utiliser</button>
 </template>
 
 <script>

data/app/assets/javascripts/rails_admin_image_manager/components/imageListing.vue

@@ -32,24 +32,41 @@
             </div>
           </div>
         </div>
-        <div class="row text-center items-push">
-          <div class="col-sm-12">
-            <button type="button" v-if="showMoreButton()" class="btn btn-default" @click="fetchImage">Plus d'image</button>
-          </div>
-        </div>
-        <div class="row items-push" v-if="!grid">
+        <div class="row items-push" v-if="!grid ">
           <div class="table-responsive">
             <table class="table table-striped table-vcenter">
+              <thead>
+                <tr>
+                  <td width="110px">Image</td>
+                  <td><listing-filter label="Titre" type="title" ></listing-filter></td>
+                  <td width="140px"><listing-filter label="Ajouté le" type="date" ></listing-filter></td>
+                  <td width="150px" class="text-center">Actions</td>
+                </tr>
+              </thead>
               <tbody>
                 <tr v-for="(image, key) in imageListItems">
                   <td>
-                    <img width="100px" :src="image.src" alt="">
+                    <router-link :to="{ name: 'showImage', params: { id: image.id }}"><img width="100px" :src="image.src" alt=""></router-link>
+                  </td>
+                  <td>
+                    {{image.name}}
+                  </td>
+                  <td>{{ image.created_at | formatDate }}</td>
+                  <td class="text-right">
+                    <image-insert-button :id="image.id"/>
+                    <router-link class="btn btn-xs btn-default" :to="{ name: 'showImage', params: { id: image.id }}"><i class="fa fa-edit"></i></router-link>
+                    <a class="btn btn-xs btn-default" @click="deleteImage(image)" href="javascript:void(0)"><i class="fa fa-trash-o"></i></a>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
+        <div class="row text-center items-push">
+          <div class="col-sm-12">
+            <button type="button" v-if="showMoreButton()" class="btn btn-default" @click="fetchImage">Plus d'image</button>
+          </div>
+        </div>
 
       </div>
     </div>
@@ -61,13 +78,15 @@
 import imageInsertButton from './imageInsertButton.vue'
 import imageTagSelector from './imageTagSelector.vue'
 import searchAutocomplete from './searchAutocomplete.vue'
+import listingFilter from './listingFilter.vue'
 import Lazyload from '../libs/lazyload.js'
+import { formatDate } from '../libs/helpers.js'
 import {mapState} from 'vuex'
 export default {
-  components: {imageInsertButton, imageTagSelector, searchAutocomplete},
+  components: {imageInsertButton, imageTagSelector, searchAutocomplete, listingFilter},
   data () {
     return {
-      grid: true,
+      grid: false,
       lazyload: new Lazyload(()=> {
         this.fetchImage()
       }),
@@ -85,33 +104,21 @@ export default {
     fetchImage() {
       if (!this.isFetching && (this.maxImageListItems == -1 || this.imageListItems.length < this.maxImageListItems) ) {
         this.isFetching = true
-        this.$store.dispatch('mediasStore/setSearchPage', this.page + 1)
+        this.$store.dispatch('mediasStore/setSearchPage', this.activeFilters.page + 1)
         this.$store.dispatch('mediasStore/fetchImage').then(()=> {
           this.isFetching = false
-          this.page ++
         })
       }
     },
-    filter() {
-      console.log('filter');
-    },
-    search() {
-      this.page = 1
-      this.searchedQuery = (this.query == '') ? '' : this.query
-      this.$store.dispatch('mediasStore/clearImgListing')
-      this.$store.dispatch('mediasStore/setSearchQuery', this.query)
-      this.$store.dispatch('mediasStore/fetchImage')
-    },
     showMoreButton() {
       return (this.maxImageListItems > this.imageListItems.length && this.activeFilters.tags.length <= 0 && this.activeFilters.search == '')
     },
     resetSearchAndFilters() {
-      this.page = 1
       this.query = ''
       this.selectedFilter = ''
       this.searchedQuery = ''
       this.$store.dispatch('mediasStore/clearImgListing')
-      this.$store.dispatch('mediasStore/setSearchPage', this.page)
+      this.$store.dispatch('mediasStore/setSearchPage', 1)
       this.$store.dispatch('mediasStore/fetchImage')
     },
     deleteImage(image){
@@ -132,6 +139,8 @@ export default {
 </script>
 
 <style media="screen" lang="sass">
+  .table > thead td
+    text-transform: uppercase
   .add-image-link
     margin-bottom: 15px
 

data/app/assets/javascripts/rails_admin_image_manager/components/listingFilter.vue

@@ -0,0 +1,32 @@
+<template>
+  <span class="listing-filter" @click.prevent="filter()">{{label}}
+    <i v-if="activeFilters[type] == 'ASC'" class="fa fa-arrow-down"></i>
+    <i v-if="activeFilters[type] == 'DESC'" class="fa fa-arrow-up"></i>
+  </span>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  props: ['label', 'type'],
+  data () {
+    return {}
+  },
+  computed: {
+    ...mapState('mediasStore', ['activeFilters'])
+  },
+  methods: {
+    filter () {
+      this.$store.dispatch('mediasStore/setSearchPage', 1)
+      this.$store.dispatch('mediasStore/clearImgListing')
+      this.$store.dispatch('mediasStore/toggleFilter', this.type)
+      this.$store.dispatch('mediasStore/fetchImage')
+    }
+  }
+}
+</script>
+<style media="screen" lang="sass">
+  .listing-filter
+    cursor: pointer
+</style>

data/app/assets/javascripts/rails_admin_image_manager/components/searchAutocomplete.vue

@@ -70,6 +70,7 @@ export default {
       queryArray[0] = this.filteredTags[this.selectedTagIndex].name
       let newQuery = queryArray.reverse().join(' ')
       this.$store.dispatch('mediasStore/setSearchQuery', '')
+      this.$store.dispatch('mediasStore/setSearchPage', 1)
       this.$store.dispatch('mediasStore/clearImgListing')
       this.$store.dispatch('mediasStore/addToTagFilter', this.filteredTags[this.selectedTagIndex].id)
       this.$store.dispatch('mediasStore/fetchImage')

data/app/assets/javascripts/rails_admin_image_manager/filters/index.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import moment from 'moment'
+
+moment.locale('fr');
+Vue.filter('formatDate', (date) => {
+  return moment(date).format('D MMMM YYYY')
+})

data/app/assets/javascripts/rails_admin_image_manager/libs/helpers.js

@@ -1,3 +1,5 @@
+import moment from 'moment'
+
 export function encodeImageFileAsURL(element) {
   return new Promise((resolve, reject) => {
     var file = element.files[0];

data/app/assets/javascripts/rails_admin_image_manager/stores/medias.js

@@ -15,7 +15,9 @@ const mediasStore = {
     activeFilters: {
       tags: [],
       search: '',
-      page: 1
+      page: 1,
+      date: '',
+      title: ''
     },
     tags: [],
     errors: {}
@@ -96,6 +98,11 @@ const mediasStore = {
     },
     SET_QUERY(state, query){
       state.activeFilters.search = query
+    },
+    SET_FILTER(state, opts){
+      state.activeFilters.date = ''
+      state.activeFilters.title = ''
+      state.activeFilters[opts[1]] = opts[0]
     }
   },
   getters: {
@@ -285,6 +292,10 @@ const mediasStore = {
     setSearchQuery({commit}, query) {
       commit('SET_QUERY', query)
     },
+    toggleFilter({commit, state}, type) {
+      let term = (state.activeFilters[type] == 'ASC') ? 'DESC' : 'ASC'
+      commit('SET_FILTER', [term, type])
+    },
     clearImgListing({ commit }){
       commit('CLEAR_IMG_LISTING')
     },

data/app/assets/stylesheets/rails_admin_image_manager/_font.scss

@@ -6,8 +6,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
-  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+  src: url("<%= font_path('fontawesome-webfont.eot?v=4.7.0') %>");
+  src: url("<%= font_path('fontawesome-webfont.eot?#iefix&v=4.7.0') %>") format('embedded-opentype'), url("<%= font_path('fontawesome-webfont.woff2?v=4.7.0') %>") format('woff2'), url("<%= font_path('fontawesome-webfont.woff?v=4.7.0') %>") format('woff'), url("<%= font_path('fontawesome-webfont.ttf?v=4.7.0') %>") format('truetype'), url("<%= font_path('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') %>") format('svg');
   font-weight: normal;
   font-style: normal;
 }

data/app/assets/stylesheets/rails_admin_image_manager/global.css.erb

@@ -6,8 +6,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url("fonts/fontawesome-webfont.eot?v=4.7.0");
-  src: url("fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
+  src: url("<%= font_path('fontawesome-webfont.eot?v=4.7.0') %>");
+  src: url("<%= font_path('fontawesome-webfont.eot?#iefix&v=4.7.0') %>") format("embedded-opentype"), url("<%= font_path('fontawesome-webfont.woff2?v=4.7.0') %>") format("woff2"), url("<%= font_path('fontawesome-webfont.woff?v=4.7.0') %>") format("woff"), url("<%= font_path('fontawesome-webfont.ttf?v=4.7.0') %>") format("truetype"), url("<%= font_path('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') %>") format("svg");
   font-weight: normal;
   font-style: normal;
 }

data/app/controllers/rails_admin_image_manager/application_controller.rb

@@ -1,5 +1,5 @@
 module RailsAdminImageManager
-  class ApplicationController < ActionController::Base
+  class ApplicationController < RailsAdmin::ApplicationController
 
     protect_from_forgery with: :exception
 

data/app/controllers/rails_admin_image_manager/images_controller.rb

@@ -8,9 +8,12 @@ module RailsAdminImageManager
         }
 
         format.json {
-          images  = RailsAdminImageManager::File.select(:id, :name, :image_file_name).page(params[:page])
+          images  = RailsAdminImageManager::File.select(:id, :name, :image_file_name, :created_at).page(params[:page])
           images  = images.filter_by_text(params[:search]) if filter_by?(:search)
           images  = images.filter_by_tags(params[:tags].map{|i| i.to_i }) if filter_by?(:tags)
+          images  = images.order_by_date(params[:date]) if filter_by?(:date)
+          images  = images.order_by_title(params[:title]) if filter_by?(:title)
+
           images.each do |image|
               image.src = image.image.url(:index)
           end

data/app/models/rails_admin_image_manager/file.rb

@@ -34,6 +34,8 @@ module RailsAdminImageManager
 
     scope :filter_by_text, -> (text) { where("image_manager_files.name LIKE ? OR image_manager_files.description LIKE ?", "%#{text}%", "%#{text}%") }
     scope :filter_by_tags, -> (tags) { joins(:tags).where('image_manager_files_tags.image_manager_tag_id IN (?)', tags).distinct }
+    scope :order_by_date, -> (term) { order("created_at #{term}") }
+    scope :order_by_title, -> (term) { order("name #{term}") }
 
     # == Instance Methods =====================================================
 

data/lib/rails_admin_image_manager/version.rb

@@ -1,3 +1,3 @@
 module RailsAdminImageManager
-  VERSION = '0.1.15'
+  VERSION = '0.1.20'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_admin_image_manager
 version: !ruby/object:Gem::Version
-  version: 0.1.15
+  version: 0.1.20
 platform: ruby
 authors:
 - iXmedia
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-01 00:00:00.000000000 Z
+date: 2017-09-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -149,6 +149,21 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/rails_admin_image_manager_manifest.js
+- app/assets/fonts/FontAwesome.otf
+- app/assets/fonts/Simple-Line-Icons.eot
+- app/assets/fonts/Simple-Line-Icons.svg
+- app/assets/fonts/Simple-Line-Icons.ttf
+- app/assets/fonts/Simple-Line-Icons.woff
+- app/assets/fonts/fontawesome-webfont.eot
+- app/assets/fonts/fontawesome-webfont.svg
+- app/assets/fonts/fontawesome-webfont.ttf
+- app/assets/fonts/fontawesome-webfont.woff
+- app/assets/fonts/fontawesome-webfont.woff2
+- app/assets/fonts/glyphicons-halflings-regular.eot
+- app/assets/fonts/glyphicons-halflings-regular.svg
+- app/assets/fonts/glyphicons-halflings-regular.ttf
+- app/assets/fonts/glyphicons-halflings-regular.woff
+- app/assets/fonts/glyphicons-halflings-regular.woff2
 - app/assets/images/rails_admin_image_manager/image.png
 - app/assets/javascripts/rails_admin_image_manager/app-compiled.js.erb
 - app/assets/javascripts/rails_admin_image_manager/app-vue.js
@@ -162,10 +177,12 @@ files:
 - app/assets/javascripts/rails_admin_image_manager/components/imageShow.vue
 - app/assets/javascripts/rails_admin_image_manager/components/imageTagSelector.vue
 - app/assets/javascripts/rails_admin_image_manager/components/imageUpload.vue
+- app/assets/javascripts/rails_admin_image_manager/components/listingFilter.vue
 - app/assets/javascripts/rails_admin_image_manager/components/notificationOverlay.vue
 - app/assets/javascripts/rails_admin_image_manager/components/progressOverlay.vue
 - app/assets/javascripts/rails_admin_image_manager/components/searchAutocomplete.vue
 - app/assets/javascripts/rails_admin_image_manager/editor/image_manager_picker.js.erb
+- app/assets/javascripts/rails_admin_image_manager/filters/index.js
 - app/assets/javascripts/rails_admin_image_manager/libs/helpers.js
 - app/assets/javascripts/rails_admin_image_manager/libs/lazyload.js
 - app/assets/javascripts/rails_admin_image_manager/router/index.js
@@ -179,21 +196,6 @@ files:
 - app/assets/javascripts/rails_admin_image_manager/vendors/underscore.min.js
 - app/assets/stylesheets/rails_admin_image_manager/_font.scss
 - app/assets/stylesheets/rails_admin_image_manager/application.css
-- app/assets/stylesheets/rails_admin_image_manager/fonts/FontAwesome.otf
-- app/assets/stylesheets/rails_admin_image_manager/fonts/Simple-Line-Icons.eot
-- app/assets/stylesheets/rails_admin_image_manager/fonts/Simple-Line-Icons.svg
-- app/assets/stylesheets/rails_admin_image_manager/fonts/Simple-Line-Icons.ttf
-- app/assets/stylesheets/rails_admin_image_manager/fonts/Simple-Line-Icons.woff
-- app/assets/stylesheets/rails_admin_image_manager/fonts/fontawesome-webfont.eot
-- app/assets/stylesheets/rails_admin_image_manager/fonts/fontawesome-webfont.svg
-- app/assets/stylesheets/rails_admin_image_manager/fonts/fontawesome-webfont.ttf
-- app/assets/stylesheets/rails_admin_image_manager/fonts/fontawesome-webfont.woff
-- app/assets/stylesheets/rails_admin_image_manager/fonts/fontawesome-webfont.woff2
-- app/assets/stylesheets/rails_admin_image_manager/fonts/glyphicons-halflings-regular.eot
-- app/assets/stylesheets/rails_admin_image_manager/fonts/glyphicons-halflings-regular.svg
-- app/assets/stylesheets/rails_admin_image_manager/fonts/glyphicons-halflings-regular.ttf
-- app/assets/stylesheets/rails_admin_image_manager/fonts/glyphicons-halflings-regular.woff
-- app/assets/stylesheets/rails_admin_image_manager/fonts/glyphicons-halflings-regular.woff2
 - app/assets/stylesheets/rails_admin_image_manager/global.css.erb
 - app/assets/stylesheets/rails_admin_image_manager/global.sass
 - app/assets/stylesheets/rails_admin_image_manager/vendors/bootstrap.min.css