feat(apps): icon and title for edit form

web/src/components/EditTemplateDialog.vue

@@ -4,15 +4,15 @@
       :min-content-height="457"
       v-model="dialog"
       :save-button-text="itemId === 'new' ? $t('create') : $t('save')"
-      :icon="APP_ICONS[itemApp].icon"
-      :icon-color="$vuetify.theme.dark ? APP_ICONS[itemApp].darkColor : APP_ICONS[itemApp].color"
+      :icon="getAppIcon(itemApp)"
+      :icon-color="getAppColor(itemApp)"
       :title="(itemId === 'new' ? $t('newTemplate') : $t('editTemplate')) +
-        ' \'' + APP_TITLE[itemApp] + '\''"
+        ' \'' + getAppTitle(itemApp) + '\''"
       @save="onSave"
   >
     <template v-slot:form="{ onSave, onError, needSave, needReset }">
       <TerraformTemplateForm
-          v-if="['terraform', 'tofu'].includes(itemApp)"
+          v-if="['terraform', 'tofu'].includes(itemApp.id)"
           :project-id="projectId"
           :item-id="itemId"
           @save="onSave"
@@ -20,7 +20,7 @@
           :need-save="needSave"
           :need-reset="needReset"
           :source-item-id="sourceItemId"
-          :app="itemApp"
+          :app="itemApp.id"
       />
       <BashTemplateForm
           v-else-if="itemApp === 'bash'"
@@ -68,7 +68,7 @@ export default {
 
   props: {
     value: Boolean,
-    itemApp: String,
+    itemApp: Object,
     projectId: Number,
     itemId: [String, Number],
     sourceItemId: Number,
@@ -76,8 +76,6 @@ export default {
 
   data() {
     return {
-      APP_TITLE,
-      APP_ICONS,
       dialog: false,
     };
   },
@@ -93,6 +91,22 @@ export default {
   },
 
   methods: {
+    getAppColor(item) {
+      if (APP_ICONS[item.id]) {
+        return this.$vuetify.theme.dark ? APP_ICONS[item.id].darkColor : APP_ICONS[item.id].color;
+      }
+
+      return item.color || 'grey';
+    },
+
+    getAppTitle(item) {
+      return APP_TITLE[item.id] || item.title;
+    },
+
+    getAppIcon(item) {
+      return APP_ICONS[item.id] ? APP_ICONS[item.id].icon : `mdi-${item.icon}`;
+    },
+
     onSave(e) {
       this.$emit('save', e);
     },

web/src/views/project/TemplateView.vue

@@ -202,7 +202,7 @@ import {
 } from '@/lib/constants';
 import ObjectRefsDialog from '@/components/ObjectRefsDialog.vue';
 import NewTaskDialog from '@/components/NewTaskDialog.vue';
-import EditTemplateDialogue from '@/components/EditTemplateDialogue.vue';
+import EditTemplateDialogue from '@/components/EditTemplateDialog.vue';
 import PermissionsCheck from '@/components/PermissionsCheck';
 
 export default {

web/src/views/project/Templates.vue

@@ -26,13 +26,13 @@
       </v-card>
     </v-dialog>
 
-    <EditTemplateDialogue
+    <EditTemplateDialog
         v-model="editDialog"
         :project-id="projectId"
         :item-app="itemApp"
         item-id="new"
         @save="loadItems()"
-    ></EditTemplateDialogue>
+    ></EditTemplateDialog>
 
     <NewTaskDialog
       v-model="newTaskDialog"
@@ -73,7 +73,7 @@
         <v-list>
           <v-list-item
             v-for="item in templateApps"
-            :key="item"
+            :key="item.id"
             link
             @click="editItem('new'); itemApp = item;"
           >
@@ -274,11 +274,11 @@ import {
   TEMPLATE_TYPE_ACTION_TITLES,
   TEMPLATE_TYPE_ICONS,
 } from '@/lib/constants';
-import EditTemplateDialogue from '@/components/EditTemplateDialogue.vue';
+import EditTemplateDialog from '@/components/EditTemplateDialog.vue';
 
 export default {
   components: {
-    EditTemplateDialogue,
+    EditTemplateDialog,
     TableSettingsSheet,
     TaskStatus,
     TaskLink,
@@ -308,7 +308,7 @@ export default {
       viewItemsLoading: null,
       viewTab: null,
       templateApps: null,
-      itemApp: '',
+      itemApp: { id: '' },
     };
   },
   computed: {
@@ -378,7 +378,7 @@ export default {
     },
 
     getAppIcon(item) {
-      return APP_ICONS[item.id] ? APP_ICONS[item.id].icon : item.icon;
+      return APP_ICONS[item.id] ? APP_ICONS[item.id].icon : `mdi-${item.icon}`;
     },
 
     async beforeLoadItems() {