dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Andras Bacsai
2023-06-06 14:11:11 +02:00
parent e2a5b5706e
commit c2a5b6d7f6
1 changed files with 30 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
resources/js/components/MagicBar.vue
View File

@@ -26,13 +26,13 @@
</svg> </svg>
<input type="text" v-model="search" ref="searchInput" <input type="text" v-model="search" ref="searchInput"
class="w-full h-10 pr-4 text-white rounded outline-none bg-coolgray-400 pl-11 placeholder:text-neutral-700 sm:text-sm focus:outline-none" class="w-full h-10 pr-4 text-white rounded outline-none bg-coolgray-400 pl-11 placeholder:text-neutral-700 sm:text-sm focus:outline-none"
autofocus placeholder="Search, jump or create... magically... 🪄" role="combobox" placeholder="Search, jump or create... magically... 🪄" role="combobox"
aria-expanded="false" aria-controls="options"> aria-expanded="false" aria-controls="options">
</div> </div>
<ul class="px-4 pb-2 overflow-y-auto max-h-80 scroll-py-10 scroll-pb-2 scrollbar" id="options" <ul class="px-4 pb-2 overflow-y-auto max-h-80 scroll-py-10 scroll-pb-2 scrollbar" id="options"
role="listbox"> role="listbox">
<li v-if="state.new"> <li v-if="state.showNew">
<ul class="mt-2 -mx-4 text-sm text-white "> <ul class="mt-2 -mx-4 text-sm text-white ">
<li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400" <li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400"
id="option-1" role="option" tabindex="-1" @click="next('redirect', -1, state.icon)"> id="option-1" role="option" tabindex="-1" @click="next('redirect', -1, state.icon)">
@@ -72,7 +72,7 @@
<ul class="mt-2 -mx-4 text-sm text-white"> <ul class="mt-2 -mx-4 text-sm text-white">
<li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400" <li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400"
id="option-1" role="option" tabindex="-1" v-for="action, index in data" id="option-1" role="option" tabindex="-1" v-for="action, index in data"
@click="next(state.next ?? action.next, index)"> @click="next(state.next ?? action.next, index, action.newAction)">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">
@@ -167,13 +167,21 @@ const appActions = [{
tags: 'application,private,repository,github,gitlab,bitbucket,git', tags: 'application,private,repository,github,gitlab,bitbucket,git',
icon: 'git', icon: 'git',
next: 'server' next: 'server'
}] },
{
id: 3,
name: 'Servers',
tags: 'server,new',
icon: 'server',
next: 'server',
}
]
const initialState = { const initialState = {
title: null, title: null,
icon: null, icon: null,
next: null, next: null,
current: null, current: null,
new: false, showNew: false,
data: appActions data: appActions
} }
const state = ref({ ...initialState }) const state = ref({ ...initialState })
@@ -208,11 +216,11 @@ watch(showCommandPalette, async (value) => {
} }
}) })
function resetState() { function resetState() {
showCommandPalette.value = false showCommandPalette.value = false
state.value = { ...initialState } state.value = { ...initialState }
selected = {} selected = {}
search.value = ''
} }
async function next(nextAction, index, newAction = null) { async function next(nextAction, index, newAction = null) {
if (newAction) { if (newAction) {
@@ -254,32 +262,32 @@ async function next(nextAction, index, newAction = null) {
switch (nextAction) { switch (nextAction) {
case 'server': case 'server':
await getServers() await getServers(true)
state.value.title = 'Select a server' state.value.title = 'Select a server'
state.value.icon = 'server' state.value.icon = 'server'
state.value.new = true state.value.showNew = true
break; break;
case 'destination': case 'destination':
await getDestinations(state.value.data[index].id) await getDestinations(state.value.data[index].id)
state.value.title = 'Select a destination' state.value.title = 'Select a destination'
state.value.icon = 'destination' state.value.icon = 'destination'
state.value.new = true state.value.showNew = true
break; break;
case 'project': case 'project':
await getProjects() await getProjects()
state.value.title = 'Select a project' state.value.title = 'Select a project'
state.value.icon = 'project' state.value.icon = 'project'
state.value.new = true state.value.showNew = true
break; break;
case 'environment': case 'environment':
await getEnvironments(state.value.data[index].id) await getEnvironments(state.value.data[index].id)
state.value.title = 'Select an environment' state.value.title = 'Select an environment'
state.value.icon = 'environment' state.value.icon = 'environment'
state.value.new = true state.value.showNew = true
break; break;
case 'redirect': case 'redirect':
await redirect(); await redirect();
state.value.new = false state.value.showNew = false
break; break;
default: default:
break; break;
@@ -307,15 +315,22 @@ async function redirect() {
targetUrl.searchParams.append('type', 'private-deploy-key') targetUrl.searchParams.append('type', 'private-deploy-key')
targetUrl.searchParams.append('destination', selected.destination) targetUrl.searchParams.append('destination', selected.destination)
break; break;
case 3:
targetUrl.pathname = `/server/${selected.server}/`
break;
} }
window.location.href = targetUrl.href window.location.href = targetUrl;
} }
async function getServers() { async function getServers(isJump = false) {
const { data } = await axios.get(`${baseUrl}/servers`); const { data } = await axios.get(`${baseUrl}/servers`);
state.value.data = data.servers state.value.data = data.servers
state.value.current = 'server' state.value.current = 'server'
if (isJump) {
state.value.next = 'redirect'
} else {
state.value.next = 'destination' state.value.next = 'destination'
} }
}
async function getDestinations(serverId) { async function getDestinations(serverId) {
const { data } = await axios.get(`${baseUrl}/destinations?server_id=${serverId}`); const { data } = await axios.get(`${baseUrl}/destinations?server_id=${serverId}`);
state.value.data = data.destinations state.value.data = data.destinations