kintone-attendance-system/src/utils.js

const Kuc = Kucs['1.19.0'];

const monthItems = Array.from({ length: 12 }, (_, i) => {
  const month = "" + (i + 1);
  return { label: month, value: month.padStart(2, '0') };
});

const dateItems = Array.from({ length: 31 }, (_, i) => {
  const date = "" + (i + 1);
  return { label: date, value: date.padStart(2, '0') };
})
dateItems.push({ label: '末日', value: 'end' });

const classItems = [
  { label: "にじ", value: "にじ" },
  { label: "ほし", value: "ほし" },
  { label: "つき", value: "つき" },
  { label: "ゆり", value: "ゆり" },
]

let errorEl;
let loadingEl;

function getHeaderSpace(className, isDetailPage) {
  const headerSpace = (isDetailPage ? kintone.app.record : kintone.app).getHeaderMenuSpaceElement();
  if (!headerSpace) {
    throw new Error('このページではヘッダー要素が利用できません。');
  };

  const _className = isDetailPage ? 'customized-record-header-space' : 'customized-header-space';

  headerSpace.className += (' ' + _className + ' ' + className);
  headerSpace.parentElement.className += (' ' + _className + '-wrapper ' + className);

  return headerSpace;
}

function createBtnGroupArea(groupId, btnLabel, btnOnClick, { btnElId = false, yearElId = false, monthElId = false, dateElId = false, classElId = false, defaultThisMonth = false, }) {
  const result = {};

  if (document.getElementById(groupId)) {
    return;
  }

  const btnGroupAreaEl = document.createElement('div');
  btnGroupAreaEl.id = groupId;
  btnGroupAreaEl.className = 'btn-group-area'
  result[groupId] = btnGroupAreaEl;

  if (yearElId) {
    const yearEl = new Kuc.Text({
      value: "" + new Date().getFullYear(),
      id: yearElId,
      label: '年',
      className: 'year input'
    });
    result[yearElId] = yearEl;
    btnGroupAreaEl.appendChild(yearEl);

    // const label = document.createElement('div');
    // label.classList = 'label'
    // label.textContent = '年';
    // btnGroupAreaEl.appendChild(label);
  }

  if (monthElId) {
    const monthEl = new Kuc.Combobox({
      value: defaultThisMonth ? monthItems[new Date().getMonth()].value : undefined,
      id: monthElId,
      className: 'month input',
      label: '月',
      items: monthItems,
    });
    result[monthElId] = monthEl;
    btnGroupAreaEl.appendChild(monthEl);

    // const label = document.createElement('div');
    // label.classList = 'label'
    // label.textContent = '月';
    // btnGroupAreaEl.appendChild(label);
  }

  if (dateElId) {
    const dateEl = new Kuc.Combobox({
      value: dateItems[new Date().getDate() - 1].value,
      id: dateElId,
      items: dateItems,
      label: '日',
      className: "date input",
    });
    result[dateElId] = dateEl;
    btnGroupAreaEl.appendChild(dateEl);

    // const label = document.createElement('div');
    // label.classList = 'label'
    // label.textContent = '日';
    // btnGroupAreaEl.appendChild(label);
  }

  if (classElId) {
    // const label = document.createElement('div');
    // label.classList = 'label'
    // label.textContent = 'クラス';
    // btnGroupAreaEl.appendChild(label);

    const classEl = new Kuc.Combobox({
      id: classElId,
      items: classItems,
      className: "classroom input",
      label: 'クラス',
    });
    result[classElId] = classEl;
    btnGroupAreaEl.appendChild(classEl);
  }

  const btnEl = new Kuc.Button({
    text: btnLabel,
    type: "submit",
    className: "action-btn",
    id: btnElId,
  });
  result[btnElId] = btnEl;
  btnEl.addEventListener('click', (e) => {
    showError(false);
    const checkResult = checkInputData(result, { btnLabel, yearElId, monthElId, dateElId, classElId });
    if (checkResult) {
      btnOnClick(e, checkResult);
    }
  });
  btnGroupAreaEl.appendChild(btnEl);

  return result;
}

function checkInputData(map, { btnLabel, yearElId, monthElId, dateElId, classElId }) {
  const year = yearElId && map[yearElId].value;
  const month = monthElId && map[monthElId].value;
  const date = dateElId && map[dateElId].value;
  const className = classElId && map[classElId].value;

  const errorMsgs = [];

  if (yearElId) {
    const yearRegex = /^\d+$/;
    if (!yearRegex.test(year)) {
      errorMsgs.push(' · 年は整数で入力してください。');
    }
  }
  if (monthElId && !month) {
    errorMsgs.push(' · 月を選択してください。');
  }
  if (dateElId && !date) {
    errorMsgs.push(' · 日を選択してください。');
  }
  if (classElId && !className) {
    errorMsgs.push(' · クラスを選択してください。');
  }
  if (errorMsgs.length > 0) {
    showError(true, btnLabel + 'エラー\n' + errorMsgs.join('\n'))
    return;
  }

  return {
    year,
    month,
    date,
    className,
  }
}

function createBtn(id, label, onClick) {
  const btnEl = new Kuc.Button({
    text: label,
    type: "submit",
    className: "action-btn",
    id,
  });
  btnEl.addEventListener('click', onClick);
  return btnEl;
}

function hideSpaceField(ids) {
  ids.forEach(id => {
    const area = kintone.app.record.getSpaceElement(id);
    area.parentElement.style.minWidth = '0';
    area.parentElement.style.display = 'none';
  });
}

function getExcelName({ excelName }, nameSuffix = '', suffix = '.xlsx') {
  return excelName + (nameSuffix ? (nameSuffix.startsWith('_') ? nameSuffix : ('_' + nameSuffix)) : '') + suffix;
}

function getJapaneseEraDate(date = new Date()) {
  const formatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
    era: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
  const japaneseDate = formatter.format(date);

  const match = japaneseDate.match(/(.+?)(元|\d+)年(\d+)月(\d+)日/);

  if (!match) {
    throw new Error("日付の解析に失敗しました。");
  }

  const era = match[1];
  const year = match[2] === "元" ? 1 : parseInt(match[2], 10);
  const month = parseInt(match[3], 10);
  const day = parseInt(match[4], 10);

  return {
    japaneseDate,
    era,
    year,
    month,
    day,
    westernYear: date.getFullYear()
  };
}

function convertToWesternYear(year, era) {
  return warekiStartYear[era] + year - 1;
}

function getFormatDateString(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;
}

function loading(show, text) {
  if (!loadingEl) {
    loadingEl = new Kuc.Spinner({
      container: document.querySelector('.container-gaia'),
      text
    });
  } else {
    loadingEl.close();
    loadingEl.text = text;
  }
  if (show) {
    loadingEl.open();
  }
}

function showError(show, text) {
  if (!errorEl) {
    errorEl = new Kuc.Notification({
      type: 'danger',
      text
    });
  } else {
    errorEl.close();
    errorEl.text = text;
  }
  if (show) {
    errorEl.open();
    console.error(text);
  }
}