exchange-2.0/resources/assets/vue/components/settings/elements/SinglePromptComponent.vue

<template>
<div class="row m-b-15 parentContainer">
    <div class="col">
        <div class="row align-items-center">
            <div class="col-3">
                <div class="row">
                    <div class="col-auto p-r-10">
                        <div class="font-heading all-caps fs-8 muted">Date</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="font-heading fs-10">{{ item.created_at }}</div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="row">
                    <div class="col-auto p-r-10">
                        <div class="font-heading all-caps fs-8 muted">Title</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="font-heading fs-10">{{ truncate(item.key, 50) }}</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="row">
                    <div class="col-auto p-r-10">
                        <div class="font-heading all-caps fs-8 muted">Prompt</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="font-heading fs-10">{{ truncate(item.value, 100) }}</div>
                    </div>
                </div>
            </div>
            <div class="col-auto parentContainer"  v-if="item.key.startsWith('CHATGPT_PROMPT_')">
                <div class="row align-items-center">
                    <template v-if="authStore.isAdmin">
                        <div class="col-auto no-padding">
                            <button class="btn btn-xs btn-complete b-rad-none m-r-5 requestModal" data-type="editModal">
                                Edit
                            </button>
                        </div>
                        <div class="col-auto no-padding">
                            <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteChatGPTPrompt" v-if="item.key !== 'CHATGPT_PROMPT_EXTRACT_1'">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </template>
                </div>
                <modal-form-component :data="data" size="large" section="allAIPromptsSection">
                    <template #form="{ section }">
                        <ai-prompt-form-component :data="data"  :section="section"></ai-prompt-form-component>
                    </template>
                </modal-form-component>

                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteChatGPTPrompt">
                    <delete-chat-gpt-form-component :data="item" section="allAIPromptsSection" class="text-center"></delete-chat-gpt-form-component>
                </modal-component>
            </div>
            <div class="col-auto parentContainer"  v-if="item.key.startsWith('CLAUDE_PROMPT_')">
                <div class="row align-items-center">
                    <template v-if="authStore.isAdmin">
                        <div class="col-auto no-padding">
                            <button class="btn btn-xs btn-complete b-rad-none m-r-5 requestModal" data-type="editModal">
                                Edit
                            </button>
                        </div>
                        <div class="col-auto no-padding">
                            <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteClaudePrompt" v-if="item.key !== 'CLAUDE_PROMPT_EXTRACT_1'">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </template>
                </div>
                <modal-form-component :data="data" size="large" section="allAIPromptsSection">
                    <template #form="{ section }">
                        <ai-prompt-form-component :data="data"  :section="section"></ai-prompt-form-component>
                    </template>
                </modal-form-component>

                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteClaudePrompt">
                    <delete-claude-form-component :data="item" section="allAIPromptsSection" class="text-center"></delete-claude-form-component>
                </modal-component>
            </div>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import { useComponentHandler } from '@/composables/useComponentHandler';
import { useAuthStore } from '@/stores/auth';
import truncate from '@/general/filters/truncate';

interface Props {
    section?: string;
    data: any;
}

const props = withDefaults(defineProps<Props>(), {
    section: 'singleChatGPTPromptSection'
});

const authStore = useAuthStore();
const { item } = useComponentHandler(props);
</script>