• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.  
    14.     .button {
    15.       text-align: center;
    16.       background: #07C;
    17.       color: #FFF;
    18.       border-radius: 3px;
    19.       padding: 5px 20px;
    20.       cursor: pointer;
    21.       margin: 15px 0;
    22.       position: relative;
    23.       top: 5px;
    24.     }
    25.  
    26.     form {
    27.       display: inline-block;
    28.       width: 30%;
    29.     }
    30.  
    31.     zing-grid[loading] {
    32.       height: 403px;
    33.     }
    34.   </style>
    35. </head>
    36.  
    37. <body>
    38.   <zing-grid context-menu caption="Repo Issues Demo" editor-controls="creator">
    39.     <zg-colgroup>
    40.       <zg-column index="id" hidden editor="disabled"></zg-column>
    41.       <zg-column index="state" type="select" type-select-options="OPEN, CLOSED"></zg-column>
    42.       <zg-column index="title"></zg-column>
    43.       <zg-column index="body"></zg-column>
    44.       <zg-column type="editor"></zg-column>
    45.     </zg-colgroup>
    46.     <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/zinggrid-graphql-repo" adapter="graphql">
    47.       <zg-param name="recordPath" value="data.repos.0.issues"></zg-param>
    48.       <zg-param name="bodyMethodSuffix" value="Issues"></zg-param>
    49.     </zg-data>
    50.   </zing-grid>
    51.   <script>
    52.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    53.  
    54.     function readIssues() {
    55.       return {
    56.         query: `
    57.     query {
    58.       repos(name: "Hello World Project") {
    59.         issues {
    60.           id,
    61.           state,
    62.           title,
    63.           body
    64.         }
    65.       }
    66.     }`
    67.       };
    68.     }
    69.  
    70.     function createIssues(record) {
    71.       return {
    72.         query: `
    73.     mutation {
    74.       createIssue(repo:"Hello World Project", title:"${record.title}", body:"${record.body}") {
    75.     		title,
    76.         state,
    77.         body
    78.      	}
    79.     }`
    80.       };
    81.     }
    82.  
    83.     function updateRowIssues(record) {
    84.       return {
    85.         query: `
    86.     mutation {
    87.       updateIssue(id:"${record.id}", title:"${record.title}", body:"${record.body}") { 
    88.     		title,
    89.         state,
    90.         body
    91.       }
    92.     }`
    93.       };
    94.     }
    95.  
    96.     function updateCellIssues(record) {
    97.       return {
    98.         query: `
    99.     mutation {
    100.       updateIssue(id:"${record.id}", title:"${record.title}", body:"${record.body}", state:"${record.state}") { 
    101.         title,
    102.         state,
    103.         body
    104.       }
    105.     }`
    106.       };
    107.     }
    108.  
    109.     function deleteIssues(record) {
    110.       return {
    111.         query: `
    112.     mutation {
    113.       closeIssue(id:"${record.id}") {
    114.         title,
    115.         state,
    116.         body
    117.       }
    118.     }`
    119.       };
    120.     }
    121.   </script>
    122. </body>
    123.  
    124. </html>
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid context-menu caption="Repo Issues Demo" editor-controls="creator">
    12.     <zg-colgroup>
    13.       <zg-column index="id" hidden editor="disabled"></zg-column>
    14.       <zg-column index="state" type="select" type-select-options="OPEN, CLOSED"></zg-column>
    15.       <zg-column index="title"></zg-column>
    16.       <zg-column index="body"></zg-column>
    17.       <zg-column type="editor"></zg-column>
    18.     </zg-colgroup>
    19.     <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/zinggrid-graphql-repo" adapter="graphql">
    20.       <zg-param name="recordPath" value="data.repos.0.issues"></zg-param>
    21.       <zg-param name="bodyMethodSuffix" value="Issues"></zg-param>
    22.     </zg-data>
    23.   </zing-grid>
    24. </body>
    25.  
    26. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5.  
    6. .button {
    7.   text-align: center;
    8.   background: #07C;
    9.   color: #FFF;
    10.   border-radius: 3px;
    11.   padding: 5px 20px;
    12.   cursor: pointer;
    13.   margin: 15px 0;
    14.   position: relative;
    15.   top: 5px;
    16. }
    17.  
    18. form {
    19.   display: inline-block;
    20.   width: 30%;
    21. }
    1. function readIssues() {
    2.   return {
    3.     query: `
    4.     query {
    5.       repos(name: "Hello World Project") {
    6.         issues {
    7.           id,
    8.           state,
    9.           title,
    10.           body
    11.         }
    12.       }
    13.     }`
    14.   };
    15. }
    16.  
    17. function createIssues(record) {
    18.   return {
    19.     query: `
    20.     mutation {
    21.       createIssue(repo:"Hello World Project", title:"${record.title}", body:"${record.body}") {
    22.     		title,
    23.         state,
    24.         body
    25.      	}
    26.     }`
    27.   };
    28. }
    29.  
    30. function updateRowIssues(record) {
    31.   return {
    32.     query: `
    33.     mutation {
    34.       updateIssue(id:"${record.id}", title:"${record.title}", body:"${record.body}") { 
    35.     		title,
    36.         state,
    37.         body
    38.       }
    39.     }`
    40.   };
    41. }
    42.  
    43. function updateCellIssues(record) {
    44.   return {
    45.     query: `
    46.     mutation {
    47.       updateIssue(id:"${record.id}", title:"${record.title}", body:"${record.body}", state:"${record.state}") { 
    48.         title,
    49.         state,
    50.         body
    51.       }
    52.     }`
    53.   };
    54. }
    55.  
    56. function deleteIssues(record) {
    57.   return {
    58.     query: `
    59.     mutation {
    60.       closeIssue(id:"${record.id}") {
    61.         title,
    62.         state,
    63.         body
    64.       }
    65.     }`
    66.   };
    67. }