Initial commit: Shop Database Flask Application
Flask backend with Vue 3 frontend for shop floor machine management. Includes database schema export for MySQL shopdb_flask database. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
267
frontend/src/views/SearchResults.vue
Normal file
267
frontend/src/views/SearchResults.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>Search Results</h2>
|
||||
<span v-if="results.length" class="results-count">
|
||||
{{ results.length }} result{{ results.length !== 1 ? 's' : '' }} for "{{ query }}"
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="searchInput"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search machines, applications, knowledge base..."
|
||||
@keyup.enter="performSearch"
|
||||
/>
|
||||
<button class="btn btn-primary" @click="performSearch">Search</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div v-if="loading" class="loading">Searching...</div>
|
||||
|
||||
<template v-else-if="query">
|
||||
<div v-if="results.length === 0" class="no-results">
|
||||
No results found for "{{ query }}"
|
||||
</div>
|
||||
|
||||
<div v-else class="results-list">
|
||||
<div
|
||||
v-for="result in results"
|
||||
:key="`${result.type}-${result.id}`"
|
||||
class="result-item"
|
||||
>
|
||||
<span class="result-type" :class="result.type">{{ typeLabel(result.type) }}</span>
|
||||
<div class="result-content">
|
||||
<router-link v-if="result.type !== 'knowledgebase'" :to="result.url" class="result-title">
|
||||
{{ result.title }}
|
||||
</router-link>
|
||||
<a
|
||||
v-else
|
||||
href="#"
|
||||
class="result-title"
|
||||
@click.prevent="openKBArticle(result)"
|
||||
>
|
||||
{{ result.title }}
|
||||
</a>
|
||||
<div class="result-meta">
|
||||
<span v-if="result.subtitle" class="result-subtitle">{{ result.subtitle }}</span>
|
||||
<span v-if="result.location" class="result-location">{{ result.location }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="no-results">
|
||||
Enter a search term to find machines, applications, printers, and knowledge base articles.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { searchApi, knowledgebaseApi } from '../api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const loading = ref(false)
|
||||
const results = ref([])
|
||||
const query = ref('')
|
||||
const searchInput = ref('')
|
||||
|
||||
const typeLabels = {
|
||||
machine: 'Equipment',
|
||||
pc: 'PC',
|
||||
application: 'App',
|
||||
knowledgebase: 'KB',
|
||||
printer: 'Printer'
|
||||
}
|
||||
|
||||
function typeLabel(type) {
|
||||
return typeLabels[type] || type
|
||||
}
|
||||
|
||||
async function search(q) {
|
||||
if (!q || q.length < 2) {
|
||||
results.value = []
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const response = await searchApi.search(q)
|
||||
results.value = response.data.data?.results || []
|
||||
query.value = q
|
||||
} catch (error) {
|
||||
console.error('Search error:', error)
|
||||
results.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function performSearch() {
|
||||
if (searchInput.value.trim()) {
|
||||
router.push({ path: '/search', query: { q: searchInput.value.trim() } })
|
||||
}
|
||||
}
|
||||
|
||||
async function openKBArticle(result) {
|
||||
// Track the click before opening
|
||||
try {
|
||||
await knowledgebaseApi.trackClick(result.id)
|
||||
if (result.linkurl) {
|
||||
window.open(result.linkurl, '_blank')
|
||||
} else {
|
||||
router.push(result.url)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error tracking click:', error)
|
||||
if (result.linkurl) {
|
||||
window.open(result.linkurl, '_blank')
|
||||
} else {
|
||||
router.push(result.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const q = route.query.q
|
||||
if (q) {
|
||||
searchInput.value = q
|
||||
search(q)
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => route.query.q, (newQ) => {
|
||||
if (newQ) {
|
||||
searchInput.value = newQ
|
||||
search(newQ)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.results-count {
|
||||
color: var(--text-light, #666);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
color: var(--text-light, #666);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color, #e5e5e5);
|
||||
}
|
||||
|
||||
.result-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.result-type {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
min-width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-type.machine {
|
||||
background: #e3f2fd;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.result-type.pc {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.result-type.application {
|
||||
background: #fff3e0;
|
||||
color: #e65100;
|
||||
}
|
||||
|
||||
.result-type.knowledgebase {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.result-type.printer {
|
||||
background: #fce4ec;
|
||||
color: #c2185b;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
color: var(--primary, #1976d2);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-title:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.result-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-light, #666);
|
||||
}
|
||||
|
||||
.result-subtitle {
|
||||
color: var(--text-light, #666);
|
||||
}
|
||||
|
||||
.result-location {
|
||||
color: var(--text-light, #666);
|
||||
}
|
||||
|
||||
.result-location::before {
|
||||
content: '\1F4CD ';
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user