feature: Badge field

.vscode/launch.json

@@ -4,6 +4,8 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+
+
     {
       "name": "Rails server",
       "type": "Ruby",
@@ -14,4 +16,4 @@
       ]
     }
   ]
-}
+}

Gemfile

@@ -64,6 +64,7 @@ group :development, :test do
   gem 'database_cleaner'
 
   gem 'ruby-debug-ide', require: false
+  gem 'debase'
 end
 
 group :development, :test do

Gemfile.lock

@@ -87,6 +87,9 @@ GEM
     concurrent-ruby (1.1.6)
     crass (1.0.6)
     database_cleaner (1.8.5)
+    debase (0.2.4.1)
+      debase-ruby_core_source (>= 0.10.2)
+    debase-ruby_core_source (0.10.9)
     devise (4.7.2)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
@@ -301,6 +304,7 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   database_cleaner
+  debase
   devise
   dotenv-rails
   factory_bot_rails

app/frontend/js/components/Index/BadgeField.vue

@@ -0,0 +1,27 @@
+<template>
+  <index-field-wrapper :field="field">
+    <span v-if="field.value" :class="classes">{{ field.value }}</span>
+    <div v-else>
+      -
+    </div>
+  </index-field-wrapper>
+</template>
+
+<script>
+export default {
+  props: ['field'],
+  computed: {
+    classes() {
+      const classes = []
+      const value = this.field.map[this.field.value.toLowerCase()]
+
+      if (value === 'info') classes.push('rounded-full bg-blue-500 uppercase px-2 py-1 text-xs font-bold text-white')
+      if (value === 'success') classes.push('rounded-full bg-green-500 uppercase px-2 py-1 text-xs font-bold text-white')
+      if (value === 'danger') classes.push('rounded-full bg-red-500 uppercase px-2 py-1 text-xs font-bold text-white')
+      if (value === 'warning') classes.push('rounded-full bg-yellow-500 uppercase px-2 py-1 text-xs font-bold text-white')
+
+      return classes.join(' ')
+    },
+  },
+}
+</script>

app/frontend/js/components/Show/BadgeField.vue

@@ -0,0 +1,27 @@
+<template>
+  <show-field-wrapper :field="field" :index="index">
+    <span v-if="field.value" :class="classes">{{ field.value }}</span>
+    <div v-else>
+      -
+    </div>
+  </show-field-wrapper>
+</template>
+
+<script>
+export default {
+  props: ['field', 'index'],
+  computed: {
+    classes() {
+      const classes = []
+      const value = this.field.map[this.field.value.toLowerCase()]
+
+      if (value === 'info') classes.push('rounded-full bg-blue-500 uppercase px-2 py-1 text-xs font-bold text-white')
+      if (value === 'success') classes.push('rounded-full bg-green-500 uppercase px-2 py-1 text-xs font-bold text-white')
+      if (value === 'danger') classes.push('rounded-full bg-red-500 uppercase px-2 py-1 text-xs font-bold text-white')
+      if (value === 'warning') classes.push('rounded-full bg-yellow-500 uppercase px-2 py-1 text-xs font-bold text-white')
+
+      return classes.join(' ')
+    },
+  },
+}
+</script>

app/frontend/js/components/index.js

