diff client/src/components/importconfiguration/ScheduledImports.vue @ 3281:439e1865a2d2

client: define stretches/imports: code cleanup / style improvements
author Markus Kottlaender <markus@intevation.de>
date Thu, 16 May 2019 09:52:32 +0200
parents 23f4fb9a205a
children 489e583498e3
line wrap: on
line diff
--- a/client/src/components/importconfiguration/ScheduledImports.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/ScheduledImports.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,12 +1,10 @@
 <template>
   <form @submit.prevent="save" class="w-100">
-    <div class="d-flex flex-row">
-      <div :key="1" class="flex-column mr-4">
-        <div class="flex-row text-left">
-          <small class="text-muted">
-            <translate>Email Notification</translate>
-          </small>
-        </div>
+    <div class="d-flex px-2">
+      <div :key="1" class="flex-column">
+        <small class="text-muted">
+          <translate>Email Notification</translate>
+        </small>
         <div class="flex-flex-row text-left">
           <toggle-button
             v-model="eMailNotification"
@@ -21,12 +19,14 @@
           />
         </div>
       </div>
-      <div :key="2" v-if="directImportAvailable" class="flex-column text-left">
-        <div>
-          <small class="text-muted">
-            <translate>Import via</translate>
-          </small>
-        </div>
+      <div
+        :key="2"
+        v-if="directImportAvailable"
+        class="flex-column text-left ml-3"
+      >
+        <small class="text-muted">
+          <translate>Import via</translate>
+        </small>
         <div>
           <!-- '#75c791' is the DEFAULT_COLOR_CHECKED
                   from vue-js-toggle-button as here both states are active -->
@@ -130,7 +130,7 @@
       :sortBy="sortBy"
     />
 
-    <div class="d-flex flex-row mt-3">
+    <div class="d-flex p-2">
       <template v-if="!directImport || !directImportAvailable">
         <div class="flex-column mr-4">
           <div class="flex-row text-left">
@@ -183,7 +183,7 @@
             <input
               style="width:120px;"
               v-model="trys"
-              class="mr-1 form-control"
+              class="mr-1 form-control form-control-sm"
               type="number"
             />
           </div>
@@ -198,33 +198,36 @@
             <input
               style="width:120px;"
               v-model="waitRetry"
-              class="ml-1 form-control"
+              class="ml-1 form-control form-control-sm"
             />
           </div>
         </div>
       </template>
     </div>
     <template v-if="!directImport || !directImportAvailable">
-      <div class="flex-column w-100 mr-2">
+      <div class="flex-column w-100 px-2 pb-3">
         <div class="flex-row text-left">
           <small class="text-muted">
             <translate>Schedule</translate>
           </small>
         </div>
         <div v-if="easyCron" class="text-left w-50">
-          <select :disabled="!scheduled" v-model="simple" class="form-control"
+          <select
+            :disabled="!scheduled"
+            v-model="simple"
+            class="form-control form-control-sm"
             ><option value="weekly"><translate>Weekly</translate></option>
             <option value="monthly"><translate>Monthly</translate> </option>
           </select>
         </div>
         <div v-if="!easyCron" class="text-left w-100">
           <div class="d-flex flex-row">
-            <h4 class="mt-auto mb-auto mr-2">{{ $options.EVERY }}</h4>
+            <div class="my-auto mr-2">{{ $options.EVERY }}</div>
             <select
               :disabled="!scheduled"
               style="width: 130px;"
               v-model="cronMode"
-              class="form-control"
+              class="form-control form-control-sm"
               @change="clearInputs"
             >
               <option :value="null"></option>
@@ -236,34 +239,38 @@
               >
             </select>
             <div v-if="cronMode == 'hour'" class="ml-1 d-flex flex-row">
-              <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.ON }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</div>
             </div>
             <div v-if="cronMode == 'day'" class="ml-1 d-flex flex-row">
-              <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.AT }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="hour"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div>
             </div>
             <div v-if="cronMode == 'week'" class="ml-1 d-flex flex-row">
-              <h4 class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</h4>
-              <select :disabled="!scheduled" v-model="day" class="form-control">
+              <div class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</div>
+              <select
+                :disabled="!scheduled"
+                v-model="day"
+                class="form-control form-control-sm"
+              >
                 <option
                   v-for="(option, key) in $options.DAYSOFWEEK"
                   :key="key"
