FOUR-10447: Add Preview for screens #1671

danloa · 2023-09-15T14:36:45Z

Issue & Reproduction Steps

Adds the Preview for Screens. This preview will be used in modeler.

Related Tickets & Packages

https://processmaker.atlassian.net/browse/FOUR-10447

Code Review Checklist

I have pulled this code locally and tested it on my instance, along with any associated packages.
This code adheres to ProcessMaker Coding Guidelines.
This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
This solution fixes the bug reported in the original ticket.
This solution does not alter the expected output of a component in a way that would break existing Processes.
This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
This ticket conforms to the PRD associated with this part of ProcessMaker.

tokensPM · 2023-09-15T19:35:44Z

QA server was successfully deployed https://ci-f8cc5d1624.eng.processmaker.net

tokensPM · 2023-09-18T15:32:41Z

QA server was successfully deployed https://ci-f8cc5d1624.eng.processmaker.net

tokensPM · 2023-09-18T16:14:48Z

QA server was successfully deployed https://ci-f8cc5d1624.eng.processmaker.net

tokensPM · 2023-09-18T18:04:57Z

QA server was successfully deployed https://ci-f8cc5d1624.eng.processmaker.net

josechirivella · 2023-09-18T20:34:32Z

src/components/inspectors/PreviewPanel.vue

+      // this.data = type && this.nodeRegistry[type].inspectorData
+      //   ? this.nodeRegistry[type].inspectorData(this.highlightedNode, defaultDataTransform, this)
+      //   : defaultDataTransform(this.highlightedNode);


josechirivella · 2023-09-18T20:35:29Z

src/components/inspectors/PreviewPanel.vue

      <div class="task-title"> {{ taskTitle }} </div>
    </b-row>

-    <no-preview-available/>
+    <no-preview-available v-if="previewUrl === null"/>
+    <iframe v-if="previewUrl !== null" :src="previewUrl" style="width:100%; height:100%;border:0px none;"/>


v-else here or !!previewUrl

tokensPM · 2023-09-20T14:13:25Z

QA server was successfully deployed https://ci-f8cc5d1624.eng.processmaker.net

tokensPM · 2023-09-21T17:30:36Z

QA server was successfully deployed https://ci-f8cc5d1624.eng.processmaker.net

josechirivella · 2023-10-04T22:53:57Z

src/components/inspectors/PreviewPanel.vue

+      <svg class="lds-gear" width="150px" height="100%"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
+      >
+        <g transform="translate(50 50)">
+          <g transform="rotate(248.825)">
+            <animateTransform attributeName="transform" type="rotate" values="0;360" keyTimes="0;1" dur="4.7s" repeatCount="indefinite"/>
+            <path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 35.67394948182593 13.090810836924174 L35.67394948182593 13.090810836924174 L44.33420351967032 18.090810836924174 L37.83420351967032 29.34914108612188 L29.17394948182593 24.34914108612188 A38 38 0 0 1 24.34914108612188 29.17394948182593 L24.34914108612188 29.17394948182593 L29.34914108612188 37.83420351967032 L18.090810836924184 44.33420351967032 L13.090810836924183 35.67394948182593 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -13.09081083692417 35.67394948182593 L-13.09081083692417 35.67394948182593 L-18.09081083692417 44.33420351967032 L-29.34914108612187 37.834203519670325 L-24.349141086121872 29.173949481825936 A38 38 0 0 1 -29.17394948182592 24.34914108612189 L-29.17394948182592 24.34914108612189 L-37.83420351967031 29.349141086121893 L-44.33420351967031 18.0908108369242 L-35.67394948182592 13.090810836924193 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -35.67394948182593 -13.090810836924167 L-35.67394948182593 -13.090810836924167 L-44.33420351967032 -18.090810836924163 L-37.834203519670325 -29.34914108612187 L-29.173949481825936 -24.34914108612187 A38 38 0 0 1 -24.349141086121893 -29.17394948182592 L-24.349141086121893 -29.17394948182592 L-29.349141086121897 -37.834203519670304 L-18.0908108369242 -44.334203519670304 L-13.090810836924195 -35.67394948182592 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 13.090810836924149 -35.67394948182594 L13.090810836924149 -35.67394948182594 L18.090810836924142 -44.33420351967033 L29.349141086121847 -37.83420351967034 L24.349141086121854 -29.17394948182595 A38 38 0 0 1 29.17394948182592 -24.349141086121893 L29.17394948182592 -24.349141086121893 L37.834203519670304 -29.349141086121897 L44.334203519670304 -18.0908108369242 L35.67394948182592 -13.090810836924197 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20"/>
+          </g>
+        </g>
+      </svg>


can you move this svg into his own file?

josechirivella · 2023-10-04T22:54:22Z

