init

src/utils.js

@@ -0,0 +1,194 @@
+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: "ゆり" },
+]
+
+const errorEl = new Kuc.Notification({
+  type: 'danger',
+});
+
+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) => {
+    errorEl.close();
+    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) {
+    errorEl.text = btnLabel + 'エラー\n' + errorMsgs.join('\n');
+    errorEl.open();
+    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;
+}