@ngockhoale/ukit 1.1.6

package/templates/.claude/skills/frontend-vue/reference/composables-example.vue

@@ -0,0 +1,320 @@
+<!--
+REFERENCE EXAMPLE: Composables Usage
+This example demonstrates how to use the predefined composables from composables/ folder
+All functions are auto-imported in Nuxt - no import statements needed
+-->
+<template>
+  <div class="container mt-4">
+    <!-- Search Form -->
+    <div class="row mb-3">
+      <div class="col-md-3">
+        <ControlDatetime v-model="from_date" name="From Date" :required="true" />
+      </div>
+      <div class="col-md-3">
+        <ControlDatetime v-model="to_date" name="To Date" :required="true" />
+      </div>
+      <div class="col-md-3">
+        <ControlDropdownlist v-model="selected_user" name="User" :list="user_list" placeholder="Select User" />
+      </div>
+      <div class="col-md-3 d-flex align-items-end">
+        <ControlButton type="primary" name="Search" @onClick="get_data" />
+      </div>
+    </div>
+
+    <!-- Data Grid -->
+    <GridAG
+      id="example_grid"
+      :columns="columns"
+      :rows="rows"
+      :can_add="true"
+      :can_edit="true"
+      :can_delete="true"
+      :table="table_name"
+      :table_schema="table_schema"
+      @onClickDetail="onClickDetail"
+      @onAdd="onAdd"
+      @reloadData="get_data"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    // Computed properties first
+  },
+
+  data() {
+    return {
+      // Filter data
+      from_date: "",
+      to_date: "",
+      selected_user: "",
+
+      // Dropdown data
+      user_list: [],
+
+      // Grid data
+      rows: [],
+      table_name: "orders",
+      table_schema: "",
+
+      // Column definitions
+      columns: [
+        { key: "order_no", title: "Order No", type: "text" },
+        { key: "customer_name", title: "Customer", type: "text" },
+        { key: "order_date", title: "Order Date", type: "date" },
+        { key: "total_amount", title: "Amount", type: "number" },
+        { key: "status", title: "Status", type: "text" },
+      ],
+    };
+  },
+
+  methods: {
+    // ============================================
+    // VALIDATION EXAMPLES (check_is_null_or_blank)
+    // ============================================
+    validateForm() {
+      // Check if required fields are filled
+      if (check_is_null_or_blank(this.from_date)) {
+        show_message("error", t("Please select from date"));
+        return false;
+      }
+      if (check_is_null_or_blank(this.to_date)) {
+        show_message("error", t("Please select to date"));
+        return false;
+      }
+      return true;
+    },
+
+    // ============================================
+    // API REQUEST EXAMPLES (request, get_schema)
+    // ============================================
+    async get_data() {
+      // Step 1: Validate
+      if (!this.validateForm()) {
+        return;
+      }
+
+      // Step 2: Build conditions with operators
+      let conditions = {
+        "(>=)order_date": this.from_date,
+        "(<=)order_date": this.to_date,
+      };
+
+      // Add optional filters
+      if (!check_is_null_or_blank(this.selected_user)) {
+        conditions.user_id = this.selected_user;
+      }
+
+      // Step 3: Build payload
+      let data = {
+        schema: get_schema(), // Returns 'qas' or 'prd' based on URL
+        table: this.table_name,
+        conditions: JSON.stringify(conditions),
+        order_by: ["order_date desc"],
+      };
+
+      // Step 4: Call API
+      this.rows = await request("/select", data, "get");
+    },
+
+    // ============================================
+    // DROPDOWN CONVERSION (convertToDropdownValue)
+    // ============================================
+    async load_users() {
+      let data = {
+        schema: get_schema(),
+        table: "users",
+        conditions: JSON.stringify({ status: "active" }),
+        order_by: ["fullname asc"],
+      };
+
+      let response = await request("/select", data, "get");
+
+      // Convert API response to dropdown format
+      // From: [{ id_user: 1, fullname: 'John' }, { id_user: 2, fullname: 'Jane' }]
+      // To: [{ value: 1, label: 'John' }, { value: 2, label: 'Jane' }]
+      this.user_list = convertToDropdownValue(response, "id_user", "fullname");
+    },
+
+    // ============================================
+    // DATE FORMATTING (dayjs, formatDate)
+    // ============================================
+    getFormattedDates() {
+      // Get today's date in YYYY-MM-DD format
+      const today = dayjs().format("YYYY-MM-DD");
+
+      // Get first day of current month
+      const firstDay = dayjs().startOf("month").format("YYYY-MM-DD");
+
+      // Get last day of current month
+      const lastDay = dayjs().endOf("month").format("YYYY-MM-DD");
+
+      // Format for display (DD/MM/YYYY)
+      const displayDate = formatDate(today, "read_date"); // "18/01/2026"
+
+      // Format with time
+      const displayDateTime = formatDate(today, "read_datetime"); // "18/01/2026 10:30:00"
+
+      return { today, firstDay, lastDay, displayDate };
+    },
+
+    setDefaultDates() {
+      // Set from_date to first day of month
+      this.from_date = dayjs().startOf("month").format("YYYY-MM-DD");
+      // Set to_date to today
+      this.to_date = dayjs().format("YYYY-MM-DD");
+    },
+
+    // ============================================
+    // SESSION MANAGEMENT (getSession, setSession)
+    // ============================================
+    checkLogin() {
+      const username = getSession("username");
+      if (check_is_null_or_blank(username)) {
+        // User not logged in, redirect to login
+        go_to_page("/login");
+        return false;
+      }
+      return true;
+    },
+
+    saveFilterToSession() {
+      // Save current filter values to session for persistence
+      setSession("order_filter", {
+        from_date: this.from_date,
+        to_date: this.to_date,
+        selected_user: this.selected_user,
+      });
+    },
+
+    loadFilterFromSession() {
+      // Restore filter values from session
+      const savedFilter = getSession("order_filter");
+      if (!check_is_null_or_blank(savedFilter)) {
+        this.from_date = savedFilter.from_date || "";
+        this.to_date = savedFilter.to_date || "";
+        this.selected_user = savedFilter.selected_user || "";
+      }
+    },
+
+    // ============================================
+    // TRANSLATION (t)
+    // ============================================
+    getTranslatedStatus(status) {
+      // t() translates strings based on user's language setting
+      const statusMap = {
+        pending: t("Pending"),
+        approved: t("Approved"),
+        rejected: t("Rejected"),
+      };
+      return statusMap[status] || status;
+    },
+
+    // ============================================
+    // MESSAGES (show_message)
+    // ============================================
+    async saveData() {
+      try {
+        let data = {
+          schema: get_schema(),
+          table: "orders",
+          data: JSON.stringify(this.form),
+        };
+
+        const result = await request("/insert", data, "post");
+
+        if (result.success) {
+          // Success message
+          show_message("success", t("Saved successfully"));
+          await this.get_data(); // Refresh grid
+        } else {
+          // Error message
+          show_message("error", t("Error saving data"));
+        }
+      } catch (error) {
+        show_message("error", t("Connection error"));
+      }
+    },
+
+    // ============================================
+    // NAVIGATION (go_to_page, go_back)
+    // ============================================
+    onClickDetail(row) {
+      // Navigate to detail page with query params
+      go_to_page("/orders/detail", { id: row.id_orders });
+    },
+
+    onAdd() {
+      // Navigate to create page
+      go_to_page("/orders/create");
+    },
+
+    onCancel() {
+      // Go back to previous page
+      go_back("/orders");
+    },
+
+    // ============================================
+    // UTILITY FUNCTIONS
+    // ============================================
+    async delayedAction() {
+      show_message("info", "Processing...");
+      await sleep(2000); // Wait 2 seconds
+      show_message("success", "Done!");
+    },
+
+    // Get list of dates for a range
+    getDateRange() {
+      // Returns array of dates: ['2024-01-01', '2024-01-02', ...]
+      return getDateList(this.from_date, this.to_date);
+    },
+
+    // Format numbers for display
+    formatAmount(amount) {
+      // 1234567 -> "1.234.567.00"
+      return formatNumber(amount, ".", 2);
+    },
+
+    // Extract IDs from list
+    getSelectedIds() {
+      // From: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]
+      // To: [1, 2]
+      return convertListToListOfField(this.rows, "id_orders");
+    },
+  },
+
+  async mounted() {
+    // Set schema
+    this.table_schema = get_schema();
+
+    // Check login
+    if (!this.checkLogin()) {
+      return;
+    }
+
+    // Load dropdown data
+    await this.load_users();
+
+    // Set default dates
+    this.setDefaultDates();
+
+    // Load filter from session (if any)
+    this.loadFilterFromSession();
+
+    // Load initial data
+    await this.get_data();
+  },
+
+  watch: {
+    // Auto-save filter when changed
+    from_date() {
+      this.saveFilterToSession();
+    },
+    to_date() {
+      this.saveFilterToSession();
+    },
+  },
+};
+</script>

