glib-web 4.44.6 → 5.0.4

package/cypress/e2e/glib-web/{timeline.cy.ts → timeline.cy.js}

@@ -1,4 +1,4 @@
-import { testPageUrl } from "../../helper"
+import { testPageUrl } from "../../helper.js"
 
 const url = testPageUrl('timeline')
 

package/cypress/e2e/glib-web/{timeouts.cy.ts → timeouts.cy.js}

@@ -1,4 +1,4 @@
-import { testPageUrl } from "../../helper"
+import { testPageUrl } from "../../helper.js"
 
 const url = testPageUrl('timeouts')
 

package/cypress/e2e/glib-web/{ul.cy.ts → ul.cy.js}

@@ -1,4 +1,4 @@
-import { testPageUrl } from "../../helper"
+import { testPageUrl } from "../../helper.js"
 
 const url = testPageUrl('ul')
 

package/cypress/e2e/glib-web/{vertical.cy.ts → vertical.cy.js}

@@ -1,4 +1,4 @@
-import { testPageUrl } from "../../helper"
+import { testPageUrl } from "../../helper.js"
 
 const url = testPageUrl('vertical')
 

package/cypress/e2e/glib-web/{web.cy.ts → web.cy.js}

@@ -1,4 +1,4 @@
-import { testPageUrl } from "../../helper"
+import { testPageUrl } from "../../helper.js"
 
 const url = testPageUrl('web')
 

package/cypress/e2e/glib-web/window.cy.js

@@ -0,0 +1,21 @@
+import { testPageUrl } from "../../helper.js"
+
+const url = testPageUrl('window')
+
+describe('window', () => {
+  it('opens a new window with updateExisting', () => {
+    cy.visit(url)
+
+    cy.contains('windows/open updateExisting: true').click()
+    cy.location('href').should('contain', 'fields_upload')
+  })
+
+  it('closes the current window', () => {
+    const previousUrl = testPageUrl('fields_upload')
+
+    cy.visit(previousUrl)
+    cy.visit(url)
+
+    cy.contains('windows/close').click()
+  })
+})

package/cypress/e2e/glib-web/{windows.cy.ts → windows.cy.js}

@@ -1,4 +1,4 @@
-import { testPageUrl } from "../../helper"
+import { testPageUrl } from "../../helper.js"
 
 const url = testPageUrl('windows')
 
@@ -36,8 +36,26 @@ describe('windows', () => {
     cy.get('@windowOpen').should('have.been.calledWith', 'http://www.google.com')
   })
 
