glib-web 4.18.2 → 4.20.0

package/actions/lists/append.js

@@ -1,15 +1,30 @@
+import { nextTick } from "vue";
+import { realComponent } from "../../components/helper";
+
 export default class {
-  execute(properties, component) {
-    let targetComponent = component;
-    if (properties.targetId) {
-      targetComponent = GLib.component.findById(properties.targetId);
+  execute(spec, component) {
+    let target = component;
+
+    if (spec.targetId) {
+      target = realComponent(GLib.component.findById(spec.targetId));
     }
 
-    if (!targetComponent.sections || !targetComponent.sections[0].rows) {
-      console.warn('there is no sections or rows');
-      return null;
+    if (!target) {
+      console.warn("Component ID not found", spec.targetId);
+      return;
     }
 
-    targetComponent.sections[0].rows.push(properties.row);
+    target.action_appendRow(spec.row, spec.sectionIndex || 0);
+
+    nextTick(() => {
+      GLib.action.execute(spec.onAppend, component);
+    });
+
+    // if (!targetComponent.sections || !targetComponent.sections[0].rows) {
+    //   console.warn('there is no sections or rows');
+    //   return null;
+    // }
+
+    // targetComponent.sections[0].rows.push(properties.row);
   }
 }

package/components/_avatar.vue

@@ -0,0 +1,19 @@
+<template>
+  <common-badge :spec="spec">
+    <v-avatar :size="spec.size" :color="spec.backgroundColor || 'surface-variant'" :class="$classes()">
+      <p v-if="spec.initials" :style="{ color: spec.initials.color || 'white' }">{{ spec.initials.text }}</p>
+      <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
+      <!-- <img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()" /> -->
+      <v-img :style="$styles()" :class="$classes()" :src="spec.url || spec.base64Data" @click="$onClick()"
+        v-else></v-img>
+    </v-avatar>
+  </common-badge>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>

package/components/avatar.vue

@@ -1,13 +1,8 @@
 <template>
-  <common-badge :spec="spec">
-    <v-avatar :size="spec.size" :color="spec.backgroundColor || 'surface-variant'" :class="$classes()">
-      <p v-if="spec.initials" :style="{ color: spec.initials.color || 'white' }">{{ spec.initials.text }}</p>
-      <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
-      <!-- <img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()" /> -->
-      <v-img :style="$styles()" :class="$classes()" :src="spec.url || spec.base64Data" @click="$onClick()"
-        v-else></v-img>
-    </v-avatar>
-  </common-badge>
+  <common-avatar :spec="spec" />
+  <!-- <div>
+    test
+  </div> -->
 </template>
 
 <script>

package/components/composable/date.js

@@ -12,4 +12,19 @@ export function sanitize(val, type) {
     default:
       return val;
   }
+}
+
+export function localeString(val, type, format) {
+  // Ref https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+  const fmt = Object.assign({ day: 'numeric', weekday: 'short', year: 'numeric', month: 'short', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }, format || {});
+  switch (type) {
+    case 'datetime-local':
+      return new Date(val).toLocaleString(undefined, fmt); // undefined mean use browser configuration
+    default:
+      delete fmt.hour;
+      delete fmt.minute;
+      delete fmt.second;
+      return new Date(val).toLocaleDateString(undefined, fmt);
+  }
+
 }

package/components/fields/_buttonDate.vue

@@ -1,26 +1,29 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div class="glib date-input-container" @click="showPicker">
-    <div v-if="template.type == 'plain'" class="glib date-button" @click="showPicker">
+    <div v-if="template.type == 'plain'" class="glib date-button">
       <v-icon icon="calendar_today" class="calendar-icon"></v-icon>
       <span class="date-text">{{ text }}</span>
     </div>
-    <v-text-field v-else-if="template.type == 'text'" :color="gcolor" :name="fieldName" :label="spec.label" :hint="spec.hint"
+    <v-text-field v-else-if="template.type == 'text'" :type="type" :color="gcolor" :label="spec.label" :hint="spec.hint"
       :placeholder="spec.placeholder" :disabled="inputDisabled" :min="sanitizeValue(spec.min)"
-      :max="sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()" :style="$styles()"
-      :density="$classes().includes('compact') ? 'compact' : 'default'" :clearable="spec.clearable" @change="onChange"
-      :variant="variant" validate-on="blur" persistent-placeholder :value="model" prepend-inner-icon="calendar_today" />
+      :max="sanitizeValue(spec.max)" :style="$styles()"
+      :density="$classes().includes('compact') ? 'compact' : 'default'" :clearable="spec.clearable" :variant="variant"
+      validate-on="blur" persistent-placeholder :value="model" prepend-inner-icon="calendar_today" />
 
     <input :name="fieldName" :type="type" class="date-input" ref="dateInput" @change="handleChanged"
       :min="sanitizeValue(spec.min)" :max="sanitizeValue(spec.max)" :disabled="inputDisabled" :readonly="spec.readonly"
       :value="model" />
+
+    <v-input :name="fieldName" :rules="$validation()" v-model="model" />
   </div>
 </template>
 
 <script>
 import { computed, ref, watch } from "vue";
-import { sanitize } from "../composable/date";
+import { sanitize, localeString } from "../composable/date";
 import inputVariant from '../mixins/inputVariant';
+import { isPresent } from "../../utils/type";
 
 export default {
   mixins: [inputVariant],
@@ -43,7 +46,11 @@ export default {
     const template = ref(props.spec.template);
 
     const dateInput = ref(null);
-    const text = computed(() => model.value || props.spec.label);
+    const text = computed(() => {
+      if (!isPresent(model.value) && props.spec.label) return props.spec.label;
+
+      return localeString(model.value, props.type, props.spec.format);
+    });
 
     watch(props, (val) => {
       model.value = sanitizeValue(val.spec.value);
@@ -69,8 +76,6 @@ export default {
 
 <style>
 .glib.date-input-container {
-  display: flex;
-  align-items: center;
   position: relative;
   width: 100%;
   cursor: pointer;
@@ -82,6 +87,8 @@ export default {
   }
 
   .date-button {
+    display: flex;
+    align-items: center;
     padding: 8px 12px;
     background-color: #f3f5f7;
     border-radius: 5px;

package/components/mixins/list/autoload.js

@@ -113,16 +113,26 @@ export default {
       if (previousFirstRowIndex) {
         // Pre-record the height to get an accurate value
         const anchorHeight = this.$refs.topAnchor.clientHeight;
+        const body = this.$refs.body[0];
+        const oldBodyHeight = body.clientHeight;
 
         this.$nextTick(() => {
-          const prependedBottomElement = this.$refs[
-            `row_0_${previousFirstRowIndex - 1}`
-          ][0];
-
-          const top =
-            prependedBottomElement.offsetTop +
-            prependedBottomElement.clientHeight -
-            anchorHeight;
+          // const prependedBottomElement = this.$refs[
+          //   `row_0_${previousFirstRowIndex - 1}`
+          // ][0];
+
+          // const top =
+          //   prependedBottomElement.offsetTop +
+          //   prependedBottomElement.clientHeight -
+          //   anchorHeight;
+
+          // const pageBody = Utils.history._pageBody;
+
+          // pageBody.scrollTop = top;
+
+          const newBodyHeight = body.clientHeight;
+          const prependedHeight = newBodyHeight - oldBodyHeight;
+          const top = body.offsetTop + prependedHeight - anchorHeight;
 
           const pageBody = Utils.history._pageBody;
 

package/components/panels/column.vue

@@ -114,7 +114,7 @@ export default {
     },
 
     applyStyles(styles, spec) {
-      Object.assign(styles, this.$styles(spec));
+      Object.assign({}, styles, this.$styles(spec));
       Utils.type.ifBoolean(spec.hide, () => {
         styles["display"] = "none";
       });

package/components/panels/list.vue

@@ -15,15 +15,17 @@
           :data-dragSectionIndex="sectionIndex" :disabled="!$type.isObject(dragSupport)" @start="onDragStart"
           @end="onDragEnd"> -->
 
-        <draggable v-model="section.rows" ghost-class="ghost"
-          :group="dragSupport ? dragSupport.groupId || 'common' : 'common'" :data-dragListId="spec.id"
-          :data-dragSectionIndex="sectionIndex" :disabled="!$type.isObject(dragSupport)" @start="onDragStart"
-          @end="onDragEnd" item-key="id">
-          <template #item="{ element }">
-            <component :is="template(element)" :spec="element" :responsive-cols="spec.responsiveCols"
-              :data-dragRowId="element.id" />
-          </template>
-        </draggable>
+        <div ref="body">
+          <draggable v-model="section.rows" ghost-class="ghost"
+            :group="dragSupport ? dragSupport.groupId || 'common' : 'common'" :data-dragListId="spec.id"
+            :data-dragSectionIndex="sectionIndex" :disabled="!$type.isObject(dragSupport)" @start="onDragStart"
+            @end="onDragEnd" item-key="id">
+            <template #item="{ element }">
+              <component :is="template(element)" :spec="element" :responsive-cols="spec.responsiveCols"
+                :data-dragRowId="element.id" />
+            </template>
+          </draggable>
+        </div>
 
         <!-- <div v-for="(row, rowIndex) in section.rows" :key="`${sectionIndex}_${rowIndex}`"
           :ref="`row_${sectionIndex}_${rowIndex}`" :data-dragRowId="row.id">
@@ -279,6 +281,10 @@ export default {
       }
       return count;
     },
+    // Publicly invokable
+    action_appendRow(row, sectionIndex) {
+      this.sections[sectionIndex].rows.push(row);
+    }
   },
 };
 </script>

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

@@ -1,5 +1,6 @@
 import { testPageUrl } from "../../helper"
 const url = testPageUrl('dirty_state')
+const prompt = 'Changes you made have not been saved. Are you sure?'
 
 describe('dirtyState', () => {
   it('can be disabled', () => {
@@ -20,7 +21,7 @@ describe('dirtyState', () => {
     cy.contains('Male').click();
 
     cy.on('window:confirm', (str) => {
-      cy.then(() => expect(str).to.equal('Changes you made have not been saved. Are you sure?'))
+      cy.then(() => expect(str).to.equal(prompt))
       return false;
     })
 
@@ -45,7 +46,7 @@ describe('dirtyState', () => {
       return true;
     })
 
-    cy.then(() => expect(text).to.equal('Changes you made have not been saved. Are you sure?'))
+    cy.then(() => expect(text).to.equal(prompt))
 
     cy.contains('multiupload').click() // Try to navigate to another page
     cy.get('h2').should('contain.text', 'MultiUpload')
@@ -65,11 +66,26 @@ describe('dirtyState', () => {
       return false;
     })
 
-    cy.then(() => expect(text).to.equal('Changes you made have not been saved. Are you sure?'))
+    cy.then(() => expect(text).to.equal(prompt))
 
     // dirty state is removed after second try
     cy.go('back')
 
     cy.get('h2').should('contain.text', 'MultiUpload')
   })
+
+  it('trigger dirty prompt on windows/open updateExisting: true', () => {
+    cy.visit(url)
+    cy.contains('choice2').click() // make form dirty
+    cy.contains('navigate').click() // windows/open updateExisting: true
+
+    let text = ''
+    cy.on('window:confirm', (str) => {
+      text = str;
+      return false;
+    })
+
+    cy.then(() => expect(text).to.equal(prompt))
+
+  })
 })

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

@@ -0,0 +1,53 @@
+import { testPageUrl } from "../../helper"
+const url = testPageUrl('form_dynamic')
+
+describe('form dynamic', () => {
+  it('add, delete, and submit', () => {
+    cy.visit(url)
+
+    cy.get('.question:first').click().type(' edited')
+    cy.get('.answer_type:first').click()
+    cy.get('.v-overlay-container').contains('Yes no').click()
+
+    cy.contains('Add item').click()
+
+    cy.get('i.text-error').eq(1).click()
+
+    cy.contains('Confirm').click()
+    cy.contains('Submit').click()
+
+    const result = `Method: POST
+Form Data:
+{
+  "evaluation": {
+    "0": {
+      "error_message": "",
+      "question": "Punctuality edited",
+      "type": "yes_no",
+      "enabled": ""
+    },
+    "1": {
+      "_destroy": "1",
+      "error_message": "Wrong answer",
+      "question": "Quality of work",
+      "type": "rating",
+      "enabled": "true"
+    },
+    "2": {
+      "error_message": "Incompatible selection",
+      "question": "Satisfied?",
+      "type": "yes_no",
+      "enabled": ""
+    },
+    "3": {
+      "error_message": "",
+      "question": "",
+      "type": "rating",
+      "enabled": "true"
+    }
+  }
+}`
+
+    cy.get('.unformatted').should('contain.text', result)
+  })
+})

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

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

package/index.js

@@ -46,6 +46,7 @@ import Component from "./components/component.vue";
 import CommonIcon from "./components/_icon.vue";
 import CommonBadge from "./components/_badge.vue";
 // import CommonTooltip from "./components/_tooltip.vue";
+import CommonAvatar from "./components/_avatar.vue";
 import CommonButton from "./components/_button.vue";
 import CommonChip from "./components/_chip.vue";
 import CommonMessage from "./components/_message.vue";
@@ -55,6 +56,7 @@ import CommonTemplateMenu from "./templates/_menu.vue";
 import RichButton from "./components/button.vue";
 Vue.component("panels-vertical", VerticalPanel);
 Vue.component("panels-responsive", ResponsivePanel);
+Vue.component("common-avatar", CommonAvatar);
 Vue.component("common-button", CommonButton);
 Vue.component("common-icon", CommonIcon);
 Vue.component("common-badge", CommonBadge);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.18.2",
+  "version": "4.20.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/comment.vue

@@ -15,7 +15,7 @@
         >{{
           spec.subtitle
         }}</v-card-title>
-        <v-avatar
+        <!-- <v-avatar
           v-if="spec.imageUrl"
           size="30px"
         >
@@ -23,7 +23,9 @@
             :src="spec.imageUrl"
             alt="avatar"
           />
-        </v-avatar>
+        </v-avatar> -->
+
+        <common-avatar v-if="avatar" :spec="avatar" />
         <v-card-title
           v-if="spec.title"
           class="font-weight-bold body-2 subtitle"
@@ -84,6 +86,14 @@ export default {
     compiledText() {
       return Utils.format.markdown(this.spec.subtitle);
     },
+    avatar() {
+      // if (this.$type.isObject(this.spec.avatar)) {
+      //   return Object.assign({ view: 'avatar' }, this.spec.avatar)
+      // };
+      return this.$type.ifObject(this.spec.avatar, val => {
+        return Object.assign({ view: 'avatar' }, val)
+      });
+    }
   },
   methods: {
     $ready() {
@@ -153,9 +163,10 @@ export default {
   display: grid;
 
   // This is needed to prevent broken layout when the content is too short
-  grid-template-columns: 36px auto;
+  // grid-template-columns: 36px auto;
+  grid-template-columns: 0px auto;
 
-  grid-template-rows: 1fr auto 0.5fr;
+  // grid-template-rows: 1fr auto 0.5fr;
   grid-column: 1/4;
 
   > * {
@@ -188,6 +199,7 @@ export default {
     color: #9e9e9e;
     padding-top: 4px;
     align-self: start;
+    overflow: visible;
   }
 
   > .v-avatar {
@@ -211,9 +223,9 @@ export default {
   display: grid;
 
   // This is needed to prevent broken layout when the content is too short
-  grid-template-columns: 36px auto 36px;
+  // grid-template-columns: 36px auto 36px;
 
-  grid-template-rows: 1fr auto 0.5fr;
+  // grid-template-rows: 1fr auto 0.5fr;
   grid-column: 4/4;
 
   > * {
@@ -247,6 +259,7 @@ export default {
     color: #9e9e9e;
     padding-top: 4px;
     align-self: start;
+    // overflow: visible;
   }
 
   > .v-avatar {
@@ -263,6 +276,7 @@ export default {
     grid-row: 1/2;
     grid-column: 2/3;
     padding: 0;
+    // overflow: visible;
   }
 }
 </style>

package/templates/thumbnail.vue

@@ -25,6 +25,7 @@
             </div>
 
             <common-icon v-if="spec.icon" :spec="spec.icon" />
+            <common-avatar v-if="avatar" :spec="avatar" />
           </div>
         </template>
 
@@ -43,25 +44,30 @@
             <common-icon :spec="spec.icon" />
           </v-list-item-avatar>
         </div> -->
+        <!-- <v-badge :color="'red'" :model-value="true">
+          <template v-slot:badge>2</template> -->
 
-        <div>
-          <v-list-item-title>{{ spec.title }}</v-list-item-title>
+        <common-badge :spec="spec">
+          <div>
+            <v-list-item-title class="title">{{ spec.title }}</v-list-item-title>
 
-          <v-list-item-subtitle v-if="spec.subtitle">{{
-            spec.subtitle
-            }}</v-list-item-subtitle>
-          <v-list-item-subtitle v-if="spec.subsubtitle">{{
-            spec.subsubtitle
-            }}</v-list-item-subtitle>
+            <div class="subtitle" v-if="spec.subtitle">{{
+              spec.subtitle
+              }}</div>
 
-          <div v-if="hasChips" class="chips">
-            <template v-for="(item, index) in chips" :key="index">
-              <common-chip :spec="item" />
-            </template>
-          </div>
+            <v-list-item-subtitle class="subsubtitle" v-if="spec.subsubtitle">{{
+              spec.subsubtitle
+              }}</v-list-item-subtitle>
+            <div v-if="hasChips" class="chips">
+              <template v-for="(item, index) in chips" :key="index">
+                <common-chip :spec="item" />
+              </template>
+            </div>
 
-          <panels-responsive v-if="spec.body" :spec="spec.body" />
-        </div>
+            <panels-responsive v-if="spec.body" :spec="spec.body" />
+          </div>
+        </common-badge>
+      <!-- </v-badge> -->
 
         <template v-slot:append>
           <template v-for="(item, index) in spec.rightButtons" :key="index">
@@ -116,6 +122,11 @@ export default {
     cssClasses() {
       return this.$classes(this.spec, "templates/thumbnail");
     },
+    avatar() {
+      return this.$type.ifObject(this.spec.avatar, val => {
+        return Object.assign({ view: 'avatar' }, val)
+      });
+    },
     clickCondition() {
       if (this.spec.onClick || this.spec.onLongPress) {
         // This will show the clickable indication
@@ -201,12 +212,42 @@ export default {
 }
 
 .thumbnail {
-
   // Override this when using the `right` property.
   .item-content {
     width: 100%;
+
+    &.v-list-item--density-default {
+      padding: 0;
+    }
+
+    .v-list-item__content {
+      // This is the minimum padding required so that the badge doesn't get truncated.
+      padding: 5px 10px;
+    }
+  }
+
+  .v-badge {
+    width: 100%;
+
+    // The rest of the classes can be scoped but unfortunately this one cannot.
+    .v-badge__wrapper {
+      width: 100%;
+    }
   }
 }
+
+.title {
+  font-size: 1.1rem;
+}
+
+.subtitle {
+  opacity: 0.8;
+  // font-size: 0.97rem;
+}
+
+.subsubtitle {
+  margin-top: 5px;
+}
 </style>
 
 <style lang="scss" scoped>
@@ -219,10 +260,10 @@ a.thumbnail {
 .item-content {
   display: flex;
 
-  &.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-  }
+  // &.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+  // //  padding-inline-start: 0;
+  // //  padding-inline-end: 0;
+  // }
 }
 
 @media (min-width: 600px) {

package/utils/http.js

@@ -287,13 +287,14 @@ export default class {
   }
 
   static startIndicator(component) {
-    if (component) realComponent(component)._disabled = true;
+    // Code below can be satisfied by components/set
+    // if (component) realComponent(component)._disabled = true;
     this._showIndicator();
     vueApp.isBusy = true;
   }
 
   static stopIndicator(component) {
-    if (component) realComponent(component)._disabled = false;
+    // if (component) realComponent(component)._disabled = false;
     this._hideIndicator();
     vueApp.isBusy = false;
   }

package/utils/type.js

@@ -27,9 +27,9 @@ export function isNull(obj) {
 
 export function ifObject(obj, ifCommand, elseCommand) {
   if (isObject(obj)) {
-    ifCommand(obj);
+    return ifCommand(obj);
   } else if (elseCommand) {
-    elseCommand();
+    return elseCommand();
   }
 }
 export function ifHash(obj, ifCommand, elseCommand) {