1.3.0:

 - Added the file download interface
 - Added preview mode of the HTML
 - Change icons of operations & interfaces

GenerateBarcode/src/app.ts

@@ -115,7 +115,7 @@ const types = [
 export default defineOperationApp({
   id: "ttabarcode",
   name: "TTA generate barcode",
-  icon: "box",
+  icon: "barcode",
   description: "Generate a barcode trough Text to anything!",
   overview: ({ barcodeContent }) => [
     {

GeneratePDF/src/app.ts

@@ -3,7 +3,7 @@ import { defineOperationApp } from "@directus/extensions-sdk";
 export default defineOperationApp({
   id: "ttapdf",
   name: "TTA generate PDF",
-  icon: "box",
+  icon: "picture_as_pdf",
   description: "Generate a PDF trough Text to anything!",
   overview: ({ filename }) => [
     {

GeneratePDFFromTemplateInterface/.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

GeneratePDFFromTemplateInterface/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "directus-extension-PDFTemplateInterface",
+  "version": "1.0.0",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-custom-interface"
+  ],
+  "directus:extension": {
+    "type": "interface",
+    "path": "dist/index.js",
+    "source": "src/index.ts",
+    "host": "^9.22.1"
+  },
+  "scripts": {
+    "build": "directus-extension build",
+    "dev": "directus-extension build -w --no-minify"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "9.22.1",
+    "typescript": "^5.3.3",
+    "vue": "^3.3.11"
+  }
+}

GeneratePDFFromTemplateInterface/src/index.ts

@@ -0,0 +1,58 @@
+import { defineInterface } from "@directus/extensions-sdk";
+import { computed } from "vue";
+import InterfaceComponent from "./interface.vue";
+import { useStores } from "@directus/extensions-sdk";
+
+export default defineInterface({
+  id: "tta-download-interface",
+  name: "Download interface",
+  icon: "sim_card_download",
+  description: "Download files based on a flow. (Text to anything)",
+  hideLabel: true,
+  hideLoader: true,
+  component: InterfaceComponent,
+  options: () => {
+    const { useFlowsStore } = useStores();
+    const flowStore = useFlowsStore();
+
+    const flowOptions = computed(() =>
+      flowStore.flows
+        .filter(
+          (flow: any) =>
+            flow.trigger === "webhook" && flow.options.method == "POST"
+        )
+        .map((flow: any) => {
+          return { text: flow.name, value: flow.id };
+        })
+    );
+    return [
+      {
+        field: "label",
+        type: "string",
+        name: "$t:label",
+        meta: {
+          width: "full",
+          interface: "system-input-translated-string",
+          options: {
+            placeholder: "$t:label",
+          },
+        },
+      },
+      {
+        field: "flow",
+        name: "$t:operations.trigger.flow",
+        type: "string",
+        meta: {
+          width: "full",
+          interface: "select-dropdown",
+          options: {
+            choices: flowOptions,
+            iconRight: "bolt",
+            placeholder: "$t:a_flow_uuid",
+          },
+        },
+      },
+    ];
+  },
+  types: ["string"],
+});

GeneratePDFFromTemplateInterface/src/interface.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-button @click="downloadFile" :loading="loading" :disabled="loading">{{
+    props.label
+  }}</v-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useApi } from "@directus/extensions-sdk";
+
+const api = useApi();
+const props = defineProps<{
+  label: string;
+  flow: any;
+  primaryKey: any;
+}>();
+
+const loading = ref(false);
+
+async function downloadFile() {
+  loading.value = true;
+  try {
+    const webhookOutput = await api.post("/flows/trigger/" + props.flow, {
+      id: props.primaryKey,
+    });
+
+    window.open("/assets/" + webhookOutput.data, "_blank");
+  } catch (e) {}
+  loading.value = false;
+}
+</script>

GeneratePDFFromTemplateInterface/src/shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}

GeneratePDFFromTemplateInterface/tsconfig.json

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"target": "ES2019",
+		"lib": ["ES2019", "DOM"],
+		"moduleResolution": "node",
+		"strict": true,
+		"noFallthroughCasesInSwitch": true,
+		"esModuleInterop": true,
+		"noImplicitAny": true,
+		"noImplicitThis": true,
+		"noImplicitReturns": true,
+		"noUnusedLocals": true,
+		"noUncheckedIndexedAccess": true,
+		"noUnusedParameters": true,
+		"alwaysStrict": true,
+		"strictNullChecks": true,
+		"strictFunctionTypes": true,
+		"strictBindCallApply": true,
+		"strictPropertyInitialization": true,
+		"resolveJsonModule": false,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"allowSyntheticDefaultImports": true,
+		"isolatedModules": true,
+		"rootDir": "./src"
+	},
+	"include": ["./src/**/*.ts"]
+}

GeneratePDFGenerateFromTemplate/src/app.ts

@@ -3,7 +3,7 @@ import { defineOperationApp } from "@directus/extensions-sdk";
 export default defineOperationApp({
   id: "ttapdftemplate",
   name: "TTA generate PDF from template",
-  icon: "box",
+  icon: "picture_as_pdf",
   description: "Generate a PDF based on a template trough Text to anything!",
   overview: ({ filename }) => [
     {

GenerateQRCode/src/app.ts

@@ -3,7 +3,7 @@ import { defineOperationApp } from "@directus/extensions-sdk";
 export default defineOperationApp({
   id: "ttaqrcode",
   name: "TTA generate QRcode",
-  icon: "box",
+  icon: "qr_code",
   description: "Generate a QRcode trough Text to anything!",
   overview: ({ content }) => [
     {

PDFTemplateSelector/src/index.ts

@@ -4,7 +4,7 @@ import InterfaceComponent from "./interface.vue";
 export default defineInterface({
   id: "TTA-pdf-template-selector",
   name: "PDF template selector",
-  icon: "box",
+  icon: "picture_as_pdf",
   description: "Selector for a PDF template for Text To Anything",
   component: InterfaceComponent,
   options: null,