From 5146bd04dfc9ba26fc0604ec4fdd4dc44a59c919 Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Thu, 16 Sep 2021 19:47:41 +0200
Subject: [PATCH] Added label support to tagpicker

---
 package.json                           | 34 +++++++++++++++++++++-----
 src/viewpanel/components/Metadata.tsx  |  2 ++
 src/viewpanel/components/TagPicker.tsx |  7 +++---
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 388ba53b..8b24208c 100644
--- a/package.json
+++ b/package.json
@@ -118,7 +118,10 @@
 							}
 						},
 						"additionalProperties": false,
-						"required": ["title", "path"]
+						"required": [
+							"title",
+							"path"
+						]
 					},
 					"scope": "Content"
 				},
@@ -149,7 +152,10 @@
 							}
 						},
 						"additionalProperties": false,
-						"required": ["title", "script"]
+						"required": [
+							"title",
+							"script"
+						]
 					},
 					"scope": "Custom scripts"
 				},
@@ -293,7 +299,10 @@
 					"scope": "Templates"
 				},
 				"frontMatter.taxonomy.contentTypes": {
-					"type": ["array", "null"],
+					"type": [
+						"array",
+						"null"
+					],
 					"markdownDescription": "Specify the type of contents you want to use for your articles/pages/etc. Make sure the `type` is correctly set in your front matter. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.taxonomy.contentTypes)",
 					"items": {
 						"type": "object",
@@ -312,7 +321,14 @@
 									"properties": {
 										"type": {
 											"type": "string",
-											"enum": ["string", "datetime", "boolean", "image", "tags", "categories"],
+											"enum": [
+												"string",
+												"datetime",
+												"boolean",
+												"image",
+												"tags",
+												"categories"
+											],
 											"description": "Define the type of field"
 										},
 										"name": {
@@ -325,12 +341,18 @@
 										}
 									},
 									"additionalProperties": false,
-									"required": ["type", "name"]
+									"required": [
+										"type",
+										"name"
+									]
 								}
 							}
 						},
 						"additionalProperties": false,
-						"required": ["name", "fields"]
+						"required": [
+							"name",
+							"fields"
+						]
 					},
 					"default": [
 						{
diff --git a/src/viewpanel/components/Metadata.tsx b/src/viewpanel/components/Metadata.tsx
index 38b22875..1a790435 100644
--- a/src/viewpanel/components/Metadata.tsx
+++ b/src/viewpanel/components/Metadata.tsx
@@ -117,6 +117,7 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
           <TagPicker 
             key={field.name}
             type={TagType.tags} 
+            label={field.title || field.name}
             icon={<TagIcon />}
             crntSelected={metadata[field.name] as string[] || []} 
             options={settings?.tags || []} 
@@ -129,6 +130,7 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
           <TagPicker 
             key={field.name}
             type={TagType.categories}
+            label={field.title || field.name}
             icon={<ListUnorderedIcon />}
             crntSelected={metadata.categories as string[] || []} 
             options={settings.categories} 
diff --git a/src/viewpanel/components/TagPicker.tsx b/src/viewpanel/components/TagPicker.tsx
index 0d19e065..877515e5 100644
--- a/src/viewpanel/components/TagPicker.tsx
+++ b/src/viewpanel/components/TagPicker.tsx
@@ -11,6 +11,7 @@ import { MessageHelper } from '../../helpers/MessageHelper';
 export interface ITagPickerProps {
   type: string;
   icon: JSX.Element;
+  label?: string;
   crntSelected: string[];
   options: string[];
   freeform: boolean;
@@ -20,7 +21,7 @@ export interface ITagPickerProps {
 }
 
 export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
-  const { icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable } = props;
+  const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable } = props;
   const [ selected, setSelected ] = React.useState<string[]>([]);
   const [ inputValue, setInputValue ] = React.useState<string>("");
   const prevSelected = usePrevious(crntSelected);
@@ -130,7 +131,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
     <div className={`article__tags`}>      
       <VsLabel>
         <div className={`metadata_field__label`}>
-          {icon} <span style={{ lineHeight: "16px"}}>{type}</span>
+          {icon} <span style={{ lineHeight: "16px"}}>{label || type}</span>
         </div>
       </VsLabel>
 
@@ -157,7 +158,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
                             }
                           })
                        }
-                       placeholder={`Pick your ${type.toLowerCase()}`} />
+                       placeholder={`Pick your ${label || type.toLowerCase()}`} />
                 
                 {
                   freeform && (