feat: Add 'atas' (minutes/records) management feature, and implement various improvements across UI, backend logic, and authentication.
This commit is contained in:
@@ -1,343 +1,343 @@
|
||||
<script lang="ts">
|
||||
import { useConvexClient } from 'convex-svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
import {
|
||||
ExternalLink,
|
||||
FileText,
|
||||
File as FileIcon,
|
||||
Upload,
|
||||
Trash2,
|
||||
Eye,
|
||||
RefreshCw
|
||||
} from 'lucide-svelte';
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
helpUrl?: string;
|
||||
value?: string; // storageId
|
||||
disabled?: boolean;
|
||||
required?: boolean;
|
||||
onUpload: (file: globalThis.File) => Promise<void>;
|
||||
onRemove: () => Promise<void>;
|
||||
}
|
||||
|
||||
let {
|
||||
label,
|
||||
helpUrl,
|
||||
value = $bindable(),
|
||||
disabled = false,
|
||||
required = false,
|
||||
onUpload,
|
||||
onRemove
|
||||
}: Props = $props();
|
||||
|
||||
const client = useConvexClient() as unknown as {
|
||||
storage: {
|
||||
getUrl: (id: string) => Promise<string | null>;
|
||||
};
|
||||
};
|
||||
|
||||
let fileInput: HTMLInputElement | null = null;
|
||||
let uploading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let fileName = $state<string>('');
|
||||
let fileType = $state<string>('');
|
||||
let previewUrl = $state<string | null>(null);
|
||||
let fileUrl = $state<string | null>(null);
|
||||
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
|
||||
const ALLOWED_TYPES = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
|
||||
|
||||
// Buscar URL do arquivo quando houver um storageId
|
||||
$effect(() => {
|
||||
if (value && !fileName) {
|
||||
// Tem storageId mas não é um upload recente
|
||||
void loadExistingFile(value);
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
const storageId = value;
|
||||
|
||||
if (!storageId) {
|
||||
return;
|
||||
}
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const url = await client.storage.getUrl(storageId);
|
||||
if (!url || cancelled) {
|
||||
return;
|
||||
}
|
||||
|
||||
fileUrl = url;
|
||||
|
||||
const path = url.split('?')[0] ?? '';
|
||||
const nameFromUrl = path.split('/').pop() ?? 'arquivo';
|
||||
fileName = decodeURIComponent(nameFromUrl);
|
||||
|
||||
const extension = fileName.toLowerCase().split('.').pop();
|
||||
const isPdf =
|
||||
extension === 'pdf' || url.includes('.pdf') || url.includes('application/pdf');
|
||||
|
||||
if (isPdf) {
|
||||
fileType = 'application/pdf';
|
||||
previewUrl = null;
|
||||
} else {
|
||||
fileType = 'image/jpeg';
|
||||
previewUrl = url;
|
||||
}
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
console.error('Erro ao carregar arquivo existente:', err);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
});
|
||||
|
||||
async function loadExistingFile(storageId: string) {
|
||||
try {
|
||||
const url = await client.storage.getUrl(storageId);
|
||||
if (url) {
|
||||
fileUrl = url;
|
||||
|
||||
// Detectar tipo pelo URL ou assumir PDF
|
||||
if (url.includes('.pdf') || url.includes('application/pdf')) {
|
||||
fileType = 'application/pdf';
|
||||
} else {
|
||||
fileType = 'image/jpeg';
|
||||
// Para imagens, a URL serve como preview
|
||||
previewUrl = url;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erro ao carregar arquivo existente:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFileSelect(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
error = null;
|
||||
|
||||
// Validate file size
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
error = 'Arquivo muito grande. Tamanho máximo: 10MB';
|
||||
target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file type
|
||||
if (!ALLOWED_TYPES.includes(file.type)) {
|
||||
error = 'Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)';
|
||||
target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
uploading = true;
|
||||
fileName = file.name;
|
||||
fileType = file.type;
|
||||
|
||||
// Create preview for images
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const result = e.target?.result;
|
||||
if (typeof result === 'string') {
|
||||
previewUrl = result;
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
previewUrl = null;
|
||||
}
|
||||
|
||||
await onUpload(file);
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
error = err.message || 'Erro ao fazer upload do arquivo';
|
||||
} else {
|
||||
error = 'Erro ao fazer upload do arquivo';
|
||||
}
|
||||
previewUrl = null;
|
||||
} finally {
|
||||
uploading = false;
|
||||
target.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemove() {
|
||||
if (!confirm('Tem certeza que deseja remover este arquivo?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
uploading = true;
|
||||
await onRemove();
|
||||
fileName = '';
|
||||
fileType = '';
|
||||
previewUrl = null;
|
||||
fileUrl = null;
|
||||
error = null;
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
error = err.message || 'Erro ao remover arquivo';
|
||||
} else {
|
||||
error = 'Erro ao remover arquivo';
|
||||
}
|
||||
} finally {
|
||||
uploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleView() {
|
||||
if (fileUrl) {
|
||||
window.open(fileUrl, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
function openFileDialog() {
|
||||
fileInput?.click();
|
||||
}
|
||||
|
||||
function setFileInput(node: HTMLInputElement) {
|
||||
fileInput = node;
|
||||
return {
|
||||
destroy() {
|
||||
if (fileInput === node) {
|
||||
fileInput = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="file-upload-input">
|
||||
<span class="label-text flex items-center gap-2 font-medium">
|
||||
{label}
|
||||
{#if required}
|
||||
<span class="text-error">*</span>
|
||||
{/if}
|
||||
{#if helpUrl}
|
||||
<div class="tooltip tooltip-right" data-tip="Clique para acessar o link">
|
||||
<a
|
||||
href={helpUrl ?? '/'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary hover:text-primary-focus transition-colors"
|
||||
aria-label="Acessar link"
|
||||
>
|
||||
<ExternalLink class="h-4 w-4" strokeWidth={2} />
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="file-upload-input"
|
||||
type="file"
|
||||
use:setFileInput
|
||||
onchange={handleFileSelect}
|
||||
accept=".pdf,.jpg,.jpeg,.png"
|
||||
class="hidden"
|
||||
{disabled}
|
||||
/>
|
||||
|
||||
{#if value || fileName}
|
||||
<div class="border-base-300 bg-base-100 flex items-center gap-2 rounded-lg border p-3">
|
||||
<!-- Preview -->
|
||||
<div class="shrink-0">
|
||||
{#if previewUrl}
|
||||
<img src={previewUrl} alt="Preview" class="h-12 w-12 rounded object-cover" />
|
||||
{:else if fileType === 'application/pdf' || fileName.endsWith('.pdf')}
|
||||
<div class="bg-error/10 flex h-12 w-12 items-center justify-center rounded">
|
||||
<FileText class="text-error h-6 w-6" strokeWidth={2} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-success/10 flex h-12 w-12 items-center justify-center rounded">
|
||||
<FileIcon class="text-success h-6 w-6" strokeWidth={2} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- File info -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium">
|
||||
{fileName || 'Arquivo anexado'}
|
||||
</p>
|
||||
<p class="text-base-content/60 text-xs">
|
||||
{#if uploading}
|
||||
Carregando...
|
||||
{:else}
|
||||
Enviado com sucesso
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2">
|
||||
{#if fileUrl}
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleView}
|
||||
class="btn btn-sm btn-ghost text-info"
|
||||
disabled={uploading || disabled}
|
||||
title="Visualizar arquivo"
|
||||
>
|
||||
<Eye class="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={openFileDialog}
|
||||
class="btn btn-sm btn-ghost"
|
||||
disabled={uploading || disabled}
|
||||
title="Substituir arquivo"
|
||||
>
|
||||
<RefreshCw class="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleRemove}
|
||||
class="btn btn-sm btn-ghost text-error"
|
||||
disabled={uploading || disabled}
|
||||
title="Remover arquivo"
|
||||
>
|
||||
<Trash2 class="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={openFileDialog}
|
||||
class="btn btn-outline btn-block justify-start gap-2"
|
||||
disabled={uploading || disabled}
|
||||
>
|
||||
{#if uploading}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Carregando...
|
||||
{:else}
|
||||
<Upload class="h-5 w-5" strokeWidth={2} />
|
||||
Selecionar arquivo (PDF ou imagem, máx. 10MB)
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-error">{error}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<script lang="ts">
|
||||
import { useConvexClient } from 'convex-svelte';
|
||||
import {
|
||||
ExternalLink,
|
||||
Eye,
|
||||
File as FileIcon,
|
||||
FileText,
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
Upload
|
||||
} from 'lucide-svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
helpUrl?: string;
|
||||
value?: string; // storageId
|
||||
disabled?: boolean;
|
||||
required?: boolean;
|
||||
onUpload: (file: globalThis.File) => Promise<void>;
|
||||
onRemove: () => Promise<void>;
|
||||
}
|
||||
|
||||
const {
|
||||
label,
|
||||
helpUrl,
|
||||
value = $bindable(),
|
||||
disabled = false,
|
||||
required = false,
|
||||
onUpload,
|
||||
onRemove
|
||||
}: Props = $props();
|
||||
|
||||
const client = useConvexClient() as unknown as {
|
||||
storage: {
|
||||
getUrl: (id: string) => Promise<string | null>;
|
||||
};
|
||||
};
|
||||
|
||||
let fileInput: HTMLInputElement | null = null;
|
||||
let uploading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let fileName = $state<string>('');
|
||||
let fileType = $state<string>('');
|
||||
let previewUrl = $state<string | null>(null);
|
||||
let fileUrl = $state<string | null>(null);
|
||||
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
|
||||
const ALLOWED_TYPES = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
|
||||
|
||||
// Buscar URL do arquivo quando houver um storageId
|
||||
$effect(() => {
|
||||
if (value && !fileName) {
|
||||
// Tem storageId mas não é um upload recente
|
||||
void loadExistingFile(value);
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
const storageId = value;
|
||||
|
||||
if (!storageId) {
|
||||
return;
|
||||
}
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const url = await client.storage.getUrl(storageId);
|
||||
if (!url || cancelled) {
|
||||
return;
|
||||
}
|
||||
|
||||
fileUrl = url;
|
||||
|
||||
const path = url.split('?')[0] ?? '';
|
||||
const nameFromUrl = path.split('/').pop() ?? 'arquivo';
|
||||
fileName = decodeURIComponent(nameFromUrl);
|
||||
|
||||
const extension = fileName.toLowerCase().split('.').pop();
|
||||
const isPdf =
|
||||
extension === 'pdf' || url.includes('.pdf') || url.includes('application/pdf');
|
||||
|
||||
if (isPdf) {
|
||||
fileType = 'application/pdf';
|
||||
previewUrl = null;
|
||||
} else {
|
||||
fileType = 'image/jpeg';
|
||||
previewUrl = url;
|
||||
}
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
console.error('Erro ao carregar arquivo existente:', err);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
});
|
||||
|
||||
async function loadExistingFile(storageId: string) {
|
||||
try {
|
||||
const url = await client.storage.getUrl(storageId);
|
||||
if (url) {
|
||||
fileUrl = url;
|
||||
|
||||
// Detectar tipo pelo URL ou assumir PDF
|
||||
if (url.includes('.pdf') || url.includes('application/pdf')) {
|
||||
fileType = 'application/pdf';
|
||||
} else {
|
||||
fileType = 'image/jpeg';
|
||||
// Para imagens, a URL serve como preview
|
||||
previewUrl = url;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erro ao carregar arquivo existente:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFileSelect(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
error = null;
|
||||
|
||||
// Validate file size
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
error = 'Arquivo muito grande. Tamanho máximo: 10MB';
|
||||
target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file type
|
||||
if (!ALLOWED_TYPES.includes(file.type)) {
|
||||
error = 'Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)';
|
||||
target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
uploading = true;
|
||||
fileName = file.name;
|
||||
fileType = file.type;
|
||||
|
||||
// Create preview for images
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const result = e.target?.result;
|
||||
if (typeof result === 'string') {
|
||||
previewUrl = result;
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
previewUrl = null;
|
||||
}
|
||||
|
||||
await onUpload(file);
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
error = err.message || 'Erro ao fazer upload do arquivo';
|
||||
} else {
|
||||
error = 'Erro ao fazer upload do arquivo';
|
||||
}
|
||||
previewUrl = null;
|
||||
} finally {
|
||||
uploading = false;
|
||||
target.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemove() {
|
||||
if (!confirm('Tem certeza que deseja remover este arquivo?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
uploading = true;
|
||||
await onRemove();
|
||||
fileName = '';
|
||||
fileType = '';
|
||||
previewUrl = null;
|
||||
fileUrl = null;
|
||||
error = null;
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
error = err.message || 'Erro ao remover arquivo';
|
||||
} else {
|
||||
error = 'Erro ao remover arquivo';
|
||||
}
|
||||
} finally {
|
||||
uploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleView() {
|
||||
if (fileUrl) {
|
||||
window.open(fileUrl, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
function openFileDialog() {
|
||||
fileInput?.click();
|
||||
}
|
||||
|
||||
function setFileInput(node: HTMLInputElement) {
|
||||
fileInput = node;
|
||||
return {
|
||||
destroy() {
|
||||
if (fileInput === node) {
|
||||
fileInput = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label" for="file-upload-input">
|
||||
<span class="label-text flex items-center gap-2 font-medium">
|
||||
{label}
|
||||
{#if required}
|
||||
<span class="text-error">*</span>
|
||||
{/if}
|
||||
{#if helpUrl}
|
||||
<div class="tooltip tooltip-right" data-tip="Clique para acessar o link">
|
||||
<a
|
||||
href={helpUrl ?? '/'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary hover:text-primary-focus transition-colors"
|
||||
aria-label="Acessar link"
|
||||
>
|
||||
<ExternalLink class="h-4 w-4" strokeWidth={2} />
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="file-upload-input"
|
||||
type="file"
|
||||
use:setFileInput
|
||||
onchange={handleFileSelect}
|
||||
accept=".pdf,.jpg,.jpeg,.png"
|
||||
class="hidden"
|
||||
{disabled}
|
||||
/>
|
||||
|
||||
{#if value || fileName}
|
||||
<div class="border-base-300 bg-base-100 flex items-center gap-2 rounded-lg border p-3">
|
||||
<!-- Preview -->
|
||||
<div class="shrink-0">
|
||||
{#if previewUrl}
|
||||
<img src={previewUrl} alt="Preview" class="h-12 w-12 rounded object-cover" />
|
||||
{:else if fileType === 'application/pdf' || fileName.endsWith('.pdf')}
|
||||
<div class="bg-error/10 flex h-12 w-12 items-center justify-center rounded">
|
||||
<FileText class="text-error h-6 w-6" strokeWidth={2} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-success/10 flex h-12 w-12 items-center justify-center rounded">
|
||||
<FileIcon class="text-success h-6 w-6" strokeWidth={2} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- File info -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium">
|
||||
{fileName || 'Arquivo anexado'}
|
||||
</p>
|
||||
<p class="text-base-content/60 text-xs">
|
||||
{#if uploading}
|
||||
Carregando...
|
||||
{:else}
|
||||
Enviado com sucesso
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2">
|
||||
{#if fileUrl}
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleView}
|
||||
class="btn btn-sm btn-ghost text-info"
|
||||
disabled={uploading || disabled}
|
||||
title="Visualizar arquivo"
|
||||
>
|
||||
<Eye class="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={openFileDialog}
|
||||
class="btn btn-sm btn-ghost"
|
||||
disabled={uploading || disabled}
|
||||
title="Substituir arquivo"
|
||||
>
|
||||
<RefreshCw class="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleRemove}
|
||||
class="btn btn-sm btn-ghost text-error"
|
||||
disabled={uploading || disabled}
|
||||
title="Remover arquivo"
|
||||
>
|
||||
<Trash2 class="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={openFileDialog}
|
||||
class="btn btn-outline btn-block justify-start gap-2"
|
||||
disabled={uploading || disabled}
|
||||
>
|
||||
{#if uploading}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Carregando...
|
||||
{:else}
|
||||
<Upload class="h-5 w-5" strokeWidth={2} />
|
||||
Selecionar arquivo (PDF ou imagem, máx. 10MB)
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-error">{error}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user