ayanova/src/components/duration-control.vue

@@ -1,44 +1,59 @@
 <template>
   <div>
+    <span class="v-label v-label--active theme--light">
+      {{ label }}
+    </span>
     <template v-if="!readonly">
-      <v-text-field
-        v-if="showDays"
-        :value="days"
-        @input="handleDaysInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="$ay.t('TimeSpanDays')"
-        type="number"
-        :data-cy="!!$ay.dev ? 'durationdays:' + testId : false"
-      ></v-text-field>
-      <v-text-field
-        :value="hours"
-        @input="handleHoursInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="$ay.t('TimeSpanHours')"
-        type="number"
-        :data-cy="!!$ay.dev ? 'durationhours:' + testId : false"
-      ></v-text-field>
-      <v-text-field
-        :value="minutes"
-        @input="handleMinutesInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="$ay.t('TimeSpanMinutes')"
-        type="number"
-        :data-cy="!!$ay.dev ? 'durationminutes:' + testId : false"
-      ></v-text-field>
-      <v-text-field
-        v-if="showSeconds"
-        :value="seconds"
-        @input="handleSecondsInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="$ay.t('TimeSpanSeconds')"
-        type="number"
-        :data-cy="!!$ay.dev ? 'durationseconds:' + testId : false"
-      ></v-text-field>
+      <v-row>
+        <!-- <v-col cols="12"> -->
+        <v-col cols="3">
+          <v-text-field
+            v-if="showDays"
+            :value="days"
+            @input="handleDaysInput"
+            :readonly="readonly"
+            :disabled="disabled"
+            :label="$ay.t('TimeSpanDays')"
+            type="number"
+            :data-cy="!!$ay.dev ? 'durationdays:' + testId : false"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="3">
+          <v-text-field
+            :value="hours"
+            @input="handleHoursInput"
+            :readonly="readonly"
+            :disabled="disabled"
+            :label="$ay.t('TimeSpanHours')"
+            type="number"
+            :data-cy="!!$ay.dev ? 'durationhours:' + testId : false"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="3">
+          <v-text-field
+            :value="minutes"
+            @input="handleMinutesInput"
+            :readonly="readonly"
+            :disabled="disabled"
+            :label="$ay.t('TimeSpanMinutes')"
+            type="number"
+            :data-cy="!!$ay.dev ? 'durationminutes:' + testId : false"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="3">
+          <v-text-field
+            v-if="showSeconds"
+            :value="seconds"
+            @input="handleSecondsInput"
+            :readonly="readonly"
+            :disabled="disabled"
+            :label="$ay.t('TimeSpanSeconds')"
+            type="number"
+            :data-cy="!!$ay.dev ? 'durationseconds:' + testId : false"
+          ></v-text-field>
+        </v-col>
+        <!-- </v-col> -->
+      </v-row>
     </template>
     <template v-else>
       <v-text-field
@@ -48,6 +63,9 @@
         disabled
       ></v-text-field>
     </template>
+    <p v-show="error" class="form__error v-messages theme--light error--text">
+      {{ error }}
+    </p>
   </div>
 </template>
 <script>

ayanova/src/main.js

@@ -45,6 +45,7 @@ import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
 import decimalControl from "./components/decimal-control.vue";
 import roleControl from "./components/role-control.vue";
+import durationControl from "./components/duration-control.vue";
 import errorControl from "./components/error-control.vue";
 import extensionsControl from "./components/extensions-control.vue";
 import reportSelectorControl from "./components/report-selector-control.vue";
@@ -186,6 +187,7 @@ Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
 Vue.component("gz-decimal", decimalControl);
 Vue.component("gz-role-picker", roleControl);
+Vue.component("gz-duration-picker", durationControl);
 Vue.component("gz-error", errorControl);
 Vue.component("gz-report-selector", reportSelectorControl);
 Vue.component("gz-report-viewer", reportViewerControl);

ayanova/src/views/home-notify-subscription.vue

@@ -40,8 +40,19 @@
               ></v-select>
             </v-col>
 
-
-            
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <gz-duration-picker
+                v-model="obj.advanceNotice"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                :label="$ay.t('NotifySubscriptionPendingSpan')"
+                :showSeconds="true"
+                ref="advanceNotice"
+                :data-cy="!!$ay.dev ? 'advanceNotice' : false"
+                :error-messages="form().serverErrors(this, 'advanceNotice')"
+                @input="fieldValueChanged('advanceNotice')"
+              ></gz-duration-picker>
+            </v-col>
           </v-row>
         </v-form>
       </v-col>
@@ -556,6 +567,7 @@ async function initForm(vm) {
 //
 async function fetchTranslatedText(vm) {
   await window.$gz.translation.cacheTranslations([
+    "NotifySubscriptionPendingSpan",
     "NotifySubscription",
     "NotifyDeliveryMethod",
     "NotifyEventType",