From 48b1b4b85c5a68074b56b0b9095f3ccd0ce7b378 Mon Sep 17 00:00:00 2001
From: David Mihai Marin <mihai.mdm2007@gmail.com>
Date: Tue, 28 Jul 2020 19:58:09 +0300
Subject: [PATCH 1/2] improvement: Boolean and Boolean Group fields (#90)

---
 app/frontend/js/components/BooleanCheck.vue   | 29 ++++++++++++
 .../js/components/Edit/BooleanGroupField.vue  |  3 +-
 .../js/components/Index/BooleanField.vue      | 30 +++----------
 .../js/components/Index/BooleanGroupField.vue | 45 ++++++++++---------
 .../js/components/Show/BooleanField.vue       | 14 +++---
 .../js/components/Show/BooleanGroupField.vue  | 14 +++---
 lib/avocado/app/fields/boolean_field.rb       |  2 +-
 spec/dummy/app/models/user.rb                 |  2 +-
 .../avocado/boolean_group_field_spec.rb       |  9 ++--
 9 files changed, 83 insertions(+), 65 deletions(-)
 create mode 100644 app/frontend/js/components/BooleanCheck.vue

diff --git a/app/frontend/js/components/BooleanCheck.vue b/app/frontend/js/components/BooleanCheck.vue
new file mode 100644
index 0000000000..d9824860c5
--- /dev/null
+++ b/app/frontend/js/components/BooleanCheck.vue
@@ -0,0 +1,29 @@
+<template>
+  <component :is="component" :class="classes" />
+</template>
+
+<script>
+export default {
+  props: {
+    checked: Boolean,
+  },
+  computed: {
+    classes() {
+      let classes = 'h-5 float-left'
+
+      if (this.checked) {
+        classes += ' text-green-600'
+      } else {
+        classes += ' text-red-600'
+      }
+
+      return classes
+    },
+    component() {
+      if (this.checked) return 'check-circle-icon'
+
+      return 'x-circle-icon'
+    },
+  },
+}
+</script>
diff --git a/app/frontend/js/components/Edit/BooleanGroupField.vue b/app/frontend/js/components/Edit/BooleanGroupField.vue
index 3429b6f3b1..8f3915214f 100644
--- a/app/frontend/js/components/Edit/BooleanGroupField.vue
+++ b/app/frontend/js/components/Edit/BooleanGroupField.vue
@@ -9,8 +9,9 @@
               :name="name"
               :checked="value"
               :disabled="disabled"
+              class="w-3 h-3"
             />
-            <label>{{ labelForOption(name) }}</label>
+            <label class="ml-1">{{ labelForOption(name) }}</label>
           </div>
         </template>
       </div>
diff --git a/app/frontend/js/components/Index/BooleanField.vue b/app/frontend/js/components/Index/BooleanField.vue
index 8009037ded..b318c1c54a 100644
--- a/app/frontend/js/components/Index/BooleanField.vue
+++ b/app/frontend/js/components/Index/BooleanField.vue
@@ -1,33 +1,17 @@
 <template>
-  <index-field-wrapper :field="field" class="text-center">
-    <component :is="component"
-      v-if="component"
-      :class="classes"
-    />
+  <index-field-wrapper :field="field">
+    <boolean-check
+      v-if="field.value != null"
+      :checked="field.value" />
     <empty-dash v-else />
   </index-field-wrapper>
 </template>
 
 <script>
+import BooleanCheck from '@/js/components/BooleanCheck.vue'
+
 export default {
   props: ['field'],
-  computed: {
-    classes() {
-      let classes = 'h-6'
-
-      if (this.field.value) {
-        classes += ' text-green-600'
-      } else {
-        classes += ' text-red-600'
-      }
-
-      return classes
-    },
-    component() {
-      if (this.field.value) return 'check-circle-icon'
-
-      return 'x-circle-icon'
-    },
-  },
+  components: { BooleanCheck },
 }
 </script>
diff --git a/app/frontend/js/components/Index/BooleanGroupField.vue b/app/frontend/js/components/Index/BooleanGroupField.vue
index 4ee3a7fde3..4ae1f65e09 100644
--- a/app/frontend/js/components/Index/BooleanGroupField.vue
+++ b/app/frontend/js/components/Index/BooleanGroupField.vue
@@ -1,28 +1,39 @@
 <template>
   <index-field-wrapper :field="field" class="text-center">
-    <template v-if="isVisible">
-      <div class="space-y-3" v-if="value">
-        <template v-for="(val, key, index) in value">
-          <div v-bind:key="index">{{ emoji(val) }} {{ label(key) }}</div>
-        </template>
-      </div>
-      <empty-dash v-else />
+    <template v-if="value">
+        <v-popover>
+          <a href="javascript:void(0);" class="tooltip-target">View</a>
+          <template slot="popover">
+            <div class="space-y-2">
+              <template v-for="(val, key, index) in value">
+                <div v-bind:key="index">
+                  <boolean-check :checked="val"/>
+                  <div class="ml-6 text-left py-px">{{ label(key) }}</div>
+                </div>
+              </template>
+            </div>
+          </template>
+        </v-popover>
     </template>
-    <a href="javascript:void(0);"
-      @click="toggleView"
-      v-else
-    >
-      View
-    </a>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 
+<style>
+  .tooltip-inner, .popover-inner {
+    padding: 1rem !important;
+    background-color: #ffffff !important;
+  }
+</style>
+
 <script>
+import BooleanCheck from '@/js/components/BooleanCheck.vue'
 import FormField from '@/js/mixins/form-field'
 
 export default {
   mixins: [FormField],
   props: ['field'],
+  components: { BooleanCheck },
   data: () => ({
     isVisible: false,
   }),
@@ -40,19 +51,11 @@ export default {
         this.value = result
       }
     },
-    emoji(booly) {
-      if (booly === true) return '✅'
-
-      return '❌'
-    },
     label(key) {
       if (this.field.options[key]) return this.field.options[key]
 
       return key
     },
-    toggleView() {
-      this.isVisible = true
-    },
   },
 }
 </script>
