update nhan anh

app/src/components/ImportImg/ImportImage.js

@@ -8,9 +8,10 @@ import { PulseLoader } from 'react-spinners';
 import Modalupload from '../Modal/ModalUpload';
 import ModalEditImg from '../Modal/ModalEditImg';
 import axios from 'axios';
-import { Avatar, Tooltip } from 'antd';
+import { Avatar, Tooltip, Image } from 'antd';
 import {UserOutlined} from '@ant-design/icons';
 import momment from 'moment';
+import Select from "react-select";
 class ImportImage extends Component {
     constructor(props) {
         super(props);
@@ -28,7 +29,9 @@ class ImportImage extends Component {
             modalShow: false,
             dataEdit: null,
             modalUploadShow: false,
-            dataSearch: ""
+            dataSearch: "",
+            optionSelect: [{value: 1, label:"Facebook"}, {value: 2, label: "Tải lên"}],
+            valueSelected: {value: 2, label:"Tải lên"},
         }
         this.itemsPerPage = 5;
     }
@@ -52,7 +55,8 @@ class ImportImage extends Component {
                 data: {
                     index: page,
                     item_per_page: this.itemsPerPage,
-                    search_data: this.state.dataSearch
+                    search_data: this.state.dataSearch,
+                    import_type: this.state.valueSelected.value
                 },
             })
 
@@ -149,11 +153,20 @@ class ImportImage extends Component {
         this.setState({
             activePage: 1,
             dataSearch: "",
+            valueSelected: {value: 2, label:"Tải lên"},
         }, () => {
             this.getListImg(1);
         })
     }
 
+    changeHandleFilter = (e) => {
+        this.setState({
+            valueSelected: e,
+            activePage: 1
+        }, () => {
+            this.getListImg(1);
+        });
+    }
 
     render() {
         // if (this.state.isLogin == false) {
@@ -162,9 +175,9 @@ class ImportImage extends Component {
         //     )
         // }
         let bulletedListImg = this.state.listImgImport.map((value, index) => {
-        
+  
         var listImg
-        listImg = <img key={index} style={{ width: "80px", height: "80px" }} alt="" src={`${value.image_host}`} />
+        listImg = <Image style={{ width: "80px", height: "auto", objectFit: "contain"}} alt="" src={`${value.image_host}`} />
 
 
         return (
@@ -172,6 +185,7 @@ class ImportImage extends Component {
                 <td>{(index + this.state.offset + 1)}</td>
                 <td>{listImg}</td>
                 <td>{value.origin_name}</td>
+                <td>{value.import_type === 1 ? "Facebook" : "Tải lên"}</td>
                 <td>{momment(value.created_time).format("DD-MM-YYYY")}</td>
                 <td>
                     <Tooltip placement="top" title={"Sửa"}>
@@ -235,6 +249,14 @@ class ImportImage extends Component {
                                     data-col-index={0}
                                 />
                             </div>
+                            <div className="form-group m-form__group col-xl-2">
+                            <Select
+                                    placeholder={'Loại ảnh'}
+                                    value={this.state.valueSelected}
+                                    onChange={this.changeHandleFilter}
+                                    options={this.state.optionSelect}
+                                />
+                                </div>
                             <div className="pl-3">
                                 <button
                                     onClick={() => {
@@ -285,6 +307,7 @@ class ImportImage extends Component {
                                 <th style={{width: "50px"}}>STT</th>
                                 <th>Ảnh</th>
                                 <th>Tên ảnh</th>
+                                <th>Loại ảnh</th>
                                 <th>Ngày tải lên</th>
                                 <th>Thao tác</th>
                             </tr>