@@ -18,6 +18,7 @@ Vue.component('index-files-field',                   require('@/js/components/In
 Vue.component('index-boolean-group-field',           require('@/js/components/Index/BooleanGroupField.vue').default)
 Vue.component('index-belongs-to-field',              require('@/js/components/Index/BelongsTo.vue').default)
 Vue.component('index-has-one-field',                 require('@/js/components/Index/HasOne.vue').default)
+Vue.component('index-badge-field',                   require('@/js/components/Index/BadgeField.vue').default)
 
 Vue.component('show-field-wrapper',                  require('@/js/components/Show/FieldWrapper.vue').default)
 Vue.component('show-id-field',                       require('@/js/components/Show/IdField.vue').default)
@@ -35,6 +36,7 @@ Vue.component('show-belongs-to-field',               require('@/js/components/Sh
 Vue.component('show-has-one-field',                  require('@/js/components/Show/HasOne.vue').default)
 Vue.component('show-has-many-field',                 require('@/js/components/Show/HasMany.vue').default)
 Vue.component('show-has--adn-belongs-to-many-field', require('@/js/components/Show/HasAndBelongsToMany.vue').default)
+Vue.component('show-badge-field',                    require('@/js/components/Show/BadgeField.vue').default)
 
 Vue.component('edit-field-wrapper',                  require('@/js/components/Edit/FieldWrapper.vue').default)
 Vue.component('edit-id-field',                       require('@/js/components/Edit/IdField.vue').default)

db/migrate/20200630092650_add_condition_to_projects.rb

@@ -0,0 +1,5 @@
+class AddConditionToProjects < ActiveRecord::Migration[6.0]
+  def change
+    add_column :projects, :condition, :text, :default => 'success'
+  end
+end

lib/avocado/app/fields/badge_field.rb

@@ -0,0 +1,25 @@
+require_relative 'field'
+
+module Avocado
+  module Fields
+    class BadgeField < Field
+      def initialize(name, **args, &block)
+        @defaults = {
+          sortable: true,
+          component: 'badge-field',
+        }
+
+        super(name, **args, &block)
+
+        default_map = { info: 'info', success: 'success', danger: 'danger', warning: 'warning' }
+        @map = args[:map].present? ? default_map.merge(args[:map]) : default_map
+      end
+
+      def hydrate_resource(model, resource, view)
+        {
+          map: @map,
+        }
+      end
+    end
+  end
+end

lib/avocado/app/resource_fields.rb

@@ -76,6 +76,10 @@ def file(name, **args)
         def files(name, **args)
           @@fields[self].push Avocado::Fields::FilesField::new(name, **args)
         end
+
+        def badge(name, **args, &block)
+          @@fields[self].push Avocado::Fields::BadgeField::new(name, **args, &block)
+        end
       end
     end
   end

spec/dummy/app/services/avocado/resources/project.rb

@@ -10,6 +10,7 @@ def initialize
       fields do
         id :ID
         text :Name, required: true
+        badge :condition, map: { informations: 'info', failure: 'danger', cancelled: 'danger' }
         has_and_belongs_to_many :users
       end
 

spec/dummy/db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_06_10_141228) do
+ActiveRecord::Schema.define(version: 2020_06_30_092650) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -56,6 +56,8 @@
     t.string "name"
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
+    t.text "status", default: "running"
+    t.text "condition"
   end
 
   create_table "projects_users", force: :cascade do |t|

spec/system/avocado/avocado_badge_fields_spec.rb

@@ -0,0 +1,31 @@
+require 'rails_helper'
+
+RSpec.describe "BadgeFields", type: :system do
+  let!(:project) { create :project, condition: 'info' }
+
+  context 'index' do
+    it 'displays the projects condition' do
+      visit '/avocado/resources/projects'
+
+      expect(find_field_element('condition')).to have_text project.condition.upcase
+      expect(find_field_element('condition')).to have_css '.rounded-full'
+      expect(find_field_element('condition')).to have_css '.bg-blue-500'
+      expect(find_field_element('condition')).to have_css '.uppercase'
+      expect(find_field_element('condition')).to have_css '.font-bold'
+      expect(find_field_element('condition')).to have_css '.text-white'
+    end
+  end
+
+  context 'show' do
+    it 'displays the projects condition' do
+      visit "/avocado/resources/projects/#{project.id}"
+
+      expect(find_field_element('condition')).to have_text project.condition.upcase
+      expect(find_field_element('condition')).to have_css '.rounded-full'
+      expect(find_field_element('condition')).to have_css '.bg-blue-500'
+      expect(find_field_element('condition')).to have_css '.uppercase'
+      expect(find_field_element('condition')).to have_css '.font-bold'
+      expect(find_field_element('condition')).to have_css '.text-white'
+    end
+  end
+end