vue migration edit form changes

ayanova/src/components/date-time-control.vue

@@ -2,7 +2,7 @@
   <div>
     <v-row row wrap v-if="!readonly">
       <v-col xs6>
-        <v-dialog v-model="dlgdate" persistent lazy full-width width="290px">
+        <v-dialog v-model="dlgdate" persistent width="290px">
           <template v-slot:activator="{ on }">
             <v-text-field
               v-on="on"
@@ -22,7 +22,7 @@
         </v-dialog>
       </v-col>
       <v-col xs6>
-        <v-dialog v-model="dlgtime" persistent lazy full-width width="290px">
+        <v-dialog v-model="dlgtime" persistent width="290px">
           <template v-slot:activator="{ on }">
             <v-text-field
               v-on="on"

ayanova/src/views/inventory-widget-edit.vue

@@ -1,181 +1,182 @@
 <template>
-  <v-row v-if="this.formState.ready">
-    <v-col>
-      <v-form ref="form">
-        <v-row align-center justify-left row wrap>
-          <v-col cols="12" mt-1 mb-2>
-            <v-alert
-              ref="errorbox"
-              v-show="formState.errorBoxMessage"
-              color="error"
-              icon="fa-exclamation-circle "
-              value="true"
-              transition="scale-transition"
-              class="multi-line"
-              outlined
-              >{{ formState.errorBoxMessage }}</v-alert
-            >
-          </v-col>
-          <v-col cols="12" sm6 lg4 xl3 px-2>
-            <v-text-field
-              v-model="obj.name"
-              :readonly="this.formState.readOnly"
-              clearable
-              @click:clear="onChange('name')"
-              :counter="255"
-              :label="lt('WidgetName')"
-              :rules="[
-                form().max255(this, 'name'),
-                form().required(this, 'name')
-              ]"
-              :error-messages="form().serverErrors(this, 'name')"
-              ref="name"
-              @change="onChange('name')"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" sm6 lg4 xl3 px-2>
-            <v-text-field
-              v-model="obj.serial"
-              :readonly="this.formState.readOnly"
-              clearable
-              @click:clear="onChange('serial')"
-              :counter="10"
-              :label="lt('WidgetSerial')"
-              :rules="[form().maxLength(this, 'serial', 10)]"
-              :error-messages="form().serverErrors(this, 'serial')"
-              ref="serial"
-              @change="onChange('serial')"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" sm6 lg4 xl3 px-2>
-            <v-text-field
-              v-model="obj.count"
-              :readonly="this.formState.readOnly"
-              clearable
-              @click:clear="onChange('count')"
-              :counter="10"
-              :label="lt('WidgetCount')"
-              ref="count"
-              :rules="[
-                form().integerValid(this, 'count'),
-                form().required(this, 'count')
-              ]"
-              :error-messages="form().serverErrors(this, 'count')"
-              required
-              @change="onChange('count')"
-              type="number"
-            ></v-text-field>
-          </v-col>
+  <v-container>
+    <v-row v-if="this.formState.ready">
+      <v-col>
+        <v-form ref="form">
+          <v-row>
+            <v-col cols="12" mt-1 mb-2>
+              <v-alert
+                ref="errorbox"
+                v-show="formState.errorBoxMessage"
+                color="error"
+                icon="fa-exclamation-circle "
+                :value="true"
+                transition="scale-transition"
+                class="multi-line"
+                outlined
+                >{{ formState.errorBoxMessage }}</v-alert
+              >
+            </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                v-model="obj.name"
+                :readonly="this.formState.readOnly"
+                clearable
+                @click:clear="onChange('name')"
+                :counter="255"
+                :label="lt('WidgetName')"
+                :rules="[
+                  form().max255(this, 'name'),
+                  form().required(this, 'name')
+                ]"
+                :error-messages="form().serverErrors(this, 'name')"
+                ref="name"
+                @change="onChange('name')"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                v-model="obj.serial"
+                :readonly="this.formState.readOnly"
+                clearable
+                @click:clear="onChange('serial')"
+                :counter="10"
+                :label="lt('WidgetSerial')"
+                :rules="[form().maxLength(this, 'serial', 10)]"
+                :error-messages="form().serverErrors(this, 'serial')"
+                ref="serial"
+                @change="onChange('serial')"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                v-model="obj.count"
+                :readonly="this.formState.readOnly"
+                clearable
+                @click:clear="onChange('count')"
+                :counter="10"
+                :label="lt('WidgetCount')"
+                ref="count"
+                :rules="[
+                  form().integerValid(this, 'count'),
+                  form().required(this, 'count')
+                ]"
+                :error-messages="form().serverErrors(this, 'count')"
+                required
+                @change="onChange('count')"
+                type="number"
+              ></v-text-field>
+            </v-col>
 
