-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from rkshaon/shaon
rework: frontend
- Loading branch information
Showing
6 changed files
with
210 additions
and
92 deletions.
There are no files selected for viewing
101 changes: 101 additions & 0 deletions
101
frontend/src/components/admin/category/AdminAddCategoryComponent.vue
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,101 @@ | ||
| <template> | ||
| <div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" | ||
| aria-hidden="true" ref="addCategoryModal"> | ||
| <div class="modal-dialog"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title" id="addCategoryModalLabel">Add Category</h5> | ||
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <form @submit.prevent="createCategory"> | ||
| <div class="mb-3"> | ||
| <label for="title" class="form-label">Title</label> | ||
| <input type="text" class="form-control" id="title" v-model="categoryForm.title"> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label for="shortTitle" class="form-label">Short Title</label> | ||
| <input type="text" class="form-control" id="shortTitle" v-model="categoryForm.short_title"> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label for="icon" class="form-label">Icon</label> | ||
| <input type="file" class="form-control" id="icon" @change="handleFileChangeOnInsert"> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label for="description" class="form-label">Description</label> | ||
| <textarea class="form-control" id="description" rows="3" v-model="categoryForm.description" | ||
| maxlength="255"></textarea> | ||
| </div> | ||
| <button type="submit" class="btn btn-primary">Save</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Modal } from 'bootstrap'; | ||
| import adminCategoryAPI from "@/services/adminCategoryAPI"; | ||
| export default { | ||
| name: 'AdminAddCategoryComponent', | ||
| data() { | ||
| return { | ||
| categoryForm: { | ||
| title: '', | ||
| short_title: '', | ||
| icon: null, | ||
| description: '', | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| showAddCategoryModal() { | ||
| const modalElement = this.$refs.addCategoryModal; | ||
| console.log(modalElement); | ||
| if (modalElement) { | ||
| const modal = new Modal(modalElement); | ||
| modal.show(); | ||
| } else { | ||
| console.log('404'); | ||
| } | ||
| }, | ||
| handleFileChangeOnInsert(event) { | ||
| this.categoryForm.icon = event.target.files[0]; | ||
| }, | ||
| async createCategory() { | ||
| const formData = new FormData(); | ||
| formData.append('title', this.categoryForm.title); | ||
| formData.append('short_title', this.categoryForm.short_title); | ||
| formData.append('description', this.categoryForm.description); | ||
| formData.append('is_active', true); | ||
| if (this.categoryForm.icon) { | ||
| formData.append('icon', this.categoryForm.icon); | ||
| } | ||
| console.log(formData); | ||
| try { | ||
| const response = await adminCategoryAPI.createCategoryForAdmin(formData); | ||
| console.log('Create...', response.data); | ||
| this.successMessage = 'Category created successfully!'; | ||
| } catch (error) { | ||
| console.error('Failed...', error); | ||
| this.errorMessages.push({ | ||
| 'title': 'Create Category', | ||
| 'message': 'Failed to create a new category.', | ||
| }); | ||
| } | ||
| const modalElement = this.$refs.addCategoryModal; | ||
| const modal = new Modal(modalElement); | ||
| modal._hideModal(); | ||
| }, | ||
| }, | ||
| } | ||
| </script> |
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
28 changes: 28 additions & 0 deletions
28
frontend/src/components/admin/category/DeleteCategoryComponent.vue
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,28 @@ | ||
| <template> | ||
| <div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel" | ||
| aria-hidden="true"> | ||
| <div class="modal-dialog"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title" id="deleteCategoryModalLabel">Delete Category</h5> | ||
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
| </div> | ||
| <div class="modal-body text-start"> | ||
| <div class="mb-3"> | ||
| <label for="exampleInputText1" class="form-label">Are you sure?</label> | ||
| </div> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | ||
| <button type="button" class="btn btn-danger" @click="deleteCategory">Yes, delete</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'DeleteCategoryComponent', | ||
| } | ||
| </script> |
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,46 @@ | ||
| <template> | ||
| <div> | ||
| <div class="modal" tabindex="-1" id="testModal" ref="testModal"> | ||
| <div class="modal-dialog"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title">Modal Title</h5> | ||
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <p>Modal body text goes here.</p> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | ||
| <button type="button" class="btn btn-primary" @click="submit">Submit</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Modal } from 'bootstrap'; | ||
| export default { | ||
| name: 'ModalComponent', | ||
| methods: { | ||
| showTestModal() { | ||
| const modalElement = this.$refs.testModal; | ||
| if (modalElement) { | ||
| const modal = new Modal(modalElement); | ||
| modal.show(); | ||
| } else { | ||
| console.log('404'); | ||
| } | ||
| }, | ||
| submit() { | ||
| const modalElement = this.$refs.testModal; | ||
| const modal = new Modal(modalElement); | ||
| modal._hideModal(); | ||
| }, | ||
| }, | ||
| } | ||
| </script> |
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