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
269
frontend/src/views/knowledgebase/KnowledgeBaseList.vue
Normal file
269
frontend/src/views/knowledgebase/KnowledgeBaseList.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<h2>Knowledge Base</h2>
|
||||
<span v-if="stats" class="stats-badge">
|
||||
{{ stats.totalarticles }} articles | {{ stats.totalclicks.toLocaleString() }} total clicks
|
||||
</span>
|
||||
</div>
|
||||
<router-link to="/knowledgebase/new" class="btn btn-primary">Add Article</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="filters">
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search articles..."
|
||||
@input="debouncedSearch"
|
||||
/>
|
||||
<select v-model="topicFilter" class="form-control" @change="loadArticles">
|
||||
<option value="">All Topics</option>
|
||||
<option
|
||||
v-for="app in topics"
|
||||
:key="app.appid"
|
||||
:value="app.appid"
|
||||
>
|
||||
{{ app.appname }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sortable" @click="toggleSort('topic')">
|
||||
Topic
|
||||
<span v-if="sort === 'topic'" class="sort-arrow">{{ order === 'asc' ? '▲' : '▼' }}</span>
|
||||
</th>
|
||||
<th class="sortable" @click="toggleSort('description')">
|
||||
Description
|
||||
<span v-if="sort === 'description'" class="sort-arrow">{{ order === 'asc' ? '▲' : '▼' }}</span>
|
||||
</th>
|
||||
<th class="sortable" style="width: 100px;" @click="toggleSort('clicks')">
|
||||
Clicks
|
||||
<span v-if="sort === 'clicks'" class="sort-arrow">{{ order === 'asc' ? '▲' : '▼' }}</span>
|
||||
</th>
|
||||
<th style="width: 120px;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="article in articles" :key="article.linkid">
|
||||
<td>
|
||||
<router-link
|
||||
v-if="article.application"
|
||||
:to="`/applications/${article.application.appid}`"
|
||||
>
|
||||
{{ article.application.appname }}
|
||||
</router-link>
|
||||
<span v-else class="text-muted">-</span>
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
href="#"
|
||||
class="article-link"
|
||||
@click.prevent="openArticle(article)"
|
||||
:title="article.linkurl"
|
||||
>
|
||||
{{ truncate(article.shortdescription, 95) }}
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align: center; font-weight: 500;">{{ article.clicks }}</td>
|
||||
<td class="actions">
|
||||
<router-link :to="`/knowledgebase/${article.linkid}`" class="btn btn-sm btn-secondary">
|
||||
View
|
||||
</router-link>
|
||||
<router-link :to="`/knowledgebase/${article.linkid}/edit`" class="btn btn-sm btn-secondary">
|
||||
Edit
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="articles.length === 0">
|
||||
<td colspan="4" style="text-align: center; color: var(--text-light);">
|
||||
No articles found
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" v-if="totalPages > 1">
|
||||
<button
|
||||
v-for="p in visiblePages"
|
||||
:key="p"
|
||||
:class="{ active: p === page }"
|
||||
@click="goToPage(p)"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { knowledgebaseApi, applicationsApi } from '../../api'
|
||||
|
||||
const loading = ref(true)
|
||||
const articles = ref([])
|
||||
const topics = ref([])
|
||||
const stats = ref(null)
|
||||
const page = ref(1)
|
||||
const perPage = 20
|
||||
const totalPages = ref(1)
|
||||
const search = ref('')
|
||||
const topicFilter = ref('')
|
||||
const sort = ref('clicks')
|
||||
const order = ref('desc')
|
||||
|
||||
let searchTimeout = null
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
const pages = []
|
||||
const start = Math.max(1, page.value - 2)
|
||||
const end = Math.min(totalPages.value, page.value + 2)
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
return pages
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([
|
||||
loadArticles(),
|
||||
loadTopics(),
|
||||
loadStats()
|
||||
])
|
||||
})
|
||||
|
||||
async function loadArticles() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: page.value,
|
||||
per_page: perPage,
|
||||
sort: sort.value,
|
||||
order: order.value
|
||||
}
|
||||
if (search.value) params.search = search.value
|
||||
if (topicFilter.value) params.appid = topicFilter.value
|
||||
|
||||
const response = await knowledgebaseApi.list(params)
|
||||
articles.value = response.data.data || []
|
||||
totalPages.value = response.data.meta?.pagination?.total_pages || 1
|
||||
} catch (error) {
|
||||
console.error('Error loading articles:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTopics() {
|
||||
try {
|
||||
const response = await applicationsApi.list({ per_page: 1000 })
|
||||
topics.value = response.data.data || []
|
||||
} catch (error) {
|
||||
console.error('Error loading topics:', error)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const response = await knowledgebaseApi.getStats()
|
||||
stats.value = response.data.data
|
||||
} catch (error) {
|
||||
console.error('Error loading stats:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function debouncedSearch() {
|
||||
clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(() => {
|
||||
page.value = 1
|
||||
loadArticles()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function goToPage(p) {
|
||||
page.value = p
|
||||
loadArticles()
|
||||
}
|
||||
|
||||
function toggleSort(column) {
|
||||
if (sort.value === column) {
|
||||
order.value = order.value === 'desc' ? 'asc' : 'desc'
|
||||
} else {
|
||||
sort.value = column
|
||||
order.value = 'desc'
|
||||
}
|
||||
loadArticles()
|
||||
}
|
||||
|
||||
function truncate(text, length) {
|
||||
if (!text) return ''
|
||||
if (text.length <= length) return text
|
||||
return text.substring(0, length) + '...'
|
||||
}
|
||||
|
||||
async function openArticle(article) {
|
||||
try {
|
||||
await knowledgebaseApi.trackClick(article.linkid)
|
||||
article.clicks = (article.clicks || 0) + 1
|
||||
if (stats.value) {
|
||||
stats.value.totalclicks++
|
||||
}
|
||||
if (article.linkurl) {
|
||||
window.open(article.linkurl, '_blank')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error tracking click:', error)
|
||||
if (article.linkurl) {
|
||||
window.open(article.linkurl, '_blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Knowledge Base specific styles only */
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-left h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stats-badge {
|
||||
background: var(--bg);
|
||||
color: var(--link);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.article-link {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.article-link:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--text-light);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user