111 lines
3.8 KiB
HTML
111 lines
3.8 KiB
HTML
{% 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 %}
|