BarangaySystem/resources/js/Components/Ultimate/UltimateQueryModal.vue

<template>
  <BaseModal
    :modelValue="show"
    @update:modelValue="$emit('close')"
    modalTitle="Ultimate Query Console"
  >
    <div class="query-lab-body">
      <div class="mb-4">
        <label class="form-label fw-bold text-muted small text-uppercase mb-2 d-flex justify-content-between align-items-center">
          SQL Query
          <span v-if="loading" class="spinner-border spinner-border-sm text-primary" role="status"></span>
        </label>
        <div class="query-input-container">
          <textarea 
            v-model="query" 
            class="form-control font-monospace rounded-4 p-3 border-2 focus-ring shadow-sm" 
            rows="6" 
            placeholder="SELECT * FROM users WHERE active = 1..."
            spellcheck="false"
          ></textarea>
          <div class="d-flex justify-content-end mt-3">
            <button 
              @click="execute" 
              :disabled="loading || !query" 
              class="btn btn-primary rounded-pill px-4 py-2 d-flex align-items-center gap-2 shadow-sm"
            >
              <i class="fas fa-play"></i>
              Run Query
            </button>
          </div>
        </div>
      </div>

      <!-- Results Section -->
      <div v-if="results || affectedRows > 0" class="results-container animate-fade-in">
        <h6 class="fw-bold mb-3 d-flex align-items-center gap-2">
          <i class="fas fa-database text-success"></i>
          Query Results
          <span class="badge bg-secondary rounded-pill small ms-auto" v-if="results">
            {{ results.length }} rows found
          </span>
          <span class="badge bg-info rounded-pill small ms-auto" v-else-if="affectedRows > 0">
            {{ affectedRows }} rows affected
          </span>
        </h6>

        <div class="table-responsive rounded-4 shadow-sm bg-white border overflow-auto" style="max-height: 400px;">
          <table v-if="results && results.length > 0" class="table table-hover table-sm mb-0">
            <thead class="bg-light sticky-top">
              <tr>
                <th v-for="key in Object.keys(results[0])" :key="key" class="text-uppercase small fw-bold px-3 py-2 border-bottom">
                  {{ key }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, i) in results" :key="i">
                <td v-for="(val, key) in row" :key="key" class="px-3 py-2 border-bottom font-monospace small">
                  {{ val }}
                </td>
              </tr>
            </tbody>
          </table>
          <div v-else-if="results && results.length === 0" class="p-5 text-center text-muted">
            <i class="fas fa-empty-set fa-3x mb-3 opacity-25"></i>
            <p>No results found for this query.</p>
          </div>
          <div v-else-if="affectedRows > 0" class="p-4 text-center text-success">
            <i class="fas fa-check-circle fa-2x mb-2"></i>
            <p class="mb-0">Query executed successfully. {{ affectedRows }} rows affected.</p>
          </div>
        </div>
      </div>

      <!-- Error Alert -->
      <div v-if="error" class="alert alert-danger rounded-4 border-0 shadow-sm d-flex align-items-start gap-3 mt-3 animate-shake">
        <i class="fas fa-exclamation-triangle mt-1"></i>
        <div>
          <div class="fw-bold">Query Error</div>
          <div class="small opacity-75">{{ error }}</div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="d-flex w-100 gap-2">
        <button type="button" class="btn btn-light rounded-pill px-4 flex-fill fw-bold" @click="clear">Clear Results</button>
        <button type="button" class="btn btn-outline-secondary rounded-pill px-4 flex-fill fw-bold" @click="$emit('close')">Close</button>
      </div>
    </template>
  </BaseModal>
</template>

<script setup>
import { ref } from 'vue';
import { useUltimate } from '@/composables/useUltimate';
import BaseModal from '@/Components/Core/BaseModal.vue';

const props = defineProps({
  show: Boolean,
});

const emit = defineEmits(['close']);

const { runQuery, loading } = useUltimate();
const query = ref('');
const results = ref(null);
const affectedRows = ref(0);
const error = ref(null);

const execute = async () => {
    error.value = null;
    results.value = null;
    affectedRows.value = 0;
    
    try {
        const response = await runQuery(query.value);
        if (response.success) {
            results.value = response.data || null;
            affectedRows.value = response.affected || 0;
        } else {
            error.value = response.message;
        }
    } catch (err) {
        error.value = err.response?.data?.message || 'Failed to execute query';
    }
};

const clear = () => {
    query.value = '';
    results.value = null;
    affectedRows.value = 0;
    error.value = null;
};
</script>

<style scoped>
.focus-ring:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.query-lab-body {
  padding: 1rem;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out;
}

.animate-shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

:global(.dark-mode) .table-responsive {
  background-color: #1e293b;
  border-color: #334155;
}

:global(.dark-mode) .table {
  color: #f8fafc;
}

:global(.dark-mode) .table thead.bg-light {
  background-color: #0f172a !important;
}
</style>