menegdoc

src/container/DocumentManagement/EditManagementDoc.js

@@ -40,7 +40,10 @@ export default class EditManagementDoc extends Component {
             messageAlert: '',
             fileType: '',
             konfirmasi: false,
-            docId:''
+            docId: '',
+            document_name: "",
+            document_size: 0,
+            loadUpload: false
         }
     }
 
@@ -50,7 +53,7 @@ export default class EditManagementDoc extends Component {
         }
     }
 
-    getDetailDoc(){
+    getDetailDoc() {
         api.create().getDetailDocument(this.props.idoc).then(response => {
             console.log(response)
             if (response.data) {
@@ -65,10 +68,13 @@ export default class EditManagementDoc extends Component {
                             period: data.document_periode,
                             getMonthName: data.document_month,
                             description: data.description,
+                            document_name: data.document_name,
+                            document_size: data.document_size,
                             // id: data.approval_matrix_id,
                             // status: data.status,
                             created: data.created,
-                            updated: data.updated === null ? "" : data.updated 
+                            updated: data.updated === null ? "" : data.updated,
+                            loadUpload: true
                         }, () => {
                             this.getDataCompany()
                             this.getDataDocument()
@@ -110,7 +116,7 @@ export default class EditManagementDoc extends Component {
                         getOptionLabel: (option) => option.company_name,
                     };
                     let index = typeData.findIndex((val) => val.company_id == this.state.companyId)
-                    this.setState({ perusahaan: typeProps, perusahaanData: response.data.data, getPerusahaan: index === -1 ? typeData[0]: typeData[index] })
+                    this.setState({ perusahaan: typeProps, perusahaanData: response.data.data, getPerusahaan: index === -1 ? typeData[0] : typeData[index] })
                 } else {
                     this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                         if (response.data.message.includes("Someone Logged In")) {
@@ -150,7 +156,7 @@ export default class EditManagementDoc extends Component {
                         getOptionLabel: (option) => option.document_category_name,
                     };
                     let index = typeData.findIndex((val) => val.document_category_id == this.state.categoryId)
-                    this.setState({ document: typeProps, documentData: response.data.data, getDocument: index === -1 ? typeData[0]: typeData[index]   })
+                    this.setState({ document: typeProps, documentData: response.data.data, getDocument: index === -1 ? typeData[0] : typeData[index] })
                 } else {
                     this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                         if (response.data.message.includes("Someone Logged In")) {
@@ -190,7 +196,7 @@ export default class EditManagementDoc extends Component {
         })
     }
 
-    getMonth(){
+    getMonth() {
         api.create().getMonthTransaction().then(response => {
             let dateNow = new Date
             // let bulan = format(dateNow, 'MMMM')
@@ -258,14 +264,14 @@ export default class EditManagementDoc extends Component {
             formData.append("description", this.state.description);
             formData.append("extension", this.state.fileType);
             formData.append("documentId", this.props.idoc);
-            this.setState({ formData }, ()=> {
+            this.setState({ formData }, () => {
                 this.props.updateDocument(this.state.formData)
             })
         }
     }
 
-    deleteFile(e){
-        this.setState({ file: null})
+    deleteFile(e) {
+        this.setState({ file: null })
     }
 
     closeAlert() {
@@ -373,6 +379,7 @@ export default class EditManagementDoc extends Component {
                             </div>
                         </div>
                         <div style={{ paddingLeft: 30, paddingRight: 30 }}>
+                            {this.state.loadUpload && (
                                 <UploadFile
                                     type={this.state.uploadStatus}
                                     percentage={this.state.percentage}
@@ -388,7 +395,10 @@ export default class EditManagementDoc extends Component {
                                     }}
                                     onUpload={() => alert('sukses')}
                                     value={this.state.file}
+                                    docSize={this.state.document_size}
+                                    docName={this.state.document_name}
                                 />
+                            )}
                         </div>
                         <div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
                             <TextField

src/library/Upload.js

@@ -45,6 +45,13 @@ class Upload extends Component {
         }
     }
 
+    componentDidMount() {
+        if (this.props.docName !== undefined && this.props.docName !== "") {
+            console.log('masuk');
+            this.setState({ docName: this.props.docName, docSize: this.props.docSize, inputVisible: false, editVisible: true })
+        }
+    }
+
     onDrop = (acceptedFiles) => {
         const formData = new FormData()
         let length = acceptedFiles[0].name.split(".").length
@@ -116,6 +123,7 @@ class Upload extends Component {
         if (this.props.intent === "management") {
             this.setState({
                 previewVisible: false,
+                editVisible: false,
                 inputVisible: true,
                 uploadProgress: false,
                 percentage: '0'
@@ -124,6 +132,7 @@ class Upload extends Component {
         } else {
             this.setState({
                 previewVisible: false,
+                editVisible: false,
                 inputVisible: true,
                 uploadProgress: false,
                 percentage: '0'
@@ -187,6 +196,29 @@ class Upload extends Component {
                                     </div>
                                     : null}
 
+                                {/* edit */}
+                                {this.state.editVisible ?
+                                    <div className="u-p-file u-p-preview">
+                                        <div className="display-flex-normal">
+                                            <div className="width width-35px">
+                                                <button
+                                                    onClick={this.onRemove}
+                                                    className="btn btn-small-circle btn-black"
+                                                    type="button">
+                                                    <img src={Images.close} />
+                                                </button>
+                                            </div>
+                                            <div className="width width-full margin-left-10px">
+                                                <div className="txt-site txt-12 txt-white txt-bold">
+                                                    {this.state.docName}
+                                                </div>
+                                                <div className="txt-site txt-11 txt-white txt-thin">
+                                                    {this.state.docSize} KB
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    : null}
                                 {/* file */}
                                 {this.state.previewVisible
                                     ?