glib-web 4.44.4 → 5.0.0

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

@@ -2,7 +2,11 @@ import { testPageUrl } from "../../helper"
 
 const url = testPageUrl('panels_bulkEdit2')
 
-const csvFixturePath = 'cypress/fixtures/bulk_edit.csv'
+const csvFixtureContents = [
+  'month,electricity_usage,gas_usage,sources,compliant',
+  'January,120,10,Generators,yes',
+  'February,150,12,Solar Panels,no'
+].join('\n')
 
 describe('panels_bulkEdit2', () => {
   it('loads csv rows and toggles column variants', () => {
@@ -10,7 +14,14 @@ describe('panels_bulkEdit2', () => {
 
     cy.contains('Drag your CSV file here').should('exist')
 
-    cy.get('input[type="file"]').selectFile(csvFixturePath, { force: true })
+    cy.get('input[type="file"]').selectFile(
+      {
+        contents: Cypress.Buffer.from(csvFixtureContents),
+        fileName: 'bulk_edit.csv',
+        mimeType: 'text/csv'
+      },
+      { force: true }
+    )
 
     cy.get('tbody tr').should('have.length', 2)
     cy.contains('Submit (top)').should('be.visible')

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

@@ -1,14 +1,21 @@
 import { testPageUrl } from "../../helper"
+
 const url = testPageUrl('window')
 
-describe("window", () => {
-  it('windows/open updateExisting: true', () => {
+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.location().should((loc) => {
-      expect(loc.href).to.eq(testPageUrl('multiupload'))
-    })
+    cy.contains('windows/close').click()
   })
-})
+})

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

@@ -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.ts

@@ -1,7 +1,19 @@
-function testPageUrl(testPage: string) {
+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;
 }
 
-export { testPageUrl }
+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/component.ts

@@ -1,5 +1,6 @@
 import "./commands";
 import "@cypress/code-coverage/support";
+import { isFunction, isObject } from "../../utils/type.js";
 
 const win = window as Window & { __settings?: { theme?: object }; __page?: object };
 
@@ -10,3 +11,17 @@ if (!win.__settings) {
 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

@@ -16,6 +16,21 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 import '@cypress/code-coverage/support'
+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.yml.example

@@ -43,13 +43,13 @@ jobs:
       - run: cp config/database.yml.github-actions config/database.yml
       - run: bundle exec rake db:test:prepare
       - run: bundle exec rails server -d
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        with:
-          browser: chrome
+      - 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
       - name: Upload screenshots
         uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots
-          path: cypress/screenshots
+          path: cypress/screenshots

package/index.js

@@ -61,6 +61,7 @@ import CommonResponsive from "./components/responsive.vue";
 import CommonTemplateMenu from "./templates/_menu.vue";
 import BigProgressCircle from "./templates/bigProgressCircle.vue";
 import RichButton from "./components/button.vue";
+import Dom from "./utils/dom";
 Vue.component("panels-vertical", VerticalPanel);
 Vue.component("panels-responsive", ResponsivePanel);
 Vue.component("common-avatar", CommonAvatar);
@@ -123,6 +124,7 @@ const vPhoneInput = createVPhoneInput({
 
 Vue.use(vPhoneInput);
 
+Dom.ensureCsrfElement();
 
 document.addEventListener("DOMContentLoaded", () => {
   Vue.mount(`#${APP_ID}`);

package/package.json

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

package/utils/dom.js

@@ -1,6 +1,24 @@
+import * as TypeUtils from "./type";
+
 export default class {
+  static ensureCsrfElement() {
+    let element = document.querySelector('meta[name="csrf-token"]');
+    if (!TypeUtils.isObject(element)) {
+      const meta = document.createElement("meta");
+      meta.setAttribute("name", "csrf-token");
+      meta.setAttribute("content", "");
+      if (TypeUtils.isObject(document.head)) {
+        document.head.appendChild(meta);
+      } else {
+        document.documentElement.appendChild(meta);
+      }
+      element = meta;
+    }
+    return element;
+  }
+
   static get csrfElement() {
-    return document.querySelector(`meta[name="csrf-token"]`);
+    return this.ensureCsrfElement();
   }
 
   static getCsrf() {

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/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)
-  })
-})