wp-bounties/index.php at main · nearprotocol/wp-bounties · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
	<?php wp_head(); ?>
	<style>[x-cloak] { display: none; }</style>
</head>

<body>
	<?php $bounties = wpb_get_bounties(); ?>
	<?php $labels = wpb_get_bounties_labels(); ?>

	<h1>Bounties</h1>

	<div x-data="bounties(<?php echo esc_attr(json_encode($labels)); ?>)">
		<input type="search" x-model="query" placeholder="Search by title …">

		<button x-on:click="filtersOpen = ! filtersOpen">
			<span>Filter:</span>
			<span x-text="filtersLabel()"></span>
		</button>

		<div x-show="filtersOpen" @click.away="filtersOpen = false" x-cloak>
			<?php foreach ($labels as $label) : ?>
				<div>
					<input type="checkbox" id="bounties-filter-<?php echo $label; ?>" x-on:change="toggleType('<?php echo $label; ?>')" checked>
					<label for="bounties-filter-<?php echo $label; ?>"><?php echo $label; ?></label>
				</div>
			<?php endforeach; ?>
		</div>

		<table>
			<thead>
				<tr>
					<th>Issue</th>
					<th>Title</th>
					<th>Bounty</th>
					<th>Claimed By</th>
				</tr>
			</thead>

			<tbody>
				<?php foreach ($bounties as $bounty) : ?>
					<?php $bounty_labels = array_column($bounty->labels, 'name'); ?>
					<?php $bounty_title_amount = wpb_parse_bounty_title($bounty->title); ?>

					<tr x-show='showBounty(<?php echo esc_attr(json_encode($bounty_labels)); ?>, "<?php echo esc_attr($bounty->title); ?>")' x-cloak>
						<td><?php echo $bounty->number; ?></td>

						<td>
							<h3>
								<a href="<?php echo $bounty->html_url; ?>" target="_blank">
									<span>#<?php echo $bounty->number; ?> </span>
									<?php echo $bounty_title_amount[0]; ?>
								</a>
							</h3>

							<?php if ($bounty->labels ?? false) : ?>
								<ul>
									<?php foreach ($bounty->labels as $label) : ?>
										<li><?php echo $label->name; ?></li>
									<?php endforeach; ?>
								</ul>
							<?php endif; ?>
						</td>

						<td><?php echo $bounty_title_amount[1] ?? '—'; ?></td>

						<td>
							<?php if ($bounty->assignee) : ?>
								<a href="<?php echo $bounty->assignee->html_url; ?>">
									@<?php echo $bounty->assignee->login; ?>
								</a>
							<?php endif; ?>
						</td>
					</tr>
				<?php endforeach; ?>
			</tbody>
		</table>
	</div>

	<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
	<script>
		function bounties(types) {
			return {
				types: types,
				query: '',
				filtersOpen: false,
				filtersLabel: function() {
					var count = this.types.length;
					return count + ' filter' + (count === 1 ? '' : 's');
				},
				toggleType: function(type) {
					var index = this.types.indexOf(type);

					if (index === -1) {
						this.types.push(type);
					} else {
						this.types.splice(index, 1);
					}
				},
				showBounty: function(bountyTypes, title) {
					var filterMatch = this.types.filter(function(v) {
						return bountyTypes.includes(v);
					}).length;

					searchMatch = this.query
						? title.toLowerCase().includes(this.query.toLowerCase())
						: true;

					return filterMatch && searchMatch;
				},
			};
		}
	</script>

	<?php wp_footer(); ?>
</body>
</html>