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>

frontend/src/views/knowledgebase/KnowledgeBaseForm.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Article' : 'Add Knowledge Base Article' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="saveArticle">
+        <div class="form-group">
+          <label for="shortdescription">Description *</label>
+          <input
+            id="shortdescription"
+            v-model="form.shortdescription"
+            type="text"
+            class="form-control"
+            required
+            maxlength="500"
+            placeholder="Brief description of the article"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="linkurl">URL *</label>
+          <input
+            id="linkurl"
+            v-model="form.linkurl"
+            type="url"
+            class="form-control"
+            required
+            maxlength="2000"
+            placeholder="https://..."
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="keywords">Keywords</label>
+          <input
+            id="keywords"
+            v-model="form.keywords"
+            type="text"
+            class="form-control"
+            maxlength="500"
+            placeholder="Space-separated keywords"
+          />
+          <small class="form-hint">Keywords help with search - separate with spaces</small>
+        </div>
+
+        <div class="form-group">
+          <label for="appid">Topic (Application)</label>
+          <select
+            id="appid"
+            v-model="form.appid"
+            class="form-control"
+          >
+            <option value="">-- Select Topic (Optional) --</option>
+            <option
+              v-for="app in applications"
+              :key="app.appid"
+              :value="app.appid"
+            >
+              {{ app.appname }}
+            </option>
+          </select>
+          <small class="form-hint">Select the application/topic this article relates to</small>
+        </div>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : (isEdit ? 'Update Article' : 'Add Article') }}
+          </button>
+          <router-link to="/knowledgebase" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { knowledgebaseApi, applicationsApi } from '../../api'
+
+const route = useRoute()
+const router = useRouter()
+
+const isEdit = computed(() => !!route.params.id)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+
+const form = ref({
+  shortdescription: '',
+  linkurl: '',
+  keywords: '',
+  appid: ''
+})
+
+const applications = ref([])
+
+onMounted(async () => {
+  try {
+    // Load applications for topic dropdown
+    const appsRes = await applicationsApi.list({ per_page: 1000 })
+    applications.value = appsRes.data.data || []
+
+    // Load article if editing
+    if (isEdit.value) {
+      const response = await knowledgebaseApi.get(route.params.id)
+      const article = response.data.data
+
+      form.value = {
+        shortdescription: article.shortdescription || '',
+        linkurl: article.linkurl || '',
+        keywords: article.keywords || '',
+        appid: article.application?.appid || ''
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+async function saveArticle() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const articleData = {
+      shortdescription: form.value.shortdescription,
+      linkurl: form.value.linkurl,
+      keywords: form.value.keywords || null,
+      appid: form.value.appid || null
+    }
+
+    if (isEdit.value) {
+      await knowledgebaseApi.update(route.params.id, articleData)
+    } else {
+      await knowledgebaseApi.create(articleData)
+    }
+
+    router.push('/knowledgebase')
+  } catch (err) {
+    console.error('Error saving article:', err)
+    error.value = err.response?.data?.message || 'Failed to save article'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light, #666);
+}
+</style>