ch3chi-commons-vue 1.2.0 → 1.8.1

package/src/components/form/CChangePasswordFormField.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import {onMounted, provide} from 'vue';
+import {CBSModalViewModel, ICBSModalViewType} from "../../model/CBSModalViewModel";
+import {PasswordDataModel} from "../../model/PasswordDataModel";
+import CTextInputFormField from "../../components/form/CTextInputFormField.vue";
+import {ApiResponse} from "../../api/ApiService";
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from "../../model/BSFieldStyleConfig";
+import * as _ from 'lodash';
+
+// ----- properties -----
+const props = withDefaults(defineProps<{
+  userUid: string; // 使用者的 uid
+  requireOldPassword?: boolean; // 是否需要舊密碼欄位
+  dataModelConstructor?: new () => PasswordDataModel; // 密碼資料模型建構子
+  callApi: (dataModel: PasswordDataModel) => Promise<ApiResponse>; // 儲存密碼時要呼叫的 API 函式
+  styleConfig?: IBSFieldStyleConfig; // BS 欄位樣式設定，會傳遞給子組件
+}>(), {
+  requireOldPassword: true,
+});
+const isRequireOldPassword = props.requireOldPassword == true;
+
+// ----- viewModel -----
+const viewModel = new CBSModalViewModel({
+  type: ICBSModalViewType.Form,
+  title: '編輯密碼',
+  onClose
+});
+
+// ----- dataViewModel -----
+const useDataModelConstructor = props.dataModelConstructor || PasswordDataModel;
+const dataViewModel = new useDataModelConstructor({
+  requiredOldPassword: isRequireOldPassword
+});
+dataViewModel.initForm();
+provide('c-formViewModel', dataViewModel);
+
+// BSFieldStyleConfig
+const bStyleConfig = BSFieldStyleConfig.mix({
+  plainTextClass: ''
+}, props.styleConfig);
+
+// ----- event -----
+// 顯示表單
+function doShowForm() {
+  viewModel.show();
+}
+
+function onClose() {
+  // dataViewModel reset form data
+  dataViewModel.resetFormData();
+  viewModel.hide();
+}
+
+// save 密碼
+async function doSave() {
+  if(!props.callApi) {
+    console.error('請提供 callApi 屬性以處理密碼儲存邏輯');
+    return;
+  }
+
+  // 驗證表單
+  const {valid, errors} = await dataViewModel.validateForm();
+  if (!valid) {
+    console.error('表單驗證失敗:', errors);
+    return;
+  }
+
+  // 在這裡處理密碼儲存邏輯
+  const response = await props.callApi(dataViewModel);
+  if(!response.isOk()) {
+    console.error('儲存密碼失敗:', response.nativeError);
+    return;
+  }
+  viewModel.hide();
+}
+
+// ----- LifeCycle -----
+onMounted(() => {
+
+});
+
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label :class="bStyleConfig.checkboxLabelClass">密碼</label>
+    <div class="mb-2">
+      <button type="button" :class="bStyleConfig.changePasswordButtonClass" @click.prevent.stop="doShowForm">
+        <i :class="bStyleConfig.changePasswordButtonIcon"></i>編輯密碼
+      </button>
+    </div>
+  </div>
+  <teleport to="body">
+    <div :id="viewModel.modalId" class="modal fade c-modal-form c-changePwd-form" tabindex="-1"
+         :aria-labelledby="viewModel.labelId"
+         aria-hidden="true" v-cbs-modal="viewModel">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" :id='viewModel.labelId'>{{viewModel.title}}</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <div class="mb-3">
+              <form>
+                <div v-if="isRequireOldPassword" class="row mb-3">
+                  <div class="col-md-12">
+                    <CTextInputFormField label="舊密碼" name="oldPassword"
+                                         type="password"
+                                         autocomplete="off"
+                                         :styleConfig="props.styleConfig"/>
+                  </div>
+                </div>
+                <div class="row mb-3">
+                  <div class="col-md-12">
+                    <CTextInputFormField label="新密碼" name="newPassword"
+                                         type="password"
+                                         autocomplete="new-password"
+                                         :styleConfig="props.styleConfig"/>
+                  </div>
+                </div>
+                <div class="row mb-3">
+                  <div class="col-md-12">
+                    <CTextInputFormField label="確認新密碼" name="confirmNewPassword"
+                                         type="password"
+                                         autocomplete="new-password"
+                                         :styleConfig="props.styleConfig"
+                                         @keydown.enter="doSave"/>
+                  </div>
+                </div>
+              </form>
+            </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.prevent.stop="doSave">送出</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/form/CCheckBoxFormField.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useCheckBoxFormField } from '../../composables/useCheckBoxFormField'
+import { COptionItem } from '../../model/FormOptions'
+import { IBSFieldStyleConfig } from '../../model/BSFieldStyleConfig'
+
+const props = withDefaults(defineProps<{
+  /**
+   * Checkbox 欄位的標籤文字
+   */
+  label?: string
+  /**
+   * Checkbox 欄位是否為必填
+   */
+  required?: boolean
+  /**
+   * Checkbox 欄位是否為必填 (響應式)
+   */
+  requiredReactive?: boolean
+  /**
+   * Checkbox 欄位的名稱，為 form field 的 name 屬性
+   */
+  name: string
+  /**
+   * Checkbox 選項集
+   */
+  optionList: COptionItem[]
+  /**
+   * 是否為閱讀模式，若為 true 則只顯示選項文字，不顯示 Checkbox 按鈕
+   */
+  readMode?: boolean
+  /**
+   * BS 欄位樣式設定
+   */
+  styleConfig?: IBSFieldStyleConfig
+}>(), {
+  requiredReactive: undefined
+})
+
+const {
+  useOptionList,
+  viewModel,
+  bStyleConfig,
+  fieldModel,
+  fieldRef,
+  isRequired,
+  isReadMode,
+  selectedText,
+  hasFormFieldError
+} = useCheckBoxFormField(props)
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :class="bStyleConfig.labelClass">
+      {{props.label}}
+      <span v-if="isRequired" :class="bStyleConfig.requiredLabelClass">{{bStyleConfig.requiredLabelText}}</span>
+    </label>
+    <template v-if="isReadMode">
+      <div>
+        <span :class="bStyleConfig.plainTextClass">
+          {{ selectedText }}
+        </span>
+        <input type="hidden" :name="props.name" v-model="fieldRef"/>
+      </div>
+    </template>
+    <template v-else>
+      <div>
+        <div :class="bStyleConfig.checkboxWrapperClass"
+             v-for="optionItem in useOptionList" :key="optionItem.id">
+          <input type="checkbox" :class="bStyleConfig.checkboxClass"
+                 :id="optionItem.id"
+                 :name="props.name"
+                 :value="optionItem.value"
+                 v-model="fieldRef"
+                 v-form-invalid="fieldModel">
+          <label :class="bStyleConfig.checkboxLabelClass" :for="optionItem.id">{{optionItem.text}}</label>
+        </div>
+        <div v-if="hasFormFieldError(fieldModel)" :class="bStyleConfig.errorClass">
+          {{ fieldModel.errorMessage }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.c-multiline-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

package/src/components/form/CCheckBoxPlatFormField.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useCheckBoxFormField } from '../../composables/useCheckBoxFormField'
+import { COptionItem } from '../../model/FormOptions'
+import { IBSFieldStyleConfig } from '../../model/BSFieldStyleConfig'
+
+const props = withDefaults(defineProps<{
+  /**
+   * Checkbox 欄位的標籤文字
+   */
+  label?: string
+  /**
+   * Checkbox 欄位是否為必填
+   */
+  required?: boolean
+  /**
+   * Checkbox 欄位是否為必填 (響應式)
+   */
+  requiredReactive?: boolean
+  /**
+   * Checkbox 欄位的名稱，為 form field 的 name 屬性
+   */
+  name: string
+  /**
+   * Checkbox 選項集
+   */
+  optionList: COptionItem[]
+  /**
+   * 是否為閱讀模式，若為 true 則只顯示選項文字，不顯示 Checkbox 按鈕
+   */
+  readMode?: boolean
+  /**
+   * BS 欄位樣式設定
+   */
+  styleConfig?: IBSFieldStyleConfig
+}>(), {
+  requiredReactive: undefined
+})
+
+const {
+  useOptionList,
+  viewModel,
+  bStyleConfig,
+  fieldModel,
+  fieldRef,
+  isRequired,
+  isReadMode,
+  selectedText,
+  hasFormFieldError
+} = useCheckBoxFormField(props)
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :class="bStyleConfig.labelClass">
+      {{props.label}}
+      <span v-if="isRequired" :class="bStyleConfig.requiredLabelClass">{{bStyleConfig.requiredLabelText}}</span>
+    </label>
+    <template v-if="isReadMode">
+      <div>
+        <span :class="bStyleConfig.plainTextClass">
+          {{ selectedText }}
+        </span>
+        <input type="hidden" :name="props.name" v-model="fieldRef"/>
+      </div>
+    </template>
+    <template v-else>
+      <div>
+        <div :class="bStyleConfig.checkboxWrapperClass"
+             v-for="optionItem in useOptionList" :key="optionItem.id">
+          <label :class="bStyleConfig.checkboxLabelClass" :for="optionItem.id">
+            <input type="checkbox" :class="bStyleConfig.checkboxClass"
+                   :id="optionItem.id"
+                   :name="props.name"
+                   :value="optionItem.value"
+                   v-model="fieldRef"
+                   v-form-invalid="fieldModel">
+            {{optionItem.text}}
+            <i :class="bStyleConfig.checkboxHelperIconClass"></i>
+          </label>
+        </div>
+        <div v-if="hasFormFieldError(fieldModel)" :class="bStyleConfig.errorClass">
+          {{ fieldModel.errorMessage }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.c-multiline-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

package/src/components/form/CDateFormField.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import {computed, inject, nextTick, onMounted, ref, Ref, watch} from "vue";
+import flatpickr from "flatpickr";
+import "flatpickr/dist/flatpickr.min.css";
+import {Mandarin} from "flatpickr/dist/l10n/zh.js";
+import {v4 as uuidv4} from 'uuid';
+import {BaseFormDataModel, hasFormFieldError} from "../../model/BaseFormDataModel";
+import {EmptyDataModel} from "../../model/EmptyDataModel";
+import * as _ from 'lodash';
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from "../../model/BSFieldStyleConfig";
+
+// ----- props -----
+const props = withDefaults(defineProps<{
+  id?: string; // 欄位 ID
+  label?: string; // 欄位標籤
+  name: string; // 欄位名稱
+  required?: boolean; // 是否為必填
+  requiredReactive?: boolean; // 是否為必填 (響應式)
+  placeholder?: string; // placeholder
+  readMode?: boolean; // 是否為閱讀模式
+  timeType?: 'startOfDay' | 'endOfDay'; // 時間型態
+  styleConfig?: IBSFieldStyleConfig; // 樣式設定
+}>(), {
+  requiredReactive: undefined
+});
+
+// ----- view model -----
+const viewModel = inject('c-formViewModel', new EmptyDataModel()) as BaseFormDataModel;
+if(!viewModel) {
+  console.error('CDateRangeFormField: viewModel not found, please provide "c-formViewModel" in parent component');
+}
+
+// BSFieldStyleConfig
+const bStyleConfig = BSFieldStyleConfig.mix({}, props.styleConfig);
+
+// ----- form field -----
+const formFieldMap = viewModel.formFieldMap;
+const dataField = _.get(formFieldMap, props.name);
+const dateFieldRef = dataField?.value as Ref<Date | null>;
+
+// ----- 控制項 attribute -----
+const componentId = props.id || 'datePicker-' + uuidv4();
+const triggerBtnId = props.id || `date-picker-btn-${uuidv4()}`;
+const dateBtn = ref<HTMLButtonElement | null>(null);
+const flatpickrInstance = ref<any>(null);
+const isRequired = computed(() => {
+  if (typeof props.requiredReactive === 'boolean') {
+    return props.requiredReactive;
+  }
+  return props.required || viewModel.fieldIsRequired(props.name);
+});
+const isReadMode = props.readMode == true || false;
+
+// ----- event handler -----
+// 切換 flatpickr 的開啟/關閉狀態
+function toggleFlatpickr() {
+  if(flatpickrInstance.value?.isOpen) {
+    flatpickrInstance.value?.close();
+  } else {
+    flatpickrInstance.value?.open();
+  }
+}
+
+// 清除選取的日期
+function clearDate() {
+  dateFieldRef.value = null;
+  if (flatpickrInstance.value) {
+    flatpickrInstance.value.clear();
+  }
+}
+
+// ----- watch -----
+// 監聽 dateFieldRef 的變化，更新 flatpickr 的選取日期
+watch(dateFieldRef, (newDate) => {
+  const instance = flatpickrInstance.value;
+  if(!instance || _.isEmpty(instance)) {
+    return;
+  }
+  instance?.setDate(newDate, false); // 第二個參數 false 表示不觸發 onChange 事件
+});
+
+// ----- LifeCycle -----
+onMounted(() => {
+  nextTick(() => {
+    flatpickrInstance.value = flatpickr(`#${triggerBtnId}`, {
+      mode: "single", // 啟用日期區間選擇
+      dateFormat: "Y-m-d", // 日期格式
+      locale: Mandarin, // 設定語系為中文
+      onChange: (selectedDates) => {
+        if (selectedDates.length === 1) {
+          // 更新開始和結束日期
+          const selectedDate = selectedDates[0];
+          if(props.timeType === 'startOfDay') {
+            selectedDate.setHours(0, 0, 0, 0); // 設定時間為 00:00:00
+          }
+          else if(props.timeType === 'endOfDay') {
+            selectedDate.setHours(23, 59, 59, 999); // 設定時間為 23:59:59
+          }
+          dateFieldRef.value = selectedDate;
+        }
+      }
+    });
+  })
+});
+
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :for="triggerBtnId" :class="bStyleConfig.labelClass">
+      {{ props.label }}
+      <span v-if="isRequired" :class="bStyleConfig.requiredLabelClass">{{bStyleConfig.requiredLabelText}}</span>
+    </label>
+    <template v-if="isReadMode">
+      <div :id="componentId">
+        <span :class="bStyleConfig.plainTextClass" v-date-formatter="dateFieldRef"></span>
+      </div>
+      <input type="hidden" :name="props.name" v-model="dateFieldRef"/>
+    </template>
+    <template v-else>
+      <div :class="bStyleConfig.wrapperClass">
+        <button type="button" class="btn btn-outline-secondary c-calendar-btn"
+                ref="dateBtn"
+                :id="triggerBtnId" @click.prevent.stop>
+          <i :class="bStyleConfig.calendarIconClass"></i>
+        </button>
+        <input type="text" :class="bStyleConfig.inputClass"
+               :placeholder="props.placeholder"
+               readonly
+               v-date-formatter="dateFieldRef"
+               v-form-invalid="dataField"
+               @click.prevent.stop="toggleFlatpickr">
+        <!-- 當 valueRef 有值時，顯示清除按鈕 -->
+        <button v-if="dateFieldRef" type="button" class="btn btn-outline-secondary c-calendar-btn"
+                title="清除"
+                @click.prevent.stop="clearDate">
+          <i :class="bStyleConfig.calendarClearIconClass"></i>
+        </button>
+      </div>
+      <div v-if="hasFormFieldError(dataField)" :class="bStyleConfig.errorClass" >
+        {{ dataField?.errorMessage }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/form/CDateQueryField.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import {nextTick, onMounted, Ref, ref, watch} from "vue";
+import flatpickr from "flatpickr";
+import "flatpickr/dist/flatpickr.min.css";
+import {Mandarin} from "flatpickr/dist/l10n/zh.js";
+import {v4 as uuidv4} from 'uuid';
+import _ from "lodash";
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from "../../model/BSFieldStyleConfig";
+
+// ----- props -----
+const props = withDefaults(defineProps<{
+  id?: string; // 欄位 ID
+  label?: string; // 欄位標籤
+  model: any; // query parameter 實體
+  name: string; // 欄位名稱
+  placeholder?: string; // placeholder
+  timeType?: 'startOfDay' | 'endOfDay'; // 時間類型，決定時間部分的預設值
+  styleConfig?: IBSFieldStyleConfig; // BS 欄位樣式設定
+}>(), {
+  label: "選擇日期",
+});
+
+// BSFieldStyleConfig
+const bStyleConfig = BSFieldStyleConfig.mix({}, props.styleConfig);
+
+// ----- value ref -----
+const valueRef = ref(_.get(props.model, props.name) || null) as Ref<Date | null>;
+watch(valueRef, (newValue) => {
+  _.set(props.model, props.name, newValue);
+});
+//
+watch(() => props.model, (newModel) => {
+  valueRef.value = _.get(newModel, props.name) || null;
+}, {deep: true});
+
+// ----- 控制項 attribute -----
+const triggerBtnId = props.id || `date-picker-btn-${uuidv4()}`;
+const dateBtn = ref<HTMLButtonElement | null>(null);
+const flatpickrInstance = ref<any>(null);
+
+// ----- event handler -----
+function toggleFlatpickr() {
+  if(flatpickrInstance.value?.isOpen) {
+    flatpickrInstance.value?.close();
+  } else {
+    flatpickrInstance.value?.open();
+  }
+}
+
+function clearDate() {
+  valueRef.value = null;
+  if (flatpickrInstance.value) {
+    flatpickrInstance.value.clear();
+  }
+}
+
+// ----- LifeCycle -----
+onMounted(() => {
+  nextTick(() => {
+    flatpickrInstance.value = flatpickr(`#${triggerBtnId}`, {
+      mode: "single", // 啟用日期區間選擇
+      dateFormat: "Y-m-d", // 日期格式
+      locale: Mandarin, // 設定語系為中文
+      onChange: (selectedDates) => {
+        console.log('Selected Dates:', selectedDates);
+        if (selectedDates.length === 1) {
+          // 更新開始和結束日期
+          const selectedDate = selectedDates[0];
+          if(props.timeType === 'startOfDay') {
+            selectedDate.setHours(0, 0, 0, 0); // 設定時間為 00:00:00
+          }
+          else if(props.timeType === 'endOfDay') {
+            selectedDate.setHours(23, 59, 59, 999); // 設定時間為 23:59:59
+          }
+          valueRef.value = selectedDate;
+        }
+      }
+    });
+  })
+});
+
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :for="triggerBtnId" :class="bStyleConfig.labelClass">
+      {{ props.label }}
+    </label>
+    <div :class="bStyleConfig.wrapperClass">
+      <button type="button" class="btn btn-outline-secondary"
+              ref="dateBtn"
+              :id="triggerBtnId" @click.prevent.stop>
+        <font-icon icon="calendar-days"/>
+      </button>
+      <input type="text" :class="bStyleConfig.inputClass" :placeholder="props.placeholder" readonly
+             v-date-formatter="valueRef"
+             v-form-invalid="valueRef"
+             @click.prevent.stop="toggleFlatpickr" />
+      <!-- 當 valueRef 有值時，顯示清除按鈕 -->
+      <button v-if="valueRef" type="button" class="btn btn-outline-secondary"
+              title="清除日期"
+              @click.prevent.stop="clearDate">
+        <font-icon icon="times"/>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>