adminforth 1.2.29 → 1.2.31

package/dataConnectors/clickhouse.ts

@@ -61,10 +61,9 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
             field.type = AdminForthDataTypes.STRING;
           } else if (baseType.startsWith('Decimal')) {
             field.type = AdminForthDataTypes.DECIMAL;
-            // const [precision, scale] = baseType.match(/\d+/g);
-            // TODO
-            // field.precision = parseInt(precision);
-            // field.scale = parseInt(scale);
+            const [precision, scale] = baseType.match(/\d+/g);
+            field.precision = parseInt(precision);
+            field.scale = parseInt(scale);
           } else if (baseType.startsWith('Float')) {
             field.type = AdminForthDataTypes.FLOAT;
           } else if (baseType == 'DateTime64' || baseType == 'DateTime') {
@@ -216,7 +215,6 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
         limit,
         offset,
       };
-      console.log('🪲 Clickhouse Query', q, 'params:', d);
 
       const stmt = await this.client.query({
         query: q,
@@ -224,9 +222,6 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
         query_params: d,
       });
 
-      if (process.env.HEAVY_DEBUG) {
-        console.log('🪲 Clickhouse Query', q, 'params:', d);
-      }
       const rows = await stmt.json();
 
       let total = 0;
@@ -237,7 +232,6 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
           query_params: d,
         });
         const countResp = await countQ.json()
-        console.log('🪲 Clickhouse Query count', countResp);
         total = countResp[0]['COUNT()'];
       }
 
