stock-management-demo/src/pages/SettingsPage.vue

<template>
  <q-page padding>
    <div
      class="q-gutter-md"
      style="max-width: 800px; margin: auto;"
    >
      <h5 class="q-mt-none q-mb-md">
        Settings
      </h5>

      <q-card
        flat
        bordered
      >
        <q-card-section>
          <div class="text-h6">
            Mantis Summary Prompt
          </div>
          <div class="text-caption text-grey q-mb-sm">
            Edit the prompt used to generate Mantis summaries. Use $DATE and $MANTIS_TICKETS as placeholders.
          </div>
          <q-input
            v-model="mantisPrompt"
            type="textarea"
            filled
            autogrow
            label="Mantis Prompt"
            :loading="loadingPrompt"
            :disable="savingPrompt"
          />
        </q-card-section>
        <q-card-actions align="right">
          <q-btn
            label="Save Prompt"
            color="primary"
            @click="saveMantisPrompt"
            :loading="savingPrompt"
            :disable="!mantisPrompt || loadingPrompt"
          />
        </q-card-actions>
      </q-card>

      <q-card
        flat
        bordered
      >
        <q-card-section>
          <div class="text-h6">
            Email Summary Prompt
          </div>
          <div class="text-caption text-grey q-mb-sm">
            Edit the prompt used to generate Email summaries. Use $EMAIL_DATA as a placeholder for the JSON email array.
          </div>
          <q-input
            v-model="emailPrompt"
            type="textarea"
            filled
            autogrow
            label="Email Prompt"
            :loading="loadingEmailPrompt"
            :disable="savingEmailPrompt"
          />
        </q-card-section>
        <q-card-actions align="right">
          <q-btn
            label="Save Prompt"
            color="primary"
            @click="saveEmailPrompt"
            :loading="savingEmailPrompt"
            :disable="!emailPrompt || loadingEmailPrompt"
          />
        </q-card-actions>
      </q-card>
    </div>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import axios from 'axios';

const $q = useQuasar();

const mantisPrompt = ref('');
const loadingPrompt = ref(false);
const savingPrompt = ref(false);

const fetchMantisPrompt = async() => 
{
  loadingPrompt.value = true;
  try 
  {
    const response = await axios.get('/api/settings/mantisPrompt');
    mantisPrompt.value = response.data.value || ''; // Handle case where setting might not exist yet
  }
  catch (error) 
  {
    console.error('Error fetching Mantis prompt:', error);
    $q.notify({
      color: 'negative',
      message: 'Failed to load Mantis prompt setting.',
      icon: 'report_problem'
    });
  }
  finally 
  {
    loadingPrompt.value = false;
  }
};

const saveMantisPrompt = async() => 
{
  savingPrompt.value = true;
  try 
  {
    await axios.put('/api/settings/mantisPrompt', { value: mantisPrompt.value });
    $q.notify({
      color: 'positive',
      message: 'Mantis prompt updated successfully.',
      icon: 'check_circle'
    });
  }
  catch (error) 
  {
    console.error('Error saving Mantis prompt:', error);
    $q.notify({
      color: 'negative',
      message: 'Failed to save Mantis prompt setting.',
      icon: 'report_problem'
    });
  }
  finally 
  {
    savingPrompt.value = false;
  }
};

const emailPrompt = ref('');
const loadingEmailPrompt = ref(false);
const savingEmailPrompt = ref(false);

const fetchEmailPrompt = async() => 
{
  loadingEmailPrompt.value = true;
  try 
  {
    const response = await axios.get('/api/settings/emailPrompt');
    emailPrompt.value = response.data.value || ''; // Handle case where setting might not exist yet
  }
  catch (error) 
  {
    console.error('Error fetching Email prompt:', error);
    $q.notify({
      color: 'negative',
      message: 'Failed to load Email prompt setting.',
      icon: 'report_problem'
    });
  }
  finally 
  {
    loadingEmailPrompt.value = false;
  }
};

const saveEmailPrompt = async() => 
{
  savingEmailPrompt.value = true;
  try 
  {
    await axios.put('/api/settings/emailPrompt', { value: emailPrompt.value });
    $q.notify({
      color: 'positive',
      message: 'Email prompt updated successfully.',
      icon: 'check_circle'
    });
  }
  catch (error) 
  {
    console.error('Error saving Email prompt:', error);
    $q.notify({
      color: 'negative',
      message: 'Failed to save Email prompt setting.',
      icon: 'report_problem'
    });
  }
  finally 
  {
    savingEmailPrompt.value = false;
  }
};

onMounted(() => 
{
  fetchMantisPrompt();
  fetchEmailPrompt();
});
</script>

<style scoped>
/* Add any specific styles if needed */
</style>