feat: Create contact

app/javascript/dashboard/components-next/Contacts/ContactHeader/ContactActions.vue

@@ -1,12 +1,9 @@
 <script setup>
 import Button from 'dashboard/components-next/button/Button.vue';
 import ContactSortMenu from './ContactSortMenu.vue';
+import ContactMoreActions from './ContactMoreActions.vue';
 
 defineProps({
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
   isDetailView: {
     type: Boolean,
     default: false,
@@ -21,7 +18,7 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['filter', 'more', 'message', 'update:sort']);
+const emit = defineEmits(['filter', 'more', 'update:sort']);
 </script>
 
 <template>
@@ -30,6 +27,7 @@ const emit = defineEmits(['filter', 'more', 'message', 'update:sort']);
       v-if="!isDetailView"
       icon="i-lucide-list-filter"
       color="slate"
+      size="sm"
       variant="ghost"
       @click="emit('filter')"
     />
@@ -39,13 +37,6 @@ const emit = defineEmits(['filter', 'more', 'message', 'update:sort']);
       :active-ordering="activeOrdering"
       @update:sort="emit('update:sort', $event)"
     />
-    <Button
-      v-if="!isDetailView"
-      icon="i-lucide-ellipsis-vertical"
-      color="slate"
-      variant="ghost"
-      @click="emit('more')"
-    />
-    <Button :label="buttonLabel" size="sm" @click="emit('message')" />
+    <ContactMoreActions v-if="!isDetailView" />
   </div>
 </template>

app/javascript/dashboard/components-next/Contacts/ContactHeader/ContactMoreActions.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
+
+const { t } = useI18n();
+
+const contactMenuItems = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
+    action: 'add',
+    value: 'add',
+    icon: 'i-lucide-plus',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
+    action: 'export',
+    value: 'export',
+    icon: 'i-lucide-upload',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
+    action: 'import',
+    value: 'import',
+    icon: 'i-lucide-download',
+  },
+];
+
+const showActionsDropdown = ref(false);
+const createNewContactDialogRef = ref(null);
+
+const handleContactAction = ({ action }) => {
+  if (action === 'add') {
+    createNewContactDialogRef.value?.dialogRef.open();
+  }
+};
+</script>
+
+<template>
+  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
+    <Button
+      icon="i-lucide-ellipsis-vertical"
+      color="slate"
+      variant="ghost"
+      size="sm"
+      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
+      @click="showActionsDropdown = !showActionsDropdown"
+    />
+    <DropdownMenu
+      v-if="showActionsDropdown"
+      :menu-items="contactMenuItems"
+      class="right-0 mt-1 w-52 top-full"
+      @action="handleContactAction($event)"
+    />
+  </div>
+  <CreateNewContactDialog ref="createNewContactDialogRef" />
+</template>

app/javascript/dashboard/components-next/Contacts/ContactHeader/ContactSortMenu.vue

@@ -92,6 +92,7 @@ const handleOrderChange = value => {
     <Button
       icon="i-lucide-arrow-down-up"
       color="slate"
+      size="sm"
       variant="ghost"
       :class="isMenuOpen ? 'bg-n-alpha-2' : ''"
       @click="isMenuOpen = !isMenuOpen"