Slotted Content

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    :root {
      /* Define custom colors for build status */
      --build-success: #00c853;
      --build-failed: #d50000;
      --build: pending: #ffab00;
      --zg-caption-background: #3f51b5;
      --zg-caption-color: #fff;

      /* Modify ZG Display */
      --zing-grid-background: #fff;
    }


    /* ZingGrid Overrides
---------------------------------- */
    /* Hide grid's body 'header' cells */
    zg-head {
      display: none;
    }

    /* Turn off native row highlighting */
    zg-row:hover {
      background: inherit;
    }

    /* Remove native cell padding - we add our own to the custom row */
    zg-cell {
      padding: 0;
    }

    /* Allow full-width custom rows */
    [data-field-index] {
      width: 100%;
    }


    /* Custom Row Styling
---------------------------------- */
    .row-wrapper {
      padding: 1rem;
    }

    .row-container {
      background: #fff;
      border-radius: .5rem;
      cursor: pointer;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: .25rem;
      overflow: hidden;
      padding: 1rem;
    }

    .row-container:hover {
      box-shadow: 6px 6px 31px -1px rgba(156, 156, 156, 0.82);
    }

    /* First Cell */
    .row-container .first-cell {
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
      justify-content: space-between;
      align-items: center;
    }

    /* First Cell Child Elements */
    .flex-center {
      display: flex;
      align-items: center;
    }

    /* Add padding for mobile view */
    zing-grid[viewport="mobile"] .flex-center {
      margin: 1.0rem;
    }

    /* On all views EXCEPT zing-grid mobile view */
    zing-grid:not([viewport="mobile"]) .user-contents {
      min-width: 300px;
    }

    /* User Contents Cell */
    .user-contents span {
      margin-right: 1.5rem;
    }

    .user-contents img {
      height: 25px;
    }

    /* Font Awesome icon styling */
    .build-status {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .build-status::before {
      font-family: FontAwesome;
      font-size: 3rem;
      margin-right: 1rem;
    }

    /* Content defined by Font-Awesome unicode characters */
    .build-success::before {
      content: '\f164';
      color: var(--build-success, green);
    }

    .build-failed::before {
      content: '\f165';
      color: var(--build-failed, red);
    }

    .build-pending::before {
      content: '\f017';
      color: var(--build-pending, orange);
    }

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

<body>

  <zing-grid layout="row" layout-controls="disabled" vieport-stop caption="Current Pipelines">
    <zg-data data='[
        {
          "status": "success",
          "branch": "dev",
          "username": "chocolateRainGuy",
          "commitId": "1582393",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "master",
          "username": "jennaMarbles",
          "commitId": "32532315",
          "runTime": "0:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "success",
          "branch": "master",
          "username": "starWarsKid",
          "commitId": "cd34123as",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "pending",
          "branch": "ci-integration",
          "username": "dramticLookGopher",
          "commitId": "aaf1234s",
          "runTime": "1:23",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "dev-unit-tests",
          "username": "leeroyJenkins",
          "commitId": "2345623",
          "runTime": "0:09",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "success",
          "branch": "master",
          "username": "britneySpears",
          "commitId": "cd34123as",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "master",
          "username": "numaNumaGuy",
          "commitId": "62562345",
          "runTime": "0:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index=" " renderer="addChangeEvent">
        <!-- Template tag is preferred so that the content is never rendered -->
        <template>
          <div class="row-wrapper">
            <div class="row-container">
              <!-- First Cell -->
              <div class="first-cell">
                <div class="flex-center">
                  <!-- Dynamically inject class with templating -->
                  <div class="build-status build-[[record.status]]"></div>
                  <span>[[record.branch]]/[[record.commitId]]</span>
                </div>
                <div class="user-contents flex-center">
                  <span><img src="[[record.avatar]]" alt="N/A"></span>
                  <span>[[record.username]]</span>
                  <span>[[record.runTime]]</span>
                </div>
              </div>
              <!-- Select Dropdown Cell -->
              <div class="flex-center">
                <select>
                  <option disabled selected>Please Select One</option>
                  <option value="1">Restart Build</option>
                  <option value="2">Reset Cache</option>
                </select>
              </div>
            </div>
          </div>
        </template>
      </zg-column>
    </zg-colgroup>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    /**
     * @description This custom render function should return NOTHING. If you
     * return content here it will override your slotted contents.
     * NOTE: renderer NOT REQUIRED for slotted content.
     */
    function addChangeEvent(customIndex, cellRef, $cell) {
      // $cell.record gives us us direct information related to this row
      const record = $cell.record;
      // $cell.dom() gives us direct access to zg-cell DOM contents
      const selectRef = cellRef.querySelector('select');
      selectRef.addEventListener('change', e => {
        const changeValue = e.target.value;
        if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
        else alert('Resetting cache');
      });
    }

    // Init
    // ----------------------------------
    /* Get the ZG instance */
    const zgRef = document.querySelector('zing-grid')
    // Add click event listener, so you can drill into another page on row click
    zgRef.addEventListener('row:click', e => {
      console.log('row clicked', e.detail);
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>

  <zing-grid layout="row" layout-controls="disabled" vieport-stop caption="Current Pipelines">
    <zg-data data='[
        {
          "status": "success",
          "branch": "dev",
          "username": "chocolateRainGuy",
          "commitId": "1582393",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "master",
          "username": "jennaMarbles",
          "commitId": "32532315",
          "runTime": "0:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "success",
          "branch": "master",
          "username": "starWarsKid",
          "commitId": "cd34123as",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "pending",
          "branch": "ci-integration",
          "username": "dramticLookGopher",
          "commitId": "aaf1234s",
          "runTime": "1:23",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "dev-unit-tests",
          "username": "leeroyJenkins",
          "commitId": "2345623",
          "runTime": "0:09",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "success",
          "branch": "master",
          "username": "britneySpears",
          "commitId": "cd34123as",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "master",
          "username": "numaNumaGuy",
          "commitId": "62562345",
          "runTime": "0:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index=" " renderer="addChangeEvent">
        <!-- Template tag is preferred so that the content is never rendered -->
        <template>
          <div class="row-wrapper">
            <div class="row-container">
              <!-- First Cell -->
              <div class="first-cell">
                <div class="flex-center">
                  <!-- Dynamically inject class with templating -->
                  <div class="build-status build-[[record.status]]"></div>
                  <span>[[record.branch]]/[[record.commitId]]</span>
                </div>
                <div class="user-contents flex-center">
                  <span><img src="[[record.avatar]]" alt="N/A"></span>
                  <span>[[record.username]]</span>
                  <span>[[record.runTime]]</span>
                </div>
              </div>
              <!-- Select Dropdown Cell -->
              <div class="flex-center">
                <select>
                  <option disabled selected>Please Select One</option>
                  <option value="1">Restart Build</option>
                  <option value="2">Reset Cache</option>
                </select>
              </div>
            </div>
          </div>
        </template>
      </zg-column>
    </zg-colgroup>
  </zing-grid>

</body>

</html>

:root {
  /* Define custom colors for build status */
  --build-success: #00c853;
  --build-failed: #d50000;
  --build: pending: #ffab00;
  --zg-caption-background: #3f51b5;
  --zg-caption-color: #fff;

  /* Modify ZG Display */
  --zing-grid-background: #fff;
}


/* ZingGrid Overrides
---------------------------------- */
/* Hide grid's body 'header' cells */
zg-head {
  display: none;
}

/* Turn off native row highlighting */
zg-row:hover {
  background: inherit;
}

/* Remove native cell padding - we add our own to the custom row */
zg-cell {
  padding: 0;
}

/* Allow full-width custom rows */
[data-field-index] {
  width: 100%;
}


/* Custom Row Styling
---------------------------------- */
.row-wrapper {
  padding: 1rem;
}

.row-container {
  background: #fff;
  border-radius: .5rem;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: .25rem;
  overflow: hidden;
  padding: 1rem;
}

.row-container:hover {
  box-shadow: 6px 6px 31px -1px rgba(156, 156, 156, 0.82);
}

/* First Cell */
.row-container .first-cell {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
}

/* First Cell Child Elements */
.flex-center {
  display: flex;
  align-items: center;
}

/* Add padding for mobile view */
zing-grid[viewport="mobile"] .flex-center {
  margin: 1.0rem;
}

/* On all views EXCEPT zing-grid mobile view */
zing-grid:not([viewport="mobile"]) .user-contents {
  min-width: 300px;
}

/* User Contents Cell */
.user-contents span {
  margin-right: 1.5rem;
}

.user-contents img {
  height: 25px;
}

/* Font Awesome icon styling */
.build-status {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.build-status::before {
  font-family: FontAwesome;
  font-size: 3rem;
  margin-right: 1rem;
}

/* Content defined by Font-Awesome unicode characters */
.build-success::before {
  content: '\f164';
  color: var(--build-success, green);
}

.build-failed::before {
  content: '\f165';
  color: var(--build-failed, red);
}

.build-pending::before {
  content: '\f017';
  color: var(--build-pending, orange);
}

/**
 * @description This custom render function should return NOTHING. If you
 * return content here it will override your slotted contents.
 * NOTE: renderer NOT REQUIRED for slotted content.
 */
function addChangeEvent(customIndex, cellRef, $cell) {
  // $cell.record gives us us direct information related to this row
  const record = $cell.record;
  // $cell.dom() gives us direct access to zg-cell DOM contents
  const selectRef = cellRef.querySelector('select');
  selectRef.addEventListener('change', e => {
    const changeValue = e.target.value;
    if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
    else alert('Resetting cache');
  });
}

// Init
// ----------------------------------
/* Get the ZG instance */
const zgRef = document.querySelector('zing-grid')
// Add click event listener, so you can drill into another page on row click
zgRef.addEventListener('row:click', e => {
  console.log('row clicked', e.detail);
});