From 3388ed5d0c87528ad559cbbf842a075a813ea29e Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 8 Oct 2024 12:35:42 -0400
Subject: [PATCH 1/2] Saving progress 1

---
 src/components/index.js                       |   2 +
 .../inspector/collection-records-list.vue     |   6 +
 .../renderer/form-collection-view-control.vue | 235 ++++++++++++++++++
 src/components/renderer/index.js              |   1 +
 src/form-builder-controls.js                  |  41 +++
 5 files changed, 285 insertions(+)
 create mode 100644 src/components/renderer/form-collection-view-control.vue

diff --git a/src/components/index.js b/src/components/index.js
index 8f9d3fd0e..47e262f68 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -50,6 +50,7 @@ import VariableNameGenerator from "@/components/VariableNameGenerator";
 import { LinkButton } from "./renderer";
 import "../assets/css/tabs.css";
 import FormCollectionRecordControl from "./renderer/form-collection-record-control.vue";
+import FormCollectionViewControl from "./renderer/form-collection-view-control.vue";
 
 const rendererComponents = {
   ...renderer,
@@ -165,6 +166,7 @@ export default {
     Vue.component("FormListTable", FormListTable);
     Vue.component("LinkButton", LinkButton);
     Vue.component("FormCollectionRecordControl", FormCollectionRecordControl);
+    Vue.component("FormCollectionViewControl", FormCollectionViewControl);
     const store = new Vuex.Store({
       modules: {
         globalErrorsModule,
diff --git a/src/components/inspector/collection-records-list.vue b/src/components/inspector/collection-records-list.vue
index 61a73575e..15a4abe69 100644
--- a/src/components/inspector/collection-records-list.vue
+++ b/src/components/inspector/collection-records-list.vue
@@ -9,6 +9,12 @@
         data-cy="inspector-collection"
       />
     </div>
+    <div v-if="collectionId > 0" class="screen-link mt-2">
+      <a :href="`/collections/${collectionId}`" target="_blank">
+        {{ $t("Open Collection") }}
+        <i class="ml-1 fas fa-external-link-alt" />
+      </a>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/renderer/form-collection-view-control.vue b/src/components/renderer/form-collection-view-control.vue
new file mode 100644
index 000000000..2b935eeaf
--- /dev/null
+++ b/src/components/renderer/form-collection-view-control.vue
@@ -0,0 +1,235 @@
+<template>
+  <vue-form-renderer
+    ref="collectionViewControl"
+    class="form-collection-record-control"
+    :placeholder="placeholder"
+    v-model="data"
+    mode="preview"
+    :config="validatedConfig"
+    :computed="computed"
+    :custom-css="customCss"
+    :watchers="watchers"
+    :_parent="_parent"
+  />
+</template>
+
+<script>
+import VueFormRenderer from "../vue-form-renderer.vue";
+
+const globalObject = typeof window === "undefined" ? global : window;
+
+const defaultConfig = [
+  {
+    name: "empty",
+    items: []
+  }
+];
+
+export default {
+  components: {
+    VueFormRenderer
+  },
+  props: {
+    name: String,
+    validationData: null,
+    _parent: null,
+    record: null,
+    collection: {
+      type: Object
+    },
+    taskdraft: Object,
+  },
+  data() {
+    return {
+      localData: {},
+      config: defaultConfig,
+      computed: [],
+      customCSS: null,
+      watchers: [],
+      screenTitle: null,
+      selCollectionId: Number,
+      selRecordId: Number,
+      selDisplayMode: String,
+      screenCollectionId: null,
+      placeholder: "Select a collection",
+      screenType: "",
+      hasMustache: false,
+      flagDraft: {},
+      taskDraft: {},
+      collectionmode: "View"
+    };
+  },
+  computed: {
+    validatedConfig() {
+      return this.config && this.config[0] ? this.config : defaultConfig;
+    },
+    data: {
+      get() {
+        if(this.hasMustache) {
+          this.clearDataObject();
+        }
+        return this.localData;
+      },
+      set(data) {
+        Object.keys(data).forEach((variable) => {
+          this.validationData && this.$set(this.validationData, variable, data[variable]);
+        });
+
+        if (this.collection) {
+          this.$set(this.collection, 'data', Array.isArray(data) ? data : [data]);
+          this.$set(this.collection, 'screen', this.screenCollectionId);
+        }
+      },
+    },
+  },
+  methods: {
+    isSubmitButton(item) {
+      return (
+        item.config &&
+        item.component === "FormButton" &&
+        item.config.event === "submit"
+      );
+    },
+    hideSubmitButtons(config) {
+      config.forEach((item) => {
+        //If the element has containers
+        if (Array.isArray(item)) {
+          this.hideSubmitButtons(item);
+        }
+
+        //If the element has items
+        if (item.items) {
+          this.hideSubmitButtons(item.items);
+        }
+
+        //hidden buttons
+        if (this.isSubmitButton(item)) {
+          item.config.hidden = true;
+        }
+      });
+    },
+    disableForm(config) {
+      config.forEach((item) => {
+        //If the element has containers
+        if (Array.isArray(item)) {
+          this.disableForm(item);
+        }
+
+        //If the element has items
+        if (item.items) {
+          this.disableForm(item.items);
+        }
+
+        //Disable element
+        if (item && item.config) {
+          item.config.disabled = true;
+          item.config.readonly = true;
+          item.config.editable = false;
+        }
+      });
+    },
+    loadScreen(id) {
+      this.config = defaultConfig;
+      this.computed = [];
+      this.customCSS = null;
+      this.watchers = [];
+      this.screenTitle = null;
+
+      if (id) {
+        this.$dataProvider.getScreen(id).then((response) => {
+          this.config = response.data.config;
+          this.hideSubmitButtons(this.config);
+          this.computed = response.data.computed;
+          this.customCSS = response.data.custom_css;
+          this.watchers = response.data.watchers;
+          this.screenTitle = response.data.title;
+
+          if (this.$attrs["disabled"]) {
+            this.disableForm(this.config);
+          }
+        });
+      }
+    },
+    callbackRecord() {
+      this.hasMustache = true;
+      this.loadRecordCollection(this.selCollectionId, 1, this.selDisplayMode);
+    },
+    errors() {
+      this.$refs.nestedScreen.isValid();
+      return this.$refs.nestedScreen.errors;
+    },
+    loadRecordCollection(collectionId, recordId, modeId) {
+      this.selCollectionId = collectionId;
+      this.selRecordId = recordId;
+      this.selDisplayMode = modeId;
+
+      this.$dataProvider
+        .getCollectionRecordsView(collectionId, recordId)
+        .then((response) => {
+          this.placeholder = "";
+          const respData = response.data;
+          const viewScreen = response.collection.read_screen_id;
+            //Choose screen id regarding of the display Mode
+          this.screenCollectionId = viewScreen;
+          this.loadScreen(this.screenCollectionId);
+
+          //This section validates if Collection has draft data
+          if(this.taskDraft?.draft?.data == null || this.taskDraft.draft.data === '') {
+            this.localData = respData;
+          }else{
+            this.localData = this.taskDraft.draft.data;
+          }
+          
+        })
+        .catch(() => {
+          this.localData = {};
+          globalObject.ProcessMaker.alert(this.$t('This content does not exist. We could not locate indicated data'), "danger");
+        });;
+    },
+    isMustache(record) {
+      return /\{\{.*\}\}/.test(record);
+    },
+    clearDataObject() {
+      Object.keys(this.localData).forEach(key => {
+        if (key !== "id") {
+          this.localData[key] = "";
+        }
+      });
+    },
+  },
+  watch: {
+    collection(collection) {
+      if(collection) {
+        this.selCollectionId = collection.collectionId;
+      }
+    },
+    record(record) {
+      this.hasMustache = false;
+      if (record && !isNaN(record) && record > 0 && this.collection) {
+        this.selRecordId = record;
+        this.loadRecordCollection(this.selCollectionId, record, this.collectionmode);
+      } else {
+        if (this.isMustache(record)) {
+          this.callbackRecord();
+        }
+        this.localData = {};
+      }
+    }
+  },
+  mounted() {
+    this.$root.$on("taskdraft-input", (val)=>{
+      this.taskDraft = val;
+    });
+
+    if (this.collection && this.record) {
+      this.loadRecordCollection(this.collection.collectionId, this.record, this.collectionmode);
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.prevent-interaction.form-collection-view-control::after {
+  content: attr(placeholder);
+}
+</style>
diff --git a/src/components/renderer/index.js b/src/components/renderer/index.js
index fd8d4d664..dc0a61768 100755
--- a/src/components/renderer/index.js
+++ b/src/components/renderer/index.js
@@ -20,3 +20,4 @@ export { default as FormRequests } from "./form-requests.vue";
 export { default as FormTasks } from "./form-tasks.vue";
 export { default as LinkButton } from "./link-button.vue";
 export { default as FormCollectionRecordControl } from "./form-collection-record-control.vue";
+export { default as FormCollectionViewControl } from "./form-collection-view-control.vue";
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 509a3af38..ae236b80a 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -12,6 +12,7 @@ import FileDownload from './components/renderer/file-download';
 import FormListTable from './components/renderer/form-list-table';
 import FormAnalyticsChart from "./components/renderer/form-analytics-chart";
 import FormCollectionRecordControl from './components/renderer/form-collection-record-control.vue';
+import FormCollectionViewControl from './components/renderer/form-collection-view-control.vue';
 import {DataTypeProperty, DataFormatProperty, DataTypeDateTimeProperty} from './VariableDataTypeProperties';
 import {
   FormInput,
@@ -1124,5 +1125,45 @@ export default [
         },
       ],
     },
+  },
+  {
+    editorComponent: FormCollectionViewControl,
+    editorBinding: 'FormCollectionViewControl',
+    rendererComponent: FormCollectionViewControl,
+    rendererBinding: 'FormCollectionViewControl',
+    control: {
+      popoverContent: "Create a Collection View Control",
+      order: 7.0,
+      group: 'Content Fields',
+      label: 'Collection Record View',
+      component: 'FormCollectionViewControl',
+      'editor-component': 'FormCollectionViewControl',
+      'editor-control': 'FormCollectionViewControl',
+      config: {
+        name: 'Collection View Control',
+        icon: 'fas fa-database',
+        label: 'Collection View Control',
+      },
+      inspector: [
+        {
+          type: "collectionRecordsList",
+          field: "collection",
+          config: {
+            label: 'Collection Name',
+            helper: 'Select a collection',
+            value: '',
+          }
+        },
+        {
+          type: 'FormInput',
+          field: 'record',
+          config: {
+            label: 'Record ID',
+            helper: 'Supports Mustache Variable and the Collection Record',
+            value: '',
+          },
+        }
+      ],
+    },
   }
 ];

From 67cfe84beffa76252369993e9c34ab07d0552f63 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 8 Oct 2024 16:46:49 -0400
Subject: [PATCH 2/2] Ready for PR

---
 .../inspector/collection-records-list.vue     | 19 ++++++++++++++++---
 .../renderer/form-collection-view-control.vue |  1 +
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/inspector/collection-records-list.vue b/src/components/inspector/collection-records-list.vue
index 15a4abe69..cb4731858 100644
--- a/src/components/inspector/collection-records-list.vue
+++ b/src/components/inspector/collection-records-list.vue
@@ -10,8 +10,12 @@
       />
     </div>
     <div v-if="collectionId > 0" class="screen-link mt-2">
-      <a :href="`/collections/${collectionId}`" target="_blank">
-        {{ $t("Open Collection") }}
+      <a 
+        :href="`/designer/screen-builder/${
+          screenMode === 'display' ? idCollectionScreenView : idCollectionScreenEdit
+          }/edit`" 
+          target="_blank">
+        {{ $t(screenMode === 'display' ? "Open View Screen" : "Open Edit Screen") }}
         <i class="ml-1 fas fa-external-link-alt" />
       </a>
     </div>
@@ -42,7 +46,10 @@ export default {
       collectionId: null,
       pmql: "",
       unique: false,
-      dataRecordList: []
+      dataRecordList: [],
+      idCollectionScreenView: null,
+      idCollectionScreenEdit: null,
+      screenMode: null
     };
   },
   computed: {
@@ -87,6 +94,9 @@ export default {
     if (this.collectionId) {
       this.getFields();
     }
+    this.$root.$on("collection-screen-mode", (mode) => {
+      this.screenMode = mode;
+    });
   },
   methods: {
     onCollectionChange() {
@@ -99,6 +109,9 @@ export default {
     },
     getCollections() {
       this.$dataProvider.getCollections().then((response) => {
+        const [firstItem = {}] = response.data.data || [];
+        this.idCollectionScreenView = firstItem.read_screen_id;
+        this.idCollectionScreenEdit = firstItem.create_screen_id;
         this.collections = [
           { value: null, text: this.$t("Select a collection") },
           ...response.data.data.map((collection) => {
diff --git a/src/components/renderer/form-collection-view-control.vue b/src/components/renderer/form-collection-view-control.vue
index 2b935eeaf..f1f84cfd6 100644
--- a/src/components/renderer/form-collection-view-control.vue
+++ b/src/components/renderer/form-collection-view-control.vue
@@ -201,6 +201,7 @@ export default {
     collection(collection) {
       if(collection) {
         this.selCollectionId = collection.collectionId;
+        this.$root.$emit("collection-screen-mode", "display");
       }
     },
     record(record) {