chore: Minor fix

app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue

@@ -1,8 +1,10 @@
-<!-- Attribute type "Checkbox" -->
 <script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
+import { ref } from 'vue';
 
-defineProps({
+import Button from 'dashboard/components-next/button/Button.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
+
+const props = defineProps({
   attribute: {
     type: Object,
     required: true,
@@ -15,8 +17,10 @@ defineProps({
 
 const emit = defineEmits(['update', 'delete']);
 
-const handleChange = event => {
-  emit('update', event.target.checked);
+const attributeValue = ref(Boolean(props.attribute.value));
+
+const handleChange = value => {
+  emit('update', value);
 };
 </script>
 
@@ -28,13 +32,7 @@ const handleChange = event => {
       'justify-end': !isEditingView,
     }"
   >
-    <input
-      :checked="Boolean(attribute.value)"
-      class="px-2 py-1 text-sm border rounded bg-n-solid-2 border-n-slate-5"
-      type="checkbox"
-      @change="handleChange"
-    />
-
+    <Switch v-model="attributeValue" @change="handleChange" />
     <Button
       v-if="isEditingView"
       variant="faded"

app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue

@@ -1,4 +1,3 @@
-<!-- Attribute type "Date" -->
 <script setup>
 import { ref, computed } from 'vue';
 import { parseISO } from 'date-fns';

app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue

@@ -1,4 +1,3 @@
-<!-- Attribute type "List" -->
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';

app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue

@@ -135,7 +135,7 @@ const handleInputUpdate = async () => {
       @click="toggleEditValue(!isEditingView)"
     >
       <a
-        v-if="isAttributeTypeLink && attribute.value"
+        v-if="isAttributeTypeLink && attribute.value && isEditingView"
         :href="attribute.value"
         target="_blank"
         rel="noopener noreferrer"

app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue

@@ -1,8 +1,10 @@
 <script setup>
-import OtherAttribute from './OtherAttribute.vue';
-import ListAttribute from './ListAttribute.vue';
-import DateAttribute from './DateAttribute.vue';
-import CheckboxAttribute from './CheckboxAttribute.vue';
+import Attributes from './fixtures';
+
+import OtherAttribute from '../OtherAttribute.vue';
+import ListAttribute from '../ListAttribute.vue';
+import DateAttribute from '../DateAttribute.vue';
+import CheckboxAttribute from '../CheckboxAttribute.vue';
 
 const componentMap = {
   list: ListAttribute,
@@ -11,47 +13,6 @@ const componentMap = {
   default: OtherAttribute,
 };
 
-// Sample attributes data
-const attributes = [
-  {
-    attributeKey: 'textContact',
-    attributeDisplayName: 'Text Input',
-    attributeDisplayType: 'text',
-    value: 'Sample text value',
-  },
-  {
-    attributeKey: 'linkContact',
-    attributeDisplayName: 'URL Input',
-    attributeDisplayType: 'link',
-    value: 'https://www.chatwoot.com',
-  },
-  {
-    attributeKey: 'numberContact',
-    attributeDisplayName: 'Number Input',
-    attributeDisplayType: 'number',
-    value: '42',
-  },
-  {
-    attributeKey: 'listContact',
-    attributeDisplayName: 'List Input',
-    attributeDisplayType: 'list',
-    value: 'Option 2',
-    attributeValues: ['Option 1', 'Option 2', 'Option 3'],
-  },
-  {
-    attributeKey: 'dateContact',
-    attributeDisplayName: 'Date Input',
-    attributeDisplayType: 'date',
-    value: '2024-03-25T00:00:00.000Z',
-  },
-  {
-    attributeKey: 'checkboxContact',
-    attributeDisplayName: 'Checkbox Input',
-    attributeDisplayType: 'checkbox',
-    value: true,
-  },
-];
-
 const getCurrentComponent = type => {
   return componentMap[type] || componentMap.default;
 };
@@ -73,7 +34,7 @@ const handleDelete = type => {
     <Variant title="Create View">
       <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
         <div
-          v-for="attribute in attributes"
+          v-for="attribute in Attributes"
           :key="attribute.attributeKey"
           class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
         >
@@ -97,7 +58,7 @@ const handleDelete = type => {
     <Variant title="Saved View">
       <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
         <div
-          v-for="attribute in attributes"
+          v-for="attribute in Attributes"
           :key="attribute.attributeKey"
           class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
         >

app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js

@@ -0,0 +1,39 @@
+export default [
+  {
+    attributeKey: 'textContact',
+    attributeDisplayName: 'Text Input',
+    attributeDisplayType: 'text',
+    value: 'Sample text value',
+  },
+  {
+    attributeKey: 'linkContact',
+    attributeDisplayName: 'URL Input',
+    attributeDisplayType: 'link',
+    value: 'https://www.chatwoot.com',
+  },
+  {
+    attributeKey: 'numberContact',
+    attributeDisplayName: 'Number Input',
+    attributeDisplayType: 'number',
+    value: '42',
+  },
+  {
+    attributeKey: 'listContact',
+    attributeDisplayName: 'List Input',
+    attributeDisplayType: 'list',
+    value: 'Option 2',
+    attributeValues: ['Option 1', 'Option 2', 'Option 3'],
+  },
+  {
+    attributeKey: 'dateContact',
+    attributeDisplayName: 'Date Input',
+    attributeDisplayType: 'date',
+    value: '2024-03-25T00:00:00.000Z',
+  },
+  {
+    attributeKey: 'checkboxContact',
+    attributeDisplayName: 'Checkbox Input',
+    attributeDisplayType: 'checkbox',
+    value: true,
+  },
+];