la-flowerita 0.1.0 → 0.2.0

package/src/components/ManageUsers.js

@@ -0,0 +1,127 @@
+//components/ProductList.js
+
+import React, { Component } from "react";
+import User from "./User";
+import "../css/users.css";
+import LoadingIndicator from "./Spinner";
+//import NewProductModal from "./NewProductModal";
+
+
+
+class UserList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      users: [],
+      type: false
+    };
+  }
+
+  componentDidMount = async() => {
+    var type = this.state.type ? this.state.type : "All";
+    var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body:JSON.stringify({type: type})
+    };
+    console.log(type);
+    await fetch("/getUsers", options).then(res => res.json())
+    .then((result) => {
+      console.log(result); 
+      this.setState({ users: result.users });
+      console.log(this.state.users);
+    });
+  }
+
+  componentDidUpdate = async(prevProps,prevState) =>  {
+    if (this.state.type !== prevState.type) {
+    console.log('type changed');
+    var type = this.state.type ? this.state.type : "All";
+    var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body:JSON.stringify({type: type})
+    };
+    console.log(type);
+    await fetch("/getUsers", options).then(res => res.json())
+    .then((result) => {
+      console.log("hi");
+      this.setState({ users: result.users });
+      console.log(this.state.users);
+    });
+ }
+}
+  refreshPage() {
+    window.location.reload(false);
+  }
+
+  async changeType(e){
+    var type = e.target.value;
+    this.setState({type:type});
+  }
+
+  render() {
+    return (
+      <div className="container main-content">
+      <div style={{"marginTop":"inherit"}} class="btn-group" role="group" aria-label="Basic example">
+        <button type="button" onClick={(e) => this.changeType(e)} value="Seller" className="button-17">Sellers</button>
+        <button type="button" onClick={(e) => this.changeType(e)} value="Customer" className="button-17">Customers</button>
+        <button type="button" onClick={(e) => this.changeType(e)} value="All" className="button-17">All</button>
+        <button type="button" onClick={() => this.refreshPage()} style={{"width":"10%","height":"5%",margin:"20px"}}>
+          <span><img src="images/refresh.png" style={{"height":"auto",width:"20%"}}/></span>&nbsp;Refresh
+      </button>
+      </div>
+       <div>
+       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />
+          <div class="container mt-3 mb-4">
+          <div class="col-lg-9 mt-4 mt-lg-0">
+              <div class="row">
+                <div class="col-md-12">
+                  <div class="user-dashboard-info-box table-responsive mb-0 bg-white p-4 shadow-sm">
+                    <table class="table manage-candidates-top mb-0">
+                      <thead>
+                      <tr>
+                        <th>Candidate Name</th>
+                        <th class="text-center">Status</th>
+                        <th class="action text-right">Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                        { !this.state.users || this.state.users.length > 0 ? 
+                          this.state.users.map((user) => {
+                            return (
+                              <User
+                                key = {user.id}
+                                user = {user}
+                                name={user.name}
+                                degree={user.degree}
+                                phone = {user.phone}
+                                address = {user.address}
+                                email={user.email}
+                                profileImage = {user.profileImage}
+                              />
+                              
+                            );
+                          }) :""}{ this.state.users && this.state.users.length == 0 ? 
+                            <h1> There are no users for this category</h1>
+                          :""}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+       </div>
+        <br />
+        <br />
+        <br />
+        <br />
+      </div>
+    );
+  }
+}
+
+export default UserList;
+

package/src/components/MyOrder.js

@@ -0,0 +1,62 @@
+import { React, Component } from "react";
+import sampleImage from "../logo.svg";
+import "../css/catalog.css";
+import "../css/orderedProduct.css";
+import swal from "sweetalert";
+import { FaHeart, FaRegHeart, FaShoppingCart, FaEye } from "react-icons/fa";
+
+import Card from "react-bootstrap/Card";
+import Button from "react-bootstrap/Button";
+import { ButtonGroup, Container } from "react-bootstrap";
+import * as Icon from "react-bootstrap-icons";
+import ReactStars from "react-rating-stars-component";
+
+class Order extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+        _id : props._id,
+        userId :  props.userId,
+        products : props.products,
+        totalPrice :  props.totalPrice,
+        date: props.date,
+        status : props.status,
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.status !== prevState.status) {
+        console.log(this.state.status);
+        var options = {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+        };
+         fetch("/updateOrderStatus", options).then((res) => {
+            if(res.status == 200){
+                swal("Updated","order is successfuly update","success");
+          }
+            else{
+              swal("Error","There was an error","error");
+            }
+        });
+    }
+  }
+
+  
+  render() {
+      
+    return (
+        
+      <tr key={this.props._id}>
+        <td>{this.props._id}
+        </td>
+        <td>{this.props.date}</td>
+        {/* <td>{this.props.products}</td> */}
+        <td className="price-new">{this.props.totalPrice}$</td>
+        <td>{this.props.status}</td>
+      </tr>
+    );
+  }
+}
+
+export default Order;

