724 lines
18 KiB
Vue
724 lines
18 KiB
Vue
<template>
|
|
<private-view title="Feedback Commander">
|
|
<template #headline>
|
|
<v-breadcrumb :items="[{ name: 'Feedback', to: '/feedback-commander' }]" />
|
|
</template>
|
|
|
|
<template #title-outer:after>
|
|
<v-chip v-if="loading" label color="blue" small>Loading...</v-chip>
|
|
<v-chip v-else-if="fetchError" label color="red" small>Fetch Error</v-chip>
|
|
<v-chip v-else label color="green" small>{{ items.length }} Items</v-chip>
|
|
</template>
|
|
|
|
<template #navigation>
|
|
<div class="sidebar-header">
|
|
<v-text-overflow text="Websites" class="header-text" />
|
|
</div>
|
|
<v-list nav>
|
|
<v-list-item
|
|
:active="currentProject === 'all'"
|
|
@click="currentProject = 'all'"
|
|
clickable
|
|
>
|
|
<v-list-item-icon><v-icon name="language" /></v-list-item-icon>
|
|
<v-list-item-content><v-text-overflow text="All Projects" /></v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item
|
|
v-for="project in projects"
|
|
:key="project"
|
|
:active="currentProject === project"
|
|
@click="currentProject = project"
|
|
clickable
|
|
>
|
|
<v-list-item-icon><v-icon name="public" color="var(--primary)" /></v-list-item-icon>
|
|
<v-list-item-content><v-text-overflow :text="project || 'Unknown'" /></v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</template>
|
|
|
|
<div class="feedback-container">
|
|
<div v-if="!items.length && !loading && !fetchError" class="empty-state">
|
|
<v-info icon="inbox" title="Clean Inbox" center>
|
|
All feedback has been processed. Great job!
|
|
</v-info>
|
|
</div>
|
|
|
|
<div v-if="fetchError" class="empty-state">
|
|
<v-info icon="error" title="Fetch Failed" :description="fetchError" center />
|
|
<v-button @click="fetchData" secondary small>Retry</v-button>
|
|
</div>
|
|
|
|
<div class="operational-layout" v-else-if="items.length">
|
|
<!-- Detailed Triage Lane -->
|
|
<aside class="triage-lane">
|
|
<div class="lane-header">
|
|
<v-select
|
|
v-model="currentStatusFilter"
|
|
:items="statusOptions"
|
|
small
|
|
placeholder="Status Filter"
|
|
/>
|
|
</div>
|
|
<div class="lane-content scrollbar">
|
|
<TransitionGroup name="list">
|
|
<div
|
|
v-for="item in filteredItems"
|
|
:key="item.id"
|
|
class="feedback-card"
|
|
:class="{ active: selectedItem?.id === item.id }"
|
|
@click="selectItem(item)"
|
|
>
|
|
<div class="card-status-bar" :style="{ background: getStatusColor(item.status || 'open') }"></div>
|
|
<div class="card-body">
|
|
<header class="card-header">
|
|
<span class="card-user">{{ item.user_name }}</span>
|
|
<span class="card-date">{{ formatDate(item.date_created || item.id) }}</span>
|
|
</header>
|
|
<div class="card-text">{{ item.text }}</div>
|
|
<footer class="card-footer">
|
|
<div class="meta-tags">
|
|
<v-chip x-small outline>{{ item.project }}</v-chip>
|
|
<v-icon :name="item.type === 'bug' ? 'bug_report' : 'lightbulb'" :color="item.type === 'bug' ? '#E91E63' : '#FFC107'" small />
|
|
</div>
|
|
<v-icon v-if="selectedItem?.id === item.id" name="chevron_right" small />
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</TransitionGroup>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Elaborated Master-Detail Desk -->
|
|
<main class="processing-desk scrollbar">
|
|
<Transition name="fade" mode="out-in">
|
|
<div v-if="selectedItem" :key="selectedItem.id" class="desk-content">
|
|
<header class="desk-header">
|
|
<div class="headline-group">
|
|
<div class="status-indicator">
|
|
<div class="status-dot" :style="{ background: getStatusColor(selectedItem.status || 'open') }"></div>
|
|
<span class="status-text">{{ capitalize(selectedItem.status || 'open') }}</span>
|
|
</div>
|
|
<h2>{{ selectedItem.user_name }}'s Submission</h2>
|
|
</div>
|
|
<div class="header-actions">
|
|
<v-button primary @click="openDeepLink(selectedItem)">
|
|
<v-icon name="open_in_new" left /> Open & Highlight
|
|
</v-button>
|
|
<v-select
|
|
v-model="selectedItem.status"
|
|
:items="statuses"
|
|
inline
|
|
@update:model-value="updateStatus"
|
|
/>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="desk-grid">
|
|
<!-- Message Container -->
|
|
<div class="main-column">
|
|
<v-card class="content-card">
|
|
<v-card-title>
|
|
<v-icon name="format_quote" left />
|
|
Feedback Content
|
|
</v-card-title>
|
|
<v-card-text class="feedback-body">
|
|
<div v-if="selectedItem.screenshot" class="visual-proof">
|
|
<label class="proof-label"><v-icon name="photo" x-small /> Element Snapshot</label>
|
|
<img :src="getAssetUrl(selectedItem.screenshot)" class="screenshot-img" />
|
|
</div>
|
|
<div class="main-text">{{ selectedItem.text }}</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<section class="reply-section">
|
|
<div class="section-divider">
|
|
<v-divider />
|
|
<span class="divider-label">Internal Communication</span>
|
|
<v-divider />
|
|
</div>
|
|
|
|
<div class="thread">
|
|
<TransitionGroup name="thread-list">
|
|
<div v-for="reply in comments" :key="reply.id" class="reply-bubble">
|
|
<header class="reply-header">
|
|
<span class="reply-user">{{ reply.user_name }}</span>
|
|
<span class="reply-date">{{ formatDate(reply.date_created || reply.id) }}</span>
|
|
</header>
|
|
<div class="reply-text">{{ reply.text }}</div>
|
|
</div>
|
|
</TransitionGroup>
|
|
<div v-if="!comments.length" class="empty-state-mini">
|
|
<v-icon name="auto_awesome" small /> No replies yet. Start the thread.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="composer">
|
|
<v-textarea v-model="replyText" placeholder="Compose internal response..." auto-grow />
|
|
<div class="composer-actions">
|
|
<v-button secondary :loading="sending" @click="sendReply">Post Reply</v-button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Technical Sidebar -->
|
|
<aside class="meta-column">
|
|
<v-card class="meta-card">
|
|
<v-card-title>Context</v-card-title>
|
|
<v-card-text class="meta-list">
|
|
<div class="meta-item">
|
|
<label><v-icon name="public" x-small /> Website</label>
|
|
<strong>{{ selectedItem.project }}</strong>
|
|
</div>
|
|
<div class="meta-item">
|
|
<label><v-icon name="link" x-small /> Source Path</label>
|
|
<span class="truncate-path" :title="selectedItem.url">{{ formatUrl(selectedItem.url) }}</span>
|
|
<v-button icon small @click="openExternal(selectedItem.url)"><v-icon name="launch" /></v-button>
|
|
</div>
|
|
<v-divider />
|
|
<div class="meta-item">
|
|
<label><v-icon name="layers" x-small /> Element Trace</label>
|
|
<code class="trace-code">{{ selectedItem.selector || 'Body' }}</code>
|
|
</div>
|
|
<div class="meta-item">
|
|
<label><v-icon name="location_searching" x-small /> Precise Mark</label>
|
|
<span class="coords">X: {{ Math.round(selectedItem.x) }}px / Y: {{ Math.round(selectedItem.y) }}px</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<label><v-icon name="fingerprint" x-small /> Reference ID</label>
|
|
<code class="id-code">{{ selectedItem.id }}</code>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<div class="help-box">
|
|
<v-icon name="help_outline" x-small />
|
|
<span>Click "Open & Highlight" to jump directly to this element on the live site.</span>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
<div v-else class="no-selection-desk">
|
|
<v-info icon="touch_app" title="Select Feedback" center>
|
|
Choose an entry from the triage list to view details and process.
|
|
</v-info>
|
|
</div>
|
|
</Transition>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</private-view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useApi } from '@directus/extensions-sdk';
|
|
|
|
const api = useApi();
|
|
const items = ref([]);
|
|
const comments = ref([]);
|
|
const loading = ref(true);
|
|
const fetchError = ref(null);
|
|
const sending = ref(false);
|
|
const selectedItem = ref(null);
|
|
const currentProject = ref('all');
|
|
const currentStatusFilter = ref('open');
|
|
const replyText = ref('');
|
|
|
|
const statuses = [
|
|
{ text: 'Open', value: 'open', icon: 'warning', color: '#E91E63' },
|
|
{ text: 'In Progress', value: 'in_progress', icon: 'play_arrow', color: '#2196F3' },
|
|
{ text: 'Resolved', value: 'resolved', icon: 'check_circle', color: '#4CAF50' }
|
|
];
|
|
|
|
const statusOptions = [
|
|
{ text: 'All Statuses', value: 'all' },
|
|
...statuses
|
|
];
|
|
|
|
const projects = computed(() => {
|
|
const projSet = new Set(items.value.map(i => i.project).filter(Boolean));
|
|
return Array.from(projSet).sort();
|
|
});
|
|
|
|
const filteredItems = computed(() => {
|
|
return items.value.filter(item => {
|
|
const matchProject = currentProject.value === 'all' || item.project === currentProject.value;
|
|
const status = item.status || 'open';
|
|
const matchStatus = currentStatusFilter.value === 'all' || status === currentStatusFilter.value;
|
|
return matchProject && matchStatus;
|
|
});
|
|
});
|
|
|
|
async function fetchData() {
|
|
loading.value = true;
|
|
fetchError.value = null;
|
|
try {
|
|
const response = await api.get('/items/visual_feedback', {
|
|
params: {
|
|
sort: '-date_created,-id',
|
|
limit: 300
|
|
}
|
|
});
|
|
items.value = response.data.data;
|
|
} catch (e: any) {
|
|
fetchError.value = e.message;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function selectItem(item) {
|
|
selectedItem.value = null;
|
|
setTimeout(async () => {
|
|
selectedItem.value = item;
|
|
comments.value = [];
|
|
try {
|
|
const response = await api.get('/items/visual_feedback_comments', {
|
|
params: {
|
|
filter: { feedback_id: { _eq: item.id } },
|
|
sort: '-date_created,-id'
|
|
}
|
|
});
|
|
comments.value = response.data.data;
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}, 10);
|
|
}
|
|
|
|
async function updateStatus(val) {
|
|
if (!selectedItem.value) return;
|
|
try {
|
|
await api.patch(`/items/visual_feedback/${selectedItem.value.id}`, {
|
|
status: val
|
|
});
|
|
fetchData();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
async function sendReply() {
|
|
if (!replyText.value.trim() || !selectedItem.value) return;
|
|
sending.value = true;
|
|
try {
|
|
const response = await api.post('/items/visual_feedback_comments', {
|
|
feedback_id: selectedItem.value.id,
|
|
user_name: 'Operator',
|
|
text: replyText.value
|
|
});
|
|
comments.value.unshift(response.data.data);
|
|
replyText.value = '';
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
sending.value = false;
|
|
}
|
|
}
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr || typeof dateStr === 'number') return 'Legacy';
|
|
return new Date(dateStr).toLocaleDateString() + ' ' + new Date(dateStr).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
function formatUrl(url) {
|
|
if (!url) return '';
|
|
return url.replace(/^https?:\/\//, '');
|
|
}
|
|
|
|
function capitalize(s) {
|
|
return s.charAt(0).toUpperCase() + s.slice(1).replace('_', ' ');
|
|
}
|
|
|
|
function getDeepLinkUrl(item) {
|
|
if (!item || !item.url) return '';
|
|
try {
|
|
const url = new URL(item.url);
|
|
url.searchParams.set('fb_id', item.id);
|
|
return url.toString();
|
|
} catch (e) {
|
|
return item.url + '?fb_id=' + item.id;
|
|
}
|
|
}
|
|
|
|
function openDeepLink(item) {
|
|
const url = getDeepLinkUrl(item);
|
|
if (url) window.open(url, '_blank');
|
|
}
|
|
|
|
function openExternal(url) {
|
|
if (url) window.open(url, '_blank');
|
|
}
|
|
|
|
function getAssetUrl(id) {
|
|
if (!id) return '';
|
|
return `/assets/${id}`;
|
|
}
|
|
|
|
function getStatusColor(status) {
|
|
const s = statuses.find(st => st.value === status);
|
|
return s ? s.color : 'var(--foreground-subdued)';
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchData();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.feedback-container {
|
|
height: calc(100vh - 64px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--background-subdued);
|
|
}
|
|
|
|
.operational-layout {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Triage Lane Polish */
|
|
.triage-lane {
|
|
width: 360px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--background-normal);
|
|
border-right: 1px solid var(--border-normal);
|
|
box-shadow: 2px 0 8px rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.lane-header {
|
|
padding: 16px;
|
|
background: var(--background-normal);
|
|
border-bottom: 1px solid var(--border-normal);
|
|
}
|
|
|
|
.lane-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.feedback-card {
|
|
background: var(--background-normal);
|
|
border: 1px solid var(--border-subdued);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: all var(--transition);
|
|
}
|
|
|
|
.feedback-card:hover {
|
|
border-color: var(--border-normal);
|
|
background: var(--background-subdued);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.feedback-card.active {
|
|
border-color: var(--primary);
|
|
background: var(--background-accent);
|
|
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);
|
|
}
|
|
|
|
.card-status-bar {
|
|
width: 4px;
|
|
}
|
|
|
|
.card-body {
|
|
flex: 1;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.card-user { font-weight: bold; color: var(--foreground-normal); }
|
|
.card-date { color: var(--foreground-subdued); }
|
|
|
|
.card-text {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--foreground-normal);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.meta-tags {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Processing Desk Refinement */
|
|
.processing-desk {
|
|
flex: 1;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 32px;
|
|
}
|
|
|
|
.desk-content {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.desk-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
margin-bottom: 32px;
|
|
border-bottom: 2px solid var(--border-normal);
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.headline-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: var(--foreground-subdued);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-text { letter-spacing: 0.5px; }
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
.desk-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 300px;
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
|
|
.content-card {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feedback-body {
|
|
font-size: 18px;
|
|
line-height: 1.6;
|
|
padding: 24px;
|
|
color: var(--foreground-normal);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.visual-proof {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.proof-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
color: var(--foreground-subdued);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.screenshot-img {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-normal);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
background: var(--background-subdued);
|
|
}
|
|
|
|
.main-text {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.reply-section {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.section-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.divider-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
color: var(--foreground-subdued);
|
|
white-space: nowrap;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.thread {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.reply-bubble {
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
background: var(--background-normal);
|
|
border: 1px solid var(--border-subdued);
|
|
}
|
|
|
|
.reply-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 11px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.reply-user { font-weight: 800; color: var(--primary); }
|
|
.reply-date { color: var(--foreground-subdued); }
|
|
|
|
.reply-text { font-size: 14px; line-height: 1.5; }
|
|
|
|
.composer {
|
|
background: var(--background-normal);
|
|
border: 1px solid var(--border-normal);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.composer-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.meta-card {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.meta-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.meta-item label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
color: var(--foreground-subdued);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.truncate-path {
|
|
color: var(--primary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.trace-code, .id-code {
|
|
background: var(--background-subdued);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.coords { font-weight: bold; font-family: var(--family-monospace); }
|
|
|
|
.help-box {
|
|
margin-top: 20px;
|
|
padding: 16px;
|
|
background: rgba(var(--primary-rgb), 0.05);
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
color: var(--primary);
|
|
display: flex;
|
|
gap: 8px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.no-selection-desk {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.empty-state-mini {
|
|
text-align: center;
|
|
padding: 24px;
|
|
font-size: 12px;
|
|
color: var(--foreground-subdued);
|
|
background: var(--background-subdued);
|
|
border-radius: 12px;
|
|
border: 1px dashed var(--border-normal);
|
|
}
|
|
|
|
/* Animations */
|
|
.list-enter-active, .list-leave-active { transition: all 0.3s ease; }
|
|
.list-enter-from, .list-leave-to { opacity: 0; transform: translateX(-20px); }
|
|
|
|
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
|
|
.fade-enter-from { opacity: 0; transform: translateY(10px); }
|
|
.fade-leave-to { opacity: 0; transform: translateY(-10px); }
|
|
|
|
.thread-list-enter-active { transition: all 0.4s ease; transform-origin: top; }
|
|
.thread-list-enter-from { opacity: 0; transform: scaleY(0.9); }
|
|
|
|
.scrollbar::-webkit-scrollbar { width: 6px; }
|
|
.scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
.scrollbar::-webkit-scrollbar-thumb { background: var(--border-subdued); border-radius: 3px; }
|
|
.scrollbar::-webkit-scrollbar-thumb:hover { background: var(--border-normal); }
|
|
</style>
|