feat: add empty audit table

lnbits/core/templates/audit/index.html

@@ -2,7 +2,53 @@
 %} {% block page %}
 
 <div class="row q-col-gutter-md justify-center">
-  <div class="col">xxxxx</div>
+  <div class="col">
+    <q-card class="q-pa-md">
+      <q-table
+        row-key="id"
+        :rows="auditEntries"
+        :columns="auditTable.columns"
+        v-model:pagination="auditTable.pagination"
+        :filter="auditTable.search"
+        :loading="auditTable.loading"
+        @request="fetchAudit"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <q-input
+                v-if="['ip_address', 'user_id', 'path', 'route_path', 'request_method', 'request_type', 'response_code',].includes(col.name)"
+                v-model="searchData[col.name]"
+                @keydown.enter="searchAuditBy(col.name)"
+                dense
+                type="text"
+                filled
+                :label="col.label"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="search"
+                    @click="searchAuditBy(col.name)"
+                    class="cursor-pointer"
+                  />
+                </template>
+              </q-input>
+
+              <span v-else v-text="col.label"></span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr auto-width :props="props">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <span v-text="props.row[col.name]"></span>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-card>
+  </div>
 </div>
 
 {% endblock %} {% block scripts %} {{ window_vars(user) }}

lnbits/core/views/generic.py

@@ -384,8 +384,9 @@ async def users_index(request: Request, user: User = Depends(check_admin)):
         },
     )
 
+
 @generic_router.get("/audit", response_class=HTMLResponse)
-async def users_index(request: Request, user: User = Depends(check_admin)):
+async def audit_index(request: Request, user: User = Depends(check_admin)):
     if not settings.lnbits_audit_enabled:
         raise HTTPException(HTTPStatus.NOT_FOUND, "Audit not enabled")
 

lnbits/static/js/audit.js

@@ -2,12 +2,118 @@ window.app = Vue.createApp({
   el: '#vue',
   mixins: [window.windowMixin],
   data: function () {
-    return {}
+    return {
+      auditEntries: [],
+      searchData: {
+        user_id: '',
+        ip_address: '',
+        request_type: '',
+        request_method: '',
+        response_code: '',
+        path: '',
+        route_path: ''
+      },
+      auditTable: {
+        columns: [
+          {
+            name: 'created_at',
+            align: 'left',
+            label: 'Date',
+            field: 'created_at',
+            sortable: true
+          },
+          {
+            name: 'duration',
+            align: 'left',
+            label: 'Duration',
+            field: 'duration',
+            sortable: true
+          },
+
+          {
+            name: 'user_id',
+            align: 'left',
+            label: 'User Id',
+            field: 'user_id',
+            sortable: false
+          },
+          {
+            name: 'ip_address',
+            align: 'left',
+            label: 'IP Address',
+            field: 'ip_address',
+            sortable: false
+          },
+
+          {
+            name: 'request_type',
+            align: 'left',
+            label: 'Type',
+            field: 'request_type',
+            sortable: false
+          },
+          {
+            name: 'request_method',
+            align: 'left',
+            label: 'Method',
+            field: 'request_method',
+            sortable: false
+          },
+          {
+            name: 'response_code',
+            align: 'left',
+            label: 'Code',
+            field: 'response_code',
+            sortable: false
+          },
+          {
+            name: 'path',
+            align: 'left',
+            label: 'Path',
+            field: 'path',
+            sortable: false
+          },
+
+          {
+            name: 'route_path',
+            align: 'left',
+            label: 'Route Path',
+            field: 'route_path',
+            sortable: false
+          },
+
+          {
+            name: 'query_string',
+            align: 'left',
+            label: 'Query',
+            field: 'query_string',
+            sortable: false
+          }
+        ],
+        pagination: {
+          sortBy: 'created_at',
+          rowsPerPage: 10,
+          page: 1,
+          descending: true,
+          rowsNumber: 10
+        },
+        search: null,
+        hideEmpty: true,
+        loading: false
+      }
+    }
   },
 
   created() {
     console.log('### audit entries')
   },
 
-  methods: {}
+  methods: {
+    async fetchAudit() {
+      console.log('### fetchAudit')
+    },
+    async searchAuditBy(fieldName) {
+      console.log('### searchAuditBy', fieldName)
+    }
+  }
 })