Fix error banner position in all dialogs (#226)

* fix error banner position in all dialogs

Signed-off-by: Andy Lee <andy.lee@suse.com>

* update HarvesterImageDownloader.vue

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/dialog/ConfirmExecutionDialog.vue

@@ -138,6 +138,8 @@ export default {
         <Banner
           v-for="(error, i) in errors"
           :key="i"
+          :label="error"
+          color="error"
         />
       </div>
     </template>

pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue

@@ -166,6 +166,8 @@ export default {
         <Banner
           v-for="(error, i) in errors"
           :key="i"
+          :label="error"
+          color="error"
         />
       </div>
     </template>

pkg/harvester/dialog/DeepCloneVmDialog.vue

@@ -106,6 +106,12 @@ export default {
         :label="t('harvester.modal.cloneVM.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        :label="err"
+        color="error"
+      />
     </template>
 
     <template #actions>
@@ -125,13 +131,6 @@ export default {
             @click="create"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterAddHotplugModal.vue

@@ -137,6 +137,12 @@ export default {
         class="mt-20"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        :label="err"
+        color="error"
+      />
     </template>
 
     <template #actions>
@@ -156,11 +162,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterBackupModal.vue

@@ -103,6 +103,12 @@ export default {
         :label="t('generic.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -121,13 +127,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterCloneTemplate.vue

@@ -120,6 +120,12 @@ export default {
         v-model:value="description"
         :label="t('harvester.modal.createTemplate.description')"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -138,11 +144,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue

@@ -128,6 +128,12 @@ export default {
       <Banner color="warning">
         <span>{{ t('harvester.modal.ejectCDROM.warnTip') }}</span>
       </Banner>
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -147,13 +153,6 @@ export default {
             @click="remove"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterExportImageDialog.vue

@@ -187,6 +187,12 @@ export default {
         class="mt-20"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -205,11 +211,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterImageDownloader.vue

@@ -122,16 +122,15 @@ export default {
         </Banner>
         {{ t('harvester.modal.downloadImage.startMessage') }}
         <br /><br />
-      </template>
-
-      <template #actions>
         <Banner
           v-for="(err, i) in errors"
           :key="i"
           color="error"
-        >
+          :label="err"
-          {{ err }}
+        />
-        </Banner>
+      </template>
+
+      <template #actions>
         <div class="actions">
           <div class="buttons">
             <button

pkg/harvester/dialog/HarvesterMigrationDialog.vue

@@ -161,6 +161,12 @@ export default {
         :placeholder="t('harvester.modal.migration.fields.nodeName.placeholder')"
         :options="nodeNameList"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template
@@ -181,12 +187,6 @@ export default {
           @click="apply"
         />
       </div>
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :label="err"
-      />
     </template>
   </Card>
 </template>

pkg/harvester/dialog/HarvesterQuotaDialog.vue

@@ -96,6 +96,12 @@ export default {
         :suffix="GIBIBYTE"
         class="mb-20"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -109,12 +115,6 @@ export default {
           </button>
           <AsyncButton @click="save" />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterRestoreDialog.vue

@@ -136,6 +136,12 @@ export default {
         :options="backupOption"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -154,11 +160,6 @@ export default {
             @click="saveRestore"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterUnplugVolume.vue

@@ -90,6 +90,12 @@ export default {
         v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
         class="text-default-text"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -111,13 +117,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue

@@ -132,6 +132,12 @@ export default {
         :label="t('generic.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -150,11 +156,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue

@@ -107,6 +107,12 @@ export default {
         :placeholder="t('harvester.harvesterVlanConfigMigrateDialog.targetClusterNetwork.placeholder')"
         :options="clusterNetworks"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -125,11 +131,6 @@ export default {
             @click="apply"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/RestartVMDialog.vue

@@ -70,16 +70,16 @@ export default {
           v-clean-html="t('harvester.modal.restart.tip')"
           class="pl-10 pr-10"
         />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
       </template>
 
       <template #actions>
         <div class="bottom">
-          <Banner
-            v-for="(err, i) in errors"
-            :key="i"
-            color="error"
-            :label="err"
-          />
           <div class="buttons">
             <button
               class="btn role-secondary mr-10"

pkg/harvester/dialog/RestoreSnapshotDialog.vue

@@ -145,6 +145,12 @@ export default {
         class="mt-20"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -162,10 +168,6 @@ export default {
             @click="save"
           />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/SnapshotDialog.vue

@@ -79,6 +79,12 @@ export default {
         :label="t('harvester.modal.snapshot.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -96,12 +102,6 @@ export default {
             @click="save"
           />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/VolumeCloneDialog.vue

@@ -98,6 +98,12 @@ export default {
         :label="t('harvester.modal.volumeClone.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -115,10 +121,6 @@ export default {
             @click="save"
           />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>