dynamic_scope 0.5.4

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0d425d85513eb249492e79b15ce14e476caa492b4cd7405b225815a4ab4db4cb
+  data.tar.gz: f9170279fd99494cc09101f27eed85bb820c03b26659afeee6d130e235a9a0bf
+SHA512:
+  metadata.gz: 67556f423e7f2508c59a56de695a862c22a0f6e7300afed4ab5b2cf2b027cff9375cc3686d0d8fb045adece488a46012243024ab6e9acc16eadafd857b708871
+  data.tar.gz: 46d4aa58d0d0c5e30cafa0eaa11b3dfee3e12ff7efaa19e2dc45b355dc290e9c268f96f92c22d767a594948500a0dd82853c5e9d4b7cc74a59ad03eef49d8d01

data/.gitignore

@@ -0,0 +1,5 @@
+/coverage
+/spec/reports
+/.idea
+/Gemfile.lock
+.DS_Store

data/.rspec

@@ -0,0 +1,2 @@
+--color
+--format progress

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in railsto-datepicker.gemspec
+gemspec

data/README.md

@@ -0,0 +1,3 @@
+# dynamic_scope
+
+Helpers and angular module to make fancy dynamic scopes with arel.

data/Rakefile

@@ -0,0 +1,4 @@
+require 'bundler/gem_tasks'
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new

data/app/assets/javascripts/angular-dynamic-scope.coffee

