-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added fast attachment upload to improve system ux
update detach word mistake fixed
- Loading branch information
Showing
13 changed files
with
726 additions
and
368 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,230 @@ | ||
| <template> | ||
| <div id="fast-attaching"> | ||
|
|
||
| <i class="ri-add-line" id="new-attach" data-bs-toggle="tooltip" | ||
| data-bs-placement="top" | ||
| data-bs-custom-class="custom-tooltip" | ||
| data-bs-title="Add new attachment" @click="isShowNew = !isShowNew"></i> | ||
|
|
||
| <div class="row mt-4" v-if="isShowNew"> | ||
| <div class="col-md"> | ||
| <input type="text" placeholder="Title" v-model="title" class="form-control"> | ||
| </div> | ||
| <div class="col-md"> | ||
| <input type="file" class="form-control" id="upload-attachment-file" ref="fileInput"> | ||
| </div> | ||
| <div class="col-md-2"> | ||
| <button class="btn btn-primary w-100" | ||
| data-bs-toggle="tooltip" | ||
| data-bs-placement="top" | ||
| data-bs-custom-class="custom-tooltip" | ||
| data-bs-title="Upload" | ||
| @click="upload"> | ||
| <i class="ri-upload-2-line"></i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="progress" v-if="isShowProgress"> | ||
| Uploading {{ title }} | ||
| <div id="percent" :style="percentStyle"></div> | ||
| </div> | ||
|
|
||
| <ul class="list-group my-4"> | ||
| <li v-for="(attach,i) in attachments" :key="attach.id" class="list-group-item"> | ||
| <div class="row"> | ||
| <div class="col-md-1 pt-1"> | ||
| {{ i + 1 }} | ||
| </div> | ||
|
|
||
| <div class="col-md pt-1"> | ||
| <span class="badge bg-success"> | ||
| {{ attach.ext }} | ||
| </span> | ||
| </div> | ||
| <div class="col-md-4 pt-1"> | ||
| <template v-if="xlang == null"> | ||
| {{ attach.title }} | ||
| </template> | ||
| <template v-else> | ||
| {{ attach['title']?.[xlang] ?? attach.title }} | ||
| </template> | ||
| </div> | ||
|
|
||
| <div class="col-md-4 pt-1"> | ||
| {{ attach.file }} | ||
| </div> | ||
| <div class="col-md-1"> | ||
| <div class="btn btn-secondary btn-sm w-100" data-bs-toggle="tooltip" | ||
| data-bs-placement="top" | ||
| data-bs-custom-class="custom-tooltip" | ||
| data-bs-title="Detach" | ||
| @click="detach(attach.slug,i)" | ||
| > | ||
| <i class="ri-close-line"></i> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import axios from 'axios'; | ||
| export default { | ||
| name: "fast-attaching", | ||
| data() { | ||
| return { | ||
| title: '', | ||
| isShowNew: false, | ||
| isShowProgress: false, | ||
| percent: 0, | ||
| } | ||
| }, | ||
| props: { | ||
| attachments: { | ||
| type: Array, | ||
| default: () => [], | ||
| }, | ||
| xlang: { | ||
| default: null | ||
| }, | ||
| uploadUrl: { | ||
| type: String, | ||
| default: 'http://127.0.0.1:8000/dashboard/attachments/attaching', | ||
| }, | ||
| detachUrl: { | ||
| type: String, | ||
| default: 'http://127.0.0.1:8000/dashboard/attachments/attaching', | ||
| }, | ||
| model: { | ||
| type: String, | ||
| default: 'App\\Models\\Post' | ||
| }, | ||
| id: { | ||
| type: Number, | ||
| default: '1', | ||
| }, | ||
| }, | ||
| computed: { | ||
| percentStyle() { | ||
| return 'width:' + this.percent + '%;'; | ||
| } | ||
| }, | ||
| methods: { | ||
| async detach(slug, index) { | ||
| if (!confirm(window.TR.deleteConfirm)) { | ||
| return false; | ||
| } | ||
| try { | ||
| const response = await axios.get(this.detachUrl + slug); | ||
| if (response.data.OK) { | ||
| $toast.success(response.data.message); | ||
| this.attachments.splice(index, 1); | ||
| if (document.querySelector('#attach-number') != null){ | ||
| document.querySelector('#attach-number').innerText = this.attachments.length; | ||
| } | ||
| this.$forceUpdate(); | ||
| } else { | ||
| $toast.error("Detach problem!"); | ||
| } | ||
| } catch (e) { | ||
| $toast.error(e.message); | ||
| } | ||
| }, | ||
| async upload() { | ||
| console.log('upload start'); | ||
| if (this.title.length < 2) { | ||
| this.$toast.error('Title is incorrect'); | ||
| return false; | ||
| } | ||
| const fileInput = this.$refs.fileInput; | ||
| if (fileInput.files.length === 0) { | ||
| this.$toast.error('File is incorrect'); | ||
| return false; | ||
| } | ||
| this.isShowNew = false; | ||
| this.isShowProgress = true; | ||
| this.percent = 0; // Reset the percent | ||
| const formData = new FormData(); | ||
| formData.append('title', this.title); | ||
| formData.append('attachable_id', this.id); | ||
| formData.append('attachable_type', this.model); | ||
| formData.append('file', fileInput.files[0]); // Assuming only one file is selected | ||
| try { | ||
| const response = await axios.post(this.uploadUrl, formData, { | ||
| headers: { | ||
| 'Content-Type': 'multipart/form-data' | ||
| }, | ||
| onUploadProgress: progressEvent => { | ||
| if (progressEvent.lengthComputable) { | ||
| this.percent = Math.round((progressEvent.loaded * 100) / progressEvent.total); | ||
| } | ||
| } | ||
| }); | ||
| // Handle the response | ||
| console.log(response.data); | ||
| if (response.data.OK) { | ||
| this.$toast.success(response.data.message); | ||
| this.attachments.push(response.data.data); // Adjust based on your response | ||
| if (document.querySelector('#attach-number') != null){ | ||
| document.querySelector('#attach-number').innerText = this.attachments.length; | ||
| } | ||
| this.title = ''; | ||
| } | ||
| // Optionally, add the new attachment to the attachments array | ||
| } catch (error) { | ||
| console.error(error); | ||
| this.$toast.error('Upload failed!'); | ||
| } finally { | ||
| this.isShowProgress = false; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <style scoped> | ||
| #fast-attaching { | ||
| } | ||
| #new-attach { | ||
| position: absolute; | ||
| inset-inline-end: 80px; | ||
| top: 0; | ||
| padding: 5px; | ||
| background: rgba(8, 255, 0, 0.2); | ||
| font-size: 30px; | ||
| border-radius: 0 0 7px 7px; | ||
| cursor: pointer; | ||
| &:hover { | ||
| background: rgba(8, 255, 0, 0.4); | ||
| } | ||
| } | ||
| #progress { | ||
| margin: 2rem 0; | ||
| border: 1px solid #ffffff22; | ||
| border-radius: 7px; | ||
| overflow: hidden; | ||
| text-align: center; | ||
| position: relative; | ||
| } | ||
| #percent { | ||
| background: rgba(8, 255, 0, 0.4); | ||
| position: absolute; | ||
| inset-inline-start: 0; | ||
| top: 0; | ||
| bottom: 0; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| document.addEventListener('DOMContentLoaded', function () { | ||
|
|
||
| let attachFrom = document.querySelector('#attaching-form'); | ||
| document.querySelector('#attach-down')?.addEventListener('click', function () { | ||
| attachFrom.style.bottom = (window.innerHeight * -.5+'px'); | ||
| }); | ||
| document.querySelector('#show-attach-form')?.addEventListener('click', function (e) { | ||
| e.preventDefault(); | ||
| attachFrom.style.bottom = ('0px'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.