-          <v-col cols="12" sm6 lg4 xl3 px-2>
-            <v-text-field
-              v-model="obj.dollarAmount"
-              :readonly="this.formState.readOnly"
-              :prefix="ltFormat().currencySymbol"
-              :label="lt('WidgetDollarAmount')"
-              ref="dollarAmount"
-              required
-              :rules="[
-                form().decimalValid(this, 'dollarAmount'),
-                form().required(this, 'dollarAmount')
-              ]"
-              :error-messages="form().serverErrors(this, 'dollarAmount')"
-              @change="onChange('dollarAmount')"
-              type="number"
-            ></v-text-field>
-          </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                v-model="obj.dollarAmount"
+                :readonly="this.formState.readOnly"
+                :prefix="ltFormat().currencySymbol"
+                :label="lt('WidgetDollarAmount')"
+                ref="dollarAmount"
+                required
+                :rules="[
+                  form().decimalValid(this, 'dollarAmount'),
+                  form().required(this, 'dollarAmount')
+                ]"
+                :error-messages="form().serverErrors(this, 'dollarAmount')"
+                @change="onChange('dollarAmount')"
+                type="number"
+              ></v-text-field>
+            </v-col>
 
-          <v-col cols="12" sm6 lg4 xl3 px-2>
-            <gz-date-time-picker
-              :label="lt('WidgetStartDate')"
-              v-model="obj.startDate"
-              :readonly="this.formState.readOnly"
-              ref="startDate"
-              :error-messages="form().serverErrors(this, 'startDate')"
-              @change="onChange('startDate')"
-            ></gz-date-time-picker>
-          </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <gz-date-time-picker
+                :label="lt('WidgetStartDate')"
+                v-model="obj.startDate"
+                :readonly="this.formState.readOnly"
+                ref="startDate"
+                :error-messages="form().serverErrors(this, 'startDate')"
+                @change="onChange('startDate')"
+              ></gz-date-time-picker>
+            </v-col>
 
-          <v-col cols="12" sm6 lg4 xl3 px-2>
-            <gz-date-time-picker
-              :label="lt('WidgetEndDate')"
-              :rules="[form().datePrecedence(this, 'startDate', 'endDate')]"
-              :error-messages="form().serverErrors(this, 'endDate')"
-              v-model="obj.endDate"
-              :readonly="this.formState.readOnly"
-              ref="endDate"
-              @change="onChange('endDate')"
-            ></gz-date-time-picker>
-          </v-col>
-          <v-col cols="12" sm6 lg4 xl3 px-2>
-            <v-checkbox
-              v-model="obj.active"
-              :readonly="this.formState.readOnly"
-              :label="lt('Active')"
-              ref="active"
-              :error-messages="form().serverErrors(this, 'active')"
-              required
-              @change="onChange('active')"
-            ></v-checkbox>
-          </v-col>
-          <v-col cols="12" sm6 lg4 xl3 px-2>
-            <v-select
-              v-model="obj.roles"
-              :items="pickLists.roles"
-              item-text="name"
-              item-value="id"
-              :readonly="this.formState.readOnly"
-              :label="lt('WidgetRoles')"
-              ref="roles"
-              :rules="[
-                form().integerValid(this, 'roles'),
-                form().required(this, 'roles')
-              ]"
-              :error-messages="form().serverErrors(this, 'roles')"
-              required
-              @change="onChange('roles')"
-            ></v-select>
-          </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <gz-date-time-picker
+                :label="lt('WidgetEndDate')"
+                :rules="[form().datePrecedence(this, 'startDate', 'endDate')]"
+                :error-messages="form().serverErrors(this, 'endDate')"
+                v-model="obj.endDate"
+                :readonly="this.formState.readOnly"
+                ref="endDate"
+                @change="onChange('endDate')"
+              ></gz-date-time-picker>
+            </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-checkbox
+                v-model="obj.active"
+                :readonly="this.formState.readOnly"
+                :label="lt('Active')"
+                ref="active"
+                :error-messages="form().serverErrors(this, 'active')"
+                required
+                @change="onChange('active')"
+              ></v-checkbox>
+            </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-select
+                v-model="obj.roles"
+                :items="pickLists.roles"
+                item-text="name"
+                item-value="id"
+                :readonly="this.formState.readOnly"
+                :label="lt('WidgetRoles')"
+                ref="roles"
+                :rules="[
+                  form().integerValid(this, 'roles'),
+                  form().required(this, 'roles')
+                ]"
+                :error-messages="form().serverErrors(this, 'roles')"
+                required
+                @change="onChange('roles')"
+              ></v-select>
+            </v-col>
 
