@processmaker/screen-builder 3.0.1 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -57,7 +57,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.60.0",
+    "@processmaker/vue-form-elements": "0.61.0",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -116,7 +116,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.60.0",
+    "@processmaker/vue-form-elements": "0.61.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/assets/Shape.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2837 6.5L9.99519 14M6.00481 14L5.71635 6.5M14.023 3.82547C14.308 3.86851 14.592 3.91456 14.875 3.96358M14.023 3.82547L13.1332 15.3938C13.058 16.3707 12.2434 17.125 11.2637 17.125H4.73631C3.75655 17.125 2.94198 16.3707 2.86683 15.3938L1.97696 3.82547M14.023 3.82547C13.0677 3.6812 12.1013 3.57071 11.125 3.49527M1.125 3.96358C1.40798 3.91456 1.69198 3.86851 1.97696 3.82547M1.97696 3.82547C2.93231 3.6812 3.89874 3.57071 4.875 3.49527M11.125 3.49527V2.73182C11.125 1.74902 10.3661 0.928526 9.38382 0.897103C8.92435 0.882405 8.46304 0.875 8 0.875C7.53696 0.875 7.07565 0.882405 6.61618 0.897103C5.63388 0.928526 4.875 1.74902 4.875 2.73182V3.49527M11.125 3.49527C10.0938 3.41558 9.05164 3.375 8 3.375C6.94836 3.375 5.9062 3.41558 4.875 3.49527" stroke="#596372" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/pencil-square.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0514 3.73889L15.4576 2.33265C16.0678 1.72245 17.0572 1.72245 17.6674 2.33265C18.2775 2.94284 18.2775 3.93216 17.6674 4.54235L8.81849 13.3912C8.37792 13.8318 7.83453 14.1556 7.23741 14.3335L5 15L5.66648 12.7626C5.84435 12.1655 6.1682 11.6221 6.60877 11.1815L14.0514 3.73889ZM14.0514 3.73889L16.25 5.93749M15 11.6667V15.625C15 16.6605 14.1605 17.5 13.125 17.5H4.375C3.33947 17.5 2.5 16.6605 2.5 15.625V6.87499C2.5 5.83946 3.33947 4.99999 4.375 4.99999H8.33333" stroke="#596372" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/ScreenTemplateCard.vue

@@ -3,13 +3,17 @@
     <b-card
       img-top
       class="mb-2 screenbuilder-template-card"
-      @click="showDetails"
+      @click="toggleDetails"
     >
       <div
         v-if="thumbnail"
         class="thumbnail-container thumbnail-image-container"
       >
-        <img class="thumbnail-image" :src="thumbnail" :alt="`${template.name}`"/>
+        <img
+          class="thumbnail-image"
+          :src="thumbnail"
+          :alt="`${template.name}`"
+        />
       </div>
       <div
         v-else
@@ -17,25 +21,31 @@
       >
         <i class="p-4 fas fa-palette thumbnail-icon"></i>
       </div>
-      <hr class="card-divider">
+      <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>
+          <span class="template-description d-block">{{
+            truncateText(template.description, 100)
+          }}</span>
         </div>
-        <b-collapse v-model="showApplyOptions">
-            <b-form-checkbox-group
-              class="apply-options-group p-2"
-              v-model="selected"
-              name="apply-options"
-            >
+        <b-collapse v-model="isApplyOptionsActive">
+          <b-form-checkbox-group
+            v-model="selected"
+            class="apply-options-group p-2"
+            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
+                  class="icon-container"
+                  :class="{ selected: selected.includes(option.value) }"
+                  @click.stop="toggleOption(option.value)"
+                >
                   <div v-if="option.value === 'CSS'">
                     <css-icon />
                   </div>
@@ -43,135 +53,178 @@
                     <i :class="option.icon"></i>
                   </div>
                 </div>
-                <b-form-checkbox
-                  class="option-checkbox"
-                  :value="option.value"
-                >
+                <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-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.stop="onCancel"
+            >
+              {{ $t("Cancel") }}
+            </button>
+            <button
+              :disabled="!selected.length"
+              type="button"
+              size="sm"
+              class="btn btn-primary ml-2 card-btn"
+              @click.stop="applyTemplate"
+            >
+              {{ $t("Apply") }}
+            </button>
+          </div>
         </b-collapse>
       </b-card-body>
     </b-card>
-    
   </div>
 </template>
 
 <script>
