Continue frontend building

packages/sshecret-frontend/src/components/secrets/GroupMoveTree.vue

@@ -0,0 +1,46 @@
+<template>
+  <template v-if="groups">
+    <sl-select
+      placeholder="Target parent"
+      hoist
+      :value="selectedPath"
+      @sl-change="selectedPath = $event.target.value"
+    >
+      <sl-option value="/">/</sl-option>
+      <sl-option v-for="group in groups" :key="group.path" :value="group.path">{{
+        group.path
+      }}</sl-option>
+    </sl-select>
+  </template>
+  <sl-button variant="success" outline @click="selectPath" class="mr-2"> Move</sl-button>
+  <sl-button variant="default" outline @click="emit('cancel')"> Cancel</sl-button>
+</template>
+<script setup lang="ts">
+import { SshecretAdmin } from '@/client'
+import type { ClientSecretGroup } from '@/client'
+import { ref, onMounted, toRef } from 'vue'
+
+const props = defineProps<{ self: string }>()
+const groups = ref<ClientSecretGroup[]>([])
+
+const ownPath = toRef(() => props.self)
+const emit = defineEmits<{ (e: 'selected', data: string): void; (e: 'cancel'): void }>()
+
+const selectedPath = ref()
+
+async function getGroups() {
+  selectedPath.value = props.self
+  const response = await SshecretAdmin.getSecretGroupsApiV1SecretsGroupsGet({
+    query: { flat: true },
+  })
+  if (response.data) {
+    groups.value = response.data.groups
+  }
+}
+
+function selectPath() {
+  emit('selected', selectedPath.value)
+}
+
+onMounted(getGroups)
+</script>