Filter Modal Component for Credence Projects

Current version: 1

Installation

As a dependency:

npm i cred-filter

As a dev-dependency:

npm i -D cred-filter

Features

• Create a filter-by modal using this component package
• Create and configure input-fields without using JSX
• Configure Bootstrap-Vue modal properties
• Configure Bootstrap-Vue datepicker properties
• Simply copy-paste the boilerplate code.

Warning

• Do not remove/ modify existing properties in the boilerplate code
• Only Change values of ids, titles, refs and Additional Properties

Dependencies

• Bootstrap-Vue
• date-tpl Component

Usage A: When property values are Untabbed

Importing and registering the component:

JSX:

<template>
  <div>
    <filter-modal
      :filterProperties="myFilterProperties"
      :bsConfig="bsConfigProperties"
      :key="`myFilterProperties_${myFilterProperties.filtersApplied}`"
    />
  </div>
</template>

<script>
import FilterModal from "cred-filter/src/FilterModal.vue";
export default {
  data() {
    filterProperties: {
      filtersApplied: false,
			// VALUES CAN BE MODIFIED
      id: "myFilterID",
      title: "Filter Title",
      cancelTitle: "Clear All",
      okTitle: "Apply Filters",
      form: {
        autocomplete: "off",
        fields: []
      }
			// DO NOT MODIFY OR REMOVE
      activeFilters: new Array(1).fill(0),
      responses: { 0: {} },
      // DO NOT REMOVE THIS METHOD OR MODIFY ITS NAME
      submitHandler() {
        // DO NOT REMOVE THIS ASSIGNMENT
        this.filtersApplied = true;
        // WRITE CODE BELOW
      },
      // DO NOT REMOVE THIS METHOD OR MODIFY ITS NAME
      cancelHandler() {
        // DO NOT REMOVE THIS ASSIGNMENT
        this.filtersApplied = false;
        // WRITE CODE BELOW
      },
    }
  },
  components: {
    FilterModal,
  },
};
</script>

Usage B: When property values are Tabbed

Tabs imply bootstrap-vue tabbed components

JSX:

<template>
  <div>
    <filter-modal
      :filterProperties="myFilterProperties"
      :bsConfig="bsConfigProperties"
      :tabIndex="tabIndex"
      :key="`myFilterProperties_${myFilterProperties.filtersApplied}`"
    />
    <b-tabs ref="tabbedComponent">
      <b-tab active @click="setTabindex(0)">...</b-tab>
      <b-tab @click="setTabindex(1)">...</b-tab>
      <b-tab @click="setTabindex(2)">...</b-tab>
    </b-tabs>
  </div>
</template>

Importing and registering the component:

<script>
import FilterModal from "cred-filter/src/FilterModal.vue";
export default {
  data() {
    /*
     * Additional Properties
     */
    tabIndex: 0,
    tabCount: 0,
    tabbedComponentResponses: {},
    tabbedComponentFilters: {},
    tabbedComponentFlag: true,
    /*
     * Component properties
     */
    filterProperties: {
      filtersApplied: false,
    }
  },
  components: {
    FilterModal,
  },
  methods: {
    setTabIndex(index) {
      this.tabIndex = index;
    },
    constructFilterProperties() {
      const self = this;

      if (this.tabbedComponentFlag) {
        for (let i = 0; i < self.tabCount; i++) self.tabbedComponentResponses[i] = {};
        this.tabbedComponentFilters = new Array(self.tabCount).fill(0);
        this.tabbedComponentFlag = false;
      }

      this.filterProperties = {
        ...self.filterProperties,
        
				// VALUES CAN BE MODIFIED
        id: "myFilterID",
        title: "Filter Title",
        cancelTitle: "Clear All",
        okTitle: "Apply Filters",
        form: {
          autocomplete: "off",
          fields: []
        }
				// DO NOT MODIFY OR REMOVE
        responses: {...self.tabbedComponentResponses },
        activeFilters: {...self.tabbedComponentFilters },
        // DO NOT REMOVE THIS METHOD OR MODIFY ITS NAME

        submitHandler(event, tab) {
          // DO NOT REMOVE THIS ASSIGNMENT
          self.tabbedComponentResponses[tab] = { ...this.responses[tab]};
          self.tabbedComponentFilters = { ...this.activeFilters};
          this.filtersApplied = true;
          // WRITE CODE BELOW

        },
        // DO NOT REMOVE THIS METHOD OR MODIFY ITS NAME
        cancelHandler(event, tab) {
          // DO NOT REMOVE THIS ASSIGNMENT
          self.tabbedComponentResponses[tab] = { ...this.responses[tab] };
          self.tabbedComponentFilters = { ...this.activeFilters };
          this.filtersApplied = false;
          // WRITE CODE BELOW

        },
      }
    }
  },
  mounted() {
    this.tabCount = this.$refs["tabbedComponent"].$children.length;
  },
  computed: {
    computedForTabbedComponent() {
      return [this.tabIndex, this.tabCount]
    }
  }
  watch: {
    computedForTabbedComponent: {
      handler: function() {
        this.constructFilterProperties();
      },
      deep: true,
    },
  }
};
</script>

