device.view.tsx

import { useRef } from 'react';
import { Button, Col, Container, Form, Nav, NavLink, Row } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { useDeviceViewModel } from '../view_model/device.viewmodel';
import './device.scss';
import { DeviceViewTable } from './device.view.table';
import { DeviceViewTabs, DeviceViewTabValues } from './device.view.tabs';

const DeviceView = () => {
    const { t } = useTranslation('common');
    const searchRef = useRef<HTMLInputElement>(null);
    const { activeTab, setActiveTab, handleActiveTabLink } = useDeviceViewModel();

    return (
        <div className='m-4 pt-4'>
            <Container fluid>
                <Row>
                    <Col lg={5} sm={12}>
                        <Container className='bg-white c-box'>
                            <Row>
                                <Col sm={12} className='mt-4'><h3 className='text-black-50'>{t('device.title')}</h3></Col>
                            </Row>

                            <Row className='align-items-center'>
                                <Col xs={12} sm={6}>
                                    <Form.Group controlId='device.search' className='p-0 mx-1 pt-2'>
                                        <Form.Control type="text" placeholder={t('device.search.placeholder')} ref={searchRef} />
                                    </Form.Group>
                                </Col>
                                <Col xs={12} sm={6} className='pt-2'>
                                    <Button variant='primary' className='w-100 my-auto'>{t('device.add_device_button')}</Button>
                                </Col>
                            </Row>

                            <Row className='align-items-start'>
                                <Col sm={12} className='pt-2'>
                                    {DeviceViewTable(searchRef)}
                                </Col>
                            </Row>
                        </Container>
                    </Col>
                    <Col xs={12} lg={7} className='mt-5 mt-lg-0'>
                        <Container className='bg-white c-box'>
                            <Row>
                                <Col xs={12} className='mt-4'>
                                    <Nav className='justify-content-around'>
                                        <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
                                        <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
                                    </Nav>
                                </Col>
                            </Row>

                            <Row className='align-items-start'>
                                <Col xs={12}>
                                    {DeviceViewTabs(activeTab)}
                                </Col>
                            </Row>
                        </Container>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}

export default DeviceView