package/templates/.claude/skills/frontend-vue/reference/form-example.vue

@@ -0,0 +1,183 @@
+<!--
+REFERENCE EXAMPLE: Standard Form with Predefined Components
+This example demonstrates how to use the predefined components in components/ folder
+-->
+<template>
+  <div class="container mt-4">
+    <!-- Using ControlInput for text inputs -->
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <ControlInput
+          v-model="form.username"
+          name="Username"
+          :required="true"
+          placeholder="Enter username"
+        />
+      </div>
+      <div class="col-md-6">
+        <ControlInput
+          v-model="form.email"
+          name="Email"
+          type="text"
+          placeholder="Enter email"
+        />
+      </div>
+    </div>
+
+    <!-- Using ControlDatetime for date pickers -->
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <ControlDatetime
+          v-model="form.from_date"
+          name="From Date"
+          :required="true"
+        />
+      </div>
+      <div class="col-md-6">
+        <ControlDatetime
+          v-model="form.to_date"
+          name="To Date"
+          :required="true"
+        />
+      </div>
+    </div>
+
+    <!-- Using ControlDropdownlist for select inputs -->
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <ControlDropdownlist
+          v-model="form.status"
+          name="Status"
+          :required="true"
+          :list="status_list"
+          placeholder="Select status"
+        />
+      </div>
+      <div class="col-md-6">
+        <ControlDropdownlist
+          v-model="form.categories"
+          name="Categories"
+          :list="category_list"
+          :multiple="true"
+          placeholder="Select categories"
+        />
+      </div>
+    </div>
+
+    <!-- Using ControlInput for textarea -->
+    <div class="row mb-3">
+      <div class="col-12">
+        <ControlInput
+          v-model="form.description"
+          name="Description"
+          type="textarea"
+          rows="4"
+          placeholder="Enter description"
+        />
+      </div>
+    </div>
+
+    <!-- Using ControlCheckbox -->
+    <div class="row mb-3">
+      <div class="col-12">
+        <ControlCheckbox
+          v-model="form.is_active"
+          name="Active"
+        />
+      </div>
+    </div>
+
+    <!-- Using ControlButton for actions -->
+    <div class="row">
+      <div class="col-12">
+        <ControlButton
+          type="primary"
+          name="Save"
+          @onClick="onSave"
+        />
+        <ControlButton
+          type="secondary"
+          name="Cancel"
+          @onClick="onCancel"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    // Computed properties first
+  },
+  data() {
+    return {
+      form: {
+        username: "",
+        email: "",
+        from_date: "",
+        to_date: "",
+        status: "",
+        categories: [],
+        description: "",
+        is_active: false,
+      },
+      status_list: [
+        { value: "active", label: "Active" },
+        { value: "inactive", label: "Inactive" },
+        { value: "pending", label: "Pending" },
+      ],
+      category_list: [
+        { value: "cat1", label: "Category 1" },
+        { value: "cat2", label: "Category 2" },
+        { value: "cat3", label: "Category 3" },
+      ],
+    };
+  },
+
+  methods: {
+    async onSave() {
+      // Validate required fields
+      if (check_is_null_or_blank(this.form.username)) {
+        alert("Username is required");
+        return;
+      }
+
+      // Build payload
+      let data = {
+        schema: get_schema(),
+        table: "users",
+        data: JSON.stringify(this.form),
+      };
+
+      // Call backend
+      const result = await request("/insert", data, "post");
+      if (result.success) {
+        alert("Saved successfully!");
+      }
+    },
+
+    onCancel() {
+      // Reset form
+      this.form = {
+        username: "",
+        email: "",
+        from_date: "",
+        to_date: "",
+        status: "",
+        categories: [],
+        description: "",
+        is_active: false,
+      };
+    },
+  },
+
+  async mounted() {
+    // Load initial data if needed
+  },
+
+  watch: {
+    // Watchers here
+  },
+};
+</script>

