millas 0.2.2 → 0.2.4

package/src/admin/resources/AdminResource.js

@@ -47,8 +47,8 @@ class AdminResource {
   /** Singular label */
   static labelSingular = null;
 
-  /** Emoji or icon string for the sidebar */
-  static icon = '📋';
+  /** SVG icon id without the ic- prefix e.g. 'users', 'file', 'tag' */
+  static icon = 'table';
 
   /** Records per page */
   static perPage = 20;
@@ -68,6 +68,16 @@ class AdminResource {
   /** Whether to show Delete buttons */
   static canDelete = true;
 
+  /** Whether to show a detail/view page */
+  static canView = true;
+
+  /**
+   * Fields that appear on the form as read-only (shown as text, not input).
+   * Useful for system-managed fields like created_at, updated_at, uuid.
+   * @type {string[]}
+   */
+  static readonlyFields = [];
+
   /** URL-safe slug used in routes */
   static get slug() {
     return (this.label || this.model?.name || 'resource')
@@ -75,11 +85,11 @@ class AdminResource {
   }
 
   /**
-   * Define the fields shown in list + detail views.
+   * Define the fields shown in list, detail, and form views.
+   * Use AdminField.tab('Tab Name') to group fields into tabs on the form.
    * Must return an array of AdminField instances.
    */
   static fields() {
-    // Default: infer from model.fields if available
     if (!this.model?.fields) return [];
     return Object.entries(this.model.fields).map(([name, def]) =>
       AdminField.fromModelField(name, def)
@@ -87,7 +97,7 @@ class AdminResource {
   }
 
   /**
-   * Define filter controls shown in the sidebar.
+   * Define filter controls shown in the filter panel.
    * Must return an array of AdminFilter instances.
    */
   static filters() {
@@ -101,39 +111,42 @@ class AdminResource {
   static async fetchList({ page = 1, perPage, search, sort = 'id', order = 'desc', filters = {} } = {}) {
     const limit  = perPage || this.perPage;
     const offset = (page - 1) * limit;
-    const db     = this.model._db();
 
-    let query = db.orderBy(sort, order);
+    // Start from the public query() entry point — works regardless of
+    // whether the ORM changes have been applied or not.
+    let qb = this.model.query().orderBy(sort, order);
 
-    // Search
+    // Search — build OR conditions across all searchable columns
     if (search && this.searchable.length) {
-      query = query.where(function () {
-        for (const col of this.constructor.searchable || []) {
+      const searchable = this.searchable; // capture for closure
+      // Use raw knex where group via the underlying _query
+      qb._query = qb._query.where(function () {
+        for (const col of searchable) {
           this.orWhere(col, 'like', `%${search}%`);
         }
       });
     }
 
-    // Filters
+    // Filters — support __ lookups (e.g. created_at__gte) as well as plain equality
     for (const [key, value] of Object.entries(filters)) {
       if (value !== '' && value !== null && value !== undefined) {
-        query = query.where(key, value);
+        qb.where(key, value);
       }
     }
 
-    const [rows, countResult] = await Promise.all([
-      query.clone().limit(limit).offset(offset),
-      query.clone().count('* as count').first(),
+    // Run count and data fetch in parallel
+    const [rows, total] = await Promise.all([
+      qb._query.clone().limit(limit).offset(offset),
+      qb._query.clone().clearSelect().count('* as count').first()
+        .then(r => Number(r?.count ?? 0)),
     ]);
 
-    const total = Number(countResult?.count || 0);
-
     return {
       data:     rows.map(r => this.model._hydrate(r)),
       total,
       page:     Number(page),
       perPage:  limit,
-      lastPage: Math.ceil(total / limit),
+      lastPage: Math.ceil(total / limit) || 1,
     };
   }
 
@@ -190,47 +203,91 @@ class AdminResource {
 
 class AdminField {
   constructor(name, type) {
-    this._name      = name;
-    this._type      = type;
-    this._label     = name.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-    this._sortable  = false;
-    this._hidden    = false;
-    this._listOnly  = false;
-    this._detailOnly = false;
-    this._colors    = {};
-    this._format    = null;
+    this._name        = name;
+    this._type        = type;
+    this._label       = name.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    this._sortable    = false;
+    this._hidden      = false;
+    this._listOnly    = false;
+    this._detailOnly  = false;
+    this._readonly    = false;
+    this._colors      = {};
+    this._format      = null;
+    this._nullable    = true;   // defaults to optional; use .required() to enforce
+    this._tab         = null;   // tab name this field belongs to
+    this._span        = null;   // 'full' | 'third' | null (default half-width)
+    this._min         = null;
+    this._max         = null;
   }
 
-  // ─── Field types ────────────────────────────────────────────────────────
-
-  static id(name = 'id')           { return new AdminField(name, 'id'); }
-  static text(name)                { return new AdminField(name, 'text'); }
-  static email(name)               { return new AdminField(name, 'email'); }
-  static number(name)              { return new AdminField(name, 'number'); }
-  static boolean(name)             { return new AdminField(name, 'boolean'); }
-  static badge(name)               { return new AdminField(name, 'badge'); }
-  static datetime(name)            { return new AdminField(name, 'datetime'); }
-  static date(name)                { return new AdminField(name, 'date'); }
-  static image(name)               { return new AdminField(name, 'image'); }
-  static textarea(name)            { return new AdminField(name, 'textarea'); }
-  static select(name, options)     { const f = new AdminField(name, 'select'); f._options = options; return f; }
-  static password(name)            { return new AdminField(name, 'password'); }
-  static json(name)                { return new AdminField(name, 'json'); }
-
-  // ─── Fluent modifiers ───────────────────────────────────────────────────
-
-  label(l)         { this._label = l; return this; }
-  sortable()       { this._sortable = true; return this; }
-  hidden()         { this._hidden = true; return this; }
-  listOnly()       { this._listOnly = true; return this; }
-  detailOnly()     { this._detailOnly = true; return this; }
-  colors(map)      { this._colors = map; return this; }
-  format(fn)       { this._format = fn; return this; }
-  placeholder(p)   { this._placeholder = p; return this; }
-  help(h)          { this._help = h; return this; }
-  readonly()       { this._readonly = true; return this; }
-
-  // ─── Serialise for rendering ─────────────────────────────────────────────
+  // ─── Field types ───────────────────────────────────────────────────────────
+
+  static id(name = 'id')            { return new AdminField(name, 'id'); }
+  static text(name)                 { return new AdminField(name, 'text'); }
+  static email(name)                { return new AdminField(name, 'email'); }
+  static number(name)               { return new AdminField(name, 'number'); }
+  static boolean(name)              { return new AdminField(name, 'boolean'); }
+  static badge(name)                { return new AdminField(name, 'badge'); }
+  static datetime(name)             { return new AdminField(name, 'datetime'); }
+  static date(name)                 { return new AdminField(name, 'date'); }
+  static image(name)                { return new AdminField(name, 'image'); }
+  static textarea(name)             { return new AdminField(name, 'textarea'); }
+  static password(name)             { return new AdminField(name, 'password'); }
+  static json(name)                 { return new AdminField(name, 'json'); }
+  static url(name)                  { return new AdminField(name, 'url'); }
+  static phone(name)                { return new AdminField(name, 'phone'); }
+  static color(name)                { return new AdminField(name, 'color'); }
+  static richtext(name)             { return new AdminField(name, 'richtext'); }
+
+  static select(name, options) {
+    const f = new AdminField(name, 'select');
+    f._options = Array.isArray(options)
+      ? options.map(o => typeof o === 'string' ? { value: o, label: o } : o)
+      : [];
+    return f;
+  }
+
+  /**
+   * Tab separator — splits the form into named tabs.
+   * All fields after this marker belong to this tab until the next one.
+   *
+   *   static fields() {
+   *     return [
+   *       AdminField.tab('General'),
+   *       AdminField.text('name'),
+   *       AdminField.tab('Settings'),
+   *       AdminField.boolean('active'),
+   *     ];
+   *   }
+   */
+  static tab(label) {
+    const f = new AdminField('__tab__', 'tab');
+    f._label = label;
+    return f;
+  }
+
+  // ─── Fluent modifiers ──────────────────────────────────────────────────────
+
+  label(l)           { this._label = l;           return this; }
+  sortable()         { this._sortable = true;      return this; }
+  hidden()           { this._hidden = true;        return this; }
+  listOnly()         { this._listOnly = true;      return this; }
+  detailOnly()       { this._detailOnly = true;    return this; }
+  readonly()         { this._readonly = true;      return this; }
+  nullable()         { this._nullable = true;      return this; }
+  required()         { this._nullable = false;     return this; }
+  full()             { this._span = 'full';        return this; }
+  third()            { this._span = 'third';       return this; }
+  colors(map)        { this._colors = map;         return this; }
+  format(fn)         { this._format = fn;          return this; }
+  placeholder(p)     { this._placeholder = p;      return this; }
+  help(h)            { this._help = h;             return this; }
+  min(n)             { this._min = n;              return this; }
+  max(n)             { this._max = n;              return this; }
+  /** Assign this field to a named tab (alternative to using tab() separators). */
+  inTab(name)        { this._tab = name;           return this; }
+
+  // ─── Serialise ─────────────────────────────────────────────────────────────
 
   toJSON() {
     return {
@@ -241,49 +298,50 @@ class AdminField {
       hidden:      this._hidden,
       listOnly:    this._listOnly,
       detailOnly:  this._detailOnly,
+      readonly:    this._readonly,
+      nullable:    this._nullable,
       colors:      this._colors,
       options:     this._options,
       placeholder: this._placeholder,
       help:        this._help,
-      readonly:    this._readonly,
+      tab:         this._tab,
+      span:        this._span,
+      min:         this._min,
+      max:         this._max,
     };
   }
 
-  /**
-   * Format a raw value for display.
-   */
+  /** Format a raw value for display in the detail/list views. */
   display(value) {
     if (this._format) return this._format(value);
     if (value === null || value === undefined) return '—';
-    if (this._type === 'boolean') return value ? '✓' : '✗';
-    if (this._type === 'datetime' && value) {
-      return new Date(value).toLocaleString();
-    }
-    if (this._type === 'date' && value) {
-      return new Date(value).toLocaleDateString();
-    }
+    if (this._type === 'boolean') return value ? 'Yes' : 'No';
+    if (this._type === 'datetime' && value) return new Date(value).toLocaleString();
+    if (this._type === 'date' && value) return new Date(value).toLocaleDateString();
     if (this._type === 'password') return '••••••••';
-    if (this._type === 'json') return JSON.stringify(value);
+    if (this._type === 'json') return JSON.stringify(value, null, 2);
     return String(value);
   }
 
   static fromModelField(name, fieldDef) {
     const typeMap = {
-      id:        () => AdminField.id(name),
-      string:    () => AdminField.text(name),
-      text:      () => AdminField.textarea(name),
-      integer:   () => AdminField.number(name),
-      bigInteger:() => AdminField.number(name),
-      float:     () => AdminField.number(name),
-      decimal:   () => AdminField.number(name),
-      boolean:   () => AdminField.boolean(name),
-      timestamp: () => AdminField.datetime(name),
-      date:      () => AdminField.date(name),
-      enum:      () => AdminField.select(name, fieldDef.enumValues || []),
-      json:      () => AdminField.json(name),
+      id:         () => AdminField.id(name),
+      string:     () => AdminField.text(name),
+      text:       () => AdminField.textarea(name),
+      integer:    () => AdminField.number(name),
+      bigInteger: () => AdminField.number(name),
+      float:      () => AdminField.number(name),
+      decimal:    () => AdminField.number(name),
+      boolean:    () => AdminField.boolean(name),
+      timestamp:  () => AdminField.datetime(name),
+      date:       () => AdminField.date(name),
+      enum:       () => AdminField.select(name, fieldDef.enumValues || []),
+      json:       () => AdminField.json(name),
     };
     const fn = typeMap[fieldDef.type] || (() => AdminField.text(name));
-    return fn();
+    const field = fn();
+    if (fieldDef.nullable) field.nullable();
+    return field;
   }
 }
 

package/src/admin/views/layouts/base.njk

@@ -946,6 +946,27 @@
   <div id="main">
     <header id="topbar">
       <span class="topbar-title">{% block topbar_title %}{{ pageTitle }}{% endblock %}</span>
+
+      {# ── Global search ── #}
+      <form action="{{ adminPrefix }}/search" method="GET" id="global-search-form" style="flex:1;max-width:280px;margin:0 16px">
+        <div class="search-wrap">
+          <span class="search-icon-inner">
+            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+            </svg>
+          </span>
+          <input
+            type="text"
+            name="q"
+            id="global-search-input"
+            placeholder="Search everything… (/)"
+            class="form-control search-input"
+            value="{% if query is defined %}{{ query }}{% endif %}"
+            autocomplete="off"
+            style="width:100%;font-size:13px">
+        </div>
+      </form>
+
       <div class="topbar-actions">
         {% block topbar_actions %}{% endblock %}
       </div>
@@ -1074,7 +1095,81 @@
       form.submit();
     }
 
-    // ── Auto-dismiss flash after 5s ──────────────────────────────
+    // ── Keyboard shortcuts ───────────────────────────────────────
+    (function() {
+      const prefix = '{{ adminPrefix }}';
+      const resources = [
+        {% for r in resources %}
+        { slug: '{{ r.slug }}', index: {{ r.index }} }{% if not loop.last %},{% endif %}
+        {% endfor %}
+      ];
+
+      let gPressed = false;
+      let gTimer   = null;
+
+      document.addEventListener('keydown', function(e) {
+        // Don't fire when typing in inputs
+        const tag = document.activeElement?.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+          // Allow Escape to blur
+          if (e.key === 'Escape') document.activeElement.blur();
+          return;
+        }
+
+        // / → focus global search
+        if (e.key === '/') {
+          e.preventDefault();
+          document.getElementById('global-search-input')?.focus();
+          return;
+        }
+
+        // N → new record (only on list pages)
+        if (e.key === 'n' || e.key === 'N') {
+          const newBtn = document.querySelector('a[href*="/create"].btn-primary');
+          if (newBtn) { e.preventDefault(); window.location.href = newBtn.href; }
+          return;
+        }
+
+        // Escape → close modals (already handled), clear selection
+        if (e.key === 'Escape') {
+          document.querySelectorAll('.modal-overlay').forEach(m => m.classList.remove('open'));
+          return;
+        }
+
+        // G → start chord
+        if (e.key === 'g' || e.key === 'G') {
+          if (gPressed) return;
+          gPressed = true;
+          clearTimeout(gTimer);
+          gTimer = setTimeout(() => { gPressed = false; }, 800);
+          return;
+        }
+
+        // G+D → dashboard
+        if (gPressed && (e.key === 'd' || e.key === 'D')) {
+          gPressed = false;
+          window.location.href = prefix + '/';
+          return;
+        }
+
+        // G+1…9 → jump to resource
+        if (gPressed && e.key >= '1' && e.key <= '9') {
+          gPressed = false;
+          const idx = parseInt(e.key);
+          const r = resources.find(x => x.index === idx);
+          if (r) window.location.href = `${prefix}/${r.slug}`;
+          return;
+        }
+      });
+    })();
+
+    // ── Shortcut hint tooltip ────────────────────────────────────
+    document.getElementById('global-search-input')?.addEventListener('focus', function() {
+      this.placeholder = 'Search everything…';
+    });
+    document.getElementById('global-search-input')?.addEventListener('blur', function() {
+      this.placeholder = 'Search everything… (/)';
+    });
     const flashAlert = document.getElementById('flash-alert');
     if (flashAlert) {
       setTimeout(() => {