From 8e525e753ed9da3f64cc0f6550e374ad7f89658e Mon Sep 17 00:00:00 2001
From: Denis Gukov <denguk@gmail.com>
Date: Thu, 21 Nov 2024 20:23:07 +0500
Subject: [PATCH] feat(ui): expandable inventory editor

---
 web/src/components/EditDialog.vue      |  8 +++-
 web/src/components/InventoryForm.vue   | 59 ++++++++++++++++----------
 web/src/components/TaskLogView.vue     |  2 +-
 web/src/views/project/Environment.vue  |  1 +
 web/src/views/project/Inventory.vue    |  1 +
 web/src/views/project/TemplateView.vue | 12 +++---
 6 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/web/src/components/EditDialog.vue b/web/src/components/EditDialog.vue
index bde5a38f..38a4bc16 100644
--- a/web/src/components/EditDialog.vue
+++ b/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() {
diff --git a/web/src/components/InventoryForm.vue b/web/src/components/InventoryForm.vue
index 694af564..50d83514 100644
--- a/web/src/components/InventoryForm.vue
+++ b/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 */
diff --git a/web/src/components/TaskLogView.vue b/web/src/components/TaskLogView.vue
index b25a62d8..1f5109e7 100644
--- a/web/src/components/TaskLogView.vue
+++ b/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">
diff --git a/web/src/views/project/Environment.vue b/web/src/views/project/Environment.vue
index 661c09f9..d4ddc113 100644
--- a/web/src/views/project/Environment.vue
+++ b/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">
diff --git a/web/src/views/project/Inventory.vue b/web/src/views/project/Inventory.vue
index 05483eb5..a9e7b427 100644
--- a/web/src/views/project/Inventory.vue
+++ b/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)"
diff --git a/web/src/views/project/TemplateView.vue b/web/src/views/project/TemplateView.vue
index 77453ab6..1dddb674 100644
--- a/web/src/views/project/TemplateView.vue
+++ b/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>