@@ -0,0 +1,201 @@
+#= require i18n
+#= require i18n/translations
+
+dynamicScope = angular.module('dynamicScope', [])
+
+dynamicScope.directive 'dynamicScope', ['$parse', ($parse) ->
+  OPERATORS = {
+    integer:  ['eq', 'not_eq', 'gteq', 'lteq'],
+    string:   ['matches', 'does_not_match', 'begins_with', 'ends_with', 'eq', 'not_eq'],
+    enum:     ['eq', 'not_eq', 'in', 'not_in'],
+    year:     ['eq', 'gteq', 'lteq'],
+    month:    ['eq', 'gteq', 'lteq'],
+    date:     ['eq', 'gteq', 'lteq'],
+    datetime: ['eq', 'gteq', 'lteq'],
+    boolean:  ['eq', 'not_eq']
+  }
+
+  IN_OPERATORS = ['in', 'not_in']
+
+  DEFAULT_VALUES = {
+    boolean: true
+    enum: undefined
+  }
+
+  defaultQuery = (config) ->
+    inputKey = Object.keys(config)[0]
+    inputOptions = config[inputKey]
+    [
+      {
+        key: inputKey
+        operator: (inputOptions.operators || OPERATORS[inputOptions.type])[0]
+        value: ''
+      }
+    ]
+
+  objectQueryToArray = (objectQuery = {}) ->
+    arrayQuery = []
+    Object.keys(objectQuery).forEach (key) ->
+      arrayQuery[key] = objectQuery[key]
+    arrayQuery
+
+  arrayQueryToObject = (arrayQuery = []) ->
+    objectQuery = {}
+    arrayQuery.forEach (queryPart, index) ->
+      objectQuery[index] = queryPart
+    objectQuery
+
+  translateKey = (key) ->
+    I18n.t("dynamic_scope.key.#{key}")
+
+  translateAndSortKeys = (keys) ->
+    _.chain(keys)
+      .inject((memo, key) ->
+        memo.push([key, translateKey(key)])
+        memo
+      , [])
+      .sortBy((keyAndName) ->
+        keyAndName[1]
+      ).value()
+
+  {
+    controllerAs: 'dynamicScope'
+    controller: ['$scope', '$element', '$attrs', '$transclude', ($scope, $element, $attrs, $transclude) ->
+      optionsAccessor = $parse($attrs.dynamicScope)
+      ctrl = this
+
+      @options = optionsAccessor($scope) || {}
+      @config = @options.config
+
+      if queryVarName = @options.query
+        $scope.$watch queryVarName, (newQuery) ->
+          ctrl.query = objectQueryToArray(newQuery)
+
+      @query ||= defaultQuery(@config)
+
+      @keysForNgOptions = translateAndSortKeys(_.keys(@config))
+
+      $scope.minDate = new Date()
+
+      @typeFor = (key) ->
+        ctrl.config[key].type
+
+      @operatorsFor = (key) ->
+        ctrl.config[key].operators || OPERATORS[ctrl.typeFor(key)]
+
+      @valuesFor = (key) ->
+        ctrl.config[key].values
+
+      @translateOperator = (operator) ->
+        I18n.t("dynamic_scope.operator.#{operator}")
+
+      @translateValue = (key, value, returnError) ->
+        return value if (returnError == false && I18n.t("dynamic_scope.values.#{key}.#{value}").includes("[missing", "translation]"))
+        I18n.t("dynamic_scope.values.#{key}.#{value}")
+
+      @addInput = ->
+        ctrl.query.push defaultQuery(ctrl.config)[0]
+
+      @removeInput = (input) ->
+        ctrl.query.splice(ctrl.query.indexOf(input), 1)
+
+      @submit = ->
+        ctrl.options.submit(arrayQueryToObject(ctrl.query))
+
+      @clearQuery = ->
+        ctrl.query = defaultQuery(ctrl.config)
+
+      @setInputDefaults = (queryPart) ->
+        if (defaultValue = DEFAULT_VALUES[ctrl.typeFor(queryPart.key)])?
+          queryPart.value = defaultValue
+
+        inputOperators = ctrl.operatorsFor(queryPart.key)
+        if inputOperators.indexOf(queryPart.operator) == -1
+          queryPart.operator = inputOperators[0]
+
+      @inputChanged = (type, value, queryPart) ->
+        console.log(value)
+        console.log(queryPart._value)
+        switch type
+          when 'month'
+            queryPart.value = "#{queryPart._value[0]}-#{queryPart._value[1]}"
+
+      @useMultiselect = (queryPart) ->
+        IN_OPERATORS.indexOf(queryPart.operator) >= 0
+
+      @operatorChanged = (queryPart) ->
+        type = ctrl.typeFor(queryPart.key)
+        switch type
+          when 'enum'
+            if IN_OPERATORS.indexOf(queryPart.operator) >= 0
+              queryPart.value = [queryPart.value] if typeof queryPart.value == 'string'
+            else if typeof queryPart.value == 'object'
+              queryPart.value = queryPart.value[0]
+
+      @keyChanged = (queryPart) ->
+        type = ctrl.typeFor(queryPart.key)
+        switch type
+          when 'enum'
+            queryPart.value = undefined
+        ctrl.setInputDefaults(queryPart)
+
+      return this
+    ]
+
+    link: ($scope, $elem, $attrs) ->
+  }
+]
+
+dynamicScope.directive 'dynamicScopeFieldset', ->
+  keySelectTemplate = '<select class="key form-control" ng-model="queryPart.key" ng-options="keyAndName[0] as keyAndName[1] for keyAndName in dynamicScope.keysForNgOptions" ng-change="dynamicScope.keyChanged(queryPart)"></select>'
+  operatorSelectTemplate = '<select class="operator form-control" ng-model="queryPart.operator" ng-options="operator as dynamicScope.translateOperator(operator) for operator in dynamicScope.operatorsFor(queryPart.key)" ng-change="dynamicScope.operatorChanged(queryPart)"></select>'
+  stringInputTemplate = '<input class="value form-control type-string" type="text" ng-model="queryPart.value" ng-switch-when="string"></input>'
+  integerInputTemplate = '<input class="value form-control type-integer" type="text" ng-model="queryPart.value" ng-switch-when="integer"></input>'
+  enumSelectTemplate =
+    '<div class="value type-enum" ng-switch-when="enum">' +
+      '<ui-select multiple ng-if="dynamicScope.useMultiselect(queryPart)" ng-model="queryPart.value">' +
+      '<ui-select-match>{{$item ? dynamicScope.translateValue(queryPart.key, $item, false) : $item}}</ui-select-match>' +
+        '<ui-select-choices repeat="value in dynamicScope.valuesFor(queryPart.key)">{{dynamicScope.translateValue(queryPart.key, value, false)}}</ui-select-choices>' +
+      '</ui-select>' +
+      '<select class="form-control" ng-if="!dynamicScope.useMultiselect(queryPart)" ng-model="queryPart.value" ng-options="value as dynamicScope.translateValue(queryPart.key, value, false) for value in dynamicScope.valuesFor(queryPart.key)"></select>' +
+    '</div>'
+  yearInputTemplate = '<input type="year" class="value form-control type-year" ng-model="queryPart.value" ng-switch-when="year" placeholder="YYYY"></input>'
+  monthInputTemplate =
+    '<div class="value type-month" ng-switch-when="month">' +
+      '<input class="year form-control" type="number" min="0" max="9999" ng-model="queryPart._value[0]" placeholder="YYYY" ng-change="dynamicScope.inputChanged(\'month\', _value, queryPart)"></input>' +
+      '<select class="month form-control" ng-model="queryPart._value[1]" ng-change="dynamicScope.inputChanged(\'month\', _value, queryPart)">' +
+        '<option value="1">' + I18n.t('date.month_names.1') + '</value>' +
+        '<option value="2">' + I18n.t('date.month_names.2') + '</value>' +
+        '<option value="3">' + I18n.t('date.month_names.3') + '</value>' +
+        '<option value="4">' + I18n.t('date.month_names.4') + '</value>' +
+        '<option value="5">' + I18n.t('date.month_names.5') + '</value>' +
+        '<option value="6">' + I18n.t('date.month_names.6') + '</value>' +
+        '<option value="7">' + I18n.t('date.month_names.7') + '</value>' +
+        '<option value="8">' + I18n.t('date.month_names.8') + '</value>' +
+        '<option value="9">' + I18n.t('date.month_names.9') + '</value>' +
+        '<option value="10">' + I18n.t('date.month_names.10') + '</value>' +
+        '<option value="11">' + I18n.t('date.month_names.11') + '</value>' +
+        '<option value="12">' + I18n.t('date.month_names.12') + '</value>' +
+      '</select>' +
+    '</div>'
+  dateFutureInputTemplate = '<div class="value type-date-future" ng-switch-when="date_future"><date-input min="{{minDate | date:\'yyyy-MM-dd\'}}" ng-model="queryPart.value"></date-input></div>'
+  dateInputTemplate = '<div class="value type-date" ng-switch-when="date"><date-input ng-model="queryPart.value"></date-input></div>'
+  datetimeInputTemplate = '<div class="value type-datetime" ng-switch-when="datetime"><datetime-input ng-model="queryPart.value"></datetime-input></div>'
+  booleanSelectTemplate = '<select class="value form-control type-boolean" ng-model="queryPart.value" ng-switch-when="boolean" ng-options="value as dynamicScope.translateValue(queryPart.key, value) for value in [true, false]"></select>'
+  fieldsetRemoveTemplate = '<a class="fieldset-remove" href="javascript:;" ng-click="dynamicScope.removeInput(queryPart)" ng-show="dynamicScope.query.length > 1">' + I18n.t('dynamic_scope.remove_fieldset') + '</a>'
+  {
+    template: '<fieldset ng-repeat="queryPart in dynamicScope.query" ng-switch="dynamicScope.typeFor(queryPart.key)" class="ng-scope">' +
+    keySelectTemplate +
+    operatorSelectTemplate +
+    stringInputTemplate +
+    integerInputTemplate +
+    enumSelectTemplate +
+    yearInputTemplate +
+    monthInputTemplate +
+    dateFutureInputTemplate +
+    dateInputTemplate +
+    datetimeInputTemplate +
+    #booleanSelectTemplate +
+    fieldsetRemoveTemplate +
+    '</fieldset>'
+  }

