feat(web): port field preview template (#942)

leancloud · Oct 24, 2023 · 01dced6 · 01dced6
1 parent 1286a95
commit 01dced6
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 18 deletions.
diff --git a/next/web/package-lock.json b/next/web/package-lock.json
diff --git a/next/web/package.json b/next/web/package.json
@@ -24,7 +24,9 @@
     "antd": "^4.24.8",
     "axios": "^0.24.0",
     "classnames": "^2.3.1",
+    "dompurify": "^3.0.6",
     "github-markdown-css": "^5.1.0",
+    "handlebars": "^4.7.8",
     "highlight.js": "^11.6.0",
     "immer": "^9.0.12",
     "lodash-es": "^4.17.21",
@@ -48,6 +50,7 @@
   },
   "devDependencies": {
     "@hookform/devtools": "^4.0.2",
+    "@types/dompurify": "^3.0.4",
     "@types/lodash-es": "^4.17.5",
     "@types/react": "^17.0.38",
     "@types/react-beautiful-dnd": "^13.1.2",

diff --git a/next/web/src/App/Admin/Tickets/Ticket/TicketDetail.tsx b/next/web/src/App/Admin/Tickets/Ticket/TicketDetail.tsx
@@ -117,7 +117,11 @@ export function TicketDetail() {
               disabled={updating}
             />
 
-            <CustomFieldsSection ticketId={ticket.id} categoryId={ticket.categoryId} />
+            <CustomFieldsSection
+              ticketId={ticket.id}
+              categoryId={ticket.categoryId}
+              author={ticket.author}
+            />
 
             <MetadataSection metadata={ticket.metaData} />
           </Col>
@@ -314,15 +318,17 @@ function transformField(field: TicketField_v1) {
     type: field.type,
     label: field.variants[0]?.title || 'unknown',
     options: field.variants[0]?.options?.map(([value, label]) => ({ label, value })),
+    previewTemplate: field.preview_template,
   };
 }
 
 interface CustomFieldsSectionProps {
   ticketId: string;
   categoryId: string;
+  author?: UserSchema;
 }
 
-function CustomFieldsSection({ ticketId, categoryId }: CustomFieldsSectionProps) {
+function CustomFieldsSection({ ticketId, categoryId, author }: CustomFieldsSectionProps) {
   const { data: formFieldIds, isLoading: loadingFormFieldIds } = useFormFieldIds(categoryId);
 
   const { data: fieldValues, isLoading: loadingFieldValues } = useTicketFieldValues(ticketId);
@@ -382,6 +388,7 @@ function CustomFieldsSection({ ticketId, categoryId }: CustomFieldsSectionProps)
             values={fieldValueMap}
             updating={updating}
             onChange={handleUpdate}
+            user={author}
           />
         </>
       )}
@@ -393,6 +400,7 @@ function CustomFieldsSection({ ticketId, categoryId }: CustomFieldsSectionProps)
             values={fieldValueMap}
             updating={updating}
             onChange={handleUpdate}
+            user={author}
           />
         </>
       )}

diff --git a/next/web/src/App/Admin/Tickets/Ticket/api1.tsx b/next/web/src/App/Admin/Tickets/Ticket/api1.tsx
@@ -51,6 +51,7 @@ export interface TicketField_v1 {
     title: string;
     options?: [string, string][];
   }[];
+  preview_template?: string;
 }
 
 export function useTicketFields_v1(