Hugging Face's logo

Spaces:
pbl6-cats
/
PBL6-informative-system
Sleeping

App Files Community
PBL6-informative-system
File size: 5,194 Bytes 
0d37b12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
import { Container, Col, Row, Button, Modal } from 'react-bootstrap';
import StoreItem from '../../molecules/StoreItem';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import DataStorage from '../../organisms/DataStorage';
import AdminTemplate from '../../templates/AdminTemplate';

export default function AdminBranchPage() {

    const [stores, setStores] = useState([]); // Lưu danh sách chi nhánh
    const [loading, setLoading] = useState(true); // Trạng thái tải dữ liệu
    const [selectedStore, setSelectedStore] = useState(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const navigate = useNavigate();

    useEffect(() => {
        if (!DataStorage.get('isLoggedInAdmin')) {
            navigate('/admin-login');
        }
    }, [navigate]);

    useEffect(() => {
        // Gọi API lấy danh sách chi nhánh
        const fetchBranches = async () => {
            try {
                const response = await axios.get(process.env.REACT_APP_API_URL + '/branchs'); // Thay 'API_ENDPOINT' bằng URL của API
                setStores(response.data); // Lưu dữ liệu vào state
                setLoading(false); // Đặt loading thành false khi hoàn tất
                CacheStorage.set('stores', JSON.stringify(Object(response.data)));
            } catch (error) {
                console.error('Error fetching branches:', error);
                setLoading(false); // Đặt loading thành false nếu lỗi
            }
        };
        fetchBranches();
    }, []);

    const handleShowDeleteModal = (feedId) => {
        setSelectedStore(feedId);
        setShowDeleteModal(true);
    };

    // Đóng modal
    const handleCloseDeleteModal = () => {
        setShowDeleteModal(false);
        setSelectedStore(null);
    };

    function truncateText(text, maxLength = 120) {
        if (text.length <= maxLength) {
            return text;
        }
        return text.slice(0, maxLength) + '...Xem thêm';
    }

    let storesContent;

    if (loading) {
        storesContent = (<p>Đang tải danh sách chi nhánh...</p>); // Hiển thị thông báo khi đang tải dữ liệu
    } else {
        storesContent = (<Col xs={12} md={9}>
            <Container fluid>
                <Row xs={1} md={2} xl={3} className="g-4">
                    {Array.from(stores).map((store, idx) => (
                        <Col key={idx}>
                            <StoreItem storeName={store.name}
                                address={truncateText(store.location)}
                                imageSrc={store.image_url}
                                deleteable={true}
                                delButtonCallback={(e) => {
                                    e.preventDefault();
                                    handleShowDeleteModal(store.id);
                                }}
                                storeHref={`/admin-branchs?id=${store.id}`}
                            >
                            </StoreItem>
                        </Col>
                    ))}
                </Row>
            </Container>
        </Col>)
    }

    const confirmDelete = async () => {
        if (selectedStore) {
            axios.delete(process.env.REACT_APP_API_URL + `/branchs/${selectedStore}`)
                .then((response) => {
                    handleCloseDeleteModal(); // Đóng modal sau khi xóa
                    window.location.reload(); // Load lại trang
                })
                .catch((error) => console.error("Xóa bài đăng thất bại:", error))
        }
    };

    return (
        <AdminTemplate content={
            (<Container fluid className="text-center justify-content-center align-items-center my-5" style={{ maxWidth: "90%" }}>
                {/* Modal xác nhận xóa */}
                <Modal show={showDeleteModal} onHide={handleCloseDeleteModal}>
                    <Modal.Header closeButton>
                        <Modal.Title>Xác nhận xóa</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>Bạn có chắc chắn muốn xóa chi nhánh này không?</Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={handleCloseDeleteModal}>
                            Hủy
                        </Button>
                        <Button variant="danger" onClick={confirmDelete}>
                            Xóa
                        </Button>
                    </Modal.Footer>
                </Modal>

                <h1 className='mb-5'>Danh sách các chi nhánh</h1>
                <Row className='my-5 justify-content-center align-items-center'>
                    <Col xs={8} md={4} lg={2}>
                        <Button as='a' href={`/admin-branchs`}>
                            Bổ sung chi nhánh mới
                        </Button>
                    </Col>
                </Row>
                <Row className="align-items-center">
                    {storesContent}
                </Row>
            </Container>)
        } />
    );
}