From 3b9a5a61b2f76616c06eafc6f37b6196916e9c38 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 23 Dec 2024 16:10:15 -0500
Subject: [PATCH] Add color picker and image upload form items (#2031)

Co-authored-by: github-actions <github-actions@github.com>
---
 src/components/common/FormColorPicker.vue | 35 ++++++++++
 src/components/common/FormImageUpload.vue | 80 +++++++++++++++++++++++
 src/components/common/FormItem.vue        |  6 ++
 src/locales/en/main.json                  |  3 +-
 src/locales/ja/main.json                  |  1 +
 src/locales/ko/main.json                  |  1 +
 src/locales/ru/main.json                  |  1 +
 src/locales/zh/main.json                  |  1 +
 src/types/settingTypes.ts                 |  2 +
 9 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 src/components/common/FormColorPicker.vue
 create mode 100644 src/components/common/FormImageUpload.vue

diff --git a/src/components/common/FormColorPicker.vue b/src/components/common/FormColorPicker.vue
new file mode 100644
index 0000000000..44ee382d8b
--- /dev/null
+++ b/src/components/common/FormColorPicker.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="color-picker-wrapper flex items-center gap-2">
+    <ColorPicker v-model="modelValue">
+      <template #header>
+        <div class="flex items-center justify-between p-2">
+          <span>{{ props.label }}</span>
+          <Button
+            v-if="props.defaultValue"
+            icon="pi pi-refresh"
+            text
+            size="small"
+            @click="resetColor"
+          />
+        </div>
+      </template>
+    </ColorPicker>
+    <InputText v-model="modelValue" class="w-28" :placeholder="label" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ColorPicker from 'primevue/colorpicker'
+import InputText from 'primevue/inputtext'
+
+const modelValue = defineModel<string>('modelValue')
+const props = defineProps<{
+  defaultValue?: string
+  label?: string
+}>()
+
+const resetColor = () => {
+  modelValue.value = props.defaultValue || '#000000'
+}
+</script>
diff --git a/src/components/common/FormImageUpload.vue b/src/components/common/FormImageUpload.vue
new file mode 100644
index 0000000000..7d5e8d9d0b
--- /dev/null
+++ b/src/components/common/FormImageUpload.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="image-upload-wrapper">
+    <div class="flex gap-2 items-center">
+      <div
+        class="preview-box border rounded p-2 w-16 h-16 flex items-center justify-center"
+        :class="{ 'bg-gray-100 dark:bg-gray-800': !modelValue }"
+      >
+        <img
+          v-if="modelValue"
+          :src="modelValue"
+          class="max-w-full max-h-full object-contain"
+        />
+        <i v-else class="pi pi-image text-gray-400 text-xl"></i>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <Button
+          icon="pi pi-upload"
+          :label="$t('g.upload')"
+          size="small"
+          @click="triggerFileInput"
+        />
+        <Button
+          v-if="modelValue"
+          class="w-full"
+          outlined
+          icon="pi pi-trash"
+          severity="danger"
+          size="small"
+          @click="clearImage"
+        />
+      </div>
+    </div>
+    <input
+      ref="fileInput"
+      type="file"
+      class="hidden"
+      accept="image/*"
+      @change="handleFileUpload"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Button from 'primevue/button'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const triggerFileInput = () => {
+  fileInput.value?.click()
+}
+
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files[0]) {
+    const file = target.files[0]
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      emit('update:modelValue', e.target?.result as string)
+    }
+    reader.readAsDataURL(file)
+  }
+}
+
+const clearImage = () => {
+  emit('update:modelValue', '')
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+</script>
diff --git a/src/components/common/FormItem.vue b/src/components/common/FormItem.vue
index df7da773c0..863f6346e6 100644
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -31,6 +31,8 @@ import Select from 'primevue/select'
 import ToggleSwitch from 'primevue/toggleswitch'
 import CustomFormValue from '@/components/common/CustomFormValue.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
+import FormImageUpload from '@/components/common/FormImageUpload.vue'
+import FormColorPicker from '@/components/common/FormColorPicker.vue'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{
@@ -82,6 +84,10 @@ function getFormComponent(item: FormItem): Component {
       return InputSlider
     case 'combo':
       return Select
+    case 'image':
+      return FormImageUpload
+    case 'color':
+      return FormColorPicker
     default:
       return InputText
   }
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 12e2ca065f..05092dd479 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -63,7 +63,8 @@
     "enableAll": "Enable All",
     "disableAll": "Disable All",
     "command": "Command",
-    "keybinding": "Keybinding"
+    "keybinding": "Keybinding",
+    "upload": "Upload"
   },
   "color": {
     "default": "Default",
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index 4eb3093eb9..e1062cb1b2 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -126,6 +126,7 @@
     "showReport": "レポートを表示",
     "systemInfo": "システム情報",
     "terminal": "ターミナル",
+    "upload": "アップロード",
     "videoFailedToLoad": "ビデオの読み込みに失敗しました"
   },
   "graphCanvasMenu": {
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 62bd5ea5a5..b5ddd550cf 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -126,6 +126,7 @@
     "showReport": "보고서 보기",
     "systemInfo": "시스템 정보",
     "terminal": "터미널",
+    "upload": "업로드",
     "videoFailedToLoad": "비디오를 로드하지 못했습니다."
   },
   "graphCanvasMenu": {
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index b1484d651a..d575dd0749 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -126,6 +126,7 @@
     "showReport": "Показать отчет",
     "systemInfo": "Информация о системе",
     "terminal": "Терминал",
+    "upload": "Загрузить",
     "videoFailedToLoad": "Не удалось загрузить видео"
   },
   "graphCanvasMenu": {
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 5054fa3be0..a9bb13ed84 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -126,6 +126,7 @@
     "showReport": "显示报告",
     "systemInfo": "系统信息",
     "terminal": "终端",
+    "upload": "上传",
     "videoFailedToLoad": "视频加载失败"
   },
   "graphCanvasMenu": {
diff --git a/src/types/settingTypes.ts b/src/types/settingTypes.ts
index 34251496c2..ec2ea60b20 100644
--- a/src/types/settingTypes.ts
+++ b/src/types/settingTypes.ts
@@ -6,6 +6,8 @@ export type SettingInputType =
   | 'slider'
   | 'combo'
   | 'text'
+  | 'image'
+  | 'color'
   | 'hidden'
 
 export type SettingCustomRenderer = (