@ngockhoale/ukit 1.1.6

package/templates/.claude/skills/frontend-vue/components/Partial/Sidebar.vue

@@ -0,0 +1,122 @@
+<template>
+  <!-- Main Sidebar Container -->
+  <aside class="main-sidebar elevation-4 sidebar-light-olive">
+    <!-- Brand Logo -->
+    <span class="brand-link" @click="$router.push(state.homepage)" style="cursor: pointer">
+      <img :src="'/static/img/logo_duraone.png'" alt="Logo" class="brand-image" style="opacity: 1" />
+    </span>
+
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <!-- Sidebar Menu -->
+      <nav class="mt-2">
+        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+          <li class="nav-item" @click="click_main_menu(item.link)" :class="item.link" v-for="item in menu()">
+            <a class="nav-link active">
+              <i class="nav-icon" :class="item.icon"></i>
+              <p>
+                {{ t(item.name) }}
+                <i class="right fas fa-angle-left"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li @click="click_sub_menu(sub.link)" class="nav-item" v-for="(sub, index) in item.sub_menu">
+                <a class="nav-link" :class="current_path === sub.link ? 'active' : ''">
+                  <i class="nav-icon" :class="sub.icon"></i>
+                  <p>{{ index + 1 }}. {{ t(sub.name) }}</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+      <!-- /.sidebar-menu -->
+      <div class="sidebar-footer logout-button" @click="logout()">
+        <a class="btn btn-block btn-outline-danger" style="display: inline-block">{{ t("Log out") }}</a>
+      </div>
+    </div>
+    <!-- /.sidebar -->
+  </aside>
+</template>
+<script>
+export default defineComponent({
+  computed: {
+    current_path() {
+      return this.$route.fullPath;
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    click_main_menu(menu) {
+      $(".nav-item").removeClass("menu-open");
+      $("." + menu).addClass("menu-open");
+    },
+    click_sub_menu(menu) {
+      this.$router.replace(menu);
+    },
+    logout() {
+      clearSession();
+      this.$router.push("/login");
+    },
+    authorize_sub_menu() {
+      const usergroup = getSession("usergroup");
+      menu().forEach((item) => {
+        item.sub_menu.forEach((sub) => {
+          if(!check_is_null_or_blank(sub.authorize)) {
+            if (!usergroup.some(role => sub.authorize.includes(role))) {
+              // remove sub from item.sub_menu
+              item.sub_menu.splice(item.sub_menu.indexOf(sub), 1);
+            }
+          }
+        });
+      });
+    },
+  },
+  mounted() {
+    this.authorize_sub_menu();
+    menu().forEach((item) => {
+      item.sub_menu.forEach((sub) => {
+        if (this.$route.fullPath === sub.link) {
+          this.click_main_menu(item.link);
+        }
+      });
+    });
+  },
+  watch: {
+    $route(to, from) {
+      menu().forEach((item) => {
+        item.sub_menu.forEach((sub) => {
+          if (to.fullPath === sub.link) {
+            this.click_main_menu(item.link);
+          }
+        });
+      });
+    },
+  },
+});
+</script>
+<style scoped>
+.brand-link {
+  display: flex;
+  justify-content: center;
+}
+.sidebar-collapse .brand-link .brand-image {
+  width: 60px; /* adjust the size according to your needs */
+  height: auto; /* maintain aspect ratio */
+}
+
+.logout-button {
+  position: absolute;
+  bottom: 20px;
+  width: 80%;
+  left: 22px;
+}
+
+.sidebar-collapse .logout-button {
+  left: 0px;
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>

package/templates/.claude/skills/frontend-vue/components/Template.vue

@@ -0,0 +1,16 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {
+  props: {},
+  setup() {},
+  computed: {},
+  data() {
+    return {};
+  },
+  methods: {},
+  mounted() {},
+  watch: {},
+};
+</script>

package/templates/.claude/skills/frontend-vue/components/View/Form.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="container-fluid view-form">
+    <div class="row mb-3" v-if="title || subtitle">
+      <div class="col-12">
+        <h3 v-if="title" class="view-form-title mb-1">{{ title }}</h3>
+        <p v-if="subtitle" class="view-form-subtitle mb-0">{{ subtitle }}</p>
+      </div>
+    </div>
+
+    <slot name="before"></slot>
+
+    <div class="row">
+      <div class="col-12">
+        <slot>
+          <PanelFormView
+            :workingObj="workingObj"
+            :rows="rows"
+            :table="table"
+            :columns="columns"
+            :table_schema="table_schema"
+            :allow_edit="allow_edit"
+            @reloadData="$emit('reloadData')"
+          />
+        </slot>
+      </div>
+    </div>
+
+    <slot name="after"></slot>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    subtitle: {
+      type: String,
+      default: "",
+    },
+    workingObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    rows: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    table: {
+      type: String,
+      default: "",
+    },
+    columns: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    table_schema: {
+      type: String,
+      default: "",
+    },
+    allow_edit: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["reloadData"],
+};
+</script>
+<style>
+.view-form {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.view-form-title {
+  font-weight: 700;
+}
+
+.view-form-subtitle {
+  color: #6c757d;
+}
+</style>

package/templates/.claude/skills/frontend-vue/composables/indexDBStore.js

@@ -0,0 +1,140 @@
+/**
+ * @file indexDBStore.js
+ * @description IndexedDB wrapper — lưu trữ dữ liệu offline trên trình duyệt.
+ * Dùng cho cache master data lớn (air_code, cost_center, ...) để giảm API call.
+ *
+ * Cách dùng:
+ *   1. createStoreIDB(storageName) → Khởi tạo/mở DB
+ *   2. addDataIDB(storageName, data) → Lưu data (clear cũ trước khi ghi mới)
+ *   3. getDataIDB(storageName) → Đọc data đã lưu
+ *
+ * DB Name: "eplanning", Version: 1
+ * Mỗi storage trong storage_list tương ứng 1 objectStore trong IndexedDB.
+ */
+
+/**
+ * Reactive state quản lý IndexedDB
+ * @property {IDBDatabase|string} db - Instance DB hiện tại
+ * @property {string} DB_NAME - Tên database ("eplanning")
+ * @property {number} DB_VERSION - Version database
+ * @property {Array<string>} storage_list - Danh sách objectStore được tạo tự động
+ */
+export const db_state = reactive({
+    db: '',
+    DB_NAME: 'eplanning',
+    DB_VERSION: 1,
+    storage_list: ["air_code_list", "cost_center_list", "internal_order_list", "cost_element_list", "maintenanceTaskList", "buyer_list"],
+});
+
+/**
+ * Mở/khởi tạo IndexedDB. Tự tạo tất cả objectStore trong storage_list nếu chưa có.
+ * @param {string} storage - Tên objectStore (phải nằm trong db_state.storage_list)
+ * @returns {Promise<IDBDatabase>} Instance database đã sẵn sàng
+ */
+export const createStoreIDB = async (storage) => {
+    return new Promise((resolve, reject) => {
+        let request = window.indexedDB.open(db_state.DB_NAME, db_state.DB_VERSION);
+        
+        request.onerror = e => {
+            console.log('Error opening db', e);
+            reject('Error');
+        };
+
+        request.onsuccess = e => {
+            let db = e.target.result;
+            resolve(db);
+        };
+
+        request.onupgradeneeded = e => {
+            let db = e.target.result;
+            // Check if the object store already exists
+            db_state.storage_list.forEach(storage => {
+                if (!db.objectStoreNames.contains(storage)) {
+                    db.createObjectStore(storage, { autoIncrement: true, keyPath: 'id' });
+                }
+            });
+            resolve(db);
+        };
+        
+	});
+};
+
+
+/**
+ * Lưu data vào IndexedDB (clear toàn bộ data cũ trước khi ghi mới).
+ * Nếu gặp lỗi → xóa DB và tạo lại.
+ * @param {string} storage - Tên objectStore
+ * @param {Object} [data] - Data cần lưu (1 object). Nếu null → chỉ clear store.
+ * @returns {Promise<void>}
+ * @example await addDataIDB("air_code_list", { id: 1, data: [...] })
+ */
+export const addDataIDB = async (storage, data) => {
+    const db = await createStoreIDB(storage);
+    return new Promise((resolve, reject) => {
+        try{
+            let transaction = db.transaction([storage], 'readwrite');
+            let objectStore = transaction.objectStore(storage);
+            let clearRequest = objectStore.clear();
+
+            clearRequest.onsuccess = () => {
+                if (data) {
+                    let putRequest = objectStore.put(data);
+                    putRequest.onsuccess = () => {
+                        resolve();
+                    };
+                    putRequest.onerror = () => {
+                        reject('Error adding data to object store');
+                    };
+                } else {
+                    resolve(); // Resolve immediately if no data is provided
+                }
+            }
+        } catch (e) {
+            window.indexedDB.deleteDatabase(db_state.DB_NAME);
+            createStoreIDB(storage);
+        }
+        
+    });
+};
+
+
+
+/**
+ * Đọc data từ IndexedDB. Trả về phần tử đầu tiên trong store.
+ * @param {string} storage - Tên objectStore
+ * @returns {Promise<Object|undefined>} Data đã lưu hoặc undefined
+ * @example const cached = await getDataIDB("air_code_list")
+ */
+export const getDataIDB = async (storage) => {
+    const db = await createStoreIDB(storage);
+    return new Promise((resolve, reject) => {
+        try {
+            if (!db.objectStoreNames.contains(storage)) {
+                resolve([]);
+                return;
+            }
+            let trans = db.transaction([storage],'readonly');
+            trans.oncomplete = e => {
+                resolve(to_return[0]);
+            };
+            
+            let store = trans.objectStore(storage);
+            let to_return = [];
+            
+            store.openCursor().onsuccess = e => {
+                let cursor = e.target.result;
+                if (cursor) {
+                    to_return.push(cursor.value)
+                    cursor.continue();
+                }
+            };
+        } catch (e) {
+            window.indexedDB.deleteDatabase(db_state.DB_NAME);
+            createStoreIDB(storage);
+        }
+	});
+};
+
+
+
+