update

2025-04-15 18:59:56 +08:00
parent 7649a7b69d
commit c026a42d06
43 changed files with 3479 additions and 169 deletions
@@ -0,0 +1,135 @@
+<template>
+  <div class="notification-settings">
+    <h2>{{ $t('settings.notifications.title') }}</h2>
+
+    <div v-if="store.isLoading" class="loading-indicator">
+      {{ $t('common.loading') }}
+    </div>
+    <div v-if="store.error" class="error-message">
+      {{ store.error }}
+    </div>
+
+    <div v-if="!store.isLoading && !store.error">
+      <button @click="showAddForm = true" class="btn btn-primary mb-3">
+        {{ $t('settings.notifications.addChannel') }}
+      </button>
+
+      <div v-if="settings.length === 0" class="alert alert-info">
+        {{ $t('settings.notifications.noChannels') }}
+      </div>
+
+      <ul v-else class="list-group">
+        <li v-for="setting in settings" :key="setting.id" class="list-group-item d-flex justify-content-between align-items-center">
+          <div>
+            <strong class="me-2">{{ setting.name }}</strong>
+            <span class="badge bg-secondary me-1">{{ getChannelTypeName(setting.channel_type) }}</span>
+            <span :class="['badge', setting.enabled ? 'bg-success' : 'bg-warning']">
+              {{ setting.enabled ? $t('common.enabled') : $t('common.disabled') }}
+            </span>
+            <small class="d-block text-muted">{{ getEventNames(setting.enabled_events) }}</small>
+          </div>
+          <div>
+            <button @click="editSetting(setting)" class="btn btn-sm btn-outline-secondary me-2">
+              {{ $t('common.edit') }}
+            </button>
+            <button @click="confirmDelete(setting)" class="btn btn-sm btn-outline-danger">
+              {{ $t('common.delete') }}
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Add/Edit Form Modal (Placeholder - will create NotificationSettingForm.vue next) -->
+    <div v-if="showAddForm || editingSetting" class="modal-placeholder">
+      <!-- Use a simple conditional rendering for the form for now -->
+      <!-- TODO: Consider using a proper modal component for better UX -->
+      <NotificationSettingForm
+        v-if="showAddForm || editingSetting"
+        :initial-data="editingSetting"
+        @save="handleSave"
+        @cancel="closeForm"
+        class="mt-4"
+      />
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useNotificationsStore } from '../stores/notifications.store';
+import { NotificationSetting, NotificationChannelType, NotificationEvent } from '../types/server.types';
+import NotificationSettingForm from './NotificationSettingForm.vue'; // Import the form component
+import { useI18n } from 'vue-i18n';
+
+const store = useNotificationsStore();
+const { t } = useI18n();
+
+const showAddForm = ref(false);
+const editingSetting = ref<NotificationSetting | null>(null);
+
+const settings = computed(() => store.settings);
+
+onMounted(() => {
+  store.fetchSettings();
+});
+
+const getChannelTypeName = (type: NotificationChannelType): string => {
+  switch (type) {
+    case 'webhook': return t('settings.notifications.types.webhook');
+    case 'email': return t('settings.notifications.types.email');
+    case 'telegram': return t('settings.notifications.types.telegram');
+    default: return type;
+  }
+};
+
+const getEventNames = (events: NotificationEvent[]): string => {
+  if (!events || events.length === 0) return t('settings.notifications.noEventsEnabled');
+  // TODO: Translate event names if needed
+  return t('settings.notifications.triggers') + ': ' + events.join(', ');
+};
+
+const editSetting = (setting: NotificationSetting) => {
+  editingSetting.value = { ...setting }; // Clone to avoid modifying store directly
+  showAddForm.value = false; // Ensure add form is hidden
+};
+
+const confirmDelete = (setting: NotificationSetting) => {
+  if (setting.id && confirm(t('settings.notifications.confirmDelete', { name: setting.name }))) {
+    store.deleteSetting(setting.id);
+  }
+};
+
+const closeForm = () => {
+  showAddForm.value = false;
+  editingSetting.value = null;
+};
+
+// TODO: Implement save logic when form component is ready
+const handleSave = (savedSetting: NotificationSetting) => {
+  console.log('Setting saved:', savedSetting);
+  closeForm();
+  // The store should have updated the list automatically after add/update
+  // Optionally, you could force a refresh if needed: store.fetchSettings();
+};
+
+</script>
+
+<style scoped>
+.notification-settings {
+  padding: 1rem;
+}
+.loading-indicator, .error-message {
+  margin-top: 1rem;
+}
+.error-message {
+  color: var(--bs-danger);
+}
+.modal-placeholder {
+  margin-top: 2rem;
+  padding: 1rem;
+  border: 1px dashed #ccc;
+  background-color: #f8f9fa;
+}
+</style>