From dd81fc9a8934514d7b4da7d1ab5e768bfffa95e9 Mon Sep 17 00:00:00 2001 From: andrebarros7201 Date: Wed, 7 Apr 2021 08:53:18 +0000 Subject: [PATCH] =?UTF-8?q?Restrutura=C3=A7=C3=A3o=20e=20Cria=C3=A7=C3=A3o?= =?UTF-8?q?=20de=20Tabs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dbs/dbmercearia.mv.db | Bin 57344 -> 57344 bytes server/services/categorias/options.js | 1 + server/services/lojas/options.js | 1 + website/src/App.css | 31 +++++++++- website/src/App.js | 46 ++++++--------- website/src/Components/Cards/index.jsx | 41 ++++++++++++++ website/src/Components/NavBar/index.css | 34 +++++++++++ website/src/Components/NavBar/index.jsx | 35 ++++++++++++ .../src/Components/TabelaCategorias/index.jsx | 38 +++++++++++++ website/src/Components/TabelaLojas/index.jsx | 38 +++++++++++++ .../src/Components/TabelaProdutos/index.jsx | 53 ++++++++++++++++++ 11 files changed, 286 insertions(+), 32 deletions(-) create mode 100644 server/services/categorias/options.js create mode 100644 server/services/lojas/options.js create mode 100644 website/src/Components/Cards/index.jsx create mode 100644 website/src/Components/NavBar/index.css create mode 100644 website/src/Components/NavBar/index.jsx create mode 100644 website/src/Components/TabelaCategorias/index.jsx create mode 100644 website/src/Components/TabelaLojas/index.jsx create mode 100644 website/src/Components/TabelaProdutos/index.jsx diff --git a/dbs/dbmercearia.mv.db b/dbs/dbmercearia.mv.db index 27256093b15773bfc687660cae2e1ca1ca99b9ed..a890ed9a527e0cfef0d223911f015ff42afd486b 100644 GIT binary patch delta 2594 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 .ant-menu-item, .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu { + top: 0; + margin-top: 0; + padding: 0 20px; + border-color: #383838; + border-bottom-color: rgb(56, 56, 56); + border-bottom: 0; +} + +.ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected { + background-color: #ca0000; +} + +.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover { + background-color: rgb(116, 0, 0); +} \ No newline at end of file diff --git a/website/src/App.js b/website/src/App.js index 4cf3d6a..3f6cf09 100644 --- a/website/src/App.js +++ b/website/src/App.js @@ -1,40 +1,28 @@ import React, { useState, useEffect } from "react"; -import logo from './logo.svg'; import './App.css'; - import _service from '@netuno/service-client'; +import TabelaProdutos from './Components/TabelaProdutos/index.jsx'; + +import Cards from "./Components/Cards/index.jsx"; +import { Layout, Menu, Breadcrumb } from 'antd'; +import NavBar from "./Components/NavBar"; +const { Header, Content, Footer } = Layout; + function App() { - const [data, setData] = useState([]); - useEffect(() => { - _service({ - url: "produtos", - success: (response) => { - setData(response.json) - }, - fail: (e) => { - console.log("Service Error", e); - } - }); - }, []); + return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - - {JSON.stringify(data)} -
+ + + +
+ +
+ +
Gestor de Mercearia ©2021
+
); } diff --git a/website/src/Components/Cards/index.jsx b/website/src/Components/Cards/index.jsx new file mode 100644 index 0000000..8538d54 --- /dev/null +++ b/website/src/Components/Cards/index.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +import { Card, Col, Row } from 'antd'; +const { Meta } = Card; + +const Cards = () => { + return ( +
+ + + } + > + + + + + } + > + + + + + } + > + + + + +
); +} + +export default Cards; \ No newline at end of file diff --git a/website/src/Components/NavBar/index.css b/website/src/Components/NavBar/index.css new file mode 100644 index 0000000..afaf81a --- /dev/null +++ b/website/src/Components/NavBar/index.css @@ -0,0 +1,34 @@ +.site-layout-content { + min-height: 280px; + padding: 24px; + background: #fff; + } + #components-layout-demo-top .logo { + float: left; + width: 120px; + height: 31px; + margin: 16px 24px 16px 0; + background: rgba(255, 255, 255, 0.3); + } + .ant-row-rtl #components-layout-demo-top .logo { + float: right; + margin: 16px 0 16px 24px; + } + + .ant-layout-header { + height: 64px; + padding: 0 50px; + color: rgba(255, 255, 255, 0.85); + line-height: 64px; + background: #f0f0f0; +} + +.ant-menu-dark.ant-menu-horizontal > .ant-menu-item, .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu { + top: 0; + margin-top: 0; + padding: 0 20px; + border-color: #383838; + border-bottom-color: rgb(56, 56, 56); + border-bottom: 0; + } + diff --git a/website/src/Components/NavBar/index.jsx b/website/src/Components/NavBar/index.jsx new file mode 100644 index 0000000..ff4b9f7 --- /dev/null +++ b/website/src/Components/NavBar/index.jsx @@ -0,0 +1,35 @@ +import React from 'react'; +import './index.css'; + +import { Tabs } from 'antd'; +import TabelaProdutos from '../TabelaProdutos/index.jsx'; +import TabelaLojas from '../TabelaLojas/index.jsx'; +import TabelaCategorias from '../TabelaCategorias/index.jsx'; +import Cards from '../Cards/index.jsx'; + +const { TabPane } = Tabs; + +function callback(key) { + console.log(key); +} +const NavBar = () => { + return ( + + + + + + + + + + + + + + + + ); +} + +export default NavBar; \ No newline at end of file diff --git a/website/src/Components/TabelaCategorias/index.jsx b/website/src/Components/TabelaCategorias/index.jsx new file mode 100644 index 0000000..6a51042 --- /dev/null +++ b/website/src/Components/TabelaCategorias/index.jsx @@ -0,0 +1,38 @@ +import React, { useState, useEffect } from "react"; +import { Table, Tag, Space } from 'antd'; +import _service from '@netuno/service-client'; + + +const TabelaCategorias = () => { + + const [data, setData] = useState([]); + + useEffect(() => { + _service({ + url: "categorias", + success: (response) => { + setData(response.json) + }, + fail: (e) => { + console.log("Service Error", e); + } + }); + + }, []); + + const columns = [ + { + title: 'Nome', + dataIndex: 'nome', + key: 'name', + }]; + + return ( +
+

Categorias

+ + + ); +} + +export default TabelaCategorias; \ No newline at end of file diff --git a/website/src/Components/TabelaLojas/index.jsx b/website/src/Components/TabelaLojas/index.jsx new file mode 100644 index 0000000..cff4379 --- /dev/null +++ b/website/src/Components/TabelaLojas/index.jsx @@ -0,0 +1,38 @@ +import React, { useState, useEffect } from "react"; +import { Table, Tag, Space } from 'antd'; +import _service from '@netuno/service-client'; + + +const TabelaLojas = () => { + + const [data, setData] = useState([]); + + useEffect(() => { + _service({ + url: "lojas", + success: (response) => { + setData(response.json) + }, + fail: (e) => { + console.log("Service Error", e); + } + }); + + }, []); + + const columns = [ + { + title: 'Mercearia', + dataIndex: 'mercearia', + key: 'mercearia', + }]; + + return ( +
+

Lojas

+
+ + ); +} + +export default TabelaLojas; \ No newline at end of file diff --git a/website/src/Components/TabelaProdutos/index.jsx b/website/src/Components/TabelaProdutos/index.jsx new file mode 100644 index 0000000..fbf4f9f --- /dev/null +++ b/website/src/Components/TabelaProdutos/index.jsx @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from "react"; +import { Table, Tag, Space } from 'antd'; +import _service from '@netuno/service-client'; + + +const TabelaProdutos = () => { + + const [data, setData] = useState([]); + + useEffect(() => { + _service({ + url: "produtos", + success: (response) => { + setData(response.json) + }, + fail: (e) => { + console.log("Service Error", e); + } + }); + + }, []); + + const columns = [ + { + title: 'Nome', + dataIndex: 'nome', + key: 'name', + }, + { + title: 'Categoria', + dataIndex: 'categoria', + key: 'categoria', + }, + { + title: 'Quantidade', + dataIndex: 'quantidade', + key: 'quantidade', + }, + { + title: 'Preço', + dataIndex: 'preco', + key: 'preco', + }]; + + return ( +
+

Produtos

+
+ + ); +} + +export default TabelaProdutos; \ No newline at end of file