8daf6cf6cb
# Pull Request Template ## Description Adds custom tool support to v1 ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. <img width="1816" height="958" alt="CleanShot 2026-03-24 at 11 37 33@2x" src="https://github.com/user-attachments/assets/2777a953-8b65-4a2d-88ec-39f395b3fb47" /> <img width="378" height="488" alt="CleanShot 2026-03-24 at 11 38 18@2x" src="https://github.com/user-attachments/assets/f6973c99-efd0-40e4-90fe-4472a2f63cea" /> <img width="1884" height="1452" alt="CleanShot 2026-03-24 at 11 38 32@2x" src="https://github.com/user-attachments/assets/9fba4fc4-0c33-46da-888a-52ec6bad6130" /> ## Checklist: - [x] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useToggle } from '@vueuse/core';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { dynamicTime } from 'shared/helpers/timeHelper';
|
|
|
|
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
|
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import Policy from 'dashboard/components/policy.vue';
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
authType: {
|
|
type: String,
|
|
default: 'none',
|
|
},
|
|
updatedAt: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
createdAt: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['action']);
|
|
|
|
const { t } = useI18n();
|
|
|
|
const [showActionsDropdown, toggleDropdown] = useToggle();
|
|
|
|
const menuItems = computed(() => [
|
|
{
|
|
label: t('CAPTAIN.CUSTOM_TOOLS.OPTIONS.EDIT_TOOL'),
|
|
value: 'edit',
|
|
action: 'edit',
|
|
icon: 'i-lucide-pencil-line',
|
|
},
|
|
{
|
|
label: t('CAPTAIN.CUSTOM_TOOLS.OPTIONS.DELETE_TOOL'),
|
|
value: 'delete',
|
|
action: 'delete',
|
|
icon: 'i-lucide-trash',
|
|
},
|
|
]);
|
|
|
|
const timestamp = computed(() =>
|
|
dynamicTime(props.updatedAt || props.createdAt)
|
|
);
|
|
|
|
const handleAction = ({ action, value }) => {
|
|
toggleDropdown(false);
|
|
emit('action', { action, value, id: props.id });
|
|
};
|
|
|
|
const authTypeLabel = computed(() => {
|
|
return t(
|
|
`CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.${props.authType.toUpperCase()}`
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<CardLayout class="relative">
|
|
<div class="flex relative justify-between w-full gap-1">
|
|
<span class="text-base text-n-slate-12 line-clamp-1 font-medium">
|
|
{{ title }}
|
|
</span>
|
|
<div class="flex items-center gap-2">
|
|
<Policy
|
|
v-on-clickaway="() => toggleDropdown(false)"
|
|
:permissions="['administrator']"
|
|
class="relative flex items-center group"
|
|
>
|
|
<Button
|
|
icon="i-lucide-ellipsis-vertical"
|
|
color="slate"
|
|
size="xs"
|
|
class="rounded-md group-hover:bg-n-alpha-2"
|
|
@click="toggleDropdown()"
|
|
/>
|
|
<DropdownMenu
|
|
v-if="showActionsDropdown"
|
|
:menu-items="menuItems"
|
|
class="mt-1 ltr:right-0 rtl:right-0 top-full"
|
|
@action="handleAction($event)"
|
|
/>
|
|
</Policy>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between w-full gap-4 min-w-0">
|
|
<div class="flex items-center gap-3 flex-1 min-w-0">
|
|
<span v-if="description" class="text-sm truncate text-n-slate-11">
|
|
{{ description }}
|
|
</span>
|
|
<span
|
|
v-if="authType !== 'none'"
|
|
class="text-sm shrink-0 text-n-slate-11 inline-flex items-center gap-1"
|
|
>
|
|
<i class="i-lucide-lock text-base" />
|
|
{{ authTypeLabel }}
|
|
</span>
|
|
</div>
|
|
<span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
|
|
{{ timestamp }}
|
|
</span>
|
|
</div>
|
|
</CardLayout>
|
|
</template>
|