mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
refactor(editor): Refactor BinaryDataDisplay components to Vue 3 syntax (no-changelog) (#9753)
Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
This commit is contained in:
parent
d1163533a6
commit
fb73ec3994
|
@ -18,77 +18,75 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { IBinaryData, IRunData } from 'n8n-workflow';
|
||||
|
||||
import BinaryDataDisplayEmbed from '@/components/BinaryDataDisplayEmbed.vue';
|
||||
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import { useNodeHelpers } from '@/composables/useNodeHelpers';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BinaryDataDisplay',
|
||||
const props = defineProps<{
|
||||
displayData: IBinaryData;
|
||||
windowVisible: boolean;
|
||||
}>();
|
||||
|
||||
components: {
|
||||
BinaryDataDisplayEmbed,
|
||||
},
|
||||
props: [
|
||||
'displayData', // IBinaryData
|
||||
'windowVisible', // boolean
|
||||
],
|
||||
setup() {
|
||||
const nodeHelpers = useNodeHelpers();
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
}>();
|
||||
|
||||
return {
|
||||
nodeHelpers,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useWorkflowsStore),
|
||||
binaryData(): IBinaryData | null {
|
||||
const binaryData = this.nodeHelpers.getBinaryData(
|
||||
this.workflowRunData,
|
||||
this.displayData.node,
|
||||
this.displayData.runIndex,
|
||||
this.displayData.outputIndex,
|
||||
);
|
||||
const nodeHelpers = useNodeHelpers();
|
||||
const workflowsStore = useWorkflowsStore();
|
||||
|
||||
if (binaryData.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (
|
||||
this.displayData.index >= binaryData.length ||
|
||||
binaryData[this.displayData.index][this.displayData.key] === undefined
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const binaryDataItem: IBinaryData = binaryData[this.displayData.index][this.displayData.key];
|
||||
|
||||
return binaryDataItem;
|
||||
},
|
||||
|
||||
workflowRunData(): IRunData | null {
|
||||
const workflowExecution = this.workflowsStore.getWorkflowExecution;
|
||||
const workflowRunData = computed<IRunData | null>(() => {
|
||||
const workflowExecution = workflowsStore.getWorkflowExecution;
|
||||
if (workflowExecution === null) {
|
||||
return null;
|
||||
}
|
||||
const executionData = workflowExecution.data;
|
||||
return executionData ? executionData.resultData.runData : null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeWindow() {
|
||||
});
|
||||
|
||||
const binaryData = computed<IBinaryData | null>(() => {
|
||||
if (
|
||||
typeof props.displayData.node !== 'string' ||
|
||||
typeof props.displayData.key !== 'string' ||
|
||||
typeof props.displayData.runIndex !== 'number' ||
|
||||
typeof props.displayData.index !== 'number' ||
|
||||
typeof props.displayData.outputIndex !== 'number'
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const binaryDataLocal = nodeHelpers.getBinaryData(
|
||||
workflowRunData.value,
|
||||
props.displayData.node,
|
||||
props.displayData.runIndex,
|
||||
props.displayData.outputIndex,
|
||||
);
|
||||
|
||||
if (binaryDataLocal.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (
|
||||
props.displayData.index >= binaryDataLocal.length ||
|
||||
binaryDataLocal[props.displayData.index][props.displayData.key] === undefined
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const binaryDataItem: IBinaryData =
|
||||
binaryDataLocal[props.displayData.index][props.displayData.key];
|
||||
|
||||
return binaryDataItem;
|
||||
});
|
||||
|
||||
function closeWindow() {
|
||||
// Handle the close externally as the visible parameter is an external prop
|
||||
// and is so not allowed to be changed here.
|
||||
this.$emit('close');
|
||||
emit('close');
|
||||
return false;
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
@ -18,77 +18,60 @@
|
|||
:show-length="true"
|
||||
/>
|
||||
<RunDataHtml v-else-if="binaryData.fileType === 'html'" :input-html="data" />
|
||||
<embed v-else :src="embedSource" class="binary-data" :class="embedClass()" />
|
||||
<embed v-else :src="embedSource" class="binary-data" :class="embedClass" />
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import type { IBinaryData } from 'n8n-workflow';
|
||||
import { jsonParse } from 'n8n-workflow';
|
||||
import type { PropType } from 'vue';
|
||||
import VueJsonPretty from 'vue-json-pretty';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import RunDataHtml from '@/components/RunDataHtml.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BinaryDataDisplayEmbed',
|
||||
components: {
|
||||
VueJsonPretty,
|
||||
RunDataHtml,
|
||||
},
|
||||
props: {
|
||||
binaryData: {
|
||||
type: Object as PropType<IBinaryData>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
embedSource: '',
|
||||
error: false,
|
||||
data: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useWorkflowsStore),
|
||||
},
|
||||
async mounted() {
|
||||
const { id, data, fileName, fileType, mimeType } = this.binaryData;
|
||||
const props = defineProps<{
|
||||
binaryData: IBinaryData;
|
||||
}>();
|
||||
|
||||
const isLoading = ref(true);
|
||||
const embedSource = ref('');
|
||||
const error = ref(false);
|
||||
const data = ref('');
|
||||
|
||||
const workflowsStore = useWorkflowsStore();
|
||||
|
||||
const embedClass = computed(() => {
|
||||
return [props.binaryData.fileType ?? 'other'];
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const { id, data: binaryData, fileName, fileType, mimeType } = props.binaryData;
|
||||
const isJSONData = fileType === 'json';
|
||||
const isHTMLData = fileType === 'html';
|
||||
|
||||
if (!id) {
|
||||
if (isJSONData || isHTMLData) {
|
||||
this.data = jsonParse(atob(data));
|
||||
data.value = jsonParse(atob(binaryData));
|
||||
} else {
|
||||
this.embedSource = 'data:' + mimeType + ';base64,' + data;
|
||||
embedSource.value = 'data:' + mimeType + ';base64,' + binaryData;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const binaryUrl = this.workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
|
||||
const binaryUrl = workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
|
||||
if (isJSONData || isHTMLData) {
|
||||
const fetchedData = await fetch(binaryUrl, { credentials: 'include' });
|
||||
this.data = await (isJSONData ? fetchedData.json() : fetchedData.text());
|
||||
data.value = await (isJSONData ? fetchedData.json() : fetchedData.text());
|
||||
} else {
|
||||
this.embedSource = binaryUrl;
|
||||
embedSource.value = binaryUrl;
|
||||
}
|
||||
} catch (e) {
|
||||
this.error = true;
|
||||
error.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
},
|
||||
methods: {
|
||||
embedClass(): string[] {
|
||||
const { fileType } = this.binaryData;
|
||||
return [fileType ?? 'other'];
|
||||
},
|
||||
},
|
||||
isLoading.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -35,6 +35,7 @@
|
|||
</n8n-callout>
|
||||
|
||||
<BinaryDataDisplay
|
||||
v-if="binaryDataDisplayData"
|
||||
:window-visible="binaryDataDisplayVisible"
|
||||
:display-data="binaryDataDisplayData"
|
||||
@close="closeBinaryDataDisplay"
|
||||
|
|
Loading…
Reference in a new issue