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">{{item.key | truncate(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">{{item.value  | truncate(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="$store.getters.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 slot="form" slot-scope="{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="$store.getters.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 slot="form" slot-scope="{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>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            section: {
                default: 'singleChatGPTPromptSection'
            }
        },
        mixins: [componentHandler]
    }
</script>