@@ -271,56 +278,56 @@
                   >{{ option }}</option
                 >
               </select>
-              <h4 class="ml-1 mt-auto mb-auto">{{ $options.AT }}</h4>
+              <div class="ml-1 mt-auto mb-auto">{{ $options.AT }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="hour"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
             </div>
             <div v-if="cronMode == 'month'" class="ml-1 d-flex flex-row">
-              <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4>
+              <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="dayOfMonth"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.AT }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="hour"
-                class="cronfield ml-1 mr-2 form-control"
+                class="cronfield ml-1 mr-2 form-control form-control-sm"
                 type="number"
               />
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-2 form-control"
+                class="cronfield ml-1 mr-2 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div>
             </div>
             <div v-if="cronMode == 'year'" class="ml-1 d-flex flex-row">
-              <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4>
+              <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="dayOfMonth"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.OF }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.OF }}</div>
               <select
                 :disabled="!scheduled"
                 v-model="month"
-                class="ml-1 mr-1 form-control"
+                class="ml-1 mr-1 form-control form-control-sm"
               >
                 <option
                   v-for="(option, key) in $options.MONTHS"
@@ -329,28 +336,28 @@
                   >{{ option }}</option
                 >
               </select>
-              <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.ON }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="hour"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
             </div>
           </div>
-          <div class="mt-3 w-50 d-flex flex-row">
-            <h5 class="mt-auto mb-auto mr-2">
+          <div class="mt-3 w-50 d-flex">
+            <div class="my-auto mr-2">
               <translate>Cronstring</translate>
-            </h5>
+            </div>
             <input
               :disabled="!scheduled"
-              class="form-control"
+              class="form-control form-control-sm"
               v-model="cronString"
               type="text"
             />
@@ -358,14 +365,14 @@
         </div>
       </div>
     </template>
-    <div v-else class="d-flex flex-row text-left">
-      <div class="mt-3 mb-3 flex-column w-100">
+    <div v-else class="d-flex text-left px-2 pb-3">
+      <div class="flex-column w-100">
         <div class="custom-file">
           <input
             accept=".xml"
             type="file"
             @change="fileSelected"
-            class="custom-file-input"
+            class="custom-file-input custom-file-input-sm"
             id="uploadFile"
           />
           <label class="pointer custom-file-label" for="uploadFile">
@@ -374,27 +381,29 @@
         </div>
       </div>
     </div>
-    <div class="w-100 d-flex flex-row mt-3">
-      <button
-        @click="triggerManualImport"
-        type="button"
-        class="shadow-sm btn btn-outline-info mr-auto"
-        :disabled="!triggerActive || !isValid"
-      >
-        <font-awesome-icon class="fa-fw mr-2" fixed-width icon="play" />
-        <translate>Trigger import</translate>
-      </button>
-      <button
-        v-if="!directImport || !directImportAvailable"
-        :disabled="!isValid"
-        type="submit"
-        class="shadow-sm btn btn-info mr-3"
-      >
-        <translate>Save</translate>
-      </button>
-      <button :key="1" @click="back()" class="btn btn-warning">
+    <div class="d-flex justify-content-between p-2 border-top">
+      <button :key="1" @click="back()" class="btn btn-sm btn-warning">
         Back
       </button>
+      <div>
+        <button
+          @click="triggerManualImport"
+          type="button"
+          class="btn btn-sm btn-outline-info"
+          :disabled="!triggerActive || !isValid"
+        >
+          <font-awesome-icon fixed-width icon="play" />
+          <translate>Trigger import</translate>
+        </button>
+        <button
+          v-if="!directImport || !directImportAvailable"
+          :disabled="!isValid"
+          type="submit"
+          class="btn btn-sm btn-info ml-3"
+        >
+          <translate>Save</translate>
+        </button>
+      </div>
     </div>
   </form>
 </template>
@@ -488,10 +497,6 @@
     import_() {
       return this.currentSchedule.importType;
     },
-    dialogLabel() {
-      if (this.id) return this.$gettext("Import") + " " + this.id;
-      return this.$gettext("New Import");
-    },
     directImportAvailable() {
       switch (this.import_) {
         case this.$options.IMPORTTYPES.BOTTLENECK: