Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(editor): Refactor BinaryDataDisplay components to Vue 3 syntax (no-changelog) #9753

Merged
merged 5 commits into from
Jun 18, 2024
Merged

refactor(editor): Refactor BinaryDataDisplay components to Vue 3 syntax (no-changelog) #9753

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b4434bf
refactor(editor): Refactor BinaryDataDisplay components to Vue 3 synt…
OlegIvaniv Jun 14, 2024
d03087e
Fix TS error
OlegIvaniv Jun 14, 2024
7c4d746
Fix Pinia error
OlegIvaniv Jun 14, 2024
10dc8d8
Merge branch 'master' into refactor/binary_display_vue3
OlegIvaniv Jun 18, 2024
a9ece44
Change props types def format
OlegIvaniv Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 63 additions & 65 deletions packages/editor-ui/src/components/BinaryDataDisplay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',

components: {
BinaryDataDisplayEmbed,
},
props: [
'displayData', // IBinaryData
'windowVisible', // boolean
],
setup() {
const nodeHelpers = useNodeHelpers();

return {
nodeHelpers,
};
},
computed: {
...mapStores(useWorkflowsStore),
binaryData(): IBinaryData | null {
const binaryData = this.nodeHelpers.getBinaryData(
this.workflowRunData,
this.displayData.node,
this.displayData.runIndex,
this.displayData.outputIndex,
);

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;
if (workflowExecution === null) {
return null;
}
const executionData = workflowExecution.data;
return executionData ? executionData.resultData.runData : null;
},
},
methods: {
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');
return false;
},
},
const props = defineProps<{
displayData: IBinaryData;
windowVisible: boolean;
}>();

const emit = defineEmits<{
(event: 'close'): void;
}>();

const nodeHelpers = useNodeHelpers();
const workflowsStore = useWorkflowsStore();

const workflowRunData = computed<IRunData | null>(() => {
const workflowExecution = workflowsStore.getWorkflowExecution;
if (workflowExecution === null) {
return null;
}
const executionData = workflowExecution.data;
return executionData ? executionData.resultData.runData : null;
});

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.
emit('close');
return false;
}
</script>

<style lang="scss">
Expand Down
95 changes: 39 additions & 56 deletions packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 isJSONData = fileType === 'json';
const isHTMLData = fileType === 'html';
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 (!id) {
if (isJSONData || isHTMLData) {
data.value = jsonParse(atob(binaryData));
} else {
embedSource.value = 'data:' + mimeType + ';base64,' + binaryData;
}
} else {
try {
const binaryUrl = workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
if (isJSONData || isHTMLData) {
this.data = jsonParse(atob(data));
const fetchedData = await fetch(binaryUrl, { credentials: 'include' });
data.value = await (isJSONData ? fetchedData.json() : fetchedData.text());
} else {
this.embedSource = 'data:' + mimeType + ';base64,' + data;
}
} else {
try {
const binaryUrl = this.workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
if (isJSONData || isHTMLData) {
const fetchedData = await fetch(binaryUrl, { credentials: 'include' });
this.data = await (isJSONData ? fetchedData.json() : fetchedData.text());
} else {
this.embedSource = binaryUrl;
}
} catch (e) {
this.error = true;
embedSource.value = binaryUrl;
}
} catch (e) {
error.value = true;
}
}

this.isLoading = false;
},
methods: {
embedClass(): string[] {
const { fileType } = this.binaryData;
return [fileType ?? 'other'];
},
},
isLoading.value = false;
});
</script>

Expand Down
1 change: 1 addition & 0 deletions packages/editor-ui/src/components/RunData.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
</n8n-callout>

<BinaryDataDisplay
v-if="binaryDataDisplayData"
:window-visible="binaryDataDisplayVisible"
:display-data="binaryDataDisplayData"
@close="closeBinaryDataDisplay"
Expand Down
Loading