tieptk/admin_hura_8
2
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Tieptk
2025-02-10 16:51:19 +07:00
parent cc0f195bee
commit 961e92b965
11 changed files with 302 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/script/global.js
View File

@@ -30,9 +30,6 @@ const AdminFunction = (() => {
$("#js-status-hottype-" + e).html("");
}, 1e3);
}
function a(e) {
$(e).select2();
}
function i(e) {
$("#overlay").addClass("active"), $(".status-notificatiom").addClass("active"), !0 === e ? $(".status-notificatiom .content").html('<i class="fa fa-check"></i> <b>Cập nhật thành công</b>\n <p>Đơn hàng #000-368 đã được cập nhật thành công</p>') : $(".status-notificatiom .content").html('<i class="fa-solid fa-triangle-exclamation"></i> <b>Lỗi cập nhật</b><p>Có một số vấn đề với hoạt động của bạn.</p>');
}

103
assets/script/pc_style.css
View File

@@ -1,4 +1,5 @@
@charset "UTF-8";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
*,
::after,
::before {
@@ -128,34 +129,22 @@ a {
width: 16%;
padding: 20px 0;
line-height: 20px;
}
.admin-menu-container.active {
overflow-y: auto;
overflow-x: hidden;
}
.admin-menu-container a {
color: #fff;
}
.admin-menu-container .menu-logo {
display: table;
margin-bottom: 50px;
margin-bottom: 25px;
margin-left: 16px;
}
.admin-menu-container .menu-logo img {
height: 22px;
}
.admin-menu-container details[open] svg {
transform: rotate(90deg);
}
.admin-menu-container details[open] summary {
background: #81b5e4;
}
.admin-menu-container details[open] summary a {
font-weight: 700;
}
.admin-menu-container details[open] .icons {
filter: brightness(100);
}
.admin-menu-container details[open] .fa-angle-right {
transform: rotate(90deg);
}
.admin-menu-container svg {
position: absolute;
right: 16px;
@@ -173,7 +162,7 @@ a {
.admin-menu-container .item:hover .icons {
filter: brightness(100);
}
.admin-menu-container .item:hover .sub-hover {
.admin-menu-container .item:hover .hover-menu {
display: block;
}
.admin-menu-container .item .icons {
@@ -184,8 +173,17 @@ a {
.admin-menu-container .title-main {
width: 100%;
}
.admin-menu-container .box-item:hover .hover-menu {
visibility: visible;
opacity: 1;
left: calc(100% + 10px);
}
.admin-menu-container .box-item:hover .hover-menu::before {
display: block;
}
.admin-menu-container .sub-menu {
position: relative;
display: none;
}
.admin-menu-container .sub-menu a {
display: block;
@@ -204,6 +202,73 @@ a {
.admin-menu-container .sub-menu a:last-child {
margin: 0;
}
.admin-menu-container .hover-menu {
padding: 10px 22px 10px 15px;
border-radius: 6px;
background: #004e99;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: -1;
transition: 0.2s all;
position: absolute;
left: calc(100% + 30px);
top: 0;
opacity: 0;
visibility: hidden;
min-width: 200px;
z-index: 999;
max-height: 400px;
overflow: auto;
}
.admin-menu-container .hover-menu.bottom {
bottom: -30px;
top: unset;
}
.admin-menu-container .hover-menu::before {
position: absolute;
left: -15px;
top: 0;
width: 30px;
height: 100%;
content: "";
display: none;
}
.admin-menu-container .hover-menu a {
display: block;
line-height: 18px;
position: relative;
padding-bottom: 12px;
padding-left: 20px;
}
.admin-menu-container .hover-menu a::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #79b0e2;
position: absolute;
top: 4px;
left: 0;
z-index: 9;
}
.admin-menu-container .hover-menu a::after {
content: "";
width: 1px;
height: 100%;
background: #fff;
position: absolute;
top: 4px;
left: 4px;
}
.admin-menu-container .hover-menu a:last-child {
padding-bottom: 0;
}
.admin-menu-container .hover-menu a:last-child::after {
display: none;
}
.admin-menu-container .hover-menu a:hover {
text-decoration: underline;
}
.admin-menu-container .icon-home {
background-position: -9px -7px;
}
@@ -263,10 +328,6 @@ a {
.admin-content-container {
width: calc(100% - 50px);
}
.admin-content-container.show-large-menu {
width: 82%;
margin-left: 0;
}
.admin-content-container .note-list {
min-width: 144px;
}

2
assets/script/pc_style.css.map
View File

File diff suppressed because one or more lines are too long

113
assets/script/pc_style.scss
View File

@@ -1,3 +1,5 @@
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
*,
::after,
::before {
@@ -111,37 +113,21 @@ a {
width: 16%;
padding: 20px 0;
line-height: 20px;
&.active {
overflow-y: auto;
overflow-x: hidden;
}
a {
color: #fff;
}
.menu-logo {
display: table;
margin-bottom: 50px;
margin-bottom: 25px;
margin-left: 16px;
img {
height: 22px;
}
}
details {
&[open] {
svg {
transform: rotate(90deg);
}
summary {
background: #81b5e4;
a {
font-weight: 700;
}
}
.icons {
filter: brightness(100);
}
.fa-angle-right {
transform: rotate(90deg);
}
}
}
svg {
position: absolute;
@@ -160,7 +146,7 @@ a {
.icons {
filter: brightness(100);
}
.sub-hover {
.hover-menu {
display: block;
}
}
@@ -174,8 +160,21 @@ a {
.title-main {
width: 100%;
}
.box-item {
&:hover {
.hover-menu {
visibility: visible;
opacity: 1;
left: calc(100% + 10px);
&::before {
display: block;
}
}
}
}
.sub-menu {
position: relative;
display: none;
a {
display: block;
padding: 10px 10px 10px 45px;
@@ -194,6 +193,74 @@ a {
}
}
}
.hover-menu {
padding: 10px 22px 10px 15px;
border-radius: 6px;
background: #004e99;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: -1;
transition: 0.2s all;
position: absolute;
left: calc(100% + 30px);
top: 0;
opacity: 0;
visibility: hidden;
min-width: 200px;
z-index: 999;
max-height: 400px;
overflow: auto;
&.bottom {
bottom: -30px;
top: unset;
}
&::before {
position: absolute;
left: -15px;
top: 0;
width: 30px;
height: 100%;
content: "";
display: none;
}
a {
display: block;
line-height: 18px;
position: relative;
padding-bottom: 12px;
padding-left: 20px;
&::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #79b0e2;
position: absolute;
top: 4px;
left: 0;
z-index: 9;
}
&::after {
content: "";
width: 1px;
height: 100%;
background: #fff;
position: absolute;
top: 4px;
left: 4px;
}
&:last-child {
padding-bottom: 0;
&::after {
display: none;
}
}
&:hover {
text-decoration: underline;
}
}
}
.icon-home {
background-position: -9px -7px;
}
@@ -253,10 +320,6 @@ a {
.admin-content-container {
width: calc(100% - 50px);
&.show-large-menu {
width: 82%;
margin-left: 0;
}
.note-list {
min-width: 144px;
a {

44
assets/typescript/main.js
View File

@@ -1,10 +1,10 @@
"use strict";
const AdminFunctions = (() => {
var AdminFunctions = (function () {
function toggleMenuVisibility(hideLargeMenu) {
const contentContainer = $('#js-admin-content-container');
const largeMenu = $('#js-menu-big');
const smallMenu = $('#js-menu-small');
const searchForm = $('#js-form-search');
var contentContainer = $('#js-admin-content-container');
var largeMenu = $('#js-menu-big');
var smallMenu = $('#js-menu-small');
var searchForm = $('#js-form-search');
contentContainer.toggleClass('show-large-menu', !hideLargeMenu);
largeMenu.toggleClass('hidden', hideLargeMenu);
smallMenu.toggleClass('hidden', !hideLargeMenu);
@@ -13,15 +13,19 @@ const AdminFunctions = (() => {
localStorage.removeItem(hideLargeMenu ? 'menu_small' : 'menu_big');
}
function debounce(func, wait, immediate) {
let timeout = null;
return function (...args) {
const context = this;
const later = function () {
var timeout = null;
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var context = this;
var later = function () {
timeout = null;
if (!immediate)
func.apply(context, args);
};
const callNow = immediate && !timeout;
var callNow = immediate && !timeout;
if (timeout !== null) {
clearTimeout(timeout);
}
@@ -31,9 +35,9 @@ const AdminFunctions = (() => {
};
}
function addProductToCategory(productId) {
const statusElement = $('#status_' + productId);
var statusElement = $('#status_' + productId);
statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
setTimeout(() => {
setTimeout(function () {
statusElement.html('');
}, 1000);
}
@@ -46,20 +50,16 @@ const AdminFunctions = (() => {
});
}
function markProductAsHot(productId) {
const statusElement = $('#js-status-hottype-' + productId);
var statusElement = $('#js-status-hottype-' + productId);
statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
setTimeout(() => {
setTimeout(function () {
statusElement.html('');
}, 1000);
}
function initializeSearchDropdown(selector) {
$(selector).select2();
}
return {
toggleMenuVisibility,
addProductToCategory,
searchSuggestions,
initializeSearchDropdown,
markProductAsHot
toggleMenuVisibility: toggleMenuVisibility,
addProductToCategory: addProductToCategory,
searchSuggestions: searchSuggestions,
markProductAsHot: markProductAsHot
};
})();

6
assets/typescript/main.ts
View File

@@ -4,7 +4,6 @@ interface AdminFunctions {
toggleMenuVisibility(hideLargeMenu: boolean): void;
addProductToCategory(productId: string): void;
searchSuggestions(inputSelector: string): void;
initializeSearchDropdown(selector: string): void;
markProductAsHot(productId: string): void;
}
@@ -68,15 +67,10 @@ const AdminFunctions: AdminFunctions = (() => {
}, 1000);
}
function initializeSearchDropdown(selector: string): void {
$(selector).select2();
}
return {
toggleMenuVisibility,
addProductToCategory,
searchSuggestions,
initializeSearchDropdown,
markProductAsHot
};
})();

13
template/javascript/global.html
View File

@@ -1,7 +1,5 @@
<script>
$(document).ready(function () {
// Popup
Fancybox.bind("[data-fancybox]", {});
// Sự kiện click để hiển thị menu
$('#js-show-menu').click(function () {
@@ -19,10 +17,6 @@
AdminFunctions.searchSuggestions('#js-input-search')
AdminFunctions.initializeSearchDropdown('#js-assign-admin');
AdminFunctions.initializeSearchDropdown('#js-order-status-select');
})
function formatCurrency(a) {
@@ -31,4 +25,11 @@
b = b.substring(0, len - 3);
return b;
}
function toggleSubMenu(id) {
const submenu = $('#' + id);
submenu.toggle();
$('#js-menu-big').toggleClass('active');
}
</script>

1
template/javascript/product_form.html
View File

@@ -37,5 +37,4 @@
});
$("#brandSelect").select2();
</script>

16
template/order/detail.html
View File

@@ -51,8 +51,9 @@
<td> Địa chỉ nhận hàng </td>
<td>
<span> Kiến Hưng, Quận Hà Đông, Hà Nội </span>
<a href="#js-update-shipping-address" data-fancybox title="Cập nhật địa chỉ nhận hàng"
class="icons icon-edit inline-block" style="background-position: -111px -86px;"></a>
<a onclick="js_update_shipping_address.showModal()" href="javascript:void(0)"
title="Cập nhật địa chỉ nhận hàng" class="icons icon-edit inline-block"
style="background-position: -111px -86px;"></a>
</td>
</tr>
@@ -329,7 +330,8 @@
</div>
<!-- // Cập nhật địa chỉ nhận hàng -->
<div id="js-update-shipping-address" class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px]" style="display: none;">
<dialog id="js_update_shipping_address" class="modal">
<div class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px] bg-white modal-box">
<p class="leading-[20px] text-[16px] font-bold mb-[20px]"> Cập nhật địa chỉ nhận hàng </p>
<table class="w-[100%]">
@@ -399,10 +401,14 @@
</tr>
</table>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<!-- // Cập nhật địa chỉ thanh toán -->
<div id="js-update-payment" class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px]" style="display: none;">
<dialog id="js_update_payment" class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px]" style="display: none;">
<p class="leading-[20px] text-[16px] font-bold mb-[15px]"> Cập nhật địa chỉ thanh toán </p>
<label class="inline-flex cursor-pointer">
@@ -482,7 +488,7 @@
</tr>
</table>
</div>
</div>
</dialog>
<!-- // Cập nhật phí ship cho đơn hàng -->

5
template/product/form.html
View File

@@ -114,3 +114,8 @@
</div>
</div>
</div>
<input type="checkbox" checked="checked"
class="checkbox border-orange-400 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange] checked:border-indigo-800" />
<input type="checkbox" checked="checked" class="checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />

62
template/theme.html
View File

@@ -11,13 +11,9 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<!-- <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" media="screen" href="{{ 'full.min.css' | asset_url }}?v12.11" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" media="screen" href="{{ 'fancybox.css' | asset_url }}" />
<link rel="stylesheet" media="screen" href="{{ 'select2.css' | asset_url }}?v2.1" />
<link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v2024.19" />
<script src="{{ 'tailwindcss.js' | asset_url }}"></script>
</head>
@@ -29,12 +25,12 @@
<div class="admin-global-container">
<!-- Menu full -->
<div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh]" id="js-menu-big">
<div class="admin-menu-container box-menu fixed top-0 left-0 h-[100vh] z-[999]" id="js-menu-big">
<a href="" class="menu-logo">
<img src="{{ 'logo.png' | asset_url }}" />
</a>
<div class="menu-list m-[50px_5px]">
<div class="menu-list m-[25px_5px]">
<a href="/"
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px] {% if global.module == 'home' %} active {% endif %}">
<i class="icons icon-home"></i>
@@ -45,9 +41,9 @@
{% assign _type = _category[0] %}
{% assign _menuArray = _category[1].menu %}
{% if _category[1].enable == 1 %}
<details class="relative w-[100%]" {% if _type==global.module %} open {% endif %}>
<summary class="item flex items-center justify-between cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]
{% if _type == global.module %} active {% endif %}">
<div class="relative w-[100%] box-item" {% if _type==global.module %} open {% endif %}>
<div class="item flex items-center justify-between cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]
{% if _type == global.module %} active {% endif %}" onclick="toggleSubMenu('{{ _type }}')">
<div class="flex items-center">
{% if _type == 'order' %} <i class="icons w-[20px] h-[20px] mr-[13px] icon-order"></i>
{% elsif _type == 'product' %} <i
@@ -74,47 +70,38 @@
</div>
<i class="fa-solid fa-chevron-right"></i>
</summary>
</div>
<div class="sub-menu">
<div class="sub-menu" id="{{ _type }}">
{% for _item in _menuArray %}
<a href="{{ _item.url }}"
class="p-[8px_16px] flex items-center {% if _item.view == global.view and _item.module == global.module %}current {% endif %}">
{{_item.name }} </a>
{% endfor %}
</div>
</details>
{% endif %}
<div class="hover-menu {% if _type == 'system' or _type == 'report' %}bottom{% endif %}">
{% for _item in _menuArray %}
<a href="{{ _item.url }}"
class="flex items-center {% if _item.view == global.view and _item.module == global.module %}current {% endif %}">
{{_item.name }} </a>
{% endfor %}
</div>
<div class="menu-list">
<p style="color: #81B5E4;margin: 0 0 10px;font-weight: 700;padding: 0 16px;">TÀI KHOẢN</p>
</div>
{% endif %}
{% endfor %}
<a href=""
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
<i class="icons w-[20px] h-[20px] mr-[13px] icon-account"></i>
<span class="title">Quản lý tài khoản </span>
</a>
<a href=""
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
<i class="icons w-[20px] h-[20px] mr-[13px] icon-settings"></i>
<span class="title"> Cài đặt </span>
</a>
<a href=""
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
<i class="icons w-[20px] h-[20px] mr-[13px] icon-support"></i>
<span class="title"> Hỗ trợ </span>
</a>
<a href=""
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
<i class="icons w-[20px] h-[20px] mr-[13px] icon-account"></i>
<span class="title"> Quản lý tài khoản </span>
</a>
</div>
<a href=""
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
<i class="icons w-[20px] h-[20px] mr-[13px] icon-logout"></i>
<span class="title"> Thoát quản trị </span>
</a>
</div>
<!-- Menu collapse -->
@@ -226,7 +213,7 @@
</div> -->
<div class="admin-content-container ml-[50px]" id="js-admin-content-container">
<div class="admin-content-container ml-[245px]" id="js-admin-content-container">
<!-- Header -->
<div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">
<form class="max-w-[420px] relative w-[100%] menu-hide" id="js-form-search">
@@ -316,9 +303,6 @@
</div>
<script src="{{ 'jquery.js' | asset_url }}"></script>
<script src="{{ 'tailwindcss.js' | asset_url }}"></script>
<script src="{{ 'fancybox.js' | asset_url }}"></script>
<script src="{{ 'select2.js' | asset_url }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/datepicker.min.js"></script>
<script src="/assets/typescript/main.js?v=1.111"></script>