Show full QR codes with copy button in GroupDetailPage

This commit is contained in:
steinhelge
2025-11-23 22:09:11 +01:00
parent 646ab0aef1
commit 587847e7ed
2 changed files with 31 additions and 4 deletions
+13
View File
@@ -19,6 +19,17 @@ builder.Services.AddScoped<IProductService, ProductService>();
builder.Services.AddScoped<IQrCodeService, QrCodeService>(); builder.Services.AddScoped<IQrCodeService, QrCodeService>();
builder.Services.AddScoped<ITransactionService, TransactionService>(); builder.Services.AddScoped<ITransactionService, TransactionService>();
// Add CORS
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowFrontend", policy =>
{
policy.WithOrigins("http://localhost:5173")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
var app = builder.Build(); var app = builder.Build();
@@ -39,6 +50,8 @@ if (app.Environment.IsDevelopment())
app.UseHttpsRedirection(); app.UseHttpsRedirection();
app.UseCors("AllowFrontend");
app.UseAuthorization(); app.UseAuthorization();
app.MapControllers(); app.MapControllers();
@@ -76,13 +76,27 @@ export default function GroupDetailPage() {
<Card className="shadow-sm h-100"> <Card className="shadow-sm h-100">
<Card.Body> <Card.Body>
<div className="d-flex justify-content-between align-items-start mb-3"> <div className="d-flex justify-content-between align-items-start mb-3">
<div> <div className="flex-grow-1">
<h5 className="mb-1">{person.name}</h5> <h5 className="mb-1">{person.name}</h5>
{person.email && <small className="text-muted d-block">{person.email}</small>} {person.email && <small className="text-muted d-block">{person.email}</small>}
{person.phoneNumber && <small className="text-muted d-block">{person.phoneNumber}</small>} {person.phoneNumber && <small className="text-muted d-block">{person.phoneNumber}</small>}
<small className="font-monospace text-muted d-block mt-2"> <div className="mt-2 p-2 bg-light rounded">
QR: {person.qrCode.substring(0, 8)}... <small className="text-muted d-block">QR Code:</small>
</small> <code className="d-block text-break" style={{ fontSize: '0.75rem' }}>
{person.qrCode}
</code>
<Button
variant="outline-primary"
size="sm"
className="mt-2 w-100"
onClick={() => {
navigator.clipboard.writeText(person.qrCode);
alert('QR code copied to clipboard!');
}}
>
Copy QR Code
</Button>
</div>
</div> </div>
<Button <Button
variant={selectedPerson?.id === person.id ? 'secondary' : 'outline-primary'} variant={selectedPerson?.id === person.id ? 'secondary' : 'outline-primary'}