@hostlink/nuxt-light 1.21.2 → 1.21.3

package/dist/runtime/pages/System/database/table.vue

@@ -1,35 +1,34 @@
 <script setup>
-import { api, m, useLight } from '#imports';
-import { resolveComponent, ref, reactive } from 'vue';
+import { api, m, useLight, useAsyncData } from '#imports';
+import { resolveComponent, ref, reactive, computed } from 'vue';
 const light = useLight();
 
-const { system: { database } } = await api.query({
-    system: {
-        database: {
-            table: true,
-            version: true,
-            tableStatus: true
-        }
-
-    }
-})
-
-const tables = ref(database.table);
-
-const refresh = async () => {
-    const { system: { database } } = await api.query({
+const { data, refresh } = await useAsyncData('database', async () => {
+    const { system } = await api.query({
         system: {
             database: {
                 table: true,
-                version: true
+                version: true,
+                tableStatus: true
             }
         }
     })
-    tables.value = database.table;
-}
+    return system.database;
+})
+
+const SYSTEM_TABLES = ["Config", "EventLog", "MailLog", "Permission", "Role", "SystemValue", "Translate", "User", "UserLog", "UserRole"];
+
+const custom_tables = computed(() => {
+    return data.value.tableStatus.filter(table => !SYSTEM_TABLES.includes(table.Name))
+})
 
+const systables = computed(() => {
+    return data.value.tableStatus.filter(table => SYSTEM_TABLES.includes(table.Name))
+})
 
 const field_add = resolveComponent('l-dialog-database-field-add');
+
+const table_add = resolveComponent('l-database-create-table-dialog');
 const add = async (table) => {
     light.dialog({
         component: field_add
@@ -37,7 +36,7 @@ const add = async (table) => {
         //data.name
         //data.type
         try {
-            const addDatabaseField = await m("addDatabaseField", {
+            await m("lightDatabaseAddField", {
                 table,
                 field: data.name,
                 type: data.type,
@@ -46,11 +45,11 @@ const add = async (table) => {
                 nullable: data.nullable,
                 autoincrement: data.autoincrement
             })
+
             light.notify({
-                type: 'positive',
-                message: addDatabaseField
+                type: "positive",
+                message: "Field added successfully"
             })
-
             refresh();
 
         } catch (e) {
@@ -65,7 +64,7 @@ const add = async (table) => {
 
 const selected = reactive({});
 
-for (let table of database.table) {
+for (let table of data.value.table) {
     selected[table.name] = [];
 }
 
@@ -79,20 +78,16 @@ const removeField = async (table) => {
         ok: 'Yes',
         cancel: 'No'
     }).onOk(async () => {
-
-
         //map selected fields
-
         const fields = selected[table].map(field => field.Field)
-
         try {
-            const removeDatabaseFields = await m("removeDatabaseFields", {
+            await m("lightDatabaseRemoveFields", {
                 table,
                 fields: fields
             })
-            lgiht.notify({
+            light.notify({
                 type: 'positive',
-                message: removeDatabaseFields
+                message: "Fields removed successfully"
             })
 
             selected[table] = [];
@@ -106,28 +101,144 @@ const removeField = async (table) => {
         }
     })
 
+}
+
+const createTable = () => {
+    light.dialog({
+        component: table_add
+    }).onOk(async (data) => {
+        try {
+            await m("lightDatabaseCreateTable", {
+                name: data.name,
+                fields: data.fields
+            })
+            light.notify({
+                type: 'positive',
+                message: "Table created successfully"
+            })
+        } catch (e) {
+            light.notify({
+                type: 'negative',
+                message: e.message
+            })
+        }
+        refresh();
+    });
+}
+
+const selectedTable = ref([]);
+
+const removeTable = async () => {
+    light.dialog({
+        title: 'Remove table',
+        message: 'Are you sure you want to remove the selected tables?',
+        ok: 'Yes',
+        cancel: 'No'
+    }).onOk(async () => {
+        //map selected fields
+        const tables = selectedTable.value.map(table => table.Name)
+        try {
+            for (let table of tables) {
+                await m("lightDatabaseRemoveTable", {
+                    table
+                })
+            }
+
+        } catch (e) {
+            light.notify({
+                type: 'negative',
+                message: e.message
+            })
+            return;
+
+        }
+
+        light.notify({
+            type: 'positive',
+            message: "Tables removed successfully"
+        })
+
+        selectedTable.value = [];
+
+        refresh();
+    })
+}
+
+const truncatTable = async () => {
+    light.dialog({
+        title: 'Truncate table',
+        message: 'Are you sure you want to truncate the selected tables?',
+        ok: 'Yes',
+        cancel: 'No'
+    }).onOk(async () => {
+        //map selected fields
+        const tables = selectedTable.value.map(table => table.Name)
+        try {
+            for (let table of tables) {
+                await m("lightDatabaseTruncateTable", {
+                    table
+                })
+            }
 
+        } catch (e) {
+            light.notify({
+                type: 'negative',
+                message: e.message
+            })
+            return;
 
+        }
 
+        light.notify({
+            type: 'positive',
+            message: "Tables truncated successfully"
+        })
 
+        selectedTable.value = [];
 
+        refresh();
+    })
 }
 </script>
 <template>
-    <l-page gutter="sm">
+    <l-page title="Database">
         <l-card>
             <l-list>
-                <l-item label="Version">{{ database.version }}</l-item>
+                <l-item label="Version">{{ data.version }}</l-item>
             </l-list>
         </l-card>
 
-
         <q-card flat bordered>
-            <q-list class="rounded-borders" separator bordered>
+            <q-list separator bordered>
                 <q-expansion-item label="Table Status" dense>
-                    <div class="q-ma-sm">
-                        <q-table :rows="database.tableStatus" hide-pagination flat bordered separator="cell" dense
-                            :rows-per-page-options="[0]">
+                    <div class="q-ma-sm q-gutter-y-sm">
+
+                        <q-table :rows="custom_tables" hide-pagination flat bordered separator="cell" dense
+                            :rows-per-page-options="[0]" v-model:selected="selectedTable" selection="multiple"
+                            row-key="Name" @selection="onSelectionTable">
+
+                            <template #top-left>
+                                <q-btn icon="sym_o_add" @click="createTable()" round flat size="sm">
+                                    <q-tooltip>Create table</q-tooltip>
+                                </q-btn>
+                                <q-btn icon="sym_o_delete" @click="removeTable()" round flat size="sm"
+                                    :disable="selectedTable.length == 0">
+                                    <q-tooltip>Remove table</q-tooltip>
+                                </q-btn>
+
+                                <q-btn icon="sym_o_scan_delete" @click="truncatTable" round flat size="sm"
+                                    :disable="selectedTable.length == 0">
+                                    <q-tooltip>Truncate table</q-tooltip>
+                                </q-btn>
+
+                            </template>
+                        </q-table>
+
+
+
+                        <q-table :rows="systables" hide-pagination flat bordered separator="cell" dense
+                            :rows-per-page-options="[0]" row-key="Name" title="System tables">
+
                         </q-table>
                     </div>
                 </q-expansion-item>
@@ -135,21 +246,21 @@ const removeField = async (table) => {
         </q-card>
 
         <q-card flat bordered>
-            <q-list class="rounded-borders" separator bordered>
-                <q-expansion-item :label="table.name" v-for="table in tables" dense>
-                    <q-toolbar>
-                        <q-btn icon="sym_o_add" @click="add(table.name)" round flat size="sm">
-                            <q-tooltip>Add field</q-tooltip>
-                        </q-btn>
-                        <q-btn icon="sym_o_delete" @click="removeField(table.name)" round flat size="sm"
-                            :disable="selected[table.name].length == 0">
-                            <q-tooltip>Remove field</q-tooltip>
-                        </q-btn>
-                    </q-toolbar>
+            <q-list separator bordered>
+                <q-expansion-item :label="table.name" v-for="table in data.table" dense>
                     <div class="q-ma-sm">
                         <q-table row-key="Field" separator="cell" dense :rows="table.columns"
                             :rows-per-page-options="[0]" hide-pagination flat bordered selection="multiple"
                             v-model:selected="selected[table.name]">
+                            <template #top-left>
+                                <q-btn icon="sym_o_add" @click="add(table.name)" round flat size="sm">
+                                    <q-tooltip>Add field</q-tooltip>
+                                </q-btn>
+                                <q-btn icon="sym_o_delete" @click="removeField(table.name)" round flat size="sm"
+                                    :disable="selected[table.name].length == 0">
+                                    <q-tooltip>Remove field</q-tooltip>
+                                </q-btn>
+                            </template>
                         </q-table>
                     </div>
 

package/dist/runtime/pages/System/fs.vue

@@ -1,14 +1,19 @@
 <script setup>
-import { ref } from 'vue';
-import { m, q } from "#imports"
-const { app, listFileSystem } = await q({
-    app: {
-        driveTypes: true
-    },
-    listFileSystem: true
-});
-
-const items = ref(listFileSystem)
+import { ref, computed } from 'vue';
+import { m, q, useAsyncData } from "#imports"
+import { useQuasar } from "#imports"
+const $q = useQuasar()
+const { data: app, refresh } = await useAsyncData(async () => {
+    return (await q({
+        app: {
+            driveTypes: true,
+            listFileSystem: true
+        }
+    })).app;
+})
+
+
+const items = computed(() => app.value.listFileSystem)
 const dialog = ref(false)
 const value = ref({})
 
@@ -18,27 +23,34 @@ const onSubmit = async (data) => {
         data: data
     })
 
-    items.value.push(data)
     dialog.value = false
+    refresh()
 }
 
-const onRemove = async (row) => {
-    await m("deleteFileSystem", {
-        name: row.name
-    })
-    //reload data
+const onRemove = async (selected) => {
+
+    //confirm
+    $q.dialog({
+        title: 'Confirm',
+        message: 'Are you sure you want to delete this file system?',
+        ok: 'Yes',
+        cancel: 'No'
+    }).onOk(async () => {
+
+
+        for (let row of selected) {
+            await m("deleteFileSystem", {
+                name: row.name
+            })
+        }
+        selected.value = []
 
-    const { listFileSystem } = await q({ listFileSystem: true });
-    items.value = listFileSystem
 
+        refresh();
+    })
 }
 
 const columns = [
-    {
-        name: 'actions',
-        label: '',
-        align: 'center'
-    },
     {
         name: 'name',
         required: true,
@@ -62,13 +74,12 @@ const columns = [
         align: 'left',
     }
 ]
+
+const selected = ref([])
 </script>
 <template>
 
-    <l-page gutter="xs">
-        <template #header>
-            <l-btn label="Add" icon="sym_o_add" @click="dialog = true"></l-btn>
-        </template>
+    <l-page title="File system">
 
         <q-dialog v-model="dialog" persistent>
             <q-card style="width: 500px;">
@@ -133,12 +144,15 @@ const columns = [
             </q-card>
         </q-dialog>
 
-        <l-table :rows="items" :columns="columns">
-            <template #body-cell-actions="props">
-                <q-td auto-width>
-                    <q-btn icon="sym_o_delete" @click="onRemove(props.row)" round dense flat class="text-grey"></q-btn>
-                </q-td>
-
+        <q-table :rows="items" :columns="columns" selection="multiple" flat bordered dense separator="cell"
+            v-model:selected="selected" row-key="name">
+            <template #top-left>
+                <q-btn icon="sym_o_add" @click="dialog = true" flat round dense>
+                    <q-tooltip>Add File System</q-tooltip>
+                </q-btn>
+                <q-btn icon="sym_o_delete" @click="onRemove(selected)" flat round dense :disable="selected.length == 0">
+                    <q-tooltip>Remove File System</q-tooltip>
+                </q-btn>
             </template>
 
             <template #body-cell-data="props">
@@ -147,6 +161,6 @@ const columns = [
                 </q-td>
             </template>
 
-        </l-table>
+        </q-table>
     </l-page>
 </template>

package/dist/runtime/pages/System/mailtest.vue

@@ -32,7 +32,7 @@ const onSubmit = async (data) => {
 }
 </script>
 <template>
-    <l-page>
+    <l-page title="Mail test">
         <form-kit type="l-form" @submit="onSubmit" :value="{
             email: my.email,
             subject: 'Test email',

package/dist/runtime/pages/System/package.vue

@@ -1,7 +1,11 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { q } from '#imports'
-const { system } = await q({ system: ["package"] })
+const { system } = await q({
+    system: {
+        package: true
+    }
+})
 const filter = ref("")
 const filtered = computed(() => {
     if (!filter.value) return system.package
@@ -14,7 +18,7 @@ const filtered = computed(() => {
 
 </script>
 <template>
-    <l-page>
+    <l-page title="System package">
         <q-table dense :rows="filtered" :rows-per-page-options="[0]" hide-pagination flat bordered separator="cell">
             <template v-slot:top-right>
                 <q-input outlined dense debounce="300" v-model="filter" placeholder="Search">

package/dist/runtime/pages/System/phpinfo.vue

@@ -1,9 +1,13 @@
 <script setup>
-import { q } from '../../'
-const { system } = await q({ system: ["phpInfo"] })
+import { q } from '#imports'
+const { system } = await q({
+    system: {
+        phpInfo: true
+    }
+})
 </script>
 <template>
-    <l-page>
+    <l-page title="PHP info">
         <iframe :srcdoc="system.phpInfo" style="height: 700px;" class="full-width no-border"></iframe>
     </l-page>
 </template>

package/dist/runtime/pages/System/setting.vue

@@ -32,7 +32,6 @@ const obj = app.config.reduce((acc, cur) => {
     return acc
 }, {});
 
-obj.revision = obj.revision ? obj.revision.split(',') : []
 
 
 const onSubmit = async (d) => {
@@ -76,7 +75,7 @@ const onSubmit = async (d) => {
                     <l-system-setting-general v-if="tab == 'general'" v-model="obj" />
                     <l-system-setting-mail v-if="tab == 'mail'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-security v-if="tab == 'security'" v-bind="obj" @submit="onSubmit" />
-                    <l-system-setting-modules v-if="tab == 'Modules'" v-model="obj" />
+                    <l-system-setting-modules v-if="tab == 'Modules'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-developer v-if="tab == 'developer'" v-model="obj" />
                     <l-system-setting-forget-password v-if="tab == 'forget-password'" v-model="obj" />
                     <l-system-setting-authentication v-if="tab == 'authentication'" v-bind="obj" @submit="onSubmit" />

package/dist/runtime/pages/User/profile.vue

@@ -2,34 +2,43 @@
 import { q, getGQLFields, model } from '#imports'
 import { toQuery } from '@hostlink/light';
 
-const { my } = await q(
-    {
-        my: ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date", {
-            userLog: {
+const { my } = await q({
+    my: {
+        user_id: true,
+        username: true,
+        first_name: true,
+        last_name: true,
+        email: true,
+        phone: true,
+        roles: true,
+        addr1: true,
+        addr2: true,
+        addr3: true,
+        join_date: true,
+        userLog: {
+            __args: {
+                sort: "userlog_id:desc"
+            },
+            data: {
                 __args: {
-                    sort: "userlog_id:desc"
+                    limit: 10
                 },
-                data: {
-                    __args: {
-                        limit: 10
-                    },
-                    ...toQuery(getGQLFields('UserLog', ['login_dt', 'result', "user_agent"]))
-                }
+                ...toQuery(getGQLFields('UserLog', ['login_dt', 'result', "user_agent"]))
+            }
+        },
+        eventLog: {
+            __args: {
+                sort: "eventlog_id:desc"
             },
-            eventLog: {
+            data: {
                 __args: {
-                    sort: "eventlog_id:desc"
+                    limit: 10
                 },
-                data: {
-                    __args: {
-                        limit: 10
-                    },
-                    ...toQuery(getGQLFields('EventLog', ['class', 'id', 'action', "created_time"]))
-                }
+                ...toQuery(getGQLFields('EventLog', ['class', 'id', 'action', "created_time"]))
             }
-        }]
+        }
     }
-)
+})
 
 const userlogColumns = model('UserLog').columns(['login_dt', 'result', 'user_agent']);
 //remove all searchable
@@ -47,7 +56,6 @@ eventLogCols.forEach(col => {
 </script>
 <template>
     <l-page title="User profile" gutter="sm">
-
         <template #header>
             <l-btn icon="sym_o_password" to="setting/password" label="Update password" />
             <l-btn icon="sym_o_key" to="setting/two-factor-auth" label="Two factor auth" />
@@ -55,9 +63,7 @@ eventLogCols.forEach(col => {
 
         <l-row>
             <l-col md="4">
-
                 <l-card>
-
                     <q-card-section class="text-h5 text-center">
                         {{ my.first_name }} {{ my.last_name }}
                     </q-card-section>

package/dist/runtime/pages/User/setting/index.vue

@@ -1,25 +1,16 @@
 <script setup>
-import { reactive } from "vue"
 import { reset } from "@formkit/core"
-import { q, m, notify } from '../../../'
+import { q, m, notify } from '#imports'
 
-const obj = reactive(await q("my", ["username", "email", "first_name", "last_name"]))
-const save = async () => {
-    try {
-        await m("updateMy", {
-            data: {
-                email: obj.email,
-                first_name: obj.first_name,
-                last_name: obj.last_name
-
-            }
-        });
-        notify("Your profile has been updated")
-
-    } catch (e) {
-        notify(e.message, "red")
+const { my } = await q({
+    my: {
+        username: true,
+        email: true,
+        first_name: true,
+        last_name: true
     }
-}
+})
+
 const onSubmit = async (data, form) => {
     return await m("updateMy", {
         data: {
@@ -34,7 +25,7 @@ const onSubmit = async (data, form) => {
 }
 </script>
 <template>
-    <FormKit type="l-form" :value="obj" :bordered="false" @submit="onSubmit">
+    <FormKit type="l-form" :value="my" :bordered="false" @submit="onSubmit">
         <FormKit type="l-input" label="Username" name="username" readonly></FormKit>
         <FormKit type="l-input" label="Email" name="email" validation="required|email"></FormKit>
         <FormKit type="l-input" label="First name" name="first_name" validation="required"></FormKit>

package/dist/runtime/pages/User/setting/information.vue

@@ -1,7 +1,14 @@
 <script setup>
 import { reset } from "@formkit/core"
-import { q, m, notify } from '../../../'
-const obj = await q("my", ["phone", "addr1", "addr2", "addr3"])
+import { q, m, notify } from '#imports'
+const { my } = await q({
+    my: {
+        phone: true,
+        addr1: true,
+        addr2: true,
+        addr3: true
+    }
+})
 const onSubmit = (data, form) => {
     return m("updateMy", {
         data: {
@@ -17,7 +24,7 @@ const onSubmit = (data, form) => {
 }
 </script>
 <template>
-    <FormKit type="l-form" :value="obj" :bordered="false" @submit="onSubmit">
+    <FormKit type="l-form" :value="my" :bordered="false" @submit="onSubmit">
         <FormKit type="l-input" label="Phone" name="phone"></FormKit>
         <FormKit type="l-input" label="Address1" name="addr1"></FormKit>
         <FormKit type="l-input" label="Address2" name="addr2"></FormKit>

package/dist/runtime/pages/User/setting/style.vue

@@ -1,7 +1,11 @@
 <script setup>
 import { q, m } from '#imports'
 import { reactive } from 'vue'
-let my = await q("my", ["styles"]);
+let { my } = await q({
+    my: {
+        styles: true
+    }
+});
 
 const styles = reactive({
 
@@ -155,8 +159,7 @@ const columns = [
                                         { label: 'A', value: 'a' },
                                         { label: 'B', value: 'b' },
                                         { label: 'C', value: 'c' }
-                                    ]" 
-                                    />
+                                    ]" />
 
                                 <q-table :columns="columns" :rows="[
                                     { name: 'A', phone: '123' },