rails_admin_image_manager 0.1.3

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="content content-narrow animated fadeIn">
+    <div class="row items-push">
+      <div class="col-sm-12">
+        <a href="#"><i class="fa fa-arrow-left"></i> Retour à la liste</a>
+      </div>
+    </div>
+    <div class="block">
+      <div class="block-header">
+        <h3 class="block-title">Modifier l'image</h3>
+      </div>
+      <div class="block-content">
+        <div class="row">
+
+          <div class="col-sm-6">
+            <div class="form-horizontal">
+
+              <div :class="[{ 'has-error': errors.name },'form-group']">
+                <div class="col-sm-12">
+                  <div class="form-material">
+                    <input v-model="currentImgTitle" class="form-control" type="text" id="image-title" name="material-text" >
+                    <label for="image-title">Titre</label>
+                    <span class="help-block" v-if="errors.name">{{ errors.name[0] }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div :class="[{ 'has-error': errors.copyright },'form-group']">
+                <div class="col-sm-12">
+                  <div class="form-material">
+                    <input v-model="currentImgCopyright" class="form-control" type="text" id="image-copyright" name="material-text" >
+                    <label for="image-copyright">Copyright</label>
+                    <span class="help-block" v-if="errors.copyright">{{ errors.copyright[0] }}</span>
+                  </div>
+                </div>
+              </div>
+              <div :class="[{ 'has-error': errors.description },'form-group']">
+                <div class="col-sm-12">
+                  <div class="form-material">
+                    <textarea v-model="currentImgDescription" class="form-control" id="material-textarea-large" name="material-textarea-large" rows="8"></textarea>
+                    <label for="material-textarea-large">Description</label>
+                    <span class="help-block" v-if="errors.description">{{ errors.description[0] }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="form-group">
+                <div class="col-sm-12">
+                  <image-tag-selector label="Étiquettes"></image-tag-selector>
+                </div>
+              </div>
+
+              <div class="form-group">
+                <div class="col-sm-10">
+                  <button class="btn btn-sm btn-primary" type="button" @click="save">Enregistrer</button>
+                  <image-insert-button :save-method="save" :id="currentImgId"/>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <p><image-upload></image-upload></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import imageInsertButton from './imageInsertButton.vue'
+import imageUpload from './imageUpload.vue'
+import imageTagSelector from './imageTagSelector.vue'
+
+export default {
+  components: {imageInsertButton, imageUpload, imageTagSelector},
+  data () {
+    return {
+      currentImgTitle: '',
+      currentImgCopyright: '',
+      currentImgDescription: '',
+      currentImgId: ''
+    }
+  },
+  methods: {
+    save() {
+      let imgData = {
+        name: this.currentImgTitle,
+        description: this.currentImgDescription,
+        copyright: this.currentImgCopyright,
+      }
+      return new Promise((resolve, reject) => {
+        this.$store.dispatch('mediasStore/setCurrentImg', imgData)
+        this.$store.dispatch('mediasStore/saveCurrentImg').then(resolve).catch(reject)
+      });
+    },
+  },
+  computed: {
+    ...mapState('mediasStore', ['errors'])
+  },
+  created () {
+    this.currentImgId = this.$store.state.mediasStore.currentImgId
+    this.currentImgTitle = this.$store.state.mediasStore.currentImgTitle
+    this.currentImgCopyright = this.$store.state.mediasStore.currentImgCopyright
+    this.currentImgDescription = this.$store.state.mediasStore.currentImgDescription
+  }
+}
+</script>
+
+<style media="screen">
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="image-tag-selector form-material">
+    <div class="image-tag-selector__choices">
+      <p><span class="label label-primary" @click="removeSelected(tag)" v-for="tag in currentImgTags">{{tag}}</span></p>
+    </div>
+    <input type="text" placeholder="Saisir une étiquette et faire enter" class="form-control" v-model="searchText" @keyup="addCusttom">
+    <label for="example-select2-multiple">{{label}}</label>
+    <ul class="image-tag-selector__pool-list">
+      <li v-for="tag in filteredTags" @click="selectTag(tag)"><button type="button">{{ tag }}</button></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  props: ['label'],
+  data () {
+    return {
+      searchText: '',
+      tagsPool: []
+    }
+  },
+  computed: {
+    filteredTags() {
+      let filtreTexte = (string) => {
+        if (string == '') return []
+        return this.tagsPool.filter((el) =>
+          el.toLowerCase().indexOf(string.toLowerCase()) > -1
+        );
+      }
+      return filtreTexte(this.searchText)
+    },
+    ...mapState('mediasStore', ['currentImgTags', 'tags'])
+  },
+  methods: {
+    selectTag(string) {
+      if (this.currentImgTags.indexOf(string) < 0) {
+        this.$store.dispatch('mediasStore/addTag', string)
+        this.searchText = ''
+      }
+    },
+    removeSelected(string) {
+      this.$store.dispatch('mediasStore/removeTag', string)
+    },
+    addCusttom(e) {
+      if (e.keyCode == 13 && this.tagsPool.indexOf(this.searchText) < 0 && this.currentImgTags.indexOf(this.searchText) < 0) {
+        this.$store.dispatch('mediasStore/addTag', this.searchText)
+        this.searchText = ''
+      }
+    }
+  },
+  mounted () {
+    this.$store.dispatch('mediasStore/fetchTags').then(()=> {
+      for (var i = 0; i < this.tags.length; i++) {
+        let tag = this.tags[i]
+        this.tagsPool.push(tag.name)
+      }
+    })
+  }
+}
+</script>
+
+<style media="screen" lang="sass">
+
+.image-tag-selector__pool-list
+  list-style: none
+  margin: 0
+  padding: 0
+  position: absolute
+  top: 100%
+  width: 100%
+  z-index: 100
+
+  li
+    background-color: #fcfcfc
+
+  button
+    background-color: transparent
+    border: none
+    display: block
+    width: 100%
+    text-align: left
+    padding-top: 10px
+    padding-bottom: 10px
+
+
+
+.image-tag-selector__choices
+  .label
+    margin: 0 3px
+    cursor: pointer
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <div :class="[{'has-error': imageError}, 'image-upload']">
+    <div class="image-upload__content">
+      <img :src="currentImgSrc" class="image-upload__img" v-if="currentImgSrc" alt="">
+      <div class="image-upload__placeholder" v-if="currentImgSrc == ''">
+        <i class="fa fa-image"></i>
+        Ajouter une image
+      </div>
+      <input class="image-upload__file-input" type="file" @change="encode($event)">
+    </div>
+    <span class="help-block"  :if="imageError">{{imageError}}</span>
+
+    <button type="button" class="btn btn-default push-20-t" v-if="showOriginal" @click="undo" alt=""><i class="fa fa-undo"></i> Annuler</button>
+  </div>
+</template>
+
+<script>
+import { encodeImageFileAsURL } from '../libs/helpers.js'
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      originalSrc: '',
+      showOriginal: false
+    }
+  },
+  computed: {
+    ...mapState('mediasStore', ['currentImgSrc', 'errors']),
+    imageError() {
+      if(this.errors.hasOwnProperty('image')) {
+        return this.errors.image[0]
+      }
+    }
+  },
+  created () {
+    this.originalSrc = this.currentImgSrc
+  },
+  methods: {
+    encode(e) {
+      encodeImageFileAsURL(e.target)
+      .then((result) => {
+        if (this.originalSrc != '') this.showOriginal = true
+        this.$store.dispatch('mediasStore/updateSrc', result.src)
+        this.$store.dispatch('mediasStore/updateImageName', result.name)
+      })
+    },
+    undo() {
+      this.$store.dispatch('mediasStore/updateSrc', this.originalSrc)
+      this.showOriginal = false
+    }
+  }
+}
+</script>
+
+<style media="screen" lang="sass">
+.image-upload
+  position: relative
+
+.image-upload__img
+  width: 100%
+
+.image-upload__file-input
+  position: absolute
+  top: 0
+  left: 0
+  bottom: 0
+  right: 0
+  width: 100%
+  opacity: 0
+  cursor: pointer
+
+.image-upload__content
+  position: relative
+  border: 6px dashed #fcfcfc
+  transition: all 200ms linear
+  .has-error &
+    border-color: #d26a5c
+
+  &:hover
+    border-color: #c9c9c9
+
+.image-upload__placeholder
+  width: 100%
+  padding: 30px 0
+  display: flex
+  align-items: center
+  justify-content: center
+  flex-direction: column
+  cursor: pointer
+  opacity: 0.8
+  i
+    font-size: 70px
+</style>

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/notificationOverlay.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="notif-overlay">
+      <transition-group name="fade-top">
+        <div :class="[{'alert-success': notification.success, 'alert-danger': notification.error}, 'alert', 'notification-item']" :key="notification" v-for="notification in notifications">
+          <p>{{ notification.msg }}</p>
+        </div>
+      </transition-group>
+    </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  computed: {
+    ...mapState('overlayStore', ['notifications'])
+  }
+}
+</script>
+
+<style media="screen" lang='sass'>
+.notif-overlay
+  position: fixed
+  bottom: 20px
+  right: 20px
+
+.notification-item
+  width: 300px
+  height: 100px
+  margin: 5px
+
+  &.error
+    background-color: red
+    color: white
+  &.success
+    background-color: #c3f0cc
+    color: #3daa41
+
+
+.fade-top-enter-active, .fade-top-leave-active
+  transition: all 400ms
+
+.fade-top-enter, .fade-top-leave-to
+  opacity: 0
+
+
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <transition name="fade">
+    <div class="progress-overlay progress active" v-if="showProgress" style="height: 6px">
+      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  computed: {
+    ...mapState('overlayStore', ['showProgress'])
+  }
+}
+</script>
+
+<style media="screen" lang='sass'>
+.progress-overlay
+  position: fixed
+  top: 0
+  width: 100%
+
+.fade-enter-active, .fade-leave-active
+  transition: opacity .150s
+.fade-enter, .fade-leave-to
+  opacity: 0
+
+.image-insert-overlay__close
+  position: absolute
+  top: 0
+  right: 0
+  background-color: transparent
+  border: none
+
+</style>

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="search-autocomplete">
+    <div class="search-autocomplete__input">
+      <input @keyup.prevent="fuzzySearch" class="form-control" v-model="query" type="text"  placeholder="Rechercher par titre ou étiquette ...">
+      <div class="search-autocomplete__tags-list">
+        <span @click="selectedTagIndex = index; selectTag()" :class="[{'active': isActive(index)}, 'search-autocomplete__tag']" v-for="(tag,index) in filteredTags">{{tag.name}}</span>
+      </div>
+    </div>
+    <span @click="deselectTag(activeTag)" class="label label-primary search-autocomplete__selected-tag" v-for="activeTag in activeFilters.tags">{{getTagFromId(activeTag)}}</span>
+  </div>
+
+</template>
+
+<script>
+import {mapState, mapGetters} from 'vuex'
+import Fuse from '../vendors/fuse.min.js'
+export default {
+  data () {
+    return {
+      query: '',
+      fuseSearch: null,
+      selectedTagIndex: -1
+    }
+  },
+  computed: {
+    ...mapState('mediasStore', ['tags', 'activeFilters']),
+    // Autocomplet will search for last string in input (seperated by space)
+    searchFor() {
+      let lastElem = this.query.split(' ').reverse()[0]
+      return lastElem
+    },
+    filteredTags() {
+      if (this.fuseSearch) {
+        return this.fuseSearch.search(this.searchFor);
+      } else {
+        return []
+      }
+
+    }
+  },
+  methods:{
+    fuzzySearch(e) {
+      if(e.key == 'ArrowUp' || e.key == 'ArrowDown') {
+        this.navigatesTags(e.key)
+      } else if (e.key == 'Enter' && this.selectedTagIndex >= 0) {
+        this.selectTag()
+      } else if (e.key == 'Enter') {
+        this.$store.dispatch('mediasStore/setSearchQuery', this.query)
+        this.$store.dispatch('mediasStore/clearImgListing')
+        this.$store.dispatch('mediasStore/setSearchPage', 1)
+        this.$store.dispatch('mediasStore/fetchImage')
+        console.log('search');
+        this.query = ""
+      } else if((e.key == 'Backspace' || e.key == 'Meta') && this.query == '' && this.activeFilters.search != '') {
+        this.clearSearch()
+      }
+    },
+    clearSearch() {
+      this.$store.dispatch('mediasStore/setSearchQuery', '')
+      this.$store.dispatch('mediasStore/clearImgListing')
+      this.$store.dispatch('mediasStore/fetchImage')
+    },
+    navigatesTags(key) {
+      if (key == 'ArrowUp') {
+        (this.selectedTagIndex > 0) ? this.selectedTagIndex -- : 0
+      } else {
+        (this.selectedTagIndex < this.filteredTags.length - 1) ? this.selectedTagIndex ++ : this.filteredTags.length
+      }
+    },
+    selectTag() {
+      let query = this.query
+      let queryArray = query.split(' ').reverse()
+      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')
+      this.selectedTagIndex = -1
+      this.query = ""
+    },
+    deselectTag(id){
+      this.$store.dispatch('mediasStore/clearImgListing')
+      this.$store.dispatch('mediasStore/removeFromTagFilter', id)
+      this.$store.dispatch('mediasStore/fetchImage')
+    },
+    isActive(index) {
+      return index == this.selectedTagIndex;
+    },
+    getTagFromId(id) {
+      let myTag = _.find(this.tags,(tag) => {return tag.id == id})
+      return myTag.name
+    }
+
+  },
+  mounted() {
+    this.$store.dispatch('mediasStore/fetchTags').then(() => {
+      this.fuseSearch = new Fuse(this.tags, {keys: ['name']})
+    })
+  }
+}
+</script>
+
+<style media="screen" lang="sass">
+  .search-autocomplete__selected-tag
+    display: inline-flex
+    margin: 3px
+    position: relative
+    cursor: pointer
+    &:first-of-type
+      margin-left: 0
+
+  .search-autocomplete__input
+    position: relative
+
+  .search-autocomplete
+    width: 100%
+    position: relative
+
+  .search-autocomplete__tags-list
+    position: absolute
+    top: 100%
+    width: 100%
+    z-index: 100
+    background-color: white
+    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1)
+
+  .search-autocomplete__tag
+    display: block
+    padding: 5px
+    transition: all 200ms linear
+    cursor: pointer
+    &:hover
+      background-color: #ededed
+
+    &.active
+      background-color: #5c90d2
+      color: white
+</style>