mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-25 04:34:06 -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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { mapStores } from 'pinia';
|
|
||||||
import type { IBinaryData, IRunData } from 'n8n-workflow';
|
import type { IBinaryData, IRunData } from 'n8n-workflow';
|
||||||
|
|
||||||
import BinaryDataDisplayEmbed from '@/components/BinaryDataDisplayEmbed.vue';
|
import BinaryDataDisplayEmbed from '@/components/BinaryDataDisplayEmbed.vue';
|
||||||
|
|
||||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||||
import { useNodeHelpers } from '@/composables/useNodeHelpers';
|
import { useNodeHelpers } from '@/composables/useNodeHelpers';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps<{
|
||||||
name: 'BinaryDataDisplay',
|
displayData: IBinaryData;
|
||||||
|
windowVisible: boolean;
|
||||||
|
}>();
|
||||||
|
|
||||||
components: {
|
const emit = defineEmits<{
|
||||||
BinaryDataDisplayEmbed,
|
(event: 'close'): void;
|
||||||
},
|
}>();
|
||||||
props: [
|
|
||||||
'displayData', // IBinaryData
|
|
||||||
'windowVisible', // boolean
|
|
||||||
],
|
|
||||||
setup() {
|
|
||||||
const nodeHelpers = useNodeHelpers();
|
|
||||||
|
|
||||||
return {
|
const nodeHelpers = useNodeHelpers();
|
||||||
nodeHelpers,
|
const workflowsStore = useWorkflowsStore();
|
||||||
};
|
|
||||||
},
|
|
||||||
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) {
|
const workflowRunData = computed<IRunData | null>(() => {
|
||||||
return null;
|
const workflowExecution = workflowsStore.getWorkflowExecution;
|
||||||
}
|
|
||||||
|
|
||||||
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) {
|
if (workflowExecution === null) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const executionData = workflowExecution.data;
|
const executionData = workflowExecution.data;
|
||||||
return executionData ? executionData.resultData.runData : null;
|
return executionData ? executionData.resultData.runData : null;
|
||||||
},
|
});
|
||||||
},
|
|
||||||
methods: {
|
const binaryData = computed<IBinaryData | null>(() => {
|
||||||
closeWindow() {
|
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
|
// Handle the close externally as the visible parameter is an external prop
|
||||||
// and is so not allowed to be changed here.
|
// and is so not allowed to be changed here.
|
||||||
this.$emit('close');
|
emit('close');
|
||||||
return false;
|
return false;
|
||||||
},
|
}
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
@ -18,77 +18,60 @@
|
||||||
:show-length="true"
|
:show-length="true"
|
||||||
/>
|
/>
|
||||||
<RunDataHtml v-else-if="binaryData.fileType === 'html'" :input-html="data" />
|
<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>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { ref, onMounted, computed } from 'vue';
|
||||||
import { mapStores } from 'pinia';
|
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||||
import type { IBinaryData } from 'n8n-workflow';
|
import type { IBinaryData } from 'n8n-workflow';
|
||||||
import { jsonParse } from 'n8n-workflow';
|
import { jsonParse } from 'n8n-workflow';
|
||||||
import type { PropType } from 'vue';
|
|
||||||
import VueJsonPretty from 'vue-json-pretty';
|
import VueJsonPretty from 'vue-json-pretty';
|
||||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
|
||||||
import RunDataHtml from '@/components/RunDataHtml.vue';
|
import RunDataHtml from '@/components/RunDataHtml.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps<{
|
||||||
name: 'BinaryDataDisplayEmbed',
|
binaryData: IBinaryData;
|
||||||
components: {
|
}>();
|
||||||
VueJsonPretty,
|
|
||||||
RunDataHtml,
|
const isLoading = ref(true);
|
||||||
},
|
const embedSource = ref('');
|
||||||
props: {
|
const error = ref(false);
|
||||||
binaryData: {
|
const data = ref('');
|
||||||
type: Object as PropType<IBinaryData>,
|
|
||||||
required: true,
|
const workflowsStore = useWorkflowsStore();
|
||||||
},
|
|
||||||
},
|
const embedClass = computed(() => {
|
||||||
data() {
|
return [props.binaryData.fileType ?? 'other'];
|
||||||
return {
|
});
|
||||||
isLoading: true,
|
|
||||||
embedSource: '',
|
onMounted(async () => {
|
||||||
error: false,
|
const { id, data: binaryData, fileName, fileType, mimeType } = props.binaryData;
|
||||||
data: '',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapStores(useWorkflowsStore),
|
|
||||||
},
|
|
||||||
async mounted() {
|
|
||||||
const { id, data, fileName, fileType, mimeType } = this.binaryData;
|
|
||||||
const isJSONData = fileType === 'json';
|
const isJSONData = fileType === 'json';
|
||||||
const isHTMLData = fileType === 'html';
|
const isHTMLData = fileType === 'html';
|
||||||
|
|
||||||
if (!id) {
|
if (!id) {
|
||||||
if (isJSONData || isHTMLData) {
|
if (isJSONData || isHTMLData) {
|
||||||
this.data = jsonParse(atob(data));
|
data.value = jsonParse(atob(binaryData));
|
||||||
} else {
|
} else {
|
||||||
this.embedSource = 'data:' + mimeType + ';base64,' + data;
|
embedSource.value = 'data:' + mimeType + ';base64,' + binaryData;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
try {
|
try {
|
||||||
const binaryUrl = this.workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
|
const binaryUrl = workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
|
||||||
if (isJSONData || isHTMLData) {
|
if (isJSONData || isHTMLData) {
|
||||||
const fetchedData = await fetch(binaryUrl, { credentials: 'include' });
|
const fetchedData = await fetch(binaryUrl, { credentials: 'include' });
|
||||||
this.data = await (isJSONData ? fetchedData.json() : fetchedData.text());
|
data.value = await (isJSONData ? fetchedData.json() : fetchedData.text());
|
||||||
} else {
|
} else {
|
||||||
this.embedSource = binaryUrl;
|
embedSource.value = binaryUrl;
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.error = true;
|
error.value = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.isLoading = false;
|
isLoading.value = false;
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
embedClass(): string[] {
|
|
||||||
const { fileType } = this.binaryData;
|
|
||||||
return [fileType ?? 'other'];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -35,6 +35,7 @@
|
||||||
</n8n-callout>
|
</n8n-callout>
|
||||||
|
|
||||||
<BinaryDataDisplay
|
<BinaryDataDisplay
|
||||||
|
v-if="binaryDataDisplayData"
|
||||||
:window-visible="binaryDataDisplayVisible"
|
:window-visible="binaryDataDisplayVisible"
|
||||||
:display-data="binaryDataDisplayData"
|
:display-data="binaryDataDisplayData"
|
||||||
@close="closeBinaryDataDisplay"
|
@close="closeBinaryDataDisplay"
|
||||||
|
|
Loading…
Reference in a new issue