TicketEditForm.js 5.34 KB
Newer Older
1
2
3
4
5
6
7
import { useState, useEffect } from "react";
import cinemaApi from "../../apis/cinema.api.js";
import catchErrors from "../../utils/catchErrors.js";
import styles from "./admin.module.scss";

const INIT_TICKETFEE = {
    theaterType: "",
Kim, Subin's avatar
Kim, Subin committed
8
9
10
11
12
13
14
15
    weekdays: "",
    weekend: "",
    morning: "",
    day: "",
    night: "",
    youth: "",
    adult: "",
    senior: "",
16
17
18
    defaultPrice: 5000
}

Kim, Subin's avatar
Kim, Subin committed
19
const TicketEditForm = ({ editFee, formRef }) => {
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    const [ticketFee, setTicketFee] = useState(INIT_TICKETFEE)
    const [error, setError] = useState("")

    useEffect(() => {
        setTicketFee({ ...ticketFee, ...editFee })
    }, [editFee])

    function handleChange(e) {
        const { name, value } = e.target
        setTicketFee({ ...ticketFee, [name]: value })
    }

    async function handleSubmit(e) {
        e.preventDefault()
        try {
            setError("")
            await cinemaApi.editTicketFee(ticketFee)
            alert("해당 관람료 정보 등록이 성공적으로 완료되었습니다.")
            window.location.reload()
        } catch (error) {
            catchErrors(error, setError)
        }
    }

    return (
Kim, Subin's avatar
Kim, Subin committed
45
46
47
48
        <form ref={formRef} onSubmit={handleSubmit}>
            <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
                <label for="theaterType" className="col-md-auto col-form-label text-center text-md-start">상영관 종류</label>
                <div className="col-md-4 col-lg-3 mx-md-2">
49
50
                    <input className={`form-control ${styles.shadowNone}`} type="text" id="theaterType" name="theaterType" value={ticketFee.theaterType} onChange={handleChange} />
                </div>
Kim, Subin's avatar
Kim, Subin committed
51
52
                <label for="defaultPrice" className="col-md-auto col-form-label text-center text-md-start">기본 가격</label>
                <div className="col-md-3 col-lg-2 mx-md-2">
53
54
55
                    <input className={`form-control ${styles.shadowNone}`} type="number" id="defaultPrice" name="defaultPrice" value={ticketFee.defaultPrice} onChange={handleChange} />
                </div>
            </div>
Kim, Subin's avatar
Kim, Subin committed
56
57
58
            <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
                <label for="weekdays" className="col-md-1 col-form-label text-center text-md-start">주중</label>
                <div className="col-md-3 col-lg-2">
59
60
                    <input className={`form-control ${styles.shadowNone}`} type="number" id="weekdays" name="weekdays" value={ticketFee.weekdays} onChange={handleChange} />
                </div>
Kim, Subin's avatar
Kim, Subin committed
61
62
                <label for="weekend" className="col-md-1 col-form-label text-center">주말</label>
                <div className="col-md-3 col-lg-2">
63
64
65
                    <input className={`form-control ${styles.shadowNone}`} type="number" id="weekend" name="weekend" value={ticketFee.weekend} onChange={handleChange} />
                </div>
            </div>
Kim, Subin's avatar
Kim, Subin committed
66
67
68
            <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
                <label for="morning" className="col-md-1 col-form-label text-center text-md-start">조조</label>
                <div className="col-md-3 col-lg-2">
69
70
                    <input className={`form-control ${styles.shadowNone}`} type="number" id="morning" name="morning" value={ticketFee.morning} onChange={handleChange} />
                </div>
Kim, Subin's avatar
Kim, Subin committed
71
72
                <label for="day" className="col-md-1 col-form-label text-center">일반</label>
                <div className="col-md-3 col-lg-2">
73
74
                    <input className={`form-control ${styles.shadowNone}`} type="number" id="day" name="day" value={ticketFee.day} onChange={handleChange} />
                </div>
Kim, Subin's avatar
Kim, Subin committed
75
76
                <label for="night" className="col-md-1 col-form-label text-center">심야</label>
                <div className="col-md-3 col-lg-2">
77
78
79
                    <input className={`form-control ${styles.shadowNone}`} type="number" id="night" name="night" value={ticketFee.night} onChange={handleChange} />
                </div>
            </div>
Kim, Subin's avatar
Kim, Subin committed
80
81
82
            <div className="d-flex row row-cols-2 flex-wrap flex-lg-nowrap mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
                <label for="youth" className="col-md-1 col-form-label text-center text-md-start">청소년</label>
                <div className="col-md-3 col-lg-2">
83
84
                    <input className={`form-control ${styles.shadowNone}`} type="number" id="youth" name="youth" value={ticketFee.youth} onChange={handleChange} />
                </div>
Kim, Subin's avatar
Kim, Subin committed
85
86
                <label for="adult" className="col-md-1 col-form-label text-center">일반</label>
                <div className="col-md-3 col-lg-2">
87
88
                    <input className={`form-control ${styles.shadowNone}`} type="number" id="adult" name="adult" value={ticketFee.adult} onChange={handleChange} />
                </div>
Kim, Subin's avatar
Kim, Subin committed
89
90
                <label for="senior" className="col-md-1 col-form-label text-center">경로</label>
                <div className="col-md-3 col-lg-2">
91
92
                    <input className={`form-control ${styles.shadowNone}`} type="number" id="senior" name="senior" value={ticketFee.senior} onChange={handleChange} />
                </div>
Kim, Subin's avatar
Kim, Subin committed
93
94
                <div className="col-12 col-md-2 col-lg-1 ms-lg-auto mt-md-2 mt-lg-0">
                    <button type="submit" className={`btn btn-dark w-100 ${styles.customBtn}`}>추가</button>
95
96
97
98
99
100
101
                </div>
            </div>
        </form>
    )
}

export default TicketEditForm