277 lines
10 KiB
TypeScript
277 lines
10 KiB
TypeScript
import React from 'react';
|
|
|
|
import { KintoneFormFieldProperty, KintoneRestAPIClient } from '@kintone/rest-api-client';
|
|
import { KintoneRecord } from '@shin-chan/kypes/types/page';
|
|
import dayjs from 'dayjs';
|
|
import Docxtemplater from 'docxtemplater';
|
|
import expressionParser from 'docxtemplater/expressions';
|
|
import { saveAs } from 'file-saver';
|
|
import moize from 'moize';
|
|
import PizZip from 'pizzip';
|
|
import { useTranslation } from 'react-i18next';
|
|
import invariant from 'tiny-invariant';
|
|
import { DOCX_CONTENT_TYPE } from '../common/constants';
|
|
import { KintoneFormFieldProperties } from '../common/types';
|
|
import KintonePluginAlert from '../common/ui/KintonePluginAlert';
|
|
import KintonePluginButton from '../common/ui/KintonePluginButton';
|
|
|
|
interface TemplateData {
|
|
[key: string]: TemplateData | TemplateData[] | string | string[];
|
|
}
|
|
|
|
interface MenuPanelProps {
|
|
pluginId: string;
|
|
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 formatNumberValue = (value: string, digit: boolean, scale?: number): string => {
|
|
if (value !== '' && !isNaN(Number(value))) {
|
|
const numberValue = Number(value);
|
|
const options: Intl.NumberFormatOptions = {
|
|
useGrouping: digit,
|
|
};
|
|
if (scale != null && scale >= 0) {
|
|
options.minimumFractionDigits = scale;
|
|
options.maximumFractionDigits = scale;
|
|
}
|
|
return new Intl.NumberFormat('en-US', options).format(numberValue);
|
|
}
|
|
return value;
|
|
};
|
|
|
|
const formatValueWithUnit = (
|
|
value: string,
|
|
property: KintoneFormFieldProperty.Number | KintoneFormFieldProperty.Calc,
|
|
): string => {
|
|
if (value !== '' && property.unit !== '') {
|
|
if (property.unitPosition === 'BEFORE') {
|
|
return `${property.unit} ${value}`;
|
|
} else if (property.unitPosition === 'AFTER') {
|
|
return `${value} ${property.unit}`;
|
|
}
|
|
}
|
|
return value;
|
|
};
|
|
|
|
const formatNumberRecordValue = (
|
|
value: string,
|
|
property: KintoneFormFieldProperty.Number | KintoneFormFieldProperty.Lookup,
|
|
): string => {
|
|
if ('lookup' in property) {
|
|
return value;
|
|
}
|
|
const scale = property.displayScale !== '' ? Number(property.displayScale) : undefined;
|
|
const digit = property.digit ?? false;
|
|
const formattedValue = formatNumberValue(value, digit, scale);
|
|
return formatValueWithUnit(formattedValue, property);
|
|
};
|
|
|
|
const formatCalculatedRecordValue = (
|
|
value: string,
|
|
property: KintoneFormFieldProperty.Calc,
|
|
language: string,
|
|
): string => {
|
|
const { format } = property;
|
|
if (value === '') {
|
|
return '';
|
|
}
|
|
const scale = property.displayScale !== '' ? Number(property.displayScale) : undefined;
|
|
let formattedValue: string;
|
|
if (format === 'NUMBER') {
|
|
formattedValue = formatNumberValue(value, false, scale);
|
|
} else if (format === 'NUMBER_DIGIT') {
|
|
formattedValue = formatNumberValue(value, true, scale);
|
|
} else if (format === 'DATETIME') {
|
|
// "2025-05-30T00:00:00Z" -> "2025-05-30 9:00" (browser local timezone)
|
|
const date = new Date(value);
|
|
invariant(!isNaN(date.getTime()), `Expected value to be a valid date string, but got ${value}`);
|
|
formattedValue = dayjs(date).format('YYYY-MM-DD h:mm');
|
|
} else if (format === 'DATE') {
|
|
// "2025-05-30T00:00:00Z" -> "2025-05-30" (browser local timezone)
|
|
const date = new Date(value);
|
|
invariant(!isNaN(date.getTime()), `Expected value to be a valid date string, but got ${value}`);
|
|
formattedValue = dayjs(date).format('YYYY-MM-DD');
|
|
} else if (format === 'TIME') {
|
|
// "00:30" -> "0:30"
|
|
const [hours, minutes] = value.split(':').map((v) => Number(v));
|
|
invariant(
|
|
!isNaN(hours) && !isNaN(minutes),
|
|
`Expected hours and minutes to be numbers, but got hours: ${hours}, minutes: ${minutes}`,
|
|
);
|
|
formattedValue = `${hours}:${String(minutes).padStart(2, '0')}`;
|
|
} else if (format === 'HOUR_MINUTE') {
|
|
// "49:30" -> en:"49 hours 30 minutes", ja: "49時間30分"
|
|
const [hours, minutes] = value.split(':').map((v) => Number(v));
|
|
invariant(
|
|
!isNaN(hours) && !isNaN(minutes),
|
|
`Expected hours and minutes to be numbers, but got hours: ${hours}, minutes: ${minutes}`,
|
|
);
|
|
formattedValue = language === 'ja' ? `${hours}時間${minutes}分` : `${hours} hours ${minutes} minutes`;
|
|
} else if (format === 'DAY_HOUR_MINUTE') {
|
|
// "49:30" -> en: "2 days 1 hour 30 minutes", ja: "2日1時間30分
|
|
const [hours, minutes] = value.split(':').map((v) => Number(v));
|
|
invariant(
|
|
!isNaN(hours) && !isNaN(minutes),
|
|
`Expected hours and minutes to be numbers, but got hours: ${hours}, minutes: ${minutes}`,
|
|
);
|
|
const days = Math.floor(Number(hours) / 24);
|
|
const remainingHours = Number(hours) % 24;
|
|
formattedValue =
|
|
language === 'ja'
|
|
? `${days}日${remainingHours}時間${minutes}分`
|
|
: `${days} days ${remainingHours} hours ${minutes} minutes`;
|
|
} else {
|
|
// DATETIME, DATE, TIME
|
|
formattedValue = value;
|
|
}
|
|
return formatValueWithUnit(formattedValue, property);
|
|
};
|
|
|
|
const record2data = (
|
|
properties: KintoneFormFieldProperties,
|
|
record: Partial<KintoneRecord>,
|
|
language: string,
|
|
): TemplateData => {
|
|
const data: TemplateData = {};
|
|
for (const key in record) {
|
|
if (Object.prototype.hasOwnProperty.call(record, key) && Object.prototype.hasOwnProperty.call(properties, key)) {
|
|
const item = record[key];
|
|
const property = properties[key];
|
|
if (item == null) continue;
|
|
const { type, value } = item;
|
|
if (value == null) {
|
|
data[key] = '';
|
|
} else if (type === 'CREATOR' || type === 'MODIFIER') {
|
|
data[key] = {
|
|
name: value.name,
|
|
code: value.code,
|
|
};
|
|
} else if (type === 'NUMBER') {
|
|
invariant(property.type === 'NUMBER', `Expected property type to be NUMBER, but got ${property.type}`);
|
|
data[key] = formatNumberRecordValue(value, property);
|
|
} else if (type === 'CALC') {
|
|
invariant(property.type === 'CALC', `Expected property type to be CALC, but got ${property.type}`);
|
|
data[key] = formatCalculatedRecordValue(value, property, language);
|
|
} else if (type === 'CHECK_BOX' || type === 'MULTI_SELECT' || type === 'CATEGORY') {
|
|
data[key] = value.map((v) => v);
|
|
} else if (
|
|
type === 'USER_SELECT' ||
|
|
type === 'ORGANIZATION_SELECT' ||
|
|
type === 'GROUP_SELECT' ||
|
|
type === 'STATUS_ASSIGNEE'
|
|
) {
|
|
data[key] = value.map((v) => {
|
|
return { name: v.name, code: v.code };
|
|
});
|
|
} else if (type === 'SUBTABLE') {
|
|
invariant(property.type === 'SUBTABLE', `Expected property type to be SUBTABLE, but got ${property.type}`);
|
|
data[key] = value.map((subRecord) => record2data(property.fields, subRecord.value, language));
|
|
} else if (type === 'FILE') {
|
|
invariant(property.type === 'FILE', `Expected property type to be FILE, but got ${property.type}`);
|
|
data[key] = value.map((file) => ({
|
|
name: file.name,
|
|
size: file.size,
|
|
contentType: file.contentType,
|
|
fileKey: file.fileKey,
|
|
}));
|
|
} else {
|
|
// RECORD_NUMBER, __ID__, __REVISION__, CREATED_TIME, UPDATED_TIME
|
|
// SINGLE_LINE_TEXT, MULTI_LINE_TEXT, RICH_TEXT, RADIO_BUTTON, DROP_DOWN, DATE, TIME, DATETIME, LINK, STATUS
|
|
data[key] = value;
|
|
}
|
|
}
|
|
}
|
|
return data;
|
|
};
|
|
|
|
const MenuPanel: React.FC<MenuPanelProps> = (props) => {
|
|
const { pluginId, event } = props;
|
|
const { t } = useTranslation();
|
|
const appId = event.appId;
|
|
const properties = React.use(cachedFormFieldsProperties(appId));
|
|
const language = kintone.getLoginUser().language;
|
|
const config = kintone.plugin.app.getConfig(pluginId);
|
|
const template: string = config.template ?? '';
|
|
|
|
if (template === '') {
|
|
return (
|
|
<KintonePluginAlert>
|
|
{t('name')}: {t('errors.template-field-is-not-set')}
|
|
</KintonePluginAlert>
|
|
);
|
|
}
|
|
const record = event.record[template];
|
|
if (record == null) {
|
|
return (
|
|
<KintonePluginAlert>
|
|
{t('name')}: {t('errors.template-field-is-not-available')}
|
|
</KintonePluginAlert>
|
|
);
|
|
}
|
|
if (record.type !== 'FILE') {
|
|
return (
|
|
<KintonePluginAlert>
|
|
{t('name')}: {t('errors.template-field-must-be-an-attachment-field')}
|
|
</KintonePluginAlert>
|
|
);
|
|
}
|
|
if (record.value.length === 0) {
|
|
return (
|
|
<KintonePluginAlert>
|
|
{t('name')}: {t('errors.template-field-does-not-contain-any-files')}
|
|
</KintonePluginAlert>
|
|
);
|
|
}
|
|
if (record.value.length > 1) {
|
|
return (
|
|
<KintonePluginAlert>
|
|
{t('name')}: {t('errors.template-field-contains-multiple-files')}
|
|
</KintonePluginAlert>
|
|
);
|
|
}
|
|
const { fileKey, contentType } = record.value[0];
|
|
if (contentType !== DOCX_CONTENT_TYPE) {
|
|
return (
|
|
<KintonePluginAlert>
|
|
{t('name')}: {t('errors.template-file-must-be-a-docx', { contentType })}
|
|
</KintonePluginAlert>
|
|
);
|
|
}
|
|
|
|
const handleOnClickOutputButton = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
e.preventDefault();
|
|
const client = new KintoneRestAPIClient();
|
|
client.file
|
|
.downloadFile({ fileKey })
|
|
.then((content) => {
|
|
const zip = new PizZip(content);
|
|
const doc = new Docxtemplater(zip, {
|
|
paragraphLoop: true,
|
|
linebreaks: true,
|
|
parser: expressionParser,
|
|
nullGetter: () => '',
|
|
});
|
|
doc.render(record2data(properties, event.record, language));
|
|
const out = doc.getZip().generate({ type: 'blob', mimeType: DOCX_CONTENT_TYPE });
|
|
saveAs(out, 'output.docx');
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error downloading file:', error);
|
|
alert('Failed to download the Word template file.');
|
|
});
|
|
};
|
|
|
|
return (
|
|
<KintonePluginButton variant="normal" onClick={handleOnClickOutputButton}>
|
|
{t('buttons.output')}
|
|
</KintonePluginButton>
|
|
);
|
|
};
|
|
export default MenuPanel;
|