Merge branch 'new-dev-demo' of https://github.com/devforth/adminforth into new-dev-demo

Author: NoOne7135

adminforth/documentation/docs/tutorial/03-Customization/04-hooks.md

@@ -189,21 +189,29 @@ Let's limit it:
 ```ts title='./resources/apartments.ts'
 {
   ...
-  hooks: {
-    dropdownList: {
-      beforeDatasourceRequest: async ({ adminUser, query }: { adminUser: AdminUser, query: any }) => {
-        if (adminUser.dbUser.role !== "superadmin") {
-          query.filtersTools.replaceOrAddTopFilter(Filters.EQ("id", adminUser.dbUser.id));
-        };
-        return {
-          "ok": true,
-        };
-      }
+
+  foreignResource: { 
+    
+    ...
+
+    hooks: {
+      dropdownList: {
+        beforeDatasourceRequest: async ({ adminUser, query }: { adminUser: AdminUser, query: any }) => {
+          if (adminUser.dbUser.role !== "superadmin") {
+            query.filtersTools.replaceOrAddTopFilter(Filters.EQ("id", adminUser.dbUser.id));
+          };
+          return {
+            "ok": true,
+          };
+        }
+      },
     },
-  },
+  }
 }
 ```
 
+> ☝️☝️☝️ This hooks should be written only inside column. If you'll add it in resource hooks - it won't work
+
 In our case we limit the dropdown list to show only the current user, however you can use same sample to list only objects who are related to the current user in case if you will have relation configurations which require to show related objects which belongs to the current user.
 
 Flow diagram for dropdown list:

adminforth/documentation/docs/tutorial/07-Plugins/05-upload.md

@@ -524,7 +524,7 @@ To do this add avatar column to the user resource:
     role          String
     created_at    DateTime
     //diff-add
-    avatar        ?String
+    avatar        String?
   }
 ```
 

adminforth/documentation/docs/tutorial/08-Advanced/02-working-without-direct-database-connection.md

@@ -0,0 +1,21 @@
+# Working without direct database connection
+
+Out of the box, AdminForth connects directly to your database using one of the supported drivers (PostgreSQL, MySQL, ClickHouse, MongoDB) and executes queries against it.
+
+In some cases, you may not want to expose a direct database connection to AdminForth. Instead, you may prefer to allow AdminForth to access and modify data through your own APIs (for example, REST, GraphQL, or JSON-RPC).
+
+With this approach, AdminForth never connects to the database and never even knows its URL. All read and write operations go through your API layer.
+
+Why do this?
+
+- Your API may enforce additional constraints or validation rules.
+
+- You can precisely log all operations using your own logging or audit systems. (The built-in AuditLog tracks data modifications only and does not log read operations.)
+
+- Your API may contain custom logic, such as distributed workflows or complex data-modification rules.
+
+To implement this, you need to extend the data connector class and implement a small set of methods responsible for data access and mutations.
+
+This example demonstrates how to do this using GraphQL, but the same approach can be adapted to REST or any other protocol. The code comments include detailed guidance for these cases.
+
+Another reason to create a custom data source adapter is to support a database that AdminForth does not yet support. In that case, you are welcome to submit a pull request to AdminForth to add native support for that database.

adminforth/spa/src/components/ResourceForm.vue

@@ -322,7 +322,7 @@ async function searchOptions(columnName: string, searchTerm: string) {
 
 
 const editableColumns = computed(() => {
-  return props.resource?.columns?.filter(column => column.showIn?.[mode.value] && (currentValues.value ? checkShowIf(column, currentValues.value) : true));
+  return props.resource?.columns?.filter(column => column.showIn?.[mode.value] && (currentValues.value ? checkShowIf(column, currentValues.value, props.resource.columns) : true));
 });
 
 const isValid = computed(() => {

adminforth/spa/src/components/ShowTable.vue

@@ -24,14 +24,14 @@
               dark:bg-darkShowTablesBodyBackground dark:border-darkShowTableBodyBorder block md:table-row"
           >
             <component
-                v-if="column.components?.showRow && checkShowIf(column, record)"
+                v-if="column.components?.showRow && checkShowIf(column, record, resource?.columns || [])"
                   :is="getCustomComponent(column.components.showRow)"
                   :meta="column.components.showRow.meta"
                   :column="column"
                   :resource="coreStore.resource"
                   :record="coreStore.record"
               />
-            <template v-else-if="checkShowIf(column, record)">
+            <template v-else-if="checkShowIf(column, record, resource?.columns || [])">
               <td class="px-6 py-4 relative block md:table-cell font-bold md:font-normal pb-0 md:pb-4">
                 {{ column.label }}
               </td>

adminforth/spa/src/renderers/RichText.vue

@@ -22,4 +22,19 @@ const htmlContent = protectAgainstXSS(props.record[props.column.name])
    /* You can add default styles here if needed */
   word-break: break-word;
 }
+.rich-text :deep(table) {
+  border-collapse: collapse;
+  border: 1px solid #ddd;
+}
+
+.rich-text :deep(table th),
+.rich-text :deep(table td) {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+.rich-text :deep(table th) {
+  background-color: #f5f5f5;
+  font-weight: 600;
+}
 </style>

adminforth/spa/src/stores/filters.ts

@@ -15,7 +15,7 @@ export const useFiltersStore = defineStore('filters', () => {
     }
     const setFilter = (filter: any) => {
         const index = filters.value.findIndex(f => f.field === filter.field);
-        if (filters.value[index]) {
+        if (filters.value[index] && filters.value[index].operator === filter.value.operator) {
             filters.value[index] = filter;
             return;
         }

adminforth/spa/src/utils.ts

@@ -51,7 +51,7 @@ export async function callApi({path, method, body, headers, silentError = false}
       } else {
         await router.push({ name: 'login' });
       }
-      return null;alert
+      return null;
     } 
     return await r.json();
   } catch(e) {
@@ -446,9 +446,14 @@ export function createSearchInputHandlers(
   }, {} as Record<string, (searchTerm: string) => void>);
 }
 
-export function checkShowIf(c: AdminForthResourceColumnInputCommon, record: Record<string, any>) {
+export function checkShowIf(c: AdminForthResourceColumnInputCommon, record: Record<string, any>, allColumns: AdminForthResourceColumnInputCommon[]) {
   if (!c.showIf) return true;
-
+  const recordCopy = { ...record };
+  for (const col of allColumns) {
+    if (!recordCopy[col.name]) {
+      recordCopy[col.name] = null;
+    }
+  }
   const evaluatePredicate = (predicate: Predicate): boolean => {
     const results: boolean[] = [];
 
@@ -463,7 +468,7 @@ export function checkShowIf(c: AdminForthResourceColumnInputCommon, record: Reco
     const fieldEntries = Object.entries(predicate).filter(([key]) => !key.startsWith('$'));
     if (fieldEntries.length > 0) {
       const fieldResult = fieldEntries.every(([field, condition]) => {
-        const recordValue = record[field];
+        const recordValue = recordCopy[field];
 
         if (condition === undefined) {
           return true;

adminforth/spa/src/views/CreateView.vue

@@ -192,7 +192,7 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
     validating.value = false;
   }
   const requiredColumns = coreStore.resource?.columns.filter(c => c.required?.create === true) || [];
-  const requiredColumnsToSkip = requiredColumns.filter(c => checkShowIf(c, record.value) === false);  
+  const requiredColumnsToSkip = requiredColumns.filter(c => checkShowIf(c, record.value, coreStore.resource?.columns || []) === false);  
   saving.value = true;
   const response = await callAdminForthApi({
     method: 'POST',

live-demo/app/index.ts

@@ -148,16 +148,16 @@ if (import.meta.url === `file://${process.argv[1]}`) {
         const db = admin.resource('aparts').dataConnector.client;
         const days = req.body.days || 7;
         const apartsByDays = await db.prepare(
-          `SELECT 
+          `SELECT
             strftime('%Y-%m-%d', created_at) as day, 
             COUNT(*) as count 
           FROM apartments 
           GROUP BY day 
-          ORDER BY day DESC
-          LIMIT ?;
-          `
+          ORDER BY day ASC
+          LIMIT ?;`
         ).all(days);
 
