device.view.tsx

import { faCircleInfo, faPlus, faServer, faSliders } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GridLayout } from '@layout/grid.layout/grid.layout';
import { GridBox } from '@shared/components/box/gridBox.view';
import { JsonViewer } from '@shared/components/json_viewer/view/json_viewer.view';
import { useRef } from 'react';
import { Button, Col, Form, Row } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { useDeviceViewModel } from '../view_model/device.viewmodel';
import './device.scss';
import { DeviceList } from './device.view.list';
import { DeviceListCollapsable } from './subcomponent/device.view.list-detail';

const DeviceView = () => {
    const { t } = useTranslation('common');
    const searchRef = useRef<HTMLInputElement>(null);
    const { jsonYang } = useDeviceViewModel();

    return (
        <GridLayout>
            <>
                <div key="device-list">
                    <GridBox title={t("device.box.list.title")} title_icon={faServer}>
                        <Row className="mb-3 align-items-center">
                            <Col xs={12} md={6} lg={8}>
                                <Form.Group controlId='device.search'>
                                    <Form.Control type="text" placeholder={t('device.search.placeholder')} ref={searchRef} />
                                </Form.Group>
                            </Col>
                            <Col xs={12} md={6} lg={4} className='mt-3 mt-md-0 text-md-end'>
                                <Button variant='primary::button' className='btn-primary-button'>
                                    <FontAwesomeIcon icon={faPlus} className='me-2' />
                                    {t('device.add_device_button')}
                                </Button>
                            </Col>
                        </Row>
                        <Row>
                            <Col xs={12} className='h-auto'>
                                <DeviceList searchRef={searchRef} />
                            </Col>
                        </Row>
                    </GridBox>
                </div>

                <div key="device-metadata">
                    <GridBox title={t("device.box.information.title")} title_icon={faCircleInfo}>
                        <Row>
                            <Col xs={12} >
                                <DeviceListCollapsable search={searchRef.current?.value || ''} />
                            </Col>
                        </Row>
                    </GridBox>
                </div>

                <div key="device-details">
                    <GridBox title={t('device.box.configuration.title')} title_icon={faSliders}>
                        <Row>
                            <Col xs={12}>
                                {jsonYang && <JsonViewer json={jsonYang} />}
                            </Col>
                        </Row>
                    </GridBox>
                </div>
            </>
        </GridLayout>
    );
};

export default DeviceView;