<?php /** * Filter view. * * @since 2.0.0 */ ?> <div id="<?php echo esc_attr($filters_el_id); ?>" class="wp-filter wu-filter <?php echo ! $table->has_items() ? 'wu-opacity-50 wu-pointer-events-none' : ''; ?>" > <?php if ( ! empty($views)) : ?> <ul class="filter-links"> <?php foreach ($views as $view_slug => $view) : ?> <li class="<?php echo wu_request($view['field'], 'all') == $view_slug ? esc_attr('current') : ''; ?>" :class="view && view === '<?php echo esc_attr($view_slug); ?>' ? 'current wu-font-medium' : ''" > <a v-on:click.prevent="set_view('<?php echo esc_attr($view['field']); ?>', '<?php echo esc_attr($view_slug); ?>')" href="<?php echo esc_attr($view['url']); ?>" class="<?php echo wu_request($view['field'], 'all') == $view_slug ? esc_attr('current wu-font-medium') : ''; ?>" :class="view && view === '<?php echo esc_attr($view_slug); ?>' ? 'current wu-font-medium' : ''" > <?php echo esc_attr($view['label']); ?> </a> </li> <?php endforeach; ?> </ul> <?php endif; ?> <?php if (false) : ?> <button v-show="!open" v-on:click.prevent="open_filters" type="button" class="button drawer-toggle" v-bind:aria-expanded="open ? 'true' : 'false'" > <?php esc_html_e('Advanced Filters', 'wp-multisite-waas'); ?> </button> <div class="wu-py-3 wu-px-2 wu-inline-block wu-uppercase wu-font-semibold wu-text-gray-600 wu-text-xs" v-show="open" v-cloak> <?php esc_html_e('Advanced Filters', 'wp-multisite-waas'); ?> </div> <button v-show="open" v-on:click.prevent="close_filters" type="button" class="button drawer-toggle" > <?php esc_html_e('Close', 'wp-multisite-waas'); ?> </button> <?php endif; ?> <form class="search-form"> <?php if (isset($has_search) && $has_search) : ?> <label class="screen-reader-text" for="wp-filter-search-input"> <?php echo esc_html($search_label); ?> </label> <input name='s' id="s" value="<?php echo esc_attr($_REQUEST['s'] ?? ''); ?>" placeholder="<?php echo esc_attr($search_label); ?>" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search" > <?php endif; ?> </form> <?php if (isset($has_view_switch) && $has_view_switch) : ?> <?php $table->view_switcher($table->current_mode); ?> <?php endif; ?> <div v-cloak v-show="false" class="wu-hidden"> <div class="wu-clear-both"></div> <div class="wu-mb-3"> <div v-for="(filter, index) in filters" class="wu-row wu-flex wu-p-4 wu-mt-0 wu-my-3 wu-bg-gray-100 wu-rounded wu-border wu-border-solid wu-border-gray-200" > <div class="wu-w-1/12 wu-mx-2 wu-text-right wu-self-center"> <span class="wu-uppercase wu-font-semibold wu-text-gray-600 wu-text-xs" v-if="index === 0" > <?php esc_html_e('Where', 'wp-multisite-waas'); ?> </span> <select class="form-control wu-w-full" v-if="index === 1" v-model="relation" > <option value="and"><?php esc_html_e('and', 'wp-multisite-waas'); ?></option> <option value="or"><?php esc_html_e('or', 'wp-multisite-waas'); ?></option> </select> <span class="wu-uppercase wu-font-semibold wu-text-gray-600 wu-text-xs" v-if="index > 1" > <span v-show="relation === 'and'"><?php esc_html_e('and', 'wp-multisite-waas'); ?></span> <span v-show="relation === 'or'"><?php esc_html_e('or', 'wp-multisite-waas'); ?></span> </span> </div> <div class="wu-w-2/12"> <select class="form-control wu-w-full" v-model="filter.field"> <option v-for="available_filter in available_filters" :value="available_filter.field" v-html="available_filter.label" > </option> </select> </div> <div class="wu-w-2/12 wu-mx-2"> <select class="form-control wu-w-full" v-if="get_filter_type(filter.field) == 'bool'" v-model="filter.value"> <option value="1"><?php esc_html_e('is true.', 'wp-multisite-waas'); ?></option> <option value="0"><?php esc_html_e('is false.', 'wp-multisite-waas'); ?></option> </select> <select class="form-control wu-w-full" v-if="get_filter_type(filter.field) == 'text'" v-bind:value="get_filter_rule(filter.field)"> <option value="is"><?php esc_html_e('is', 'wp-multisite-waas'); ?></option> <option value="is_not"><?php esc_html_e('is not', 'wp-multisite-waas'); ?></option> <option value="contains"><?php esc_html_e('contains', 'wp-multisite-waas'); ?></option> <option value="does_not_contain"><?php esc_html_e('does not contain', 'wp-multisite-waas'); ?></option> <option value="starts_with"><?php esc_html_e('starts with', 'wp-multisite-waas'); ?></option> <option value="ends_with"><?php esc_html_e('ends with', 'wp-multisite-waas'); ?></option> <option value="is_empty"><?php esc_html_e('is empty.', 'wp-multisite-waas'); ?></option> <option value="is_not_empty"><?php esc_html_e('is not empty.', 'wp-multisite-waas'); ?></option> </select> <select class="form-control wu-w-full" v-if="get_filter_type(filter.field) == 'date'" v-bind:value="get_filter_rule(filter.field)"> <option value="before"><?php esc_html_e('is before', 'wp-multisite-waas'); ?></option> <option value="after"><?php esc_html_e('is after', 'wp-multisite-waas'); ?></option> </select> </div> <div class="wu-w-2/12"> <input type="text" class="form-control wu-w-full" placeholder="<?php esc_attr_e('Value', 'wp-multisite-waas'); ?>" v-if="_.contains(['text', 'date'], get_filter_type(filter.field)) && !_.contains(['is_empty', 'is_not_empty'], filter.rule)" v-model="filter.value" /> </div> <div class="wu-w-2/12 wu-self-center wu-mx-3"> <a href="#" v-on:click.prevent="remove_filter(index)" class="button" v-show="index > 0" > <?php esc_html_e('Remove Filter', 'wp-multisite-waas'); ?> </a> </div> <div class="wu-w-3/12 wu-self-center"> <a href="#" v-on:click.prevent="add_new_filter" class="button button-primary wu-float-right" v-show="index === filters.length - 1" > <?php esc_html_e('Add new Filter', 'wp-multisite-waas'); ?> </a> </div> </div> </div> </div> </div>