niu/kintone-plugin-docx
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

feat: Upgrade plugin version to 2.0.0 and refactor configuration handling

Browse Source 
- Updated version numbers in package.json, package-lock.json, and manifest.json to 2.0.0.
- Refactored configuration types to use data sources (SELF, APP) instead of type-based configurations.
- Enhanced settings UI to allow selection between using the current record or another app's record.
- Improved error handling and validation for configuration settings.
- Added new input component for better handling of text inputs in settings.
- Updated localization files for new settings structure and error messages.
- Optimized API calls with memoization for fetching form field properties and checking configurations.
This commit is contained in:
Yoshihiro OKUMURA
2025-10-02 13:26:46 +09:00
parent 99251b4748
commit 94b7277b3a
16 changed files with 374 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "kintone-plugin-docx",
"version": "1.0.2",
"version": "2.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "kintone-plugin-docx",
"version": "1.0.2",
"version": "2.0.0",
"dependencies": {
"@kintone/rest-api-client": "^5.7.5",
"angular-expressions": "^1.5.1",
@@ -14,11 +14,11 @@
"dayjs": "^1.11.18",
"docxtemplater": "^3.66.4",
"file-saver": "^2.0.5",
"i18next": "^25.5.2",
"i18next": "^25.5.3",
"moize": "^6.1.6",
"pizzip": "^3.2.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-error-boundary": "^6.0.0",
"react-i18next": "^16.0.0",
"tiny-invariant": "^1.3.3"
@@ -31,9 +31,9 @@
"@rspack/cli": "^1.5.8",
"@rspack/core": "^1.5.8",
"@types/file-saver": "^2.0.7",
"@types/node": "^24.6.0",
"@types/react": "^19.1.16",
"@types/react-dom": "^19.1.9",
"@types/node": "^24.6.2",
"@types/react": "^19.2.0",
"@types/react-dom": "^19.2.0",
"cross-env": "^10.1.0",
"cspell": "^9.2.1",
"env-cmd": "^11.0.0",
@@ -41,7 +41,7 @@
"npm-run-all": "^4.1.5",
"prettier": "^3.6.2",
"ts-node": "^10.9.2",
"typescript": "^5.9.2"
"typescript": "^5.9.3"
}
},
"node_modules/@babel/code-frame": {
@@ -2428,9 +2428,9 @@
}
},
"node_modules/@types/node": {
"version": "24.6.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.6.0.tgz",
"integrity": "sha512-F1CBxgqwOMc4GKJ7eY22hWhBVQuMYTtqI8L0FcszYcpYX0fzfDGpez22Xau8Mgm7O9fI+zA/TYIdq3tGWfweBA==",
"version": "24.6.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.6.2.tgz",
"integrity": "sha512-d2L25Y4j+W3ZlNAeMKcy7yDsK425ibcAOO2t7aPTz6gNMH0z2GThtwENCDc0d/Pw9wgyRqE5Px1wkV7naz8ang==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2469,9 +2469,9 @@
"license": "MIT"
},
"node_modules/@types/react": {
"version": "19.1.16",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.16.tgz",
"integrity": "sha512-WBM/nDbEZmDUORKnh5i1bTnAz6vTohUf9b8esSMu+b24+srbaxa04UbJgWx78CVfNXA20sNu0odEIluZDFdCog==",
"version": "19.2.0",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.0.tgz",
"integrity": "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2479,13 +2479,13 @@
}
},
"node_modules/@types/react-dom": {
"version": "19.1.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
"integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
"version": "19.2.0",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.0.tgz",
"integrity": "sha512-brtBs0MnE9SMx7px208g39lRmC5uHZs96caOJfTjFcYSLHNamvaSMfJNagChVNkup2SdtOxKX1FDBkRSJe1ZAg==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"@types/react": "^19.0.0"
"@types/react": "^19.2.0"
}
},
"node_modules/@types/retry": {
@@ -7337,9 +7337,9 @@
}
},
"node_modules/i18next": {
"version": "25.5.2",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-25.5.2.tgz",
"integrity": "sha512-lW8Zeh37i/o0zVr+NoCHfNnfvVw+M6FQbRp36ZZ/NyHDJ3NJVpp2HhAUyU9WafL5AssymNoOjMRB48mmx2P6Hw==",
"version": "25.5.3",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-25.5.3.tgz",
"integrity": "sha512-joFqorDeQ6YpIXni944upwnuHBf5IoPMuqAchGVeQLdWC2JOjxgM9V8UGLhNIIH/Q8QleRxIi0BSRQehSrDLcg==",
"funding": [
{
"type": "individual",
@@ -9906,24 +9906,24 @@
}
},
"node_modules/react": {
"version": "19.1.1",
"resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
"integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
"version": "19.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "19.1.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
"integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
"version": "19.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
"license": "MIT",
"dependencies": {
"scheduler": "^0.26.0"
"scheduler": "^0.27.0"
},
"peerDependencies": {
"react": "^19.1.1"
"react": "^19.2.0"
}
},
"node_modules/react-error-boundary": {
@@ -10491,9 +10491,9 @@
"license": "MIT"
},
"node_modules/scheduler": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
"license": "MIT"
},
"node_modules/schema-utils": {
@@ -11936,9 +11936,9 @@
"license": "MIT"
},
"node_modules/typescript": {
"version": "5.9.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
"version": "5.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"devOptional": true,
"license": "Apache-2.0",
"bin": {

16
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "kintone-plugin-docx",
"version": "1.0.2",
"version": "2.0.0",
"scripts": {
"gen": "run-s gen:*",
"gen:key": "node scripts/generate-private-key.js",
@@ -22,11 +22,11 @@
"dayjs": "^1.11.18",
"docxtemplater": "^3.66.4",
"file-saver": "^2.0.5",
"i18next": "^25.5.2",
"i18next": "^25.5.3",
"moize": "^6.1.6",
"pizzip": "^3.2.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-error-boundary": "^6.0.0",
"react-i18next": "^16.0.0",
"tiny-invariant": "^1.3.3"
@@ -39,9 +39,9 @@
"@rspack/cli": "^1.5.8",
"@rspack/core": "^1.5.8",
"@types/file-saver": "^2.0.7",
"@types/node": "^24.6.0",
"@types/react": "^19.1.16",
"@types/react-dom": "^19.1.9",
"@types/node": "^24.6.2",
"@types/react": "^19.2.0",
"@types/react-dom": "^19.2.0",
"cross-env": "^10.1.0",
"cspell": "^9.2.1",
"env-cmd": "^11.0.0",
@@ -49,6 +49,6 @@
"npm-run-all": "^4.1.5",
"prettier": "^3.6.2",
"ts-node": "^10.9.2",
"typescript": "^5.9.2"
"typescript": "^5.9.3"
}
}

5
plugin/manifest.json
View File

@@ -1,7 +1,7 @@
{
"$schema": "https://raw.githubusercontent.com/kintone/js-sdk/%40kintone/plugin-manifest-validator%4010.2.0/packages/plugin-manifest-validator/manifest-schema.json",
"manifest_version": 1,
"version": "1.0.2",
"version": "2.0.0",
"type": "APP",
"desktop": {
"js": ["js/desktop.js"],
@@ -15,8 +15,7 @@
"config": {
"html": "html/config.html",
"js": ["js/config.js"],
"css": ["js/config.css"],
"required_params": ["template"]
"css": ["js/config.css"]
},
"name": {
"en": "Word output plugin",

38
src/common/config.ts
View File

@@ -1,29 +1,25 @@
export const PluginConfigType = {
SELF: 0,
APP: 1,
URL: 2,
export const PluginConfigDataSource = {
SELF: 'self',
APP: 'app',
} as const;
export type PluginConfigDataSource = (typeof PluginConfigDataSource)[keyof typeof PluginConfigDataSource];
export interface PluginConfigSelf {
type: typeof PluginConfigType.SELF;
template: string;
dataSource: typeof PluginConfigDataSource.SELF;
fieldCode: string;
}
export interface PluginConfigApp {
type: typeof PluginConfigType.APP;
dataSource: typeof PluginConfigDataSource.APP;
appId: string;
template: string;
recordId: string;
}
export interface PluginConfigUrl {
type: typeof PluginConfigType.URL;
template: string;
fieldCode: string;
}
export type PluginConfig = PluginConfigSelf | PluginConfigApp | PluginConfigUrl;
export type PluginConfig = PluginConfigSelf | PluginConfigApp;
const DEFAULT_CONFIG: PluginConfig = {
type: PluginConfigType.SELF,
template: '',
dataSource: PluginConfigDataSource.SELF,
fieldCode: '',
} as const;
export const saveConfig = (config: PluginConfig, callback?: () => void): void => {
@@ -31,5 +27,15 @@ export const saveConfig = (config: PluginConfig, callback?: () => void): void =>
};
export const loadConfig = (pluginId: string): PluginConfig => {
return { ...DEFAULT_CONFIG, ...(kintone.plugin.app.getConfig(pluginId) as PluginConfig) };
const config = kintone.plugin.app.getConfig(pluginId);
if (!config || Object.keys(config).length === 0) {
// initial state
return { ...DEFAULT_CONFIG };
}
if (config.dataSource != null) {
// current version of config format
return config as PluginConfig;
}
// old version of config format
return { dataSource: PluginConfigDataSource.SELF, fieldCode: config.template || '' };
};

46
src/common/ui/KintonePluginInputText.tsx Normal file
View File

@@ -0,0 +1,46 @@
import clsx from 'clsx';
// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
import React from 'react';
export type KintonePluginInputTextProps = {
id?: string;
className?: string;
value: string;
size?: number;
maxLength?: number;
disabled?: boolean;
required?: boolean;
placeholder?: string;
onChange: (value: string) => void;
};
const KintonePluginInputText: React.FC<KintonePluginInputTextProps> = (props) => {
const { id, className, value, size, maxLength, disabled, required, placeholder, onChange } = props;
const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
onChange(e.target.value);
};
return (
<div className={clsx('kintoneplugin-input-outer', className)}>
<input
id={id}
className="kintoneplugin-input-text"
type="text"
value={value}
size={size}
maxLength={maxLength}
disabled={disabled}
required={required}
placeholder={placeholder}
aria-required={required}
aria-disabled={disabled}
aria-invalid={required && value === ''}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck={false}
onChange={handleOnChange}
/>
</div>
);
};
export default KintonePluginInputText;

17
src/config/ConfigApp.tsx
View File

@@ -1,19 +1,34 @@
import { KintoneRestAPIClient } from '@kintone/rest-api-client';
import moize from 'moize';
import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import invariant from 'tiny-invariant';
import ErrorFallback from '../common/ErrorFallback';
import Loading from '../common/Loading';
import type { KintoneFormFieldProperties } from '../common/types';
import Settings from './Settings';
interface ConfigAppProps {
pluginId: string;
}
const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<KintoneFormFieldProperties> => {
const client = new KintoneRestAPIClient();
const { properties } = await client.app.getFormFields({ app: appId, preview: true });
return properties;
});
const ConfigApp: React.FC<ConfigAppProps> = (props) => {
const { pluginId } = props;
const appId = kintone.app.getId();
invariant(appId, 'The app ID is not available. Please ensure you are on a Kintone app page.');
const propertiesPromise = cachedFormFieldsProperties(appId);
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<React.Suspense fallback={<Loading />}>
<Settings pluginId={pluginId} />
<Settings pluginId={pluginId} appId={appId} propertiesPromise={propertiesPromise} />
</React.Suspense>
</ErrorBoundary>
);

7
src/config/Settings.module.css
View File

@@ -1,3 +1,10 @@
.settings .app {
display: flex;
gap: 2em;
align-items: center;
margin-bottom: 1em;
}
.buttons > *:not(:last-child) {
margin-right: 0.5em;
}

155
src/config/Settings.tsx
View File

@@ -1,85 +1,176 @@
import { KintoneRestAPIClient } from '@kintone/rest-api-client';
import moize from 'moize';
import React from 'react';
import { useTranslation } from 'react-i18next';
import invariant from 'tiny-invariant';
import { PluginConfigType, saveConfig } from '../common/config';
import type { PluginConfig } from '../common/config';
import { loadConfig, PluginConfigDataSource, saveConfig } from '../common/config';
import { naturalCompare } from '../common/stringUtils';
import type { KintoneFormFieldProperties } from '../common/types';
import KintonePluginAlert from '../common/ui/KintonePluginAlert';
import KintonePluginButton from '../common/ui/KintonePluginButton';
import KintonePluginDesc from '../common/ui/KintonePluginDesc';
import KintonePluginInputText from '../common/ui/KintonePluginInputText';
import KintonePluginLabel from '../common/ui/KintonePluginLabel';
import KintonePluginRequire from '../common/ui/KintonePluginRequire';
import KintonePluginRow from '../common/ui/KintonePluginRow';
import KintonePluginSelect, { type KintonePluginSelectOptionData } from '../common/ui/KintonePluginSelect';
import KintonePluginTitle from '../common/ui/KintonePluginTitle';
import styles from './Settings.module.css';
const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<KintoneFormFieldProperties> => {
const client = new KintoneRestAPIClient();
const { properties } = await client.app.getFormFields({ app: appId, preview: true });
return properties;
});
import styles from './Settings.module.css';
interface SettingsProps {
pluginId: string;
appId: number;
propertiesPromise: Promise<KintoneFormFieldProperties>;
}
const Settings: React.FC<SettingsProps> = (props) => {
const { pluginId } = props;
const { pluginId, appId, propertiesPromise } = props;
const { t } = useTranslation();
const config = kintone.plugin.app.getConfig(pluginId);
const appId = kintone.app.getId();
invariant(appId, 'The app ID is not available. Please ensure you are on a Kintone app page.');
const properties = React.use(cachedFormFieldsProperties(appId));
const config = loadConfig(pluginId);
const properties = React.use(propertiesPromise);
// data source options
const dataSourceOptions = [
{ value: PluginConfigDataSource.SELF, label: t('settings.datasource.labels.self') },
{ value: PluginConfigDataSource.APP, label: t('settings.datasource.labels.app') },
];
const [dataSource, setDataSource] = React.useState<
(typeof PluginConfigDataSource)[keyof typeof PluginConfigDataSource]
>(config.dataSource);
// states for SELF data source
const fileFields = Object.values(properties)
.filter((property) => property.type === 'FILE')
.sort((a, b) => naturalCompare(`${a.label} (${a.code})`, `${b.label} (${b.code})`));
const options: KintonePluginSelectOptionData[] = [
{ value: '', label: t('settings.template.messages.select-an-attachment-fields'), disabled: true }, // Default option
{ value: '', label: t('settings.self.messages.select-an-attachment-fields'), disabled: true }, // Default option
...fileFields.map((property) => ({
value: property.code,
label: `${property.label} (${property.code})`,
})),
];
const [fieldCode, setFieldCode] = React.useState<string>(
() =>
options.find((option) => config.dataSource === PluginConfigDataSource.SELF && option.value === config.fieldCode)
?.value ?? '',
);
const [template, setTemplate] = React.useState<string>(
() => options.find((option) => option.value === (config.template ?? ''))?.value ?? '',
// states for APP data source
const [otherAppId, setOtherAppId] = React.useState<string>(
config.dataSource === PluginConfigDataSource.APP ? config.appId : '',
);
const [otherRecordId, setOtherRecordId] = React.useState<string>(
config.dataSource === PluginConfigDataSource.APP ? config.recordId : '',
);
const [otherFieldCode, setOtherFieldCode] = React.useState<string>(
config.dataSource === PluginConfigDataSource.APP ? config.fieldCode : '',
);
const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
saveConfig({ type: PluginConfigType.SELF, template }, () => {
let configToSave: PluginConfig;
if (dataSource === PluginConfigDataSource.SELF) {
configToSave = { dataSource: PluginConfigDataSource.SELF, fieldCode };
} else if (dataSource === PluginConfigDataSource.APP) {
configToSave = {
dataSource: PluginConfigDataSource.APP,
appId: otherAppId,
fieldCode: otherFieldCode,
recordId: otherRecordId,
};
} else {
return;
}
saveConfig(configToSave, () => {
alert(t('on-saved'));
window.location.href = `../../flow?app=${appId}`;
});
};
const handleOnChangeTemplate = (value: string) => {
setTemplate(value);
};
const handleOnClickCancel = () => {
window.location.href = `../../${appId}/plugin/`;
};
return (
<section className="settings">
<div className={styles.settings}>
<KintonePluginLabel>{t('title')}</KintonePluginLabel>
<form onSubmit={handleOnSubmit}>
<KintonePluginRow>
<KintonePluginTitle>
{t('settings.template.title')}
{t('settings.datasource.title')}
<KintonePluginRequire>*</KintonePluginRequire>
</KintonePluginTitle>
<KintonePluginDesc> {t('settings.template.description')}</KintonePluginDesc>
{fileFields.length === 0 ? (
<KintonePluginAlert>{t('settings.template.errors.no-attachment-field-found')}</KintonePluginAlert>
) : (
<KintonePluginSelect value={template} onChange={handleOnChangeTemplate} options={options} />
)}
<KintonePluginDesc>{t('settings.datasource.description')}</KintonePluginDesc>
<KintonePluginSelect
value={String(dataSource)}
onChange={(value) => {
const newDataSource = value as PluginConfigDataSource;
if (Object.values(PluginConfigDataSource).includes(newDataSource)) {
setDataSource(newDataSource);
}
}}
options={dataSourceOptions.map((opt) => ({ value: String(opt.value), label: opt.label }))}
/>
</KintonePluginRow>
{dataSource === PluginConfigDataSource.SELF && (
<KintonePluginRow>
<KintonePluginTitle>
{t('settings.self.title')}
<KintonePluginRequire>*</KintonePluginRequire>
</KintonePluginTitle>
<KintonePluginDesc>{t('settings.self.description')}</KintonePluginDesc>
{fileFields.length === 0 ? (
<KintonePluginAlert>{t('settings.self.errors.no-attachment-field-found')}</KintonePluginAlert>
) : (
<KintonePluginSelect value={fieldCode} onChange={(value) => setFieldCode(value)} options={options} />
)}
</KintonePluginRow>
)}
{dataSource === PluginConfigDataSource.APP && (
<KintonePluginRow>
<KintonePluginTitle>
{t('settings.app.title')}
<KintonePluginRequire>*</KintonePluginRequire>
</KintonePluginTitle>
<KintonePluginDesc>{t('settings.app.description')}</KintonePluginDesc>
<div className={styles.app}>
<label htmlFor="otherAppIdInput">
{t('settings.app.labels.app-id')} <KintonePluginRequire>*</KintonePluginRequire>
<br />
<KintonePluginInputText
id="otherAppIdInput"
value={otherAppId}
required
onChange={(value) => {
setOtherAppId(value);
}}
/>
</label>
<label htmlFor="otherRecordIdInput">
{t('settings.app.labels.record-id')} <KintonePluginRequire>*</KintonePluginRequire>
<br />
<KintonePluginInputText
id="otherRecordIdInput"
value={otherRecordId}
required
onChange={(value) => {
setOtherRecordId(value);
}}
/>
</label>
<label htmlFor="otherFieldCodeInput">
{t('settings.app.labels.field-code')} <KintonePluginRequire>*</KintonePluginRequire>
<br />
<KintonePluginInputText
id="otherFieldCodeInput"
value={otherFieldCode}
required
onChange={(value) => {
setOtherFieldCode(value);
}}
/>
</label>
</div>
</KintonePluginRow>
)}
<KintonePluginRow className={styles.buttons}>
<KintonePluginButton variant="dialog-cancel" type="button" onClick={handleOnClickCancel}>
{t('buttons.cancel')}
@@ -89,7 +180,7 @@ const Settings: React.FC<SettingsProps> = (props) => {
</KintonePluginButton>
</KintonePluginRow>
</form>
</section>
</div>
);
};
export default Settings;

21
src/config/locales/en.json
View File

@@ -1,15 +1,32 @@
{
"title": "Settings for the Kintone Word output plugin",
"settings": {
"template": {
"datasource": {
"title": "Select data source for Word template file",
"description": "Please select the data source for the Word template file.",
"labels": {
"self": "Own record",
"app": "Record from another app"
}
},
"self": {
"title": "Template",
"description": "Select a attachment field that contains the Word template file.",
"description": "Select an attachment field that contains the Word template file.",
"messages": {
"select-an-attachment-fields": "(Select an attachment field)"
},
"errors": {
"no-attachment-field-found": "No attachment fields found in the app. Please add an attachment field to use this plugin."
}
},
"app": {
"title": "Attachment file info from another app",
"description": "Enter App ID, Record ID, and Attachment Field Code.",
"labels": {
"app-id": "App ID",
"record-id": "Record ID",
"field-code": "Attachment Field Code"
}
}
},
"buttons": {

19
src/config/locales/ja.json
View File

@@ -1,7 +1,15 @@
{
"title": "Word出力プラグイン設定",
"settings": {
"template": {
"datasource": {
"title": "WORD雛形ファイルのデータソース選択",
"description": "WORD雛形ファイルのデータソースを選択してください。",
"labels": {
"self": "自レコード",
"app": "他アプリのレコード"
}
},
"self": {
"title": "雛形ファイル",
"description": "Word雛形ファイルを保存する添付ファイルフィールドを選択してください。",
"messages": {
@@ -10,6 +18,15 @@
"errors": {
"no-attachment-field-found": "このアプリに添付ファイルフィールドが見つかりません。フォームに添付ファイルフィールドを追加してください。"
}
},
"app": {
"title": "他アプリの添付ファイル情報",
"description": "アプリID・レコード番号・添付ファイルフィールドコードを入力してください。",
"labels": {
"app-id": "アプリID",
"record-id": "レコード番号",
"field-code": "添付ファイルフィールドコード"
}
}
},
"buttons": {

29
src/desktop/DesktopApp.tsx
View File

@@ -1,7 +1,12 @@
import { KintoneRestAPIClient } from '@kintone/rest-api-client';
import moize from 'moize';
import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { loadConfig, type PluginConfig } from '../common/config';
import ErrorFallback from '../common/ErrorFallback';
import Loading from '../common/Loading';
import type { KintoneFormFieldProperties } from '../common/types';
import { checkConfig } from './checkConfig';
import MenuPanel from './MenuPanel';
interface DesktopAppProps {
@@ -9,12 +14,34 @@ interface DesktopAppProps {
event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent;
}
const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<KintoneFormFieldProperties> => {
const client = new KintoneRestAPIClient();
const { properties } = await client.app.getFormFields({ app: appId, preview: false });
return properties;
});
const cachedConfigCheck = moize.promise(
async (config: PluginConfig, record: kintone.types.SavedFields): Promise<string> => {
return await checkConfig(config, record);
},
);
const DesktopApp: React.FC<DesktopAppProps> = (props) => {
const { pluginId, event } = props;
const config = loadConfig(pluginId);
const propertiesPromise = cachedFormFieldsProperties(event.appId);
const fileKeyPromise = cachedConfigCheck(config, event.record);
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<React.Suspense fallback={<Loading />}>
<MenuPanel pluginId={pluginId} event={event} />
<MenuPanel
pluginId={pluginId}
event={event}
propertiesPromise={propertiesPromise}
fileKeyPromise={fileKeyPromise}
/>
</React.Suspense>
</ErrorBoundary>
);

44
src/desktop/MenuPanel.tsx
View File

@@ -1,58 +1,30 @@
import { KintoneRestAPIClient } from '@kintone/rest-api-client';
import saveAs from 'file-saver';
import moize from 'moize';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { loadConfig, type PluginConfig, PluginConfigType } from '../common/config';
import type { KintoneFormFieldProperties } from '../common/types';
import KintonePluginButton from '../common/ui/KintonePluginButton';
import { checkConfig } from './checkConfig';
import generateWordFileData from './generateWordFileData';
export interface MenuPanelProps {
pluginId: string;
event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent;
propertiesPromise: Promise<KintoneFormFieldProperties>;
fileKeyPromise: Promise<string>;
}
const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<KintoneFormFieldProperties> => {
const client = new KintoneRestAPIClient();
const { properties } = await client.app.getFormFields({ app: appId, preview: false });
return properties;
});
const cachedConfigCheck = moize.promise(
async (config: PluginConfig, record: kintone.types.SavedFields): Promise<string> => {
return checkConfig(config, record);
},
);
const downloadFile = async (config: PluginConfig, template: string): Promise<ArrayBuffer> => {
if (config.type === PluginConfigType.SELF || config.type === PluginConfigType.APP) {
const client = new KintoneRestAPIClient();
const content = await client.file.downloadFile({ fileKey: template });
return content;
} else {
// PluginConfigType.URL
const [body, status, _headers] = await kintone.proxy(template, 'GET', {}, {});
if (status !== 200) {
throw new Error(`Failed to download the file from URL: ${template}`);
}
return new Uint16Array(Array.from(String(body), (c) => c.charCodeAt(0))).buffer;
}
};
const MenuPanel: React.FC<MenuPanelProps> = (props) => {
const { pluginId, event } = props;
const { event, propertiesPromise, fileKeyPromise } = props;
const { t } = useTranslation();
const appId = event.appId;
const language = kintone.getLoginUser().language;
const config = loadConfig(pluginId);
const template = React.use(cachedConfigCheck(config, event.record));
const properties = React.use(cachedFormFieldsProperties(appId));
const properties = React.use(propertiesPromise);
const fileKey = React.use(fileKeyPromise);
const handleOnClickOutputButton = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
downloadFile(config, template)
const client = new KintoneRestAPIClient();
client.file
.downloadFile({ fileKey })
.then((content) => {
const out = generateWordFileData(content, properties, event.record, language);
saveAs(out, 'output.docx');

32
src/desktop/checkConfig.ts
View File

@@ -3,18 +3,17 @@ import i18n from 'i18next';
import {
type PluginConfig,
type PluginConfigApp,
PluginConfigDataSource,
type PluginConfigSelf,
PluginConfigType,
type PluginConfigUrl,
} from '../common/config';
import { DOCX_CONTENT_TYPE } from '../common/constants';
const checkConfigSelf = (config: PluginConfigSelf, record: kintone.types.SavedFields): string => {
const { template } = config;
if (template === '') {
const { fieldCode } = config;
if (fieldCode === '') {
throw new Error(i18n.t('errors.template-field-is-required'));
}
const field = record[template];
const field = record[fieldCode];
if (!field) {
throw new Error(i18n.t('errors.template-field-is-not-available'));
}
@@ -35,21 +34,21 @@ const checkConfigSelf = (config: PluginConfigSelf, record: kintone.types.SavedFi
};
const checkConfigApp = async (config: PluginConfigApp): Promise<string> => {
const { appId, template, recordId } = config;
const { appId, fieldCode, recordId } = config;
if (appId === '') {
throw new Error(i18n.t('errors.app-id-is-required'));
}
if (recordId === '') {
throw new Error(i18n.t('errors.record-id-is-required'));
}
if (template === '') {
if (fieldCode === '') {
throw new Error(i18n.t('errors.template-field-is-required'));
}
const client = new KintoneRestAPIClient();
const { record } = await client.record.getRecord({ app: appId, id: recordId }).catch((_error) => {
throw new Error(i18n.t('errors.record-is-not-available'));
});
const field = record[template];
const field = record[fieldCode];
if (!field) {
throw new Error(i18n.t('errors.template-field-is-not-available'));
}
@@ -69,24 +68,11 @@ const checkConfigApp = async (config: PluginConfigApp): Promise<string> => {
return files[0].fileKey;
};
const checkConfigUrl = (config: PluginConfigUrl): string => {
const { template } = config;
if (template === '') {
throw new Error(i18n.t('errors.template-field-is-required'));
}
if (!template.startsWith('http://') && !template.startsWith('https://')) {
throw new Error(i18n.t('errors.template-field-must-be-a-valid-url'));
}
return template;
};
export const checkConfig = async (config: PluginConfig, record: kintone.types.SavedFields): Promise<string> => {
if (config.type === PluginConfigType.SELF) {
if (config.dataSource === PluginConfigDataSource.SELF) {
return checkConfigSelf(config, record);
} else if (config.type === PluginConfigType.APP) {
} else if (config.dataSource === PluginConfigDataSource.APP) {
return checkConfigApp(config);
} else if (config.type === PluginConfigType.URL) {
return checkConfigUrl(config);
}
throw new Error(i18n.t('errors.unexpected-error-occurred'));
};

33
src/desktop/generateWordFileData.ts
View File

@@ -179,10 +179,41 @@ const generateWordFileData = (
language: string,
) => {
const zip = new PizZip(content);
const parser = expressionParser.configure({
filters: {
toUpperCase: (str: string): string => str.toUpperCase(),
toLowerCase: (str: string): string => str.toLowerCase(),
regexMatch: (str: string, regex: string): boolean | string[] => {
const pattern = new RegExp(regex);
return pattern.test(str);
},
regexFilter: (arr: string[], regex: string): string[] => {
const pattern = new RegExp(regex);
if (Array.isArray(arr)) {
return arr.filter((item) => pattern.test(item));
}
return [];
},
includes: (arr: string[] | string, str: string): boolean => {
if (Array.isArray(arr)) {
return arr.includes(str);
} else {
return arr === str;
}
},
indexOf: (arr: string[] | string, str: string): number => {
if (Array.isArray(arr)) {
return arr.indexOf(str);
} else {
return arr === str ? 0 : -1;
}
},
},
});
const doc = new Docxtemplater(zip, {
paragraphLoop: true,
linebreaks: true,
parser: expressionParser,
parser: parser,
nullGetter: () => '',
});
doc.render(record2templateData(properties, record, language));

1
src/desktop/locales/en.json
View File

@@ -10,7 +10,6 @@
"app-id-is-required": "The app ID for the template file is required. Please check the plugin settings.",
"record-id-is-required": "The record ID for the template file is required. Please check the plugin settings.",
"record-is-not-available": "The record is not available. Please check the plugin settings.",
"template-field-must-be-a-valid-url": "The template field must be a valid URL. Please check the plugin settings.",
"unexpected-error-occurred": "An unexpected error occurred."
},
"buttons": {

1
src/desktop/locales/ja.json
View File

@@ -10,7 +10,6 @@
"app-id-is-required": "雛形ファイルを格納するアプリIDが設定されていません。プラグインの設定を見直してください。",
"record-id-is-required": "雛形ファイルを格納するアプリのレコードIDが設定されていません。プラグインの設定を見直してください。",
"record-is-not-available": "雛形ファイルを格納されたアプリのレコードが取得できません。プラグインの設定を見直してください。",
"template-field-must-be-a-valid-url": "テンプレートフィールドは有効なURLである必要があります。プラグインの設定を見直してください。",
"unexpected-error-occurred": "予期しないエラーが発生しました。"
},
"buttons": {