jobdone-shared-files 1.1.21 → 1.1.23

package/ModalDailyMultimediaImagesSelector.vue

@@ -0,0 +1,413 @@
+<template>
+	<div class="modal fade" :class="subModal ? 'sub-modal' : ''" ref="modalDom" data-bs-backdrop="static" tabindex="-1"
+		role="dialog" aria-hidden="true" data-bs-focus="false">
+		<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
+			<div class="modal-content modal-daily-multimedia-images-selector">
+				<div class="modal-header">
+					<h5 class="modal-title">影音日誌紀錄圖片選擇器</h5>
+					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				</div>
+				<div class="d-flex justify-content-between align-items-center p-2 border-bottom">
+					<div class="filter-container">
+						<div class="filter-item">
+							<div class="form-label-content">
+								<label class="form-label">日期區間</label>
+								<button v-if="filterDate" class="btn-clear-item" @click='filterDate = ""'></button>
+							</div>
+							<flatPickr :config="dateConfig" class="form-control" placeholder="記錄日期篩選"
+								v-model="filterDate" />
+						</div>
+						<div class="d-flex">
+							<button type="button" class="btn btn-primary mt-auto" @click="applyFilter"><span
+									class="material-icons">search</span></button>
+						</div>
+					</div>
+					<div class="btn-group" role="group">
+						<button type="button" class="btn"
+							:class="{ 'btn-primary': activeTab === 'records', 'btn-outline-primary': activeTab !== 'records', }"
+							@click="switchTab('records')"><span
+								class="material-icons me-1">view_list</span><span>記錄列表</span></button>
+						<button type="button" class="btn"
+							:class="{ 'btn-primary': activeTab === 'medias', 'btn-outline-primary': activeTab !== 'medias', }"
+							@click="switchTab('medias')"><span
+								class="material-icons me-1">view_module</span><span>照片總覽</span></button>
+					</div>
+				</div>
+				<div class="modal-body p-0" ref="scrollDom">
+					<template v-if="recordsState.items?.length > 0">
+						<div v-show="activeTab === 'records'">
+							<table class="table records-preview-table ">
+								<colgroup>
+									<col class="date-grid">
+									<col>
+								</colgroup>
+								<thead class="thead-default">
+									<tr>
+										<th class="date-grid">記錄日期</th>
+										<th>記錄資訊</th>
+									</tr>
+								</thead>
+								<tbody>
+									<template v-for="record in sortedRecords" :key="record.id">
+										<tr>
+											<td class="date-grid">
+												<div class="mb-2">{{ record.date }}</div>
+												<button type="button" class="btn btn-sm mt-1"
+													:class="allSelectedByRecord.get(record.id) ? 'btn-primary' : 'btn-outline-primary'"
+													:disabled="!record.images?.length"
+													@click="toggleAllInRecord(record)">
+													{{ allSelectedByRecord.get(record.id) ? '取消全選' : `全選 (
+													${record.images?.length ?? 0} )` }}
+												</button>
+											</td>
+											<td>
+												<h6 class="mb-1">{{ record.title }}</h6>
+												<small class="d-block text-gray-500 mb-2">{{ record.content }}</small>
+												<div class="d-flex flex-wrap gap-1 mb-2" v-if="record.tags?.length">
+													<span class="d-inline-flex flex-center badge badge-outline-gray"
+														v-for="tag in record.tags" :key="tag.label">{{ tag.label }}：{{
+															tag.value }}</span>
+												</div>
+												<div class="records-photos" v-if="record.images?.length">
+													<div class="media-item" v-for="(img, imgIdx) in record.images"
+														:key="img.id">
+														<div class="media-item-body">
+															<div class="multimedia-select-content">
+																<button type="button" class="select-control"
+																	:class="{ 'multimedia-is-selected': selectedImageIds.has(img.id) }"
+																	@click.stop="toggleImage(img)"></button>
+															</div>
+															<button type="button" class="multimedia-preview-content"
+																@click="previewImagesShow(record.images, imgIdx)">
+																<img :src="img.thumbnailUrl || img.url"
+																	:alt="`img-${img.id}`" />
+															</button>
+														</div>
+													</div>
+												</div>
+											</td>
+										</tr>
+									</template>
+								</tbody>
+							</table>
+						</div>
+						<div v-show="activeTab === 'medias'" class="multimedia-list-preview">
+							<div class="the-month-content" v-for="theMonth in mediasByMonth" :key="theMonth.monthKey">
+								<p class="the-month-content-header">{{ theMonth.monthLabel }}</p>
+								<div class="the-month-content-body">
+									<template v-for="day in theMonth.days" :key="`${theMonth.monthKey}-${day.dayKey}`">
+										<div class="media-item" v-for="(item, itemIdx) in day.items"
+											:key="`${theMonth.monthKey}-${day.dayKey}-${item.id}`">
+											<p class="media-item-header" v-if="itemIdx === 0">{{ day.dayLabel }}</p>
+											<div class="media-item-body">
+												<div class="multimedia-select-content">
+													<button type="button" class="select-control"
+														:class="{ 'multimedia-is-selected': selectedImageIds.has(item.id) }"
+														@click.stop="toggleImage(item)"></button>
+												</div>
+												<button type="button" class="multimedia-preview-content"
+													@click="previewImagesShow(day.items, itemIdx)">
+													<img :src="item.thumbnailUrl || item.url" :alt="`img-${item.id}`" />
+												</button>
+											</div>
+										</div>
+									</template>
+								</div>
+							</div>
+						</div>
+					</template>
+					<div v-else>
+						<div class="d-flex flex-column align-items-center justify-content-center py-5 bg-gray-300">
+							<span class="material-icons"
+								style="font-size: 48px; color: var(--gray-400);">photo_library</span>
+							<p class="mt-3 mb-0" style="color: var(--gray-500);">未找到相關影音日誌記錄</p>
+						</div>
+					</div>
+					<div ref="sentinelDom" aria-hidden="true"></div>
+				</div>
+				<div class="selected-preview-bar" v-if="selectedImages.length">
+					<div class="selected-preview-header">已選擇圖片 ( {{ selectedImages.length }} )</div>
+					<div class="selected-preview-body">
+						<div class="selected-preview-list">
+							<div class="media-item" v-for="(img, imgIdx) in selectedImages" :key="img.id">
+								<div class="media-item-body">
+									<div class="multimedia-select-content">
+										<button type="button" class="select-control multimedia-is-selected"
+											@click.stop="toggleImage(img)"></button>
+									</div>
+									<button type="button" class="multimedia-preview-content"
+										@click="previewImagesShow(selectedImages, imgIdx)">
+										<img :src="img.thumbnailUrl || img.url" :alt="`img-${img.id}`" />
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+					<button type="button" class="btn btn-primary" @click="submit"
+						:disabled="selectedImages.length === 0">確認選擇 (
+						{{
+							selectedImages.length || '請選擇圖片'
+						}} )</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<VueEasyLightbox ref="ezLb" :visible="previewImages?.length > 0" :imgs="previewImages" :index="previewImageIndex"
+		@hide="previewImagesOnHide" />
+	<Loading :is-active="isLoading"></Loading>
+</template>
+<script setup>
+import { ref, reactive, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { modalShow, modalHide } from "./common/ModalSetup.js";
+import Loading from './common/vueLoadingOverlay.vue';
+import flatPickr from "vue-flatpickr-component";
+import { MandarinTraditional } from "flatpickr/dist/l10n/zh-tw";
+import VueEasyLightbox from 'vue-easy-lightbox';
+
+const props = defineProps({
+	subModal: {
+		type: Boolean,
+		default: false,
+	},
+	fetchFn: {
+		type: Function,
+		required: true,
+	},
+	pageSize: {
+		type: Number,
+		default: 20,
+	},
+});
+
+const emit = defineEmits(['afterSubmit']);
+
+const isLoading = ref(false);
+const modalDom = ref(null);
+const scrollDom = ref(null);
+const sentinelDom = ref(null);
+let scrollObserver = null;
+
+// #region  Flatpickr
+const dateConfig = {
+	altFormat: "Y-m-d",
+	dateFormat: "Y-m-d",
+	disableMobile: "true",
+	mode: "range",
+	locale: MandarinTraditional,
+}
+// #endregion Flatpickr
+
+// #region  預覽圖片
+const previewImages = ref([]);
+const previewImageIndex = ref(0);
+const previewImagesShow = (images, idx) => {
+	previewImageIndex.value = idx;
+	previewImages.value = images.map((item) => ({ src: item.url }));
+};
+const previewImagesOnHide = () => {
+	previewImages.value = [];
+	previewImageIndex.value = 0;
+};
+// #endregion 預覽圖片
+
+
+const activeTab = ref('records');
+const filterDate = ref('');
+const selectedImages = ref([]);
+// 改用 reactive Set 取代 computed Set。Vue 3 對 reactive 集合提供 per-element 反應式追蹤，
+// template 裡 .has(id) 只會在「該 id 的選取狀態變動」時 invalidate，
+// 不會像 computed Set（每次都回傳新 Set 物件）那樣讓所有 button 的 binding 一起重新評估
+const selectedImageIds = reactive(new Set());
+
+const createInitialRecordsState = () => ({
+	items: [],
+	page: 0,
+	hasMore: true,
+	initialized: false,
+	emptyStreak: 0,
+});
+const recordsState = reactive(createInitialRecordsState());
+
+const MAX_EMPTY_STREAK = 5; // 連續多頁全被過濾掉時的安全閥，避免 observer 重複觸發造成無限請求
+
+// 失效令牌：每次重置 state 就 +1。in-flight 的 loadMore 開頭會抓快照 myGen，
+// 等 fetch 回來時比對；若 myGen 已落後，代表期間 modal 被關 / 篩選被換，這份結果該丟棄，
+// 避免把舊資料 push 進已被清空的新 state（例如：fetch A 還在飛 → 使用者按篩選 → fetch A 回來污染新列表）
+let loadGeneration = 0;
+
+const resetRecordsState = () => { // 重置記錄列表相關狀態（如關閉 modal 或重新套用篩選條件時）
+	loadGeneration += 1; // 讓所有 in-flight 的 loadMore 變成「上個世代」，回來後會被丟棄
+	isLoading.value = false; // 強制清掉，避免下一個 loadMore 被舊的 isLoading=true 擋住
+	Object.assign(recordsState, createInitialRecordsState());
+};
+
+// 跨頁載入時 fetchFn 不保證順序，這裡統一在前端依 record.date 由新到舊排序，
+// 讓「記錄列表」與「照片總覽」都吃同一份排序好的資料
+const sortedRecords = computed(() => {
+	// ISO 格式（YYYY-MM-DD）字串遞減即等同日期遞減；Array.prototype.sort 為穩定排序，同日期維持原進入順序
+	return [...recordsState.items].sort((a, b) => (b.date ?? '').localeCompare(a.date ?? ''));
+});
+
+const mediasByMonth = computed(() => { // 將圖片依年月日分類，方便在照片總覽頁籤中呈現
+	const months = new Map();
+	for (const record of sortedRecords.value) {
+		const d = new Date(record.date);
+		const monthKey = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+		const monthLabel = `${d.getFullYear()} 年 ${d.getMonth() + 1} 月`;
+		const dayKey = record.date;
+		const dayLabel = record.date;
+		if (!months.has(monthKey)) months.set(monthKey, { monthKey, monthLabel, days: new Map() });
+		const month = months.get(monthKey);
+		if (!month.days.has(dayKey)) month.days.set(dayKey, { dayKey, dayLabel, items: [] });
+		const day = month.days.get(dayKey);
+		for (const img of record.images) {
+			day.items.push({ id: img.id, url: img.url, thumbnailUrl: img.thumbnailUrl });
+		}
+	}
+	// 月與日皆以由新到舊呈現；monthKey/dayKey 是 ISO 格式（YYYY-MM、YYYY-MM-DD），字串遞減排序即等同日期遞減
+	return Array.from(months.values())
+		.sort((a, b) => b.monthKey.localeCompare(a.monthKey))
+		.map((m) => ({
+			monthKey: m.monthKey,
+			monthLabel: m.monthLabel,
+			days: Array.from(m.days.values()).sort((a, b) => b.dayKey.localeCompare(a.dayKey)),
+		}));
+});
+
+const refreshObserver = async () => { // 重新觀察觸底偵測點：當載入完成後若它仍在可視區內（內容沒撐滿），會再次觸發 callback 繼續載入下一頁
+	await nextTick();
+	if (!scrollObserver || !sentinelDom.value) return;
+	scrollObserver.unobserve(sentinelDom.value);
+	scrollObserver.observe(sentinelDom.value);
+};
+
+const loadMore = async () => { // 載入更多記錄
+	if (isLoading.value || !recordsState.hasMore) return;
+	const myGen = loadGeneration; // 抓快照；await 期間若被 reset，loadGeneration 會走在前頭，靠這個比對丟棄結果
+	try {
+		isLoading.value = true;
+		const fetchParams = {
+			page: recordsState.page + 1,
+			pageSize: props.pageSize,
+			filters: { date: filterDate.value },
+		};
+		const result = await props.fetchFn(fetchParams);
+		if (myGen !== loadGeneration) return; // 已被 reset，舊資料不能進新 state
+		const validItems = (result?.items ?? []).filter((r) => r.images?.length);
+		recordsState.items.push(...validItems);
+		recordsState.page = fetchParams.page;
+		recordsState.hasMore = !!result?.hasMore;
+		recordsState.initialized = true;
+		recordsState.emptyStreak = validItems.length === 0 ? recordsState.emptyStreak + 1 : 0;
+	} catch (err) {
+		if (myGen !== loadGeneration) return; // 已被 reset，不該動到新 state 的 hasMore
+		recordsState.hasMore = false; // 失敗就停止，避免 observer 重觸發造成無限重試
+		console.error('[ModalDailyMultimediaImagesSelector] loadMore failed', err);
+	} finally {
+		if (myGen === loadGeneration) isLoading.value = false; // 只有同世代才能清；否則新 loadMore 剛把它設成 true，不能誤覆寫
+	}
+	if (myGen !== loadGeneration) return; // 收尾邏輯（emptyStreak 判斷、refreshObserver）也要保護
+	if (recordsState.emptyStreak >= MAX_EMPTY_STREAK) {
+		recordsState.hasMore = false;
+		return;
+	}
+	// 統一靠 observer 重觸發：sentinel 仍可見（內容沒撐滿、或本頁全空）就會自動再呼一次 loadMore
+	refreshObserver();
+};
+
+const switchTab = (tab) => {
+	activeTab.value = tab;
+	refreshObserver();
+};
+
+const applyFilter = async () => {
+	resetRecordsState();
+	await loadMore();
+};
+
+//#region 圖片選取相關
+const toggleImage = (img) => {
+	const idx = selectedImages.value.findIndex((m) => m.id === img.id);
+	if (idx >= 0) {
+		selectedImages.value.splice(idx, 1);
+		selectedImageIds.delete(img.id);
+	} else {
+		selectedImages.value.push({ id: img.id, url: img.url, thumbnailUrl: img.thumbnailUrl, fileName: img.fileName });
+		selectedImageIds.add(img.id);
+	}
+};
+
+const allSelectedByRecord = computed(() => { // 預先算出每筆 record 是否「全選」，template 直接查表，避免在 HTML 呼叫 function
+	const map = new Map();
+	for (const record of recordsState.items) {
+		map.set(
+			record.id,
+			!!record.images?.length && record.images.every((img) => selectedImageIds.has(img.id)),
+		);
+	}
+	return map;
+});
+
+const toggleAllInRecord = (record) => {
+	if (!record.images?.length) return;
+	if (allSelectedByRecord.value.get(record.id)) {
+		const removeIds = new Set(record.images.map((img) => img.id));
+		selectedImages.value = selectedImages.value.filter((m) => !removeIds.has(m.id));
+		for (const id of removeIds) selectedImageIds.delete(id);
+	} else {
+		const toAdd = record.images
+			.filter((img) => !selectedImageIds.has(img.id))
+			.map((img) => ({ id: img.id, url: img.url, thumbnailUrl: img.thumbnailUrl, fileName: img.fileName }));
+		selectedImages.value.push(...toAdd);
+		for (const m of toAdd) selectedImageIds.add(m.id);
+	}
+};
+//#endregion 圖片選取相關
+
+// #region 光箱操作相關
+const closeModal = () => {
+	selectedImages.value = [];
+	previewImages.value = [];
+	selectedImageIds.clear();
+	filterDate.value = '';
+	activeTab.value = 'records';
+	resetRecordsState();
+};
+
+const show = (preSelected = []) => {
+	// 開啟時可帶入已選圖片，讓使用者看到先前的選擇狀態（例如再次開啟時保留勾選）
+	selectedImages.value = preSelected.map((img) => ({ id: img.id, url: img.url, fileName: img.fileName }));
+	selectedImageIds.clear();
+	for (const img of preSelected) selectedImageIds.add(img.id);
+	modalShow(modalDom.value, closeModal);
+	if (!recordsState.initialized) loadMore();
+};
+
+const submit = () => {
+	modalHide(modalDom.value);
+	// thumbnailUrl 是內部顯示用、不外流；對外帶出 { id, url, fileName }
+	emit('afterSubmit', selectedImages.value.map((m) => ({ id: m.id, url: m.url, fileName: m.fileName })));
+};
+// #endregion 光箱操作相關
+
+onMounted(() => {
+	if (!sentinelDom.value || !scrollDom.value) return;
+	scrollObserver = new IntersectionObserver(
+		(entries) => {
+			if (entries[0]?.isIntersecting) loadMore();
+		},
+		{ root: scrollDom.value, rootMargin: '100px' },
+	);
+	scrollObserver.observe(sentinelDom.value);
+});
+
+onBeforeUnmount(() => {
+	scrollObserver?.disconnect();
+	scrollObserver = null;
+});
+
+defineExpose({ show });
+</script>

package/autocompleteSelect.vue

@@ -6,8 +6,8 @@
                 selectedPreviewText
             }}</button>
         <!-- search input -->
