@processmaker/screen-builder 2.99.3 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.99.3",
+  "version": "3.0.0",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -40,6 +40,7 @@
     "moment-timezone": "^0.5.45",
     "monaco-editor": "^0.34.0",
     "scrollparent": "^2.0.1",
+    "uuid": "^10.0.0",
     "vue-loader": "^15.9.2",
     "vue-monaco": "^0.3.2",
     "vue-simple-uploader": "^0.7.4",

package/src/App.vue

@@ -50,8 +50,10 @@
 
           <b-col v-if="displayBuilder && !displayPreview" class="text-right">
             <screen-toolbar
+              :disabled="$refs.builder?.isCurrentPageClipboard"
               @undo="$refs.builder.undo()"
               @redo="$refs.builder.redo()"
+              @open-templates="openTemplatesPanel"
               @open-calc="openComputedProperties"
               @open-customCss="openCustomCSS"
               @open-watchers="openWatchersPopup"
@@ -443,7 +445,9 @@ export default {
         minimap: {
           enabled: false
         }
-      }
+      },
+      showTemplatesPanel: false,
+      sharedTemplatesData: null,
     };
   },
   computed: {
@@ -519,7 +523,11 @@ export default {
         });
       }
       return warnings;
-    }
+    },
+     // Get clipboard items from Vuex store
+    clipboardItems() {
+      return this.$store.getters["clipboardModule/clipboardItems"];
+    },
   },
   created() {
     this.updateDataInput = debounce(this.updateDataInput, 1000);
@@ -602,6 +610,7 @@ export default {
       const savedWatchers = localStorage.getItem("savedWatchers");
       const customCSS = localStorage.getItem("customCSS");
       const computed = localStorage.getItem("computed");
+      const savedClipboard = localStorage.getItem("savedClipboard");  
 
       if (savedConfig) {
         const config = JSON.parse(savedConfig);
@@ -696,6 +705,9 @@ export default {
     openWatchersPopup() {
       this.$refs.watchersPopup.show();
     },
+    openTemplatesPanel() {
+      this.$refs.builder.openTemplatesPanel();
+    },
     openComputedProperties() {
       this.$refs.computedProperties.show();
     },

package/src/DataProvider.js

@@ -231,7 +231,6 @@ export default {
     if (authParams) {
       query = `?${new URLSearchParams(authParams).toString()}`;
     }
-
     return query;
   },
 
@@ -296,5 +295,47 @@ export default {
         }
         throw error;
       });
+  },
+
+  getCollectionRecordsList(collectionId, options = null) {
+
+    return this.get(
+      `/collections/${collectionId}/records${this.authQueryString()}`,
+      options
+    )
+      .then((response) => {
+        const data = response ? response.data : null;
+        if (!data) {
+          throw new Error(i18next.t("No data returned"));
+        }
+        return data;
+      })
+      .catch((error) => {
+        if (error.response && error.response.status === 404) {
+          const data = { data: [] };
+          return [data];
+        }
+        throw error;
+      });
+  },
+
+  getCollectionRecordsView(collectionId, recordId) {
+    return this.get(
+      `/collections/${collectionId}/records/${recordId}`
+    )
+      .then((response) => {
+        const data = response ? response.data : null;
+        if (!data) {
+          throw new Error(i18next.t("No data returned"));
+        }
+        return data;
+      })
+      .catch((error) => {
+        if (error.response && error.response.status === 404) {
+          const data = { data: [] };
+          return data;
+        }
+        throw error;
+      });
   }
 };

package/src/VariableDataTypeProperties.js

