check_ok

templates/terminate_spec.html

@@ -0,0 +1,110 @@
+{% extends "base.html" %}
+
+{% block title %}提早結束暫時規範{% endblock %}
+
+{% block content %}
+<h2 class="mb-4">提早結束暫時規範</h2>
+
+<div class="card">
+  <div class="card-header">
+    規範編號: <strong>{{ spec.spec_code }}</strong>
+  </div>
+  <div class="card-body">
+    <form method="post">
+      <p><strong>主題:</strong> {{ spec.title }}</p>
+      <div class="alert alert-warning">
+        執行此操作將會立即終止這份暫時規範，狀態將變為「已終止」，結束日期會更新為今天。
+      </div>
+      <div class="mb-3">
+        <label for="reason" class="form-label"><strong>提早結束原因</strong></label>
+        <textarea class="form-control" id="reason" name="reason" rows="4" required></textarea>
+      </div>
+
+      <!-- 郵件通知對象選擇 -->
+      <div class="mb-3">
+        <label for="recipients" class="form-label"><strong>郵件通知對象</strong></label>
+        {% if saved_emails %}
+        <div class="alert alert-info mb-2">
+          <small>以下為生效時設定的通知對象，您可以直接使用或進行編輯。</small>
+        </div>
+        {% endif %}
+        <select id="recipients" name="recipients" multiple placeholder="請輸入姓名或 Email 來搜尋...">
+        </select>
+        <div class="form-text">可搜尋姓名或 Email 地址，支援多人選擇</div>
+      </div>
+
+      <button type="submit" class="btn btn-danger">確認終止</button>
+      <a href="{{ url_for('temp_spec.spec_list') }}" class="btn btn-secondary">取消</a>
+    </form>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // 預先載入已儲存的郵件清單
+    {% if saved_emails %}
+    const savedEmails = "{{ saved_emails }}".split(';').filter(email => email.trim());
+    {% else %}
+    const savedEmails = [];
+    {% endif %}
+    
+    const recipientSelect = new TomSelect('#recipients', {
+        valueField: 'value',
+        labelField: 'text',
+        searchField: 'text',
+        placeholder: '請輸入姓名或 Email 來搜尋...',
+        plugins: ['remove_button'],
+        maxItems: null,
+        create: false,
+        load: function(query, callback) {
+            if (!query || query.length < 2) {
+                callback();
+                return;
+            }
+            
+            fetch(`/api/ldap-search?q=${encodeURIComponent(query)}`)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    callback(data);
+                })
+                .catch(error => {
+                    console.error('LDAP search error:', error);
+                    callback();
+                });
+        },
+        onItemAdd: function(value, item) {
+            // 選擇項目後清空搜尋框
+            this.setTextboxValue('');
+            this.refreshOptions(false);
+        },
+        render: {
+            option: function(item, escape) {
+                return `<div class="py-1">${escape(item.text)}</div>`;
+            },
+            item: function(item, escape) {
+                // 移除藍底背景，改用淺灰背景
+                return `<div class="badge bg-light text-dark border me-1">${escape(item.text)}</div>`;
+            }
+        }
+    });
+    
+    // 預填已儲存的郵件
+    if (savedEmails.length > 0) {
+        savedEmails.forEach(email => {
+            const trimmedEmail = email.trim();
+            if (trimmedEmail) {
+                recipientSelect.addOption({value: trimmedEmail, text: trimmedEmail});
+                recipientSelect.addItem(trimmedEmail);
+            }
+        });
+    }
+});
+</script>
+{% endblock %}