data/app/assets/javascripts/angular-multiple-dynamic-scope.coffee

@@ -0,0 +1,249 @@
+#= require i18n
+#= require i18n/translations
+
+multipleDynamicScope = angular.module('multipleDynamicScope', [])
+
+multipleDynamicScope.directive 'multipleDynamicScope', ['$parse', ($parse) ->
+  OPERATORS = {
+    integer:  ['eq', 'not_eq', 'gteq', 'lteq'],
+    string:   ['matches', 'does_not_match', 'begins_with', 'ends_with', 'eq', 'not_eq'],
+    enum:     ['eq', 'not_eq', 'in', 'not_in'],
+    year:     ['eq', 'gteq', 'lteq'],
+    month:    ['eq', 'gteq', 'lteq'],
+    date:     ['eq', 'gteq', 'lteq'],
+    datetime: ['eq', 'gteq', 'lteq'],
+    boolean:  ['eq', 'not_eq']
+  }
+
+  IN_OPERATORS = ['in', 'not_in']
+
+  DEFAULT_VALUES = {
+    boolean: true
+    enum: undefined
+  }
+
+  sectionDefaultQuery = (section, sections) ->
+    inputKey = Object.keys(sections[section])[0]
+    inputOptions = sections[section][inputKey]
+    [
+      {
+        key: inputKey
+        operator: (inputOptions.operators || OPERATORS[inputOptions.type])[0]
+        value: ''
+      }
+    ]
+
+  defaultQuery = (sections) ->
+    query = {}
+    Object.keys(sections).forEach (section) ->
+      query[section] = sectionDefaultQuery(section, sections)
+    query
+
+  objectQueryToQuerySections = (config, default_section, objectQuery = {}) ->
+    querySections = {}
+    angular.forEach objectQuery, (value, key) ->
+      section = if config[value.key].section == undefined then default_section else config[objectQuery[key].key].section
+      querySections[section] ||= []
+      querySections[section].push(objectQuery[key])
+    querySections
+
+  querySectionsToObject = (querySections = []) ->
+    objectQuery = {}
+    index = 0
+    Object.keys(querySections).forEach (key) ->
+      querySections[key].forEach (queryPart) ->
+        objectQuery[index++] = queryPart
+    objectQuery
+
+  translateKey = (key) ->
+    I18n.t("dynamic_scope.key.#{key}")
+
+  translateAndSortKeys = (sections) ->
+    translations = {}
+    Object.keys(sections).forEach (section_name) ->
+      translations[section_name] =
+        _.chain(_.keys(sections[section_name]))
+          .inject((memo, key) ->
+            memo.push([key, translateKey(key)])
+            memo
+        , [])
+          .sortBy((keyAndName) ->
+            keyAndName[1]
+        ).value()
+    translations
+
+  makeSections = (config, default_section) ->
+    sections = {}
+    if config
+      Object.keys(config).forEach (key) ->
+        section = config[key].section || default_section
+        sections[section] ||= {}
+        sections[section][key] = config[key]
+    sections
+
+  makeMapping = (sections) ->
+    mapping = {}
+    Object.keys(sections).forEach (section) ->
+      mapping[section] = Object.keys(sections[section])
+    mapping
+
+  {
+    controllerAs: 'multipleDynamicScope'
+    controller: ['$rootScope', '$scope', '$element', '$attrs', '$transclude', ($rootScope, $scope, $element, $attrs, $transclude) ->
+      optionsAccessor = $parse($attrs.multipleDynamicScope)
+      ctrl = this
+
+      @options = optionsAccessor($scope) || {}
+      @config = @options.config
+      @default_section = @options.default_section
+      @sections = makeSections(@config, @default_section)
+      @section_fields = makeMapping(@sections)
+
+      if queryVarName = @options.query
+        $scope.$watch queryVarName, (newQuery) ->
+          ctrl.query = objectQueryToQuerySections(ctrl.config, ctrl.default_section, newQuery)
+
+      @query ||= defaultQuery(@sections)
+
+      @keysForNgOptions = translateAndSortKeys(@sections)
+
+      $scope.minDate = new Date()
+
+      @queryFor = (section) ->
+        section_query = []
+        ctrl.query.forEach (row) ->
+          if ctrl.section_fields[section].includes(row.key)
+            section_query.push(row)
+        section_query
+
+      @typeFor = (key) ->
+        ctrl.config[key].type
+
+      @operatorsFor = (key) ->
+        ctrl.config[key].operators || OPERATORS[ctrl.typeFor(key)]
+
+      @valuesFor = (key) ->
+        ctrl.config[key].values
+
+      @translateOperator = (operator) ->
+        I18n.t("dynamic_scope.operator.#{operator}")
+
+      @translateValue = (key, value, returnError) ->
+        return value if (returnError == false && I18n.t("dynamic_scope.values.#{key}.#{value}").includes("[missing", "translation]"))
+        I18n.t("dynamic_scope.values.#{key}.#{value}")
+
+      @addInput = (section) ->
+        ctrl.query[section].push sectionDefaultQuery(section, ctrl.sections)[0]
+
+      @removeInput = (input, section) ->
+        if ctrl.query[section].length > 1
+          ctrl.query[section].splice(ctrl.query[section].indexOf(input), 1)
+        else
+          $rootScope.$broadcast('removeLastFieldset', section)
+
+      @submit = ->
+        ctrl.options.submit(querySectionsToObject(ctrl.query))
+
+      @clearQuery = ->
+        ctrl.query = defaultQuery(ctrl.sections)
+
+      @setInputDefaults = (queryPart) ->
+        if (defaultValue = DEFAULT_VALUES[ctrl.typeFor(queryPart.key)])?
+          queryPart.value = defaultValue
+
+        inputOperators = ctrl.operatorsFor(queryPart.key)
+        if inputOperators.indexOf(queryPart.operator) == -1
+          queryPart.operator = inputOperators[0]
+
+      @inputChanged = (type, value, queryPart) ->
+        switch type
+          when 'month'
+            queryPart.value = "#{queryPart._value[0]}-#{queryPart._value[1]}"
+
+      @useMultiselect = (queryPart) ->
+        IN_OPERATORS.indexOf(queryPart.operator) >= 0
+
+      @operatorChanged = (queryPart) ->
+        type = ctrl.typeFor(queryPart.key)
+        switch type
+          when 'enum'
+            if IN_OPERATORS.indexOf(queryPart.operator) >= 0
+              queryPart.value = [queryPart.value] if typeof queryPart.value == 'string'
+            else if typeof queryPart.value == 'object'
+              queryPart.value = queryPart.value[0]
+
+      @keyChanged = (queryPart) ->
+        type = ctrl.typeFor(queryPart.key)
+        switch type
+          when 'enum'
+            queryPart.value = undefined
+        ctrl.setInputDefaults(queryPart)
+
+      return this
+    ]
+
+    link: ($scope, $elem, $attrs) ->
+  }
+]
+
+multipleDynamicScope.directive 'multipleDynamicScopeFieldset', ['$parse', ($parse) ->
+  keySelectTemplate = '<select class="key form-control" ng-model="queryPart.key" ng-options="keyAndName[0] as keyAndName[1] for keyAndName in multipleDynamicScope.keysForNgOptions[section]" ng-change="multipleDynamicScope.keyChanged(queryPart)"></select>'
+  operatorSelectTemplate = '<select class="operator form-control" ng-model="queryPart.operator" ng-options="operator as multipleDynamicScope.translateOperator(operator) for operator in multipleDynamicScope.operatorsFor(queryPart.key)" ng-change="multipleDynamicScope.operatorChanged(queryPart)"></select>'
+  stringInputTemplate = '<input class="value form-control type-string" type="text" ng-model="queryPart.value" ng-switch-when="string"></input>'
+  integerInputTemplate = '<input class="value form-control type-integer" type="text" ng-model="queryPart.value" ng-switch-when="integer"></input>'
+  enumSelectTemplate =
+    '<div class="value type-enum" ng-switch-when="enum">' +
+      '<ui-select multiple ng-if="multipleDynamicScope.useMultiselect(queryPart)" ng-model="queryPart.value">' +
+      '<ui-select-match>{{$item ? multipleDynamicScope.translateValue(queryPart.key, $item, false) : $item}}</ui-select-match>' +
+      '<ui-select-choices repeat="value in multipleDynamicScope.valuesFor(queryPart.key)">{{multipleDynamicScope.translateValue(queryPart.key, value, false)}}</ui-select-choices>' +
+      '</ui-select>' +
+      '<select class="form-control" ng-if="!multipleDynamicScope.useMultiselect(queryPart)" ng-model="queryPart.value" ng-options="value as multipleDynamicScope.translateValue(queryPart.key, value, false) for value in multipleDynamicScope.valuesFor(queryPart.key)"></select>' +
+      '</div>'
+  yearInputTemplate = '<input type="year" class="value form-control type-year" ng-model="queryPart.value" ng-switch-when="year" placeholder="YYYY"></input>'
+  monthInputTemplate =
+    '<div class="value type-month" ng-switch-when="month">' +
+      '<input class="year form-control" type="number" min="0" max="9999" ng-model="queryPart._value[0]" placeholder="YYYY" ng-change="multipleDynamicScope.inputChanged(\'month\', _value, queryPart)"></input>' +
+      '<select class="month form-control" ng-model="queryPart._value[1]" ng-change="multipleDynamicScope.inputChanged(\'month\', _value, queryPart)">' +
+      '<option value="1">' + I18n.t('date.month_names.1') + '</value>' +
+      '<option value="2">' + I18n.t('date.month_names.2') + '</value>' +
+      '<option value="3">' + I18n.t('date.month_names.3') + '</value>' +
+      '<option value="4">' + I18n.t('date.month_names.4') + '</value>' +
+      '<option value="5">' + I18n.t('date.month_names.5') + '</value>' +
+      '<option value="6">' + I18n.t('date.month_names.6') + '</value>' +
+      '<option value="7">' + I18n.t('date.month_names.7') + '</value>' +
+      '<option value="8">' + I18n.t('date.month_names.8') + '</value>' +
+      '<option value="9">' + I18n.t('date.month_names.9') + '</value>' +
+      '<option value="10">' + I18n.t('date.month_names.10') + '</value>' +
+      '<option value="11">' + I18n.t('date.month_names.11') + '</value>' +
+      '<option value="12">' + I18n.t('date.month_names.12') + '</value>' +
+      '</select>' +
+      '</div>'
+  dateFutureInputTemplate = '<div class="value type-date-future" ng-switch-when="date_future"><date-input min="{{minDate | date:\'yyyy-MM-dd\'}}" ng-model="queryPart.value"></date-input></div>'
+  dateInputTemplate = '<div class="value type-date" ng-switch-when="date"><date-input ng-model="queryPart.value"></date-input></div>'
+  datetimeInputTemplate = '<div class="value type-datetime" ng-switch-when="datetime"><datetime-input ng-model="queryPart.value"></datetime-input></div>'
+  booleanSelectTemplate = '<select class="value form-control type-boolean" ng-model="queryPart.value" ng-switch-when="boolean" ng-options="value as multipleDynamicScope.translateValue(queryPart.key, value) for value in [true, false]"></select>'
+  fieldsetRemoveTemplate = '<a class="fieldset-remove" href="javascript:;" ng-click="multipleDynamicScope.removeInput(queryPart, section)" ng-show="multipleDynamicScope.query[section].length > removeLength">' + I18n.t('dynamic_scope.remove_fieldset') + '</a>'
+  {
+    template: '<legend ng-hide="hideTitle">{{ title }}</legend>' +
+      '<fieldset ng-repeat="queryPart in multipleDynamicScope.query[section]" ng-switch="multipleDynamicScope.typeFor(queryPart.key)" class="ng-scope">' +
+      keySelectTemplate +
+      operatorSelectTemplate +
+      stringInputTemplate +
+      integerInputTemplate +
+      enumSelectTemplate +
+      yearInputTemplate +
+      monthInputTemplate +
+      dateFutureInputTemplate +
+      dateInputTemplate +
+      datetimeInputTemplate +
+      #booleanSelectTemplate +
+      fieldsetRemoveTemplate +
+      '</fieldset>'
+    scope: true
+    link: ($scope, $elem, $attrs) ->
+      $scope.section = $attrs.section
+      $scope.hideTitle = $attrs.hideTitle
+      $scope.title = I18n.t("dynamic_scope.section_title.#{$scope.section}")
+      $scope.removeLength = if $attrs.removeAllFieldsets then 0 else 1
+  }
+]