@@ -257,53 +251,42 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
       const tableName = resource.table;
       const result = {};
       await Promise.all(columns.map(async (col) => {
-        // const stmt = await this.db.prepare(`SELECT MIN(${col.name}) as min, MAX(${col.name}) as max FROM ${tableName}`);
-        // const { min, max } = stmt.get();
-        // result[col.name] = {
-        //   min, max,
-        // };
+        const stmt = await this.client.query({
+          query: `SELECT MIN(${col.name}) as min, MAX(${col.name}) as max FROM ${tableName}`,
+          format: 'JSONEachRow',
+        });
+        const rows = await stmt.json();
+        result[col.name] = {
+          min: rows[0].min,
+          max: rows[0].max,
+        };
+
       }))
       return result;
     }
     async createRecordOriginalValues({ resource, record }: { resource: AdminForthResource, record: any }) {
       const tableName = resource.table;
       const columns = Object.keys(record);
-      
-      // const q = `INSERT INTO ${tableName} (${columns.join(', ')}) VALUES (${columns.map((colName) => {
-      //   const colType = resource.dataSourceColumns.find((col) => col.name == colName)._underlineType;
-      //   if (colType.startsWith('Int') || colType.startsWith('UInt') || colType.startsWith('Float')) {
-      //     return record[colName];
-      //   } else {
-      //     return "'"+record[colName]+"'"
-      //   }
-      // }).join(', ')  })`;
-      // console.log('🪲 Clickhouse Query', q) ;
-      // await this.client.command({
-      //   query: q,
-
-      // });
-
-      console.log('🪲 Clickhouse Insert', record);
-
       await this.client.insert({
         database: this.dbName,
         table: tableName,
         columns: columns,
         values: [Object.values(record)],
       });
-
-      console.log('🪲 Clickhouse Query done');
-      
     }
 
     async updateRecord({ resource, recordId, newValues }: { resource: AdminForthResource, recordId: any, newValues: any }) {
-      const columnsWithPlaceholders = Object.keys(newValues).map((col) => `${col} = ?`);
+      const columnsWithPlaceholders = Object.keys(newValues).map((col) => {
+        return `${col} = {${col}:${resource.dataSourceColumns.find((c) => c.name == col)._underlineType}}`
+      });
       const values = [...Object.values(newValues), recordId];
 
-      // const q = this.db.prepare(
-      //     `UPDATE ${resource.table} SET ${columnsWithPlaceholders} WHERE ${this.getPrimaryKey(resource)} = ?`
-      // )
-      // await q.run(values);
+      await this.client.command(
+        { 
+          query: `ALTER TABLE ${this.dbName}.${resource.table} UPDATE ${columnsWithPlaceholders.join(', ')} WHERE ${this.getPrimaryKey(resource)} = {recordId:${resource.dataSourceColumns.find((c) => c.primaryKey)._underlineType}}`, 
+          query_params: { ...newValues, recordId },
+      }
+      );
     }
 
     async deleteRecord({ resource, recordId }: { resource: AdminForthResource, recordId: any }) {

package/dist/dataConnectors/clickhouse.js

@@ -77,10 +77,9 @@ class ClickhouseConnector extends AdminForthBaseConnector {
                 }
                 else if (baseType.startsWith('Decimal')) {
                     field.type = AdminForthDataTypes.DECIMAL;
-                    // const [precision, scale] = baseType.match(/\d+/g);
-                    // TODO
-                    // field.precision = parseInt(precision);
-                    // field.scale = parseInt(scale);
+                    const [precision, scale] = baseType.match(/\d+/g);
+                    field.precision = parseInt(precision);
+                    field.scale = parseInt(scale);
                 }
                 else if (baseType.startsWith('Float')) {
                     field.type = AdminForthDataTypes.FLOAT;
@@ -210,15 +209,11 @@ class ClickhouseConnector extends AdminForthBaseConnector {
             const q = `SELECT ${columns} FROM ${tableName} ${where} ${orderBy} LIMIT {limit:Int} OFFSET {offset:Int}`;
             const d = Object.assign(Object.assign({}, params), { limit,
                 offset });
-            console.log('🪲 Clickhouse Query', q, 'params:', d);
             const stmt = yield this.client.query({
                 query: q,
                 format: 'JSONEachRow',
                 query_params: d,
             });
-            if (process.env.HEAVY_DEBUG) {
-                console.log('🪲 Clickhouse Query', q, 'params:', d);
-            }
             const rows = yield stmt.json();
             let total = 0;
             if (getTotals) {
@@ -228,7 +223,6 @@ class ClickhouseConnector extends AdminForthBaseConnector {
                     query_params: d,
                 });
                 const countResp = yield countQ.json();
-                console.log('🪲 Clickhouse Query count', countResp);
                 total = countResp[0]['COUNT()'];
             }
             return {
@@ -248,11 +242,15 @@ class ClickhouseConnector extends AdminForthBaseConnector {
             const tableName = resource.table;
             const result = {};
             yield Promise.all(columns.map((col) => __awaiter(this, void 0, void 0, function* () {
-                // const stmt = await this.db.prepare(`SELECT MIN(${col.name}) as min, MAX(${col.name}) as max FROM ${tableName}`);
-                // const { min, max } = stmt.get();
-                // result[col.name] = {
-                //   min, max,
-                // };
+                const stmt = yield this.client.query({
+                    query: `SELECT MIN(${col.name}) as min, MAX(${col.name}) as max FROM ${tableName}`,
+                    format: 'JSONEachRow',
+                });
+                const rows = yield stmt.json();
+                result[col.name] = {
+                    min: rows[0].min,
+                    max: rows[0].max,
+                };
             })));
             return result;
         });
@@ -261,36 +259,24 @@ class ClickhouseConnector extends AdminForthBaseConnector {
         return __awaiter(this, arguments, void 0, function* ({ resource, record }) {
             const tableName = resource.table;
             const columns = Object.keys(record);
-            // const q = `INSERT INTO ${tableName} (${columns.join(', ')}) VALUES (${columns.map((colName) => {
-            //   const colType = resource.dataSourceColumns.find((col) => col.name == colName)._underlineType;
-            //   if (colType.startsWith('Int') || colType.startsWith('UInt') || colType.startsWith('Float')) {
-            //     return record[colName];
-            //   } else {
-            //     return "'"+record[colName]+"'"
-            //   }
-            // }).join(', ')  })`;
-            // console.log('🪲 Clickhouse Query', q) ;
-            // await this.client.command({
-            //   query: q,
-            // });
-            console.log('🪲 Clickhouse Insert', record);
             yield this.client.insert({
                 database: this.dbName,
                 table: tableName,
                 columns: columns,
                 values: [Object.values(record)],
             });
-            console.log('🪲 Clickhouse Query done');
         });
     }
     updateRecord(_a) {
         return __awaiter(this, arguments, void 0, function* ({ resource, recordId, newValues }) {
-            const columnsWithPlaceholders = Object.keys(newValues).map((col) => `${col} = ?`);
+            const columnsWithPlaceholders = Object.keys(newValues).map((col) => {
+                return `${col} = {${col}:${resource.dataSourceColumns.find((c) => c.name == col)._underlineType}}`;
+            });
             const values = [...Object.values(newValues), recordId];
-            // const q = this.db.prepare(
-            //     `UPDATE ${resource.table} SET ${columnsWithPlaceholders} WHERE ${this.getPrimaryKey(resource)} = ?`
-            // )
-            // await q.run(values);
+            yield this.client.command({
+                query: `ALTER TABLE ${this.dbName}.${resource.table} UPDATE ${columnsWithPlaceholders.join(', ')} WHERE ${this.getPrimaryKey(resource)} = {recordId:${resource.dataSourceColumns.find((c) => c.primaryKey)._underlineType}}`,
+                query_params: Object.assign(Object.assign({}, newValues), { recordId }),
+            });
         });
     }
     deleteRecord(_a) {

package/dist/spa/spa/src/views/LoginView.vue

@@ -22,17 +22,23 @@
                 </div>
                 <!-- Modal body -->
                 <div class="p-4 md:p-5">
-                    <form class="space-y-4"  @submit.prevent>
+                    <form class="space-y-4" @submit.prevent>
                         <div>
                             <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
-                            <input type="username" name="username" id="username" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
+                            <input type="username" name="username" id="username" 
+                              ref="usernameInput"
+                              @keydown.enter="passwordInput.focus()"
+                              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
                         </div>
                         <div class="relative">
                             <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
-                            <input :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
+                            <input 
+                              ref="passwordInput"
+                              @keydown.enter="login"
+                              :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
                             <button type="button" @click="showPw = !showPw" class="absolute top-12 right-3 -translate-y-1/2 text-gray-400 dark:text-gray-300">
-                                <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
-                                <IconEyeSlashSolid class="w-5 h-5" v-else />
+                              <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
+                              <IconEyeSlashSolid class="w-5 h-5" v-else />
                             </button>
                         </div>
                         <!-- <div class="flex justify-between">
@@ -86,6 +92,8 @@ import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbi
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
 
+const passwordInput = ref(null);
+const usernameInput = ref(null);
 
 const router = useRouter();
 const inProgress = ref(false);
@@ -99,31 +107,36 @@ const showPw = ref(false);
 const error = ref(null);
 
 onMounted(() => {
-    coreStore.getPublicConfig()
+    coreStore.getPublicConfig();
+    usernameInput.value.focus();
 });
 
 
-
 async function login() {
-    inProgress.value = true;
-    const resp = await callAdminForthApi({
-      path: '/login',
-      method: 'POST',
-      body: {
-        username: document.getElementById('username').value,
-        password: document.getElementById('password').value,
-      }
-    });
-    inProgress.value = false;
-    if (resp.error) {
-      error.value = resp.error;
-    } else if (resp.redirectTo) {
-      router.push(resp.redirectTo);
-    } else {
-      error.value = null;
-      await user.finishLogin();
+  const username = usernameInput.value.value;
+  const password = passwordInput.value.value;
+
+  if (!username || !password) {
+    return;
+  }
+  inProgress.value = true;
+  const resp = await callAdminForthApi({
+    path: '/login',
+    method: 'POST',
+    body: {
+      username,
+      password,
     }
-
+  });
+  inProgress.value = false;
+  if (resp.error) {
+    error.value = resp.error;
+  } else if (resp.redirectTo) {
+    router.push(resp.redirectTo);
+  } else {
+    error.value = null;
+    await user.finishLogin();
+  }
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.2.29",
+  "version": "1.2.31",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/src/views/LoginView.vue

@@ -22,17 +22,23 @@
                 </div>
                 <!-- Modal body -->
                 <div class="p-4 md:p-5">
-                    <form class="space-y-4"  @submit.prevent>
+                    <form class="space-y-4" @submit.prevent>
                         <div>
                             <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
-                            <input type="username" name="username" id="username" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
+                            <input type="username" name="username" id="username" 
+                              ref="usernameInput"
+                              @keydown.enter="passwordInput.focus()"
+                              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
                         </div>
                         <div class="relative">
                             <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
-                            <input :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
+                            <input 
+                              ref="passwordInput"
+                              @keydown.enter="login"
+                              :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
                             <button type="button" @click="showPw = !showPw" class="absolute top-12 right-3 -translate-y-1/2 text-gray-400 dark:text-gray-300">
-                                <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
-                                <IconEyeSlashSolid class="w-5 h-5" v-else />
+                              <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
+                              <IconEyeSlashSolid class="w-5 h-5" v-else />
                             </button>
                         </div>
                         <!-- <div class="flex justify-between">
@@ -86,6 +92,8 @@ import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbi
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
 
+const passwordInput = ref(null);
+const usernameInput = ref(null);
 
 const router = useRouter();
 const inProgress = ref(false);
@@ -99,31 +107,36 @@ const showPw = ref(false);
 const error = ref(null);
 
 onMounted(() => {
-    coreStore.getPublicConfig()
+    coreStore.getPublicConfig();
+    usernameInput.value.focus();
 });
 
 
-
 async function login() {
-    inProgress.value = true;
-    const resp = await callAdminForthApi({
-      path: '/login',
-      method: 'POST',
-      body: {
-        username: document.getElementById('username').value,
-        password: document.getElementById('password').value,
-      }
-    });
-    inProgress.value = false;
-    if (resp.error) {
-      error.value = resp.error;
-    } else if (resp.redirectTo) {
-      router.push(resp.redirectTo);
-    } else {
-      error.value = null;
-      await user.finishLogin();
+  const username = usernameInput.value.value;
+  const password = passwordInput.value.value;
+
+  if (!username || !password) {
+    return;
+  }
+  inProgress.value = true;
+  const resp = await callAdminForthApi({
+    path: '/login',
+    method: 'POST',
+    body: {
+      username,
+      password,
     }
-
+  });
+  inProgress.value = false;
+  if (resp.error) {
+    error.value = resp.error;
+  } else if (resp.redirectTo) {
+    router.push(resp.redirectTo);
+  } else {
+    error.value = null;
+    await user.finishLogin();
+  }
 }