glib-web 4.44.6 → 5.0.0

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 @@
+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/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "4.44.6",
+  "version": "5.0.0",
   "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/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)
-  })
-})