Files

alexpolo1 4a372d2e28 clean up

2025-10-30 18:28:58 +00:00

6.5 KiB

Raw Blame History

Material Redigering - Ny Funktionalitet ✏️

Oversigt

Nu er det muligt at redigere eksisterende materialer i projektet, ikke kun slette dem. Funktionaliteten giver bedre fleksibilitet i materialestyring under projektflowet.

Nye Funktioner

🔄 Rediger Materialer

Rediger knap (✏️): Klik for at redigere et eksisterende materiale
Inline redigering: Redigering sker direkte i materialelisten
Gem/Annuller: Klar gem eller annuller funktionalitet

📝 Redigerbare Felter

Antal: Ændr mængden af materialet
Enhedspris: Opdater prisen per enhed
Leverandør: Tilføj eller ændr leverandør
Beskrivelse: Opdater materialebeskrivelse

💾 Real-time Opdatering

Auto-beregning: Total pris opdateres automatisk
Live opdatering: Ændringer vises øjeblikkeligt
Database persistence: Alle ændringer gemmes permanent

Hvordan Det Virker

Backend API (Ny Endpoint)

PUT /api/customer-projects/:projectId/materials/:materialId

{
  "quantity": 2.5,
  "unitPrice": 350.00,
  "supplier": "Ny Leverandør A/S",
  "description": "Opdateret beskrivelse"
}

Response:

{
  "success": true,
  "material": {
    "id": 34,
    "project_id": 31,
    "material_name": "B7 tagplader",
    "quantity": "2.500",
    "unit_price": "350.00",
    "total_price": "875.00",
    "supplier": "Ny Leverandør A/S",
    "description": "Opdateret beskrivelse"
  },
  "message": "Materiale opdateret succesfuldt"
}

Frontend Funktionalitet

Materiale Visning (Normal Mode)

┌─────────────────────────────────────────────────────┐
│ B7 tagplader                               875 kr   │
│ 2.5 m² × 350 kr                           ✏️  🗑️    │
│ Leverandør: Ny Leverandør A/S                      │
│ Opdateret beskrivelse                               │
└─────────────────────────────────────────────────────┘

Redigerings Mode

┌─────────────────────────────────────────────────────┐
│ B7 tagplader                                        │
│ Antal: [2.5] m²    Enhedspris: [350] kr            │
│ Leverandør: [Ny Leverandør A/S____________]        │
│ Beskrivelse: [Opdateret beskrivelse_______]        │
│                                   ✅ Gem  ❌ Annuller │
└─────────────────────────────────────────────────────┘

Database Opdateringer

SQL Operationer

-- Update material in project
UPDATE project_materials 
SET quantity = ?, 
    unit_price = ?, 
    total_price = ?, 
    supplier = ?, 
    description = ?, 
    updated_at = NOW()
WHERE project_id = ? AND id = ?

Automatisk Beregning

Total Pris: quantity × unit_price
Opdateringsdato: Automatisk updated_at timestamp
Validering: Påkrævet antal og enhedspris

UI/UX Design

🎨 Visuelt Design

Gul baggrund: Redigeringsformular fremhæves med gul baggrund
Struktureret layout: Klare felter og labels
Responsive: Fungerer på mobile enheder
Intuitive ikoner: ✏️ for rediger, ✅ for gem, ❌ for annuller

🔄 User Flow

Se materialer: Liste med eksisterende materialer
Klik rediger (✏️): Skift til redigeringsmode
Ændr værdier: Opdater felter efter behov
Gem ændringer: Klik ✅ for at gemme
Se opdateret: Materiale vises med nye værdier

⌨️ Validering

Påkrævet felter: Antal og enhedspris skal udfyldes
Talvalidering: Kun gyldige tal i antal og pris felter
Real-time feedback: Gem knap deaktiveres hvis påkrævet data mangler

CSS Klasser

Nye Styling Klasser

.material-edit-form     /* Hovedcontainer for redigeringsform */
.edit-row              /* Række i redigeringsform */
.edit-inputs           /* Container for input felter */
.input-group           /* Gruppe af label + input + unit */
.edit-actions          /* Container for gem/annuller knapper */
.save-btn              /* Gem knap styling */
.cancel-btn            /* Annuller knap styling */
.edit-btn              /* Rediger knap styling */

Farver og Styling

Edit form baggrund: #fff3cd (lys gul)
Border: #ffc107 (gul)
Gem knap: #28a745 (grøn)
Annuller knap: #6c757d (grå)
Rediger knap: #007bff (blå)

Fejlhåndtering

Validering

Tom antal: "Antal er påkrævet"
Tom pris: "Enhedspris er påkrævet"
Ugyldig data: "Indtast gyldige tal"

Network Fejl

Forbindelse: "Kan ikke forbinde til serveren"
Server fejl: "Fejl ved opdatering af materiale"
Database fejl: "Materiale ikke fundet"

User Feedback

Success: "Materiale opdateret succesfuldt"
Error: Tydelige fejlmeddelelser
Loading: Gem knap viser loading state

Fordele

🎯 Brugeroplevelse

Hurtige ændringer: Ingen behov for at slette og tilføje igen
Bevar historie: Materialer bevares med opdateret info
Fejl korrektion: Let at rette tastefejl eller pris ændringer

📊 Projektstyring

Fleksibilitet: Nemt at justere materialer under planlægning
Nøjagtighed: Bedre kontrol over materialelister
Tidsbesparelse: Hurtigere workflow for korrektioner

💰 Økonomisk Kontrol

Pris opdateringer: Let at justere priser ved markedsændringer
Leverandør skift: Hurtig ændring af leverandører
Mængde justering: Præcis kontrol over materialeantal

Testing

Test Scenario

Åbn projekt med materialer
Klik rediger (✏️) på et materiale
Ændr antal fra 1 til 2.5
Ændr pris fra 285 til 350
Tilføj leverandør "Test Leverandør"
Tilføj beskrivelse "Test beskrivelse"
Klik gem (✅)
Verificer opdateret materiale

Forventet Resultat

Total pris: 2.5 × 350 = 875 kr
Leverandør: "Test Leverandør" vises
Beskrivelse: "Test beskrivelse" vises
Success besked: "Materiale opdateret succesfuldt"

Status: ✅ Implementeret og klar til brug

Nu kan du både tilføje, redigere og slette materialer i projektet for komplet materialestyring!

6.5 KiB Raw Blame History Unescape Escape