From ce0c07ebdb22f3c496d9934f13d74504512bf5ad Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 2 May 2024 22:42:25 -0700
Subject: [PATCH] Add JSON preview for smart playlist query

---
 src/i18n/locales/en.json                      |  1 +
 .../components/playlist-query-builder.tsx     | 21 ++++++++++++++++++-
 .../shared/components/json-preview.tsx        |  7 +++++++
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/features/shared/components/json-preview.tsx

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index ad60bd42..7cceeced 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -84,6 +84,7 @@
         "owner": "owner",
         "path": "path",
         "playerMustBePaused": "player must be paused",
+        "preview": "preview",
         "previousSong": "previous $t(entity.track_one)",
         "quit": "quit",
         "random": "random",
diff --git a/src/renderer/features/playlists/components/playlist-query-builder.tsx b/src/renderer/features/playlists/components/playlist-query-builder.tsx
index a6d1b90b..34276b47 100644
--- a/src/renderer/features/playlists/components/playlist-query-builder.tsx
+++ b/src/renderer/features/playlists/components/playlist-query-builder.tsx
@@ -1,6 +1,7 @@
 import { forwardRef, Ref, useImperativeHandle, useMemo, useState } from 'react';
 import { Group } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { openModal } from '@mantine/modals';
 import clone from 'lodash/clone';
 import get from 'lodash/get';
 import setWith from 'lodash/setWith';
@@ -32,6 +33,7 @@ import {
 } from '/@/renderer/api/navidrome.types';
 import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
 import { useCurrentServer } from '/@/renderer/store';
+import { JsonPreview } from '/@/renderer/features/shared/components/json-preview';
 
 type AddArgs = {
     groupIndex: number[];
@@ -148,6 +150,16 @@ export const PlaylistQueryBuilder = forwardRef(
             onSaveAs?.(convertQueryGroupToNDQuery(filters), extraFiltersForm.values);
         };
 
+        const openPreviewModal = () => {
+            const previewValue = convertQueryGroupToNDQuery(filters);
+
+            openModal({
+                children: <JsonPreview value={previewValue} />,
+                size: 'xl',
+                title: t('common.preview', { postProcess: 'titleCase' }),
+            });
+        };
+
         const handleAddRuleGroup = (args: AddArgs) => {
             const { level, groupIndex } = args;
             const filtersCopy = clone(filters);
@@ -447,7 +459,7 @@ export const PlaylistQueryBuilder = forwardRef(
                                     value: 'desc',
                                 },
                             ]}
-                            label={t('common.order', { postProcess: 'titleCase' })}
+                            label={t('common.sortOrder', { postProcess: 'titleCase' })}
                             maxWidth="20%"
                             width={125}
                             {...extraFiltersForm.getInputProps('sortOrder')}
@@ -471,6 +483,13 @@ export const PlaylistQueryBuilder = forwardRef(
                             >
                                 {t('common.saveAs', { postProcess: 'titleCase' })}
                             </Button>
+                            <Button
+                                p="0.5em"
+                                variant="default"
+                                onClick={openPreviewModal}
+                            >
+                                {t('common.preview', { postProcess: 'titleCase' })}
+                            </Button>
                             <DropdownMenu position="bottom-end">
                                 <DropdownMenu.Target>
                                     <Button
diff --git a/src/renderer/features/shared/components/json-preview.tsx b/src/renderer/features/shared/components/json-preview.tsx
new file mode 100644
index 00000000..51fbf13d
--- /dev/null
+++ b/src/renderer/features/shared/components/json-preview.tsx
@@ -0,0 +1,7 @@
+interface JsonPreviewProps {
+    value: string | Record<string, any>;
+}
+
+export const JsonPreview = ({ value }: JsonPreviewProps) => {
+    return <pre style={{ userSelect: 'all' }}>{JSON.stringify(value, null, 2)}</pre>;
+};