feature: Badge field (#66)

Co-authored-by: Adrian Marin <adrian@adrianthedev.com>

.vscode/launch.json

@@ -14,4 +14,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/BadgeComponent.vue

@@ -0,0 +1,28 @@
+<template>
+  <span :class="classes" v-text="label"/>
+</template>
+
+<script>
+export default {
+  props: {
+    type: String,
+    label: String,
+  },
+  computed: {
+    classes() {
+      const classes = ['whitespace-no-wrap', 'rounded-full', 'uppercase', 'px-2', 'text-xs', 'font-bold', 'text-white']
+
+      const backgrounds = {
+        info: 'blue',
+        success: 'green',
+        danger: 'red',
+        warning: 'yellow',
+      }
+
+      classes.push(`bg-${backgrounds[this.type]}-500`)
+
+      return classes.join(' ')
+    },
+  },
+}
+</script>

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

@@ -19,12 +19,12 @@
         v-model="selectedValue"
         :disabled="disabled"
       >
-        <option value="" v-text="placeholder"></option>
+        <option value="" v-text="placeholder"/>
         <option v-for="option in options"
           :key="option.value"
           :value="option.value"
           v-text="option.label"
-          ></option>
+        />
       </select>
     </div>
     <template #extra>

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

@@ -6,9 +6,11 @@
       v-model="value"
     >
       <option value="null" disabled>{{field.placeholder}}</option>
-      <option v-for="(option, key) in field.options" :value="key" :key="key">
-        {{option}}
-      </option>
+      <option v-for="(option, key) in field.options"
+        :value="key"
+        :key="key"
+        v-text="option"
+      />
     </select>
   </edit-field-wrapper>
 </template>

app/frontend/js/components/EmptyDash.vue

@@ -0,0 +1,3 @@
+<template>
+  <span>—</span>
+</template>

app/frontend/js/components/HeadingComponent.vue

@@ -5,7 +5,7 @@
           <p v-if="asHtml" v-html="value"></p>
           <div v-else v-text="value" class="font-semibold uppercase"></div>
       </template>
-      <p v-else>-</p>
+      <empty-dash v-else />
     </div>
   </div>
 </template>

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

@@ -0,0 +1,26 @@
+<template>
+  <index-field-wrapper :field="field">
+    <Badge v-if="badgeLabel"
+      :type="badgeType"
+      :label="badgeLabel"
+    />
+    <empty-dash v-else />
+  </index-field-wrapper>
+</template>
+
+<script>
+import Badge from '@/js/components/BadgeComponent.vue'
+
+export default {
+  props: ['field'],
+  components: { Badge },
+  computed: {
+    badgeType() {
+      return this.field.value.type
+    },
+    badgeLabel() {
+      return this.field.value.label
+    },
+  },
+}
+</script>

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

@@ -1,7 +1,7 @@
 <template>
   <index-field-wrapper :field="field">
     <div v-if="field.value" v-text="field.value"></div>
-    <div v-else>-</div>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 

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

@@ -1,6 +1,7 @@
 <template>
   <index-field-wrapper :field="field" class="text-center">
-    {{value}}
+    <div v-if="value" v-text="value"></div>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 

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

@@ -6,9 +6,7 @@
           <div v-bind:key="index">{{ emoji(val) }} {{ label(key) }}</div>
         </template>
       </div>
-      <template v-else>
-        -
-      </template>
+      <empty-dash v-else />
     </template>
     <button @click="toggleView" v-else>
       View

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

@@ -1,22 +1,21 @@
 <template>
   <index-field-wrapper :field="field">
-    {{value}}
+    <div v-if="value" v-text="value"/>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 
 <script>
 import moment from 'moment'
 
 export default {
-  data: () => ({}),
   props: ['field'],
   computed: {
     value() {
       if (this.field.value) return moment(new Date(this.field.value)).format(this.field.format)
-      return '-'
+
+      return null
     },
   },
-  methods: {},
-  mounted() {},
 }
 </script>

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

@@ -6,10 +6,6 @@
 
 <script>
 export default {
-  data: () => ({}),
   props: ['field'],
-  computed: {},
-  methods: {},
-  mounted() {},
 }
 </script>

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

@@ -6,7 +6,7 @@
       v-if="this.field.value"
       download
     ></a>
-    <div v-else>-</div>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 

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

@@ -1,6 +1,7 @@
 <template>
   <index-field-wrapper :field="field">
-    {{filedLabel}}
+    <div v-if="value" v-text="value"/>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 
@@ -10,12 +11,12 @@ import pluralize from 'pluralize'
 export default {
   props: ['field'],
   computed: {
-    filedLabel() {
+    value() {
       if (this.field.value && this.field.value.length > 0) {
         return `${this.field.value.length} ${pluralize(this.field.name, this.field.value.length)}`
       }
 
-      return '-'
+      return null
     },
   },
 }

app/frontend/js/components/Index/Filters/SelectFilter.vue

@@ -11,7 +11,7 @@
         :class="inputClasses"
         class="select-input w-full"
       >
-        <option value="">-</option>
+        <option value="">—</option>
         <option v-for="(value, name) in filter.options"
           :value="name"
           v-text="value"

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

@@ -1,7 +1,7 @@
 <template>
   <index-field-wrapper :field="field">
     <div v-if="field.value" v-text="field.value"></div>
-    <div v-else>-</div>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 

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

@@ -1,15 +1,12 @@
 <template>
   <index-field-wrapper :field="field" class="w-12">
-    {{field.value}}
+    <div v-if="field.value" v-text="field.value"></div>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 
 <script>
 export default {
-  data: () => ({}),
   props: ['field'],
-  computed: {},
-  methods: {},
-  mounted() {},
 }
 </script>

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

@@ -1,15 +1,12 @@
 <template>
   <index-field-wrapper :field="field">
-    {{field.value}}
+    <div v-if="field.value" v-text="field.value"></div>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 
 <script>
 export default {
-  data: () => ({}),
   props: ['field'],
-  computed: {},
-  methods: {},
-  mounted() {},
 }
 </script>

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

@@ -1,15 +1,12 @@
 <template>
   <index-field-wrapper :field="field">
-    {{field.value}}
+    <div v-if="field.value" v-text="field.value"></div>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 
 <script>
 export default {
-  data: () => ({}),
   props: ['field'],
-  computed: {},
-  methods: {},
-  mounted() {},
 }
 </script>

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

@@ -1,6 +1,7 @@
 <template>
   <index-field-wrapper :field="field">
-    {{value}}
+    <div v-if="value" v-text="value"></div>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 

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

@@ -1,6 +1,7 @@
 <template>
   <index-field-wrapper :field="field">
-    {{field.value}}
+    <div v-if="field.value" v-text="field.value"></div>
+    <empty-dash v-else />
   </index-field-wrapper>
 </template>
 

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

@@ -2,7 +2,8 @@
   <index-field-wrapper :field="field">
     <a href="javascript:void(0)" @click="open = true" v-if="!open">more</a>
     <div v-if="open">
-      {{field.value}}
+      <div v-if="field.value" v-text="field.value"></div>
+      <empty-dash v-else />
     </div>
   </index-field-wrapper>
 </template>

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

@@ -0,0 +1,26 @@
+<template>
+  <show-field-wrapper :field="field" :index="index">
+    <Badge v-if="badgeLabel"
+      :type="badgeType"
+      :label="badgeLabel"
+    />
+    <empty-dash v-else />
+  </show-field-wrapper>
+</template>
+
+<script>
+import Badge from '@/js/components/BadgeComponent.vue'
+
+export default {
+  props: ['field', 'index'],
+  components: { Badge },
+  computed: {
+    badgeType() {
+      return this.field.value.type
+    },
+    badgeLabel() {
+      return this.field.value.label
+    },
+  },
+}
+</script>

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

@@ -3,7 +3,7 @@
     <router-link :to="field.link"
       v-if="field.link"
       v-text="field.value"></router-link>
-    <div v-else>-</div>
+    <empty-dash v-else />
   </show-field-wrapper>
 </template>
 

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

@@ -1,6 +1,7 @@
 <template>
   <show-field-wrapper :field="field" :index="index">
-    {{value}}
+    <div v-if="value" v-text="value"></div>
+    <empty-dash v-else />
   </show-field-wrapper>
 </template>
 

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

@@ -5,9 +5,7 @@
         <div v-bind:key="index">{{ emoji(val) }} {{ label(key) }}</div>
       </template>
     </div>
-    <template v-else>
-    -
-    </template>
+    <empty-dash v-else />
   </show-field-wrapper>
 </template>