package/templates/.claude/skills/frontend-vue/reference/grid-example.vue

@@ -0,0 +1,147 @@
+<!--
+REFERENCE EXAMPLE: Data Grid with AG Grid Component
+This example demonstrates how to use GridAG component for displaying data tables
+-->
+<template>
+  <div class="container-fluid mt-4">
+    <!-- Filter Section using predefined components -->
+    <div class="row mb-3">
+      <div class="col-md-3">
+        <ControlDatetime
+          v-model="from_date"
+          name="From Date"
+          :required="true"
+        />
+      </div>
+      <div class="col-md-3">
+        <ControlDatetime
+          v-model="to_date"
+          name="To Date"
+          :required="true"
+        />
+      </div>
+      <div class="col-md-3">
+        <ControlDropdownlist
+          v-model="status"
+          name="Status"
+          :list="status_list"
+          placeholder="All Status"
+        />
+      </div>
+      <div class="col-md-3 d-flex align-items-end">
+        <ControlButton
+          type="primary"
+          name="Search"
+          @onClick="get_data"
+        />
+      </div>
+    </div>
+
+    <!-- AG Grid Component -->
+    <GridAG
+      id="user_grid"
+      :columns="columns"
+      :rows="rows"
+      :can_add="true"
+      :can_edit="true"
+      :can_delete="true"
+      :can_export="true"
+      :table="table_name"
+      :table_schema="table_schema"
+      @onClickDetail="onClickDetail"
+      @onAdd="onAdd"
+      @reloadData="get_data"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    // Computed properties first
+  },
+  data() {
+    return {
+      // Filter data
+      from_date: "",
+      to_date: "",
+      status: "",
+
+      // Grid data
+      rows: [],
+      table_name: "users",
+      table_schema: "",
+
+      // Dropdown options
+      status_list: [
+        { value: "active", label: "Active" },
+        { value: "inactive", label: "Inactive" },
+      ],
+
+      // Column definitions for AG Grid
+      columns: [
+        { key: "username", title: "Username", type: "text" },
+        { key: "email", title: "Email", type: "text" },
+        { key: "status", title: "Status", type: "text" },
+        { key: "created_date", title: "Created Date", type: "date" },
+        { key: "amount", title: "Amount", type: "number" },
+      ],
+    };
+  },
+
+  methods: {
+    async get_data() {
+      // Validate required fields
+      if (check_is_null_or_blank(this.from_date) || check_is_null_or_blank(this.to_date)) {
+        return;
+      }
+
+      // Build conditions object
+      let conditions = {
+        "(>=)created_date": this.from_date,
+        "(<=)created_date": this.to_date,
+      };
+
+      // Add optional filters
+      if (!check_is_null_or_blank(this.status)) {
+        conditions.status = this.status;
+      }
+
+      // Build payload
+      let data = {
+        schema: get_schema(),
+        table: this.table_name,
+        conditions: JSON.stringify(conditions),
+        order_by: ["created_date desc"],
+      };
+
+      // Call backend
+      this.rows = await request("/select", data, "get");
+    },
+
+    onClickDetail(row) {
+      // Handle edit click - navigate to detail page or open modal
+      console.log("Edit row:", row);
+      // Example: this.$router.push(`/users/${row.id_users}`);
+    },
+
+    onAdd() {
+      // Handle add new - navigate to create page or open modal
+      console.log("Add new");
+      // Example: this.$router.push('/users/create');
+    },
+  },
+
+  async mounted() {
+    // Set default dates
+    this.table_schema = get_schema();
+
+    // Load initial data
+    await this.get_data();
+  },
+
+  watch: {
+    // Watchers here
+  },
+};
+</script>