Git Product home page Git Product logo

jajan's Introduction


Aplikasi Diary Jajan

Website Aplikasi Jajan
Explore the docs »

View Demo on Vercel · Report Bug

Video

record

Project Boilerplate

Project ini di-bootstrap menggunakan create-vue. Menggunakan framework vuejs dan bundler vite, serta typescript. Secara lengka menggunakan konfigurasi sebagai berikut:

image

Ditambah dengan Vuex sebagai state management

Struktur Folder

  • assets (berisi main.css -> global css)
  • components (berisi ExpenseForm dan ExpenseCard)
  • router (berisi konfigurasi vue-router)
  • store (berisi state management file)
  • types (berisi type definition)
  • utils (berisi currency dan date yang menggunakan Intl sebagai formatting template, dan fetcher untuk call API menggunakan fetch)
  • view (berisi HomeView dengan utils groupItem yang mengubah response API menjadi group berdasarkan bulan dan tanggal)

Instalasi di Lingkungan Pengembangan

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Utils File

groupItem

import type { Expense } from "@/types/Expense";
import { getMonthName } from "@/utils/date";

export function groupExpense(items: Expense[]) {
  const data = items.reduce((acc, item) => {
    const year = new Date(item.tanggal).getFullYear();
    const month = getMonthName(new Date(item.tanggal).getMonth() + 1);
    const my = `${month} ${year}`;
    const date = item.tanggal;

    if (!acc[my]) acc[my] = {};
    if (!acc[my][date]) acc[my][date] = [];

    acc[my][date].push(item);

    return acc;
  }, {} as Record<string, Record<string, Expense[]>>);

  const total = Object.keys(data).reduce((acc, month) => {
    acc[month] = Object.keys(data[month]).reduce((acc, date) => {
      acc += data[month][date].reduce((acc, item) => {
        acc += item.pengeluaran;
        return acc;
      }, 0);

      return acc;
    }, 0);

    return acc;
  }, {} as Record<string, number>);

  return { data, total };
}

date, currency

const formatDate = (value: Date) =>
  new Intl.DateTimeFormat("id-ID", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(value);

const formatTime = (value: Date) =>
  new Intl.DateTimeFormat("id-ID", {
    hour: "2-digit",
    minute: "2-digit",
  }).format(value);

const formatCurrency = (value: number) => {
  return new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
    maximumFractionDigits: 0,
  }).format(value);
};

Unit Test

Screen Shot 2023-01-19 at 03 06 57

jajan's People

Contributors

condrowiyono avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.