diff --git a/app/frontend/js/components/Show/BooleanField.vue b/app/frontend/js/components/Show/BooleanField.vue
index 0191e7f081..30da984fbb 100644
--- a/app/frontend/js/components/Show/BooleanField.vue
+++ b/app/frontend/js/components/Show/BooleanField.vue
@@ -1,19 +1,17 @@
 <template>
   <show-field-wrapper :field="field" :index="index">
-    <div v-if="value" v-text="value"></div>
+    <boolean-check
+      v-if="field.value != null"
+      :checked="field.value" />
     <empty-dash v-else />
   </show-field-wrapper>
 </template>
 
 <script>
+import BooleanCheck from '@/js/components/BooleanCheck.vue'
+
 export default {
   props: ['field', 'index'],
-  computed: {
-    value() {
-      if (this.field.value) return '✅'
-
-      return '❌'
-    },
-  },
+  components: { BooleanCheck },
 }
 </script>
diff --git a/app/frontend/js/components/Show/BooleanGroupField.vue b/app/frontend/js/components/Show/BooleanGroupField.vue
index 8abc1bcbd0..47050daf0e 100644
--- a/app/frontend/js/components/Show/BooleanGroupField.vue
+++ b/app/frontend/js/components/Show/BooleanGroupField.vue
@@ -1,8 +1,11 @@
 <template>
   <show-field-wrapper :field="field" :index="index">
-    <div class="space-y-3" v-if="value">
+    <div class="space-y-2" v-if="value">
       <template v-for="(val, key, index) in value">
-        <div v-bind:key="index">{{ emoji(val) }} {{ label(key) }}</div>
+        <div v-bind:key="index">
+          <boolean-check :checked="val"/>
+          <div class="ml-6 text-left py-px">{{ label(key) }}</div>
+        </div>
       </template>
     </div>
     <empty-dash v-else />
@@ -10,11 +13,13 @@
 </template>
 
 <script>
