@processmaker/screen-builder 3.0.1 → 3.0.3

package/src/components/ScreenTemplates.vue

@@ -1,32 +1,29 @@
 <template>
-  <div
-    class="screen-templates-container"
-    data-cy="screen-templates-section"
-  >
+  <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"
+        @click="$emit('close-templates-panel')"
       >
         <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"
+        @click="showMyTemplates"
       >
         {{ $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"
+        @click="showSharedTemplates"
       >
         {{ $t("Shared Templates") }}
       </b-button>
@@ -38,6 +35,9 @@
         data-cy="my-templates-list"
       >
         <b-card-group>
+          <b-card-body v-if="loading" class="d-flex justify-content-center">
+            <b-spinner variant="primary" label="Spinning"></b-spinner>
+          </b-card-body>
           <b-card-body
             v-if="noMyTemplatesFound"
             class="p-2 h-100 overflow-auto"
@@ -45,12 +45,14 @@
             <h5>{{ $t("No templates found.") }}</h5>
           </b-card-body>
           <screen-template-card
-            v-else
             v-for="template in myTemplatesData"
+            v-else
             :key="template.id"
             :template="template"
             :screen-id="screenId"
-            :currentScreenPage="currentScreenPage"
+            :current-screen-page="currentScreenPage"
+            :active-template-id="activeTemplateId"
+            @toggle-active="setActiveTemplate"
           />
         </b-card-group>
       </div>
@@ -60,6 +62,9 @@
         data-cy="shared-templates-list"
       >
         <b-card-group>
+          <b-card-body v-if="loading" class="d-flex justify-content-center">
+            <b-spinner variant="primary" label="Spinning"></b-spinner>
+          </b-card-body>
           <b-card-body
             v-if="noSharedTemplatesFound"
             class="p-2 h-100 overflow-auto"
@@ -67,96 +72,116 @@
             <h5>{{ $t("No templates found.") }}</h5>
           </b-card-body>
           <screen-template-card
-            v-else
             v-for="template in sharedTemplatesData"
+            v-else
             :key="template.id"
             :template="template"
             :screen-id="screenId"
-            :currentScreenPage="currentScreenPage"
+            :current-screen-page="currentScreenPage"
+            :active-template-id="activeTemplateId"
+            @toggle-active="setActiveTemplate"
           />
         </b-card-group>
       </div>
     </div>
   </div>
 </template>
-  
+
 <script>
-  import ScreenTemplateCard from './ScreenTemplateCard.vue';
+import ScreenTemplateCard from "./ScreenTemplateCard.vue";
 
-  export default {
-    components: {
-      ScreenTemplateCard,
+export default {
+  components: {
+    ScreenTemplateCard
+  },
+  props: {
+    screenId: {
+      type: Number,
+      required: true
+    },
+    currentScreenPage: {
+      type: Number,
+      default: 0
     },
-    props: {
-      screenId: {
-        type: Number,
-        required: true,
-      },
-      currentScreenPage: {
-        type: Number,   
-        default: 0,
-      },
-      screenType: {
-        type: String,   
-        default: 'FORM',
-      }
+    screenType: {
+      type: String,
+      default: "FORM"
+    }
+  },
+  data() {
+    return {
+      myTemplatesData: null,
+      sharedTemplatesData: null,
+      myTemplatesSelected: true,
+      sharedTemplatesSelected: false,
+      noMyTemplatesFound: false,
+      noSharedTemplatesFound: false,
+      activeTemplateId: null,
+      loading: false
+    };
+  },
+  mounted() {
+    this.showMyTemplates();
+  },
+  methods: {
+    setActiveTemplate(id) {
+      // If the same template that is already active is clicked, it deactivates it.
+      this.activeTemplateId = this.activeTemplateId === id ? null : id;
     },
-    data() {
-      return {
-        myTemplatesData: null,
-        sharedTemplatesData: null,
-        myTemplatesSelected: true,
-        sharedTemplatesSelected: false,
-        noMyTemplatesFound: false,
-        noSharedTemplatesFound: false,
-      };
+    showMyTemplates() {
+      this.myTemplatesSelected = true;
+      this.sharedTemplatesSelected = false;
+      this.activeTemplateId = null;
+      this.fetchMyTemplates();
     },
-    methods: {
-      showMyTemplates() {
-        this.myTemplatesSelected = true;
-        this.sharedTemplatesSelected = false;
-        this.fetchMyTemplates();
-      },
-      fetchMyTemplates() {
-        ProcessMaker.apiClient
-        .get(
-          `templates/screen?is_public=0&screen_type=${this.screenType}`,
-        )
+    fetchMyTemplates() {
+      this.loading = true;
+      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) {
+          if (
+            this.myTemplatesData.length === 0 ||
+            this.myTemplatesData === undefined
+          ) {
             this.noMyTemplatesFound = true;
           }
         })
         .catch((error) => {
           console.error(error);
+        })
+        .finally(() => {
+          this.loading = false;
         });
-      },
-      fetchSharedTemplates() {
+    },
+    fetchSharedTemplates() {
+      this.loading = true;
       ProcessMaker.apiClient
-        .get(
-          `templates/screen?is_public=1&screen_type=${this.screenType}`,
-        )
+        .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) {
+          if (
+            this.sharedTemplatesData.length === 0 ||
+            this.sharedTemplatesData === undefined
+          ) {
             this.noSharedTemplatesFound = true;
           }
         })
         .catch((error) => {
           console.error(error);
+        })
+        .finally(() => {
+          this.loading = false;
         });
-      },
-      showSharedTemplates() {
-        this.myTemplatesSelected = false;
-        this.sharedTemplatesSelected = true;
-        this.fetchSharedTemplates();
-      },
     },
-    mounted() {
-      this.showMyTemplates();
+    showSharedTemplates() {
+      this.myTemplatesSelected = false;
+      this.sharedTemplatesSelected = true;
+      this.activeTemplateId = null;
+      this.fetchSharedTemplates();
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -164,53 +189,56 @@
   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;
-  }
+.panel-close-btn {
+  background-color: transparent;
+  border: none;
+  color: #596372;
+}
 
-  .default-template-btn {
-    width: 50%;
-    background-color: transparent;
-    border: none;
-    color: #596372;
-    font-size: 12px;
-    padding-left: 0px;
-    padding-right: 0px;
-    text-transform: none;
-  }
+.template-tabs {
+  padding: 4px;
+  background-color: #e9ecf1;
+  border-radius: 8px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 
-  .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);
-  }
+.default-template-btn {
+  width: 50%;
+  background-color: transparent;
+  border: none;
+  color: #596372;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  text-transform: none;
+}
 
-  .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);
-  }
+.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>

package/src/components/accordions.js

@@ -58,7 +58,7 @@ export default [
   },
   {
     name: 'Design',
-    fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width'],
+    fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width', 'designerMode', 'bgcolormodern'],
     open: false,
   },
   {

package/src/components/editor/loop.vue

@@ -27,6 +27,15 @@
                 class="mr-2 ml-1"
               />
               {{ element.config.name || $t("Variable Name") }}
+              <b-badge
+                v-if="isInClipboard(items[index])"
+                data-cy="copied-badge"
+                class="m-2 custom-badge"
+                pill
+              >
+                <i class="far fa-check-circle"></i>
+                <span class="pl-2">{{ $t('Copied')}}</span>
+              </b-badge>
               <div class="ml-auto">
                 <clipboard-button
                   :index="index"
@@ -91,6 +100,15 @@
                 class="mr-2 ml-1"
               />
               {{ element.config.name || $t("Variable Name") }}
+              <b-badge
+                v-if="isInClipboard(items[index])"
+                data-cy="copied-badge"
+                class="m-2 custom-badge"
+                pill
+              >
+                <i class="far fa-check-circle"></i>
+                <span class="pl-2">{{ $t('Copied')}}</span>
+              </b-badge>
               <div class="ml-auto">
                 <clipboard-button
                   :index="index"
@@ -334,4 +352,12 @@ export default {
     box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
   }
 }
+.custom-badge {
+  background-color: #D1F4D7 !important;
+  color: #06723A !important;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 14px;
+}
 </style>

package/src/components/editor/multi-column.vue

@@ -42,6 +42,15 @@
                       class="mr-2 ml-1"
                     />
                     {{ element.config.name || $t("Variable Name") }}
+                    <b-badge
+                      v-if="isInClipboard(element)"
+                      data-cy="copied-badge"
+                      class="m-2 custom-badge"
+                      pill
+                    >
+                      <i class="far fa-check-circle"></i>
+                      <span class="pl-2">{{ $t('Copied')}}</span>
+                    </b-badge>
                     <div class="ml-auto">
                       <clipboard-button
                         :index="index"
@@ -108,6 +117,15 @@
                       class="mr-2 ml-1"
                     />
                     {{ element.config.name || $t("Variable Name") }}
+                    <b-badge
+                      v-if="isInClipboard(element)"
+                      data-cy="copied-badge"
+                      class="m-2 custom-badge"
+                      pill
+                    >
+                      <i class="far fa-check-circle"></i>
+                      <span class="pl-2">{{ $t('Copied')}}</span>
+                    </b-badge>
                     <div class="ml-auto">
                       <clipboard-button
                         :index="index"
@@ -375,4 +393,12 @@ export default {
     box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
   }
 }
+.custom-badge {
+  background-color: #D1F4D7 !important;
+  color: #06723A !important;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 14px;
+}
 </style>

package/src/components/inspector/collection-data-source.vue

@@ -73,7 +73,6 @@
     "variableStore",
     "dataSelectionOptions",
     "singleField"
-
   ];
   export default {
     components: {
@@ -195,6 +194,9 @@
         },
         deep: true
       },
+      dataSelectionOptions() {
+        this.singleField = null;
+      }
     },
   };
   </script>

