ayanova/src/components/duration-control.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
+    <span class="v-label v-label--active theme--light">
+      {{ label }}
+    </span>
     <template v-if="!readonly">
+      <v-row>
+        <!-- <v-col cols="12"> -->
+        <v-col cols="3">
           <v-text-field
             v-if="showDays"
             :value="days"
@@ -11,6 +17,8 @@
             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"
@@ -20,6 +28,8 @@
             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"
@@ -29,6 +39,8 @@
             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"
@@ -39,6 +51,9 @@
             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",