99 lines
3.5 KiB
JavaScript
99 lines
3.5 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { AuthService, CenterPhoneService } from "../../services";
|
|
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
|
|
|
|
const UpdateCenterPhone = () => {
|
|
const navigate = useNavigate();
|
|
const [phoneTitle, setPhoneTitle] = useState('');
|
|
const [phoneNumber, setPhoneNumber] = useState('');
|
|
const [activated, setActivated] = useState(false);
|
|
const [currentPhone, setCurrentPhone] = useState(undefined);
|
|
const urlParams = useParams();
|
|
|
|
useEffect(() => {
|
|
if (!AuthService.canAddOrEditRoutes() && !AuthService.canViewRoutes()&&!AuthService.canAccessLegacySystem()) {
|
|
window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an Dispatcher or admin account to login.')
|
|
AuthService.logout();
|
|
navigate(`/login`);
|
|
}
|
|
if (!currentPhone) {
|
|
CenterPhoneService.getCenterPhone(urlParams.id).then(data => setCurrentPhone(data.data))
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (currentPhone) {
|
|
setPhoneNumber(currentPhone.phone_number);
|
|
setPhoneTitle(currentPhone.phone_title);
|
|
setActivated(currentPhone.activated);
|
|
}
|
|
|
|
}, [currentPhone])
|
|
|
|
const redirectTo = () => {
|
|
navigate('/center-phones/list')
|
|
}
|
|
|
|
const savePhone = () => {
|
|
const data = {
|
|
phone_title: phoneTitle,
|
|
phone_number: phoneNumber,
|
|
activated: activated
|
|
};
|
|
CenterPhoneService.updateCenterPhone(urlParams.id, data).then(() => redirectTo())
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="list row mb-4">
|
|
<Breadcrumb>
|
|
<Breadcrumb.Item>General</Breadcrumb.Item>
|
|
<Breadcrumb.Item active>
|
|
Center Phone
|
|
</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<div className="col-md-12 text-primary">
|
|
<h4>
|
|
Update Center Phone <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="app-main-content-list-container">
|
|
<div className="app-main-content-list-func-container">
|
|
<Tabs defaultActiveKey="updatePhone" id="update-phone-tab">
|
|
<Tab eventKey="updatePhone" title="Update Center Phone">
|
|
<div className="app-main-content-fields-section">
|
|
<div className="me-4">
|
|
<div className="field-label">Phone Title
|
|
<span className="required">*</span>
|
|
</div>
|
|
<input type="text" value={phoneTitle || ''} onChange={e => setPhoneTitle(e.target.value)}/>
|
|
</div>
|
|
<div className="me-4">
|
|
<div className="field-label">Phone Number
|
|
<span className="required">*</span>
|
|
</div>
|
|
<input type="text" value={phoneNumber || ''} onChange={e => setPhoneNumber(e.target.value)}/>
|
|
</div>
|
|
<div className="me-4">
|
|
<div className="field-label">Activated
|
|
</div>
|
|
<input type="checkbox" value={activated} checked={activated === true} onChange={e => setActivated(!activated)}/>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-12 col-sm-12 col-xs-12">
|
|
<button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
|
|
<button className="btn btn-primary btn-sm float-right" onClick={() => savePhone()}> Save </button>
|
|
|
|
</div>
|
|
</Tab>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UpdateCenterPhone; |