-import CssIcon from './CssIcon.vue';
+import CssIcon from "./CssIcon.vue";
 
 export default {
   components: {
-    CssIcon,
+    CssIcon
   },
   mixins: [],
-  props: ['template', 'screenId', 'currentScreenPage'],
+  props: {
+    template: {
+      type: Object,
+      required: true
+    },
+    screenId: {
+      type: Number,
+      required: true
+    },
+    currentScreenPage: {
+      type: Number,
+      default: 0
+    },
+    activeTemplateId: {
+      type: Number,
+      default: 0
+    }
+  },
   data() {
     return {
-      showApplyOptions: false,
+      isApplyOptionsActive: false,
       selected: [],
       applyOptions: [
-        { text: 'CSS', value: 'CSS' },
-        { text: 'Fields', value: 'Fields', icon: 'fp-fields-icon' },
-        { text: 'Layout', value: 'Layout', icon: 'fp-layout-icon' },
-      ],
+        { 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) {
+      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
+      }
+      if (this.template?.template_media?.thumbnail?.url) {
+        return this.template?.template_media.thumbnail.url;
       }
       return null;
-    },
+    }
   },
-  mounted() {
+  watch: {
+    activeTemplateId(newVal) {
+      this.isApplyOptionsActive = newVal === this.template.id;
+    }
   },
   methods: {
-    showDetails() {
-      this.showApplyOptions = !this.showApplyOptions;
+    toggleDetails() {
+      this.$emit("toggle-active", this.template.id);
     },
     applyTemplate() {
       ProcessMaker.apiClient
         .post(`/template/screen/${this.template.id}/apply`, {
           screenId: this.screenId,
           templateOptions: this.selected,
-          currentScreenPage: this.currentScreenPage,
+          currentScreenPage: this.currentScreenPage
         })
-        .then((response) => {
-          ProcessMaker.alert(this.$t("The template options have been applied."), "success");
+        .then(() => {
+          ProcessMaker.alert(
+            this.$t("The template options have been applied."),
+            "success"
+          );
           window.location.reload();
         })
         .catch((error) => {
-          const errorMessage = error.response?.data?.message  || error.response?.data?.error || error.message;
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.error ||
+            error.message;
           ProcessMaker.alert(errorMessage, "danger");
         });
     },
     onCancel() {
-      this.showApplyOptions = false;
+      this.isApplyOptionsActive = false;
       this.selected = [];
+    },
+    toggleOption(value) {
+      const index = this.selected.indexOf(value);
+      if (index === -1) {
+        this.selected.push(value);
+      } else {
+        this.selected.splice(index, 1);
+      }
+    },
+    truncateText(text, limit) {
+      if (!text) return "";
+      return text.length > limit ? `${text.substring(0, limit)}...` : text;
     }
-  },
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-
-.fp-fields-icon, .fp-layout-icon {
-  color: #EAF2FF;
+.fp-fields-icon,
+.fp-layout-icon {
+  color: #eaf2ff;
 }
 
 .screenbuilder-template-card {
   width: 225px;
   margin: 8px;
-  border: 1px solid #D7DDE5;
+  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);
+  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;
+  background-color: #d7dde5;
 }
 
 .thumbnail-container:hover,
 .thumbnail-container.active {
-  border-color: #1572C2;
+  border-color: #1572c2;
   cursor: pointer;
 }
 
 .thumbnail-image {
   width: 100%;
+  height: 100%;
+  object-fit: cover;
   border-radius: 8px 8px 0px 0px;
 }
 
 .thumbnail-image-container {
+  width: 100%;
+  height: 107px;
   border-radius: 8px;
   padding: 0px !important;
   background-size: contain;
@@ -180,7 +233,7 @@ export default {
 }
 
 .thumbnail-icon {
-  color: #CDDDEE;
+  color: #cdddee;
   font-size: 59px;
 }
 
@@ -192,14 +245,14 @@ export default {
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
-  color: #2F343B;
+  color: #2f343b;
 }
 
 .template-description {
   font-size: 12.5px;
   font-weight: 400;
   line-height: 18px;
-  color: #4E5663;
+  color: #4e5663;
 }
 
 .apply-options-group {
@@ -214,7 +267,7 @@ export default {
 }
 
 .apply-options-container {
-    padding: 5px;
+  padding: 5px;
 }
 
 .apply-options-group i {
@@ -228,7 +281,7 @@ export default {
   justify-content: center;
   width: 66px;
   height: 76px;
-  border: 0.7px solid #D7DDE5;
+  border: 0.7px solid #d7dde5;
   border-radius: 8px;
   margin-bottom: 10px;
 }
@@ -239,7 +292,7 @@ export default {
 
 .bottom-card-divider {
   width: 90%;
-  background-color: #E9ECF1;
+  background-color: #e9ecf1;
   margin-top: 0px;
 }
 
@@ -253,5 +306,4 @@ export default {
   border-radius: 8px;
   padding: 5px 10px;
 }
-
-</style>
+</style>