From 1012e10ddc7097d49c0e2290a3e25d47a228cf32 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 14 Jan 2022 20:23:28 +0100
Subject: [PATCH] #228 - Add bulk actions

---
 CHANGELOG.md                                  |  1 +
 .../components/Header/Header.tsx              | 47 +++++++++++++++----
 src/helpers/DashboardSettings.ts              |  2 +-
 src/panelWebView/components/Actions.tsx       |  3 +-
 src/panelWebView/components/BaseView.tsx      | 13 ++++-
 5 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0517f558..aa54318e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - [#193](https://github.com/estruyf/vscode-front-matter/issues/193): Support added for editing data files.
 - [#197](https://github.com/estruyf/vscode-front-matter/issues/197): Support for multi-dimensional content type fields on content creation and editing.
+- [#228](https://github.com/estruyf/vscode-front-matter/issues/228): Show bulk button actions in panel and dashboard view.
 
 ### 🎨 Enhancements
 
diff --git a/src/dashboardWebView/components/Header/Header.tsx b/src/dashboardWebView/components/Header/Header.tsx
index b9d3e804..c2ef7782 100644
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/src/dashboardWebView/components/Header/Header.tsx
@@ -17,6 +17,8 @@ import { MediaHeaderTop } from '../Media/MediaHeaderTop';
 import { ChoiceButton } from '../ChoiceButton';
 import { MediaHeaderBottom } from '../Media/MediaHeaderBottom';
 import { Tabs } from './Tabs';
+import { CustomScript } from '../../../models';
+import { LightningBoltIcon, PlusIcon } from '@heroicons/react/outline';
 
 export interface IHeaderProps {
   settings: Settings | null;
@@ -51,6 +53,20 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
     resetSorting();
   }
 
+  const runBulkScript = (script: CustomScript) => {
+    Messenger.send(DashboardMessage.runCustomScript, { script });
+  };
+
+  const customActions: any[] = (settings?.scripts || []).filter(s => s.bulk && (s.type === "content" || !s.type)).map(s => ({
+    title: (
+      <div className="flex items-center">
+        <LightningBoltIcon className="w-4 h-4 mr-2" />
+        <span>{s.title}</span>
+      </div>
+    ),
+    onClick: () => runBulkScript(s)
+  }));
+
   return (
     <div className={`w-full sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
 
@@ -69,15 +85,28 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
                 
                 <ChoiceButton 
                   title={`Create content`} 
-                  choices={[{
-                    title: `Create by content type`,
-                    onClick: createByContentType,
-                    disabled: !settings?.initialized
-                  }, {
-                    title: `Create by template`,
-                    onClick: createByTemplate,
-                    disabled: !settings?.initialized
-                  }]} 
+                  choices={[
+                    {
+                      title: (
+                        <div className='flex items-center'>
+                          <PlusIcon className="w-4 h-4 mr-2" />
+                          <span>Create by content type</span>
+                        </div>
+                      ),
+                      onClick: createByContentType,
+                      disabled: !settings?.initialized
+                    }, {
+                      title: (
+                        <div className='flex items-center'>
+                          <PlusIcon className="w-4 h-4 mr-2" />
+                          <span>Create by template</span>
+                        </div>
+                      ),
+                      onClick: createByTemplate,
+                      disabled: !settings?.initialized
+                    },
+                    ...customActions
+                  ]} 
                   onClick={createContent} 
                   disabled={!settings?.initialized} />
               </div>
diff --git a/src/helpers/DashboardSettings.ts b/src/helpers/DashboardSettings.ts
index 1d11a876..ccd3a030 100644
--- a/src/helpers/DashboardSettings.ts
+++ b/src/helpers/DashboardSettings.ts
@@ -35,7 +35,7 @@ export class DashboardSettings {
       contentFolders: Folders.get(),
       crntFramework: Settings.get<string>(SETTINGS_FRAMEWORK_ID),
       framework: (!isInitialized && wsFolder) ? FrameworkDetector.get(wsFolder.fsPath) : null,
-      scripts: (Settings.get<CustomScript[]>(SETTING_CUSTOM_SCRIPTS) || []).filter(s => s.type && s.type !== ScriptType.Content),
+      scripts: (Settings.get<CustomScript[]>(SETTING_CUSTOM_SCRIPTS) || []),
       dashboardState: {
         contents: {
           sorting: await ext.getState<SortingOption | undefined>(ExtensionState.Dashboard.Contents.Sorting, "workspace"),
diff --git a/src/panelWebView/components/Actions.tsx b/src/panelWebView/components/Actions.tsx
index ac5454f3..e4728a3e 100644
--- a/src/panelWebView/components/Actions.tsx
+++ b/src/panelWebView/components/Actions.tsx
@@ -10,8 +10,7 @@ export interface IActionsProps {
   settings: PanelSettings;
 }
 
-const Actions: React.FunctionComponent<IActionsProps> = (props: React.PropsWithChildren<IActionsProps>) => {
-  const { metadata, settings } = props;
+const Actions: React.FunctionComponent<IActionsProps> = ({ metadata, settings }: React.PropsWithChildren<IActionsProps>) => {
 
   if (!metadata || Object.keys(metadata).length === 0 || !settings) {
     return null;
diff --git a/src/panelWebView/components/BaseView.tsx b/src/panelWebView/components/BaseView.tsx
index 17c0a51a..51552b2c 100644
--- a/src/panelWebView/components/BaseView.tsx
+++ b/src/panelWebView/components/BaseView.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FolderInfo, PanelSettings } from '../../models';
+import { CustomScript, FolderInfo, PanelSettings } from '../../models';
 import { CommandToCode } from '../CommandToCode';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { Collapsible } from './Collapsible';
@@ -31,6 +31,12 @@ const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, folderAndF
     MessageHelper.sendMessage(CommandToCode.openPreview);
   };
 
+  const runBulkScript = (script: CustomScript) => {
+    MessageHelper.sendMessage(CommandToCode.runCustomScript, { title: script.title, script });
+  };
+
+  const customActions: any[] = (settings?.scripts || []).filter(s => s.bulk && (s.type === "content" || !s.type));
+
   return (
     <div className="frontmatter">
       <div className={`ext_actions`}>
@@ -42,6 +48,11 @@ const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, folderAndF
             <button onClick={initProject} disabled={settings?.isInitialized}>Initialize project</button>
             <button onClick={createContent} disabled={!settings?.isInitialized}>Create new content</button>
             <button onClick={openPreview} disabled={!settings?.preview?.host}>Open site preview</button>
+            {
+              customActions.map((script) => (
+                <button key={script.title} onClick={() => runBulkScript(script)}>{ script.title }</button>
+              ))
+            }
           </div>
         </Collapsible>