@processmaker/screen-builder 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "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.1",
     "@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.1",
     "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,33 @@
       >
         <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-name d-block pt-1">{{
+            truncateText(template.name, 45)
+          }}</span>
+          <span class="template-description d-block">{{
+            truncateText(template.description, 60)
+          }}</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 +55,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 +235,7 @@ export default {
 }
 
 .thumbnail-icon {
-  color: #CDDDEE;
+  color: #cdddee;
   font-size: 59px;
 }
 
@@ -192,14 +247,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 +269,7 @@ export default {
 }
 
 .apply-options-container {
-    padding: 5px;
+  padding: 5px;
 }
 
 .apply-options-group i {
@@ -228,7 +283,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 +294,7 @@ export default {
 
 .bottom-card-divider {
   width: 90%;
-  background-color: #E9ECF1;
+  background-color: #e9ecf1;
   margin-top: 0px;
 }
 
@@ -253,5 +308,4 @@ export default {
   border-radius: 8px;
   padding: 5px 10px;
 }
-
-</style>
+</style>