+import BooleanCheck from '@/js/components/BooleanCheck.vue'
 import FormField from '@/js/mixins/form-field'
 
 export default {
   mixins: [FormField],
   props: ['field', 'index'],
+  components: { BooleanCheck },
   methods: {
     setInitialValue() {
       if (this.field.value) {
@@ -29,11 +34,6 @@ export default {
         this.value = result
       }
     },
-    emoji(booly) {
-      if (booly === true) return '✅'
-
-      return '❌'
-    },
     label(key) {
       if (this.field.options[key]) return this.field.options[key]
 
diff --git a/lib/avocado/app/fields/boolean_field.rb b/lib/avocado/app/fields/boolean_field.rb
index 86de6a9247..bb0f773303 100644
--- a/lib/avocado/app/fields/boolean_field.rb
+++ b/lib/avocado/app/fields/boolean_field.rb
@@ -18,7 +18,7 @@ def initialize(name, **args, &block)
 
       def hydrate_field(fields, model, resource, view)
         {
-          value: fields[:value] == @true_value,
+          value: fields[:value].present? ? fields[:value] == @true_value : fields[:value],
           true_value: @true_value,
           false_value: @false_value,
         }
diff --git a/spec/dummy/app/models/user.rb b/spec/dummy/app/models/user.rb
index 339be13124..7930d39456 100644
--- a/spec/dummy/app/models/user.rb
+++ b/spec/dummy/app/models/user.rb
@@ -14,7 +14,7 @@ class User < ApplicationRecord
   has_one_attached :cv
 
   def is_admin?
-    roles['admin'] === true
+    roles.present? and roles['admin'] === true
   end
 
   def name
diff --git a/spec/system/avocado/boolean_group_field_spec.rb b/spec/system/avocado/boolean_group_field_spec.rb
index c38c18c686..f97ec55960 100644
--- a/spec/system/avocado/boolean_group_field_spec.rb
+++ b/spec/system/avocado/boolean_group_field_spec.rb
@@ -44,9 +44,12 @@
         user_id = page.find('[field-id="id"] [data-slot="value"]').text
         expect(current_path).to eql "/avocado/resources/users/#{user_id}"
 
-        expect(find_field_value_element(:roles)).to have_text '✅ Administrator'
-        expect(find_field_value_element(:roles)).to have_text '❌ Manager'
-        expect(find_field_value_element(:roles)).to have_text '❌ Writer'
+        expect(page.all("[field-id='roles'] [data-slot='value'] svg")[0]['class']).to have_text 'text-green-600'
+        expect(find_field_value_element(:roles)).to have_text 'Administrator'
+        expect(page.all("[field-id='roles'] [data-slot='value'] svg")[1]['class']).to have_text 'text-red-600'
+        expect(find_field_value_element(:roles)).to have_text 'Manager'
+        expect(page.all("[field-id='roles'] [data-slot='value'] svg")[2]['class']).to have_text 'text-red-600'
+        expect(find_field_value_element(:roles)).to have_text 'Writer'
       end
     end
   end

From 4660f051e44968910453448cb24ec587e332d414 Mon Sep 17 00:00:00 2001
From: David Mihai Marin <mihai.mdm2007@gmail.com>
Date: Tue, 28 Jul 2020 20:21:26 +0300
Subject: [PATCH 2/2] feature: fields Default Option (#88)

Co-authored-by: Adrian Marin <adrian@adrianthedev.com>
---
 app/frontend/js/views/ResourceIndex.vue       |  2 +-
 lib/avocado/app/fields/field.rb               | 11 +++
 lib/avocado/app/fields/hidden_field.rb        |  2 +-
 .../app/services/avocado/resources/team.rb    |  2 +-
 .../avocado/resources/team_membership.rb      |  2 +-
 .../app/services/avocado/resources/user.rb    |  2 +-
 spec/system/avocado/default_field_spec.rb     | 72 +++++++++++++++++++
 7 files changed, 88 insertions(+), 5 deletions(-)
 create mode 100644 spec/system/avocado/default_field_spec.rb

diff --git a/app/frontend/js/views/ResourceIndex.vue b/app/frontend/js/views/ResourceIndex.vue
index 70afb731f4..f4949cb5bf 100644
--- a/app/frontend/js/views/ResourceIndex.vue
+++ b/app/frontend/js/views/ResourceIndex.vue
@@ -312,7 +312,7 @@ export default {
       return this.meta.per_page_steps
     },
     fieldId() {
-      return this.field ? this.field.id : null
+      return this.field ? this.field.id : undefined
     },
   },
   methods: {
diff --git a/lib/avocado/app/fields/field.rb b/lib/avocado/app/fields/field.rb
index 650165b44e..2cc3df84b8 100644
--- a/lib/avocado/app/fields/field.rb
+++ b/lib/avocado/app/fields/field.rb
@@ -21,6 +21,7 @@ class Field
       attr_accessor :block
       attr_accessor :placeholder
       attr_accessor :help
+      attr_accessor :default
 
       def initialize(id, **args, &block)
         super(id, **args, &block)
@@ -46,6 +47,7 @@ def initialize(id, **args, &block)
           format_using: false,
           placeholder: id.to_s.camelize,
           help: nil,
+          default: nil,
         }
 
         # Set the values in the following order
@@ -78,6 +80,15 @@ def fetch_for_resource(model, resource, view)
         # Set initial value
         fields[:value] = model.send(id) if model_or_class(model) == 'model' and model.methods.include? id
 
+        # Set default value for create view
+        if view === :create
+          if fields[:default].present? and fields[:default].respond_to? :call
+            fields[:value] = fields[:default].call model, resource, view, self
+          else
+            fields[:value] = fields[:default]
+          end
+        end
+
         # Run callback block if present
         if computable and @block.present?
           fields[:computed_value] = @block.call model, resource, view, self
diff --git a/lib/avocado/app/fields/hidden_field.rb b/lib/avocado/app/fields/hidden_field.rb
index 22cec8558a..638f35194f 100644
--- a/lib/avocado/app/fields/hidden_field.rb
+++ b/lib/avocado/app/fields/hidden_field.rb
@@ -10,7 +10,7 @@ def initialize(name, **args, &block)
 
         super(name, **args, &block)
 
-        only_on :edit
+        only_on [:edit, :create]
       end
     end
   end
diff --git a/spec/dummy/app/services/avocado/resources/team.rb b/spec/dummy/app/services/avocado/resources/team.rb
index 7e3f8dfa38..bfcbdbf7e3 100644
--- a/spec/dummy/app/services/avocado/resources/team.rb
+++ b/spec/dummy/app/services/avocado/resources/team.rb
@@ -9,7 +9,7 @@ def initialize
       fields do
         id
         text :name
-        textarea :description, rows: 5, readonly: false, hide_on: :index, format_using: -> (value) { value.to_s.truncate 30 }, required: true
+        textarea :description, rows: 5, readonly: false, hide_on: :index, format_using: -> (value) { value.to_s.truncate 30 }, required: true, default: 'This team is wonderful!'
 
         number :members_count do |model|
           model.members.count
diff --git a/spec/dummy/app/services/avocado/resources/team_membership.rb b/spec/dummy/app/services/avocado/resources/team_membership.rb
index 064c0f101f..1748f2422b 100644
--- a/spec/dummy/app/services/avocado/resources/team_membership.rb
+++ b/spec/dummy/app/services/avocado/resources/team_membership.rb
@@ -8,7 +8,7 @@ def initialize
 
       fields do
         id
-        select :level, options: { beginner: 'Beginner', intermediate: 'Intermediate', advanced: 'Advanced' }
+        select :level, options: { beginner: 'Beginner', intermediate: 'Intermediate', advanced: 'Advanced' }, default: -> (model, resource, view, field) { Time.now.hour < 12 ? 'advanced' : 'beginner' }
         belongs_to :user
         belongs_to :team
       end
diff --git a/spec/dummy/app/services/avocado/resources/user.rb b/spec/dummy/app/services/avocado/resources/user.rb
index 8a87e19030..b7003a1208 100644
--- a/spec/dummy/app/services/avocado/resources/user.rb
+++ b/spec/dummy/app/services/avocado/resources/user.rb
@@ -29,7 +29,7 @@ def initialize
         heading '<div class="text-gray-300 uppercase font-bold">DEV</div>', as_html: true
         code :custom_css, theme: 'dracula', language: 'css', help: "This enables you to edit the user's custom styles."
 
-        hidden :team_id # For testing purposes
+        hidden :team_id, default: 0 # For testing purposes
 
         has_and_belongs_to_many :projects
         has_many :posts
diff --git a/spec/system/avocado/default_field_spec.rb b/spec/system/avocado/default_field_spec.rb
new file mode 100644
index 0000000000..b90202679f
--- /dev/null
+++ b/spec/system/avocado/default_field_spec.rb
@@ -0,0 +1,72 @@
+require 'rails_helper'
+
+RSpec.describe 'DefaultField', type: :system do
+  describe 'with a default value (team - description)' do
+
+    context 'create' do
+      it 'checks presence of default team description' do
+        visit '/avocado/resources/teams/new'
+        wait_for_loaded
+
+        expect(find("[field-id='description'] [data-slot='value'] textarea").value).to have_text 'This team is wonderful!'
+      end
+
+      it 'saves team and checks for default team description value' do
+        visit '/avocado/resources/teams/new'
+        wait_for_loaded
+
+        expect(Team.count).to eql 0
+
+        fill_in 'name', with: 'Joshua Josh'
+
+        click_on 'Save'
+        wait_for_loaded
+
+        expect(current_path).to eql "/avocado/resources/teams/#{Team.last.id}"
+        expect(find_field_element(:description)).to have_text 'This team is wonderful!'
+      end
+    end
+  end
+
+  describe 'with a computable default value (team_membership - level)' do
+    let!(:user) { create :user, first_name: 'Mihai', last_name: 'Marin' }
+    let!(:team) { create :team, name: 'Apple' }
+
+    context 'create' do
+      it 'checks presence of default team membership level' do
+        visit '/avocado/resources/team_memberships/new'
+        wait_for_loaded
+
+        if Time.now.hour < 12
+          expect(find_field_element(:level)).to have_text 'Advanced'
+        else
+          expect(find_field_element(:level)).to have_text 'Beginner'
+        end
+      end
+
+      it 'saves team membership and checks for default team membership level value' do
+        visit '/avocado/resources/team_memberships/new'
+        wait_for_loaded
+
+        expect(TeamMembership.count).to eql 0
+
+        select 'Mihai Marin', from: :user
+        select 'Apple', from: :team
+
+        click_on 'Save'
+        wait_for_loaded
+
+        expect(current_path).to eql "/avocado/resources/team_memberships/#{TeamMembership.last.id}"
+
+        if Time.now.hour < 12
+          expect(find_field_element(:level)).to have_text 'advanced'
+        else
+          expect(find_field_element(:level)).to have_text 'beginner'
+        end
+
+        expect(find_field_element(:user)).to have_text 'Mihai Marin'
+        expect(find_field_element(:team)).to have_text 'Apple'
+      end
+    end
+  end
+end