add UserChart / UserQuery widgets to TemplateControls

Signum.React.Extensions/Mailing/Templates/EmailTemplate.tsx

@@ -233,21 +233,12 @@ export function EmailTemplateMessageComponent(p: EmailTemplateMessageComponentPr
       forceUpdate();
   }
 
-  function handleOnInsert(newCode: string) {
-    ValueLineModal.show({
-      type: { name: "string" },
-      initialValue: newCode,
-      title: "Template",
-      message: "Copy to clipboard: Ctrl+C, ESC",
-      initiallyFocused: true,
-    }).done();
-  }
   const ec = p.ctx.subCtx({ labelColumns: { sm: 2 } });
   return (
     <div className="sf-email-template-message">
       <EntityCombo ctx={ec.subCtx(e => e.cultureInfo)} labelText={EmailTemplateViewMessage.Language.niceToString()} onChange={p.invalidate} />
       <div>
-        <TemplateControls queryKey={p.queryKey} onInsert={handleOnInsert} forHtml={true} />
+        <TemplateControls queryKey={p.queryKey} forHtml={true} />
         <ValueLine ctx={ec.subCtx(e => e.subject)} formGroupStyle={"SrOnly"} placeholderLabels={true} labelHtmlAttributes={{ style: { width: "100px" } }} />
         <div className="code-container">
           <HtmlCodemirror ctx={ec.subCtx(e => e.text)} onChange={handleCodeMirrorChange} />

Signum.React.Extensions/SMS/Templates/SMSTemplate.tsx

@@ -58,17 +58,6 @@ export interface SMSTemplateMessageComponentProps {
 export function SMSTemplateMessageComponent(p: SMSTemplateMessageComponentProps) {
   const forceUpdate = useForceUpdate();
 
-  function handleOnInsert(newCode: string) {
-    ValueLineModal.show({
-      type: { name: "string" },
-      initialValue: newCode,
-      title: "Template",
-      message: "Copy to clipboard: Ctrl+C, ESC",
-      initiallyFocused: true,
-    }).done();
-  }
-
-
   var throttleText = useThrottle(p.ctx.value.message ?? "", 1000);
   var remaining = useAPI(abort => SMSClient.API.getRemainingCharacters(throttleText, p.removeNoSMSCharacters), [throttleText, p.removeNoSMSCharacters], { avoidReset: true });
 
@@ -77,7 +66,7 @@ export function SMSTemplateMessageComponent(p: SMSTemplateMessageComponentProps)
     <div className="sf-sms-template-message">
       <EntityCombo ctx={ec.subCtx(e => e.cultureInfo)} onChange={p.invalidate} valueColumns={3} />
       <div>
-        <TemplateControls queryKey={p.queryKey} onInsert={handleOnInsert} forHtml={true} />
+        <TemplateControls queryKey={p.queryKey} forHtml={true} />
         <ValueLine ctx={ec.subCtx(a => a.message)} onChange={forceUpdate} formGroupStyle="SrOnly" formGroupHtmlAttributes={{ className: "pt-2" }} helpText={
             <span className={remaining == null ? "" : remaining < 0 ? "text-danger" : remaining < 20 ? "text-warning" : "text-success"}>
               {SMSTemplateMessage._0CharactersRemainingBeforeReplacements.niceToString(remaining == null ? "…" : remaining)}

Signum.React.Extensions/Templating/TemplateControls.tsx

@@ -1,25 +1,59 @@
 import * as React from 'react'
-import { SubTokensOptions, QueryToken, hasAnyOrAll } from '@framework/FindOptions'
+import { SubTokensOptions, QueryToken, hasAnyOrAll, FindOptions } from '@framework/FindOptions'
 import { TemplateTokenMessage } from './Signum.Entities.Templating'
 import QueryTokenBuilder from '@framework/SearchControl/QueryTokenBuilder'
+import ValueLineModal from '../../Signum.React/Scripts/ValueLineModal'
+import { UserChartEntity } from '../Chart/Signum.Entities.Chart'
+import { useAPI } from '../../Signum.React/Scripts/Hooks'
+import * as Navigator from '../../Signum.React/Scripts/Navigator'
+import * as Finder from '../../Signum.React/Scripts/Finder'
+import { UserQueryEntity } from '../UserQueries/Signum.Entities.UserQueries'
+import { getTypeInfos } from '@framework/Reflection'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface TemplateControlsProps {
   queryKey: string;
-  onInsert: (newCode: string) => void;
-  forHtml: boolean
+  forHtml: boolean;
+  widgetButtons?: boolean;
 }
 
 export default function TemplateControls(p: TemplateControlsProps) {
 
-  const [currentToken, setCurrentToken] = React.useState<QueryToken | undefined>(undefined)
-
+  const [currentToken, setCurrentToken] = React.useState<QueryToken | undefined>(undefined);
+  const qd = useAPI(() => Finder.getQueryDescription(p.queryKey), [p.queryKey]);
+
   function renderButton(text: string, canClick: string | undefined, buildPattern: (key: string) => string) {
     return <input type="button" disabled={!!canClick} className="btn btn-light btn-sm sf-button"
       title={canClick} value={text}
-      onClick={() => p.onInsert(buildPattern(currentToken ? currentToken.fullKey : ""))} />;
+      onClick={() => ValueLineModal.show({
+        type: { name: "string" },
+        initialValue: buildPattern(currentToken ? currentToken.fullKey : ""),
+        title: "Template",
+        message: "Copy to clipboard: Ctrl+C, ESC",
+        initiallyFocused: true,
+      }).done()} />
+  }
+
+  function renderWidgetButton(text: React.ReactElement, getCode: () => Promise<string | undefined>) {
+    return <button className="btn btn-light btn-sm sf-button"
+
+      onClick={() =>
+        getCode()
+          .then(code =>
+            code &&
+            ValueLineModal.show({
+              type: { name: "string" },
+              valueLineType: "TextArea",
+              initialValue: code,
+              title: "Embedded Widget",
+              message: "Make a similar-looking Chart or Table in Excel and copy it to Word or PowerPoint. Then add the following code in the Alternative Text to bind the data:",
+              initiallyFocused: true,
+            })).done()} >{text}</button>
   }
 
 
+
+
   function canElement(): string | undefined {
     let token = currentToken;
 
@@ -83,7 +117,7 @@ export default function TemplateControls(p: TemplateControlsProps) {
     return null;
 
   return (
-    <div>
+    <div className="d-flex">
       <span className="rw-widget-sm">
         <QueryTokenBuilder queryToken={ct} queryKey={p.queryKey} onTokenChange={t => setCurrentToken(t ?? undefined)} subTokenOptions={SubTokensOptions.CanAnyAll | SubTokensOptions.CanElement} readOnly={false} />
       </span>
@@ -98,7 +132,40 @@ export default function TemplateControls(p: TemplateControlsProps) {
         {renderButton("any", canElement(), token => p.forHtml ?
           `<!--@any[${token}]--> <!--@notany--> <!--@endany-->` :
           `@any[${token}] @notany @endany`)}
+
+
+
+
       </div>
+      {p.widgetButtons &&
+        <div className="btn-group" style={{ marginLeft: "auto" }}>
+          {UserChartEntity.tryTypeInfo() && renderWidgetButton(<><FontAwesomeIcon icon={"chart-bar"} color={"darkviolet"} className="icon" /> {UserChartEntity.niceName()}</>, () => Finder.find<UserChartEntity>({
+            queryName: UserChartEntity,
+            filterOptions: [{
+              token: UserChartEntity.token(a => a.entity!.entityType!.entity!.cleanName),
+              operation: "IsIn",
+              value: [null, ...getTypeInfos(qd?.columns["Entity"].type!).map(a => a.name)]
+            }]
+          }).then(uc => uc && Navigator.API.fetch(uc).then(uce => {
+            var text = "UserChart:" + uce.guid;
+
+            if ((uce.chartScript.key.contains("Multi") || uce.chartScript.key.contains("Stacked")) && uce.columns[1].element.token != null /*Split*/)
+              text += "\nPivot(0, 1, 2)";
+
+            return text;
+          })))}
+          {
+            UserQueryEntity.tryTypeInfo() && renderWidgetButton(<><FontAwesomeIcon icon={["far", "list-alt"]} color={"dodgerblue"} className="icon" /> {UserQueryEntity.niceName()}</>, () => Finder.find<UserChartEntity>({
+              queryName: UserQueryEntity,
+              filterOptions: [{
+                token: UserQueryEntity.token(a => a.entity!.entityType!.entity!.cleanName),
+                operation: "IsIn",
+                value: [null, ...getTypeInfos(qd?.columns["Entity"].type!).map(a => a.name)]
+              }]
+            }).then(uc => uc && Navigator.API.fetch(uc).then(uce => "UserQuery:" + uce.guid)))
+          }
+        </div>
+      }
     </div>
   );
 }

Signum.React.Extensions/Word/Templates/WordTemplate.tsx

@@ -19,16 +19,6 @@ export default function WordTemplate(p: { ctx: TypeContext<WordTemplateEntity> }
 
   const forceUpdate = useForceUpdate();
 
-  function handleOnInsert(newCode: string) {
-    ValueLineModal.show({
-      type: { name: "string" },
-      initialValue: newCode,
-      title: "Template",
-      message: "Copy to clipboard: Ctrl+C, ESC",
-      initiallyFocused: true,
-    }).done();
-  }
-
   const ctx = p.ctx;
   const ctx4 = p.ctx.subCtx({ labelColumns: 4 });
   const canAggregate = ctx.value.groupResults ? SubTokensOptions.CanAggregate : 0;
@@ -55,8 +45,8 @@ export default function WordTemplate(p: { ctx: TypeContext<WordTemplateEntity> }
           <Tab eventKey="template" title={ctx.niceName(a => a.template)}>
             <ValueLine ctx={ctx.subCtx(f => f.fileName)} />
             <div className="card form-xs" style={{ marginTop: "10px", marginBottom: "10px" }}>
-              <div className="card-header" style={{ padding: "5px" }}>
-                <TemplateControls queryKey={ctx.value.query.key} forHtml={false} onInsert={handleOnInsert} />
+            <div className="card-header" style={{ padding: "5px" }}>
+              <TemplateControls queryKey={ctx.value.query.key} forHtml={false} widgetButtons={true} />
               </div>
             </div>
             <FileLine ctx={ctx.subCtx(e => e.template)} />