-        <input class='form-control autocomplete-select-component-keyword-filter-input' :class="[triggerClass, searchInput]"
-            type="text" ref="keywordFilterInput" v-model="keyword"
+        <input class='form-control autocomplete-select-component-keyword-filter-input'
+            :class="[triggerClass, searchInput]" type="text" ref="keywordFilterInput" v-model="keyword"
             :placeholder="searchPlaceholder == '' ? selectedPreviewText : searchPlaceholder" maxlength="50"
             @keydown.enter="keyboardSelectConfirm($event)" @keydown.up="keyboardSwitch($event, -1)"
             @keydown.down="keyboardSwitch($event, 1)" @change="keyboardSwitchIndexReset()">
@@ -27,8 +27,8 @@
                         </div>
                     </li>
                     <template v-if="active">
-                        <li v-for="(opt, idx) in filterList" :key="idx" @click.stop="selectConfirm(opt)" :title="opt?.name"
-                            :id="`autocomplete-select-component-opt-item_${idx}`">
+                        <li v-for="(opt, idx) in filterList" :key="idx" @click.stop="selectConfirm(opt)"
+                            :title="opt?.name" :id="`autocomplete-select-component-opt-item_${idx}`">
                             <button class="autocomplete-select-component-opt-item" type="button"
                                 :class="`${idx == keyboardSwitchIndex ? 'active' : ''} ${optClass}`">
                                 <template v-if="htmlOption">
