Merge branch 'master' of https://github.com/AvocadoHQ/avocado

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>

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>

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>

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>

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>

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

@@ -1,20 +1,25 @@
 <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 />
   </show-field-wrapper>
 </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]
 

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: {

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,
         }

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

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

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

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

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

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

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