+
         const totalAparts = apartsByDays.reduce((acc: number, { count }: { count:number }) => acc + count, 0);
 
         // add listed, unlisted, listedPrice, unlistedPrice
@@ -170,19 +170,18 @@ if (import.meta.url === `file://${process.argv[1]}`) {
             SUM((1 - listed) * price) as unlistedPrice
           FROM apartments
           GROUP BY day
-          ORDER BY day DESC
-          LIMIT ?;
-          `
+          ORDER BY day ASC
+          LIMIT ?;`
         ).all(days);
 
+
         const apartsCountsByRooms = await db.prepare(
           `SELECT 
             number_of_rooms, 
             COUNT(*) as count 
           FROM apartments 
           GROUP BY number_of_rooms 
-          ORDER BY number_of_rooms;
-          `
+          ORDER BY number_of_rooms;`
         ).all();
 
         const topCountries = await db.prepare(
@@ -192,27 +191,24 @@ if (import.meta.url === `file://${process.argv[1]}`) {
           FROM apartments 
           GROUP BY country 
           ORDER BY count DESC
-          LIMIT 4;
-          `
+          LIMIT 4;`
         ).all();
 
         const totalSquare = await db.prepare(
           `SELECT 
             SUM(square_meter) as totalSquare 
-          FROM apartments;
-          `
+          FROM apartments;`
         ).get();
 
         const listedVsUnlistedPriceByDays = await db.prepare(
-          `SELECT 
+        `SELECT
             strftime('%Y-%m-%d', created_at) as day, 
             SUM(listed * price) as listedPrice,
             SUM((1 - listed) * price) as unlistedPrice
           FROM apartments
           GROUP BY day
-          ORDER BY day DESC
-          LIMIT ?;
-          `
+          ORDER BY day ASC
+          LIMIT ?;`
         ).all(days);
 
         const totalListedPrice = Math.round(listedVsUnlistedByDays.reduce((