Revize 6d10fe14

Refactored directory structure

Refactored directory structure and changed structure of layouts of the annotation screen

webapp/components/annotation/annotationPanel.tsx

@@ -2 +2 @@
  * Creates a panel in the annotation screen that contains a list of annotations.
  * @returns Panel with a list of annotations.
  */
-function AnnotationPanel() {
+export function AnnotationPanel() {
     return (
         <div>
             <p>Panel with a list of annotations</p>
         </div>
     );
 }
-
-export default AnnotationPanel;

webapp/components/annotation/documentAnnotationView.tsx

@@ -2 +2 @@
  * Creates an annotation view of a document.
  * @returns The annotation view.
  */
-function DocumentAnnotationView() {
+export function DocumentAnnotationView() {
     return (
         <div>
             <p>Main view with a rendered document</p>
         </div>
     );
 }
-
-export default DocumentAnnotationView;

webapp/components/annotation/tagPanel.tsx

@@ -2 +2 @@
  * Creates a panel in the annotation screen that contains a list of tag.
  * @returns Panel with a list of tags.
  */
-function TagPanel() {
+export function TagPanel() {
     return (
         <div>
             <p>Panel with a list of tags</p>
         </div>
     );
 }
-
-export default TagPanel;

webapp/components/modals/addDocument.tsx

@@ -9 +9 @@
  * Creates a modal window that loads documents to the app.
  * @returns The modal window.
  */
-function AddDocument() {
+export function AddDocument() {
     const [visible, setVisible] = useState(true);
 
     /**
@@ -86 +86 @@
         </Modal>
     );
 }
-
-export default AddDocument;

webapp/components/models/layoutProps.tsx

@@ -1 @@
-import React from 'react';
-
-/**
- * Props prepared for a react stucture that is passed to a layout.
- */
-export type LayoutProps = {
-    children: React.ReactNode;
-};

webapp/components/navigation/adminNavBar.tsx

@@ +1 @@
+/**
+ * Creates a navigation bar of an admin.
+ * @returns Navigation bar of an admin.
+ */
+export function AdminNavBar() {
+    return (
+        <div>
+            <p>Navigation bar of an admin.</p>
+        </div>
+    );
+}

webapp/components/navigation/userNavBar.tsx

@@ -2 +2 @@
  * Creates a navigation bar of a normal user (annotator).
  * @returns Navigation bar of a user.
  */
-function UserNavBar() {
+export function UserNavBar() {
     return (
         <div>
             <p>Navigation bar of a normal user.</p>
         </div>
     );
 }
-
-export default UserNavBar;

webapp/components/types/layoutProps.tsx

@@ +1 @@
+import React from 'react';
+
+/**
+ * Props prepared for a react stucture that is passed to a layout.
+ */
+export type LayoutProps = {
+    children: React.ReactNode;
+};

webapp/layouts/annotationLayout.tsx

@@ -1 @@
-import { Layout } from 'antd';
-import AnnotationPanel from '../components/annotation/annotationPanel';
-import DocumentAnnotationView from '../components/annotation/documentAnnotationView';
-import TagPanel from '../components/annotation/tagPanel';
-import 'antd/dist/antd.css';
-import styles from '/styles/annotation.module.scss';
-import UserNavBar from '../components/navigation/userNavBar';
-
-const { Header, Content, Footer, Sider } = Layout;
-
-/**
- * Creates a layout of a document annotation screen. It contains a panel with a list of tags and a panel with a list of annotations.
- * @returns Annotation layout.
- */
-function AnnotationLayout() {
-    return (
-        <Layout>
-            <Header>
-                <UserNavBar />
-            </Header>
-            <Layout hasSider>
-                <Sider className={styles.leftSidePanel}>
-                    <TagPanel />
-                </Sider>
-                <Content className={styles.mainView}>
-                    <DocumentAnnotationView />
-                </Content>
-                <Sider className={styles.rightSidePanel}>
-                    <AnnotationPanel />
-                </Sider>
-            </Layout>
-            <Footer></Footer>
-        </Layout>
-    );
-}
-
-export default AnnotationLayout;

webapp/layouts/loginLayout.tsx

@@ -2 +2 @@
 import Image from 'next/image';
 import styles from '/styles/login.module.scss';
 import { Col, Container, Row, Stack } from 'react-bootstrap';
-import { LayoutProps } from 'antd';
+import { LayoutProps } from '../components/models/layoutProps';
 
 /**
  * Creates layout of a login screen.

webapp/layouts/mainLayout.tsx

@@ +1 @@
+import { LayoutProps } from '../components/models/layoutProps';
+import { Layout } from 'antd';
+import { UserNavBar } from '../components/navigation/userNavBar';
+import { AdminNavBar } from '../components/navigation/adminNavBar';
+import 'antd/dist/antd.css';
+
+const { Header, Content, Footer } = Layout;
+
+/**
+ * Creates layout of main screens.
+ * @param props Html structure of a login form.
+ * @returns The login screen.
+ */
+export function MainLayout(props: LayoutProps) {
+    return (
+        <Layout>
+            <Header>
+                {/**
+                 @todo: Select correct navigation bar
+                 {user && <UserNavBar />}
+                 {admin && <AdminNavBar />}
+                **/}
+            </Header>
+            <Content>
+                <main>{props.children}</main>
+            </Content>
+            <Footer></Footer>
+        </Layout>
+    );
+}

webapp/pages/annotation.tsx

@@ -1 @@
-import AnnotationLayout from '../layouts/annotationLayout';
-
-/**
- * Creates an annotation screen.
- * @returns The annotation screen.
- */
-function Annotation() {
-    return <AnnotationLayout />;
-}
-
-export default Annotation;

webapp/pages/annotation/index.tsx

@@ +1 @@
+import { Layout } from 'antd';
+import { AnnotationPanel } from '../../components/annotation/annotationPanel';
+import { DocumentAnnotationView } from '../../components/annotation/documentAnnotationView';
+import { TagPanel } from '../../components/annotation/tagPanel';
+import { MainLayout } from '../../layouts/mainLayout';
+import 'antd/dist/antd.css';
+import styles from '/styles/annotation.module.scss';
+
+const { Content, Sider } = Layout;
+
+/**
+ * Creates an annotation screen.
+ * @returns The annotation screen.
+ */
+function Annotation() {
+    return (
+        <MainLayout>
+            <Layout hasSider>
+                <Sider className={styles.leftSidePanel}>
+                    <TagPanel />
+                </Sider>
+                <Content className={styles.mainView}>
+                    <DocumentAnnotationView />
+                </Content>
+                <Sider className={styles.rightSidePanel}>
+                    <AnnotationPanel />
+                </Sider>
+            </Layout>
+        </MainLayout>
+    );
+}
+
+export default Annotation;