Add backup target edit dialog

dashboard/src/views/BackupTargetsView.vue

@@ -9,7 +9,8 @@ import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
 import StateLED from  '../components/StateLED.vue';
 import BackupScheduleDialog from  '../components/BackupScheduleDialog.vue';
-import NewBackupTargetDialog from  '../components/NewBackupTargetDialog.vue';
+import BackupTargetAddDialog from  '../components/BackupTargetAddDialog.vue';
+import BackupTargetEditDialog from  '../components/BackupTargetEditDialog.vue';
 import BackupTargetsModel from '../models/BackupTargetsModel.js';
 import ProfileModel from '../models/ProfileModel.js';
 
@@ -43,13 +44,14 @@ const columns = {
   actions: {}
 };
 
-const newBackupTargetDialog = useTemplateRef('newBackupTargetDialog');
+const backupTargetAddDialog = useTemplateRef('backupTargetAddDialog');
 function onAdd() {
-  newBackupTargetDialog.value.open();
+  backupTargetAddDialog.value.open();
 }
 
+const backupTargetEditDialog = useTemplateRef('backupTargetEditDialog');
 function onEdit(target) {
-  console.log(target);
+  backupTargetEditDialog.value.open(target);
 }
 
 const backupScheduleDialog = useTemplateRef('backupScheduleDialog');
@@ -162,7 +164,8 @@ onMounted(async () => {
   <div class="content">
     <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
-    <NewBackupTargetDialog ref="newBackupTargetDialog" @success="refresh()"/>
+    <BackupTargetAddDialog ref="backupTargetAddDialog" @success="refresh()"/>
+    <BackupTargetEditDialog ref="backupTargetEditDialog" @success="refresh()"/>
     <BackupScheduleDialog ref="backupScheduleDialog" @success="refresh()"/>
 
     <!-- TODO translate -->
@@ -170,7 +173,6 @@ onMounted(async () => {
       <template #header-buttons>
         <Button @click="onAdd()" icon="fa-solid fa-plus"> Add Storage</Button>
       </template>
-      <p>TODO Explain what backup targets are and what primary/secondary is</p>
 
       <TableView :columns="columns" :model="targets" :busy="busy">
         <template #status="target">