2ND

templates/extend_spec.html

@@ -27,9 +27,68 @@
         <div class="form-text">請上傳展延申請的相關佐證文件 (PDF 格式)。</div>
       </div>
 
+      <!-- 郵件通知對象選擇 -->
+      <div class="mb-3">
+        <label for="recipients" class="form-label"><strong>郵件通知對象</strong></label>
+        <select id="recipients" name="recipients" multiple placeholder="請輸入姓名或 Email 來搜尋...">
+        </select>
+        <div class="form-text">可搜尋姓名或 Email 地址，支援多人選擇</div>
+      </div>
+
       <button type="submit" class="btn btn-primary">確認展延</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() {
+    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>`;
+            }
+        }
+    });
+});
+</script>
 {% endblock %}