fix: add tags input to host modal, pass groupId when creating from group
- Tags field added to New Host modal (comma separated) - Clicking + on a group now passes groupId to the new host - Shows "Adding to: GroupName" in modal when creating from a group - Refreshes tree after host creation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
ae97bd5a4a
commit
7e347ce378
@ -26,6 +26,7 @@ onMounted(async () => {
|
|||||||
|
|
||||||
function openNewHost(groupId?: number) {
|
function openNewHost(groupId?: number) {
|
||||||
editingHost.value = groupId ? { groupId } : null
|
editingHost.value = groupId ? { groupId } : null
|
||||||
|
inlineHost.value = { name: '', hostname: '', port: 22, protocol: 'ssh', groupId: groupId || null, tags: '' }
|
||||||
showHostDialog.value = true
|
showHostDialog.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -112,7 +113,7 @@ function dismissSavePrompt() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Inline modal state
|
// Inline modal state
|
||||||
const inlineHost = ref({ name: '', hostname: '', port: 22, protocol: 'ssh' as 'ssh' | 'rdp' })
|
const inlineHost = ref({ name: '', hostname: '', port: 22, protocol: 'ssh' as 'ssh' | 'rdp', groupId: null as number | null, tags: '' })
|
||||||
|
|
||||||
async function createGroupInline() {
|
async function createGroupInline() {
|
||||||
const nameEl = document.getElementById('grp-name') as HTMLInputElement
|
const nameEl = document.getElementById('grp-name') as HTMLInputElement
|
||||||
@ -123,14 +124,21 @@ async function createGroupInline() {
|
|||||||
|
|
||||||
async function createHostInline() {
|
async function createHostInline() {
|
||||||
if (!inlineHost.value.name || !inlineHost.value.hostname) return
|
if (!inlineHost.value.name || !inlineHost.value.hostname) return
|
||||||
|
const tags = inlineHost.value.tags
|
||||||
|
.split(',')
|
||||||
|
.map(t => t.trim())
|
||||||
|
.filter(Boolean)
|
||||||
await connections.createHost({
|
await connections.createHost({
|
||||||
name: inlineHost.value.name,
|
name: inlineHost.value.name,
|
||||||
hostname: inlineHost.value.hostname,
|
hostname: inlineHost.value.hostname,
|
||||||
port: inlineHost.value.port,
|
port: inlineHost.value.port,
|
||||||
protocol: inlineHost.value.protocol,
|
protocol: inlineHost.value.protocol,
|
||||||
|
groupId: inlineHost.value.groupId,
|
||||||
|
tags,
|
||||||
})
|
})
|
||||||
showHostDialog.value = false
|
showHostDialog.value = false
|
||||||
inlineHost.value = { name: '', hostname: '', port: 22, protocol: 'ssh' }
|
inlineHost.value = { name: '', hostname: '', port: 22, protocol: 'ssh', groupId: null, tags: '' }
|
||||||
|
await connections.fetchTree()
|
||||||
}
|
}
|
||||||
|
|
||||||
// Client-side search filtering
|
// Client-side search filtering
|
||||||
@ -383,6 +391,10 @@ async function deleteSelectedHost() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="space-y-3">
|
<div v-else class="space-y-3">
|
||||||
|
<!-- Show which group this host will be added to -->
|
||||||
|
<div v-if="inlineHost.groupId" class="text-xs text-gray-500 bg-gray-800 rounded px-2 py-1">
|
||||||
|
Adding to: <span class="text-gray-300">{{ connections.groups.find((g: any) => g.id === inlineHost.groupId)?.name || 'Group' }}</span>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-sm text-gray-400 mb-1">Name</label>
|
<label class="block text-sm text-gray-400 mb-1">Name</label>
|
||||||
<input v-model="inlineHost.name" type="text" placeholder="My Server"
|
<input v-model="inlineHost.name" type="text" placeholder="My Server"
|
||||||
@ -407,6 +419,11 @@ async function deleteSelectedHost() {
|
|||||||
<option value="rdp">RDP</option>
|
<option value="rdp">RDP</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Tags <span class="text-gray-600">(comma separated)</span></label>
|
||||||
|
<input v-model="inlineHost.tags" type="text" placeholder="ssh, prod, web"
|
||||||
|
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white" />
|
||||||
|
</div>
|
||||||
<div class="flex justify-end gap-2 pt-2">
|
<div class="flex justify-end gap-2 pt-2">
|
||||||
<button @click="showHostDialog = false" class="px-4 py-2 text-sm text-gray-400 hover:text-white">Cancel</button>
|
<button @click="showHostDialog = false" class="px-4 py-2 text-sm text-gray-400 hover:text-white">Cancel</button>
|
||||||
<button @click="createHostInline()" class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded">Save</button>
|
<button @click="createHostInline()" class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded">Save</button>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user