-          <v-col cols="12" px-2>
-            <v-textarea
-              v-model="obj.notes"
-              :readonly="this.formState.readOnly"
-              :label="lt('WidgetNotes')"
-              :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
-              @change="onChange('notes')"
-              auto-grow
-            ></v-textarea>
-          </v-col>
+            <v-col cols="12">
+              <v-textarea
+                v-model="obj.notes"
+                :readonly="this.formState.readOnly"
+                :label="lt('WidgetNotes')"
+                :error-messages="form().serverErrors(this, 'notes')"
+                ref="notes"
+                @change="onChange('notes')"
+                auto-grow
+              ></v-textarea>
+            </v-col>
 
-          <v-col cols="12" px-2>
-            <gz-tag-picker
-              :label="lt('Tags')"
-              v-model="obj.tags"
-              :readonly="this.formState.readOnly"
-              ref="tags"
-              :error-messages="form().serverErrors(this, 'tags')"
-              @change="onChange('tags')"
-            ></gz-tag-picker>
-          </v-col>
+            <v-col cols="12">
+              <gz-tag-picker
+                :label="lt('Tags')"
+                v-model="obj.tags"
+                :readonly="this.formState.readOnly"
+                ref="tags"
+                :error-messages="form().serverErrors(this, 'tags')"
+                @change="onChange('tags')"
+              ></gz-tag-picker>
+            </v-col>
 
-          <v-col cols="12" px-2>
-            <gz-custom-fields
-              :formKey="formCustomTemplateKey"
-              v-bind:value.sync="obj.customFields"
-              :readOnly="this.formState.readOnly"
-              ref="customFields"
-              :error-messages="form().serverErrors(this, 'customFields')"
-              @change="onChange('customFields')"
-            ></gz-custom-fields>
-            <!-- v-model="obj.customFields" -->
-          </v-col>
-        </v-row>
-        <!-- <v-layout align-left justify-center row wrap mt-12>
+            <v-col cols="12">
+              <gz-custom-fields
+                :formKey="formCustomTemplateKey"
+                v-bind:value.sync="obj.customFields"
+                :readOnly="this.formState.readOnly"
+                ref="customFields"
+                :error-messages="form().serverErrors(this, 'customFields')"
+                @change="onChange('customFields')"
+              ></gz-custom-fields>
+              <!-- v-model="obj.customFields" -->
+            </v-col>
+          </v-row>
+          <!-- <v-layout align-left justify-center row wrap mt-12>
           <v-col xs6 sm4> FORMtags: {{ obj.tags }} </v-col>
         </v-row> -->
-        <!-- <v-layout align-left justify-center row wrap mt-12>
+          <!-- <v-layout align-left justify-center row wrap mt-12>
           <v-col xs6 sm4>
             READY: {{ formState.ready }}
             <br />
@@ -189,9 +190,10 @@
             <br />
           </v-col>
         </v-row>-->
-      </v-form>
-    </v-col>
-  </v-row>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>