implements dt-single-select and dt-date (#2044)

* implements dt-single-select

* implements dt-date

dt-contacts/access-module.php

@@ -435,28 +435,30 @@ public function dt_render_field_for_display_template( $post, $field_type, $field
  return;
  }
  ?>
- <div class="section-subheader">
- <img src="<?php echo esc_url( $contact_fields[$field_key]['icon'] ) ?>">
- <?php echo esc_html( $contact_fields[$field_key]['name'] ) ?>
- </div>
  <?php
- $active_color = '#366184';
- $current_key = $contact['overall_status']['key'] ?? '';
- if ( isset( $contact_fields['overall_status']['default'][ $current_key ]['color'] ) ){
- $active_color = $contact_fields['overall_status']['default'][ $current_key ]['color'];
+ $options_array = $contact_fields[$field_key]['default'];
+ $options_array = array_map( function( $key, $value ) {
+ return [
+ 'id' => $key,
+ 'label' => $value['label'],
+ 'color' => $value['color'] ?? null,
+ ];
+ }, array_keys( $options_array ), $options_array );
+
+ if ( isset( $contact_fields[$field_key]['icon'] ) && !empty( $contact_fields[$field_key]['icon'] ) ) {
+ $icon = 'icon=' . esc_attr( $contact_fields[$field_key]['icon'] );
  }
  ?>
- <select id="overall_status" class="select-field color-select" style="margin-bottom:0; background-color: <?php echo esc_html( $active_color ) ?>" <?php echo esc_html( $disabled ); ?>>
- <?php foreach ( $contact_fields['overall_status']['default'] as $key => $option ){
- $value = $option['label'] ?? '';
- if ( $current_key === $key ) {
- ?>
- <option value="<?php echo esc_html( $key ) ?>" selected><?php echo esc_html( $value ); ?></option>
- <?php } else { ?>
- <option value="<?php echo esc_html( $key ) ?>"><?php echo esc_html( $value ); ?></option>
- <?php } ?>
- <?php } ?>
- </select>
+ <dt-single-select
+ id="overall_status"
+ name="overall_status"
+ label="<?php echo esc_attr( $contact_fields[$field_key]['name'] )?>"
+ <?php echo esc_html( $icon ) ?>
+ options="<?php echo esc_attr( json_encode( $options_array ) ) ?>"
+ value="<?php echo esc_attr( $post[$field_key] ? $post[$field_key]['key'] : '' ) ?>">
+ <?php dt_render_icon_slot( $fields[$field_key] ) ?>
+ </dt-single-select>
+
  <p>
  <span id="reason">
  <?php

dt-core/global-functions.php

@@ -553,7 +553,7 @@ function render_field_for_display( $field_key, $fields, $post, $show_extra_contr
  ' . esc_html( $disabled ) . '
  ' . ( $is_private ? 'private privateLabel=' . esc_attr( _x( "Private Field: Only I can see it\'s content", 'disciple_tools' ) ) : null ) . '
  ';
- $supported_web_components = [ 'text' ];
+ $supported_web_components = [ 'text', 'key_select', 'date' ];
 
  ?>
  <?php if ( !in_array( $field_type, $supported_web_components ) ): ?>
@@ -633,23 +633,26 @@ class="add-link__option"
  }
  }
  ?>
- <select class="select-field <?php echo esc_html( $color_select ? 'color-select' : '' ); ?>" id="<?php echo esc_html( $display_field_id ); ?>" style="<?php echo esc_html( $color_select ? ( 'background-color: ' . $active_color ) : '' ); ?>" <?php echo esc_html( $required_tag ) ?> <?php echo esc_html( $disabled ); ?>>
- <?php if ( !isset( $fields[$field_key]['default']['none'] ) && empty( $fields[$field_key]['select_cannot_be_empty'] ) ) : ?>
- <option value="" <?php echo esc_html( !isset( $post[$field_key] ) ?: 'selected' ) ?>></option>
- <?php endif; ?>
- <?php foreach ( $fields[$field_key]['default'] as $option_key => $option_value ):
- if ( !$show_hidden && isset( $option_value['hidden'] ) && $option_value['hidden'] === true ){
- continue;
- }
- $selected = isset( $post[$field_key]['key'] ) && $post[$field_key]['key'] === strval( $option_key ); ?>
- <option value="<?php echo esc_html( $option_key )?>" <?php echo esc_html( $selected ? 'selected' : '' )?>>
- <?php echo esc_html( $option_value['label'] ) ?>
- </option>
- <?php endforeach; ?>
- </select>
+
+ <?php
+ $options_array = $fields[$field_key]['default'];
+ $options_array = array_map( function( $key, $value ) {
+ return [
+ 'id' => $key,
+ 'label' => $value['label'],
+ 'color' => $value['color'] ?? null,
+ ];
+ }, array_keys( $options_array ), $options_array );
+ ?>
+ <dt-single-select
+ <?php echo wp_kses_post( $shared_attributes ) ?>
+ options="<?php echo esc_attr( json_encode( $options_array ) ) ?>"
+ value="<?php echo esc_attr( $post[$field_key] ? $post[$field_key]['key'] : '' ) ?>">
+ <?php dt_render_icon_slot( $fields[$field_key] ) ?>
+ </dt-single-select>
  <?php elseif ( $field_type === 'tags' ) : ?>
  <div id="<?php echo esc_html( $display_field_id ); ?>" class="tags">
- <var id="<?php echo esc_html( $display_field_id ); ?>-result-container" class="result-container"></var>
+ <var id="<?php echo json_encode( $display_field_id ); ?>-result-container" class="result-container"></var>
  <div id="<?php echo esc_html( $display_field_id ); ?>_t" name="form-tags" class="scrollable-typeahead typeahead-margin-when-active">
  <div class="typeahead__container">
  <div class="typeahead__field">
@@ -787,13 +790,10 @@ class="text-input"
  </div>
 
  <?php elseif ( $field_type === 'date' ) :?>
- <div class="<?php echo esc_html( $display_field_id ); ?> input-group">
- <input id="<?php echo esc_html( $display_field_id ); ?>" class="input-group-field dt_date_picker" type="text" autocomplete="off" <?php echo esc_html( $required_tag ) ?>
- value="<?php echo esc_html( $post[$field_key]['timestamp'] ?? '' ) ?>" <?php echo esc_html( $disabled ); ?> >
- <div class="input-group-button">
- <button id="<?php echo esc_html( $display_field_id ); ?>-clear-button" class="button alert clear-date-button" data-inputid="<?php echo esc_html( $display_field_id ); ?>" title="Delete Date" type="button" <?php echo esc_html( $disabled ); ?>>x</button>
- </div>
- </div>
+ <dt-date
+ <?php echo wp_kses_post( $shared_attributes ) ?> timestamp="<?php echo esc_html( $post[$field_key]['timestamp'] ?? '' ) ?>">
+ <?php dt_render_icon_slot( $fields[$field_key] ) ?>
+ </dt-date>
  <?php elseif ( $field_type === 'connection' ) :?>
  <div id="<?php echo esc_attr( $display_field_id . '_connection' ) ?>" class="dt_typeahead <?php echo esc_html( $disabled ) ?>">
  <span id="<?php echo esc_html( $display_field_id ); ?>-result-container" class="result-container"></span>