package/src/components/MyOrders.js

@@ -0,0 +1,99 @@
+import {React, Component} from 'react';
+import sampleImage from '../logo.svg';
+import '../css/shoppingCart.css';
+import { FaHeart, FaRegHeart, FaShoppingCart, FaEye } from "react-icons/fa";
+import MyOrder from "./MyOrder.js"
+import swal from "sweetalert";
+import { Container, Table, Row, Button } from "react-bootstrap";
+
+class MyOrders extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      orders: [],
+      status: false,
+    };
+  }
+  componentDidMount = async () => {
+    var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+    };
+    
+    await fetch("/getClientOrders", options).then(res => res.json())
+    .then((result) => {
+      console.log(result); 
+      this.setState({ orders: result.orders });
+      console.log(this.state.orders);
+    });
+  }
+
+  componentDidUpdate = async(prevProps,prevState) =>  {
+    if (this.state.status !== prevState.status) {
+    console.log('type changed');
+    var status = this.state.status ? this.state.status : "All";
+    var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body:JSON.stringify({status: status})
+    };
+    console.log(status);
+    await fetch("/getOrders", options).then(res => res.json())
+    .then((result) => {
+      console.log("hi");
+      this.setState({ orders: result.orders });
+      console.log(this.state.orders);
+    });
+ }
+}
+  refreshPage() {
+    window.location.reload(false);
+  }
+
+  async changeType(e){
+    var status = e.target.value;
+    this.setState({status:status});
+  }
+
+  
+
+  render() {
+    return (
+      <div className="productSlider mb-5 mt-5">
+        <Container>
+          <h5 className="text-left mb-4 ps-2">Order List</h5>
+          <Row>
+            <div className="col-9 cartShow">
+              <Table bordered hover responsive="sm">
+                <thead>
+                  <tr>
+                    <th>Order </th>
+                    <th>Date </th>
+                    <th>Products </th>
+                    <th>Sub Total</th>
+                    <th>Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {this.state.orders.map((order, idx) => (
+                    <MyOrder
+                      key={order._id}
+                      _id = {order._id}
+                      userId =  {order.userId}
+                      products = {order.products} 
+                      totalPrice =  {order.totalPrice}
+                      date = {order.date}
+                      status = {order.status}
+                    />
+                  ))}
+                </tbody>
+              </Table>
+            </div>
+          </Row>
+        </Container>
+      </div>
+    );
+  }
+}
+
+export default MyOrders;

package/src/components/Order.js

@@ -0,0 +1,78 @@
+import { React, Component } from "react";
+import sampleImage from "../logo.svg";
+import "../css/catalog.css";
+import "../css/orderedProduct.css";
+import swal from "sweetalert";
+import { FaHeart, FaRegHeart, FaShoppingCart, FaEye } from "react-icons/fa";
+
+import Card from "react-bootstrap/Card";
+import Button from "react-bootstrap/Button";
+import { ButtonGroup, Container } from "react-bootstrap";
+import * as Icon from "react-bootstrap-icons";
+import ReactStars from "react-rating-stars-component";
+
+class Order extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+        _id : props._id,
+        userId :  props.userId,
+        products : props.products,
+        totalPrice :  props.totalPrice,
+        date: props.date,
+        status : props.status,
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.status !== prevState.status) {
+        console.log(this.state.status);
+        var options = {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({_id: this.state._id, status: this.state.status})
+        };
+         fetch("/updateOrderStatus", options).then((res) => {
+            if(res.status == 200){
+                swal("Updated","order is successfuly update","success");
+          }
+            else{
+              swal("Error","There was an error","error");
+            }
+        });
+    }
+  }
+
+  
+  render() {
+      
+    return (
+        
+      <tr key={this.props._id}>
+        <td>{this.props._id}
+        </td>
+        <td>{this.props.date}</td>
+        {/* <td>{this.props.products}</td> */}
+        <td className="price-new">{this.props.totalPrice}$</td>
+        
+          <td>
+            <select
+              name="status"
+              id="status"
+              defaultValue={this.props.status}
+              onChange={(e) => {
+                this.setState({ status: String(e.target.value) });
+                this.props.onUpdate(e, this.props._id);
+              }}>
+              <option value ="Pending" >Pending</option>
+              <option value ="InProcess" >In process</option>
+              <option value ="Completed" >Completed</option>
+              
+            </select>
+          </td>
+      </tr>
+    );
+  }
+}
+
+export default Order;

