Rework admin panel and other
This commit is contained in:
F4ilji
@@ -8,7 +8,7 @@
|
||||
'border-blue-300': selectedCategory === null,
|
||||
'animate-pulse': loading === true
|
||||
}"
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button">Все</button>
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-2 py-0.5 mr-2" type="button">Все</button>
|
||||
<template v-for="category in categories">
|
||||
<button @click="categorySort(category)"
|
||||
:class="{
|
||||
@@ -17,7 +17,7 @@
|
||||
'border-blue-300': selectedCategory === category,
|
||||
'animate-pulse': loading === true
|
||||
}"
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button">
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-2 py-0.5 mr-2" type="button">
|
||||
{{ruCategories()[category] }}
|
||||
</button>
|
||||
</template>
|
||||
@@ -28,14 +28,18 @@
|
||||
name="hs-as-table-product-review-search"
|
||||
class="py-1 placeholder-[#8F8F8F] font-light px-2 block flex-1 w-full border-none text-lg focus:z-10 border-transparent focus:border-transparent focus:ring-0"
|
||||
placeholder="Поиск по сайту">
|
||||
<button :data-hs-overlay="'#' + open_id" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-4" type="button">Esc</button>
|
||||
<button v-if='this.searchInput !== ""' @click="clearSearch" class="items-center flex justify-end px-2" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 hover:text-gray-300 text-gray-500 duration-150 font-bold">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto relative">
|
||||
<ResultList :result="result" :loading="loading" :selected-category="selectedCategory" />
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<ResultList class="h-full" :result="result" :loading="loading" :selected-category="selectedCategory" />
|
||||
</div>
|
||||
<nav v-if="paginate" class="bg-white border border-gray-100 flex items-center gap-x-1 fixed bottom-4 w-[200px] justify-center left-0 right-0 mx-auto py-2 rounded-xl " aria-label="Pagination">
|
||||
<button @click="prev(paginate.prev_page)" :disabled="!paginate.prev_page" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
|
||||
<nav v-if="paginate && result.length !== 0" class="bg-white border border-gray-100 flex items-center gap-x-1 fixed bottom-4 w-[200px] justify-center left-0 right-0 mx-auto py-2 rounded-xl " aria-label="Pagination">
|
||||
<button @click="prev(paginate.prev_page)" :disabled="!paginate.prev_page || loading === true" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
|
||||
<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m15 18-6-6 6-6"></path>
|
||||
</svg>
|
||||
@@ -46,7 +50,7 @@
|
||||
<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">из</span>
|
||||
<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">{{ paginate.last_page }}</span>
|
||||
</div>
|
||||
<button @click="next(paginate.next_page)" :disabled="!paginate.next_page" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
|
||||
<button @click="next(paginate.next_page)" :disabled="!paginate.next_page || loading === true" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
|
||||
<span class="sr-only">Next</span>
|
||||
<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m9 18 6-6-6-6"></path>
|
||||
@@ -70,7 +74,10 @@ export default {
|
||||
selectedCategory: null,
|
||||
categories: null,
|
||||
loading: false,
|
||||
}
|
||||
debouncedSearch: debounce(this.executeSearch, 500),
|
||||
debouncedNext: debounce(this.executePagination, 300),
|
||||
debouncedPrev: debounce(this.executePagination, 300),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ResultList,
|
||||
@@ -80,80 +87,83 @@ export default {
|
||||
ruCategories() {
|
||||
return ruCategories
|
||||
},
|
||||
categorySort: debounce(function(category) {
|
||||
this.toggleLoadingState(true);
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
category: category
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate;
|
||||
this.result = response.data.searchRes;
|
||||
this.categories = response.data.result_type;
|
||||
this.selectedCategory = response.data.selectedCategory;
|
||||
this.toggleLoadingState(false);
|
||||
}).catch((error) => {
|
||||
console.error("Ошибка при получении данных:", error);
|
||||
this.toggleLoadingState(false);
|
||||
});
|
||||
}, 500),
|
||||
search: debounce(function () {
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate
|
||||
this.result = response.data.searchRes;
|
||||
this.categories = response.data.result_type
|
||||
});
|
||||
}, 500),
|
||||
categorySort: function(category) {
|
||||
this.toggleLoadingState(true);
|
||||
debounce(() => {
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
category: category
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate;
|
||||
this.result = response.data.searchRes;
|
||||
this.categories = response.data.result_type;
|
||||
this.selectedCategory = response.data.selectedCategory;
|
||||
this.toggleLoadingState(false);
|
||||
}).catch((error) => {
|
||||
console.error("Ошибка при получении данных:", error);
|
||||
this.toggleLoadingState(false);
|
||||
});
|
||||
}, 500)();
|
||||
},
|
||||
|
||||
next: debounce(function (page) {
|
||||
this.toggleLoadingState(true);
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
page: page,
|
||||
category: this.selectedCategory
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate
|
||||
this.result = response.data.searchRes;
|
||||
this.toggleLoadingState(false);
|
||||
search() {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedSearch(this.searchInput.toLowerCase());
|
||||
},
|
||||
|
||||
});
|
||||
}, 500),
|
||||
// Пагинация: следующая страница
|
||||
next(page) {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedNext({ page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
prev: debounce(function (page) {
|
||||
this.toggleLoadingState(true);
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
page: page,
|
||||
category: this.selectedCategory
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate
|
||||
this.result = response.data.searchRes;
|
||||
this.toggleLoadingState(false);
|
||||
});
|
||||
}, 500),
|
||||
// Пагинация: предыдущая страница
|
||||
prev(page) {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedPrev({ page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
async executeSearch(searchValue) {
|
||||
try {
|
||||
const response = await axios.get(route('client.search.index'), {
|
||||
params: { search: searchValue }
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
// Общая функция для пагинации
|
||||
async executePagination(params) {
|
||||
try {
|
||||
const response = await axios.get(route('client.search.index'), {
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
...params
|
||||
}
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
// Обновление результатов
|
||||
updateResults(response) {
|
||||
this.paginate = response.data.paginate;
|
||||
this.result = response.data.searchRes;
|
||||
this.categories = response.data.result_type;
|
||||
},
|
||||
|
||||
toggleLoadingState(state) {
|
||||
this.loading = state
|
||||
},
|
||||
|
||||
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
@@ -162,6 +172,11 @@ export default {
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
clearSearch() {
|
||||
this.searchInput = ""
|
||||
this.search()
|
||||
}
|
||||
},
|
||||
props: {
|
||||
open_id: {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PreSearchLinkList v-if="result === null" class="px-2 font-light" />
|
||||
<div v-else-if="result.length !== 0"
|
||||
:class="{'filter': loading === true}"
|
||||
:class="{'filter pointer-events-none': loading === true}"
|
||||
class="px-2 font-light duration-300">
|
||||
<template v-for="(elements, tag) in result">
|
||||
<component
|
||||
@@ -13,6 +13,14 @@
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="" v-else-if="result.length === 0">
|
||||
<div class="h-full flex flex-col items-center justify-center gap-1">
|
||||
<p class="font-light">Извините, ничего не найдено</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-700">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="border-b">
|
||||
<div v-if="result !== null && result.length !== 0" class="relative px-3 pt-5 gap-2 justify-start items-center flex flex-wrap hide-scrollbar">
|
||||
<button @click="categorySort(null)"
|
||||
:class="{
|
||||
'bg-blue-50': selectedCategory === null,
|
||||
'text-blue-500': selectedCategory === null,
|
||||
'border-blue-300': selectedCategory === null,
|
||||
'animate-pulse': loading === true
|
||||
}"
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-2 py-0.5" type="button">Все</button>
|
||||
<template v-for="category in categories">
|
||||
<button @click="categorySort(category)"
|
||||
:class="{
|
||||
'bg-blue-50': selectedCategory === category,
|
||||
'text-blue-500': selectedCategory === category,
|
||||
'border-blue-300': selectedCategory === category,
|
||||
'animate-pulse': loading === true
|
||||
}"
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-2 py-0.5" type="button">
|
||||
{{ category }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="relative px-1 py-2 flex justify-between items-center">
|
||||
<input autofocus="autofocus" autocomplete="off" @input="search" v-model="searchInput" type="text"
|
||||
id="hs-as-table-product-review-search"
|
||||
name="hs-as-table-product-review-search"
|
||||
class="py-1 placeholder-[#8F8F8F] font-light px-2 block flex-1 w-full border-none text-lg focus:z-10 border-transparent focus:border-transparent focus:ring-0"
|
||||
placeholder="Поиск по сведениям об образовательной организации">
|
||||
<button v-if='this.searchInput !== ""' @click="clearSearch" class="items-center flex justify-end px-2" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 hover:text-gray-300 text-gray-500 duration-150 font-bold">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<div v-for="item in result">
|
||||
|
||||
<a :href="item.file" target="_blank" data-hs-overlay="#hs-basic-modal" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
||||
</svg>
|
||||
|
||||
<span class="text-sm first-letter:uppercase">{{ item.content }} <span class="text-xs text-gray-600">{{ item.category }}</span> </span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- <ResultList class="h-full" :result="result" :loading="loading" :selected-category="selectedCategory" />-->
|
||||
</div>
|
||||
<nav v-if="paginate && result.length !== 0" class="bg-white border border-gray-100 flex items-center gap-x-1 fixed bottom-4 w-[200px] justify-center left-0 right-0 mx-auto py-2 rounded-xl " aria-label="Pagination">
|
||||
<button @click="prev(paginate.current_page - 1)" :disabled="loading === true || paginate.current_page - 1 <= 0" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
|
||||
<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m15 18-6-6 6-6"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-x-1">
|
||||
<span class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 py-2 px-3 text-sm rounded-lg focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">{{ paginate.current_page }}</span>
|
||||
<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">из</span>
|
||||
<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">{{ paginate.last_page }}</span>
|
||||
</div>
|
||||
<button @click="next(paginate.current_page + 1)" :disabled="loading === true" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
|
||||
<span class="sr-only">Next</span>
|
||||
<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m9 18 6-6-6-6"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {debounce} from "lodash";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import {ruCategories} from "@/assets/data/ruCategories.js";
|
||||
import ResultList from "@/componentss/features/search/components/ResultList.vue";
|
||||
export default {
|
||||
name: "GlobalSearch",
|
||||
data() {
|
||||
return {
|
||||
searchInput: "",
|
||||
result: null,
|
||||
paginate: null,
|
||||
selectedCategory: null,
|
||||
categories: null,
|
||||
loading: false,
|
||||
debouncedSearch: debounce(this.executeSearch, 500),
|
||||
debouncedCategory: debounce(this.executeCategory, 500),
|
||||
debouncedNext: debounce(this.executePagination, 300),
|
||||
debouncedPrev: debounce(this.executePagination, 300),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ResultList,
|
||||
Link,
|
||||
},
|
||||
methods: {
|
||||
ruCategories() {
|
||||
return ruCategories
|
||||
},
|
||||
categorySort: function(category) {
|
||||
this.selectedCategory = category
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedCategory({ page: this.paginate.current_page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
search() {
|
||||
if (!this.categories) {
|
||||
this.getCategories()
|
||||
}
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedSearch(this.searchInput.toLowerCase());
|
||||
},
|
||||
|
||||
// Пагинация: следующая страница
|
||||
next(page) {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedNext({ page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
// Пагинация: предыдущая страница
|
||||
prev(page) {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedPrev({ page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
async executeSearch(searchValue) {
|
||||
|
||||
try {
|
||||
if (searchValue === null) {
|
||||
return null;
|
||||
}
|
||||
const response = await axios.get(route('client.search.static'), {
|
||||
params: { search: searchValue }
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
async executeCategory(params) {
|
||||
|
||||
try {
|
||||
if (params.category === null) {
|
||||
return null;
|
||||
}
|
||||
const response = await axios.get(route('client.search.static'), {
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
...params
|
||||
}
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Общая функция для пагинации
|
||||
async executePagination(params) {
|
||||
try {
|
||||
const response = await axios.get(route('client.search.static'), {
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
...params
|
||||
}
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
// Обновление результатов
|
||||
updateResults(response) {
|
||||
this.paginate = response.data.meta;
|
||||
this.result = response.data.data;
|
||||
// this.categories = response.data.result_type;
|
||||
},
|
||||
|
||||
async getCategories() {
|
||||
try {
|
||||
const response = await axios.get(route('client.categories.static'));
|
||||
this.categories = response.data;
|
||||
} catch (error) {
|
||||
console.error('Ошибка при загрузке категорий:', error);
|
||||
}
|
||||
},
|
||||
|
||||
toggleLoadingState(state) {
|
||||
this.loading = state
|
||||
},
|
||||
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
clearSearch() {
|
||||
this.searchInput = ""
|
||||
this.search()
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
open_id: {
|
||||
type: String,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none; /* Скрыть scrollbar для WebKit-браузеров */
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none; /* Для Internet Explorer и Edge */
|
||||
scrollbar-width: none; /* Для Firefox */
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user