295 lines
13 KiB
Vue
295 lines
13 KiB
Vue
<template>
|
||
<div class="ms-5">
|
||
<div class="col-7">
|
||
<div class="row">
|
||
<input type="text" v-bind:id="'searchString'" class="col-4"/>
|
||
<button type="button" v-on:click="getSearchResult()" class="button col-2 secondary outline">Поиск</button>
|
||
<button type="button" v-on:click="searchMode = -1;" class="button col-2 secondary outline">Отмена</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="!(searchMode == -1)">
|
||
<div v-if="!(searchResults.length == 0)" class="row">
|
||
<div class="col-5">
|
||
<div class="row mb-5 card" v-for="result in searchResults">
|
||
<div class="col">
|
||
|
||
<div v-if="result['title'] == null">
|
||
<div class="row is-left mt-2">
|
||
<span class="h3">Комментарий</span>
|
||
<!-- <p class="text-primary h2">Пользователь: {{ result['customerName'] }}</p> -->
|
||
<span class="h3">Контент: {{ result['content'] }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<div class="row is-left mt-2">
|
||
<span class="h3">Пост</span>
|
||
<!-- <p class="text-primary h2">Пользователь: {{ result['customerName'] }}</p> -->
|
||
<span class="h3">Оглавление: {{ result['title'] }}</span>
|
||
<span class="h3">Контент: {{ result['content'] }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="searchMode == -1">
|
||
<p class='h3 m-3'>Посты</p>
|
||
|
||
<div class="row" v-if="currentCustomerId != -1">
|
||
<div class="col-7">
|
||
<div class="row is-left">
|
||
<p class="col-2 is-left mb-2">Заголовок:</p>
|
||
<input type="text" class="col-5" v-model="titleModal"/>
|
||
</div>
|
||
<div class="row is-left">
|
||
<p class="col-2 is-left mb-2">Текст:</p>
|
||
<textarea type="textarea" class="col-5" v-model="postContentModal"/>
|
||
</div>
|
||
<div class="row is-left">
|
||
<button type='button' class="button btn-primary col-7" v-on:click='createPost'>
|
||
Опубликовать
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="!(posts.length == 0)" class="row">
|
||
<div class="col-5">
|
||
<div class="row mb-5 card" v-for="post in posts">
|
||
<div class="col">
|
||
<div class="row is-left my-3">
|
||
<p class="h2"><router-link v-bind:to="'/customers/' + post['customerId']" class="text-primary">{{ post['customerName'] }}</router-link></p>
|
||
</div>
|
||
|
||
<div class="row text-left">
|
||
<span class="h2">{{ post['title'] }}</span>
|
||
<span class="h3">{{ post['content'] }}</span>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div v-if="!(post['comments'].length == 0)">
|
||
<p class="row h3 is-left my-3">Комментарии:</p>
|
||
|
||
<div class="row text-left mb-4 card" v-for="comment in post['comments']">
|
||
<div class="row is-left">
|
||
<span class="h2"><router-link v-bind:to="'/customers/' + post['customerId']" class="text-primary">{{ post['customerName'] }}</router-link></span>
|
||
<span class="h3">{{ comment['content'] }}</span>
|
||
</div>
|
||
|
||
<div v-if="selectedCustomerContainsComment(comment) == true" class="row mt-3">
|
||
<button v-on:click="selectedCommentId = comment['id']; selectedPostTitle = post['title']" class="button primary outline col" data-bs-toggle="modal" data-bs-target="#commentEdit">Изменить</button>
|
||
<button v-on:click="deleteComment(comment['id'])" class="button error col">Удалить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" v-if="currentCustomerId != -1">
|
||
<input type="text" v-bind:id="'post-comment-' + post['id']" class="col-7"/>
|
||
<button type="button" v-on:click="selectedPostId = post['id']; selectedPostTitle = post['title']; createComment()" class="button col-5 secondary outline">Комментировать</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" v-if="post['customerId'] == currentCustomerId">
|
||
<button type="button" v-on:click="deletePost(post['id'])" class="col button dark outline">Удалить пост</button>
|
||
<button type="button" v-on:click="selectedPostId = post['id']" class="col button primary outline" data-bs-toggle="modal" data-bs-target="#postEdit">Изменить пост</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Modal -->
|
||
<div class="modal fade" id="postEdit" tabindex="-1" role="dialog" aria-labelledby="postEditLabel" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="postEditLabel">Редактировать пост</h5>
|
||
</div>
|
||
<div class="modal-body text-center">
|
||
<p>{{ currentCustomer['username'] }}</p>
|
||
<p>Заголовок</p>
|
||
<textarea v-model='titleModal' id="editModalTitle" cols="30" rows="1"></textarea>
|
||
<p>Содержание</p>
|
||
<textarea v-model='postContentModal' id="editModalPostContent" cols="30" rows="1"></textarea>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||
<button type="button" class="btn btn-primary" v-on:click='editPost'>Изменить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal -->
|
||
<div class="modal fade" id="commentEdit" tabindex="-1" role="dialog" aria-labelledby="commentEditLabel" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="commentEditLabel">Изменить комментарий</h5>
|
||
</div>
|
||
<div class="modal-body text-center">
|
||
<p>Под именем:</p>
|
||
<p>{{ currentCustomer['username'] }}</p>
|
||
<p>К посту:</p>
|
||
<p>{{ selectedPostTitle }}</p>
|
||
<p>Комментарий</p>
|
||
<textarea v-model='contentModal' id="editModalText" cols="30" rows="1"></textarea>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||
<button type="button" class="btn btn-primary" v-on:click='editComment'>Изменить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from 'axios'
|
||
export default {
|
||
data() {
|
||
return {
|
||
searchResults: [],
|
||
customers: [],
|
||
selectedCustomerId: 0,
|
||
currentCustomer: {},
|
||
posts: [],
|
||
selectedPostId: 0,
|
||
selectedPostTitle: '',
|
||
contentModal: '',
|
||
titleModal: '',
|
||
postContentModal: '',
|
||
selectedCommentId: 0,
|
||
currentCustomerId: -1,
|
||
searchMode: -1,
|
||
}
|
||
},
|
||
methods: {
|
||
async getSearchResult(){
|
||
const content = document.getElementById("searchString").value
|
||
if (content != ''){
|
||
this.searchMode = 0;
|
||
this.searchResults = [];
|
||
const responseSearch = await axios.post('http://localhost:8080/search?searchStr=' + content);
|
||
responseSearch.data.forEach(element => {
|
||
this.searchResults.push(element);
|
||
console.log(element);
|
||
});
|
||
}
|
||
else{
|
||
this.searchMode = -1;
|
||
this.refreshList();
|
||
}
|
||
},
|
||
|
||
selectedCustomerContainsComment(comment) {
|
||
var customer = this.customers.find(element => element['id'] == this.currentCustomerId);
|
||
console.log(customer);
|
||
if (customer == null) return false;
|
||
var flag = false;
|
||
customer['comments'].forEach(commentIn => {
|
||
if (commentIn['id'] == comment['id']) {
|
||
flag = true;
|
||
}
|
||
});
|
||
return flag;
|
||
},
|
||
|
||
async createComment() {
|
||
const content = document.getElementById("post-comment-" + this.selectedPostId).value
|
||
let comment = {
|
||
"content": content,
|
||
customerId: this.currentCustomerId,
|
||
postId: this.selectedPostId
|
||
};
|
||
await axios.post('http://localhost:8080/api/comment', comment);
|
||
document.getElementById("post-comment-" + this.selectedPostId).value = ''
|
||
this.refreshList();
|
||
},
|
||
|
||
async deleteComment(commentId) {
|
||
await axios.delete('http://localhost:8080/api/comment/' + commentId);
|
||
this.refreshList();
|
||
},
|
||
|
||
async editComment(){
|
||
let comment = {
|
||
content: this.contentModal,
|
||
customerId: this.currentCustomerId,
|
||
postId: 0
|
||
};
|
||
await axios.put('http://localhost:8080/api/comment/' + this.selectedCommentId, comment);
|
||
this.refreshList();
|
||
},
|
||
|
||
async createPost() {
|
||
let post = {
|
||
"content": this.postContentModal,
|
||
title: this.titleModal,
|
||
customerId: this.currentCustomerId
|
||
};
|
||
const response = await axios.post('http://localhost:8080/api/post', post);
|
||
this.titleModal = ''
|
||
this.postContentModal = ''
|
||
this.refreshList();
|
||
},
|
||
|
||
async deletePost(postId) {
|
||
const response = await axios.delete('http://localhost:8080/api/post/' + postId);
|
||
this.refreshList();
|
||
},
|
||
|
||
async editPost(){
|
||
let post = {
|
||
"content": this.postContentModal,
|
||
title: this.titleModal,
|
||
customerId: this.currentCustomerId
|
||
};
|
||
const response = await axios.put('http://localhost:8080/api/post/' + this.selectedPostId, post);
|
||
this.refreshList();
|
||
},
|
||
|
||
async refreshList(){
|
||
this.customers = [];
|
||
this.posts = [];
|
||
const responseCustomer = await axios.get('http://localhost:8080/api/customer');
|
||
responseCustomer.data.forEach(element => {
|
||
this.customers.push(element);
|
||
console.log(element);
|
||
});
|
||
const responsePost = await axios.get('http://localhost:8080/api/post');
|
||
responsePost.data.forEach(element => {
|
||
this.posts.splice(0, 0, element);
|
||
console.log(element);
|
||
});
|
||
}
|
||
},
|
||
async beforeMount() {
|
||
this.currentCustomerId = history.state;
|
||
setInterval(async () => this.currentCustomerId = history.state, 50)
|
||
const responseCustomer = await axios.get('http://localhost:8080/api/customer');
|
||
responseCustomer.data.forEach(element => {
|
||
this.customers.push(element);
|
||
if (element['id'] == this.currentCustomerId) {
|
||
this.currentCustomer = element;
|
||
}
|
||
console.log(element);
|
||
});
|
||
const responsePost = await axios.get('http://localhost:8080/api/post');
|
||
responsePost.data.forEach(element => {
|
||
this.posts.splice(0, 0, element);
|
||
console.log(element);
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="">
|
||
|
||
</style> |