Form List - Employees » History » Version 1
Lê Sĩ Quý, 08/29/2025 01:59 PM
| 1 | 1 | Lê Sĩ Quý | # Form List - Employees |
|---|---|---|---|
| 2 | |||
| 3 | {{TOC}} |
||
| 4 | |||
| 5 | ## JSON Schema |
||
| 6 | |||
| 7 | Form List không dùng FormIO vì không có input data, đơn thuần hiển thị danh sách dữ liệu từ spreadsheet. **Nếu dữ liệu chỉ giới hạn truy cập bởi ít người hoặc không cần public thì có thể quản lý data trực tiếp bằng spreadsheet.** |
||
| 8 | |||
| 9 | ## HTML Template |
||
| 10 | |||
| 11 | ``` html |
||
| 12 | <!DOCTYPE html> |
||
| 13 | <html lang="en"> |
||
| 14 | |||
| 15 | <head> |
||
| 16 | <meta name="viewport" |
||
| 17 | content="user-scalable=no, initial-scale=1.0001, maximum-scale=1.0001, width=device-width, minimal-ui shrink-to-fit=no"> |
||
| 18 | <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" /> |
||
| 19 | <title>Northwind</title> |
||
| 20 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesome-notifications/3.1.0/style.min.css"> |
||
| 21 | <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/w2ui@2.0.0/w2ui-2.0.min.css"> |
||
| 22 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
||
| 23 | <script src="https://cdnjs.cloudflare.com/ajax/libs/awesome-notifications/3.1.0/modern.var.min.js"></script> |
||
| 24 | <script src="https://cdn.jsdelivr.net/npm/localstorage-slim"></script> |
||
| 25 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
||
| 26 | <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> |
||
| 27 | </head> |
||
| 28 | |||
| 29 | <body> |
||
| 30 | <div id="toolbar"></div> |
||
| 31 | <div style="position: relative; height: 800px;"> |
||
| 32 | <div id="master" style="display: inline-block; width: 100%; height: 100%;"></div> |
||
| 33 | </div> |
||
| 34 | |||
| 35 | <style> |
||
| 36 | .category-img { |
||
| 37 | object-fit: cover; |
||
| 38 | width: 100%; |
||
| 39 | max-height: 100%; |
||
| 40 | } |
||
| 41 | </style> |
||
| 42 | |||
| 43 | <script type="module"> |
||
| 44 | import { w2toolbar, w2grid } from "https://cdn.jsdelivr.net/npm/w2ui@2.0.0/w2ui-2.0.es6.min.js"; |
||
| 45 | var notifier = new AWN({ option: "top-right" }); |
||
| 46 | var sid = ls.get("sid"); |
||
| 47 | var email = ls.get("email"); |
||
| 48 | var $ds = {}; |
||
| 49 | var master; |
||
| 50 | |||
| 51 | $(function () { |
||
| 52 | new w2toolbar({ |
||
| 53 | box: "#toolbar", |
||
| 54 | name: "toolbar", |
||
| 55 | items: [ |
||
| 56 | { |
||
| 57 | type: "menu", id: "sales", icon: "w2ui-icon-info", text: "Sales", |
||
| 58 | items: [ |
||
| 59 | { id: "customers", text: "Customers", icon: "fa fa-user" }, |
||
| 60 | { id: "orders", text: "Orders", icon: "fa fa-file-text" }, |
||
| 61 | ] |
||
| 62 | }, |
||
| 63 | { type: 'break' }, |
||
| 64 | { |
||
| 65 | type: "menu", id: "operations", icon: "w2ui-icon-settings", text: "Operations", |
||
| 66 | items: [ |
||
| 67 | { id: "employees", text: "Employees", icon: "fa fa-address-card" }, |
||
| 68 | { id: "products", text: "Products", icon: "fa fa-archive" }, |
||
| 69 | { id: "categories", text: "Product Categories", icon: "fa fa-sitemap" }, |
||
| 70 | { id: "suppliers", text: "Suppliers", icon: "fa fa-user" }, |
||
| 71 | { id: "shippers", text: "Shippers", icon: "fa fa-shopping-cart" } |
||
| 72 | ] |
||
| 73 | }, |
||
| 74 | { type: "spacer" }, |
||
| 75 | { |
||
| 76 | type: "menu", id: "auth", text: email, |
||
| 77 | items: [ |
||
| 78 | { text: "Logout", id: "logout", icon: "fa fa-sign-out" } |
||
| 79 | ] |
||
| 80 | } |
||
| 81 | ], |
||
| 82 | onClick(event) { |
||
| 83 | switch (event.target) { |
||
| 84 | case "sales:customers": { |
||
| 85 | window.open("<?= base ?>?url=/form/customers", "_top"); |
||
| 86 | break; |
||
| 87 | } |
||
| 88 | case "sales:orders": { |
||
| 89 | window.open("<?= base ?>?url=/form/orders", "_top"); |
||
| 90 | break; |
||
| 91 | } |
||
| 92 | case "operations:employees": { |
||
| 93 | window.open("<?= base ?>?url=/form/employees", "_top"); |
||
| 94 | break; |
||
| 95 | } |
||
| 96 | case "operations:products": { |
||
| 97 | window.open("<?= base ?>?url=/form/products", "_top"); |
||
| 98 | break; |
||
| 99 | } |
||
| 100 | case "operations:categories": { |
||
| 101 | window.open("<?= base ?>?url=/form/categories", "_top"); |
||
| 102 | break; |
||
| 103 | } |
||
| 104 | case "operations:suppliers": { |
||
| 105 | window.open("<?= base ?>?url=/form/suppliers", "_top"); |
||
| 106 | break; |
||
| 107 | } |
||
| 108 | case "operations:shippers": { |
||
| 109 | window.open("<?= base ?>?url=/form/shippers", "_top"); |
||
| 110 | break; |
||
| 111 | } |
||
| 112 | case "auth:logout": { |
||
| 113 | ls.remove("sid"); |
||
| 114 | ls.remove("email"); |
||
| 115 | window.open("<?= base ?>?url=/form/login&callback=<?!= url ?>", "_top"); |
||
| 116 | break; |
||
| 117 | } |
||
| 118 | } |
||
| 119 | } |
||
| 120 | }); |
||
| 121 | master = new w2grid({ |
||
| 122 | name: "master", |
||
| 123 | box: "#master", |
||
| 124 | header: "Categories", |
||
| 125 | recordHeight: 100, |
||
| 126 | show: { |
||
| 127 | header: true, |
||
| 128 | footer: true, |
||
| 129 | toolbar: true, |
||
| 130 | //toolbarAdd: true, |
||
| 131 | //toolbarEdit: true |
||
| 132 | }, |
||
| 133 | columns: [ |
||
| 134 | { field: "recid", hidden: true }, |
||
| 135 | { |
||
| 136 | field: "Picture", text: "Picture", sortable: false, size: "300px", |
||
| 137 | render(record, extra) { |
||
| 138 | var imgPath = "https://lh3.googleusercontent.com/d/" + record.Picture; |
||
| 139 | return "<img src='" + imgPath + "=w300-h200' class='category-img' />"; |
||
| 140 | } |
||
| 141 | }, |
||
| 142 | { field: "CategoryName", text: "Category Name", size: "50%", sortable: true }, |
||
| 143 | { field: "Description", text: "Description", size: "50%" }, |
||
| 144 | ], |
||
| 145 | searches: [ |
||
| 146 | { type: "text", field: "CategoryName", label: "Category Name" }, |
||
| 147 | { type: "text", field: "Description", label: "Description" } |
||
| 148 | ], |
||
| 149 | onClick(event) { |
||
| 150 | let record = this.get(event.detail.recid); |
||
| 151 | |||
| 152 | if (record) { |
||
| 153 | // Do nothing |
||
| 154 | } |
||
| 155 | }, |
||
| 156 | onAdd: function (event) { |
||
| 157 | // Do nothing |
||
| 158 | }, |
||
| 159 | onEdit: function (event) { |
||
| 160 | //let recid = event.detail.recid; |
||
| 161 | //recid && window.open("<?= base ?>?url=/form/fast-sale/" + recid, "_blank"); |
||
| 162 | }, |
||
| 163 | }); |
||
| 164 | |||
| 165 | if (sid) { |
||
| 166 | google.script.run |
||
| 167 | .withSuccessHandler(onCheckSidSuccess) |
||
| 168 | .withFailureHandler(onInvalidSid) |
||
| 169 | .checkSid(sid); |
||
| 170 | } |
||
| 171 | else { |
||
| 172 | onInvalidSid(); |
||
| 173 | } |
||
| 174 | }); |
||
| 175 | |||
| 176 | function onInvalidSid(err) { |
||
| 177 | if (err) { |
||
| 178 | notifier.warning(err.message); |
||
| 179 | } |
||
| 180 | else { |
||
| 181 | let url = "<?!= base ?>?url=/form/login&callback=<?!= url ?>"; |
||
| 182 | notifier.modal(`<b>You need to login to access this page.</b><br><a href="${url}">👉 <b>Login</b></a>`) |
||
| 183 | } |
||
| 184 | } |
||
| 185 | |||
| 186 | function onCheckSidSuccess(valid) { |
||
| 187 | if (valid) { |
||
| 188 | google.script.run.withSuccessHandler((ds) => { |
||
| 189 | $ds = ds; |
||
| 190 | google.script.run.withSuccessHandler((parents => { |
||
| 191 | master.clear(); |
||
| 192 | master.add(parents); |
||
| 193 | })) |
||
| 194 | .runSql("Categories", "label A 'recid' options no_format"); |
||
| 195 | }) |
||
| 196 | .loadDatasources("<?!= datasource ?>"); |
||
| 197 | |||
| 198 | } else { |
||
| 199 | onInvalidSid(); |
||
| 200 | } |
||
| 201 | } |
||
| 202 | </script> |
||
| 203 | |||
| 204 | </body> |
||
| 205 | |||
| 206 | </html> |
||
| 207 | ``` |
||
| 208 | |||
| 209 | ## Giải thích Code |
||
| 210 | |||
| 211 | Form List Employees sử dụng cácthư viện sau: |
||
| 212 | - [jQuery](https://jquery.com/) để khởi tạo grid sau khi page load xong. |
||
| 213 | - [localstorage-slim](https://github.com/digitalfortress-tech/localstorage-slim) để đọc sid & email để bỏ qua bước login nếu trước đó đã login thành công. Trường hợp login không thành công thì sẽ thông báo và điều hướng đến trang login. |
||
| 214 | - [Notyf](https://carlosroso.com/notyf/) hiển thị thông báo. |
||
| 215 | - [w2ui](https://w2ui.com/web/home) cung cấp các thành phần UI cơ bản và nâng cao, ví dụ: toolbar và grid, dialog... |
||
| 216 | - Các thư viện đều được load từ CDN để tối ưu tốc độ, đơn giản hóa HTML Templated. Các bạn cần có kiến thức trong phần yêu cầu để hiểu logic của code JS + templated nhúng trong page. |
||
| 217 | - Trong page này gọi đến |
||
| 218 | - Hàm backend **checkSid** sid lưu trữ có khớp với giá trị trên server, nếu đúng thì sẽ sử dụng email trả về, còn sai sẽ điều hướng đến trang login |
||
| 219 | - Hàm backend **loadDatasources** để tải các dữ liệu tham chiếu phía client, ví dụ danh sách Products |
||
| 220 | - Hàm backend **runSql** thực hiện query nâng cao trên Datasource chỉ định, ví dụ chỉ hiển thị ra danh sách Orders được tạo bởi Saler đang login |
||
| 221 | |||
| 222 | ## Demo |
||
| 223 | - Link: https://script.google.com/macros/s/AKfycbwIjB-hULVZdfCtsXFPg4Af_8WoKx2AFf85KMVwnsO_WkeAXW3zarT6vZNFVfwccz1_sA/exec?url=/form/employees |
||
| 224 | - Account: user@northwind.com |
||
| 225 | - Password: user |