Filter Object (:filterProperties="filterProperties")

| Name | Description | Type | Syntax | | --------------- | ------------------------------------------ | --------------- | ------------------------- | | ID | Modal ID | String | id: "myModalID" | | Title | Modal Title | String | title: "Filter By" | | Cancel Title | Value of the cancel button | String | cancelTitle: "Clear All" | | Ok Title | Value of the ok button | String | okTitle: "Apply Filters" | | Form | Form input field data | Object | form: {...} | | Responses | v-model response data for each input field | Object | responses: {} | | Cancel Handler | Handler func. for cancel button | Function(event) | cancelHandler(event){...} | | Submit Handler | Handler func. for form submit | Function(event) | submitHandler(event){...} |

Form Object Data

| Name | Description | Type | Syntax | Variants | | ------------ | ---------------------------- | -------- | ------------------- | ---------------- | | Autocomplete | Form autocomplete attribute. | String | autocomplete: "off" | 'on', 'off' | | Fields | Input fields data | [Object] | fields: [{...}] | Check below(1) |

(1) Fields Array Object Data

| Name | Description | Type | Syntax | Variants | | ------------ | ------------------------------------- | ---------------- | ------------------------------- | -------------------- | | ID | Array of field IDs | [String] | id: ["fieldId1"] | id: [String, String] | | Label | Field label | String | label: "First Name" | N/A | | Pairing/Type | Array of field pairing and input type | [String, String] | type: ["single", "date"] | Check Below(2) | | List Options | Values for the select input field | [Array] | listOptions: [["val1", "val2"]] | Check Below(3) |

(2) Pairing/Type defines the input type and whether the input fields are either in "pairs" or "single" Variants for the Pairing/Type property

Note: Both input fields vueould be of same type.

form: {
  fields: {
    /* Pairing: single, Type: date type: ["single", "date"] */
    {
      id: ["DOB"],
      label: "Date of Birth",
      type: ["single", "date"]
    },
    /* Pairing: paired, Type: date type: ["paired", "date"] */ {
      id: ["startDate", "endDate"],
      label: "Time Period",
      type: ["paired", "date"]
    },
  }
}

(3) List Options is an additional property, exclusively for the "list" type field. This property contain values for both paired and single input fields. This field is a 2D array or (an array of arrays), where each inner array contains the values for the list.

NOTE: These values are options for the select bootstrap field and therefore must contain value and code properties in an object

  autocomplete: "off",
  fields: [{
    id: ["field1"],
    label: "Select 1",
    type: ["single", "list"],
    /* * listOptions for "single" input field * Each option must contain value and code property. */
    listOptions: [
      [{
        value: "usdinr",
        code: "USD/INR"
      }, {
        value: "indaud",
        code: "INR/AUD"
      }, ],
    ],
  }, {
    id: ["field2", "field3"],
    label: "Select 2",
    type: ["paired", "list"],
    /* * listOptions for "paired" input field * Each option must contain value and code property. */
    listOptions: [
      [{
        value: "usdinr",
        code: "USD/INR"
      }, {
        value: "indaud",
        code: "INR/AUD"
      }, ],
      [{
        value: "abc",
        code: "abc/def"
      }, {
        value: "xyz",
        code: "xyz/123"
      }, ],
    ],
  }, 
],

Bootstrap Vue config object (:bsConfig="bsConfigProperties")

Bootstrap-Vue Modal

| Property | Description | Type | Syntax | | --------------- | ----------------------------------------------- | ------- | ------------------ | | no-close-on-esc | Prevent modal from closing on Esc key press | Boolean | noCloseOnEsc: true |

bsConfigProperties: { // true prevents the modal from closing noCloseOnEsc: true, },