glib-web 0.14.4 → 0.15.0

package/app.vue

@@ -1,38 +1,40 @@
 <template>
   <v-app :class="page.styleClasses">
-    <nav-appbar :page="page" />
-
-    <v-progress-linear
-      v-if="$root.vueApp.indicator"
-      :indeterminate="true"
-      height="5"
-      style="position: fixed; z-index: 4;"
-    >
-    </v-progress-linear>
-
-    <div class="pages-header">
-      <layouts-content
-        :template="page.template"
-        :spec="header"
-        :full-height="false"
-      />
-    </div>
-
-    <div id="page_body" class="pages-body body-wrapper">
-      <layouts-content
-        :template="page.template"
-        :spec="body"
-        :full-height="true"
-      />
-    </div>
-
-    <div class="pages-footer">
-      <layouts-content
-        :template="page.template"
-        :spec="footer"
-        :full-height="false"
-      />
-    </div>
+    <component :is="containerComponent" :spec="formSpec">
+      <nav-appbar :page="page" />
+
+      <v-progress-linear
+        v-if="$root.vueApp.indicator"
+        :indeterminate="true"
+        height="5"
+        style="position: fixed; z-index: 4;"
+      >
+      </v-progress-linear>
+
+      <div class="pages-header">
+        <layouts-content
+          :template="page.template"
+          :spec="header"
+          :full-height="false"
+        />
+      </div>
+
+      <div id="page_body" class="pages-body body-wrapper">
+        <layouts-content
+          :template="page.template"
+          :spec="body"
+          :full-height="true"
+        />
+      </div>
+
+      <div class="pages-footer">
+        <layouts-content
+          :template="page.template"
+          :spec="footer"
+          :full-height="false"
+        />
+      </div>
+    </component>
   </v-app>
 </template>
 
@@ -42,11 +44,13 @@ import Utils from "./utils/helper";
 import ContentLayout from "./nav/content";
 import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 import actionCableMixin from "./components/mixins/ws/actionCable.js";
+import FormPanel from "./components/panels/form";
 
 export default {
   components: {
     "nav-appbar": NavAppBar,
-    "layouts-content": ContentLayout
+    "layouts-content": ContentLayout,
+    "panels-form": FormPanel
   },
   mixins: [phoenixSocketMixin, actionCableMixin],
   props: {
@@ -54,7 +58,8 @@ export default {
   },
   data() {
     return {
-      title: "..."
+      title: "...",
+      formSpec: null
     };
   },
   computed: {
@@ -66,6 +71,12 @@ export default {
     },
     footer() {
       return this.page.footer || {};
+    },
+    containerComponent() {
+      if (this.formSpec) {
+        return "panels-form";
+      }
+      return "div";
     }
   },
   watch: {
@@ -84,6 +95,7 @@ export default {
   methods: {
     $ready: function() {
       document.title = this.page.title;
+      this.formSpec = this.page.fullPageForm;
 
       this.$wsInitPhoenixSocket(this.page.phoenixSocket);
       this.$wsInitActionCable(this.page.actionCable);

package/components/panels/form.vue

@@ -1,11 +1,25 @@
 <template>
-  <v-form ref="form" :style="parentStyles" :action="url" :method="spec.method" :data-local="spec.local"
-    @submit="onSubmit">
+  <v-form
+    ref="form"
+    :style="parentStyles"
+    :action="url"
+    :method="spec.method"
+    :data-local="spec.local"
+    @submit="onSubmit"
+  >
     <template v-for="(value, key, index) in params">
-      <input :key="`hidden_${index}`" type="hidden" :name="key" :value="value" />
+      <input
+        :key="`hidden_${index}`"
+        type="hidden"
+        :name="key"
+        :value="value"
+      />
     </template>
 
     <panels-responsive :spec="modifiedSpec" />
+
+    <!-- Used by app.vue -->
+    <slot />
   </v-form>
 </template>
 
@@ -25,19 +39,20 @@ export default {
     modifiedSpec: {}
   }),
   watch: {
-    $isBusy: function (val, oldVal) {
+    $isBusy: function(val, oldVal) {
       for (const button of this.submitButtons) {
         button._isBusy = val;
       }
     }
   },
+  // TODO: Move back to ready after implementing panels_logic
   mounted() {
     this.$onEvent("forms/directSubmit", e => {
       this.directSubmit();
     });
   },
   methods: {
-    $ready: function () {
+    $ready: function() {
       this.$onEvent("forms/addSubmit", e => {
         this.submitButtons.push(e.data);
       });

package/nav/dialog.vue

@@ -14,12 +14,12 @@
         </v-btn>
       </v-card-title>
 
-      <div>
+      <component :is="containerComponent" :spec="formSpec">
         <div v-if="message" class="dialog-message">
           <common-message :spec="{ message: message }" />
         </div>
         <panels-responsive v-if="body" :spec="body" />
-      </div>
+      </component>
 
       <v-divider></v-divider>
 
@@ -45,8 +45,12 @@
 <script>
 import Http from "../utils/http";
 import Action from "../action";
+import FormPanel from "../components/panels/form";
 
 export default {
+  components: {
+    "panels-form": FormPanel
+  },
   props: {
     spec: { type: Object, required: true }, // Original spec. It might be different from the latest spec (after reloading).
     stack: { type: Array, required: true },
@@ -63,9 +67,18 @@ export default {
       urlLoaded: false,
       showClose: false,
       isFormDirty: false,
-      isFormSubmitted: false
+      isFormSubmitted: false,
+      formSpec: null
     };
   },
+  computed: {
+    containerComponent() {
+      if (this.formSpec) {
+        return "panels-form";
+      }
+      return "div";
+    }
+  },
   watch: {
     model: function(val, oldVal) {
       if (!val) {
@@ -117,6 +130,7 @@ export default {
               this.urlLoaded = true;
               this.title = response.title;
               this.message = "";
+              this.formSpec = response.fullPageForm;
               this.body = response.body;
               this.footer = response.footer;
               this.showClose = this.spec.showClose || false;

package/package.json

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