@escalated-dev/escalated 0.7.1 → 0.9.0

package/src/composables/useMentions.js

@@ -1,134 +1,134 @@
-import { ref, onUnmounted } from 'vue';
-
-/**
- * Composable that detects `@` typed in a text input/textarea,
- * fetches agent suggestions from the API (debounced), and provides
- * an insert function to replace the mention token.
- *
- * @param {Object} options
- * @param {string} [options.searchEndpoint] - API endpoint for agent search (default: route-based)
- * @param {number} [options.debounce=250] - Debounce delay in ms
- * @returns {Object}
- */
-export function useMentions(options = {}) {
-    const { debounce = 250 } = options;
-
-    const suggestions = ref([]);
-    const isActive = ref(false);
-    const query = ref('');
-    const mentionStart = ref(null); // cursor position where `@` was typed
-    const loading = ref(false);
-
-    let timer = null;
-
-    function clearTimer() {
-        if (timer !== null) {
-            window.clearTimeout(timer);
-            timer = null;
-        }
-    }
-
-    /**
-     * Call this on every input/keyup event with the textarea element
-     * and the current text value.
-     */
-    function onTextChange(textareaEl, text) {
-        if (!textareaEl) return;
-
-        const cursorPos = textareaEl.selectionStart;
-        const textBeforeCursor = text.slice(0, cursorPos);
-
-        // Find the last `@` that starts a mention (preceded by whitespace or start of string)
-        const mentionMatch = textBeforeCursor.match(/(?:^|[\s(])@([a-zA-Z0-9_ ]*)$/);
-
-        if (mentionMatch) {
-            const searchQuery = mentionMatch[1];
-            // The @ is at cursorPos minus the matched group minus 1 for the @
-            mentionStart.value = cursorPos - searchQuery.length - 1;
-            query.value = searchQuery;
-            isActive.value = true;
-            debouncedFetch(searchQuery);
-        } else {
-            close();
-        }
-    }
-
-    function debouncedFetch(searchQuery) {
-        clearTimer();
-
-        if (searchQuery.length < 1) {
-            fetchSuggestions('');
-            return;
-        }
-
-        timer = window.setTimeout(() => {
-            fetchSuggestions(searchQuery);
-        }, debounce);
-    }
-
-    async function fetchSuggestions(searchQuery) {
-        loading.value = true;
-        try {
-            const endpoint = options.searchEndpoint || '/support/admin/agents/search';
-            const url = `${endpoint}?q=${encodeURIComponent(searchQuery)}`;
-            const response = await fetch(url, {
-                headers: {
-                    Accept: 'application/json',
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
-                },
-            });
-            if (response.ok) {
-                suggestions.value = await response.json();
-            } else {
-                suggestions.value = [];
-            }
-        } catch {
-            suggestions.value = [];
-        } finally {
-            loading.value = false;
-        }
-    }
-
-    /**
-     * Insert the selected agent mention into the text.
-     * Returns the new text value with the mention inserted.
-     *
-     * @param {string} currentText - Current textarea value
-     * @param {Object} agent - Agent object with `name` property
-     * @returns {string} Updated text
-     */
-    function insertMention(currentText, agent) {
-        if (mentionStart.value === null) return currentText;
-
-        const before = currentText.slice(0, mentionStart.value);
-        const cursorPos = mentionStart.value + 1 + query.value.length;
-        const after = currentText.slice(cursorPos);
-
-        const mentionText = `@{${agent.name}} `;
-        const newText = before + mentionText + after;
-
-        close();
-        return newText;
-    }
-
-    function close() {
-        isActive.value = false;
-        suggestions.value = [];
-        query.value = '';
-        mentionStart.value = null;
-        clearTimer();
-    }
-
-    onUnmounted(clearTimer);
-
-    return {
-        suggestions,
-        isActive,
-        query,
-        loading,
-        onTextChange,
-        insertMention,
-        close,
-    };
-}
+import { ref, onUnmounted } from 'vue';
+
+/**
+ * Composable that detects `@` typed in a text input/textarea,
+ * fetches agent suggestions from the API (debounced), and provides
+ * an insert function to replace the mention token.
+ *
+ * @param {Object} options
+ * @param {string} [options.searchEndpoint] - API endpoint for agent search (default: route-based)
+ * @param {number} [options.debounce=250] - Debounce delay in ms
+ * @returns {Object}
+ */
+export function useMentions(options = {}) {
+    const { debounce = 250 } = options;
+
+    const suggestions = ref([]);
+    const isActive = ref(false);
+    const query = ref('');
+    const mentionStart = ref(null); // cursor position where `@` was typed
+    const loading = ref(false);
+
+    let timer = null;
+
+    function clearTimer() {
+        if (timer !== null) {
+            window.clearTimeout(timer);
+            timer = null;
+        }
+    }
+
+    /**
+     * Call this on every input/keyup event with the textarea element
+     * and the current text value.
+     */
+    function onTextChange(textareaEl, text) {
+        if (!textareaEl) return;
+
+        const cursorPos = textareaEl.selectionStart;
+        const textBeforeCursor = text.slice(0, cursorPos);
+
+        // Find the last `@` that starts a mention (preceded by whitespace or start of string)
+        const mentionMatch = textBeforeCursor.match(/(?:^|[\s(])@([a-zA-Z0-9_ ]*)$/);
+
+        if (mentionMatch) {
+            const searchQuery = mentionMatch[1];
+            // The @ is at cursorPos minus the matched group minus 1 for the @
+            mentionStart.value = cursorPos - searchQuery.length - 1;
+            query.value = searchQuery;
+            isActive.value = true;
+            debouncedFetch(searchQuery);
+        } else {
+            close();
+        }
+    }
+
+    function debouncedFetch(searchQuery) {
+        clearTimer();
+
+        if (searchQuery.length < 1) {
+            fetchSuggestions('');
+            return;
+        }
+
+        timer = window.setTimeout(() => {
+            fetchSuggestions(searchQuery);
+        }, debounce);
+    }
+
+    async function fetchSuggestions(searchQuery) {
+        loading.value = true;
+        try {
+            const endpoint = options.searchEndpoint || '/support/admin/agents/search';
+            const url = `${endpoint}?q=${encodeURIComponent(searchQuery)}`;
+            const response = await fetch(url, {
+                headers: {
+                    Accept: 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+                },
+            });
+            if (response.ok) {
+                suggestions.value = await response.json();
+            } else {
+                suggestions.value = [];
+            }
+        } catch {
+            suggestions.value = [];
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    /**
+     * Insert the selected agent mention into the text.
+     * Returns the new text value with the mention inserted.
+     *
+     * @param {string} currentText - Current textarea value
+     * @param {Object} agent - Agent object with `name` property
+     * @returns {string} Updated text
+     */
+    function insertMention(currentText, agent) {
+        if (mentionStart.value === null) return currentText;
+
+        const before = currentText.slice(0, mentionStart.value);
+        const cursorPos = mentionStart.value + 1 + query.value.length;
+        const after = currentText.slice(cursorPos);
+
+        const mentionText = `@{${agent.name}} `;
+        const newText = before + mentionText + after;
+
+        close();
+        return newText;
+    }
+
+    function close() {
+        isActive.value = false;
+        suggestions.value = [];
+        query.value = '';
+        mentionStart.value = null;
+        clearTimer();
+    }
+
+    onUnmounted(clearTimer);
+
+    return {
+        suggestions,
+        isActive,
+        query,
+        loading,
+        onTextChange,
+        insertMention,
+        close,
+    };
+}

package/src/composables/usePermissions.js

@@ -0,0 +1,31 @@
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+
+/**
+ * Read the current user's permission slugs from Inertia shared props.
+ * Canonical source: `page.props.escalated.permissions` (string[]).
+ */
+export function usePermissions() {
+    const page = usePage();
+
+    const permissions = computed(() => {
+        const raw = page.props.escalated?.permissions;
+        if (raw === undefined || raw === null) {
+            return null;
+        }
+        return Array.isArray(raw) ? raw : [];
+    });
+
+    function hasPermission(slug) {
+        const perms = permissions.value;
+        if (perms === null) {
+            return page.props.escalated?.is_admin === true;
+        }
+        if (perms.includes('*')) {
+            return true;
+        }
+        return perms.includes(slug);
+    }
+
+    return { permissions, hasPermission };
+}

package/src/composables/useRealtime.js

@@ -1,182 +1,182 @@
-import { ref, onUnmounted, readonly } from 'vue';
-
-/**
- * Composable for real-time WebSocket event listening via Laravel Echo.
- *
- * If `window.Echo` is available (provided by the host app), this composable
- * subscribes to private channels and listens for broadcast events. When Echo
- * is not present, it silently falls back - the caller can check `echoAvailable`
- * and implement polling as needed.
- *
- * Usage:
- *   const { echoAvailable, subscribeToTicket, subscribeToTickets, subscribeToAgent } = useRealtime();
- *
- * All subscriptions are automatically cleaned up on component unmount.
- */
-export function useRealtime() {
-    const echoAvailable = ref(typeof window !== 'undefined' && !!window.Echo);
-    const subscriptions = [];
-
-    /**
-     * Subscribe to a private channel and listen for an event.
-     * Returns an unsubscribe function.
-     */
-    function listen(channelName, eventName, callback) {
-        if (!echoAvailable.value) return () => {};
-
-        const channel = window.Echo.private(channelName);
-        channel.listen(eventName, callback);
-
-        const unsub = () => {
-            channel.stopListening(eventName, callback);
-            window.Echo.leave(channelName);
-        };
-        subscriptions.push(unsub);
-        return unsub;
-    }
-
-    /**
-     * Subscribe to a specific ticket's channel for real-time updates.
-     *
-     * @param {number|string} ticketId - The ticket ID
-     * @param {Object} handlers - Event handler callbacks
-     * @param {Function} [handlers.onReplyCreated] - Called when a new reply is added
-     * @param {Function} [handlers.onTicketUpdated] - Called when ticket fields are updated
-     * @param {Function} [handlers.onStatusChanged] - Called when ticket status changes
-     * @param {Function} [handlers.onTicketAssigned] - Called when ticket is assigned
-     * @param {Function} [handlers.onTicketEscalated] - Called when ticket is escalated
-     * @returns {Function} Unsubscribe function
-     */
-    function subscribeToTicket(ticketId, handlers = {}) {
-        if (!echoAvailable.value) return () => {};
-
-        const channelName = `escalated.tickets.${ticketId}`;
-        const channel = window.Echo.private(channelName);
-        const listeners = [];
-
-        if (handlers.onReplyCreated) {
-            channel.listen('.reply.created', handlers.onReplyCreated);
-            listeners.push(['.reply.created', handlers.onReplyCreated]);
-        }
-        if (handlers.onTicketUpdated) {
-            channel.listen('.ticket.updated', handlers.onTicketUpdated);
-            listeners.push(['.ticket.updated', handlers.onTicketUpdated]);
-        }
-        if (handlers.onStatusChanged) {
-            channel.listen('.ticket.status_changed', handlers.onStatusChanged);
-            listeners.push(['.ticket.status_changed', handlers.onStatusChanged]);
-        }
-        if (handlers.onTicketAssigned) {
-            channel.listen('.ticket.assigned', handlers.onTicketAssigned);
-            listeners.push(['.ticket.assigned', handlers.onTicketAssigned]);
-        }
-        if (handlers.onTicketEscalated) {
-            channel.listen('.ticket.escalated', handlers.onTicketEscalated);
-            listeners.push(['.ticket.escalated', handlers.onTicketEscalated]);
-        }
-
-        const unsub = () => {
-            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
-            window.Echo.leave(channelName);
-        };
-        subscriptions.push(unsub);
-        return unsub;
-    }
-
-    /**
-     * Subscribe to the global tickets channel for new ticket notifications.
-     *
-     * @param {Object} handlers - Event handler callbacks
-     * @param {Function} [handlers.onTicketCreated] - Called when a new ticket is created
-     * @returns {Function} Unsubscribe function
-     */
-    function subscribeToTickets(handlers = {}) {
-        if (!echoAvailable.value) return () => {};
-
-        const channelName = 'escalated.tickets';
-        const channel = window.Echo.private(channelName);
-        const listeners = [];
-
-        if (handlers.onTicketCreated) {
-            channel.listen('.ticket.created', handlers.onTicketCreated);
-            listeners.push(['.ticket.created', handlers.onTicketCreated]);
-        }
-
-        const unsub = () => {
-            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
-            window.Echo.leave(channelName);
-        };
-        subscriptions.push(unsub);
-        return unsub;
-    }
-
-    /**
-     * Subscribe to an agent's personal channel for assignment notifications.
-     *
-     * @param {number|string} agentId - The agent's user ID
-     * @param {Object} handlers - Event handler callbacks
-     * @param {Function} [handlers.onTicketAssigned] - Called when a ticket is assigned to this agent
-     * @returns {Function} Unsubscribe function
-     */
-    function subscribeToAgent(agentId, handlers = {}) {
-        if (!echoAvailable.value) return () => {};
-
-        const channelName = `escalated.agents.${agentId}`;
-        const channel = window.Echo.private(channelName);
-        const listeners = [];
-
-        if (handlers.onTicketAssigned) {
-            channel.listen('.ticket.assigned', handlers.onTicketAssigned);
-            listeners.push(['.ticket.assigned', handlers.onTicketAssigned]);
-        }
-
-        const unsub = () => {
-            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
-            window.Echo.leave(channelName);
-        };
-        subscriptions.push(unsub);
-        return unsub;
-    }
-
-    /**
-     * Get a presence channel for a ticket (if Echo supports it).
-     * Returns the channel instance or null.
-     */
-    function joinTicketPresence(ticketId, callbacks = {}) {
-        if (!echoAvailable.value) return null;
-
-        const channelName = `escalated.tickets.${ticketId}`;
-        const channel = window.Echo.join(channelName);
-
-        if (callbacks.here) channel.here(callbacks.here);
-        if (callbacks.joining) channel.joining(callbacks.joining);
-        if (callbacks.leaving) channel.leaving(callbacks.leaving);
-
-        const unsub = () => {
-            window.Echo.leave(`presence-${channelName}`);
-        };
-        subscriptions.push(unsub);
-        return { channel, unsubscribe: unsub };
-    }
-
-    // Cleanup all subscriptions on component unmount
-    onUnmounted(() => {
-        subscriptions.forEach((unsub) => {
-            try {
-                unsub();
-            } catch {
-                /* ignore */
-            }
-        });
-        subscriptions.length = 0;
-    });
-
-    return {
-        echoAvailable: readonly(echoAvailable),
-        listen,
-        subscribeToTicket,
-        subscribeToTickets,
-        subscribeToAgent,
-        joinTicketPresence,
-    };
-}
+import { ref, onUnmounted, readonly } from 'vue';
+
+/**
+ * Composable for real-time WebSocket event listening via Laravel Echo.
+ *
+ * If `window.Echo` is available (provided by the host app), this composable
+ * subscribes to private channels and listens for broadcast events. When Echo
+ * is not present, it silently falls back - the caller can check `echoAvailable`
+ * and implement polling as needed.
+ *
+ * Usage:
+ *   const { echoAvailable, subscribeToTicket, subscribeToTickets, subscribeToAgent } = useRealtime();
+ *
+ * All subscriptions are automatically cleaned up on component unmount.
+ */
+export function useRealtime() {
+    const echoAvailable = ref(typeof window !== 'undefined' && !!window.Echo);
+    const subscriptions = [];
+
+    /**
+     * Subscribe to a private channel and listen for an event.
+     * Returns an unsubscribe function.
+     */
+    function listen(channelName, eventName, callback) {
+        if (!echoAvailable.value) return () => {};
+
+        const channel = window.Echo.private(channelName);
+        channel.listen(eventName, callback);
+
+        const unsub = () => {
+            channel.stopListening(eventName, callback);
+            window.Echo.leave(channelName);
+        };
+        subscriptions.push(unsub);
+        return unsub;
+    }
+
+    /**
+     * Subscribe to a specific ticket's channel for real-time updates.
+     *
+     * @param {number|string} ticketId - The ticket ID
+     * @param {Object} handlers - Event handler callbacks
+     * @param {Function} [handlers.onReplyCreated] - Called when a new reply is added
+     * @param {Function} [handlers.onTicketUpdated] - Called when ticket fields are updated
+     * @param {Function} [handlers.onStatusChanged] - Called when ticket status changes
+     * @param {Function} [handlers.onTicketAssigned] - Called when ticket is assigned
+     * @param {Function} [handlers.onTicketEscalated] - Called when ticket is escalated
+     * @returns {Function} Unsubscribe function
+     */
+    function subscribeToTicket(ticketId, handlers = {}) {
+        if (!echoAvailable.value) return () => {};
+
+        const channelName = `escalated.tickets.${ticketId}`;
+        const channel = window.Echo.private(channelName);
+        const listeners = [];
+
+        if (handlers.onReplyCreated) {
+            channel.listen('.reply.created', handlers.onReplyCreated);
+            listeners.push(['.reply.created', handlers.onReplyCreated]);
+        }
+        if (handlers.onTicketUpdated) {
+            channel.listen('.ticket.updated', handlers.onTicketUpdated);
+            listeners.push(['.ticket.updated', handlers.onTicketUpdated]);
+        }
+        if (handlers.onStatusChanged) {
+            channel.listen('.ticket.status_changed', handlers.onStatusChanged);
+            listeners.push(['.ticket.status_changed', handlers.onStatusChanged]);
+        }
+        if (handlers.onTicketAssigned) {
+            channel.listen('.ticket.assigned', handlers.onTicketAssigned);
+            listeners.push(['.ticket.assigned', handlers.onTicketAssigned]);
+        }
+        if (handlers.onTicketEscalated) {
+            channel.listen('.ticket.escalated', handlers.onTicketEscalated);
+            listeners.push(['.ticket.escalated', handlers.onTicketEscalated]);
+        }
+
+        const unsub = () => {
+            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
+            window.Echo.leave(channelName);
+        };
+        subscriptions.push(unsub);
+        return unsub;
+    }
+
+    /**
+     * Subscribe to the global tickets channel for new ticket notifications.
+     *
+     * @param {Object} handlers - Event handler callbacks
+     * @param {Function} [handlers.onTicketCreated] - Called when a new ticket is created
+     * @returns {Function} Unsubscribe function
+     */
+    function subscribeToTickets(handlers = {}) {
+        if (!echoAvailable.value) return () => {};
+
+        const channelName = 'escalated.tickets';
+        const channel = window.Echo.private(channelName);
+        const listeners = [];
+
+        if (handlers.onTicketCreated) {
+            channel.listen('.ticket.created', handlers.onTicketCreated);
+            listeners.push(['.ticket.created', handlers.onTicketCreated]);
+        }
+
+        const unsub = () => {
+            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
+            window.Echo.leave(channelName);
+        };
+        subscriptions.push(unsub);
+        return unsub;
+    }
+
+    /**
+     * Subscribe to an agent's personal channel for assignment notifications.
+     *
+     * @param {number|string} agentId - The agent's user ID
+     * @param {Object} handlers - Event handler callbacks
+     * @param {Function} [handlers.onTicketAssigned] - Called when a ticket is assigned to this agent
+     * @returns {Function} Unsubscribe function
+     */
+    function subscribeToAgent(agentId, handlers = {}) {
+        if (!echoAvailable.value) return () => {};
+
+        const channelName = `escalated.agents.${agentId}`;
+        const channel = window.Echo.private(channelName);
+        const listeners = [];
+
+        if (handlers.onTicketAssigned) {
+            channel.listen('.ticket.assigned', handlers.onTicketAssigned);
+            listeners.push(['.ticket.assigned', handlers.onTicketAssigned]);
+        }
+
+        const unsub = () => {
+            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
+            window.Echo.leave(channelName);
+        };
+        subscriptions.push(unsub);
+        return unsub;
+    }
+
+    /**
+     * Get a presence channel for a ticket (if Echo supports it).
+     * Returns the channel instance or null.
+     */
+    function joinTicketPresence(ticketId, callbacks = {}) {
+        if (!echoAvailable.value) return null;
+
+        const channelName = `escalated.tickets.${ticketId}`;
+        const channel = window.Echo.join(channelName);
+
+        if (callbacks.here) channel.here(callbacks.here);
+        if (callbacks.joining) channel.joining(callbacks.joining);
+        if (callbacks.leaving) channel.leaving(callbacks.leaving);
+
+        const unsub = () => {
+            window.Echo.leave(`presence-${channelName}`);
+        };
+        subscriptions.push(unsub);
+        return { channel, unsubscribe: unsub };
+    }
+
+    // Cleanup all subscriptions on component unmount
+    onUnmounted(() => {
+        subscriptions.forEach((unsub) => {
+            try {
+                unsub();
+            } catch {
+                /* ignore */
+            }
+        });
+        subscriptions.length = 0;
+    });
+
+    return {
+        echoAvailable: readonly(echoAvailable),
+        listen,
+        subscribeToTicket,
+        subscribeToTickets,
+        subscribeToAgent,
+        joinTicketPresence,
+    };
+}