wikijs-metabot/topic-form.js.html

<script>
  function copyTheme() {
    const appClasses = [...document.getElementById('app').classList];
    const appTheme = appClasses.find((c) => c.startsWith('theme--'));
    for (const element of document.getElementsByClassName('theme--copy')) {
      element.classList.replace('theme--copy', appTheme);
    }
  }

  function setupForm() {
    const button = document.getElementById('top-button');
    const input = document.getElementById('top-input');
    const spinner = document.getElementById('top-spinner');
    const errorBox = document.getElementById('top-error');
    const errorContent = document.getElementById('top-error-content');
    input.oninput = () => {
      if (input.value === '') {
        button.classList.add('v-btn--disabled');
        button.disabled = true;
      } else {
        button.classList.remove('v-btn--disabled');
        button.disabled = false;
      }
    };
    button.onclick = async () => {
      button.classList.add('v-btn--disabled');
      button.disabled = true;
      input.disabled = true;
      spinner.style = '';
      errorBox.style = 'display: none;';
      try {
        await createNewTop(input.value);
      } catch (error) {
        errorBox.style = '';
        errorContent.textContent = error.message;
      }
      button.classList.remove('v-btn--disabled');
      button.disabled = false;
      input.disabled = false;
      spinner.style = 'display: none;';
    };
  }

  async function getNextTopNumber() {
    const result = await graphql(
      'query { pages { list(tags: ["top"]) { path } } }'
    );
    const topNumbers = result.data.pages.list
      .map((page) => page.path)
      .map((path) => path.split('/'))
      .map((pathSegments) => pathSegments[pathSegments.length - 1])
      .map((lastSegment) => Number(lastSegment))
      .filter((topNumber) => !!topNumber);
    return Math.max(...topNumbers) + 1;
  }

  async function insertNextTopNumbers() {
    const nextTopNumber = await getNextTopNumber();
    for (const element of document.getElementsByClassName('next-top-number')) {
      element.textContent = nextTopNumber;
    }
  }

  async function createNewTop(title) {
    const nextTopNumber = await getNextTopNumber();
    const templateResult = await graphql(`
      query {
        pages {
          single(id: 477) {
            content
            description
            editor
            isPublished
            isPrivate
            locale
            tags {
              tag
            }
            title
          }
        }
      }
    `);
    if (templateResult.errors && templateResult.errors.length !== 0) {
      throw new Error(templateResult.errors[0].message);
    }
    const template = templateResult.data.pages.single;
    template.tags = template.tags.map((tag) => tag.tag);
    template.path = `verein/topictreff/top/${nextTopNumber}`;
    template.title = `TOP ${nextTopNumber} - ${title}`;

    const pageData = Object.entries(template)
      .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
      .map((data) => {
        console.log(data);
        return data;
      })
      .join(', ');
    const result = await graphql(`
      mutation {
        pages {
          create(${pageData}) {
            responseResult {
              succeeded
              errorCode
              message
            }
          }
        }
      }
    `);
    const response = result.data.pages.create.responseResult;
    if (response.succeeded) {
      window.location = '/e/' + template.path;
    } else {
      throw new Error(response.message);
      console.log({ response });
    }
  }

  isElementLoaded('.contents').then(() => {
    copyTheme();
    setupForm();
    insertNextTopNumbers();
  });
</script>