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/applications/ApplicationsList.vue

@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Applications</h2>
+      <router-link to="/applications/new" class="btn btn-primary">Add Application</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search applications..."
+        @input="debouncedSearch"
+      />
+      <select v-model="filter" class="form-control" @change="loadApplications">
+        <option value="installable">Installable Applications</option>
+        <option value="all">All Applications</option>
+        <option value="hidden">Hidden Applications</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 style="width: 50px;">Files</th>
+                <th style="width: 50px;">Docs</th>
+                <th>Application Name</th>
+                <th>Description</th>
+                <th>Support Team</th>
+                <th>App Owner</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="app in applications" :key="app.appid">
+                <td class="icon-cell">
+                  <a v-if="app.installpath" :href="app.installpath" target="_blank" title="Download Installation Files" class="icon-download">
+                    &#x2B07;
+                  </a>
+                  <a v-else-if="app.applicationlink" :href="app.applicationlink" target="_blank" title="Application Link" class="icon-link">
+                    &#x1F517;
+                  </a>
+                </td>
+                <td class="icon-cell">
+                  <a v-if="app.documentationpath" :href="app.documentationpath" target="_blank" title="View Documentation" class="icon-docs">
+                    &#x1F4C4;
+                  </a>
+                </td>
+                <td>
+                  <router-link :to="`/applications/${app.appid}`">
+                    {{ app.appname }}
+                  </router-link>
+                  <span class="app-flags">
+                    <span v-if="app.isinstallable" class="badge badge-info badge-sm">Installable</span>
+                    <span v-if="app.islicenced" class="badge badge-warning badge-sm">Licensed</span>
+                    <span v-if="app.isprinter" class="badge badge-secondary badge-sm">Printer</span>
+                  </span>
+                </td>
+                <td class="description">{{ app.appdescription || '-' }}</td>
+                <td>{{ app.supportteam?.teamname || '-' }}</td>
+                <td>{{ app.supportteam?.owner?.appowner || '-' }}</td>
+                <td class="actions">
+                  <router-link
+                    :to="`/applications/${app.appid}`"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    View
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="applications.length === 0">
+                <td colspan="7" style="text-align: center; color: var(--text-light);">
+                  No applications 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, computed, onMounted } from 'vue'
+import { applicationsApi } from '../../api'
+
+const applications = ref([])
+const loading = ref(true)
+const search = ref('')
+const filter = ref('installable')
+const page = ref(1)
+const totalPages = ref(1)
+const perPage = 20
+
+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(() => {
+  loadApplications()
+})
+
+async function loadApplications() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      per_page: perPage,
+      search: search.value || undefined
+    }
+
+    // Apply filter
+    if (filter.value === 'installable') {
+      params.installable = true
+    } else if (filter.value === 'hidden') {
+      params.hidden = true
+    }
+
+    const response = await applicationsApi.list(params)
+    applications.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading applications:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadApplications()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadApplications()
+}
+</script>
+
+<style scoped>
+/* Application list specific styles */
+.icon-cell {
+  text-align: center;
+  width: 50px;
+}
+
+.icon-cell a {
+  font-size: 1.25rem;
+  text-decoration: none;
+}
+
+.icon-download {
+  color: var(--success);
+}
+
+.icon-link {
+  color: var(--link);
+}
+
+.icon-docs {
+  color: var(--secondary);
+}
+
+.icon-cell a:hover {
+  opacity: 0.7;
+}
+
+.app-flags {
+  display: inline-flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  margin-left: 0.5rem;
+  vertical-align: middle;
+}
+
+.badge-sm {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+}
+
+.description {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-light);
+}
+</style>