@processmaker/screen-builder 3.0.1 → 3.0.2

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/inspector/collection-data-source.vue

@@ -73,7 +73,6 @@
     "variableStore",
     "dataSelectionOptions",
     "singleField"
-
   ];
   export default {
     components: {

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

@@ -0,0 +1,65 @@
+<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',
+        },
+      ],
+      };
+    },
+    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.$root.$emit("style-mode", this.options.designerOptions);
+        },
+        deep: true
+      },
+    },
+  };
+  </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/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";

package/src/components/renderer/file-upload.vue

@@ -61,32 +61,34 @@
           </ul>
         </template>
       </uploader-list>
-      <uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file">
+      <uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file" 
+        :class="this.files.length > 0 && !this.multipleUpload ? 'cf-single-file-upload' : ''"
+      > 
         <b-button
           v-if="!required"
           @click="cfSkipFileUpload"
-          class="btn cf-skip-btn mb-3"
+          class="btn cf-skip-btn"
+          :class="showMultiUploadButton ? 'mb-3' : ''"
         >
           <i class="fas fa-arrow-left mr-2"></i> {{ $t('Skip Uploading') }}
         </b-button>
-
         <uploader-btn
           :attrs="nativeButtonAttrs"
           :class="[
             { disabled: disabled }, 
             'btn',
-            showSingleUploadButton ? 'cf-single-upload-btn' : (showMultiUploadButton ? 'cf-multi-upload-btn' : '')
+            showSingleUploadButton || files.length === 0 && !showMultiUploadButton ? 'cf-single-upload-btn mt-3' : (showMultiUploadButton ? 'cf-multi-upload-btn' : '')
           ]"
           tabindex="0"
           v-on:keyup.native="browse"
           :aria-label="$attrs['aria-label']"
         >
-          <span v-if="showSingleUploadButton"><i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}</span>
+          <span v-if="showSingleUploadButton || files.length === 0 && !showMultiUploadButton"><i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}</span>
           <span v-else-if="showMultiUploadButton"><i class="fas fa-plus mr-2"></i> {{ $t('Add another') }}</span>
         </uploader-btn>
 
-        <b-button v-if="files.length !== 0" class="cf-file-upload-submit" variant="primary" @click="emitConversationalFormSubmit" :aria-label="$t('Submit')">
-          <i class="fas fa-paper-plane"></i> <span v-if="files.length !== 0 && showMultiUploadButton">{{ $t('Send All') }}</span>
+        <b-button v-if="files.length !== 0" class="cf-file-upload-submit" :class="!showMultiUploadButton ? 'w-100 mt-3' : ''" variant="primary" @click="emitConversationalFormSubmit" :aria-label="$t('Submit')">
+          <i class="fas fa-paper-plane"></i> <span v-if="showMultiUploadButton">{{ $t('Send All') }}</span> <span v-else>{{ $t('Submit File/Photo') }}</span>
         </b-button>
       </uploader-drop>
       
@@ -270,7 +272,7 @@ export default {
       return this.screenType === 'conversational-forms';
     },
     showSingleUploadButton() {
-      return this.files.length === 0 || !this.multipleUpload;
+      return this.files.length === 0 && !this.multipleUpload;
     },
     showMultiUploadButton() {
       return this.files.length !== 0 && this.multipleUpload;
@@ -402,7 +404,6 @@ export default {
     },
     setRequestFiles() {
       _.set(window, `PM4ConfigOverrides.requestFiles["${this.fileDataName}"]`, this.files);
-      console.log("!!!!!! SET REQUEST FILES", this.valueToSend());
       this.$emit('input', this.valueToSend());
     },
     valueToSend() {
@@ -491,7 +492,7 @@ export default {
         }
         this.$delete(this.nativeFiles, id);
       }
-
+      this.$emit('file-deleted', this.files);
     },
     addToFiles(fileInfo) {
       if (this.multipleUpload) {
@@ -528,6 +529,19 @@ export default {
         this.prefix = parent.loopContext + '.';
       }
     },
+    validateFile(file, acceptFiles){
+      const extensions = acceptFiles.filter(item => item.startsWith('.'));
+      const mimeTypes = acceptFiles.filter(item => !item.startsWith('.'));
+      const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
+      const fileType = file.fileType;
+      const isExtensionValid = extensions.includes(fileExtension);
+      const isMimeTypeValid = mimeTypes.includes(fileType);
+
+      if (!isExtensionValid && !isMimeTypeValid) {
+        return false;
+      }
+      return true;
+    },
     addFile(file) {
       if (this.disabled) {
         file.ignored = true;
@@ -544,7 +558,7 @@ export default {
 
       if (this.filesAccept) {
         file.ignored = true;
-        if (this.filesAccept.indexOf(file.fileType) !== -1) {
+        if (this.validateFile(file, this.filesAccept)) {
           file.ignored = false;
         }
         if (file.ignored) {
@@ -612,7 +626,6 @@ export default {
         this.$set(this.nativeFiles, id, rootFile);
         this.addToFiles(fileInfo);
       } else {
-        console.log("!!!!!! FILE UPLOADED", name);
         this.$emit('input', name);
       }
     },
@@ -750,4 +763,8 @@ export default {
   box-shadow: 0px 12px 24px -12px #0000001F;
 }
 
+.form-control-file.cf-single-file-upload label {
+  display: none;
+}
+
 </style>