@feedmepos/custom-attributes

@feedmepos/custom-attributes

Package Features

The @feedmepos/custom-attributes package provides a set of tools to manage and filter custom attributes for entities such as restaurants. The main features include:

• Filter Builder: FmCustomAttributeFilter A vue component that enables users to build complex filter queries based on custom attributes.
• Rule Validation Function: mongoQuery A function that evaluates MongoDB-style queries against custom attribute data to determine if they match the specified rules.

Rule Validation Function

The mongoQuery function is used to evaluate a set of rules against custom attribute data. It takes two parameters: the data to be evaluated and the rule to be applied. The function returns a boolean indicating whether the data matches the rule.

Development

pnpm install
pnpm dev

Release Package

• Create a new release and tag on GitHub
• The package will be published to npm and github registry by @feedmepos/custom-attributes-action

Add to existing project

Install packages

pnpm install @feedmepos/custom-attributes

Add style.css to your App.vue

import '@feedmepos/custom-attributes/style.css';

How to use the components

import { FmCustomAttributeFilter } from '@feedmepos/custom-attributes';

<FmCustomAttributeFilter
  :attributes="[
    { key: 'name', type: 'string', entity: 'restaurant' },
    { key: 'region', type: 'string', entity: 'restaurant' },
    { key: 'staffCount', type: 'number', entity: 'restaurant' },
    { key: 'memberCount', type: 'number', entity: 'restaurant' },
  ]"
  :model-value="filter"
  @update:model-value="(v) => (filter = v)"
/>

Filter Data

/**
 * filter = { "logic": "AND", "rules": [ { "logic": "AND", "rules": [ { "property": "name", "operator": "$eq", "value": "123" } ] }, { "logic": "AND", "rules": [ { "property": "region", "operator": "$eq", "value": "123" } ] }, { "logic": "AND", "rules": [ { "property": "name", "operator": "$eq", "value": "123123" }, { "property": "staffCount", "operator": "$eq", "value": 123 } ] } ] }
 * 
 * values: FdoCustomAttribute = {
 *   name: '123',
 *   region: '123',
 *   staffCount: 123,
 *   memberCount: 123123
 * }
 */
const testResult = mongoQuery(values, filter);

const result = restaurants.filter((r) => mongoQuery(r.customAttribute, filter));

Screenshot

Multiple group

One group filter