jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add feedback submission flow

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-04-30 13:33:10 -04:00
parent 1263e28c00
commit 5aaddbca40
9 changed files with 932 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/package-lock.json generated
View File

@@ -15,6 +15,7 @@
"@vueuse/head": "^2.0.0",
"@xtiannyeto/vue-auth-social": "^0.1.9",
"axios": "^1.6.7",
"html2canvas": "^1.4.1",
"i18n": "^0.15.1",
"jwt-decode": "^4.0.0",
"pinia": "^2.1.7",
@@ -2161,6 +2162,15 @@
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"node_modules/base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
"license": "MIT",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2497,6 +2507,15 @@
"node": ">= 8"
}
},
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"license": "MIT",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3565,6 +3584,19 @@
"resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
"integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
},
"node_modules/html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"license": "MIT",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/https-proxy-agent": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -5341,6 +5373,15 @@
"node": ">=14.0.0"
}
},
"node_modules/text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"license": "MIT",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -5539,6 +5580,15 @@
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
},
"node_modules/utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"license": "MIT",
"dependencies": {
"base64-arraybuffer": "^1.0.2"
}
},
"node_modules/uuid": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",

1
frontend/package.json
View File

@@ -19,6 +19,7 @@
"@vueuse/head": "^2.0.0",
"@xtiannyeto/vue-auth-social": "^0.1.9",
"axios": "^1.6.7",
"html2canvas": "^1.4.1",
"i18n": "^0.15.1",
"jwt-decode": "^4.0.0",
"pinia": "^2.1.7",

3
frontend/src/App.vue
View File

@@ -28,6 +28,8 @@
<router-view></router-view>
</div>
</div>
<FeedbackFloatingButton v-if="showsAppSidebar" />
</div>
</v-app>
</template>
@@ -39,6 +41,7 @@
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
import AppBar from '@/layouts/main/AppBar.vue';
import AppSidebar from '@/layouts/main/AppSidebar.vue';
import FeedbackFloatingButton from '@/features/feedback/components/FeedbackFloatingButton.vue';
const route = useRoute();
const authStore = useAuthStore();

50
frontend/src/features/feedback/components/FeedbackFloatingButton.vue Normal file
View File

