Fix page layout expressions variables when switching from view to edit mode

client/web/compose/src/mixins/conditionalFields.js

@@ -27,7 +27,8 @@ export default {
 
     prepareFieldConditionsData () {
       const expressions = {}
-      const variables = { record: this.record.serialize() }
+      const record = this.record ? this.record.serialize() : {}
+      const variables = { record }
       this.block.options.fieldConditions.forEach(({ field, condition }) => {
         if (field && condition) {
           expressions[field] = condition

client/web/compose/src/mixins/record.js

@@ -172,8 +172,9 @@ export default {
 
             if (!isNew) {
               this.record = record
-              this.determineLayout()
-              this.$root.$emit(`refetch-non-record-blocks:${this.page.pageID}`)
+              this.determineLayout().then(() => {
+                this.$root.$emit(`refetch-non-record-blocks:${this.page.pageID}`)
+              })
             }
           }
 

client/web/compose/src/views/Admin/Pages/Edit.vue

@@ -497,15 +497,27 @@
 
         <b-form-text>
           <i18next
-            path="page-layout.condition.description"
-            tag="label"
+            v-if="isRecordPage"
+            path="page-layout.condition.description.record-page"
+            tag="span"
           >
-            <code>"record.values.fieldName"</code>
-            <code>"user.(userID/email...)"</code>
-            <code>"screen.(width/height)"</code>
-            <code>"isView/isCreate/isEdit"</code>
-            <code>"user.userID == record.values.createdBy"</code>
-            <code>"screen.width &lt; 1024"</code>
+            <code>record.values.fieldName</code>
+            <code>user.(userID/email...)</code>
+            <code>screen.(width/height)</code>
+            <code>isView/isCreate/isEdit</code>
+            <code>user.userID == record.values.createdBy</code>
+            <code>screen.width &lt; 1024</code>
+          </i18next>
+
+          <i18next
+            v-else
+            path="page-layout.condition.description.non-record-page"
+            tag="span"
+          >
+            <code>user.(userID/email...)</code>
+            <code>screen.(width/height)</code>
+            <code>user.email == "test@mail.com"</code>
+            <code>screen.width &lt; 1024</code>
           </i18next>
         </b-form-text>
       </b-form-group>

client/web/compose/src/views/Public/Pages/Records/View.vue

@@ -347,9 +347,9 @@ export default {
 
           return response()
             .then(record => {
-              setTimeout(() => {
+              return new Promise(resolve => setTimeout(resolve, 300)).then(() => {
                 this.record = new compose.Record(module, record)
-              }, 300)
+              })
             })
             .catch(e => {
               if (!axios.isCancel(e)) {
@@ -418,16 +418,25 @@ export default {
     },
 
     handleEdit () {
-      this.inEditing = true
-      this.inCreating = false
+      this.processing = true
+
+      this.refresh({ isView: false, isEdit: true, isCreate: false }).then(() => {
+        this.inEditing = true
+        this.inCreating = false
+
+        this.$root.$emit(`refetch-non-record-blocks:${this.page.pageID}`)
+      }).finally(() => {
+        this.processing = false
+      })
     },
 
     handleView () {
       this.processing = true
 
-      this.refresh().then(() => {
+      this.refresh({ isView: true, isEdit: false, isCreate: false }).then(() => {
         this.inEditing = false
         this.inCreating = false
+
         this.$root.$emit(`refetch-non-record-blocks:${this.page.pageID}`)
       }).finally(() => {
         this.processing = false
@@ -447,11 +456,11 @@ export default {
       }
     },
 
-    evaluateLayoutExpressions () {
+    evaluateLayoutExpressions (variables = {}) {
       const expressions = {}
-      const variables = {
+      variables = {
         user: this.$auth.user,
-        record: this.record.serialize() || {},
+        record: this.record ? this.record.serialize() : {},
         screen: {
           width: window.innerWidth,
           height: window.innerHeight,
@@ -460,9 +469,10 @@ export default {
         },
         oldLayout: this.layout,
         layout: undefined,
-        isView: this.$route.name === 'page.record',
-        isCreate: this.$route.name === 'page.record.create',
-        isEdit: this.$route.name === 'page.record.edit',
+        isView: !this.inEditing && !this.inCreating,
+        isCreate: this.inCreating,
+        isEdit: this.inEditing,
+        ...variables,
       }
 
       this.layouts.forEach(layout => {
@@ -482,14 +492,14 @@ export default {
       })
     },
 
-    async determineLayout (pageLayoutID) {
+    async determineLayout (pageLayoutID, variables = {}) {
       // Clear stored records so they can be refetched with latest values
       this.clearRecordSet()
       let expressions = {}
 
       // Only evaluate if one of the layouts has an expressions variable
       if (this.layouts.some(({ config = {} }) => config.visibility.expression)) {
-        expressions = await this.evaluateLayoutExpressions()
+        expressions = await this.evaluateLayoutExpressions(variables)
       }
 
       // Check layouts for expressions/roles and find the first one that fits
@@ -544,9 +554,9 @@ export default {
       this.$root.$emit(`refetch-non-record-blocks:${this.page.pageID}`)
     },
 
-    async refresh () {
+    async refresh (variables = {}) {
       return this.loadRecord().then(() => {
-        return this.determineLayout()
+        return this.determineLayout(undefined, variables)
       })
     },
 

client/web/compose/src/views/Public/Pages/View.vue

@@ -244,9 +244,6 @@ export default {
         user: this.$auth.user,
         oldLayout: this.layout,
         layout: undefined,
-        isView: this.$route.name === 'page.record',
-        isCreate: this.$route.name === 'page.record.create',
-        isEdit: this.$route.name === 'page.record.edit',
       }
 
       this.layouts.forEach(layout => {

locale/en/corteza-webapp-compose/page.yaml

@@ -13,7 +13,9 @@ page-layout:
   condition:
     label: Condition
     placeholder: When will the layout be shown
-    description: "You can use {{0}}, {{1}}, {{2}}, {{3}} inside  the expression, for example: {{4}} or {{5}}"
+    description:
+      record-page: "You can use {{0}}, {{1}}, {{2}}, {{3}} inside  the expression, for example: {{4}} or {{5}}"
+      non-record-page: "You can use {{0}}, {{1}} inside  the expression, for example: {{2}} or {{3}}"
   roles:
     label: Roles
     placeholder: Pick roles that the layout will be shown to