feat(ui): expandable inventory editor

web/src/components/EditDialog.vue

@@ -8,7 +8,7 @@ Can use used in tandem with ItemFormBase.js. See KeyForm.vue for example.
     v-model="dialog"
     :max-width="maxWidth || 400"
     persistent
-    :fullscreen="fullscreen"
+    :fullscreen="expandable && fullscreen"
     :transition="false"
     :content-class="'item-dialog item-dialog--' + position"
   >
@@ -21,7 +21,7 @@ Can use used in tandem with ItemFormBase.js. See KeyForm.vue for example.
 
         <v-spacer></v-spacer>
 
-        <v-btn icon @click="toggleFullscreen()" class="mr-3">
+        <v-btn icon @click="toggleFullscreen()" class="mr-3" v-if="expandable">
           <v-icon>mdi-arrow-{{ fullscreen ? 'collapse' : 'expand' }}</v-icon>
         </v-btn>
 
@@ -89,6 +89,10 @@ export default {
     cancelButtonText: String,
     saveButtonText: String,
     expandable: Boolean,
+    name: {
+      type: String,
+      default: 'Unnamed',
+    },
   },
 
   data() {

web/src/components/InventoryForm.vue

@@ -9,7 +9,8 @@
       :value="formError"
       color="error"
       class="pb-2"
-    >{{ formError }}</v-alert>
+    >{{ formError }}
+    </v-alert>
 
     <v-text-field
       v-model="item.name"
@@ -31,13 +32,13 @@
     ></v-select>
 
     <v-select
-        v-model="item.become_key_id"
-        :label="$t('sudoCredentialsOptional')"
-        clearable
-        :items="loginPasswordKeys"
-        item-value="id"
-        item-text="name"
-        :disabled="formSaving"
+      v-model="item.become_key_id"
+      :label="$t('sudoCredentialsOptional')"
+      clearable
+      :items="loginPasswordKeys"
+      item-value="id"
+      item-text="name"
+      :disabled="formSaving"
     ></v-select>
 
     <v-select
@@ -72,19 +73,23 @@
     ></v-select>
 
     <codemirror
-        :style="{ border: '1px solid lightgray' }"
-        v-model.trim="item.inventory"
-        :options="cmOptions"
-        v-if="item.type === 'static' || item.type === 'static-yaml'"
-        :placeholder="$t('enterInventory')"
+      :class="{
+        'vue-codemirror--static': item.type === 'static',
+        'vue-codemirror--static-yaml': item.type === 'static-yaml',
+      }"
+      :style="{ border: '1px solid lightgray' }"
+      v-model.trim="item.inventory"
+      :options="cmOptions"
+      v-if="item.type === 'static' || item.type === 'static-yaml'"
+      :placeholder="$t('enterInventory')"
     />
 
     <v-alert
-        dense
-        text
-        class="mt-4"
-        type="info"
-        v-if="item.type === 'static'"
+      dense
+      text
+      class="mt-4"
+      type="info"
+      v-if="item.type === 'static'"
     >
       {{ $t('staticInventoryExample') }}
       <pre style="font-size: 14px;">[website]
@@ -93,11 +98,11 @@
     </v-alert>
 
     <v-alert
-        dense
-        text
-        class="mt-4"
-        type="info"
-        v-if="item.type === 'static-yaml'"
+      dense
+      text
+      class="mt-4"
+      type="info"
+      v-if="item.type === 'static-yaml'"
     >
       {{ $t('staticYamlInventoryExample') }}
       <pre style="font-size: 14px;">all:
@@ -113,6 +118,14 @@
 .CodeMirror {
   height: 160px !important;
 }
+
+.v-dialog--fullscreen .vue-codemirror--static .CodeMirror {
+  height: calc(100vh - 540px) !important;
+}
+
+.v-dialog--fullscreen .vue-codemirror--static-yaml .CodeMirror {
+  height: calc(100vh - 600px) !important;
+}
 </style>
 <script>
 /* eslint-disable import/no-extraneous-dependencies,import/extensions */

web/src/components/TaskLogView.vue

@@ -7,7 +7,7 @@
     >{{ item.message }}
     </v-alert>
 
-    <v-container class="pa-0 mb-2 overflow-auto">
+    <v-container fluid class="pa-0 mb-2 overflow-auto">
       <v-row no-gutters class="flex-nowrap">
         <v-col>
           <v-list two-line subheader class="pa-0">

web/src/views/project/Environment.vue

@@ -51,6 +51,7 @@
       hide-default-footer
       class="mt-4"
       :items-per-page="Number.MAX_VALUE"
+      style="max-width: 800px;"
     >
       <template v-slot:item.actions="{ item }">
         <div style="white-space: nowrap">

web/src/views/project/Inventory.vue

@@ -1,6 +1,7 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <div v-if="items != null">
     <EditDialog
+      expandable
       v-model="editDialog"
       :save-button-text="itemId === 'new' ? $t('create') : $t('save')"
       :icon="getAppIcon(itemApp)"

web/src/views/project/TemplateView.vue

@@ -94,7 +94,7 @@
       </v-btn>
     </v-toolbar>
 
-    <v-container>
+    <v-container fluid>
       <v-alert
         text
         type="info"
@@ -105,7 +105,7 @@
 
       <v-row>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-book-play</v-icon>
@@ -119,7 +119,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>{{ TEMPLATE_TYPE_ICONS[item.type] }}</v-icon>
@@ -134,7 +134,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-monitor</v-icon>
@@ -150,7 +150,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-code-braces</v-icon>
@@ -165,7 +165,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-git</v-icon>