Local preview
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index 697ad3cb..389f32a1 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -8,7 +8,6 @@ import { Toggle } from './Fields/Toggle';
import { SymbolKeywordIcon } from './Icons/SymbolKeywordIcon';
import { TagIcon } from './Icons/TagIcon';
import { TagPicker } from './TagPicker';
-import { parseJSON } from 'date-fns';
import { DateTimeField } from './Fields/DateTimeField';
import { TextField } from './Fields/TextField';
import "react-datepicker/dist/react-datepicker.css";
@@ -17,6 +16,8 @@ import { ListUnorderedIcon } from './Icons/ListUnorderedIcon';
import { NumberField } from './Fields/NumberField';
import { ChoiceField } from './Fields/ChoiceField';
import useContentType from '../../hooks/useContentType';
+import { DateHelper } from '../../helpers/DateHelper';
+import FieldBoundary from './ErrorBoundary/FieldBoundary';
export interface IMetadataProps {
settings: PanelSettings | undefined;
@@ -39,11 +40,9 @@ export const Metadata: React.FunctionComponent
= ({settings, met
});
};
- const getDate = (date: string | Date) => {
- if (typeof date === 'string') {
- return parseJSON(date);
- }
- return date;
+ const getDate = (date: string | Date): Date | null => {
+ const parsedDate = DateHelper.tryParse(date, settings?.date?.format);
+ return parsedDate || date as Date | null;
}
if (!settings) {
@@ -64,20 +63,23 @@ export const Metadata: React.FunctionComponent = ({settings, met
const dateValue = metadata[field.name] ? getDate(metadata[field.name] as string) : null;
return (
- sendUpdate(field.name, date))} />
+
+ sendUpdate(field.name, date))} />
+
);
} else if (field.type === 'boolean') {
return (
- sendUpdate(field.name, checked)} />
+
+ sendUpdate(field.name, checked)} />
+
);
} else if (field.type === 'string') {
const textValue = metadata[field.name];
@@ -90,14 +92,15 @@ export const Metadata: React.FunctionComponent = ({settings, met
}
return (
- sendUpdate(field.name, value)}
- value={textValue as string || null} />
+
+ sendUpdate(field.name, value)}
+ value={textValue as string || null} />
+
);
} else if (field.type === 'number') {
const fieldValue = metadata[field.name];
@@ -107,61 +110,67 @@ export const Metadata: React.FunctionComponent = ({settings, met
}
return (
- sendUpdate(field.name, value)}
- value={nrValue} />
+
+ sendUpdate(field.name, value)}
+ value={nrValue} />
+
);
} else if (field.type === 'image') {
return (
- sendUpdate(field.name, value))} />
+
+ sendUpdate(field.name, value))} />
+
);
} else if (field.type === 'choice') {
const choices = field.choices || [];
const choiceValue = metadata[field.name];
return (
- sendUpdate(field.name, value))} />
+
+ sendUpdate(field.name, value))} />
+
);
} else if (field.type === 'tags') {
return (
- }
- crntSelected={metadata[field.name] as string[] || []}
- options={settings?.tags || []}
- freeform={settings.freeform}
- focussed={focusElm === TagType.tags}
- unsetFocus={unsetFocus} />
+
+ }
+ crntSelected={metadata[field.name] as string[] || []}
+ options={settings?.tags || []}
+ freeform={settings.freeform}
+ focussed={focusElm === TagType.tags}
+ unsetFocus={unsetFocus} />
+
);
} else if (field.type === 'categories') {
return (
- }
- crntSelected={metadata.categories as string[] || []}
- options={settings.categories}
- freeform={settings.freeform}
- focussed={focusElm === TagType.categories}
- unsetFocus={unsetFocus} />
+
+ }
+ crntSelected={metadata.categories as string[] || []}
+ options={settings.categories}
+ freeform={settings.freeform}
+ focussed={focusElm === TagType.categories}
+ unsetFocus={unsetFocus} />
+
);
} else {
return null;
diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx
index 2afdba20..9be777ef 100644
--- a/src/panelWebView/components/TagPicker.tsx
+++ b/src/panelWebView/components/TagPicker.tsx
@@ -83,7 +83,7 @@ export const TagPicker: React.FunctionComponent = (props: React
if (selectedItem) {
let value = selectedItem || "";
- const item = options.find(o => o.toLowerCase() === selectedItem.toLowerCase());
+ const item = options.find(o => o?.toLowerCase() === selectedItem?.toLowerCase());
if (item) {
value = item;
}
@@ -187,7 +187,7 @@ export const TagPicker: React.FunctionComponent = (props: React
a.toLowerCase() < b.toLowerCase() ? -1 : 1 )}
+ values={(selected || []).sort((a: string, b: string) => a?.toLowerCase() < b?.toLowerCase() ? -1 : 1 )}
onRemove={onRemove}
onCreate={onCreate}
options={options}
diff --git a/src/panelWebView/components/Tags.tsx b/src/panelWebView/components/Tags.tsx
index f60dbf15..9a5091a3 100644
--- a/src/panelWebView/components/Tags.tsx
+++ b/src/panelWebView/components/Tags.tsx
@@ -16,17 +16,24 @@ export const Tags: React.FunctionComponent = (props: React.PropsWith
const knownTags = values.filter(v => options.includes(v));
const unknownTags = values.filter(v => !options.includes(v));
+
+ const generateKey = (tag: string, idx: number) => {
+ if (tag) {
+ return `${tag.replace(/ /g, "_")}-${idx}`;
+ }
+ return `tag-${idx}`;
+ };
return (
{
- knownTags.map(t => (
-
+ knownTags.map((t, idx) => (
+
))
}
{
- unknownTags.map(t => (
-
+ unknownTags.map((t, idx) => (
+
))
}
diff --git a/src/panelWebView/components/VscodeComponents.ts b/src/panelWebView/components/VscodeComponents.ts
index 113587bb..2cddfe86 100644
--- a/src/panelWebView/components/VscodeComponents.ts
+++ b/src/panelWebView/components/VscodeComponents.ts
@@ -1,5 +1,6 @@
import {wrapWc} from 'wc-react';
+// @bendera/vscode-webview-elements
export const VsTable = wrapWc(`vscode-table`);
export const VsTableHeader = wrapWc(`vscode-table-header`);
export const VsTableHeaderCell = wrapWc(`vscode-table-header-cell`);
@@ -7,5 +8,7 @@ export const VsTableBody = wrapWc(`vscode-table-body`);
export const VsTableRow = wrapWc(`vscode-table-row`);
export const VsTableCell = wrapWc(`vscode-table-cell`);
export const VsCollapsible = wrapWc(`vscode-collapsible`);
-export const VsCheckbox = wrapWc(`vscode-checkbox`);
-export const VsLabel = wrapWc(`vscode-label`);
\ No newline at end of file
+export const VsLabel = wrapWc(`vscode-label`);
+
+// @vscode/webview-ui-toolkit
+export const VsCheckbox = wrapWc(`vscode-checkbox`);
\ No newline at end of file
diff --git a/src/panelWebView/index.tsx b/src/panelWebView/index.tsx
index 6e8c6157..eb3242d5 100644
--- a/src/panelWebView/index.tsx
+++ b/src/panelWebView/index.tsx
@@ -13,13 +13,20 @@ import '@bendera/vscode-webview-elements/dist/vscode-table-body';
import '@bendera/vscode-webview-elements/dist/vscode-table-row';
import '@bendera/vscode-webview-elements/dist/vscode-table-cell';
import '@bendera/vscode-webview-elements/dist/vscode-collapsible';
-import '@bendera/vscode-webview-elements/dist/vscode-checkbox';
import '@bendera/vscode-webview-elements/dist/vscode-label';
+import '@vscode/webview-ui-toolkit/dist/esm/checkbox';
+
+const elm = document.querySelector("#app");
+const version = elm?.getAttribute("data-version");
+const environment = elm?.getAttribute("data-environment");
+
Sentry.init({
dsn: SENTRY_LINK,
integrations: [new Integrations.BrowserTracing()],
tracesSampleRate: 0, // No performance tracing required
+ release: version || "",
+ environment: environment || ""
});
declare const acquireVsCodeApi: () => {
@@ -28,5 +35,4 @@ declare const acquireVsCodeApi: () => {
postMessage: (msg: unknown) => void;
};
-const elm = document.querySelector("#app");
render(, elm);