package/src/components/inspector/collection-designer-mode.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+      <div>
+        <label for="collectiondesigner">{{ $t("Table Style") }}</label>
+        <b-form-select
+          id="collectiondesigner"
+          v-model="designerOptions"
+          :options="designerListOptions"
+          data-cy="inspector-collection-designer-model"
+        />
+      </div>
+    </div>
+  </template>
+  <script>
+
+  import { cloneDeep } from "lodash";
+
+  const CONFIG_FIELDS = [
+    "designerOptions"
+  ];
+  export default {
+    props: ["value", "screenType"],
+    data() {
+      return {
+        fields: [],
+        designerOptions: "Classic",
+        designerListOptions: [
+        {
+          text: this.$t('Classic'),
+          value: 'Classic',
+        },
+        {
+          text: this.$t('Modern'),
+          value: 'Modern',
+        },
+      ],
+      };
+    },
+    mounted () {
+      this.callBuilder(this.designerOptions);
+    },
+    computed: {
+      options() {
+        return Object.fromEntries(
+          CONFIG_FIELDS.map((field) => [field, this[field]])
+        );
+      }
+    },
+    watch: {
+      value: {
+        handler(value) {
+          if (!value) {
+            return;
+          }
+          CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
+        },
+        immediate: true
+      },
+      options: {
+        handler() {
+          this.$emit("input", this.options);
+          this.callBuilder(this.options.designerOptions);
+        },
+        deep: true
+      },
+    },
+    methods: {
+      callBuilder(option) {
+        this.$root.$emit("style-mode", option);
+      }
+    }
+  };
+  </script>