@@ -30,7 +30,7 @@ function dataTypeFactory(options) {
 function dataFormatFactory() {
 
   return {
-    type: SelectDataTypeMask,
+    type: 'SelectDataTypeMask',
     field: 'dataMask',
     config: {
       label: 'Data Format',

package/src/components/ClipboardButton.vue

@@ -0,0 +1,77 @@
+<template>
+    <!-- Conditionally render buttons based on clipboardContent -->
+    <button
+      v-if="isInClipboard"
+      class="btn btn-sm btn-outline-secondary mr-2 remove-btn"
+      :title="removeTitle"
+      @click="removeFromClipboard"
+      data-cy="removeFromClipboard"
+    >
+      <i class="fas fa-minus"></i>
+    </button>
+
+    <button
+      v-else
+      class="btn btn-sm btn-success mr-2 add-btn"
+      :title="addTitle"
+      @click="addToClipboard(index)"
+      data-cy="addToClipboard"
+    >
+      <i class="fas fa-plus"></i>
+    </button>
+</template>
+
+<script>
+export default {
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    isInClipboard: {
+      type: Boolean,
+      required: true,
+    },
+    addTitle: {
+      type: String,
+      required: false,
+      default: 'Add to clipboard',
+    },
+    removeTitle: {
+      type: String,
+      required: false,
+      default: 'Remove from clipboard',
+    }
+  },
+
+
+  methods: {
+    // Method to handle adding to clipboard
+    addToClipboard(index) {
+      this.$emit('addToClipboard');
+    },
+    // Method to handle removing from clipboard
+    removeFromClipboard() {
+      this.$emit('removeFromClipboard');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.remove-btn {
+  background-color: #FFFFFF;
+  color: #596372;
+}
+.remove-btn:hover {
+  background-color: #f8f9fa; 
+  color: #596372;
+}
+.add-btn {
+  background-color: #0CA442;
+}
+</style>

package/src/components/CssIcon.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg width="58" height="58" viewBox="0 0 71 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="34.9456" y="16.7" width="31.6" height="59.6" rx="1.8" fill="#EAF2FF" stroke="#E9ECF1" stroke-width="0.4"/>
+    <rect x="38.1" y="21.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="38.1" y="28.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="38.1" y="35.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="0.945605" y="16.7" width="31.6" height="59.6" rx="1.8" fill="#EAF2FF" stroke="#E9ECF1" stroke-width="0.4"/>
+    <rect x="3.84561" y="20.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="27.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="34.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="41.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="48.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="1.2" y="0.2" width="65.6" height="13.1882" rx="1.8" fill="#81AFFF" stroke="#E9ECF1" stroke-width="0.4"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "CssIcon",
+};
+</script>

package/src/components/ScreenTemplateCard.vue

@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <b-card
+      img-top
+      class="mb-2 screenbuilder-template-card"
+      @click="showDetails"
+    >
+      <div
+        v-if="thumbnail"
+        class="thumbnail-container thumbnail-image-container"
+      >
+        <img class="thumbnail-image" :src="thumbnail" :alt="`${template.name}`"/>
+      </div>
+      <div
+        v-else
+        class="thumbnail-container thumbnail-icon-container d-flex align-items-center justify-content-center"
+      >
+        <i class="p-4 fas fa-palette thumbnail-icon"></i>
+      </div>
+      <hr class="card-divider">
+      <b-card-body class="p-1">
+        <div class="template-details">
+          <span class="template-name d-block pt-1">{{ template.name }}</span>
+          <span class="template-description d-block">{{ template.description }}</span>
+        </div>
+        <b-collapse v-model="showApplyOptions">
+            <b-form-checkbox-group
+              class="apply-options-group p-2"
+              v-model="selected"
+              name="apply-options"
+            >
+            <div class="row row-cols-3 icons-row">
+              <div
+                v-for="option in applyOptions"
+                :key="option.value"
+                class="col apply-options-container d-flex align-items-baseline flex-column"
+              >
+                <div class="icon-container">
+                  <div v-if="option.value === 'CSS'">
+                    <css-icon />
+                  </div>
+                  <div v-else>
+                    <i :class="option.icon"></i>
+                  </div>
+                </div>
+                <b-form-checkbox
+                  class="option-checkbox"
+                  :value="option.value"
+                >
+                  {{ option.text }}
+                </b-form-checkbox>
+              </div>
+            </div>
+            </b-form-checkbox-group>
+            <hr class="bottom-card-divider">
+            <div class="apply-btn-container d-flex justify-content-end">
+              <button
+                type="button"
+                size="sm"
+                class="btn btn-outline-secondary card-btn"
+                @click="onCancel"
+              >
+                {{ $t("Cancel") }}
+              </button>
+              <button
+                :disabled="!selected.length"
+                type="button"
+                size="sm"
+                class="btn btn-primary ml-2 card-btn"
+                @click="applyTemplate"
+              >
+                {{ $t("Apply") }}
+              </button>
+            </div>
+        </b-collapse>
+      </b-card-body>
+    </b-card>
+    
+  </div>
+</template>
+
+<script>
+import CssIcon from './CssIcon.vue';
+
+export default {
+  components: {
+    CssIcon,
+  },
+  mixins: [],
+  props: ['template', 'screenId', 'currentScreenPage'],
+  data() {
+    return {
+      showApplyOptions: false,
+      selected: [],
+      applyOptions: [
+        { text: 'CSS', value: 'CSS' },
+        { text: 'Fields', value: 'Fields', icon: 'fp-fields-icon' },
+        { text: 'Layout', value: 'Layout', icon: 'fp-layout-icon' },
+      ],
+    };
+  },
+  computed: {
+    thumbnail() {
+      if (this.template?.template_media && this.template.template_media.length > 0) {
+        return this.template.template_media[0].url;
+      } else if (this.template?.template_media?.thumbnail?.url) {
+        return this.template?.template_media.thumbnail.url
+      }
+      return null;
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    showDetails() {
+      this.showApplyOptions = !this.showApplyOptions;
+    },
+    applyTemplate() {
+      ProcessMaker.apiClient
+        .post(`/template/screen/${this.template.id}/apply`, {
+          screenId: this.screenId,
+          templateOptions: this.selected,
+          currentScreenPage: this.currentScreenPage,
+        })
+        .then((response) => {
+          ProcessMaker.alert(this.$t("The template options have been applied."), "success");
+          window.location.reload();
+        })
+        .catch((error) => {
+          const errorMessage = error.response?.data?.message || error.message;
+          ProcessMaker.alert(errorMessage, "danger");
+        });
+    },
+    onCancel() {
+      this.showApplyOptions = false;
+      this.selected = [];
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.fp-fields-icon, .fp-layout-icon {
+  color: #EAF2FF;
+}
+
+.screenbuilder-template-card {
+  width: 225px;
+  margin: 8px;
+  border: 1px solid #D7DDE5;
+  border-radius: 8px;
+  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+}
+
+.card-divider {
+  width: 100%;
+  margin: 0px;
+  background-color: #D7DDE5;
+}
+
+.thumbnail-container:hover,
+.thumbnail-container.active {
+  border-color: #1572C2;
+  cursor: pointer;
+}
+
+.thumbnail-image {
+  width: 100%;
+  border-radius: 8px 8px 0px 0px;
+}
+
+.thumbnail-image-container {
+  border-radius: 8px;
+  padding: 0px !important;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.thumbnail-icon {
+  color: #CDDDEE;
+  font-size: 59px;
+}
+
+.template-details {
+  padding: 10px;
+}
+
+.template-name {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #2F343B;
+}
+
+.template-description {
+  font-size: 12.5px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #4E5663;
+}
+
+.apply-options-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.icons-row {
+  margin-right: -5px !important;
+  margin-left: -5px !important;
+}
+
+.apply-options-container {
+    padding: 5px;
+}
+
+.apply-options-group i {
+  display: block;
+  font-size: 58px;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 66px;
+  height: 76px;
+  border: 0.7px solid #D7DDE5;
+  border-radius: 8px;
+  margin-bottom: 10px;
+}
+
+.option-checkbox {
+  font-size: 12px;
+}
+
+.bottom-card-divider {
+  width: 90%;
+  background-color: #E9ECF1;
+  margin-top: 0px;
+}
+
+.apply-btn-container {
+  padding: 0px 10px 10px 0px;
+}
+
+.card-btn {
+  font-size: 14px;
+  text-transform: none;
+  border-radius: 8px;
+  padding: 5px 10px;
+}
+
+</style>

package/src/components/ScreenTemplates.vue

@@ -0,0 +1,216 @@
+<template>
+  <div
+    class="screen-templates-container"
+    data-cy="screen-templates-section"
+  >
+    <div class="d-flex justify-content-between">
+      <h6 class="pt-2">{{ $t("Select a Template") }}</h6>
+      <button
+        class="panel-close-btn"
+        @click="$emit('close-templates-panel')"
+        data-cy="close-templates-section"
+      >
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+    <div class="d-flex template-tabs justify-content-center">
+      <b-button
+        @click="showMyTemplates"
+        class="d-inline default-template-btn px-1"
+        :class="{ 'my-templates-selected': myTemplatesSelected }"
+        data-cy="my-templates-tab"
+      >
+        {{ $t("My Templates") }}
+      </b-button>
+      <b-button
+        @click="showSharedTemplates"
+        class="d-inline default-template-btn"
+        :class="{ 'shared-templates-selected': sharedTemplatesSelected }"
+        data-cy="shared-templates-tab"
+      >
+        {{ $t("Shared Templates") }}
+      </b-button>
+    </div>
+    <div class="d-flex justify-content-center cards-container">
+      <div
+        v-if="myTemplatesSelected"
+        class="d-flex justify-content-center p-0"
+        data-cy="my-templates-list"
+      >
+        <b-card-group>
+          <b-card-body
+            v-if="noMyTemplatesFound"
+            class="p-2 h-100 overflow-auto"
+          >
+            <h5>{{ $t("No templates found.") }}</h5>
+          </b-card-body>
+          <screen-template-card
+            v-else
+            v-for="template in myTemplatesData"
+            :key="template.id"
+            :template="template"
+            :screen-id="screenId"
+            :currentScreenPage="currentScreenPage"
+          />
+        </b-card-group>
+      </div>
+      <div
+        v-if="sharedTemplatesSelected"
+        class="d-flex justify-content-center p-0"
+        data-cy="shared-templates-list"
+      >
+        <b-card-group>
+          <b-card-body
+            v-if="noSharedTemplatesFound"
+            class="p-2 h-100 overflow-auto"
+          >
+            <h5>{{ $t("No templates found.") }}</h5>
+          </b-card-body>
+          <screen-template-card
+            v-else
+            v-for="template in sharedTemplatesData"
+            :key="template.id"
+            :template="template"
+            :screen-id="screenId"
+            :currentScreenPage="currentScreenPage"
+          />
+        </b-card-group>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script>
+  import ScreenTemplateCard from './ScreenTemplateCard.vue';
+
+  export default {
+    components: {
+      ScreenTemplateCard,
+    },
+    props: {
+      screenId: {
+        type: Number,
+        required: true,
+      },
+      currentScreenPage: {
+        type: Number,   
+        default: 0,
+      },
+      screenType: {
+        type: String,   
+        default: 'FORM',
+      }
+    },
+    data() {
+      return {
+        myTemplatesData: null,
+        sharedTemplatesData: null,
+        myTemplatesSelected: true,
+        sharedTemplatesSelected: false,
+        noMyTemplatesFound: false,
+        noSharedTemplatesFound: false,
+      };
+    },
+    methods: {
+      showMyTemplates() {
+        this.myTemplatesSelected = true;
+        this.sharedTemplatesSelected = false;
+        this.fetchMyTemplates();
+      },
+      fetchMyTemplates() {
+        ProcessMaker.apiClient
+        .get(
+          `templates/screen?is_public=0&screen_type=${this.screenType}`,
+        )
+        .then((response) => {
+          this.myTemplatesData = response.data.data;
+          if (this.myTemplatesData.length === 0 || this.myTemplatesData === undefined) {
+            this.noMyTemplatesFound = true;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      },
+      fetchSharedTemplates() {
+      ProcessMaker.apiClient
+        .get(
+          `templates/screen?is_public=1&screen_type=${this.screenType}`,
+        )
+        .then((response) => {
+          this.sharedTemplatesData = response.data.data;
+          if (this.sharedTemplatesData.length === 0 || this.sharedTemplatesData === undefined) {
+            this.noSharedTemplatesFound = true;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      },
+      showSharedTemplates() {
+        this.myTemplatesSelected = false;
+        this.sharedTemplatesSelected = true;
+        this.fetchSharedTemplates();
+      },
+    },
+    mounted() {
+      this.showMyTemplates();
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+.cards-container {
+  height: 100%;
+}
+
+  .panel-close-btn {
+    background-color: transparent;
+    border: none;
+    color: #596372;
+  }
+
+  .template-tabs {
+    padding: 4px;
+    background-color: #E9ECF1;
+    border-radius: 8px;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .default-template-btn {
+    width: 50%;
+    background-color: transparent;
+    border: none;
+    color: #596372;
+    font-size: 12px;
+    padding-left: 0px;
+    padding-right: 0px;
+    text-transform: none;
+  }
+
+  .my-templates-selected {
+    background-color: #ffffff;
+    color: #20242A;
+    border-radius: 8px;
+    border: none;
+    font-weight: 600;
+    font-size: 12px;
+    padding-left: 0px;
+    padding-right: 0px;
+    box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05), 0px 1px 0px -1px rgb(0, 0, 0, 0.05);
+  }
+
+  .shared-templates-selected {
+    background-color: #ffffff;
+    color: #20242A;
+    border-radius: 8px;
+    border: none;
+    font-weight: 600;
+    font-size: 12px;
+    padding-left: 0px;
+    padding-right: 0px;
+    box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05), 0px 1px 0px -1px rgb(0, 0, 0, 0.05);
+  }
+
+</style>