Events Grid

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-events-grid {
  padding-left: $container-spacing-mobile;
  padding-right: $container-spacing-mobile;

  @include bp($md) {
    padding-left: $container-spacing-desktop;
    padding-right: $container-spacing-desktop;
  }

	.post-card {
		transition: transform 0.3s ease-in-out;
		&:hover {
			transform: translateY(-10px);
		}
	}

  &.has-background:not(.has-light-blue-background-color) {
    color: $white;

    .post-card,
    .post-card:hover .post-card__title,
    .post-card__category {
      color: $white;
    }

    select {
      border-bottom-color: $white;
      background-image: url('/wp-content/themes/moore-global/assets/icons/select-dropdown-white.svg');
    }

    .block-events-grid__view-all a {
      border-color: $white;
      color: $white;

      &:before {
        border-top-color: $white;
      }

      &:hover {
        color: $black;
      }
    }
  }

  &__filter {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: $grid-gutter-width;
    row-gap: rem-calc(12);
    padding-bottom: 30px;

    select {
      @include filter-select;
      margin-bottom: 0;
      border-radius: 0;
    }

    & > * {
      grid-column: span 12;

      @include bp($lg) {
        grid-column: span 6;
      }
    }

    .h1 {
      grid-row: 1;
      margin-bottom: 0;
      font-weight: 400;
    }

    & > div {
      display: flex;
      align-items: center;
      column-gap: $grid-gutter-width;
      grid-row: 2;

      @include bp($lg) {
        grid-row: 1;
      }
    }
  }

  &__posts {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: $grid-gutter-width;
    row-gap: 32px;
    margin-bottom: rem-calc(50);

    & > * {
      grid-column: span 12;

      @include bp($sm) {
        grid-column: span 6;
      }

      @include bp($lg) {
        grid-column: span 4;
      }
    }
  }

  &__view-all {
    display: flex;
    align-items: center;
    justify-content: center;

    a {
      @include fluid-type(14, 16, 375, $max-container-size);
    }
  }
}

class EventsGrid {
	constructor() {
		this.blocks = document.querySelectorAll('.block-events-grid')
		this.events()
	}

	events() {
		if (!this.blocks.length) return
    this.blocks.forEach(block => {
			let location = ``
			let cat = ``
			let dateRange = `upcoming`
			const filters = block.querySelectorAll('.js-event-filter')
			const markup = block.querySelector('.js-event-markup')
			if (block.dataset.cat) {
				cat = block.dataset.cat
			}
			if (!filters.length) return
      filters.forEach(filter => {
				filter.addEventListener('change', e => {
					if (filter.getAttribute('id') == 'locations') {
						location = e.target.value
					} else {
						dateRange = e.target.value
					}
					this.getFilteredResults(location, cat, dateRange, markup)
				})
			})
    })
	}

	fetchData = async (location, cat, dateRange) => {
    let queryString=`location=${location}&cat=${cat}&date=${dateRange}`
    try {
      const searchResponse = await fetch(`${ajaxPostFeeds.root}/wp-json/stq-event-feed/v1/events?${queryString}`)
      const data = await searchResponse.json()
      return data
    }
    catch(err) {
      console.log(err)
    }
  }

	getFilteredResults = (location, cat, dateRange, markupOutput) => {
    this.fetchData(location, cat, dateRange).then(data => {
			if (data[0].length) {
        let output = ``
        data[0].forEach(event => {
          output += ``
            output += `
`
						if ( event.thumbnail ) {
							output += ``
						} else {
							output += `
`
								output += `
${event.title}`
							output += `
`
						}
            output += `
`
            output += `
`
							output += `
`
      					output += `
Event
`
								output += `
${event.title}
`
							output += `
`
						output += `
`
						output += `
`
							output += `
`
								output += `
${event.location}
`
								output += `
${event.date}
`
							output += `
`
						output += `
`
          output += ``
        })
        markupOutput.innerHTML = output
      } else {
        markupOutput.innerHTML = `
Sorry, no events match your filter criteria.
`
      }
    })
  }
}

new EventsGrid();

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "strategiq/events-grid",
  "title": "Events Grid",
  "description": "Example block to be used as a template",
  "category": "strategiq",
  "icon": "strategiq",
  "acf": {
      "mode": "preview",
      "renderTemplate": "block-events-grid.php"
  },
  "supports": {
      "anchor": true,
      "align": false,
      "color": {
          "background": true,
          "text": false,
          "gradients": false
      },
      "spacing": {
          "padding": [
              "top",
              "bottom"
          ],
          "margin": [
              "top",
              "bottom"
          ]
      }
  },
  "example": {
      "attributes": {
          "mode": "preview",
          "data": {
              "heading_type": "h2",
              "heading_text": "Events Grid",
              "content": "This is some example content to represent what the content will look like"
          }
      }
  },
  "style": ["file:../../assets/css/events-grid/block-events-grid.css"],
  "viewScript": ["events-grid"]
}