@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/TicketMergeDialog.vue

@@ -1,157 +1,157 @@
-<script setup>
-import { ref, watch } from 'vue';
-import { router } from '@inertiajs/vue3';
-
-const props = defineProps({
-    ticketReference: { type: String, required: true },
-});
-
-const emit = defineEmits(['close']);
-
-const searchTerm = ref('');
-const results = ref([]);
-const loading = ref(false);
-const selectedTicket = ref(null);
-const merging = ref(false);
-let debounceTimer = null;
-
-watch(searchTerm, (val) => {
-    window.clearTimeout(debounceTimer);
-    selectedTicket.value = null;
-    if (!val || val.length < 2) {
-        results.value = [];
-        return;
-    }
-    debounceTimer = window.setTimeout(() => searchTickets(val), 300);
-});
-
-async function searchTickets(term) {
-    loading.value = true;
-    try {
-        const response = await fetch(route('escalated.admin.tickets.merge-search', { q: term }), {
-            headers: {
-                Accept: 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
-            },
-        });
-        if (response.ok) {
-            const data = await response.json();
-            results.value = (data.tickets || []).filter((t) => t.reference !== props.ticketReference);
-        }
-    } catch {
-        // silently ignore
-    } finally {
-        loading.value = false;
-    }
-}
-
-function selectTicket(ticket) {
-    selectedTicket.value = ticket;
-}
-
-function confirmMerge() {
-    if (!selectedTicket.value || merging.value) return;
-    merging.value = true;
-
-    router.post(
-        route('escalated.admin.tickets.merge', props.ticketReference),
-        {
-            target_reference: selectedTicket.value.reference,
-        },
-        {
-            preserveScroll: true,
-            onSuccess: () => {
-                emit('close');
-            },
-            onFinish: () => {
-                merging.value = false;
-            },
-        },
-    );
-}
-</script>
-
-<template>
-    <Teleport to="body">
-        <div
-            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
-            @click.self="emit('close')"
-        >
-            <div class="w-full max-w-lg rounded-xl border border-white/[0.06] bg-neutral-900 p-6 shadow-2xl">
-                <div class="mb-4 flex items-center justify-between">
-                    <h3 class="text-lg font-semibold text-neutral-200">Merge Ticket</h3>
-                    <button class="text-neutral-500 hover:text-neutral-300" @click="emit('close')">
-                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
-
-                <p class="mb-4 text-sm text-neutral-400">
-                    Search for a ticket to merge
-                    <span class="font-mono text-neutral-300">{{ ticketReference }}</span> into. All replies will be
-                    moved to the target ticket and this ticket will be closed.
-                </p>
-
-                <input
-                    v-model="searchTerm"
-                    type="text"
-                    placeholder="Search by reference or subject..."
-                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
-                />
-
-                <div v-if="loading" class="mt-3 text-center text-sm text-neutral-500">Searching...</div>
-
-                <div v-else-if="results.length" class="mt-3 max-h-48 space-y-1 overflow-y-auto">
-                    <button
-                        v-for="ticket in results"
-                        :key="ticket.id"
-                        :class="[
-                            'w-full rounded-lg px-3 py-2 text-left text-sm transition-colors',
-                            selectedTicket?.id === ticket.id
-                                ? 'bg-cyan-500/15 ring-1 ring-cyan-500/20 text-neutral-200'
-                                : 'text-neutral-300 hover:bg-white/[0.04]',
-                        ]"
-                        @click="selectTicket(ticket)"
-                    >
-                        <span class="font-mono text-xs text-neutral-400">{{ ticket.reference }}</span>
-                        <span class="ml-2">{{ ticket.subject }}</span>
-                    </button>
-                </div>
-
-                <div v-else-if="searchTerm.length >= 2 && !loading" class="mt-3 text-center text-sm text-neutral-500">
-                    No matching tickets found.
-                </div>
-
-                <!-- Selected ticket preview -->
-                <div v-if="selectedTicket" class="mt-4 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
-                    <p class="text-xs font-semibold uppercase tracking-wider text-neutral-500">Merge into</p>
-                    <p class="mt-1 text-sm text-neutral-200">
-                        <span class="font-mono text-neutral-400">{{ selectedTicket.reference }}</span>
-                        &mdash; {{ selectedTicket.subject }}
-                    </p>
-                </div>
-
-                <div class="mt-5 flex justify-end gap-3">
-                    <button
-                        class="rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]"
-                        @click="emit('close')"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        :disabled="!selectedTicket || merging"
-                        :class="[
-                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400',
-                            (!selectedTicket || merging) && 'cursor-not-allowed opacity-40',
-                        ]"
-                        @click="confirmMerge"
-                    >
-                        {{ merging ? 'Merging...' : 'Confirm Merge' }}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </Teleport>
-</template>
+<script setup>
+import { ref, watch } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+});
+
+const emit = defineEmits(['close']);
+
+const searchTerm = ref('');
+const results = ref([]);
+const loading = ref(false);
+const selectedTicket = ref(null);
+const merging = ref(false);
+let debounceTimer = null;
+
+watch(searchTerm, (val) => {
+    window.clearTimeout(debounceTimer);
+    selectedTicket.value = null;
+    if (!val || val.length < 2) {
+        results.value = [];
+        return;
+    }
+    debounceTimer = window.setTimeout(() => searchTickets(val), 300);
+});
+
+async function searchTickets(term) {
+    loading.value = true;
+    try {
+        const response = await fetch(route('escalated.admin.tickets.merge-search', { q: term }), {
+            headers: {
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+        });
+        if (response.ok) {
+            const data = await response.json();
+            results.value = (data.tickets || []).filter((t) => t.reference !== props.ticketReference);
+        }
+    } catch {
+        // silently ignore
+    } finally {
+        loading.value = false;
+    }
+}
+
+function selectTicket(ticket) {
+    selectedTicket.value = ticket;
+}
+
+function confirmMerge() {
+    if (!selectedTicket.value || merging.value) return;
+    merging.value = true;
+
+    router.post(
+        route('escalated.admin.tickets.merge', props.ticketReference),
+        {
+            target_reference: selectedTicket.value.reference,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                emit('close');
+            },
+            onFinish: () => {
+                merging.value = false;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <Teleport to="body">
+        <div
+            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+            @click.self="emit('close')"
+        >
+            <div class="w-full max-w-lg rounded-xl border border-white/[0.06] bg-neutral-900 p-6 shadow-2xl">
+                <div class="mb-4 flex items-center justify-between">
+                    <h3 class="text-lg font-semibold text-neutral-200">Merge Ticket</h3>
+                    <button class="text-neutral-500 hover:text-neutral-300" @click="emit('close')">
+                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                <p class="mb-4 text-sm text-neutral-400">
+                    Search for a ticket to merge
+                    <span class="font-mono text-neutral-300">{{ ticketReference }}</span> into. All replies will be
+                    moved to the target ticket and this ticket will be closed.
+                </p>
+
+                <input
+                    v-model="searchTerm"
+                    type="text"
+                    placeholder="Search by reference or subject..."
+                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                />
+
+                <div v-if="loading" class="mt-3 text-center text-sm text-neutral-500">Searching...</div>
+
+                <div v-else-if="results.length" class="mt-3 max-h-48 space-y-1 overflow-y-auto">
+                    <button
+                        v-for="ticket in results"
+                        :key="ticket.id"
+                        :class="[
+                            'w-full rounded-lg px-3 py-2 text-left text-sm transition-colors',
+                            selectedTicket?.id === ticket.id
+                                ? 'bg-cyan-500/15 ring-1 ring-cyan-500/20 text-neutral-200'
+                                : 'text-neutral-300 hover:bg-white/[0.04]',
+                        ]"
+                        @click="selectTicket(ticket)"
+                    >
+                        <span class="font-mono text-xs text-neutral-400">{{ ticket.reference }}</span>
+                        <span class="ml-2">{{ ticket.subject }}</span>
+                    </button>
+                </div>
+
+                <div v-else-if="searchTerm.length >= 2 && !loading" class="mt-3 text-center text-sm text-neutral-500">
+                    No matching tickets found.
+                </div>
+
+                <!-- Selected ticket preview -->
+                <div v-if="selectedTicket" class="mt-4 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+                    <p class="text-xs font-semibold uppercase tracking-wider text-neutral-500">Merge into</p>
+                    <p class="mt-1 text-sm text-neutral-200">
+                        <span class="font-mono text-neutral-400">{{ selectedTicket.reference }}</span>
+                        &mdash; {{ selectedTicket.subject }}
+                    </p>
+                </div>
+
+                <div class="mt-5 flex justify-end gap-3">
+                    <button
+                        class="rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]"
+                        @click="emit('close')"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        :disabled="!selectedTicket || merging"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400',
+                            (!selectedTicket || merging) && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="confirmMerge"
+                    >
+                        {{ merging ? 'Merging...' : 'Confirm Merge' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>

package/src/components/TicketSplitDialog.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+    replyId: { type: [Number, String], required: true },
+    replyAuthor: { type: String, default: '' },
+    replyExcerpt: { type: String, default: '' },
+});
+
+const emit = defineEmits(['close']);
+
+const subject = ref('');
+const splitting = ref(false);
+
+function confirmSplit() {
+    if (splitting.value) return;
+    splitting.value = true;
+
+    const payload = { reply_id: props.replyId };
+    if (subject.value.trim()) {
+        payload.subject = subject.value.trim();
+    }
+
+    router.post(route('escalated.admin.tickets.split', props.ticketReference), payload, {
+        onFinish: () => {
+            splitting.value = false;
+        },
+        onError: () => {
+            splitting.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <Teleport to="body">
+        <div
+            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+            @click.self="emit('close')"
+        >
+            <div class="w-full max-w-lg rounded-xl border border-white/[0.06] bg-neutral-900 p-6 shadow-2xl">
+                <div class="mb-4 flex items-center justify-between">
+                    <h3 class="text-lg font-semibold text-neutral-200">Split to New Ticket</h3>
+                    <button class="text-neutral-500 hover:text-neutral-300" @click="emit('close')">
+                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                <p class="mb-4 text-sm text-neutral-400">
+                    This will create a new ticket from the selected reply
+                    <span v-if="replyAuthor" class="text-neutral-300">by {{ replyAuthor }}</span
+                    >. The new ticket will be linked to
+                    <span class="font-mono text-neutral-300">{{ ticketReference }}</span
+                    >.
+                </p>
+
+                <!-- Reply excerpt preview -->
+                <div v-if="replyExcerpt" class="mb-4 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+                    <p class="text-xs font-semibold uppercase tracking-wider text-neutral-500">Reply content</p>
+                    <p class="mt-1 line-clamp-3 text-sm text-neutral-300">{{ replyExcerpt }}</p>
+                </div>
+
+                <label class="mb-1 block text-sm font-medium text-neutral-400">
+                    Subject <span class="text-neutral-600">(optional override)</span>
+                </label>
+                <input
+                    v-model="subject"
+                    type="text"
+                    placeholder="Leave empty to auto-generate from source ticket"
+                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                />
+
+                <div class="mt-5 flex justify-end gap-3">
+                    <button
+                        class="rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]"
+                        @click="emit('close')"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        :disabled="splitting"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400',
+                            splitting && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="confirmSplit"
+                    >
+                        {{ splitting ? 'Splitting...' : 'Split to New Ticket' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>

package/src/components/TotpInput.stories.js

@@ -1,9 +1,9 @@
-import TotpInput from './TotpInput.vue';
-
-export default {
-    title: 'Components/TotpInput',
-    component: TotpInput,
-};
-
-export const Empty = { args: { modelValue: '' } };
-export const PartiallyFilled = { args: { modelValue: '123' } };
+import TotpInput from './TotpInput.vue';
+
+export default {
+    title: 'Components/TotpInput',
+    component: TotpInput,
+};
+
+export const Empty = { args: { modelValue: '' } };
+export const PartiallyFilled = { args: { modelValue: '123' } };

package/src/components/TotpInput.vue

@@ -1,81 +1,81 @@
-<script setup>
-import { ref, watch, nextTick } from 'vue';
-
-const props = defineProps({
-    modelValue: { type: String, default: '' },
-});
-
-const emit = defineEmits(['update:modelValue', 'complete']);
-
-const digits = ref(Array(6).fill(''));
-const inputs = ref([]);
-
-function setRef(el, index) {
-    if (el) inputs.value[index] = el;
-}
-
-function handleInput(index, event) {
-    const val = event.target.value.replace(/\D/g, '');
-    digits.value[index] = val.slice(-1);
-
-    const code = digits.value.join('');
-    emit('update:modelValue', code);
-
-    if (val && index < 5) {
-        nextTick(() => inputs.value[index + 1]?.focus());
-    }
-
-    if (code.length === 6 && !code.includes('')) {
-        emit('complete', code);
-    }
-}
-
-function handleKeydown(index, event) {
-    if (event.key === 'Backspace' && !digits.value[index] && index > 0) {
-        nextTick(() => inputs.value[index - 1]?.focus());
-    }
-}
-
-function handlePaste(event) {
-    event.preventDefault();
-    const pasted = (event.clipboardData?.getData('text') || '').replace(/\D/g, '').slice(0, 6);
-    for (let i = 0; i < 6; i++) {
-        digits.value[i] = pasted[i] || '';
-    }
-    const code = digits.value.join('');
-    emit('update:modelValue', code);
-
-    if (code.length === 6) {
-        emit('complete', code);
-    } else {
-        nextTick(() => inputs.value[Math.min(pasted.length, 5)]?.focus());
-    }
-}
-
-watch(
-    () => props.modelValue,
-    (val) => {
-        if (!val) {
-            digits.value = Array(6).fill('');
-        }
-    },
-);
-</script>
-
-<template>
-    <div class="flex gap-2">
-        <input
-            v-for="(_, index) in 6"
-            :key="index"
-            :ref="(el) => setRef(el, index)"
-            :value="digits[index]"
-            type="text"
-            inputmode="numeric"
-            maxlength="1"
-            class="h-12 w-10 rounded-lg border border-white/10 bg-neutral-950 text-center text-lg font-semibold text-neutral-200 focus:border-cyan-500/50 focus:outline-none focus:ring-1 focus:ring-cyan-500/30"
-            @input="handleInput(index, $event)"
-            @keydown="handleKeydown(index, $event)"
-            @paste="handlePaste"
-        />
-    </div>
-</template>
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'complete']);
+
+const digits = ref(Array(6).fill(''));
+const inputs = ref([]);
+
+function setRef(el, index) {
+    if (el) inputs.value[index] = el;
+}
+
+function handleInput(index, event) {
+    const val = event.target.value.replace(/\D/g, '');
+    digits.value[index] = val.slice(-1);
+
+    const code = digits.value.join('');
+    emit('update:modelValue', code);
+
+    if (val && index < 5) {
+        nextTick(() => inputs.value[index + 1]?.focus());
+    }
+
+    if (code.length === 6 && !code.includes('')) {
+        emit('complete', code);
+    }
+}
+
+function handleKeydown(index, event) {
+    if (event.key === 'Backspace' && !digits.value[index] && index > 0) {
+        nextTick(() => inputs.value[index - 1]?.focus());
+    }
+}
+
+function handlePaste(event) {
+    event.preventDefault();
+    const pasted = (event.clipboardData?.getData('text') || '').replace(/\D/g, '').slice(0, 6);
+    for (let i = 0; i < 6; i++) {
+        digits.value[i] = pasted[i] || '';
+    }
+    const code = digits.value.join('');
+    emit('update:modelValue', code);
+
+    if (code.length === 6) {
+        emit('complete', code);
+    } else {
+        nextTick(() => inputs.value[Math.min(pasted.length, 5)]?.focus());
+    }
+}
+
+watch(
+    () => props.modelValue,
+    (val) => {
+        if (!val) {
+            digits.value = Array(6).fill('');
+        }
+    },
+);
+</script>
+
+<template>
+    <div class="flex gap-2">
+        <input
+            v-for="(_, index) in 6"
+            :key="index"
+            :ref="(el) => setRef(el, index)"
+            :value="digits[index]"
+            type="text"
+            inputmode="numeric"
+            maxlength="1"
+            class="h-12 w-10 rounded-lg border border-white/10 bg-neutral-950 text-center text-lg font-semibold text-neutral-200 focus:border-cyan-500/50 focus:outline-none focus:ring-1 focus:ring-cyan-500/30"
+            @input="handleInput(index, $event)"
+            @keydown="handleKeydown(index, $event)"
+            @paste="handlePaste"
+        />
+    </div>
+</template>