device.view.tsx

import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GridLayout } from '@layout/grid.layout/grid.layout';
import UpdateIndicator from '@layout/grid.layout/update-inidicator.layout/update-indicator.layout';
import { Category, CategoryType } from '@shared/types/category.type';
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 { DeviceViewTabValues, DeviceViewTabs } 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'>
            <GridLayout>
                <>
                    <div key="device-list">
                        <Container className='c-box hoverable h-100'>
                            <UpdateIndicator
                                category={Category.DEVICE as CategoryType}
                                updateInterval={15000}
                            />
                            <FontAwesomeIcon icon={faGripVertical} className="drag-handle" />
                            <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>
                    </div>

                    <div key="device-details">
                        <Container className='c-box hoverable h-100'>
                            <UpdateIndicator
                                category={Category.TAB as CategoryType}
                                updateInterval={5000}
                            />
                            <FontAwesomeIcon icon={faGripVertical} className="drag-handle" />
                            <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>
                    </div>
                </>
            </GridLayout>
        </div>
    );
};

export default DeviceView;