ডাটা ফিল্টার এবং সার্ট ফাংশন তৈরি করা

Aurelia তে ডাটা ফিল্টার এবং সার্ট ফাংশন তৈরি করা খুবই সহজ এবং এটি two-way data binding এবং JavaScript এর বিভিন্ন পদ্ধতি ব্যবহার করে সম্পন্ন করা যায়। আপনি একটি অ্যারে বা লিস্টে থাকা ডেটা ফিল্টার এবং সার্ট করতে computed properties, custom binding behavior অথবা functions ব্যবহার করতে পারেন। এই টিউটোরিয়ালে আমরা দেখবো কিভাবে একটি ডাটা ফিল্টার এবং সার্ট ফাংশন তৈরি করতে হয়।

১. ডাটা ফিল্টার ফাংশন তৈরি করা

ডাটা ফিল্টার ফাংশন একটি নির্দিষ্ট শর্তের ভিত্তিতে অ্যারে থেকে ডেটা ফিল্টার করতে সাহায্য করে। আপনি Array.prototype.filter() পদ্ধতি ব্যবহার করে ডেটা ফিল্টার করতে পারেন।

উদাহরণ:

ধরা যাক, আপনার একটি অ্যারে রয়েছে items নামক যেখানে কিছু প্রোডাক্টের নাম এবং প্রাইস রয়েছে, এবং আপনি প্রোডাক্টের নামের উপর ভিত্তি করে ফিল্টার করতে চান।

export class App {
  searchQuery = '';
  items = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 300 },
    { name: 'Monitor', price: 200 }
  ];

  get filteredItems() {
    return this.items.filter(item => item.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
  }
}

<template>
  <input value.bind="searchQuery" placeholder="Search for a product">
  <ul>
    <li repeat.for="item of filteredItems">${item.name} - $${item.price}
  

এখানে:
filteredItems একটি computed property যা items অ্যারে থেকে name প্রপার্টি অনুযায়ী ডেটা ফিল্টার করে।
searchQuery ইনপুট ফিল্ডের সাথে বাইন্ড করা, যা ইউজারের ইনপুট অনুযায়ী ফিল্টারিং করতে সাহায্য করে।
২. ডাটা সার্ট ফাংশন তৈরি করা
ডাটা সার্ট ফাংশন দিয়ে আপনি অ্যারে বা লিস্টকে কোন বিশেষ প্রপার্টির ভিত্তিতে সাজাতে পারেন। এখানে Array.prototype.sort() পদ্ধতি ব্যবহার করা হয়। আপনি ascending (ASC) বা descending (DESC) অর্ডারে ডেটা সাজাতে পারেন।
উদাহরণ:
ধরা যাক, আপনার প্রোডাক্টের অ্যারে রয়েছে এবং আপনি প্রোডাক্টের প্রাইসের ভিত্তিতে ডেটা সাজাতে চান।
export class App {
  sortOrder = 'asc'; // default sort order
  items = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 300 },
    { name: 'Monitor', price: 200 }
  ];

  sortItems() {
    if (this.sortOrder === 'asc') {
      return this.items.sort((a, b) => a.price - b.price);
    } else {
      return this.items.sort((a, b) => b.price - a.price);
    }
  }

  toggleSortOrder() {
    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
  }
}
{item.price}</li>
  </ul>
</template>

এখানে:

• sortItems একটি method যা অ্যারে items কে price প্রপার্টির উপর ভিত্তি করে সাজায়।
• toggleSortOrder একটি ফাংশন যা সোর্ট অর্ডার (ASC বা DESC) পরিবর্তন করে।

এটি ইউজারকে সার্ট অর্ডার পরিবর্তন করার সুযোগ দেয়। ক্লিক করলে সার্ট অর্ডার পাল্টে যাবে এবং প্রোডাক্টগুলো সেই অনুযায়ী সাজানো হবে।

৩. একসাথে ফিল্টার এবং সার্ট ফাংশন ব্যবহার করা

আপনি ফিল্টার এবং সার্ট ফাংশন একসাথে ব্যবহার করতে পারেন যাতে ইউজার একযোগে ডেটা ফিল্টার এবং সার্ট করতে পারেন।

উদাহরণ:

এখানে আমরা একটি ফিল্টার এবং সার্ট ফাংশন একসাথে ব্যবহার করবো। ইউজার সার্চ কিউরি ও সার্ট অর্ডার অনুযায়ী প্রোডাক্ট লিস্ট ফিল্টার এবং সার্ট করতে পারবেন।

export class App {
  searchQuery = '';
  sortOrder = 'asc';
  items = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 300 },
    { name: 'Monitor', price: 200 }
  ];

  get filteredAndSortedItems() {
    let filtered = this.items.filter(item => item.name.toLowerCase().includes(this.searchQuery.toLowerCase()));

    if (this.sortOrder === 'asc') {
      return filtered.sort((a, b) => a.price - b.price);
    } else {
      return filtered.sort((a, b) => b.price - a.price);
    }
  }

  toggleSortOrder() {
    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
  }
}

<template>
  <input value.bind="searchQuery" placeholder="Search for a product">
  <button click.delegate="toggleSortOrder()">Toggle Sort Order</button>
  <ul>
    <li repeat.for="item of filteredAndSortedItems">${item.name} - $${item.price}</li>
  </ul>
</template>

এখানে:

• filteredAndSortedItems একটি computed property যা প্রথমে ফিল্টারিং করে এবং তারপর প্রাইস অনুযায়ী ডেটা সাজায়।
• ইউজার searchQuery ইনপুটের মাধ্যমে প্রোডাক্ট ফিল্টার এবং toggleSortOrder বাটন ক্লিক করে সার্ট অর্ডার পরিবর্তন করতে পারেন।

উপসংহার

Aurelia তে ডাটা ফিল্টার এবং সার্ট ফাংশন তৈরি করা খুবই সহজ। আপনি computed properties এবং methods ব্যবহার করে ডেটাকে ফিল্টার এবং সার্ট করতে পারেন। এতে আপনি ডেটাকে ব্যবহারকারীর চাহিদা অনুযায়ী সরলভাবে নিয়ন্ত্রণ করতে পারবেন। এছাড়া, two-way data binding এর মাধ্যমে ডেটা পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে UI তে প্রতিফলিত হবে, যা উন্নত ইউজার ইন্টারঅ্যাকশন এবং কার্যকারিতা নিশ্চিত করে।