+  it('reloads the current window', () => {
+    cy.visit(url)
+
+    cy.contains('windows/reload').click()
+    cy.location('href').should('contain', 'path=test_page%2Fwindows')
+  })
+
+  it('prints the current window', () => {
+    cy.visit(url)
+
+    cy.window().then((win) => {
+      cy.stub(win, 'print').as('windowPrint')
+    })
+
+    cy.contains('windows/print').click()
+    cy.get('@windowPrint').should('have.been.called')
+  })
+
   it('closes the current window and returns to the previous view', () => {
-    const previousUrl = testPageUrl('multiupload')
+    const previousUrl = testPageUrl('fields_upload')
 
     cy.visit(previousUrl)
     cy.visit(url)
@@ -52,6 +70,13 @@ describe('windows', () => {
     cy.location('href').should('contain', 'path=home%2Fprint')
   })
 
+  it('closes the current window and reloads with fallback', () => {
+    cy.visit(url)
+
+    cy.contains('windows/closeWithReload').click()
+    cy.location('href').should('contain', 'path=home%2Findex')
+  })
+
   it('closes all windows and opens the home view', () => {
     cy.visit(url)
 
@@ -60,6 +85,13 @@ describe('windows', () => {
     cy.location('href').should('contain', 'path=home%2Findex')
   })
 
+  it('closes all windows and opens home view from onClose', () => {
+    cy.visit(url)
+
+    cy.contains('windows/closeAll').click()
+    cy.location('href').should('contain', 'path=home%2Findex')
+  })
+
   it('opens a window with a loader view', () => {
     cy.visit(url)
 

package/cypress/helper.js

@@ -0,0 +1,19 @@
+import { realComponent } from "../components/helper.js"
+
+// const DEV_TEST_PAGE = 'http://localhost:3000/glib/json_ui_garage?path=test_page%2F{{testPage}}'
+
+function testPageUrl(testPage) {
+  const port = Cypress.env('BACKEND_PORT') || '3000';
+  const baseUrl = `http://localhost:${port}/glib/json_ui_garage?path=test_page%2F${testPage}`;
+  return baseUrl;
+}
+
+function withComponent(id, callback) {
+  return cy.window().should((win) => {
+    const comp = realComponent(win.GLib.component.findById(id))
+    expect(comp).to.exist
+    callback(comp)
+  })
+}
+
+export { testPageUrl, withComponent }

package/cypress/support/{commands.ts → commands.js}

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 // ***********************************************
-// This example commands.ts shows you how to
+// This example commands.js shows you how to
 // create various custom commands and overwrite
 // existing commands.
 //
@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }

package/cypress/support/component.js

@@ -0,0 +1,27 @@
+import "./commands.js";
+import "@cypress/code-coverage/support.js";
+import { isFunction, isObject } from "../../utils/type.js";
+
+const win = window;
+
+if (!win.__settings) {
+  win.__settings = { theme: {} };
+}
+
+if (!win.__page) {
+  win.__page = {};
+}
+
+Cypress.on("window:before:load", (win) => {
+  if (!isObject(win) || !isObject(win.console)) return;
+
+  if (isFunction(win.console.log)) {
+    win.console.log = () => {};
+  }
+  if (isFunction(win.console.warn)) {
+    win.console.warn = () => {};
+  }
+  if (isFunction(win.console.info)) {
+    win.console.info = () => {};
+  }
+});

package/cypress/support/{e2e.ts → e2e.js}

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/e2e.ts is processed and
+// This example support/e2e.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -14,8 +14,23 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
-import '@cypress/code-coverage/support'
+import "./commands.js";
+import "@cypress/code-coverage/support.js";
+import { isFunction, isObject } from "../../utils/type.js";
+
+Cypress.on("window:before:load", (win) => {
+  if (!isObject(win) || !isObject(win.console)) return;
+
+  if (isFunction(win.console.log)) {
+    win.console.log = () => {};
+  }
+  if (isFunction(win.console.warn)) {
+    win.console.warn = () => {};
+  }
+  if (isFunction(win.console.info)) {
+    win.console.info = () => {};
+  }
+});
 
 // Ignore retry failures from backend error pages so specs can assert UI state.
 Cypress.on('uncaught:exception', (err) => {

package/{cypress.config.ts → cypress.config.js}

@@ -43,8 +43,8 @@ export default defineConfig({
         },
       },
     },
-    specPattern: "cypress/component/**/*.cy.{js,jsx,ts,tsx}",
-    supportFile: "cypress/support/component.ts",
+    specPattern: "cypress/component/**/*.cy.{js,jsx}",
+    supportFile: "cypress/support/component.js",
     setupNodeEvents(on, config) {
       codeCoverageTask(on, config);
       return config;
@@ -55,6 +55,7 @@ export default defineConfig({
     pageLoadTimeout: 60000,
     requestTimeout: 15000,
     responseTimeout: 15000,
+    specPattern: "cypress/e2e/**/*.cy.{js,jsx}",
     setupNodeEvents(on, config) {
       codeCoverageTask(on, config);
       return config;

package/cypress.yml.example

@@ -5,7 +5,7 @@ on:
       - "yarn.lock"
       - ".github/workflows/cypress.yml"
 jobs:
-  build-and-test:
+  cypress-test:
     env:
       RAILS_ENV: test
       POSTGRES_USER: postgres
@@ -27,26 +27,25 @@ jobs:
           --health-timeout 5s
           --health-retries 5
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v6
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: 3.2.1
           bundler-cache: true
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v6
         with:
           cache: "yarn"
-          node-version: 20.0.0
+          node-version: 24.11.1
       - run: yarn install --frozen-lockfile
       - run: sudo apt-get -yqq install libpq-dev
       - run: cp config/database.yml.github-actions config/database.yml
       - run: bundle exec rake db:test:prepare
       - run: bundle exec rails server -d
+      - run: until curl -s http://localhost:3000 >/dev/null; do sleep 1; done
       - name: Cypress run (e2e)
-        run: env -u ELECTRON_RUN_AS_NODE yarn cypress run --browser chrome
-      - name: Cypress run (component)
-        run: env -u ELECTRON_RUN_AS_NODE yarn cypress run --component
+        run: env -u ELECTRON_RUN_AS_NODE yarn run cypress run --browser chrome
       - name: Upload screenshots
         uses: actions/upload-artifact@v4
         if: failure()

package/doc/TESTING.md

@@ -21,8 +21,8 @@ This is fundamentally different from typical frontend testing (Jest/Vitest with
 
 ### 3. **Test Page as Contract**
 Each Cypress test has a **matching backend test page** (jbuilder file):
-- `form.cy.ts` → `test_page/form.json.jbuilder`
-- `dialog.cy.ts` → `test_page/dialog.json.jbuilder`
+- `form.cy.js` → `test_page/form.json.jbuilder`
+- `dialog.cy.js` → `test_page/dialog.json.jbuilder`
 
 The test page acts as the **contract** between frontend and backend tests.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "4.44.6",
+  "version": "5.0.4",
   "description": "",
   "main": "index.js",
   "scripts": {

package/components/composable/dropable.js

@@ -1,52 +0,0 @@
-import { onMounted } from "vue";
-
-function useDropUpload({ container, fileSelect, files, spec, uploader }) {
-  const { onDragStyle } = spec;
-  onMounted(() => {
-    uploader.setBusyWhenUploading({ files });
-
-    // handle style changes
-    let dragEl = null;
-    container.value.ondragenter = (event) => {
-      dragEl = event.target;
-      container.value.classList.add(...onDragStyle);
-    };
-    container.value.ondragleave = (event) => {
-      if (dragEl == event.target) {
-        container.value.classList.remove(...onDragStyle);
-      }
-    };
-
-    // handle upload
-    container.value.ondragover = (event) => event.preventDefault();
-    container.value.ondrop = (event) => {
-      event.preventDefault();
-      uploader.uploadFiles({
-        droppedFiles: event.dataTransfer.files,
-        container,
-        files,
-        spec
-      });
-      container.value.classList.remove(...onDragStyle);
-    };
-
-    container.value.onclick = (event) => {
-      const onchange = () => {
-        uploader.uploadFiles(
-          {
-            droppedFiles: event.target.files,
-            files,
-            spec,
-            container
-          }
-        );
-      };
-
-      fileSelect.value.onchange = onchange;
-      fileSelect.value.click();
-    };
-  });
-
-}
-
-export { useDropUpload };

package/components/fields/googlePlace.vue

@@ -1,162 +0,0 @@
-<!-- TODO: This probably can be merged with latLong-v1 or map-v1, i.e. add infoWindow support to latLong or map -->
-
-<template>
-  <v-container v-if="loadIf" fluid class="pa-0">
-    <div class="v-input v-text-field theme--light">
-      <div class="v-input__control">
-        <div class="v-input__slot">
-          <div class="v-text-field__slot">
-            <label class="v-label theme--light v-label--active"
-              style="left: 0px; right: auto; position: absolute;">Address</label>
-            <!-- <gmap-place-input :default-place="placeName" :placeholder="Address" @place_changed="setPlace" /> -->
-            <gmap-autocomplete :name="spec.name" placeholder="Address" @place_changed="setPlace" />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <gmap-map ref="map" :center="{ lat: 25.105497, lng: 121.597366 }" :zoom="13" map-type-id="roadmap"
-      style="width: 100%; height: 300px" @click="onMapClick">
-      <gmap-info-window :options="infoOptions" :position="markerPos" :opened="infoWinOpen"
-        @closeclick="closeInfoWindow">
-        <div v-if="place !== null">
-          <strong>{{ place.name }}</strong>
-          <div>Place ID: {{ place.place_id }}</div>
-          <div>Address: {{ place.formatted_address }}</div>
-          <div>
-            Longitude: {{ place.geometry.location.lng() }}, Latitude:
-            {{ place.geometry.location.lat() }}
-          </div>
-        </div>
-        <div v-if="
-          spec.hasOwnProperty('infoWindow') &&
-          spec.infoWindow['actionButtons'].length > 0
-        ">
-          <v-btn v-for="(buttonSpec, i) in spec.infoWindow.actionButtons" :key="i"
-            @click="onActionButtonClick($event, buttonSpec)">
-            {{ buttonSpec.text }}
-          </v-btn>
-        </div>
-      </gmap-info-window>
-
-      <gmap-marker :position="markerPos" :clickable="true" @click="openInfoWindow" />
-      <template #visible>
-        <div id="loading-container" ref="loading" class="d-none">
-          <v-progress-circular indeterminate color="primary" />
-        </div>
-      </template>
-    </gmap-map>
-  </v-container>
-</template>
-
-<script>
-import GlibBase from "../base/glibBase.js";
-import Action from "../../action";
-
-export default {
-  extends: GlibBase,
-  props: ["spec"],
-  data() {
-    return {
-      infoOptions: {
-        pixelOffset: {
-          width: 0,
-          height: -35
-        }
-      },
-      markerPos: { lat: 0, lng: 0 },
-      infoWinOpen: false,
-      place: null
-    };
-  },
-  computed: {
-    placeName() {
-      return this.place == null ? "" : this.place.name;
-    }
-  },
-  methods: {
-    closeInfoWindow() {
-      this.infoWinOpen = false;
-    },
-    openInfoWindow() {
-      this.infoWinOpen = true;
-    },
-    toggleLoadingIndicator() {
-      this.$refs.loading.classList.toggle("d-none");
-      this.$refs.loading.classList.toggle("d-flex");
-    },
-    onActionButtonClick(event, properties) {
-      properties.onClick["formData"] = {
-        "place[google_place_id]": this.place.place_id,
-        "place[name]": this.place.name,
-        "place[address]": this.place.formatted_address,
-        "place[longitude]": this.place.geometry.location.lng(),
-        "place[latitude]": this.place.geometry.location.lat()
-      };
-
-      Action.execute(properties.onClick, this);
-    },
-    onMapClick(e) {
-      this.closeInfoWindow();
-
-      if (e.placeId === undefined) {
-        return;
-      }
-
-      e.stop();
-      this.toggleLoadingIndicator();
-
-      const request = {
-        placeId: e.placeId,
-        fields: ["place_id", "geometry", "name", "formatted_address"]
-      };
-      var service = new google.maps.places.PlacesService(
-        this.$refs.map.$mapObject
-      );
-      service.getDetails(request, place => {
-        this.toggleLoadingIndicator();
-        this.markerPos = place.geometry.location;
-        this.place = place;
-        this.openInfoWindow();
-      });
-    },
-    setLocationField(name, value) {
-      let field = document.querySelector(`input[name="${name}"]`);
-      field.closest("div.v-input").classList.add("v-input--is-label-active");
-      field.closest("div.v-input").classList.add("v-input--is-dirty");
-      field.previousSibling.classList.add("v-label--active");
-      field.value = value;
-    },
-    setPlace(place) {
-      const { location } = place.geometry;
-      this.place = place;
-      this.markerPos = location;
-      this.$refs.map.$mapObject.setCenter(location);
-
-      if (Object.hasOwn(this.spec, "locationFields")) {
-        this.setLocationField(
-          this.spec.locationFields.latitudeName,
-          location.lat()
-        );
-        this.setLocationField(
-          this.spec.locationFields.longitudeName,
-          location.lng()
-        );
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-#loading-container {
-  position: absolute;
-  width: 100%;
-  height: 300px;
-  top: 0;
-  z-index: 100;
-  background: rgba(196, 154, 154, 0.1);
-  align-items: center;
-  justify-content: center;
-}
-</style>

package/components/mixins/tooltip.js

@@ -1,57 +0,0 @@
-import { defineComponent } from "vue";
-import launch from "../../utils/launch";
-import { htmlElement } from "../helper";
-
-export default defineComponent({
-  data() {
-    return {
-      key: Math.random().toString(36).slice(2, 7)
-    };
-  },
-  computed: {
-    properties() {
-      return {
-        view: 'p',
-        text: this.spec.tooltip.text,
-        styleClasses: ['tooltip']
-      };
-    }
-  },
-  methods: {
-    handleMouseEnter() {
-      const properties = {
-        body: { childViews: [this.properties] },
-        key: this.key,
-        placement: this.spec.tooltip.placement || 'top',
-        styleClass: 'views-tooltip'
-      };
-      launch.popover.open(properties, this);
-    },
-    handleMouseLeave() {
-      launch.popover.close({ key: this.key });
-    },
-    $mounted() {
-      const tooltip = this.spec.tooltip;
-
-      if (!tooltip) return;
-
-      this.initTooltip();
-    },
-    $tearDown() {
-      const el = htmlElement(this);
-
-      if (el) {
-        el.removeEventListener('mouseenter', this.handleMouseEnter);
-        el.removeEventListener('mouseleave', this.handleMouseLeave);
-      }
-
-      this.handleMouseLeave();
-    },
-    initTooltip() {
-      const el = htmlElement(this);
-
-      el.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
-      el.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
-    }
-  }
-});

package/cypress/e2e/glib-web/dialog.cy.ts

@@ -1,25 +0,0 @@
-import { testPageUrl } from "../../helper"
-const url = testPageUrl('dialog')
-
-describe('dialog', () => {
-  it('updateExisting', () => {
-    cy.visit(url)
-    cy.contains('Dialog updateExisting').click()
-    cy.get('.v-dialog h1').should('contain.text', 'Hello world')
-    cy.get('.v-dialog .v-icon').should('exist')
-    cy.get('.v-dialog').contains('change dialog content').click()
-    cy.get('.v-dialog h1').should('contain.text', 'Hello world (updated)')
-    cy.get('.v-dialog .v-icon').should('not.exist')
-  })
-
-  it('open dialog', () => {
-    cy.visit(url)
-    cy.contains('Dialog open').click()
-    cy.get('.dialog-title > .close-btn').click()
-
-    cy.contains('Dialog open').click()
-    cy.get('.v-dialog').contains('close').click()
-
-    cy.get('.v-dialog').should('not.exist')
-  })
-})

package/cypress/e2e/glib-web/fieldsUpload.cy.ts

@@ -1,48 +0,0 @@
-import { testPageUrl } from "../../helper"
-
-const url = testPageUrl('fields_upload')
-
-const getRealComponent = (win, component) => {
-  const { isObject, isNotNull } = win.Utils.type
-  let realComp = component
-
-  while (isObject(realComp) && isNotNull(realComp.$refs?.delegate)) {
-    realComp = realComp.$refs.delegate
-  }
-
-  return realComp
-}
-
-describe('fields_upload', () => {
-  it('invokes upload triggers and resets', () => {
-    cy.visit(url)
-
-    cy.window().then((win) => {
-      const basicComp = getRealComponent(win, win.GLib.component.findById('fields_upload_basic'))
-      const filesComp = getRealComponent(win, win.GLib.component.findById('fields_upload_files'))
-
-      cy.wrap(basicComp).should('exist')
-      cy.wrap(filesComp).should('exist')
-
-      cy.spy(basicComp, 'trigger').as('basicTrigger')
-      cy.spy(basicComp, 'reset').as('basicReset')
-      cy.spy(filesComp, 'trigger').as('filesTrigger')
-    })
-
-    cy.contains('Trigger').click()
-    cy.get('@basicTrigger').should('have.been.calledOnce')
-
-    cy.contains('Reset').click()
-    cy.get('@basicReset').should('have.been.calledOnce')
-
-    cy.contains('Select file').click()
-    cy.get('@filesTrigger').should('have.been.calledOnce')
-  })
-
-  it('submits the form', () => {
-    cy.visit(url)
-
-    cy.contains('submit').click()
-    cy.get('.unformatted').should('contain.text', 'Method: POST')
-  })
-})

package/cypress/e2e/glib-web/multiupload.cy.ts

@@ -1,25 +0,0 @@
-import { testPageUrl } from "../../helper"
-const url = testPageUrl('multiupload')
-
-describe('multiUpload', () => {
-  it('can change files', () => {
-    cy.visit(url)
-
-    cy.contains('clear files').click()
-    cy.contains('File (Example)').should('not.exist')
-    cy.contains('populate files').click()
-    cy.contains('File (Example)').should('exist')
-
-    cy.contains('submit').click()
-
-    //     const result = `Method: POST
-    // Form Data:
-    // {
-    //   "multi2": [
-    //     "eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBSUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e773c3169f0bac71fa589bddb1f77a04bc3771c9"
-    //   ]
-    // }`
-
-    //     cy.get('.unformatted').should('contain.text', result)
-  })
-})