src/components/inspectors/PreviewPanel.vue

+    </div>
+
+    <no-preview-available v-show="!previewUrl"/>
+    <iframe title="Preview" v-show="!!previewUrl && !showSpinner" :src="previewUrl" style="width:100%; height:100%;border:0px none;" @load="loading"/>


Suggested change

<iframe title="Preview" v-show="!!previewUrl && !showSpinner" :src="previewUrl" style="width:100%; height:100%;border:0px none;" @load="loading"/>

<iframe title="Preview" v-show="!!previewUrl && !showSpinner" :src="previewUrl" style="width:100%; height:100%;border: none;" @load="loading"/>

josechirivella · 2023-10-04T22:55:27Z

src/components/inspectors/PreviewPanel.vue

+        return config.matcher(this.data);
+      });
+
+      var clone = {};


don't use var anymore, let if you are going to override the value of the variable later on

Suggested change

var clone = {};

let clone = {};

josechirivella · 2023-10-04T22:56:12Z

src/components/inspectors/PreviewPanel.vue

+      const nodeData = encodeURI(JSON.stringify(clone));
+
+      this.previewUrl = previewConfig ? `${previewConfig.url}?node=${nodeData}` : null;
+      this.taskTitle = this?.highlightedNode?.definition?.name;


this in this case will always be defined. No need to add the first ?

Suggested change

this.taskTitle = this?.highlightedNode?.definition?.name;

this.taskTitle = this.highlightedNode?.definition?.name;

processmaker-sonarqube · 2023-10-05T00:19:03Z

SonarQube Quality Gate

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

0.0% Coverage
0.0% Duplication

danloa added 3 commits September 13, 2023 13:44

Read preview config

958fadf

Handle preview element

c71d4bd

Get node data with default data transform only

fe86a47

danloa marked this pull request as ready for review September 18, 2023 15:04

josechirivella suggested changes Sep 18, 2023

View reviewed changes

Merge remote-tracking branch 'origin/next' into feature/FOUR-10447

295d6af

Remove commented code

bf307e3

josechirivella approved these changes Sep 21, 2023

View reviewed changes

danloa added 6 commits October 4, 2023 11:06

Add loading gear in preview pane

f27ef61

Fix code style

3de4d5d

Url encode query string parameter

6c94cfb

iframe title

8e8b9f6

Merge with next branch

6e7eb42

Remove debugging code

91f114f

josechirivella suggested changes Oct 4, 2023

View reviewed changes

danloa added 3 commits October 4, 2023 19:43

CR fixes

ce12cd5

Code style

03c08ba

Add alt to image

f81ea94

josechirivella approved these changes Oct 5, 2023

View reviewed changes

ryancooley merged commit 36e401f into next Oct 6, 2023

ryancooley deleted the feature/FOUR-10447 branch October 6, 2023 21:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FOUR-10447: Add Preview for screens #1671

FOUR-10447: Add Preview for screens #1671

danloa commented Sep 15, 2023 •

edited by ana-mauricio

Loading

tokensPM commented Sep 15, 2023

tokensPM commented Sep 18, 2023

tokensPM commented Sep 18, 2023

tokensPM commented Sep 18, 2023

josechirivella Sep 18, 2023

danloa Sep 21, 2023

josechirivella Sep 18, 2023

danloa Sep 21, 2023

tokensPM commented Sep 20, 2023

tokensPM commented Sep 21, 2023

josechirivella Oct 4, 2023

josechirivella Oct 4, 2023

josechirivella Oct 4, 2023

josechirivella Oct 4, 2023

processmaker-sonarqube bot commented Oct 5, 2023

	<iframe title="Preview" v-show="!!previewUrl && !showSpinner" :src="previewUrl" style="width:100%; height:100%;border:0px none;" @load="loading"/>
	<iframe title="Preview" v-show="!!previewUrl && !showSpinner" :src="previewUrl" style="width:100%; height:100%;border: none;" @load="loading"/>

	this.taskTitle = this?.highlightedNode?.definition?.name;
	this.taskTitle = this.highlightedNode?.definition?.name;

FOUR-10447: Add Preview for screens #1671

FOUR-10447: Add Preview for screens #1671

Conversation

danloa commented Sep 15, 2023 • edited by ana-mauricio Loading

Issue & Reproduction Steps

Related Tickets & Packages

Code Review Checklist

tokensPM commented Sep 15, 2023

tokensPM commented Sep 18, 2023

tokensPM commented Sep 18, 2023

tokensPM commented Sep 18, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tokensPM commented Sep 20, 2023

tokensPM commented Sep 21, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

processmaker-sonarqube bot commented Oct 5, 2023

danloa commented Sep 15, 2023 •

edited by ana-mauricio

Loading