rails_admin_tree_browser 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 6541aa2a148b8e60bcac20dec52271d9f89ea0bc
+  data.tar.gz: 6f0c79b9044f8b61719232b3897369a976ed2954
+SHA512:
+  metadata.gz: 310439b1aed54dac6d96851587ece69cbd6a800702e1c989e46670d38b30c5d27d7fe8f202f477f3440ae1a3a3a8b1ab480c8552532e3d77b981db0c46bcbadc
+  data.tar.gz: 72a65838a73b1848d48223310fea18adb655256d9750e2fa43fe9768e90d1d82f11f70a7fd874f0ac0b05fe5480ba9bb1bc4ea2a447c7d11e3f2cccfc70c6134

data/README.md

@@ -0,0 +1,69 @@
+
+# Rails Admin tree browser field
+
+A simple gem to work with [rails_admin](https://github.com/sferik/rails_admin) that allow you to choose element in a tree.
+
+## Usage
+
+
+```ruby
+gem "rails_admin_browser_tree"
+```
+
+Then, add in your rails admin model initializer<br/>
+``` config/initializers/rails_admin/modelName.rb ```
+
+```ruby
+RailsAdmin.config do |config|
+  config.model MyAwesomeModel do
+    edit do
+      field :db_path_field, :tree_browser do
+        tree_root_url 'https://url_to_api_return_json.com'
+      end
+    end
+  end
+end
+```
+
+## Config
+
+- `tree_root_url` - The root url from where we show the files tree
+- `button_label` - Overwrite the label name (Optional)
+- `download_link` - true/false Show icon with link to download (Optional)
+- `node_type_name` - overwrite de node type name, default: node (Optional)
+- `element_type_name` - overwrite de element type name, default: element (Optional)
+
+example:
+
+```ruby
+RailsAdmin.config do |config|
+  config.model MyAwesomeModel do
+    edit do
+      field :path, :tree_browser do
+        tree_root_url 'https://url_to_api_return_json.com'
+        button_label 'Choose a file please'
+        download_link true
+        node_type_name 'dir'
+        element_type_name 'file'
+      end
+    end
+  end
+end
+```
+## JSON need for API return
+
+example for https://url_to_api_return_json.com/node
+
+```json
+[{
+name: "element",
+path: "node/element",
+type: "element"
+},
+{
+name: "sub_node",
+path: "node/sub_node",
+type: "node"
+}]
+```
+

data/app/views/rails_admin/main/_tree_browser.html.erb

@@ -0,0 +1,17 @@
+<%= javascript_include_tag 'rails_admin/rails_admin_tree_browser' %>
+<%= stylesheet_link_tag 'rails_admin/rails_admin_tree_browser' %>
+
+<div id="tree-browser-input">
+  <tree-browser
+    v-bind:download-link="<%= field.download_link %>"
+    back-button-label="<%= I18n.t('rails_admin_tree_browser.back_button') %>"
+    remove-button-label="<%= I18n.t('rails_admin_tree_browser.remove_button') %>"
+    list-title-label="<%= I18n.t('rails_admin_tree_browser.list_title') %>"
+    root-node="<%= field.tree_root_url %>"
+    button-label="<%= field.button_label %>"
+    field-value="<%= @object[field.name] %>"
+    field-name="<%= field.input_name %>"
+    node-type-name="<%= field.node_type_name %>"
+    element-type-name="<%= field.element_type_name %>">
+  </tree-browser>
+</div>

data/config/locales/en.yml

@@ -0,0 +1,6 @@
+en:
+  rails_admin_tree_browser:
+    back_button: Go back
+    list_title: Name
+    remove_button: delete
+    choose_button: Choose a element

data/config/locales/fr.yml

@@ -0,0 +1,6 @@
+fr:
+  rails_admin_tree_browser:
+    back_button: Retour
+    list_title: Nom
+    remove_button: retirer
+    choose_button: Choisir un element

data/lib/rails_admin_tree_browser/engine.rb

@@ -0,0 +1,10 @@
+require 'rubygems'
+module RailsAdminFilesTree
+  class Engine < ::Rails::Engine
+    isolate_namespace RailsAdmin
+
+    initializer "RailsAdminTreeBrowser precompile hook" do |app|
+      app.config.assets.precompile += ['rails_admin/rails_admin_tree_browser.css', 'rails_admin/rails_admin_tree_browser.js']
+    end
+  end
+end

data/lib/rails_admin_tree_browser/tree_browser_field.rb

@@ -0,0 +1,43 @@
+module RailsAdmin::Config::Fields::Types
+  class TreeBrowserField < RailsAdmin::Config::Fields::Base
+
+    RailsAdmin::Config::Fields::Types::register(:tree_browser, self)
+
+    def allowed_methods
+      [@name, button_label, download_link, tree_root_url]
+    end
+
+    register_instance_option(:partial) do
+      :tree_browser
+    end
+
+    register_instance_option(:tree_root_url) do
+      nil
+    end
+
+    register_instance_option(:button_label) do
+      I18n.t('rails_admin_tree_browser.choose_button') || :button_label
+    end
+
+    register_instance_option(:download_link) do
+      false || :download_link
+    end
+
+    register_instance_option(:node_type_name) do
+      'node' || :node_type_name
+    end
+
+    register_instance_option(:element_type_name) do
+      'element' || :element_type_name
+    end
+
+    def input_name
+      "#{bindings[:form].object_name}[#{@name}]"
+    end
+
+    def dom_name
+      @dom_name ||= "#{bindings[:form].object_name}_#{@name}"
+    end
+
+  end
+end

data/lib/rails_admin_tree_browser.rb

@@ -0,0 +1,7 @@
+require 'rails_admin'
+require "rails_admin_tree_browser/engine"
+
+module RailsAdminTreeBrowser
+end
+
+require 'rails_admin_tree_browser/tree_browser_field'

data/vendor/assets/javascripts/rails_admin/app.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import TreeBrowser from './components/tree-browser.vue'
+
+
+document.addEventListener("DOMContentLoaded", function() {
+  if(document.getElementById('tree-browser-input')) {
+    new Vue({
+      el: '#tree-browser-input',
+      components: { TreeBrowser }
+    })
+  }
+})

data/vendor/assets/javascripts/rails_admin/components/tree-browser.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <span class="tree-browser__preview" v-if="selectedNode"><i class="fa fa-file-o"></i>{{selectedNode}}</span>
+    <input type="hidden" :name="fieldName" v-model="selectedNode">
+    <button class="btn btn-info" type="button" @click="showInsertOverlay = !showInsertOverlay" name="button">{{buttonLabel}}</button>
+    <button v-if="selectedNode" class="btn btn-default" type="button" @click="selectedNode = ''" name="button"><i class="icon-remove"></i> {{ removeButtonLabel }}</button>
+    <transition name="fade">
+      <div class="tree-browser__overlay" v-if="showInsertOverlay">
+        <div class="header">
+          <button type="button" @click="showInsertOverlay = false" class="btn tree-browser__overlay-close" name="button">×</button>
+        </div>
+        <table class="table">
+            <caption>{{ node }}</caption>
+            <thead>
+                <tr>
+                    <th>{{ listTitleLabel }}</th>
+                    <th class="text-right"><button type="button" class="btn btn-info btn-xs" @click="goBack()" v-if="node !== '/'">{{ backButtonLabel }}</button></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="element in elements">
+                    <td>
+                        <div @click="nodeClick(element)" class="element" v-if="element.type === elementTypeName">
+                            <i class="fa fa-file-o"></i>
+                            {{ element.name }}
+                        </div>
+                        <div class="node" v-if="element.type === nodeTypeName">
+                            <i class="fa fa-folder-o"></i>
+                            <a @click="changeNode(element.path)">{{ element.name }}</a>
+                        </div>
+                    </td>
+                    <td class="text-right" v-show="downloadLink">
+                        <a :href="downloadLinkPath(element)" download v-if="element.type === elementTypeName">
+                            <i class="fa fa-cloud-download"></i>
+                        </a>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+
+  export default {
+    watch: {
+      repo: function(newVal, oldVal) {
+        this.node = '/';
+        this.getElements();
+      }
+    },
+    props: {
+      fieldName: {
+        type: String,
+        required: true
+      },
+      fieldValue: {
+        type: String,
+        required: true
+      },
+      rootNode: {
+        type: String,
+        required: true
+      },
+      downloadLink: {
+        type: Boolean,
+        required: false
+      },
+      nodeTypeName: {
+        type: String,
+        defaut: 'node',
+        required: false
+      },
+      elementTypeName: {
+        type: String,
+        defaut: 'element',
+        required: false
+      },
+      buttonLabel: {
+        type: String,
+        required: true
+      },
+      backButtonLabel: {
+        type: String,
+        required: true
+      },
+      removeButtonLabel: {
+        type: String,
+        required: true
+      },
+      listTitleLabel: {
+        type: String,
+        required: true
+      }
+    },
+    data: function(){
+      return {
+        showInsertOverlay: false,
+        node: '/',
+        selectedNode: '',
+        elements: []
+      }
+    },
+    created: function() {
+      this.getElements();
+    },
+    mounted() {
+      //do something after mounting vue instance
+      if (this.fieldValue) {
+        this.selectedNode = this.fieldValue;
+      }
+    },
+    methods: {
+      downloadLinkPath: function(element) {
+        return this.rootNode + '/' + element.path
+      },
+      nodeClick: function(node) {
+        this.selectedNode = node.path;
+        this.showInsertOverlay = false;
+      },
+      getElements: function() {
+        axios.get(this.rootNode + this.node).then(function(response){
+          this.elements = response.data;
+        }.bind(this));
+      },
+      changeNode: function(node) {
+        this.node = '/' + node;
+        this.getElements();
+      },
+      goBack: function() {
+        this.node = this.node.split('/').slice(0, -1).join('/');
+        if (this.node === ''){
+          this.node = '/';
+        }
+        this.getElements();
+      }
+    }
+  }
+</script>
+
+<style media="screen">
+  .tree-browser__overlay {
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    position: fixed;
+    top: 100px;
+    left: 50%;
+    transform: translate(-50%,0);
+    width: 100%;
+    max-width: 475px;
+    z-index: 20;
+    max-height: 100vh;
+    overflow-y: auto;
+    background-color: white;
+    padding: 20px;
+    border-radius: 4px;
+    max-height: 80vh;
+    overflow-y: auto; }
+
+    .tree-browser__overlay .node,
+    .tree-browser__overlay .element{
+      cursor: pointer;
+    }
+
+  .tree-browser__overlay-close {
+    float: right;
+    font-size: 21px;
+    font-weight: bold;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: 0.2;
+  }
+
+  .tree-browser__preview {
+    display: block;
+    color: #b5b5b5;
+    font-size: 14px;
+    margin-bottom: 5px;
+  }
+  .tree-browser__preview i{
+    margin-right: 5px;
+  }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+    opacity: 0
+  }
+</style>