Fetch and show users

src/sqlite.ts

@@ -8,7 +8,10 @@ interface Options {
 export default {
   install: (app: App, options: Options) => {
     const client = new SqliteClient(options.file)
-    client.executeMutation('test', 'CREATE TABLE IF NOT EXISTS test (a, b, c);')
+    client.executeMutation(
+      'users',
+      'CREATE TABLE IF NOT EXISTS users (id INT PRIMARY KEY, name VARCHAR, permission VARCHAR);'
+    )
     app.provide('db', client)
   }
 }

src/views/AppRootView.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import { RouterView, useRouter } from 'vue-router'
-import { watchEffect } from 'vue'
+import { watchEffect, ref, inject } from 'vue'
 import { useAuthStore } from '@/stores/auth'
+import type { UserModule } from '@accentor/api-client-js'
+import type SqliteClient from '../db-client'
 
 const router = useRouter()
 const authStore = useAuthStore()
+const api: { users: UserModule } = inject('api')!
+const client: SqliteClient = inject('db')!
+
+const drawer = ref(false)
+const loading = ref(false)
 
 watchEffect(() => {
   if (!authStore.loggedIn) {
@@ -15,9 +22,53 @@ watchEffect(() => {
 function logout() {
   authStore.logout()
 }
+
+async function loadData() {
+  loading.value = true
+  let done = false
+  const generator = api.users.index({ secret: authStore.secret!, device_id: authStore.deviceId! })
+  while (!done) {
+    const obj = await generator.next()
+    for (let row of obj.value) {
+      await client.executeMutation(
+        'users',
+        'INSERT INTO users VALUES (?, ?, ?) ON CONFLICT(id) DO UPDATE SET name=?, permission=?;',
+        row.id,
+        row.name,
+        row.permission,
+        row.name,
+        row.permission
+      )
+    }
+    done = obj.done!
+  }
+  loading.value = false
+}
 </script>
 
 <template>
-  <v-btn @click="logout">Logout</v-btn>
-  <router-view />
+  <v-app-bar color="primary">
+    <template #prepend>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+    </template>
+    <v-toolbar-title class="font-weight-medium">Accentor</v-toolbar-title>
+    <template #append>
+      <v-btn :disabled="loading" variant="text" icon @click="loadData">
+        <v-icon>mdi-refresh {{ loading ? 'mdi-spin' : '' }}</v-icon>
+      </v-btn>
+      <v-btn variant="text" icon @click="logout">
+        <v-icon>mdi-logout-variant</v-icon>
+      </v-btn>
+    </template>
+  </v-app-bar>
+  <v-navigation-drawer v-model="drawer">
+    <v-list>
+      <v-list-item prepend-icon="mdi-home" title="Home" :to="{ name: 'home' }" exact />
+    </v-list>
+  </v-navigation-drawer>
+  <v-main>
+    <v-container>
+      <router-view />
+    </v-container>
+  </v-main>
 </template>

src/views/HomeView.vue

@@ -1,47 +1,11 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { inject } from 'vue'
 import type SqliteClient from '../db-client'
 const dbClient: SqliteClient = inject('db')!
-const minA = ref(0)
-const minB = ref(0)
-const minC = ref(0)
-const values = dbClient.executeSelect(
-  ['test'],
-  'SELECT * FROM test WHERE a >= ? AND b >= ? AND c >= ? ORDER BY a ASC LIMIT ?;',
-  minA,
-  minB,
-  minC,
-  10
-)
-
-async function deleteAll() {
-  await dbClient.executeMutation('test', 'DELETE FROM test;')
-}
-
-function randInt(max: number): number {
-  return Math.round(Math.random() * max)
-}
-
-async function insertNew() {
-  await dbClient.executeMutation(
-    'test',
-    'INSERT INTO test VALUES (?, ?, ?);',
-    randInt(100),
-    randInt(50),
-    randInt(10)
-  )
-}
+const values = dbClient.executeSelect(['users'], 'SELECT * FROM users;')
 </script>
 
 <template>
-  <div>
-    <div>Table contents: {{ values }}</div>
-    <div>
-      <v-text-field v-model.number="minA" type="number" />
-      <v-text-field v-model.number="minB" type="number" />
-      <v-text-field v-model.number="minC" type="number" />
-      <v-btn @click="deleteAll">Delete all</v-btn>
-      <v-btn @click="insertNew">Insert new</v-btn>
-    </div>
-  </div>
+  <p>Home</p>
+  <div>Table contents: {{ values }}</div>
 </template>