@@ -0,0 +1,50 @@
<script setup>
import { defineAsyncComponent, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { mdiMessageAlertOutline } from '@mdi/js';
const FeedbackSubmissionDialog = defineAsyncComponent(() => import('./FeedbackSubmissionDialog.vue'));
const { t } = useI18n();
const isDialogOpen = ref(false);
</script>
<template>
<div
class="feedback-entry"
data-feedback-ui="true"
>
<button
class="feedback-entry-button"
type="button"
:title="t('feedback.open')"
@click="isDialogOpen = true"
>
<v-icon :icon="mdiMessageAlertOutline" />
<span>{{ t('feedback.button') }}</span>
</button>
<FeedbackSubmissionDialog v-model="isDialogOpen" />
</div>
</template>
<style scoped>
.feedback-entry {
@apply fixed bottom-5 right-5 z-50;
}
.feedback-entry-button {
@apply flex h-12 items-center gap-2 rounded-full border px-4 text-sm font-bold shadow-lg transition-colors;
background: #172033;
border-color: rgba(255, 255, 255, 0.4);
color: #fffaf2;
}
.feedback-entry-button:hover {
background: #0f766e;
}
.feedback-entry-button span {
@apply hidden sm:inline;
}
</style>

711
frontend/src/features/feedback/components/FeedbackSubmissionDialog.vue Normal file
View File

@@ -0,0 +1,711 @@
<script setup>
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import html2canvas from 'html2canvas';
import { useToast } from 'vue-toastification';
import { useClientsStore } from '@/features/clients/stores/clientsStore.js';
import { useContentItemDetailStore } from '@/features/content/stores/contentItemDetailStore.js';
import { useContentItemsStore } from '@/features/content/stores/contentItemsStore.js';
import { useFeedbackSubmissionStore } from '@/features/feedback/stores/feedbackSubmissionStore.js';
import { useProjectsStore } from '@/features/projects/stores/projectsStore.js';
import { useWorkspaceStore } from '@/features/workspaces/stores/workspaceStore.js';
import {
mdiArrowTopRight,
mdiCameraOutline,
mdiClose,
mdiContentSaveOutline,
mdiCrop,
mdiEraser,
mdiFormatText,
mdiGesture,
mdiMinus,
mdiRedoVariant,
mdiShapeOvalPlus,
mdiUndoVariant,
} from '@mdi/js';
const model = defineModel({ type: Boolean, default: false });
const { t } = useI18n();
const route = useRoute();
const toast = useToast();
const clientsStore = useClientsStore();
const contentItemsStore = useContentItemsStore();
const contentItemDetailStore = useContentItemDetailStore();
const feedbackStore = useFeedbackSubmissionStore();
const projectsStore = useProjectsStore();
const workspaceStore = useWorkspaceStore();
const form = reactive({
type: null,
description: '',
});
const editorCanvas = ref(null);
const sourceImage = ref(null);
const imageElement = ref(null);
const screenshotBlob = ref(null);
const selectedTool = ref('freehand');
const captureError = ref(null);
const isCapturing = ref(false);
const isDrawing = ref(false);
const startPoint = ref(null);
const draftPoint = ref(null);
const freehandPoints = ref([]);
const annotations = ref([]);
const imageHistory = ref([]);
const feedbackTypes = computed(() => [
{ title: t('feedback.types.bug'), value: 'Bug' },
{ title: t('feedback.types.suggestion'), value: 'Suggestion' },
{ title: t('feedback.types.request'), value: 'Request' },
]);
const annotationTools = computed(() => [
{ value: 'crop', label: t('feedback.tools.crop'), icon: mdiCrop },
{ value: 'arrow', label: t('feedback.tools.arrow'), icon: mdiArrowTopRight },
{ value: 'ellipse', label: t('feedback.tools.ellipse'), icon: mdiShapeOvalPlus },
{ value: 'line', label: t('feedback.tools.line'), icon: mdiMinus },
{ value: 'freehand', label: t('feedback.tools.freehand'), icon: mdiGesture },
{ value: 'text', label: t('feedback.tools.text'), icon: mdiFormatText },
]);
const isDirty = computed(() =>
Boolean(form.type || form.description.trim() || sourceImage.value || screenshotBlob.value)
);
const canSubmit = computed(() =>
Boolean(form.type && form.description.trim()) && !feedbackStore.isSubmitting
);
const currentContentItem = computed(() => {
const routeId = route.params.id;
if (!routeId) {
return null;
}
return contentItemDetailStore.item?.id === routeId
? contentItemDetailStore.item
: contentItemsStore.items.find(item => item.id === routeId) ?? null;
});
const currentProject = computed(() => {
const projectId = route.params.projectId ?? currentContentItem.value?.projectId;
if (!projectId) {
return null;
}
return projectsStore.projects.find(project => project.id === projectId) ?? null;
});
const currentClient = computed(() => {
const clientId = route.query.clientId ?? currentProject.value?.clientId ?? currentContentItem.value?.clientId;
if (!clientId) {
return clientsStore.operationalClient ?? null;
}
return clientsStore.clients.find(client => client.id === clientId) ?? null;
});
watch(model, value => {
if (value) {
resetForm();
}
});
function resetForm() {
form.type = null;
form.description = '';
sourceImage.value = null;
imageElement.value = null;
screenshotBlob.value = null;
captureError.value = null;
selectedTool.value = 'freehand';
annotations.value = [];
imageHistory.value = [];
clearPointerState();
}
async function requestClose() {
if (isDirty.value && !window.confirm(t('feedback.discardConfirm'))) {
return;
}
model.value = false;
resetForm();
}
async function captureViewport() {
isCapturing.value = true;
captureError.value = null;
try {
await nextTick();
const target = document.querySelector('.shell-container') ?? document.body;
const canvas = await html2canvas(target, {
backgroundColor: '#fffaf2',
height: window.innerHeight,
ignoreElements: element => element.dataset?.feedbackUi === 'true',
scale: Math.min(window.devicePixelRatio || 1, 2),
scrollX: -window.scrollX,
scrollY: -window.scrollY,
useCORS: true,
width: window.innerWidth,
windowHeight: window.innerHeight,
windowWidth: window.innerWidth,
});
sourceImage.value = canvas.toDataURL('image/jpeg', 0.88);
imageHistory.value = [sourceImage.value];
annotations.value = [];
await loadImage();
await exportScreenshot();
} catch (error) {
console.error('Failed to capture feedback screenshot:', error);
captureError.value = t('feedback.captureFailed');
} finally {
isCapturing.value = false;
}
}
function loadImage() {
return new Promise(resolve => {
if (!sourceImage.value) {
resolve();
return;
}
const image = new Image();
image.onload = () => {
imageElement.value = image;
nextTick(() => {
redrawCanvas();
resolve();
});
};
image.src = sourceImage.value;
});
}
function getCanvasPoint(event) {
const canvas = editorCanvas.value;
const rect = canvas.getBoundingClientRect();
const clientX = event.touches?.[0]?.clientX ?? event.clientX;
const clientY = event.touches?.[0]?.clientY ?? event.clientY;
return {
x: ((clientX - rect.left) / rect.width) * canvas.width,
y: ((clientY - rect.top) / rect.height) * canvas.height,
};
}
function beginAnnotation(event) {
if (!imageElement.value) {
return;
}
const point = getCanvasPoint(event);
if (selectedTool.value === 'text') {
const text = window.prompt(t('feedback.textPrompt'));
if (text?.trim()) {
annotations.value.push({ tool: 'text', x: point.x, y: point.y, text: text.trim() });
redrawCanvas();
exportScreenshot();
}
return;
}
isDrawing.value = true;
startPoint.value = point;
draftPoint.value = point;
freehandPoints.value = [point];
}
function moveAnnotation(event) {
if (!isDrawing.value) {
return;
}
const point = getCanvasPoint(event);
draftPoint.value = point;
if (selectedTool.value === 'freehand') {
freehandPoints.value.push(point);
}
redrawCanvas(true);
}
async function endAnnotation() {
if (!isDrawing.value || !startPoint.value || !draftPoint.value) {
clearPointerState();
return;
}
const annotation = selectedTool.value === 'freehand'
? { tool: 'freehand', points: [...freehandPoints.value] }
: {
tool: selectedTool.value,
x1: startPoint.value.x,
y1: startPoint.value.y,
x2: draftPoint.value.x,
y2: draftPoint.value.y,
};
if (selectedTool.value === 'crop') {
await applyCrop(annotation);
} else if (hasMeaningfulSize(annotation)) {
annotations.value.push(annotation);
}
clearPointerState();
redrawCanvas();
await exportScreenshot();
}
function hasMeaningfulSize(annotation) {
if (annotation.tool === 'freehand') {
return annotation.points.length > 2;
}
return Math.abs(annotation.x2 - annotation.x1) > 6 || Math.abs(annotation.y2 - annotation.y1) > 6;
}
async function applyCrop(crop) {
const canvas = editorCanvas.value;
const x = Math.max(0, Math.min(crop.x1, crop.x2));
const y = Math.max(0, Math.min(crop.y1, crop.y2));
const width = Math.min(canvas.width - x, Math.abs(crop.x2 - crop.x1));
const height = Math.min(canvas.height - y, Math.abs(crop.y2 - crop.y1));
if (width < 20 || height < 20) {
return;
}
const cropCanvas = document.createElement('canvas');
cropCanvas.width = width;
cropCanvas.height = height;
cropCanvas.getContext('2d').drawImage(canvas, x, y, width, height, 0, 0, width, height);
sourceImage.value = cropCanvas.toDataURL('image/jpeg', 0.9);
imageHistory.value.push(sourceImage.value);
annotations.value = [];
await loadImage();
}
function clearPointerState() {
isDrawing.value = false;
startPoint.value = null;
draftPoint.value = null;
freehandPoints.value = [];
}
function redrawCanvas(includeDraft = false) {
const canvas = editorCanvas.value;
const image = imageElement.value;
if (!canvas || !image) {
return;
}
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0);
annotations.value.forEach(annotation => drawAnnotation(context, annotation));
if (includeDraft && startPoint.value && draftPoint.value) {
const draft = selectedTool.value === 'freehand'
? { tool: 'freehand', points: freehandPoints.value }
: { tool: selectedTool.value, x1: startPoint.value.x, y1: startPoint.value.y, x2: draftPoint.value.x, y2: draftPoint.value.y };
drawAnnotation(context, draft, true);
}
}
function drawAnnotation(context, annotation, isDraft = false) {
context.save();
context.strokeStyle = annotation.tool === 'crop' ? '#0f766e' : '#ef4444';
context.fillStyle = '#ef4444';
context.lineWidth = Math.max(4, editorCanvas.value.width / 320);
context.lineCap = 'round';
context.lineJoin = 'round';
context.globalAlpha = isDraft ? 0.78 : 1;
if (annotation.tool === 'line' || annotation.tool === 'arrow') {
drawLine(context, annotation.x1, annotation.y1, annotation.x2, annotation.y2, annotation.tool === 'arrow');
} else if (annotation.tool === 'ellipse') {
context.beginPath();
context.ellipse(
(annotation.x1 + annotation.x2) / 2,
(annotation.y1 + annotation.y2) / 2,
Math.abs(annotation.x2 - annotation.x1) / 2,
Math.abs(annotation.y2 - annotation.y1) / 2,
0,
0,
Math.PI * 2
);
context.stroke();
} else if (annotation.tool === 'crop') {
context.setLineDash([12, 8]);
context.strokeRect(annotation.x1, annotation.y1, annotation.x2 - annotation.x1, annotation.y2 - annotation.y1);
} else if (annotation.tool === 'freehand') {
context.beginPath();
annotation.points.forEach((point, index) => {
if (index === 0) {
context.moveTo(point.x, point.y);
} else {
context.lineTo(point.x, point.y);
}
});
context.stroke();
} else if (annotation.tool === 'text') {
context.font = `${Math.max(24, editorCanvas.value.width / 32)}px sans-serif`;
context.lineWidth = 6;
context.strokeStyle = '#fffaf2';
context.strokeText(annotation.text, annotation.x, annotation.y);
context.fillText(annotation.text, annotation.x, annotation.y);
}
context.restore();
}
function drawLine(context, x1, y1, x2, y2, withArrow) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
if (!withArrow) {
return;
}
const angle = Math.atan2(y2 - y1, x2 - x1);
const size = Math.max(18, editorCanvas.value.width / 48);
context.beginPath();
context.moveTo(x2, y2);
context.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
context.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
context.closePath();
context.fill();
}
async function undoAnnotation() {
if (annotations.value.length) {
annotations.value.pop();
} else if (imageHistory.value.length > 1) {
imageHistory.value.pop();
sourceImage.value = imageHistory.value[imageHistory.value.length - 1];
await loadImage();
}
redrawCanvas();
await exportScreenshot();
}
async function clearAnnotations() {
if (!sourceImage.value) {
return;
}
annotations.value = [];
if (imageHistory.value.length > 1) {
sourceImage.value = imageHistory.value[0];
imageHistory.value = [sourceImage.value];
await loadImage();
}
redrawCanvas();
await exportScreenshot();
}
function removeScreenshot() {
sourceImage.value = null;
imageElement.value = null;
screenshotBlob.value = null;
annotations.value = [];
imageHistory.value = [];
}
function exportScreenshot() {
return new Promise(resolve => {
const canvas = editorCanvas.value;
if (!canvas) {
resolve();
return;
}
canvas.toBlob(blob => {
screenshotBlob.value = blob;
resolve();
}, 'image/jpeg', 0.86);
});
}
function buildMetadata() {
return {
type: form.type,
description: form.description.trim(),
submittedPath: route.fullPath,
browserUserAgent: navigator.userAgent,
viewportWidth: window.innerWidth,
viewportHeight: window.innerHeight,
appVersion: import.meta.env.VITE_APP_VERSION ?? null,
workspaceId: workspaceStore.activeWorkspace?.id ?? null,
workspaceName: workspaceStore.activeWorkspace?.name ?? null,
clientId: currentClient.value?.id ?? null,
clientName: currentClient.value?.name ?? null,
projectId: currentProject.value?.id ?? null,
projectName: currentProject.value?.name ?? null,
contentItemId: currentContentItem.value?.id ?? null,
contentItemTitle: currentContentItem.value?.title ?? null,
};
}
async function submit() {
if (!canSubmit.value) {
return;
}
try {
await exportScreenshot();
await feedbackStore.submitFeedback(buildMetadata(), screenshotBlob.value);
toast.success(t('feedback.submitted'));
model.value = false;
resetForm();
} catch (error) {
toast.error(t('feedback.submitFailed'));
}
}
</script>
<template>
<v-dialog
:model-value="model"
max-width="980"
persistent
data-feedback-ui="true"
>
<section class="feedback-dialog">
<header class="feedback-dialog-header">
<div>
<p>{{ t('feedback.eyebrow') }}</p>
<h2>{{ t('feedback.title') }}</h2>
</div>
<button
class="feedback-icon-button"
type="button"
:title="t('close')"
@click="requestClose"
>
<v-icon :icon="mdiClose" />
</button>
</header>
<div class="feedback-dialog-body">
<div class="feedback-form">
<v-select
v-model="form.type"
:items="feedbackTypes"
:label="t('feedback.fields.type')"
variant="outlined"
density="comfortable"
/>
<v-textarea
v-model="form.description"
:label="t('feedback.fields.description')"
:placeholder="t('feedback.fields.descriptionPlaceholder')"
variant="outlined"
rows="7"
auto-grow
counter="8000"
/>
<v-alert
v-if="captureError"
type="warning"
variant="tonal"
density="compact"
>
{{ captureError }}
</v-alert>
<div class="feedback-actions">
<v-btn
variant="tonal"
color="primary"
:loading="isCapturing"
:prepend-icon="mdiCameraOutline"
@click="captureViewport"
>
{{ t('feedback.capture') }}
</v-btn>
<v-btn
v-if="sourceImage"
variant="text"
color="error"
:prepend-icon="mdiEraser"
@click="removeScreenshot"
>
{{ t('feedback.removeCapture') }}
</v-btn>
</div>
</div>
<div
v-if="sourceImage"
class="feedback-editor"
>
<div class="feedback-toolstrip">
<button
v-for="tool in annotationTools"
:key="tool.value"
class="feedback-tool-button"
:class="{ 'feedback-tool-button-active': selectedTool === tool.value }"
type="button"
:title="tool.label"
@click="selectedTool = tool.value"
>
<v-icon :icon="tool.icon" />
</button>
<span class="feedback-tool-divider"></span>
<button
class="feedback-tool-button"
type="button"
:title="t('feedback.tools.undo')"
@click="undoAnnotation"
>
<v-icon :icon="mdiUndoVariant" />
</button>
<button
class="feedback-tool-button"
type="button"
:title="t('feedback.tools.clear')"
@click="clearAnnotations"
>
<v-icon :icon="mdiRedoVariant" />
</button>
</div>
<canvas
ref="editorCanvas"
class="feedback-canvas"
@pointerdown="beginAnnotation"
@pointermove="moveAnnotation"
@pointerup="endAnnotation"
@pointerleave="endAnnotation"
></canvas>
</div>
<div
v-else
class="feedback-empty-preview"
>
<v-icon :icon="mdiCameraOutline" />
<span>{{ t('feedback.noCapture') }}</span>
</div>
</div>
<footer class="feedback-dialog-footer">
<v-btn
variant="text"
@click="requestClose"
>
{{ t('cancel') }}
</v-btn>
<v-btn
color="primary"
:disabled="!canSubmit"
:loading="feedbackStore.isSubmitting"
:prepend-icon="mdiContentSaveOutline"
@click="submit"
>
{{ t('feedback.submit') }}
</v-btn>
</footer>
</section>
</v-dialog>
</template>
<style scoped>
.feedback-dialog {
@apply overflow-hidden rounded-lg border;
background: #fffaf2;
border-color: rgba(23, 32, 51, 0.12);
color: #172033;
}
.feedback-dialog-header,
.feedback-dialog-footer {
@apply flex items-center justify-between gap-4 px-5 py-4;
border-bottom: 1px solid rgba(23, 32, 51, 0.08);
}
.feedback-dialog-footer {
@apply justify-end;
border-bottom: 0;
border-top: 1px solid rgba(23, 32, 51, 0.08);
}
.feedback-dialog-header p {
@apply text-xs font-black uppercase;
color: #0f766e;
}
.feedback-dialog-header h2 {
@apply text-xl font-black;
}
.feedback-icon-button,
.feedback-tool-button {
@apply flex h-10 w-10 items-center justify-center rounded-full transition-colors;
background: rgba(23, 32, 51, 0.06);
color: #172033;
}
.feedback-icon-button:hover,
.feedback-tool-button:hover,
.feedback-tool-button-active {
background: #172033;
color: #fffaf2;
}
.feedback-dialog-body {
@apply grid gap-5 p-5 lg:grid-cols-[minmax(18rem,22rem)_1fr];
}
.feedback-form,
.feedback-editor,
.feedback-empty-preview {
@apply min-w-0;
}
.feedback-actions {
@apply flex flex-wrap items-center gap-2;
}
.feedback-editor {
@apply flex flex-col gap-3;
}
.feedback-toolstrip {
@apply flex flex-wrap items-center gap-2;
}
.feedback-tool-divider {
@apply h-7 w-px;
background: rgba(23, 32, 51, 0.16);
}
.feedback-canvas {
@apply block w-full rounded-md border;
max-height: 58vh;
background: #ffffff;
border-color: rgba(23, 32, 51, 0.12);
cursor: crosshair;
object-fit: contain;
}
.feedback-empty-preview {
@apply flex min-h-[18rem] flex-col items-center justify-center gap-3 rounded-md border border-dashed text-sm;
background: rgba(23, 32, 51, 0.03);
border-color: rgba(23, 32, 51, 0.16);
color: #526178;
}
.feedback-empty-preview i {
@apply text-4xl;
}
</style>