data/app/assets/javascripts/dynamic_scope.coffee

@@ -0,0 +1,110 @@
+$(() ->
+  $.widget('custom.dynamicScope', {
+    options: {}
+
+    _create: () ->
+      this.counter = this.element.find('.dynamic_scope_active').size()
+      if this.element.is('form')
+        this.form = this.element
+      else
+        this.form = this.element.find('form')
+
+      this.templates = this.form.prevAll('.templates:first').find('fieldset')
+      if this.counter > 1
+        this.element.find('.dynamic_scope_remove').attr('style', null)
+
+      that = this
+
+      this.fieldsets().each( ->
+        that.addTriggers($(this))
+      )
+
+      this.element.on('click', '.dynamic_scope_add', (event) ->
+        event.preventDefault
+        newFieldset = that.addFieldset()
+        that.addTriggers(newFieldset)
+        return false
+      )
+
+      this.element.on('click', '.dynamic_scope_clear', (event) ->
+        event.preventDefault
+        that.clear()
+        return false
+      )
+
+    fieldsets: () ->
+      this.form.find('fieldset')
+
+    columnChange: (select) ->
+      this.counter = this.counter + 1
+      new_value = select.find('option:selected').attr('value')
+      template = this.templates.filter('#dynamic_scope_template_' + new_value)
+      fieldset = select.closest('fieldset')
+      input = fieldset.find('input[type=text]')
+
+      fieldset.html(template.html().replace(/INDEX/g, this.counter))
+      fieldset.attr('id', "dynamic_scope_#{this.counter}")
+      fieldset.find('.date').datepicker()
+      fieldset.find('[class="' + input.attr('class') + '"]').val(input.val())
+
+      if this.fieldsets().length > 1
+        this.fieldsets().find('.dynamic_scope_remove').attr('style', null)
+
+      this.element.trigger('dynamicScope:change')
+
+      return fieldset
+
+    addFieldset: () ->
+      this.counter = this.counter + 1
+      newFieldset = this.templates.filter('#dynamic_scope_template_any_field').clone()
+      if newFieldset.length == 0
+        newFieldset = this.templates.filter('.dynamic_scope_template:first').clone()
+
+      newFieldset.attr('style', null)
+      newFieldset.removeClass('dynamic_scope_template')
+      newFieldset.addClass('dynamic_scope_active')
+      newFieldset.html(newFieldset.html().replace(/INDEX/g, this.counter))
+      newFieldset.attr('id', 'dynamic_scope_' + this.counter)
+
+      lastActive = this.element.find('.dynamic_scope_active:last')
+      if lastActive.length > 0
+        lastActive.after(newFieldset)
+      else
+        this.element.find('.dynamic_scope_fieldsets').prepend(newFieldset)
+
+      this.fieldsets().find('.dynamic_scope_remove').attr('style', null)
+      this.element.trigger('dynamicScope:add', { fieldset: newFieldset })
+
+      return newFieldset
+
+    remove: (fieldset) ->
+      fieldset.remove()
+      if this.fieldsets().length == 1
+        this.fieldsets().find('.dynamic_scope_remove').css('display', 'none')
+
+      this.element.trigger('dynamicScope:remove', { fieldset: fieldset })
+
+    clear: () ->
+      this.form.find('input[type=text]').each( ->
+        $(this).val('')
+      )
+      this.form.submit()
+
+    addTriggers: (fieldset) ->
+      that = this
+      fieldset.on('change', '.dynamic_scope_column', (event) ->
+        that.columnChange($(this))
+      )
+      fieldset.on('click', '.dynamic_scope_remove', (event) ->
+        that.remove(fieldset)
+        event.preventDefault()
+        return false
+      )
+    }
+  )
+
+)
+
+$(->
+  $('.dynamic_scope').dynamicScope()
+)