@@ -55,7 +55,7 @@
 // enum Data & Functions
 
 // vue & bootstrap
-import { ref, onMounted, onUnmounted, computed, toRaw } from 'vue'
+import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue'
 
 // plugins
 
@@ -106,7 +106,6 @@ const props = defineProps({
         default: false
     },
 
-
     previewKey: {
         type: String,
         default: '',
@@ -140,22 +139,15 @@ const componentContentInput = ref(null)
 const componentContentList = ref(null)
 const keywordFilterInput = ref(null)
 
-const valueIsUnselected = computed(()=>{
+const valueIsUnselected = computed(() => {
     const defaultPlaceholderValue = [null, undefined, 0, '']
-    let ary =[]
-    for (let index = 0; index < defaultPlaceholderValue.length; index++) {
-        const element = defaultPlaceholderValue[index];
-        if(!props.isUnselectedExtendValue.includes(element)){
-            ary.push(element)  
-        }
-    }
-    return ary || []
+    return defaultPlaceholderValue.filter(v => !props.isUnselectedExtendValue.includes(v))
 })
 const checkValueIsUnselected = (checkValue) => {
-    if(valueIsUnselected.value.includes(checkValue)){
+    if (valueIsUnselected.value.includes(checkValue)) {
         return true
     }
-    if((typeof checkValue) === 'object' && checkValue !== null && Object.keys(checkValue).length === 0){
+    if ((typeof checkValue) === 'object' && checkValue !== null && Object.keys(checkValue).length === 0) {
         return true
     }
     return false
@@ -163,36 +155,110 @@ const checkValueIsUnselected = (checkValue) => {
 
 // 是否開啟下拉選單
 const active = ref(false)
-const domPosition = ref({ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 })
-function activeSelector() {
-    if (props.disabled) {
-        return
-    }
-    active.value = true
-    keywordFilterInput.value.focus()
-    domPosition.value = componentContentInput.value.getBoundingClientRect()
-}
 const listIsOnTop = ref(false)
-const positionStyle = computed(() => {
-    let screenHeight = window.innerHeight;
-    let info = toRaw(domPosition.value)
-    listIsOnTop.value = info.top >= (screenHeight - info.bottom)
-    let str = ''
+const positionStyle = ref('')
+
+// 自製定位：position fixed + getBoundingClientRect，不依賴外部套件
+const OFFSET = 4 // 下拉與 input 的間距(px)
+
+function updatePosition() {
+    if (!componentContentInput.value || !componentContentList.value) return
+
+    const rect = componentContentInput.value.getBoundingClientRect()
+    const listEl = componentContentList.value
+    const screenH = window.innerHeight
+    const spaceBelow = screenH - rect.bottom
+    const spaceAbove = rect.top
+    const listH = listEl.scrollHeight || 200
+
+    // flip: 下方空間不夠且上方比較多 → 顯示在上面
+    listIsOnTop.value = spaceBelow < listH && spaceAbove > spaceBelow
+
+    let style = `position:fixed;left:${rect.left}px;min-width:${rect.width}px;max-width:calc(90vw - ${rect.left}px);`
     if (listIsOnTop.value) {
-        str = `bottom:${screenHeight - info.top}px;max-height:calc(${info.top}px - 10%);`
+        style += `bottom:${screenH - rect.top + OFFSET}px;max-height:${spaceAbove - OFFSET}px;`
     } else {
-        str = `top:${info.bottom}px;max-height:calc(${screenHeight - info.bottom}px - 10%);`
+        style += `top:${rect.bottom + OFFSET}px;max-height:${spaceBelow - OFFSET}px;`
     }
-    return `${str}left:${info.x}px;max-width:calc(90% - ${info.x}px);min-width:${Math.abs(info.x - info.right)}px;`
-})
+    positionStyle.value = style
+}
+
+// 追蹤監聽器的清理函式
+let cleanupListeners = null
+let visibilityObserver = null
+
+function startTracking() {
+    // 收集所有可滾動的祖層
+    const scrollParents = getScrollParents(componentContentInput.value)
+    let rafId = null
+    const onUpdate = () => {
+        if (rafId) return
+        rafId = requestAnimationFrame(() => {
+            updatePosition()
+            rafId = null
+        })
+    }
+
+    scrollParents.forEach(el => el.addEventListener('scroll', onUpdate, { passive: true }))
+    window.addEventListener('resize', onUpdate, { passive: true })
+
+    // 偵測 input 離開可視區域時自動關閉
+    visibilityObserver = new IntersectionObserver((entries) => {
+        if (!entries[0].isIntersecting && active.value) {
+            leave()
+        }
+    }, { threshold: 0 })
+    visibilityObserver.observe(componentContentInput.value)
+
+    cleanupListeners = () => {
+        scrollParents.forEach(el => el.removeEventListener('scroll', onUpdate))
+        window.removeEventListener('resize', onUpdate)
+        if (visibilityObserver) {
+            visibilityObserver.disconnect()
+            visibilityObserver = null
+        }
+        cleanupListeners = null
+    }
+}
+
+function stopTracking() {
+    if (cleanupListeners) cleanupListeners()
+}
+
+// 找出所有可滾動的祖層元素
+function getScrollParents(el) {
+    const parents = []
+    let current = el?.parentElement
+    while (current) {
+        const style = getComputedStyle(current)
+        if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
+            parents.push(current)
+        }
+        current = current.parentElement
+    }
+    parents.push(window)
+    return parents
+}
+
+async function activeSelector() {
+    if (props.disabled) return
+    const wasActive = active.value
+    active.value = true
+    keywordFilterInput.value.focus()
+    if (!wasActive) {
+        await nextTick()
+        updatePosition()
+        startTracking()
+    }
+}
 
 function leave() {
+    stopTracking()
     listIsOnTop.value = false
     active.value = false
     keyword.value = ''
-    // TODO SCROLL CLOSE
     keyboardSwitchIndexReset()
-    keywordFilterInput.value.blur()
+    keywordFilterInput.value?.blur()
 }
 
 // 確認傳入選單列表內的選項Type，只檢查第一個，請內容統一，不要傳奇怪的東西進來
@@ -206,7 +272,7 @@ const optItemType = computed(() => {
     if (!allowOptItemType.includes(type)) {
         return ''
     }
-    if ((sampling instanceof Date) && (sampling instanceof RegExp) && Array.isArray(sampling)) {
+    if ((sampling instanceof Date) || (sampling instanceof RegExp) || Array.isArray(sampling)) {
         return ''
     }
     return type?.toLowerCase()
@@ -223,23 +289,14 @@ const filterList = computed(() => {
     if (keyword.value == '') {
         return props.opts
     }
-    let kwReplace = keyword.value.replace(/[.*+?^${}()|[\]\\]/g, "");
+    let kwReplace = keyword.value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     let regex = new RegExp(kwReplace, "i");
     if (optItemType.value === 'object') {
-        let final = props.opts.filter(i => {
-            for (var idx = 0; idx < props.filterKeys.length; idx++) {
-                if (regex.test(i[props.filterKeys[idx].toString()])) {
-                    return i
-                };
-            }
-        })
-        return final
+        return props.opts.filter(i =>
+            props.filterKeys.some(key => regex.test(i[key.toString()]))
+        )
     }
-    return props.opts.filter(i => {
-        if (regex.test(i)) {
-            return i
-        }
-    })
+    return props.opts.filter(i => regex.test(i))
 })
 
 // 從選項列表中挖出整個選中的item，因選中的值(可能是某個key)
@@ -262,6 +319,7 @@ function previewAdjust(itemObj) {
         let strAry = props.previewKey.split('+')
         let isUndefined = false
 
+        const undefinedKeys = []
         let finalStr = strAry.reduce((acc, cur) => {
             let v = cur.trim()
             if (v.match(/'[^']+'/g)) {
@@ -269,11 +327,17 @@ function previewAdjust(itemObj) {
             } else {
                 if (itemObj[v] === undefined) {
                     isUndefined = true
+                    undefinedKeys.push(v)
                 }
                 return acc + itemObj[v]
             }
         }, '')
         if (isUndefined) {
+            console.error(
+                `[autocompleteSelect] previewKey 中找不到對應欄位: [${undefinedKeys.join(', ')}]，` +
+                `物件實際擁有的 key: [${Object.keys(itemObj).join(', ')}]`,
+                itemObj
+            )
             return props.isUndefinedHint
         }
         return finalStr ? finalStr : props.placeholder
@@ -360,9 +424,10 @@ const searchInput = computed(() => {
     return ''
 })
 function initTrigger(event) {
-    if (componentContentInput.value.contains(event.target) || componentContentList.value.contains(event.target)) {
+    if (!componentContentInput.value) return
+    if (componentContentInput.value.contains(event.target) || componentContentList.value?.contains(event.target)) {
         activeSelector()
-    } else {
+    } else if (active.value) {
         leave()
     }
 }
@@ -372,6 +437,7 @@ onMounted(() => {
 
 onUnmounted(() => {
     window.removeEventListener("click", initTrigger);
+    stopTracking()
 })
 
 </script>
@@ -424,10 +490,7 @@ onUnmounted(() => {
 .autocomplete-select-component-selector-content {
     visibility: hidden;
     display: none;
-    position: fixed;
     z-index: 2000;
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
     max-height: 76vh;
     overflow: auto;
 

package/index.js

@@ -12,6 +12,7 @@ import selectPlaceholder from "./common/directives/selectPlaceholder.js";
 import collapse from "./common/directives/collapse.js";
 import popovers from "./common/directives/popovers.js";
 import tooltip from "./common/directives/tooltip.js";
+import ModalDailyMultimediaImagesSelector from "./ModalDailyMultimediaImagesSelector.vue";
 
 export default {
     paginate,
@@ -31,6 +32,7 @@ export {
     ModalFileRepositorySelector,
     autocompleteSelect,
     ProjectContactUserPicker,
+    ModalDailyMultimediaImagesSelector,
 
     // ProjectManagement
     projectNavbar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobdone-shared-files",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "description": "Shared JS and SCSS for Jobdone Enterprise.",
   "main": "index.js",
   "scripts": {
@@ -14,6 +14,8 @@
     "vue-loading-overlay": "^6.0.3",
     "bootstrap": "^5.3.8",
     "dayjs": "^1.11.7",
-    "vue-easy-lightbox": "^1.16.0"
+    "vue-easy-lightbox": "^1.16.0",
+    "flatpickr": "^4.6.13",
+    "vue-flatpickr-component": "^12.0.0"
   }
 }

package/style/scss/Components/ModalDailyMultimediaImagesSelector.scss

@@ -0,0 +1,342 @@
+.modal-daily-multimedia-images-selector {
+    .modal-title {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        &::before {
+            content: "photo_camera";
+            display: block;
+            color: var(--bs-primary);
+            font-size: 1.25rem;
+            line-height: 1.25rem;
+            font-family: "Material Icons";
+        }
+    }
+
+    .filter-container {
+        flex: 1;
+        gap: .25rem;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+
+        .filter-item {
+            flex: 1;
+        }
+
+        .form-label-content {
+            display: flex;
+            align-items: center;
+            gap: .5rem;
+            margin-bottom: .5rem;
+        }
+
+        .form-label {
+            font-size: .875rem;
+            color: var(--gray-500);
+            margin: 0
+        }
+
+        .btn-clear-item {
+            display: inline-flex;
+            align-items: center;
+            font-size: .875rem;
+            padding: 0;
+            background-color: transparent;
+            border: 0;
+            color: var(--red-500);
+            vertical-align: middle;
+            gap: .25rem;
+
+            &::before {
+                font-family: "Material Icons";
+                content: "close";
+            }
+
+            &::after {
+                content: "清除";
+            }
+        }
+    }
+
+
+
+    .media-item {
+        display: flex;
+        justify-content: flex-end;
+        flex-direction: column;
+        position: relative;
+        padding: 0;
+
+        .media-item-header {
+            margin-bottom: 0.25rem;
+            font-size: 0.875rem;
+            display: grid;
+            grid-template-columns: 3px auto 1fr;
+            gap: 0.5rem;
+            line-height: 1.25rem;
+            color: var(--gray-800);
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+            margin-bottom: auto;
+
+            &::before {
+                display: block;
+                content: " ";
+                width: 3px;
+                background-color: var(--bs-primary);
+                border-radius: 99px;
+            }
+        }
+
+        .media-item-body {
+            position: relative;
+            padding: 0;
+            transition: 0.1s ease-out;
+
+            &:has(.multimedia-is-selected) {
+                border: 3px solid rgba(var(--bs-primary-rgb), 0.8);
+                border-radius: calc(var(--bs-border-radius) + 3px);
+                background-color: #fff;
+                transform: scale(0.95);
+
+                .multimedia-preview-content {
+                    transform: scale(0.95);
+                }
+            }
+        }
+
+        .multimedia-select-content {
+            position: absolute;
+            width: 100%;
+            width: -webkit-fill-available;
+
+            .select-control {
+                border: 0;
+                background-color: transparent;
+                top: 0;
+                right: 0;
+                padding: 0.5rem;
+                z-index: 10;
+                margin: 0;
+                position: absolute;
+                user-select: none;
+                transition: opacity 0.2s ease-out;
+
+                &::before {
+                    content: "check";
+                    display: block;
+                    position: absolute;
+                    margin: auto;
+                    color: #fff;
+                    font-size: 1rem;
+                    line-height: 1rem;
+                    opacity: 0.5;
+                    font-family: "Material Icons";
+                    z-index: 10;
+                    width: 1rem;
+                    height: 1rem;
+                    left: calc(50% - 0.5rem);
+                    top: calc(50% - 0.5rem);
+                    transform: translateY(-1px);
+                    transition: opacity 0.2s ease-out;
+                }
+
+                &::after {
+                    opacity: 0.8;
+                    border: 2px solid;
+                    border-color: #ffffff85;
+                    content: " ";
+                    display: block;
+                    width: 1.75rem;
+                    height: 1.75rem;
+                    background-color: rgba(0, 0, 0, 0.2);
+                    border-radius: var(--bs-border-radius);
+                    backdrop-filter: blur(2px);
+                    transition: 0.2s ease-out;
+                }
+
+                &:hover {
+                    cursor: pointer;
+
+                    &::before {
+                        opacity: 1;
+                    }
+                }
+
+                &.multimedia-is-selected {
+                    opacity: 1;
+
+                    &::before {
+                        opacity: 1;
+                    }
+
+                    &::after {
+                        opacity: 1;
+                        background-color: var(--bs-primary);
+                        border-color: #fff;
+                    }
+                }
+            }
+        }
+
+        .multimedia-preview-content {
+            position: relative;
+            display: block;
+            border: 0;
+            background-color: var(--purple-100);
+            width: 100%;
+            padding-top: 100%;
+            overflow: hidden;
+            border-radius: var(--bs-border-radius);
+
+            img {
+                transition: 0.3s ease-out;
+                border-radius: var(--bs-border-radius);
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+        }
+
+        &:hover {
+            cursor: pointer;
+
+            img {
+                transform: scale(1.05);
+            }
+        }
+    }
+
+    .records-preview-table {
+        table-layout: fixed;
+
+        thead {
+            position: sticky;
+            top: 0;
+            z-index: 20;
+        }
+
+        .date-grid {
+            text-align: center;
+            vertical-align: middle;
+            width: 8rem;
+            border-right: 1px solid var(--gray-300);
+        }
+
+        .records-photos {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            padding: .75rem 1rem;
+            background: var(--gray-100);
+            border-radius: var(--bs-border-radius);
+
+            .media-item {
+                background-color: #fff;
+                border-radius: var(--bs-border-radius);
+                border: 3px solid #fff;
+                width: 5rem;
+
+                .select-control {
+                    // 觸控區域調整，兼具勾選便利性和預覽操作的流暢性
+                    padding: 0.25rem 0.25rem 0.5rem 0.5rem;
+
+                    &::before {
+                        left: calc(50% - 0.4rem);
+                        top: calc(50% - 0.6rem);
+
+                    }
+                }
+
+                &:has(.multimedia-is-selected) {
+                    border-radius: var(--bs-border-radius-xl);
+                }
+            }
+        }
+    }
+    .multimedia-list-preview{
+        padding: 0 1rem;
+    }
+    .the-month-content {
+        margin-bottom: 2rem;
+
+        .the-month-content-header {
+            font-size: 1.25rem;
+            border-bottom: 1px solid var(--gray-300);
+            padding-top: 0.75rem;
+            padding-bottom: 0.5rem;
+            margin-bottom: 0.5rem;
+            position: sticky;
+            top: 0;
+            backdrop-filter: blur(2px);
+            background: rgba(255, 255, 255, 0.85);
+            z-index: 10;
+        }
+
+        .the-month-content-body {
+            display: grid;
+            gap: 0.25rem;
+            grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
+        }
+
+    }
+
+    .selected-preview-bar {
+        display: flex;
+        flex-direction: column;
+        border-top: 1px solid var(--gray-300);
+        background-color: var(--gray-100);
+        max-height: 25vh;
+        overflow: hidden;
+        flex-shrink: 0;
+
+        >* {
+            padding: 0.5rem 1rem;
+        }
+
+        .selected-preview-header {
+            border-bottom: 1px solid var(--gray-300);
+            font-size: 0.875rem;
+            color: var(--gray-600);
+            flex-shrink: 0;
+        }
+
+        .selected-preview-body {
+            overflow: auto;
+            background: var(--gray-400);
+        }
+
+        .selected-preview-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.25rem;
+
+            .media-item {
+                height: 6rem;
+                width: 6rem;
+                overflow: hidden;
+            }
+
+            .media-item-body {
+                position: relative;
+                padding: 0;
+                transition: 0.1s ease-out;
+
+                &:has(.multimedia-is-selected) {
+                    transform: scale(1);
+                    border: 3px solid #fff;
+
+                    .multimedia-preview-content {
+                        transform: scale(1);
+                    }
+                }
+            }
+        }
+
+    }
+}
+