feature: Status field

app/frontend/js/Avo.js

@@ -25,6 +25,7 @@ Vue.component('index-datetime-field',            require('@/js/components/Index/
 Vue.component('index-file-field',                require('@/js/components/Index/FileField.vue').default)
 Vue.component('index-files-field',               require('@/js/components/Index/FilesField.vue').default)
 Vue.component('index-boolean-group-field',       require('@/js/components/Index/BooleanGroupField.vue').default)
+Vue.component('index-status-field',              require('@/js/components/Index/StatusField.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)
 
@@ -40,6 +41,7 @@ Vue.component('show-datetime-field',             require('@/js/components/Show/D
 Vue.component('show-file-field',                 require('@/js/components/Show/FileField.vue').default)
 Vue.component('show-files-field',                require('@/js/components/Show/FilesField.vue').default)
 Vue.component('show-boolean-group-field',        require('@/js/components/Show/BooleanGroupField.vue').default)
+Vue.component('show-status-field',               require('@/js/components/Show/StatusField.vue').default)
 Vue.component('show-belongs-to-field',           require('@/js/components/Show/BelongsTo.vue').default)
 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)
@@ -56,6 +58,7 @@ Vue.component('edit-datetime-field',             require('@/js/components/Edit/D
 Vue.component('edit-file-field',                 require('@/js/components/Edit/FileField.vue').default)
 Vue.component('edit-files-field',                require('@/js/components/Edit/FilesField.vue').default)
 Vue.component('edit-boolean-group-field',        require('@/js/components/Edit/BooleanGroupField.vue').default)
+Vue.component('edit-status-field',               require('@/js/components/Edit/StatusField.vue').default)
 Vue.component('edit-belongs-to-field',           require('@/js/components/Edit/BelongsTo.vue').default)
 Vue.component('edit-has-one-field',              require('@/js/components/Edit/HasOne.vue').default)
 

app/frontend/js/components/Edit/StatusField.vue

@@ -0,0 +1,28 @@
+<template>
+  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+    <input-component
+      :id="field.id"
+      :class="classes"
+      :disabled="disabled"
+      :placeholder="field.placeholder"
+      v-model="value"
+      />
+  </edit-field-wrapper>
+</template>
+
+<script>
+import FormField from '@/js/mixins/form-field'
+
+export default {
+  mixins: [FormField],
+  computed: {
+    classes() {
+      const classes = ['w-full']
+
+      if (this.hasErrors) classes.push('border-red-600')
+
+      return classes.join(' ')
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,72 @@
+<template>
+  <index-field-wrapper :field="field">
+    <div class="spinner" v-if="loading"></div>
+    <div :class="classes">
+      {{ value }}
+    </div>
+  </index-field-wrapper>
+</template>
+
+<style>
+.spinner {
+  display: inline-block;
+
+  width: 18px;
+  height: 18px;
+  margin: 0px 5px -3px 0px;
+  background-color: #333;
+
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+</style>
+
+<script>
+export default {
+  props: ['field'],
+  computed: {
+    classes() {
+      const classes = ['inline-block']
+      let fail = false
+      this.field.failed_when.forEach((item) => {
+        if (this.field.value === item) fail = true
+      })
+      if (fail === true) classes.push(['text-red-700'])
+
+      return classes
+    },
+    loading() {
+      let load = false
+      this.field.loading_when.forEach((item) => {
+        if (this.field.value === item) load = true
+      })
+      if (load === true) return true
+
+      return false
+    },
+    value() {
+      return this.field.value
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,72 @@
+<template>
+  <show-field-wrapper :field="field" :index="index">
+    <div class="spinner" v-if="loading"></div>
+    <div :class="classes">
+      {{ value }}
+    </div>
+  </show-field-wrapper>
+</template>
+
+<style>
+.spinner {
+  display: inline-block;
+
+  width: 18px;
+  height: 18px;
+  margin: 0px 5px -3px 0px;
+  background-color: #333;
+
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+</style>
+
+<script>
+export default {
+  props: ['field'],
+  computed: {
+    classes() {
+      const classes = ['inline-block']
+      let fail = false
+      this.field.failed_when.forEach((item) => {
+        if (this.field.value === item) fail = true
+      })
+      if (fail === true) classes.push(['text-red-700'])
+
+      return classes
+    },
+    loading() {
+      let load = false
+      this.field.loading_when.forEach((item) => {
+        if (this.field.value === item) load = true
+      })
+      if (load === true) return true
+
+      return false
+    },
+    value() {
+      return this.field.value
+    },
+  },
+}
+</script>

db/migrate/20200617164640_add_status_to_projects.rb

@@ -0,0 +1,5 @@
+class AddStatusToProjects < ActiveRecord::Migration[6.0]
+  def change
+    add_column :projects, :status, :text, default: 'waiting'
+  end
+end

lib/avocado/app/fields/status_field.rb

@@ -0,0 +1,26 @@
+require_relative 'field'
+
+module Avocado
+  module Fields
+    class StatusField < Field
+      def initialize(name, **args, &block)
+        @defaults = {
+          sortable: true,
+          component: 'status-field',
+        }
+
+        super(name, **args, &block)
+
+        @loading_when = args[:loading_when].present? ? [args[:loading_when]].flatten : [:waiting, :running]
+        @failed_when = args[:failed_when].present? ? [args[:failed_when]].flatten : [:failed]
+      end
+
+      def hydrate_resource(model, resource, view)
+        {
+          loading_when: @loading_when,
+          failed_when: @failed_when,
+        }
+      end
+    end
+  end
+end

lib/avocado/app/resource_fields.rb

@@ -53,6 +53,11 @@ def boolean_group(name, **args, &block)
           @@fields[self].push Avocado::Fields::BooleanGroupField::new(name, **args, &block)
         end
 
+        def status(name, **args)
+          @@fields[self].push Avocado::Fields::StatusField::new(name, **args)
+        end
+
+
         def belongs_to(name, **args)
           @@fields[self].push Avocado::Fields::BelongsToField::new(name, **args)
         end

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

@@ -11,6 +11,7 @@ def initialize
         id :ID
         text :Name, required: true
         has_many :Users
+        status :Status, failed_when: ['stricat', 'closed', 'reject', 'failed'], loading_when: ['loading', 'running', 'waiting', 'asteapta']
       end
 
       # use_filter Avocado::Filters::IndicatorFilter

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_17_164640) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -42,6 +42,11 @@
     t.datetime "updated_at", precision: 6, null: false
   end
 
+  create_table "migrations", id: :serial, force: :cascade do |t|
+    t.string "migration", limit: 255, null: false
+    t.integer "batch", null: false
+  end
+
   create_table "posts", force: :cascade do |t|
     t.string "name"
     t.text "body"
@@ -56,6 +61,7 @@
     t.string "name"
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
+    t.text "status"
   end
 
   create_table "projects_users", force: :cascade do |t|
@@ -108,8 +114,8 @@
     t.datetime "remember_created_at"
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
-    t.string "highlighted", default: "no"
     t.date "birthday"
+    t.string "highlighted", default: "no"
     t.index ["email"], name: "index_users_on_email", unique: true
     t.index ["group_id"], name: "index_users_on_group_id"
     t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true

spec/system/avocado/avocado_status_fields_spec.rb

@@ -0,0 +1,68 @@
+require 'rails_helper'
+
+RSpec.describe "StatusFields", type: :system do
+  describe 'with regular input' do
+    let!(:project) { create :project }
+
+    context 'index' do
+      it 'displays the projects status' do
+        visit '/avocado/resources/projects'
+
+        expect(page).to have_text project.status
+      end
+    end
+
+    context 'show' do
+      it 'displays the projects status' do
+        visit "/avocado/resources/projects/#{project.id}"
+
+        expect(page).to have_text project.status
+      end
+    end
+
+    context 'edit' do
+      it 'has the projects status prefilled' do
+        visit "/avocado/resources/projects/#{project.id}/edit"
+
+        expect(find_field('status').value).to eq ''
+      end
+
+      it 'changes the projects status to normal' do
+        visit "/avocado/resources/projects/#{project.id}/edit"
+
+        fill_in 'status', with: 'normal'
+
+        click_on 'Save'
+        wait_for_loaded
+
+        expect(current_path).to eql "/avocado/resources/projects/#{project.id}"
+        expect(page).to have_text 'normal'
+      end
+
+      it 'changes the projects status to failed' do
+        visit "/avocado/resources/projects/#{project.id}/edit"
+
+        fill_in 'status', with: 'failed'
+
+        click_on 'Save'
+        wait_for_loaded
+
+        expect(current_path).to eql "/avocado/resources/projects/#{project.id}"
+        expect(page).to have_text 'failed'
+      end
+
+      it 'changes the projects status to waiting' do
+        visit "/avocado/resources/projects/#{project.id}/edit"
+
+        fill_in 'status', with: 'waiting'
+
+        click_on 'Save'
+        wait_for_loaded
+
+        expect(current_path).to eql "/avocado/resources/projects/#{project.id}"
+        expect(page).to have_text 'waiting'
+      end
+
+    end
+  end
+end