From cb583401a7cb7b0024edc592d92b65e73e9b9eaa Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 6 Jun 2024 15:58:09 -0400
Subject: [PATCH 1/2] FOUR-15681:Make UI changes to enable the mustache
 variable and save

---
 .../components/inspector/TaskDueIn.vue        | 119 ++++++++++++------
 1 file changed, 79 insertions(+), 40 deletions(-)

diff --git a/resources/js/processes/modeler/components/inspector/TaskDueIn.vue b/resources/js/processes/modeler/components/inspector/TaskDueIn.vue
index 333c72d305..2dc550285e 100644
--- a/resources/js/processes/modeler/components/inspector/TaskDueIn.vue
+++ b/resources/js/processes/modeler/components/inspector/TaskDueIn.vue
@@ -1,52 +1,91 @@
 <template>
-    <div class="form-group">
-        <label>{{ $t("Due In") }}</label>
-        <input class="form-control" :aria-label="$t('Enter the hours until this Task is overdue')"
-               type="number"
-               :placeholder="$t('72 hours')"
-               :value="dueInGetter"
-               @input="dueInSetter"
-               min="0"
-               v-on:keydown="dueInValidate">
-        <small class="form-text text-muted">{{ $t("Enter the hours until this Task is overdue") }}</small>
-    </div>
+  <div class="form-group">
+    <label>{{ $t("Due In") }}</label>
+    <b-form-checkbox
+      v-model="isCheckDueIn"
+      name="checkDueInVariable"
+    >
+      {{ $t("Use request Variable") }}
+    </b-form-checkbox>
+    <template v-if="!isCheckDueIn">
+      <input
+        class="form-control"
+        :aria-label="$t('Enter the hours until this Task is overdue')"
+        type="number"
+        :placeholder="$t('72 hours')"
+        :value="dueInGetter"
+        min="0"
+        @input="dueInSetter"
+        @keydown="dueInValidate"
+      >
+      <small class="form-text text-muted">{{ $t("Enter the hours until this Task is overdue") }}</small>
+    </template>
+    <template v-else>
+      <input
+        class="form-control"
+        type="text"
+        :placeholder="$t('Type')"
+        :value="dueInVariableGetter"
+        @input="dueInVariableSetter"
+        @keydown="dueInValidate"
+      >
+      <small class="form-text text-muted">{{ $t("This field supports mustache syntax to send requests variables.") }}</small>
+    </template>
+  </div>
 </template>
 
 <script>
-  export default {
-    props: ["value", "label", "helper", "property"],
-    computed: {
-      dueInGetter() {
-        return _.get(this.node, "dueIn");
+export default {
+  props: ["value", "label", "helper", "property"],
+  computed: {
+    dueInGetter() {
+      return _.get(this.node, "dueIn");
+    },
+    node() {
+      return this.$root.$children[0].$refs.modeler.highlightedNode.definition;
+    },
+    isCheckDueIn: {
+      get() {
+        return _.get(this.node, "isDueInVariable");
       },
-      node() {
-        return this.$root.$children[0].$refs.modeler.highlightedNode.definition;
+      set(val) {
+        this.clearDueIn(val);
+        this.$set(this.node, "isDueInVariable", val);
       },
     },
-    methods: {
-      dueInValidate(event) {
-        if (event.key === "-") {
-          event.preventDefault();
-          return;
-        }
-      },
-      /**
+    dueInVariableGetter() {
+      return _.get(this.node, "dueInVariable");
+    },
+  },
+  methods: {
+    dueInValidate(event) {
+      if (event.key === "-") {
+        event.preventDefault();
+      }
+    },
+    /**
        * Update due in property
        */
-      dueInSetter(event) {
-        const validValue = Math.abs(event.target.value * 1) || "";
-        if (!validValue) {
-          this.$delete(this.node, "dueIn");
-        } else {
-          this.$set(this.node, "dueIn", validValue);
-        }
-        this.$emit("input", this.value);
-        String(validValue) !== event.target.value
-          ? (event.target.value = validValue)
-          : null;
-      },
-    }
-  };
+    dueInSetter(event) {
+      const validValue = Math.abs(event.target.value * 1) || "";
+      if (!validValue) {
+        this.$delete(this.node, "dueIn");
+      } else {
+        this.$set(this.node, "dueIn", validValue);
+      }
+      this.$emit("input", this.value);
+      String(validValue) !== event.target.value
+        ? (event.target.value = validValue)
+        : null;
+    },
+    /**
+     * Updte due in with variable
+     */
+    dueInVariableSetter(event) {
+      this.$set(this.node, "dueInVariable", event.target.value);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

From d712fa4898b2828783bbde49734a5d5687235d2d Mon Sep 17 00:00:00 2001
From: Fabio Rodolfo Guachalla Blanco <frguachallab@gmail.com>
Date: Fri, 7 Jun 2024 13:26:53 -0400
Subject: [PATCH 2/2] Update TaskDueIn.vue

---
 .../js/processes/modeler/components/inspector/TaskDueIn.vue      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/processes/modeler/components/inspector/TaskDueIn.vue b/resources/js/processes/modeler/components/inspector/TaskDueIn.vue
index 2dc550285e..e45caedf25 100644
--- a/resources/js/processes/modeler/components/inspector/TaskDueIn.vue
+++ b/resources/js/processes/modeler/components/inspector/TaskDueIn.vue
@@ -49,7 +49,6 @@ export default {
         return _.get(this.node, "isDueInVariable");
       },
       set(val) {
-        this.clearDueIn(val);
         this.$set(this.node, "isDueInVariable", val);
       },
     },