package/src/components/UpdateUserModal.js

@@ -0,0 +1,304 @@
+import React, { Component } from "react";
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+import { NavLink } from "react-router-dom";
+import { FaPlus } from "react-icons/fa";
+import '../css/newProductModal.css';
+import withAuth from "./Auth.js";
+import {FaEye, FaPen, FaTrash } from "react-icons/fa";
+import swal from 'sweetalert';
+
+class UpdateUserModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+      isUpdate: false,
+      _id: props._id,
+      name: props.name,
+      phone: props.phone,
+      degree: props.degree,
+      address: props.address,
+      isActivate: props.isActivate,
+      email: props.email,
+      ERROR: "",
+    };
+  }
+
+  handleClose = () => {
+    this.setState({ showModal: false });
+  };
+  handleShow = () => {
+    this.setState({ showModal: true });
+  };
+  changeUpdate = () => {
+    this.setState({ isUpdate: !this.state.isUpdate });
+  };
+  
+  showConfirmDialog = () => {
+    this.handleClose();
+    confirmAlert({
+      title: 'Confirm to submit',
+      message: 'Are you sure to do this.',
+      buttons: [
+        {
+          label: 'Yes',
+          onClick: () => this.deleteProduct()
+        },
+        {
+          label: 'No',
+        }
+      ]
+    });
+  };
+  async deleteUser(){
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({id: this.state.id}),
+    };
+    await fetch("/deleteUser", options).then(
+      (res) => {
+        console.log(res);
+        if (res.status == 200) {
+          console.log("deleting user was successful");
+        } else if (res.status == 404) {
+          this.setState({ ERROR: "User does not exist already" });
+        } else if (res.status == 400) {
+          this.setState({ ERROR: "There was an error. Please try again" });
+        } else if (res.status == 500) {
+          this.setState({ ERROR: "There was an error on our side" });
+        }
+      },
+      (error) => {
+        this.setState({
+          ERROR: error,
+        });
+      }
+    );
+    swal("Deleted!", "User deleted successfully!", "success");
+  }
+  async updateUser() {
+    var name = this.state.name;
+    var phone = this.state.phone;
+    var degree = this.state.degree;
+    var address = this.state.address;
+    var email = this.state.email;
+    if (
+      name == "" ||
+      phone == "" ||
+      degree == "" ||
+      address == "" ||
+      email == ""
+      ) {
+      this.setState({ ERROR: "Please fill all the fields." });
+      return;
+    }
+    var user = {
+      name: name,
+      phone: phone,
+      degree: degree,
+      address: address,
+      email: email,
+      _id: this.state._id
+    };
+    console.log(user)
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({user: user}),
+    };
+    await fetch("/updateUser", options).then(
+      (res) => {
+        console.log(res);
+        if (res.status == 200) {
+          console.log("updating user was successful");
+          swal("Updated!", "User updated successfully!", "success");
+        } else if (res.status == 400) {
+          this.setState({ ERROR: "This email already exists" });
+        } else if (res.status == 500) {
+          this.setState({ ERROR: "There was an error on our side" });
+        }
+      },
+      (error) => {
+        this.setState({
+          ERROR: error,
+        });
+      }
+    );
+  }
+  renderPreview() {
+    if(this.state.src) {
+      return (
+        <img src={this.state.src} style={{"maxWidth": "inherit", "maxHeight": "inherit"}}/>
+      );
+    } else {
+      return (
+        <p>
+          No Preview
+        </p>
+      );
+    }
+  }
+
+
+  inputsHandler = (e) => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+  radioHandler = (e) => {
+    this.setState({
+      [e.target.name]: document.querySelector(
+        `input[name=${e.target.name}]:checked`
+      ).id,
+    });
+  };
+  colorSelected = (e) => {
+    this.setState({
+        color : e.target.value});
+  };
+  render() {
+    
+    return (
+      <div>
+        <a
+          role="button"
+          style={{ display: this.state.showButton }}
+          onClick={() => this.handleShow()}
+        >
+          <FaEye/>
+        </a>
+        <a
+            role="button"
+            style={{display: !this.state.isUpdate? "block" : "none"}}
+            onClick={() => this.showConfirmDialog()}
+        >
+          <FaTrash/>
+        </a>
+        <Modal
+          style={{ opacity: 1 }}
+          show={this.state.showModal}
+          onHide={() => this.handleClose()}
+        >
+          
+          <Modal.Header>
+            <Modal.Title>
+              <div className="modal-header">
+              
+              <img style={{"maxWidth": "inherit", "maxHeight": "50%","borderRadius":"50%"}} src ="https://cdn-icons-png.flaticon.com/512/149/149071.png"
+                onError={( e ) => {
+                  e.target.src="https://cdn-icons-png.flaticon.com/512/149/149071.png";
+                  e.target.onerror = null; // prevents looping
+                }}
+                alt={this.state.name} height="150" />
+              </div>
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <form key={this.state.id}>
+              <div className="mb-3">
+              <h1>full name:</h1>
+                <input
+                  type="text"
+                  name="name"
+                  id="name"
+                  className="form-control"
+                  placeholder="Name"
+                  onChange={this.inputsHandler}
+                  defaultValue={this.state.name}
+                  required
+                  autoFocus
+                  disabled = {this.state.isUpdate? "" : "disabled"}
+                />
+              </div>
+              <div className="mb-3">
+              <h1>phone number:</h1>
+                <input
+                  type="text"
+                  name="phone"
+                  id="phone"
+                  className="form-control"
+                  placeholder="phone number"
+                  defaultValue={this.state.phone}
+                  onChange={this.inputsHandler}
+                  required
+                  disabled = {this.state.isUpdate? "" :"disabled"}
+                />
+              </div>
+              <div className="mb-3">
+                <h1>address:</h1>
+                <input
+                  type="text"
+                  name="address"
+                  id="address"
+                  className="form-control"
+                  placeholder="Address"
+                  onChange={this.inputsHandler}
+                  defaultValue={this.state.address}
+                  required
+                  disabled = {this.state.isUpdate? "" :"disabled"}
+                />
+              </div>
+              <div className="mb-3" style={{display: this.state.isUpdate? "none" : "block"}}>
+              <h1>email:</h1>
+              <input
+                  type="text"
+                  name="email"
+                  id="email"
+                  className="form-control"
+                  placeholder="Email"
+                  defaultValue={this.state.email}
+                  onChange={this.inputsHandler}
+                  required
+                  disabled = "disabled" 
+                  />
+                  </div>
+                  <div className="mb-3" style={{display:this.state.isUpdate? "block" : "none"}}>
+                <input
+                  type="radio"
+                  name="degree"
+                  id="Worker"
+                  onChange={this.radioHandler}
+                  checked = {this.state.degree == "Seller" ? "checked" : null}
+                />
+                <label for="rd1">Worker</label>
+                <input
+                  type="radio"
+                  name="degree"
+                  id="Client"
+                  onChange={this.radioHandler}
+                  checked = {this.state.degree == "Customer" ? "checked" : null}
+                />
+                <label for="rd2">Client</label>
+              </div>
+              
+            </form>
+          </Modal.Body>
+          <Modal.Footer>
+            <h5>{this.state.ERROR}</h5>
+            <div className="modal-footer">
+            <a
+              role="button"
+              style={{display: this.state.isUpdate? "block" : "none"}}
+              onClick={() => this.changeUpdate()}
+            >
+              <FaEye/>
+            </a>
+            <a
+              role="button"
+              style={{display: !this.state.isUpdate? "block" : "none"}}
+              onClick={() => this.changeUpdate()}
+            >
+              <FaPen/>
+            </a>
+            <button onClick={() => this.updateUser()} className="button-17" style={{display: this.state.isUpdate? "block" : "none"}}>Update</button>
+            </div>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default UpdateUserModal;