45
frontend/src/features/feedback/stores/feedbackSubmissionStore.js Normal file
View File

@@ -0,0 +1,45 @@
import { ref } from 'vue';
import { defineStore } from 'pinia';
import { useClient } from '@/plugins/api.js';
export const useFeedbackSubmissionStore = defineStore('feedback-submission', () => {
const client = useClient();
const isSubmitting = ref(false);
const error = ref(null);
async function submitFeedback(payload, screenshotBlob) {
if (isSubmitting.value) {
throw new Error('A feedback submission is already in progress.');
}
isSubmitting.value = true;
error.value = null;
try {
const response = await client.post('/api/feedback', payload);
let report = response.data;
if (screenshotBlob && report?.id) {
const formData = new FormData();
formData.append('file', screenshotBlob, 'feedback-screenshot.jpg');
const screenshotResponse = await client.post(`/api/my-feedback/${report.id}/screenshot`, formData);
report = screenshotResponse.data ?? report;
}
return report;
} catch (submitError) {
console.error('Failed to submit feedback:', submitError);
error.value = 'Failed to submit feedback.';
throw submitError;
} finally {
isSubmitting.value = false;
}
}
return {
isSubmitting,
error,
submitFeedback,
};
});

35
frontend/src/locales/en.json
View File

@@ -99,6 +99,41 @@
"assetRevisionCreated": "Asset revision created"
}
},
"feedback": {
"button": "Feedback",
"open": "Send product feedback",
"eyebrow": "Product feedback",
"title": "Send feedback",
"capture": "Capture screen",
"removeCapture": "Remove capture",
"noCapture": "Capture the current app viewport if a screenshot would help.",
"captureFailed": "The screenshot could not be captured. You can still submit feedback without it.",
"submit": "Submit feedback",
"submitted": "Feedback submitted.",
"submitFailed": "Feedback could not be submitted.",
"discardConfirm": "Discard this unsent feedback?",
"textPrompt": "Text label",
"types": {
"bug": "Bug",
"suggestion": "Suggestion",
"request": "Request"
},
"fields": {
"type": "Type",
"description": "Description",
"descriptionPlaceholder": "Describe what happened, what you expected, or what would improve the workflow."
},
"tools": {
"crop": "Crop",
"arrow": "Arrow",
"ellipse": "Circle",
"line": "Line",
"freehand": "Freehand",
"text": "Text label",
"undo": "Undo",
"clear": "Clear and reset"
}
},
"sidebar": {
"allClients": "All clients",
"allChannels": "All channels",

35
frontend/src/locales/fr.json
View File

@@ -99,6 +99,41 @@
"assetRevisionCreated": "Révision de ressource créée"
}
},
"feedback": {
"button": "Feedback",
"open": "Envoyer un feedback produit",
"eyebrow": "Feedback produit",
"title": "Envoyer un feedback",
"capture": "Capturer l'écran",
"removeCapture": "Retirer la capture",
"noCapture": "Capturez la vue actuelle de l'application si une image peut aider.",
"captureFailed": "La capture d'écran n'a pas pu être faite. Vous pouvez quand même envoyer un feedback sans image.",
"submit": "Envoyer le feedback",
"submitted": "Feedback envoyé.",
"submitFailed": "Le feedback n'a pas pu être envoyé.",
"discardConfirm": "Supprimer ce feedback non envoyé ?",
"textPrompt": "Libellé texte",
"types": {
"bug": "Bug",
"suggestion": "Suggestion",
"request": "Demande"
},
"fields": {
"type": "Type",
"description": "Description",
"descriptionPlaceholder": "Décrivez ce qui s'est produit, ce que vous attendiez ou ce qui améliorerait le workflow."
},
"tools": {
"crop": "Recadrer",
"arrow": "Flèche",
"ellipse": "Cercle",
"line": "Ligne",
"freehand": "Main levée",
"text": "Texte",
"undo": "Annuler",
"clear": "Effacer et réinitialiser"
}
},
"sidebar": {
"allClients": "Tous les clients",
"allChannels": "Tous les canaux",

2
frontend/src/main.js
View File

@@ -14,6 +14,7 @@ import {
VIcon,
VProgressCircular,
VProgressLinear,
VSelect,
VSnackbar,
VTextarea,
VTextField,
@@ -42,6 +43,7 @@ const vuetify = createVuetify({
VProgressLinear,
VProgressCircular,
VIcon,
VSelect,
VTextField,
VSnackbar,
VForm,