n8n/packages/editor-ui/src/components/CredentialIcon.vue
कारतोफ्फेलस्क्रिप्ट™ ebb3aaf61e
refactor(editor): Drop vue-typed-mixins (no-changelog) (#6257)
2023-05-16 11:43:46 +02:00

96 lines
2.2 KiB
Vue

<template>
<div>
<img v-if="filePath" :class="$style.credIcon" :src="filePath" />
<NodeIcon v-else-if="relevantNode" :nodeType="relevantNode" :size="28" />
<span :class="$style.fallback" v-else></span>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useCredentialsStore } from '@/stores/credentials.store';
import { useRootStore } from '@/stores/n8nRoot.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import type { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
export default defineComponent({
props: {
credentialTypeName: {
type: String,
},
},
computed: {
...mapStores(useCredentialsStore, useNodeTypesStore, useRootStore),
credentialWithIcon(): ICredentialType | null {
return this.credentialTypeName ? this.getCredentialWithIcon(this.credentialTypeName) : null;
},
filePath(): string | null {
const iconUrl = this.credentialWithIcon?.iconUrl;
if (!iconUrl) {
return null;
}
return this.rootStore.getBaseUrl + iconUrl;
},
relevantNode(): INodeTypeDescription | null {
if (this.credentialWithIcon?.icon?.startsWith('node:')) {
const nodeType = this.credentialWithIcon.icon.replace('node:', '');
return this.nodeTypesStore.getNodeType(nodeType);
}
const nodesWithAccess = this.credentialsStore.getNodesWithAccess(this.credentialTypeName);
if (nodesWithAccess.length) {
return nodesWithAccess[0];
}
return null;
},
},
methods: {
getCredentialWithIcon(name: string | null): ICredentialType | null {
if (!name) {
return null;
}
const type = this.credentialsStore.getCredentialTypeByName(name);
if (!type) {
return null;
}
if (type.icon || type.iconUrl) {
return type;
}
if (type.extends) {
let parentCred = null;
type.extends.forEach((name) => {
parentCred = this.getCredentialWithIcon(name);
if (parentCred !== null) return;
});
return parentCred;
}
return null;
},
},
});
</script>
<style lang="scss" module>
.credIcon {
height: 26px;
}
.fallback {
height: 28px;
width: 28px;
display: flex;
border-radius: 50%;
background-color: var(--color-foreground-base);
}
</style>