Merge pull request Kuldz#4 from Kuldz/dev

Dev

.env.example

@@ -4,4 +4,4 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB (Preview) and CockroachDB (Preview).
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL="mysql://username:Passw0rd@localhost:3306/mydb?schema=user"
+DATABASE_URL="mysql://root:Passw0rd@localhost:3306/mydb?schema=user"

README.md

@@ -18,17 +18,32 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
-## HOW to start
+## How To Set Up The Environment
 
-### SET up database
+### Set Up Database
 
-* install mysql 8.0
-* go make copy of .env and fill you database passwords
-* run migrations with command
+* Install MySQL 8.0
+* Go make a copy of .env.example, paste it as .env and fill it with your credentials
+* Run migrations with commands:
 
-    npx prisma migrate deploy
+```bash
+npx prisma migrate deploy
+npx prisma migrate dev
+```
+
+* Create new user by seeding:
+
+```bash
+npx prisma db seed
+```
+
+We use prisma.io as ORM, read more at https://www.prisma.io/docs/concepts
+
+* To see the table in Prisma Studio, run:
 
-we use prisma.io as ORM read more https://www.prisma.io/docs/concepts
+```bash
+npx prisma studio
+```
 
 ## Deploy on Vercel
 

components/managing/ClassEditAdd.js

@@ -0,0 +1,43 @@
+import { Form, Input, InputNumber, Button, Checkbox } from "antd"
+import React from "react"
+
+class ClassEditAdd extends React.Component {
+  render () {
+    return (
+      <div>
+        <Form name="nest-messages" layout="horizontal" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+          <Form.Item name={["class", "name"]} label="Name">
+            <Input />
+          </Form.Item>
+
+          <Form.Item name={["class", "year"]} label="Year">
+            <Input />
+          </Form.Item>
+
+          <Form.Item name={["class", "leader"]} label="Group Leader">
+            <InputNumber />
+          </Form.Item>
+
+          <Form.Item name={["class", "school"]} label="School">
+            <Input />
+          </Form.Item>
+
+          <Form.Item name={["class", "students"]} label="Student">
+            <Input placeholder="Search Student"/>
+            <Checkbox>John Brown</Checkbox>
+            <Checkbox>Jim Green</Checkbox>
+            <Checkbox>Joe Black</Checkbox>
+          </Form.Item>
+
+          <Form.Item wrapperCol={{ span: 16, offset: 8 }}>
+            <Button type="primary" htmlType="submit">
+              Submit
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    )
+  }
+}
+
+export default ClassEditAdd

components/navbar.js

@@ -1,5 +1,6 @@
 import { Menu } from "antd"
 import React from "react"
+import Image from "next/image"
 import { MailOutlined, SettingOutlined, QuestionOutlined, BellOutlined, InfoCircleOutlined, UserOutlined } from "@ant-design/icons"
 
 const { SubMenu } = Menu
@@ -25,7 +26,7 @@ class NavbarAdmin extends React.Component {
     return (
       <>
         <Menu theme={this.state.theme} onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
-          <Menu.Item key="icon"><img src='favicon.ico' width="25" height="25"></img>
+          <Menu.Item key="icon"><Image src='/favicon.ico' alt="Placeholder Logo" width="25" height="25"></Image>
             <a href="/"></a>
           </Menu.Item>
           <Menu.Item key="mail" icon={<MailOutlined />}>

components/pagination.js

@@ -0,0 +1,21 @@
+import { Pagination } from "antd"
+import React from "react"
+
+class Pag extends React.Component {
+  state = {
+    current: 3
+  };
+
+  onChange = page => {
+    console.log(page)
+    this.setState({
+      current: page
+    })
+  };
+
+  render () {
+    return <Pagination current={this.state.current} onChange={this.onChange} total={50} />
+  }
+}
+
+export default Pag

next.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  reactStrictMode: true,
+  reactStrictMode: true
 }