Skip to content

A
Aqbits Trace Code
Commit 95103dd7 authored by Mai Thanh Cong's avatar Mai Thanh Cong
Browse files
Options

update add page

parent b984676d
Show whitespace changes
Inline Side-by-side
Showing with 69 additions and 663 deletions
src/components/Profile/AddProfile.js
View file @ 95103dd7
......@@ -13,14 +13,20 @@ import dummyData from "../../data/index.json";
import { validatePhoneNumber } from "constans/index.js";
const AddProfile = () => {
const [profileName, setProfileName] = useState("");
const [profileCode, setProfileCode] = useState("");
const [logo, setLogo] = useState({});
const [phoneNumber, setPhoneNumber] = useState("");
const [profileAddress, setProfileAddress] = useState("");
const history = useHistory();
const state = { ...history.location.state };
const profileId = state.profileId;
const detailProfile = dummyData.data ? dummyData.data.filter(item => item.id === profileId) : [];
console.log("list data", detailProfile);
const [profileName, setProfileName] = useState(profileId ? detailProfile.name : "");
const [profileCode, setProfileCode] = useState(profileId ? detailProfile.code : {});
const [logo, setLogo] = useState(profileId ? detailProfile.logo : {});
const [phoneNumber, setPhoneNumber] = useState(profileId ? detailProfile.phone_number : "");
const [profileAddress, setProfileAddress] = useState(profileId ? detailProfile.address : "");
const [validPhoneNumber, setValidPhoneNumber] = useState(false);
const history = useHistory();
const onHandleBack = () => {
history.push("/");
......
src/components/Profile/DetailProfile.js
View file @ 95103dd7
/*!
=========================================================
* Argon Design System React - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-design-system-react
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React, { useState } from "react";
// nodejs library that concatenates classes
import classnames from "classnames";
// reactstrap components
import {
Badge,
Button,
Card,
CardBody,
CardImg,
FormGroup,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Container,
Row,
Col
} from "reactstrap";
import { Card, CardImg, Container, Row, Col } from "reactstrap";
import { useHistory } from 'react-router-dom';
import QRCode from 'react-qr-code';
import { Routes } from '../../reoutes';
// core components
import MainBanner from "components/Generals/MainBanner.js";
......@@ -46,300 +13,21 @@ import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
import dummyData from "data/index.json";
// index page sections
import Download from "../../views/IndexSections/Download.js";
const DetailProfile = () => {
// state = {};
// componentDidMount() {
// document.documentElement.scrollTop = 0;
// document.scrollingElement.scrollTop = 0;
// this.refs.main.scrollTop = 0;
// }
// render() {
const [nameFocused, setNameFocused] = useState(undefined);
const [emailFocused, setEmailFocused] = useState(undefined);
const history = useHistory();
const state = { ...history.location.state };
const code_name = state.code_name;
const listData = dummyData.data.filter(item => item.code === code_name);
return (
<>
<DemoNavbar />
<main>
<MainBanner />
<div className="position-relative">
{/* shape Hero */}
{/* <section className="section section-lg section-shaped pb-250">
<div className="shape shape-style-1 shape-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="py-lg-md d-flex">
<div className="col px-0">
<h3 className="h4 text-center font-weight-bold mb-4">Detail profile</h3>
<Row>
<Col lg="6">
<h1 className="display-3 text-white">
A beautiful Design System{" "}
<span>completed with examples</span>
</h1>
<p className="lead text-white">
The design system comes with four pre-built pages to
help you get started faster. You can change the text and
images and you're good to go.
</p>
<div className="btn-wrapper">
<Button
className="btn-icon mb-3 mb-sm-0"
color="info"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alerts?ref=adsr-landing-page"
>
<span className="btn-inner--icon mr-1">
<i className="fa fa-code" />
</span>
<span className="btn-inner--text">Components</span>
</Button>
<Button
className="btn-white btn-icon mb-3 mb-sm-0 ml-1"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
>
<span className="btn-inner--icon mr-1">
<i className="ni ni-cloud-download-95" />
</span>
<span className="btn-inner--text">
Download React
</span>
</Button>
</div>
</Col>
</Row>
</div>
</Container>
SVG separator
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section> */}
{/* 1st Hero Variation */}
</div>
{/* <section className="section section-lg pt-lg-0 mt--200">
<Container>
<Row className="justify-content-center">
<Col lg="12">
<Row className="row-grid">
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-primary rounded-circle mb-4">
<i className="ni ni-check-bold" />
</div>
<h6 className="text-primary text-uppercase">
Download Argon
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="primary" pill className="mr-1">
design
</Badge>
<Badge color="primary" pill className="mr-1">
system
</Badge>
<Badge color="primary" pill className="mr-1">
creative
</Badge>
</div>
<Button
className="mt-4"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-success rounded-circle mb-4">
<i className="ni ni-istanbul" />
</div>
<h6 className="text-success text-uppercase">
Build Something
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="success" pill className="mr-1">
business
</Badge>
<Badge color="success" pill className="mr-1">
vision
</Badge>
<Badge color="success" pill className="mr-1">
success
</Badge>
</div>
<Button
className="mt-4"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-warning rounded-circle mb-4">
<i className="ni ni-planet" />
</div>
<h6 className="text-warning text-uppercase">
Prepare Launch
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="warning" pill className="mr-1">
marketing
</Badge>
<Badge color="warning" pill className="mr-1">
product
</Badge>
<Badge color="warning" pill className="mr-1">
launch
</Badge>
</div>
<Button
className="mt-4"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
</Row>
</Col>
</Row>
</Container>
</section> */}
{/* <section className="section section-lg">
<Container>
<Row className="row-grid align-items-center">
<Col className="order-md-2" md="6">
<img
alt="..."
className="img-fluid floating"
src={require("assets/img/theme/promo-1.png")}
/>
</Col>
<Col className="order-md-1" md="6">
<div className="pr-md-5">
<div className="icon icon-lg icon-shape icon-shape-success shadow rounded-circle mb-5">
<i className="ni ni-settings-gear-65" />
</div>
<h3>Awesome features</h3>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<ul className="list-unstyled mt-5">
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-settings-gear-65" />
</Badge>
</div>
<div>
<h6 className="mb-0">
Carefully crafted components
</h6>
</div>
</div>
</li>
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-html5" />
</Badge>
</div>
<div>
<h6 className="mb-0">Amazing page examples</h6>
</div>
</div>
</li>
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-satisfied" />
</Badge>
</div>
<div>
<h6 className="mb-0">
Super friendly support team
</h6>
</div>
</div>
</li>
</ul>
</div>
</Col>
</Row>
</Container>
</section> */}
<section className="section bg-secondary">
{dummyData.data && dummyData.data.length > 0 ?
dummyData.data.map(data => {
{listData && listData.length > 0 ?
listData.map(data => {
return (
<Container>
<Row className="row-grid align-items-center">
......@@ -350,32 +38,6 @@ const DetailProfile = () => {
src={window.location.origin + data.logo}
top
/>
{/* <blockquote className="card-blockquote">
<svg
xmlns="http://www.w3.org/2000/svg"
className="svg-bg"
preserveAspectRatio="none"
viewBox="0 0 583 95"
>
<polygon
className="fill-default"
points="0,52 583,95 0,95"
/>
<polygon
className="fill-default"
opacity=".2"
points="0,42 583,95 683,0 0,95"
/>
</svg>
<h4 className="display-3 font-weight-bold text-white">
Design System
</h4>
<p className="lead text-italic text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever happens.
</p>
</blockquote> */}
</Card>
</Col>
<Col md="6">
......@@ -383,7 +45,6 @@ const DetailProfile = () => {
{/* <div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
<i className="ni ni-settings" />
</div> */}
<div className="h2 mb-3">{data.name}</div>
<div className="mb-3">
<div className="h5 font-weight-bold">Số điện thoại</div>
......@@ -425,28 +86,6 @@ const DetailProfile = () => {
);
}) : null}</div>
</div>
{/* <p className="lead">
Don't let your uses guess by attaching tooltips and
popoves to any element. Just make sure you enable them
first via JavaScript.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<a
className="font-weight-bold text-warning mt-5"
href="#pablo"
onClick={e => e.preventDefault()}
>
A beautiful UI Kit for impactful websites
</a> */}
</div>
</Col>
</Row>
......@@ -454,257 +93,8 @@ const DetailProfile = () => {
);
}) : <div className="h4 font-weight-bold">Not found profile</div>
}
</section>
<Sologan />
{/* <section className="section pb-0 bg-gradient-warning">
<Container>
<Row className="row-grid align-items-center">
<Col className="order-lg-2 ml-lg-auto" md="6">
<div className="position-relative pl-md-5">
<img
alt="..."
className="img-center img-fluid"
src={require("assets/img/ill/ill-2.svg")}
/>
</div>
</Col>
<Col className="order-lg-1" lg="6">
<div className="d-flex px-3">
<div>
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-building text-primary" />
</div>
</div>
<div className="pl-4">
<h4 className="display-3 text-white">Modern Interface</h4>
<p className="text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever.
</p>
</div>
</div>
<Card className="shadow shadow-lg--hover mt-5">
<CardBody>
<div className="d-flex px-3">
<div>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-satisfied" />
</div>
</div>
<div className="pl-4">
<h5 className="title text-success">
Awesome Support
</h5>
<p>
The Arctic Ocean freezes every winter and much of
the sea-ice then thaws every summer, and that
process will continue whatever.
</p>
<a
className="text-success"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</a>
</div>
</div>
</CardBody>
</Card>
<Card className="shadow shadow-lg--hover mt-5">
<CardBody>
<div className="d-flex px-3">
<div>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-active-40" />
</div>
</div>
<div className="pl-4">
<h5 className="title text-warning">
Modular Components
</h5>
<p>
The Arctic Ocean freezes every winter and much of
the sea-ice then thaws every summer, and that
process will continue whatever.
</p>
<a
className="text-warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</a>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
SVG separator
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section> */}
{/* <section className="section section-lg bg-gradient-default">
<Container className="pt-lg pb-300">
<Row className="text-center justify-content-center">
<Col lg="10">
<h2 className="display-3 text-white">Build something</h2>
<p className="lead text-white">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record low maximum sea ice extent tihs year down
to low ice.
</p>
</Col>
</Row>
<Row className="row-grid mt-5">
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-settings text-primary" />
</div>
<h5 className="text-white mt-3">Building tools</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-ruler-pencil text-primary" />
</div>
<h5 className="text-white mt-3">Grow your market</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-atom text-primary" />
</div>
<h5 className="text-white mt-3">Launch time</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
</Row>
</Container>
SVG separator
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section> */}
{/* <section className="section section-lg pt-lg-0 section-contact-us">
<Container>
<Row className="justify-content-center mt--300">
<Col lg="8">
<Card className="bg-gradient-secondary shadow">
<CardBody className="p-lg-5">
<h4 className="mb-1">Want to work with us?</h4>
<p className="mt-0">
Your project is very important to us.
</p>
<FormGroup
className={classnames("mt-5", {
focused: nameFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-user-run" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Your name"
type="text"
onFocus={e => setNameFocused(true)}
onBlur={e => setNameFocused(false)}
/>
</InputGroup>
</FormGroup>
<FormGroup
className={classnames({
focused: emailFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email address"
type="email"
onFocus={e => setEmailFocused(true)}
onBlur={e => setEmailFocused(false)}
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Input
className="form-control-alternative"
cols="80"
name="name"
placeholder="Type a message..."
rows="4"
type="textarea"
/>
</FormGroup>
<div>
<Button
block
className="btn-round"
color="default"
size="lg"
type="button"
>
Send Message
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</section> */}
{/* <Download /> */}
</main>
<SimpleFooter />
</>
......
src/components/Profile/SearchProfile.js
View file @ 95103dd7
......@@ -24,9 +24,7 @@ const SearchProfile = () => {
event.preventDefault();
if (!searchProfile) return;
const nameCode = dummyData.data.map(item => item.code);
console.log("nameCode", nameCode);
const checkSearch = nameCode.indexOf(searchProfile);
console.log("checkSearch", checkSearch);
if (checkSearch !== -1) {
history.push({
pathname: `/profile/${searchProfile}`,
......
src/views/IndexSections/Inputs.js
View file @ 95103dd7
......@@ -59,10 +59,6 @@ const Inputs = () => {
}
}
const onHandleCreateProfile = () => {
history.push("/profile/add");
}
return (
<>
<section className="section pb-0 section-components">
......
src/views/IndexSections/Table.js
View file @ 95103dd7
......@@ -8,6 +8,7 @@ export const ProfileTable = (props) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
const history = useHistory();
// const dispatch = useDispatch();
......@@ -15,10 +16,11 @@ export const ProfileTable = (props) => {
history.push("/profile/add");
};
const onHandleClickEdit = async (profileId) => {
const onHandleClickEdit = (profileId) => {
console.log("profileId", profileId);
let detailProfile = props.dummyData.filter(item => item.id === profileId);
history.push({
// pathname: "Routes.DetailProfile.path",
pathname: "/profile/add",
state: { profileId, detailProfile }
});
}
......@@ -33,11 +35,9 @@ export const ProfileTable = (props) => {
}, []);
const items = [];
const totalItem = "123";
const totalItem = "15";
let pageSize = totalItem / 10;
const getPageItem = () => {
let number = 1;
if(pageSize > 1){
......@@ -56,7 +56,7 @@ export const ProfileTable = (props) => {
};
items.push(
<PaginationItem key={number} onClick={handlePaginationChange}>
{number}
<PaginationLink>{number}</PaginationLink>
</PaginationItem>
);
}
......@@ -64,6 +64,7 @@ export const ProfileTable = (props) => {
const TableRow = (props) => {
const { id, address, logo, name, phone_number, profile_product, created_at, qr_code } = props;
const productName = profile_product ? profile_product.map(item => item.name) : "";
return (
<tr>
<th scope="row">{""}</th>
......@@ -80,16 +81,18 @@ export const ProfileTable = (props) => {
Menu
</DropdownToggle>
<DropdownMenu>
<DropdownItem >
<DropdownItem tag="a">
<i className="fa fa-plus" />{"Thêm sản phẩm"}
</DropdownItem>
<DropdownItem onClick={() => onHandleClickEdit(id)} >
<i className="fa fa-pencil" />{"Sửa"}
{/* <FontAwesomeIcon icon={faEdit} className="me-2" /> {t('common.table.edit')} */}
<DropdownItem tag="b">
<div onClick={() => onHandleClickEdit(id)}>
<i className="fa fa-pencil mr-3" />{"Sửa"}
</div>
</DropdownItem>
<DropdownItem className="text-danger" onClick={() => onHandleClickDelete(id)}>
<i className="fa fa-trash" />{"Xóa"}
{/* <FontAwesomeIcon icon={faTrashAlt} className="me-2" /> {t('common.table.remove')} */}
<DropdownItem tag="c" className="text-danger">
<div onClick={() => console.log('This will fire!')}>
<i className="fa fa-trash mr-3" />{"Xóa"}
</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
......@@ -109,7 +112,7 @@ export const ProfileTable = (props) => {
<h5>{"Thông tin doanh nghiệp"}</h5>
</Col>
<Col className="text-right">
<Button className="btn-1 ml-1" color="success" size="sm" type="button" onClick={() => onHandleClickAdd()}>{"Tạo mới doanh nghiệp"}</Button>
<Button className="btn-1 ml-1" color="success" type="button" onClick={() => onHandleClickAdd()}>{"Tạo mới doanh nghiệp"}</Button>
</Col>
</Row>
</CardHeader>
......@@ -131,25 +134,38 @@ export const ProfileTable = (props) => {
{props.dummyData ? props.dummyData.map(profile => <TableRow key={`page-visit-${profile.id}`} {...profile} />) : []}
</tbody>
</Table>
{/* <Card.Footer>
<Nav>
<Pagination className="mb-2 mb-lg-0">
<Pagination.Prev disabled={props.currentPage === 1} onClick={onPrevItem}>
<Row className="mx-3 my-2">
<Col>
<nav>
<Pagination aria-label="Page navigation example">
{/* <Pagination.Prev disabled={props.currentPage === 1} onClick={onPrevItem}>
{t('common.table.previous')}
</Pagination.Prev>
</Pagination.Prev> */}
<PaginationItem>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
{items}
<Pagination.Next disabled={props.currentPage === Math.ceil(pageSize)} onClick={() => onNextItem()}>
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
{/* <Pagination.Next disabled={props.currentPage === Math.ceil(pageSize)} onClick={() => onNextItem()}>
{t('common.table.next')}
</Pagination.Next>
</Pagination.Next> */}
</Pagination>
</Nav>
<small className="fw-bold">
{t('common.table.showing', {
'current': props.dummyData.length,
'total': totalItem
})}
</small>
</Card.Footer> */}
</nav>
</Col>
<Col className="text-right">
<h6 className="font-weight-bold">
{('Hiển thị ' + props.dummyData.length + "/" + totalItem)}
</h6>
</Col>
</Row>
</Card>
: <div></div>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment