✨ Render base strings
This commit is contained in:
Iván Ovejero
191
packages/editor-ui/src/components/mixins/renderText.ts
Normal file
191
packages/editor-ui/src/components/mixins/renderText.ts
Normal file
@@ -0,0 +1,191 @@
|
||||
// import { TranslationPath } from '@/Interface';
|
||||
import Vue from 'vue';
|
||||
|
||||
export const renderText = Vue.extend({
|
||||
computed: {
|
||||
/**
|
||||
* Node type for the active node in `NodeView.vue`.
|
||||
*/
|
||||
activeNodeType (): string {
|
||||
return this.$store.getters.activeNode.type;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Render a string of base text, i.e. a string with a **fixed path** to the value in the locale object. Allows for [interpolation](https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting) when the localized value contains a string between curly braces.
|
||||
* ```js
|
||||
* $baseText('fixed.path.to.localized.value');
|
||||
* $baseText('fixed.path.to.localized.value', { interpolate: { var: arg } });
|
||||
* ```
|
||||
*/
|
||||
$baseText(
|
||||
key: string,
|
||||
options?: { interpolate: { [key: string]: string } },
|
||||
): string {
|
||||
return this.$t(key, options && options.interpolate).toString();
|
||||
},
|
||||
|
||||
/**
|
||||
* Translate a node- or credentials-specific string.
|
||||
* Called in-mixin by node- or credentials-specific methods,
|
||||
* which are called directly in Vue templates.
|
||||
*/
|
||||
translateSpecific(
|
||||
{ key, fallback }: { key: string, fallback: string },
|
||||
): string {
|
||||
return this.$te(key) ? this.$t(key).toString() : fallback;
|
||||
},
|
||||
|
||||
// -----------------------------------------
|
||||
// node-specific methods
|
||||
// -----------------------------------------
|
||||
|
||||
/**
|
||||
* Translate a top-level node parameter name, i.e. leftmost parameter in `NodeView.vue`.
|
||||
*/
|
||||
$translateNodeParameterName(
|
||||
{ name: parameterName, displayName }: { name: string; displayName: string; },
|
||||
) {
|
||||
return this.translateSpecific({
|
||||
key: `${this.activeNodeType}.parameters.${parameterName}.displayName`,
|
||||
fallback: displayName,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Translate a top-level parameter description for a node or for credentials.
|
||||
*/
|
||||
$translateDescription(
|
||||
{ name: parameterName, description }: { name: string; description: string; },
|
||||
) {
|
||||
return this.translateSpecific({
|
||||
key: `${this.activeNodeType}.parameters.${parameterName}.description`,
|
||||
fallback: description,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Translate the name for an option in a `collection` or `fixed collection` parameter,
|
||||
* e.g. an option name in an "Additional Options" fixed collection.
|
||||
*/
|
||||
$translateCollectionOptionName(
|
||||
{ name: parameterName }: { name: string; },
|
||||
{ name: optionName, displayName }: { name: string; displayName: string; },
|
||||
) {
|
||||
return this.translateSpecific({
|
||||
key: `${this.activeNodeType}.parameters.${parameterName}.options.${optionName}.displayName`,
|
||||
fallback: displayName,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Translate the label for a button that adds another field-input pair to a collection.
|
||||
*/
|
||||
$translateMultipleValueButtonText(
|
||||
{ name: parameterName, typeOptions: { multipleValueButtonText } }:
|
||||
{ name: string, typeOptions: { multipleValueButtonText: string } },
|
||||
) {
|
||||
return this.translateSpecific({
|
||||
key: `${this.activeNodeType}.parameters.${parameterName}.multipleValueButtonText`,
|
||||
fallback: multipleValueButtonText,
|
||||
});
|
||||
},
|
||||
|
||||
// -----------------------------------------
|
||||
// creds-specific methods
|
||||
// -----------------------------------------
|
||||
|
||||
/**
|
||||
* Translate a credentials property name, i.e. leftmost parameter in `CredentialsEdit.vue`.
|
||||
*/
|
||||
$translateCredentialsPropertyName(
|
||||
{ name: parameterName, displayName }: { name: string; displayName: string; },
|
||||
{ nodeType, credentialsName }: { nodeType: string, credentialsName: string; },
|
||||
) {
|
||||
if (['clientId', 'clientSecret'].includes(parameterName)) {
|
||||
return this.$t(`oauth2.${parameterName}`);
|
||||
}
|
||||
|
||||
return this.translateSpecific({
|
||||
key: `${nodeType}.credentials.${credentialsName}.${parameterName}.displayName`,
|
||||
fallback: displayName,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Translate a credentials property description, i.e. label tooltip in `CredentialsEdit.vue`.
|
||||
*/
|
||||
$translateCredentialsPropertyDescription(
|
||||
{ name: parameterName, description }: { name: string; description: string; },
|
||||
{ nodeType, credentialsName }: { nodeType: string, credentialsName: string; },
|
||||
) {
|
||||
return this.translateSpecific({
|
||||
key: `${nodeType}.credentials.${credentialsName}.${parameterName}.description`,
|
||||
fallback: description,
|
||||
});
|
||||
},
|
||||
|
||||
// -----------------------------------------
|
||||
// node- and creds-specific methods
|
||||
// -----------------------------------------
|
||||
|
||||
/**
|
||||
* Translate the placeholder inside the input field for a string-type parameter.
|
||||
*/
|
||||
$translatePlaceholder(
|
||||
{ name: parameterName, placeholder }: { name: string; placeholder: string; },
|
||||
isCredential = false,
|
||||
{ nodeType, credentialsName } = { nodeType: '', credentialsName: '' },
|
||||
) {
|
||||
const key = isCredential
|
||||
? `${nodeType}.credentials.${credentialsName}.placeholder`
|
||||
: `${this.activeNodeType}.parameters.${parameterName}.placeholder`;
|
||||
|
||||
return this.translateSpecific({
|
||||
key,
|
||||
fallback: placeholder,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Translate the name for an option in an `options` parameter,
|
||||
* e.g. an option name in a "Resource" or "Operation" dropdown menu.
|
||||
*/
|
||||
$translateOptionsOptionName(
|
||||
{ name: parameterName }: { name: string },
|
||||
{ value: optionName, name: displayName }: { value: string; name: string; },
|
||||
isCredential = false,
|
||||
{ nodeType, credentialsName } = { nodeType: '', credentialsName: '' },
|
||||
) {
|
||||
const key = isCredential
|
||||
? `${nodeType}.credentials.${credentialsName}.options.${optionName}.displayName`
|
||||
: `${this.activeNodeType}.parameters.${parameterName}.options.${optionName}.displayName`;
|
||||
|
||||
return this.translateSpecific({
|
||||
key,
|
||||
fallback: displayName,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Translate the description for an option in an `options` parameter,
|
||||
* e.g. an option name in a "Resource" or "Operation" dropdown menu.
|
||||
*/
|
||||
$translateOptionsOptionDescription(
|
||||
{ name: parameterName }: { name: string },
|
||||
{ value: optionName, description }: { value: string; description: string; },
|
||||
isCredential = false,
|
||||
{ nodeType, credentialsName } = { nodeType: '', credentialsName: '' },
|
||||
) {
|
||||
const key = isCredential
|
||||
? `${nodeType}.credentials.${credentialsName}.options.${optionName}.description`
|
||||
: `${this.activeNodeType}.parameters.${parameterName}.options.${optionName}.description`;
|
||||
|
||||
return this.translateSpecific({
|
||||
key,
|
||||
fallback: description,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user