package/src/components/inspector/color-select-modern.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="form-group">
+    <div>
+      <b-button-toolbar>
+        <b-button-group size="lg">
+          <b-button
+            v-for="option in options"
+            :key="option.value"
+            size="sm"
+            variant="outline-light"
+            class="color-option"
+            :class="['bg-' + parsedColor(option.value)]"
+            :title="option.content"
+          >
+            <i
+              class="fas fa-check"
+              :class="[
+                option.value === value
+                  ? 'text-light'
+                  : 'text-' + parsedColor(option.value)
+              ]"
+              @click="selectColor(option.value)"
+            />
+          </b-button>
+        </b-button-group>
+      </b-button-toolbar>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    /**
+     * The label for the color select
+     */
+    label: {},
+    /**
+     * The value of the color select. eg. `alert alert-success`
+     */
+    value: {},
+    /**
+     * The helper text for the color select (not visible yet)
+     */
+     helper: {},
+    /**
+     * The options for the color select
+     */
+    options: {},
+  },
+  data() {
+    return {
+      newColor: ""
+    };
+  },
+  computed: {
+    hasColor() {
+      return Boolean(this.value);
+    }
+  },
+  methods: {
+    emitChanges(value) {
+      this.$emit("input", value);
+      this.$emit("update-state");
+    },
+    checkColor() {
+      if (this.hasColor) {
+        this.emitChanges("");
+      }
+    },
+    selectColor(color) {
+      this.emitChanges(color);
+    },
+    parsedColor(color) {
+      return color.split("-")[1];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.image-preview {
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  height: 4em;
+  text-align: center;
+  overflow: hidden;
+}
+.color-option {
+  left: -8px;
+  border-radius: 4px;
+  width: 48px;
+  height: 48px;
+  margin-right: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  }
+</style>

package/src/components/inspector/encrypted-config.vue

@@ -13,7 +13,7 @@
       <div v-if="settings.encrypted">
         <select-user-group
           :key="componentKey"
-          :label="$t('Users/Groups to View')"
+          :label="$t('Users/Groups to View Encrypted Fields')"
           v-model="settings.assignments"
           :multiple="true"
           @input="emitChanges"

package/src/components/inspector/index.js

@@ -2,7 +2,10 @@ export { default as CollectionSelectList } from "./collection-select-list.vue";
 export { default as CollectionRecordsList } from "./collection-records-list.vue";
 export { default as collectionDataSource } from "./collection-data-source.vue";
 export { default as CollectionDisplayMode } from "./collection-display-mode.vue";
+export { default as CollectionDesignerMode } from "./collection-designer-mode.vue";
 export { default as ColorSelect } from "./color-select.vue";
+export { default as ColorSelectRecord } from "./color-select.vue";
+export { default as ColorSelectModern } from "./color-select-modern.vue";
 export { default as ColumnSetup } from "./column-setup.vue";
 export { default as ContainerColumns } from "./container-columns.vue";
 export { default as DataMapping } from "./data-mapping.vue";