@d-mok/quasar-app-extension-quasar-axe 1.0.2 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d-mok/quasar-app-extension-quasar-axe",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "description": "A Quasar App Extension",
   "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
   "license": "MIT",

package/src/boot/RegComp.ts

@@ -20,3 +20,4 @@ export default boot(({ app }) => {
     app.component('QxSelectObject', QxSelectObject)
     app.component('QxSelectText', QxSelectText)
 })
+

package/src/utils/ORM/basic.ts

@@ -3,6 +3,7 @@ import { qDialog } from '../dialog'
 import { qNotify } from '../notify'
 import { LoadingBar } from 'quasar'
 import { Ordering, Criteria, strKeyOf, Sheet } from 'sapphire-js'
+import { reactive } from 'vue'
 
 
 export type Where<T> =
@@ -11,29 +12,20 @@ export type Where<T> =
         | T[K][]
         | { like: string }
     }
-    | ((_: PostgrestFilterBuilder) => any)
 
-// export type OrderBy<T> =
-//     strKeyOf<T>
-//     | { [K in keyof T]?: true | false }
 
 
-
-type Action = 'select' | 'insert' | 'update' | 'delete' | 'patch'
-
+type Action = 'select' | 'insert' | 'update' | 'delete'
 
 
 function loadingBar(on: boolean): void {
-    on ? setTimeout(() => LoadingBar.setDefaults({ size: "5px" }), 3000)
+    on
+        ? setTimeout(() => LoadingBar.setDefaults({ size: "5px" }), 3000)
         : LoadingBar.setDefaults({ size: "0px" })
 }
 
 
 
