diff --git a/src/components/CardKatalog/CardKatalog.css b/src/components/CardKatalog/CardKatalog.css
index 9ed8ee043d2136c011f3c148ef0a510e9d56ac7d..bcbdb222071efc1e46d2975e496e39e36e8c7a08 100644
--- a/src/components/CardKatalog/CardKatalog.css
+++ b/src/components/CardKatalog/CardKatalog.css
@@ -15,4 +15,12 @@
}
.card-produk-a{
height: 420px ;
+}
+
+.row.produk-button {
+ justify-content: center;
+}
+.forum-button.wkd-red-button.hapus-produk-btn{
+ margin: 0;
+ width: 7rem;
}
\ No newline at end of file
diff --git a/src/components/CardKatalog/CardKatalog.js b/src/components/CardKatalog/CardKatalog.js
index e868548c9dccc02ef15e7ee0570a94bfbfd17c78..da25eb0d84f2a32d0944a9aca493ac3372980b79 100644
--- a/src/components/CardKatalog/CardKatalog.js
+++ b/src/components/CardKatalog/CardKatalog.js
@@ -4,6 +4,7 @@ import Card from 'react-bootstrap/Card'
import CardColumns from 'react-bootstrap/CardColumns'
import emptyIcon from '../../empty.svg';
import PopUpDeleteProduk from '../PopUpDeleteProduk/PopUpDeleteProduk'
+import { Link } from 'react-router-dom';
const CardKatalog = ({posts, loading, role}) =>{
if (loading) {
@@ -32,7 +33,15 @@ const CardKatalog = ({posts, loading, role}) =>{
</Card.Text>
{role=='Supplier' &&
<Card.Text className="card-produk-hapus">
- <PopUpDeleteProduk pk={post.id} />
+ <div className='row produk-button'>
+ <Link to={"/produk-update/"+post.id}>
+ <button
+ className="forum-button wkd-red-button hapus-produk-btn mr-3">
+ <span>Update</span>
+ </button>
+ </Link>
+ <PopUpDeleteProduk pk={post.id} />
+ </div>
</Card.Text>}
</Card.Body>
</Card>
diff --git a/src/components/FormProduk/FormProduk.js b/src/components/FormProduk/FormProduk.js
index 14368959fd1c45143f82f8180565aa6a7e5cfdc6..3b1db1687458fa07c5956d5b7fa38cfdcd09f756 100644
--- a/src/components/FormProduk/FormProduk.js
+++ b/src/components/FormProduk/FormProduk.js
@@ -244,7 +244,7 @@ const FormProduk = ({ match, method }) => {
))
var tmp_variasi = {"nama_variasi": nama_variasi_tmp, "pilihan_variasi": pilihan_variasi_tmp, "stok_variasi":stok_variasi_tmp}
setVariasiTemp(tmp_variasi)
- var lst_count_variasi = range(0, nama_variasi.length-1)
+ var lst_count_variasi = range(0, nama_variasi_tmp.length-1)
addCounterVariasi(lst_count_variasi)
}
catch (err) {
diff --git a/src/page/Produk/ProdukUpdate.js b/src/page/Produk/ProdukUpdate.js
index c5696de3306903fe30e5cb305dcc79579a50ac03..2f00f6ed1a3a6c8a05c79b53b9e35a5cbd3d1cdd 100644
--- a/src/page/Produk/ProdukUpdate.js
+++ b/src/page/Produk/ProdukUpdate.js
@@ -1,241 +1,10 @@
import { connect } from 'react-redux';
import Card from 'react-bootstrap/Card'
-import { useState, useEffect } from 'react';
import './Produk.css'
-import { Link, Redirect } from 'react-router-dom';
-import axios from 'axios';
+import { Redirect } from 'react-router-dom';
+import FormProduk from '../../components/FormProduk/FormProduk';
const ProdukUpdate = ({ isAuthenticated, user, match }) => {
- const [posted, setPosted] = useState(false)
- const [loading, setLoading] = useState(false)
- const KATEGORI_CHOICES = [
- ['AT', 'Alat Tulis'],
- ['E', 'Elektronik'],
- ['FBNA', 'Fashion Bayi dan Anak'],
- ['FM', 'Fashion Muslim'],
- ['FP', 'Fashion Pria'],
- ['FW', 'Fashion Wanita'],
- ['HDA', 'Handphone dan Aksesoris'],
- ['HDK', 'Hobi dan Koleksi'],
- ['IDB', 'Ibu dan Bayi'],
- ['K', 'Kesehatan'],
- ['KDA', 'Komputer dan Aksesoris'],
- ['M', 'Mainan'],
- ['MDM', 'Makanan dan Minuman'],
- ['ODO', 'Olahraga dan Outdoor'],
- ['O', 'Otomotif'],
- ['PDK', 'Perawatan dan Kecantikan'],
- ['PR', 'Perlengkapan Rumah'],
- ['SDP', 'Souvenir dan Pesta'],
- ]
-
- const EKSPEDISI_CHOICES = [
- ['JNER', 'JNE Reguler'],
- ['JNEY', 'JNE YES'],
- ['JNEJ', 'JNE JTR'],
- ['POSKK', 'Pos Kilat Khusus'],
- ['J&T', 'J&T Express'],
- ['SiCepatR', 'SiCepat REG'],
- ['SiCepatH', 'SiCepat Halu'],
- ['GrabI', 'Grab Express Instan'],
- ['GrabS', 'Grab Express Same Day'],
- ['GojekI', 'Gojek Instan'],
- ['GojekS', 'Gojek Same Day'],
- ['Ninja', 'Ninja Xpress'],
- ['ID', 'ID Express'],
- ['Anteraja', 'Anteraja']
- ]
-
- const [counter_variasi, addCounterVariasi] = useState([]);
-
- const handleTambahVariasi = () => {
- var prevCount = [...counter_variasi]
- var new_element = 0
- if (prevCount.length !== 0){
- var last_element = prevCount.slice(-1)[0]
- new_element = last_element+1
- }
- addCounterVariasi(prev=>[...prev, new_element])
- }
-
- const [variasiTemp, setVariasiTemp] = useState({
- nama_variasi:[],
- pilihan_variasi : [],
- stok_variasi: []
- })
-
- const {
- nama_variasi,
- pilihan_variasi,
- stok_variasi
- } = variasiTemp
-
- const [formData, setFormData] = useState({
- judul: '',
- deskripsi: '',
- kategori: 'AF',
- merek: '',
- kondisi: 'Baru',
- isBerbahaya: false,
- isMudahPecah: false,
- thumbnail: [],
- fileProduk: [],
- harga: 0,
- stok:0,
- minPembelian:0,
- variasi: [],
- berat: 0,
- jasaPengiriman: []
- });
-
- const {
- judul,
- deskripsi,
- kategori,
- merek,
- kondisi,
- isBerbahaya,
- isMudahPecah,
- thumbnail,
- fileProduk,
- harga,
- stok,
- minPembelian,
- variasi,
- berat,
- jasaPengiriman
- } = formData;
-
- const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });
-
- const onSelectFile = e => {
- setFormData({ ...formData, [e.target.name]: e.target.files });
- }
-
- const onSelectJasaPengiriman = e => {
- setFormData({ ...formData, jasaPengiriman: [...jasaPengiriman, {'ekspedisi':e.target.value}] });
- }
-
- const onChangeVariasi = e => {
- var index = e.target.name.slice(-1)
- var name = e.target.name.slice(0,-1)
- var value = e.target.value
- var new_list = []
- switch(name){
- case 'nama_variasi':
- new_list = [...nama_variasi]
- break
- case 'pilihan_variasi':
- new_list = [...pilihan_variasi]
- break
- case 'stok_variasi':
- new_list = [...stok_variasi]
- break
- }
- new_list[index] = value
- setVariasiTemp(prev=>({ ...prev, [name]: new_list }));
- }
-
- const config = {
- headers: {
- 'Content-Type': 'multipart/form-data',
- 'Authorization': `JWT ${localStorage.getItem('access')}`,
- }
- };
-
- const processVariasi = () => {
- var len_list_variasi = variasiTemp['nama_variasi'].length
- var temp_dict_variasi = {}
- for(var i=0; i<len_list_variasi;i++){
- var tmp_nama_variasi = variasiTemp['nama_variasi'][i]
- var tmp_pilihan_variasi = variasiTemp['pilihan_variasi'][i]
- var tmp_stok_variasi = variasiTemp['stok_variasi'][i]
- temp_dict_variasi = {'nama_variasi':tmp_nama_variasi, 'pilihan_variasi':tmp_pilihan_variasi, 'stok':tmp_stok_variasi}
- variasi.push(temp_dict_variasi)
- }
- setFormData({ ...formData, variasi: variasi });
- }
-
- const postProduk = async () => {
- setLoading(true)
- var formDataToSend = new FormData();
- formDataToSend.append('judul', judul);
- formDataToSend.append('deskripsi', deskripsi);
- formDataToSend.append('kategori', kategori);
- formDataToSend.append('merek', merek);
- formDataToSend.append('kondisi', kondisi);
- formDataToSend.append('isBerbahaya', isBerbahaya);
- formDataToSend.append('isMudahPecah', isMudahPecah);
- formDataToSend.append('thumbnail', thumbnail[0]);
- for (let i = 0; i < formData['fileProduk'].length; i++) {
- formDataToSend.append('file_produk', formData['fileProduk'][i], formData['fileProduk'][i].name);
- }
- formDataToSend.append('harga', harga);
- formDataToSend.append('stok', stok);
- formDataToSend.append('min_pembelian', minPembelian);
- formDataToSend.append('variasi', JSON.stringify(variasi));
- formDataToSend.append('berat', berat);
- formDataToSend.append('jasa_pengiriman', JSON.stringify(jasaPengiriman));
-
- await axios.put(`${process.env.REACT_APP_BACKEND_API_URL}/api/produk/edit/${match.params.pk}`, formDataToSend, config)
- .then((response) => {
- console.log(response);
- alert('Anda berhasil mengubah produk!');
- setLoading(false)
- setPosted(true)
- }, (error) => {
- console.log(error);
- alert("Terdapat kesalahan. Mohon refresh ulang halaman ini")
- });
- }
-
- const handleSubmit = e => {
- e.preventDefault();
- processVariasi();
- postProduk();
- }
-
- function range(start, end) {
- return Array(end - start + 1).fill().map((_, idx) => start + idx)
- }
-
- const fetchProdukDetail = async () => {
- try {
- var produk = await axios.get(`${process.env.REACT_APP_BACKEND_API_URL}/api/produk/${match.params.pk}/`, config);
- setFormData(produk.data);
- setFormData(prev=>({ ...prev, fileProduk:[] }));
- setFormData(prev=>({ ...prev, thumbnail:[] }));
- setFormData(prev=>({ ...prev, variasi:[] }));
- var variasi_tmp = produk.data.variasi
- var nama_variasi = variasi_tmp.map(v=>(
- v['namaVariasi']
- ))
- var pilihan_variasi = variasi_tmp.map(v=>(
- v['pilihanVariasi']
- ))
- var stok_variasi = variasi_tmp.map(v=>(
- v['stok']
- ))
- var tmp_variasi = {"nama_variasi": nama_variasi, "pilihan_variasi": pilihan_variasi, "stok_variasi":stok_variasi}
- setVariasiTemp(tmp_variasi)
- var lst_count_variasi = range(0, nama_variasi.length-1)
- addCounterVariasi(lst_count_variasi)
- }
- catch (err) {
- alert('Terjadi kesalahan saat fetching data pengadaan')
- }
- }
-
-
- useEffect(() => {
- fetchProdukDetail();
- }, []);
-
- console.log(formData)
- if (posted){
- return <Redirect to="/" />
- }
-
if (!isAuthenticated) return <Redirect to="/masuk" />
if (user.role !== "Supplier") return <Redirect to="/" />
@@ -252,336 +21,7 @@ const ProdukUpdate = ({ isAuthenticated, user, match }) => {
<p>Tentukan Detail yang Tepat untuk Produkmu!</p>
</div>
- <div className='form-produk'>
- <form id="d-t-form" className="centered" onSubmit={handleSubmit}>
- <div className="justify-content-center">
-
- <h5 className="regist-midtext mb-5 mt-5 font-weight-bold" ><span>Informasi Produk</span></h5>
- <div className="form-group row">
- <label htmlFor='judul' className="col-sm-3 col-form-label"> <span className="required"> * </span> Judul : </label>
- <div className="col-sm-9">
- <input
- id='judul'
- className='form-control'
- type='text'
- placeholder='Nama Produk'
- name='judul'
- value={judul}
- onChange={e => onChange(e)}
- data-testid="input-judul"
- required
- />
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='deskripsi' className="col-sm-3 col-form-label"> <span className="required"> * </span> Deskripsi : </label>
- <div className="col-sm-9">
- <textarea
- id='deskripsi'
- className='form-control'
- type='text'
- rows='4'
- placeholder='Tuliskan deskripsi singkat dari produk Anda.'
- name='deskripsi'
- value={deskripsi}
- onChange={e => onChange(e)}
- data-testid="input-deskripsi"
- required
- />
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='kategori' className="col-sm-3 col-form-label"> <span className="required"> * </span> Kategori : </label>
- <div className="col-sm-9">
- <select name="kategori" onChange={e => onChange(e)} data-testid="input-kategori" value={kategori}>
- <option selected value='AF'>Aksesoris Fashion</option>
- {KATEGORI_CHOICES.map(kategori=>(
- <option value={kategori[0]}>{kategori[1]}</option>
- ))}
- </select>
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='merek' className="col-sm-3 col-form-label"> <span className="required"> * </span> Merek : </label>
- <div className="col-sm-9">
- <input
- id='merek'
- className='form-control'
- type='text'
- name='merek'
- value={merek}
- onChange={e => onChange(e)}
- data-testid="input-merek"
- required
- />
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='kondisi' className="col-sm-3 col-form-label"> <span className="required"> * </span> Kondisi : </label>
- <div className="col-sm-9">
- <select name="kondisi" onChange={e => onChange(e)} data-testid="input-kondisi" value={kondisi}>
- <option selected value='Baru'>Baru</option>
- <option value='Second'>Second</option>
- </select>
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='isBerbahaya' className="col-sm-3 col-form-label"> <span className="required"> * </span> Produk Berbahaya : </label>
- <div className="row d-flex align-items-center ml-4">
- <div className='mr-5'>
- <input
- type='radio'
- name='isBerbahaya'
- value={false}
- data-testid="input-isBerbahaya"
- required
- className="mr-4 pil-mainan"
- checked={isBerbahaya === "false" || isBerbahaya === false}
- onChange={e => onChange(e)}
- />Tidak
- </div>
- <div>
- <input
- type='radio'
- name='isBerbahaya'
- value={true}
- required
- className="mr-4 pil-mainan"
- checked={isBerbahaya === "true" || isBerbahaya === true}
- onChange={e => onChange(e)}
- />Mengandung baterai/magnet/cairan/bahan mudah terbakar
- </div>
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='isMudahPecah' className="col-sm-3 col-form-label"> <span className="required"> * </span> Mudah Pecah : </label>
- <div className="row d-flex align-items-center ml-4">
- <div className='mr-5'>
- <input
- type='radio'
- name='isMudahPecah'
- value={false}
- data-testid="input-isMudahPecah"
- required
- className="mr-4 pil-mainan"
- checked={isMudahPecah === "false" || isMudahPecah === false}
- onChange={e => onChange(e)}
- />Tidak
- </div>
- <div>
- <input
- type='radio'
- name='isMudahPecah'
- value={true}
- required
- className="mr-4 pil-mainan"
- checked={isMudahPecah === "true" || isMudahPecah === true}
- onChange={e => onChange(e)}
- />Mudah Pecah
- </div>
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='thumbnail' className="col-sm-3 col-form-label"><span className="required"> * </span> Thumbnail : </label>
- <div className="col-sm-9">
- <div className='files'>
- <label for="files" className='upload-button'>
- + <br></br> Upload
- </label>
- <input
- className='input-file'
- id="thumbnail"
- role="thumbnail"
- type="file"
- name="thumbnail"
- accept='image/*'
- onChange={e=> onSelectFile(e)}
- data-testid="input-thumbnail"/>
- </div>
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='file_produk' className="col-sm-3 col-form-label"> File Produk : <br></br><span id='multiple-file'>(dapat unggah lebih dari satu file)</span></label>
- <div className='col-sm-9'>
- <div className='files'>
- <label for="files" className='upload-button'>
- + <br></br> Upload
- </label>
- <input
- className='input-file'
- id="file_produk"
- role="fileProduk"
- type="file"
- name="fileProduk"
- onChange={e=>onSelectFile(e)}
- multiple
- data-testid="input-file_produk"/>
- </div>
- </div>
- </div>
-
- <h5 className="regist-midtext mt-5 mb-5 font-weight-bold" ><span>Informasi Penjualan</span></h5>
- <div className="form-group row">
- <label htmlFor='harga-produk' className="col-sm-3 col-form-label"> <span className="required"> * </span> Harga : </label>
- <div className="col-sm-9">
- <input
- id='harga-produk'
- className='form-control'
- type='number'
- placeholder='Masukkan harga produk dalam satuan rupiah'
- name='harga'
- value={harga}
- onChange={e=>onChange(e)}
- data-testid="input-harga"
- required
- />
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='stok' className="col-sm-3 col-form-label"> <span className="required"> * </span> Stok : </label>
- <div className="col-sm-9">
- <input
- id='stok'
- className='form-control'
- type='number'
- name='stok'
- value={stok}
- onChange={e=>onChange(e)}
- data-testid="input-stok"
- required
- />
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='min_pembelian' className="col-sm-3 col-form-label"> <span className="required"> * </span> Minimal Pembelian : </label>
- <div className="col-sm-9">
- <input
- id='min_pembelian'
- className='form-control'
- type='number'
- name='minPembelian'
- value={minPembelian}
- onChange={e=>onChange(e)}
- data-testid="input-min-pembelian"
- required
- />
- </div>
- </div>
- {counter_variasi.map(counter=>(
- <div className="form-group row">
- <label htmlFor='variasi' className="col-sm-3 col-form-label"> Variasi : </label>
- <div className="col-sm-9">
- <Card className='card-variasi'>
- <div className="form-group row">
- <label htmlFor='nama_variasi' className="col-sm-3 col-form-label"> <span className="required"> * </span> Nama : </label>
- <div className="col-sm-9">
- <input
- id='nama_variasi'
- className='form-control'
- type='text'
- name={'nama_variasi'+counter}
- placeholder="Rasa, Warna, Motif,..."
- value={nama_variasi[counter]}
- onChange={e=>onChangeVariasi(e)}
- data-testid="input-nama_variasi"
- required
- />
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='pilihan_variasi' className="col-sm-3 col-form-label"> <span className="required"> * </span> Pilihan : </label>
- <div className="col-sm-9">
- <input
- id='piliha_variasi'
- className='form-control'
- type='text'
- name={'pilihan_variasi'+counter}
- value={pilihan_variasi[counter]}
- onChange={e=>onChangeVariasi(e)}
- data-testid="input-pilihan_variasi"
- required
- />
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='stok_variasi' className="col-sm-3 col-form-label"> <span className="required"> * </span> Stok : </label>
- <div className="col-sm-9">
- <input
- id='stok_variasi'
- className='form-control'
- type='number'
- name={'stok_variasi'+counter}
- value={stok_variasi[counter]}
- onChange={e=>onChangeVariasi(e)}
- data-testid="input-stok_variasi"
- required
- />
- </div>
- </div>
- </Card>
- </div>
- </div>
- ))}
- <div className="form-group row">
- <label htmlFor='tambah-variasi' className="col-sm-3 col-form-label"> Tambah Variasi : </label>
- <div className="col-sm-9">
- <button className="wkd-button wkd-blue-border-button align-button-1 tambah-variasi" data-testid="button-tambah-variasi" type='button' onClick={handleTambahVariasi}> + Tambah Variasi</button>
- </div>
- </div>
-
- <h5 className="regist-midtext mt-5 mb-5 font-weight-bold" ><span>Pengiriman</span></h5>
- <div className="form-group row">
- <label htmlFor='berat' className="col-sm-3 col-form-label"> <span className="required"> * </span> Berat : </label>
- <div className="col-sm-9">
- <input
- id='berat'
- className='form-control'
- type='number'
- placeholder='Masukkan berat produk dalam satuan gram'
- name='berat'
- value={berat}
- onChange={e=>onChange(e)}
- data-testid="input-berat"
- required
- />
- </div>
- </div>
- <div className="form-group row">
- <label htmlFor='jasa_pengiriman' className="col-sm-3 col-form-label">Jasa Pengiriman : </label>
- <div className="col-sm-9">
- <Card className='card-jasa-pengiriman'>
- <div className='mr-5 ml-5 mt-4 mb-4'>
- {EKSPEDISI_CHOICES.map(ekspedisi=>(
- <div>
- <input
- data-testid="input-jasa_pengiriman"
- type='checkbox'
- name='jasaPengiriman'
- value={ekspedisi[0]}
- className="mr-4 pil-mainan mt-3"
- checked={jasaPengiriman.map(jp=>(
- jp['ekspedisi']
- )).includes(ekspedisi[0])}
- onChange={e=>onSelectJasaPengiriman(e)}
- />{ekspedisi[1]}
- </div>
- ))}
- </div>
- </Card>
- </div>
- </div>
-
- </div>
- <div className="wkd-form-post-utama-button-section">
- <Link to="">
- <button className="wkd-button wkd-blue-border-button align-button-1" data-testid="back-button">Batal</button>
- </Link>
- <button id="post-button" data-testid="post-button" className="wkd-button wkd-blue-button align-button-2" type="submit">
- Simpan{loading && <span>...</span>}
- </button>
- </div>
- </form>
- </div>
+ <FormProduk match={match} method="PUT"></FormProduk>
</Card>
</div>
</div>