GraphQL Repo Issues

<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    body {
      background: #e6e6e6;
    }


    .button {
      text-align: center;
      background: #07C;
      color: #FFF;
      border-radius: 3px;
      padding: 5px 20px;
      cursor: pointer;
      margin: 15px 0;
      position: relative;
      top: 5px;
    }

    form {
      display: inline-block;
      width: 30%;
    }

    zing-grid[loading] {
      height: 403px;
    }
  </style>
</head>

<body>
  <zing-grid context-menu caption="Repo Issues Demo" editor-controls="creator">
    <zg-colgroup>
      <zg-column index="id" hidden editor="disabled"></zg-column>
      <zg-column index="state" type="select" type-select-options="OPEN, CLOSED"></zg-column>
      <zg-column index="title"></zg-column>
      <zg-column index="body"></zg-column>
      <zg-column type="editor"></zg-column>
    </zg-colgroup>
    <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/zinggrid-graphql-repo" adapter="graphql">
      <zg-param name="recordPath" value="data.repos.0.issues"></zg-param>
      <zg-param name="bodyMethodSuffix" value="Issues"></zg-param>
    </zg-data>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);

    function readIssues() {
      return {
        query: `
    query {
      repos(name: "Hello World Project") {
        issues {
          id,
          state,
          title,
          body
        }
      }
    }`
      };
    }

    function createIssues(record) {
      return {
        query: `
    mutation {
      createIssue(repo:"Hello World Project", title:"${record.title}", body:"${record.body}") {
    		title,
        state,
        body
     	}
    }`
      };
    }

    function updateRowIssues(record) {
      return {
        query: `
    mutation {
      updateIssue(id:"${record.id}", title:"${record.title}", body:"${record.body}") { 
    		title,
        state,
        body
      }
    }`
      };
    }

    function updateCellIssues(record) {
      return {
        query: `
    mutation {
      updateIssue(id:"${record.id}", title:"${record.title}", body:"${record.body}", state:"${record.state}") { 
        title,
        state,
        body
      }
    }`
      };
    }

    function deleteIssues(record) {
      return {
        query: `
    mutation {
      closeIssue(id:"${record.id}") {
        title,
        state,
        body
      }
    }`
      };
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>
  <zing-grid context-menu caption="Repo Issues Demo" editor-controls="creator">
    <zg-colgroup>
      <zg-column index="id" hidden editor="disabled"></zg-column>
      <zg-column index="state" type="select" type-select-options="OPEN, CLOSED"></zg-column>
      <zg-column index="title"></zg-column>
      <zg-column index="body"></zg-column>
      <zg-column type="editor"></zg-column>
    </zg-colgroup>
    <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/zinggrid-graphql-repo" adapter="graphql">
      <zg-param name="recordPath" value="data.repos.0.issues"></zg-param>
      <zg-param name="bodyMethodSuffix" value="Issues"></zg-param>
    </zg-data>
  </zing-grid>
</body>

</html>

body {
  background: #e6e6e6;
}


.button {
  text-align: center;
  background: #07C;
  color: #FFF;
  border-radius: 3px;
  padding: 5px 20px;
  cursor: pointer;
  margin: 15px 0;
  position: relative;
  top: 5px;
}

form {
  display: inline-block;
  width: 30%;
}

function readIssues() {
  return {
    query: `
    query {
      repos(name: "Hello World Project") {
        issues {
          id,
          state,
          title,
          body
        }
      }
    }`
  };
}

function createIssues(record) {
  return {
    query: `
    mutation {
      createIssue(repo:"Hello World Project", title:"${record.title}", body:"${record.body}") {
    		title,
        state,
        body
     	}
    }`
  };
}

function updateRowIssues(record) {
  return {
    query: `
    mutation {
      updateIssue(id:"${record.id}", title:"${record.title}", body:"${record.body}") { 
    		title,
        state,
        body
      }
    }`
  };
}

function updateCellIssues(record) {
  return {
    query: `
    mutation {
      updateIssue(id:"${record.id}", title:"${record.title}", body:"${record.body}", state:"${record.state}") { 
        title,
        state,
        body
      }
    }`
  };
}

function deleteIssues(record) {
  return {
    query: `
    mutation {
      closeIssue(id:"${record.id}") {
        title,
        state,
        body
      }
    }`
  };
}