refactor: remove unused inputStyle and clean up EditProductForm component

2026-04-17 18:25:10 +02:00
parent 11de0191be
commit 8a86b0aebd
1 changed files with 0 additions and 170 deletions
@@ -233,173 +233,3 @@ export default function EditProductForm({ product }: Props) {
    </div>
  );
 }
 const inputStyle: React.CSSProperties = {
  padding: '0.5rem 0.75rem',
  border: '1px solid #ddd',
  borderRadius: '4px',
  fontSize: '1rem',
  width: '100%',
  boxSizing: 'border-box',
 };
 export default function EditProductForm({ product }: Props) {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setSuccess(false);
    const formData = new FormData(e.currentTarget);
    startTransition(async () => {
      try {
        await updateProduct(formData);
        setSuccess(true);
        setIsOpen(false);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Okänt fel');
      }
    });
  }
  function handleDelete() {
    if (!confirm(`Ta bort "${product.name}"? Detta är en mjukradering och kan återställas.`)) return;
    setError(null);
    setSuccess(false);
    startTransition(async () => {
      try {
        await deleteProduct(product.id);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Okänt fel');
      }
    });
  }
  return (
    <div>
      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
        <button
          type="button"
          onClick={() => { setIsOpen(!isOpen); setError(null); setSuccess(false); }}
          style={{
            padding: '0.4rem 1rem',
            border: '1px solid #0070f3',
            borderRadius: '4px',
            background: isOpen ? '#0070f3' : '#fff',
            color: isOpen ? '#fff' : '#0070f3',
            cursor: 'pointer',
            fontSize: '0.9rem',
            fontWeight: 600,
          }}
        >
          {isOpen ? 'Stäng' : 'Redigera'}
        </button>
        {success && <span style={{ color: 'green', fontSize: '0.9rem' }}>✓ Sparat!</span>}
      </div>
      {error && <div style={{ color: 'crimson', marginTop: '0.5rem', fontSize: '0.9rem' }}>{error}</div>}
      {isOpen && (
        <form
          onSubmit={handleSubmit}
          style={{ marginTop: '0.75rem', display: 'grid', gap: '0.75rem', maxWidth: '480px' }}
        >
          <input type="hidden" name="id" value={product.id} />
          <label style={{ display: 'grid', gap: '0.25rem', fontSize: '0.9rem' }}>
            <span style={{ fontWeight: 600 }}>Namn</span>
            <input
              name="name"
              type="text"
              defaultValue={product.name}
              required
              style={inputStyle}
            />
          </label>
          <label style={{ display: 'grid', gap: '0.25rem', fontSize: '0.9rem' }}>
            <span style={{ fontWeight: 600 }}>Canonical name</span>
            <input
              name="canonicalName"
              type="text"
              defaultValue={product.canonicalName ?? ''}
              style={inputStyle}
              placeholder="Lämna tomt för att använda namn"
            />
            <span style={{ color: '#666', fontSize: '0.8rem' }}>
              Används för att gruppera liknande produkter (t.ex. "Kyckling" för alla kycklingvarianter)
            </span>
          </label>
          <label style={{ display: 'grid', gap: '0.25rem', fontSize: '0.9rem' }}>
            <span style={{ fontWeight: 600 }}>Kategori</span>
            <select
              name="category"
              defaultValue={product.category ?? ''}
              style={inputStyle}
            >
              <option value="">— Ingen kategori —</option>
              <option value="Kött & Fisk">Kött &amp; Fisk</option>
              <option value="Mejeri & Ägg">Mejeri &amp; Ägg</option>
              <option value="Grönsaker & Frukt">Grönsaker &amp; Frukt</option>
              <option value="Torrvaror & Skafferi">Torrvaror &amp; Skafferi</option>
              <option value="Bröd & Bakverk">Bröd &amp; Bakverk</option>
              <option value="Kryddor & Smaksättning">Kryddor &amp; Smaksättning</option>
              <option value="Dryck">Dryck</option>
              <option value="Frysta varor">Frysta varor</option>
              <option value="Konserver">Konserver</option>
              <option value="Övrigt">Övrigt</option>
            </select>
          </label>
          <div style={{ display: 'grid', gap: '0.25rem', fontSize: '0.85rem', color: '#888' }}>
            <span><strong style={{ color: '#555' }}>Normaliserat namn:</strong> {product.normalizedName}</span>
            <span><strong style={{ color: '#555' }}>Aktiv:</strong> {product.isActive ? 'Ja' : 'Nej'}</span>
          </div>
          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
            <button
              type="submit"
              disabled={isPending}
              style={{
                padding: '0.6rem 1.25rem',
                background: '#0070f3',
                color: '#fff',
                border: 'none',
                borderRadius: '4px',
                cursor: isPending ? 'not-allowed' : 'pointer',
                fontWeight: 600,
                fontSize: '0.9rem',
                opacity: isPending ? 0.7 : 1,
              }}
            >
              {isPending ? 'Sparar...' : 'Spara'}
            </button>
            <button
              type="button"
              onClick={handleDelete}
              disabled={isPending}
              style={{
                padding: '0.6rem 1.25rem',
                background: '#fff',
                color: '#c00',
                border: '1px solid #c00',
                borderRadius: '4px',
                cursor: isPending ? 'not-allowed' : 'pointer',
                fontWeight: 600,
                fontSize: '0.9rem',
                opacity: isPending ? 0.7 : 1,
              }}
            >
              Ta bort (mjukradering)
            </button>
          </div>
        </form>
      )}
    </div>
  );
 }