-
-
-
-
 /**
  * A subclass of array designed as an ORM.
  * @template T - type of element class
@@ -41,28 +33,38 @@ function loadingBar(on: boolean): void {
  */
 export abstract class BasicTable<T extends R, R extends object> extends Sheet<T>{
 
+    constructor(...args: any) {
+        super(args)
+        if (this.caching) {
+            this.restoreCache()
+            setInterval(() => this.screenCache(), 6000 + Math.random() * 3000)
+        }
+    }
+
     /**
      * The name of the database table.
      */
     public abstract readonly tableName: string
+
     /**
      * The name of the ID field.
      */
     public abstract readonly idField: strKeyOf<R>
+
     /**
      * The class of the elements.
      */
     public abstract readonly entityClass: new (_: Partial<R>) => T
+
     /**
      * The default ordering instruction object.
      */
     public readonly ordering: Readonly<Ordering<T>> = []
-    // /**
-    //  * The default fields to select
-    //  */
-    // public readonly selectFields: strKeyOf<R>[] = []
-
 
+    /**
+     * Auto Cache
+     */
+    public readonly caching: boolean = false
 
     private convert(data: R[]): T[] {
         return data.map($ => new this.entityClass($))
@@ -74,41 +76,21 @@ export abstract class BasicTable<T extends R, R extends object> extends Sheet<T>
     }
 
 
-
-    // private defaultOrder(): void {
-    //     if (this.ordering !== undefined)
-    //         this.order(...this.ordering)
-    // }
-
-
-    // private selectedFields() {
-    //     return this.selectFields === undefined ? "*" : this.selectFields.join(",")
-    // }
-
-
     protected idWhere(id: R[this['idField']]): any {
         return { [this.idField]: id }
     }
 
 
-    protected idsWhere(ids: R[this['idField']][]): any {
-        return { [this.idField]: ids }
-    }
 
 
-    protected orderById(ids: R[this['idField']][]): void {
-        let ord = { [this.idField]: ids } as any
-        this.order(ord)
-    }
 
 
-    private APIAction(type: Action, content: Partial<R>[] = []) {
+
+    private APIAction(type: Action, content: Partial<R>[]) {
         let q = supabase.from<R>(this.tableName)
         switch (type) {
             case 'select':
                 return q.select('*')
-            case 'patch':
-                return q.select('*')
             case 'delete':
                 return q.delete()
             case 'insert':
@@ -120,21 +102,19 @@ export abstract class BasicTable<T extends R, R extends object> extends Sheet<T>
 
     protected async API({
         type,
-        content,
-        where,
-        // orderBy,
-        // limit,
-        action = (_: any) => { },
-        confirm,
-        notify,
-        slience
+        content = [],
+        where = {},
+        custom = $ => $,
+        action = ($: any) => { },
+        confirm = undefined,
+        notify = undefined,
+        slience = false
     }: {
         type: Action
         content?: Partial<R>[]
         where?: Where<R>
-        // orderBy?: OrderBy<R>
-        // limit?: number,
-        action: (entities: T[]) => void
+        custom?: (_: PostgrestFilterBuilder) => PostgrestFilterBuilder
+        action?: (entities: T[]) => void
         confirm?: [string, string?]
         notify?: string
         slience?: boolean
@@ -144,12 +124,12 @@ export abstract class BasicTable<T extends R, R extends object> extends Sheet<T>
 
         let q = this.APIAction(type, content)
         q = applyWhere(q, where)
-        // q = applyOrderBy(q, orderBy)
-        // q = applyLimit(q, limit)
+        q = custom(q)
 
         let { data, error } = await q
         handleError(data, error)
 
+        if (this.caching) this.pushCache(data)
         let entities = this.convert(data)
         action(entities)
         this.order(...this.ordering)
@@ -161,68 +141,77 @@ export abstract class BasicTable<T extends R, R extends object> extends Sheet<T>
 
 
 
-
-
     /**
      * Get an item by `criteria`. If not found, return a new object.
      */
     got(criteria: Criteria<T>): T {
         return this.get(criteria) ?? new this.entityClass({})
     }
-}
 
 
+    /**
+     * Get a reactive copy of this.
+     */
+    reactive(): this {
+        return reactive(this) as this
+    }
 
 
 
+    private get cache(): R[] {
+        return JSON.parse(localStorage.getItem(this.tableName) ?? '[]')
+    }
 
-function applyWhere(q: PostgrestFilterBuilder, where?: Where<any>): PostgrestFilterBuilder {
-    if (where === undefined)
-        return q
+    private set cache(data: R[]) {
+        let json = JSON.stringify(data)
+        localStorage.setItem(this.tableName, json)
+    }
 
-    if (typeof where === 'function')
-        return where(q)
+    private restoreCache() {
+        let entities = this.convert(this.cache)
+        this.set(entities)
+    }
 
-    for (let key in where) {
-        let val = where[key]
-        if (Array.isArray(val)) {
-            // treat as in
-            q = q.in(key, val)
-        } else if (typeof val === 'object') {
-            if ('like' in val) {
-                // treat as like
-                let { like } = val as { like: string }
-                q = q.like(key, like)
-            }
-        } else {
-            // treat as eq
-            q = q.eq(key, val)
-        }
+    private pushCache(data: R[]) {
+        this.cache = [...this.cache, ...data]
     }
-    return q
+
+    private screenCache() {
+        let ids: any[] = this.scan(this.idField)
+        this.cache = this.cache.filter($ => ids.includes($[this.idField]))
+    }
+
+
+
+
+
 }
 
-// function applyOrderBy(q: PostgrestFilterBuilder, orderBy?: OrderBy<any>): PostgrestFilterBuilder {
-//     if (orderBy === undefined)
-//         return q
 
-//     if (typeof orderBy === "string") {
-//         q = q.order(orderBy)
-//     } else {
-//         let field = Object.keys(orderBy)[0]
-//         let ascending = orderBy[field]
-//         q = q.order(field, { ascending })
-//     }
-//     return q
-// }
+function whereType(val: any): string {
+    if (Array.isArray(val))
+        return 'in'
 
+    if (typeof val === 'object' && 'like' in val)
+        return 'like'
 
+    return 'eq'
+}
 
-// function applyLimit(q: PostgrestFilterBuilder, limit?: number): PostgrestFilterBuilder {
-//     if (limit === undefined)
-//         return q
 
-//     return q.limit(limit)
-// }
 
+function applyWhere(q: PostgrestFilterBuilder, where: Where<any>): PostgrestFilterBuilder {
+    for (let key in where) {
+        let val = where[key]
+        let type = whereType(val)
+
+        if (type === 'in')
+            q = q.in(key, val)
+        if (type === 'like')
+            q = q.like(key, val.like)
+        if (type === 'eq')
+            q = q.eq(key, val)
+    }
+    return q
+}
 

package/src/utils/ORM/table.ts

@@ -4,7 +4,7 @@ import { TableView } from './view'
 
 
 type muteOptions = {
-    confirm?:  [string, string?]
+    confirm?: [string, string?]
     notify?: string
     slience?: boolean
 }
@@ -28,7 +28,7 @@ export abstract class Table<T extends R, R extends object> extends TableView<T,
         await this.API({
             type: 'insert',
             content: Array.isArray(rows) ? rows : [rows],
-            action: entities => this.push(...entities),
+            action: $ => this.push(...$),
             confirm,
             notify,
             slience
@@ -45,7 +45,7 @@ export abstract class Table<T extends R, R extends object> extends TableView<T,
             type: 'update',
             content: [row],
             where: this.idWhere(id),
-            action: entities => this.merge(entities, this.idField),
+            action: $ => this.merge($, this.idField),
             confirm,
             notify,
             slience
@@ -88,7 +88,7 @@ export abstract class Table<T extends R, R extends object> extends TableView<T,
         await this.API({
             type: 'delete',
             where: this.idWhere(id),
-            action: entities => this.discard(this.idWhere(id) as Criteria<T>),
+            action: $ => this.discard(this.idWhere(id) as Criteria<T>),
             confirm,
             notify,
             slience
@@ -153,3 +153,61 @@ export function Empower<RCls extends Constructor, R = InstanceType<RCls>>(BaseCl
 
 
 
+
+
+
+
+
+
+
+
+
+
+// class FolderRow {
+//     id: number = 0
+//     subject: string = ""
+//     category: string = ""
+//     teacher: string = ""
+//     bank: string = ""
+//     name: string = ""
+//     pub_q: boolean = false
+//     pub_s: boolean = false
+//     codes: string[] = []
+//     modified: number = 0
+
+//     constructor(row = {}) {
+//         Object.assign(this, row)
+//     }
+// }
+
+
+
+
+// export class Folder extends FolderRow {
+
+
+
+
+// }
+
+
+
+// export class FolderTable extends Table<Folder, FolderRow>{
+//     readonly tableName = 'folder'
+//     readonly idField = 'id' as const
+//     readonly entityClass = Folder
+//     readonly ordering = [
+//         'subject',
+//         { category: ['topic', 'paper', 'exercise'] },
+//         'bank',
+//         'name'
+//     ] as const
+
+
+
+// }
+
+
+// export const Folders = (new FolderTable).reactive()
+
+// Folders.selectIn('teacher', [1,2,3])

package/src/utils/ORM/view.ts

@@ -1,13 +1,15 @@
 import { BasicTable, Where } from './basic'
+import { PostgrestFilterBuilder } from '../supabase'
+import { strKeyOf } from 'sapphire-js'
 
 
 type selectOptions<R> = {
     where?: Where<R>
-    // orderBy?: OrderBy<R>
-    // limit?: number
+    custom?: (_: PostgrestFilterBuilder) => PostgrestFilterBuilder
     confirm?: [string, string?]
     notify?: string
     slience?: boolean
+    patch?: boolean
 }
 
 
@@ -30,65 +32,42 @@ function chunk<T>(arr: T[], size: number): T[][] {
  */
 export abstract class TableView<T extends R, R extends object> extends BasicTable<T, R>{
 
-    async select({ where, confirm, notify, slience }: selectOptions<R> = {}) {
+    async select({ where, custom, confirm, notify, slience, patch }: selectOptions<R> = {}) {
+        if (!patch) this.clear()
         await this.API({
             type: 'select',
             where,
-            // orderBy,
-            // limit,
-            action: entities => this.set(entities),
-            // order: true,
+            custom,
+            action: $ => patch ? this.absorb($, this.idField) : this.set($),
             confirm,
             notify,
             slience
         })
     }
 
-    async patch({ where, confirm, notify, slience }: selectOptions<R> = {}) {
-        await this.API({
-            type: 'patch',
-            where,
-            // orderBy,
-            // limit,
-            action: entities => this.absorb(entities, this.idField),
-            confirm,
-            notify,
-            slience
-        })
-    }
 
 
-    async patchIDs(
-        ids: R[this['idField']][],
-        { where, confirm, notify, slience }: selectOptions<R> = {},
+    async selectIn<F extends strKeyOf<R>>(
+        field: F,
+        values: R[F][],
+        { where, custom, confirm, notify, slience, patch }: selectOptions<R> = {},
         chunkSize = 100,
     ) {
-        for (let ck of chunk(ids, chunkSize)) {
-            await this.patch({
-                where: { ...this.idsWhere(ck), ...where },
-                confirm,
-                notify,
-                slience
-            })
-        }
+        if (!patch) this.clear()
+        let getSelect = (ck: R[F][]): Promise<void> => this.select({
+            where: { [field]: ck, ...where },
+            custom,
+            confirm,
+            notify,
+            slience,
+            patch: true
+        })
+        await Promise.all(chunk(values, chunkSize).map(getSelect))
         if (this.ordering.length === 0)
-            this.orderById(ids)
+            this.order({ [field]: values } as any)
     }
 
 
-    async selectIDs(
-        ids: R[this['idField']][],
-        { where, confirm, notify, slience }: selectOptions<R> = {},
-        chunkSize = 100,
-    ) {
-        this.clear()
-        this.patchIDs(
-            ids,
-            { where, confirm, notify, slience },
-            chunkSize
-        )
-    }
-
 
 }
 

package/src/utils/supabase.ts

@@ -137,7 +137,7 @@ export function handleError<T>(data: T[] | null, error: PostgrestError | null):
 
 
 
-const _filterBuilder = supabase.from('DEMO').select()
+const _filterBuilder = supabase.from('DEMO').select().eq('','').order('f').limit(3)
 export type PostgrestFilterBuilder = typeof _filterBuilder