Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 miko
|
da92e21c2a | ||
 Grey
|
5b40053903 |
@@ -10,7 +10,6 @@ CREATE TABLE IF NOT EXISTS users (
|
||||
email VARCHAR(160) NOT NULL UNIQUE,
|
||||
whatsapp VARCHAR(30) NOT NULL,
|
||||
password_hash VARCHAR(255) NOT NULL,
|
||||
role ENUM('user', 'superadmin') NOT NULL DEFAULT 'user',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
|
||||
+8
-6
@@ -15,17 +15,19 @@
|
||||
"cors": "latest",
|
||||
"dotenv": "latest",
|
||||
"express": "latest",
|
||||
"gsap": "^3.15.0",
|
||||
"jsonwebtoken": "latest",
|
||||
"lucide-vue-next": "latest",
|
||||
"motion-v": "^1.10.3",
|
||||
"multer": "latest",
|
||||
"mysql2": "latest",
|
||||
"vite": "latest",
|
||||
"vue": "latest",
|
||||
"vue-router": "latest",
|
||||
"lucide-vue-next": "latest",
|
||||
"multer": "latest",
|
||||
"mysql2": "latest"
|
||||
"vue-router": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.4.17",
|
||||
"autoprefixer": "latest",
|
||||
"postcss": "latest",
|
||||
"autoprefixer": "latest"
|
||||
"tailwindcss": "^3.4.17"
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+98
-2
@@ -23,12 +23,18 @@ importers:
|
||||
express:
|
||||
specifier: latest
|
||||
version: 5.2.1
|
||||
gsap:
|
||||
specifier: ^3.15.0
|
||||
version: 3.15.0
|
||||
jsonwebtoken:
|
||||
specifier: latest
|
||||
version: 9.0.3
|
||||
lucide-vue-next:
|
||||
specifier: latest
|
||||
version: 1.0.0(vue@3.5.34)
|
||||
motion-v:
|
||||
specifier: ^1.10.3
|
||||
version: 1.10.3(@vueuse/core@14.3.0(vue@3.5.34))(vue@3.5.34)
|
||||
multer:
|
||||
specifier: latest
|
||||
version: 2.1.1
|
||||
@@ -235,6 +241,9 @@ packages:
|
||||
'@types/node@25.7.0':
|
||||
resolution: {integrity: sha512-z+pdZyxE+RTQE9AcboAZCb4otwcrvgHD+GlBpPgn0emDVt0ohrTMhAwlr2Wd9nZ+nihhYFxO2pThz3C5qSu2Eg==}
|
||||
|
||||
'@types/web-bluetooth@0.0.21':
|
||||
resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
|
||||
|
||||
'@vitejs/plugin-vue@6.0.6':
|
||||
resolution: {integrity: sha512-u9HHgfrq3AjXlysn0eINFnWQOJQLO9WN6VprZ8FXl7A2bYisv3Hui9Ij+7QZ41F/WYWarHjwBbXtD7dKg3uxbg==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
@@ -289,6 +298,19 @@ packages:
|
||||
'@vue/shared@3.5.34':
|
||||
resolution: {integrity: sha512-24uqU4OIiX29ryC3MeWid/Xf2fa2EFRUVLb77nRhk+UrTVrh/XiGtFAFmJBAtBRbjwNdsPRP+jj/OL27Eg1NDA==}
|
||||
|
||||
'@vueuse/core@14.3.0':
|
||||
resolution: {integrity: sha512-aHfz47g0ZhMtTVHmIzMVpJy8ePhhOy68GY5bv110+5DVtZ+W7BsOx+m61UNQqfrWyPztIHIanWa3E2tib3NFIw==}
|
||||
peerDependencies:
|
||||
vue: ^3.5.0
|
||||
|
||||
'@vueuse/metadata@14.3.0':
|
||||
resolution: {integrity: sha512-BwxmbAzwAVF50+MW57GXOUEV61nFBGnlBvrTqj49PqWJu3uw7hdu72ztXeZ33RdZtDY6kO+bfCAE1PCn88Tktw==}
|
||||
|
||||
'@vueuse/shared@14.3.0':
|
||||
resolution: {integrity: sha512-bZpge9eSXwa4ToSiqJ7j6KRwhAsneMFoSz3LMWKQDkqimm3D/tbFlrklrs/IOqC8tEcYmXQZJ6N0UrjhBirVCg==}
|
||||
peerDependencies:
|
||||
vue: ^3.5.0
|
||||
|
||||
accepts@2.0.0:
|
||||
resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
|
||||
engines: {node: '>= 0.6'}
|
||||
@@ -554,6 +576,20 @@ packages:
|
||||
fraction.js@5.3.4:
|
||||
resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
|
||||
|
||||
framer-motion@12.39.0:
|
||||
resolution: {integrity: sha512-+vnLfzrv0MzjLzNl+nvNvR7jdg3q4cxxjz/YvzfifHl0TREtL00cs1RoMTxs+1PzLiEqZGV6gYsBY0oEAYZ24w==}
|
||||
peerDependencies:
|
||||
'@emotion/is-prop-valid': '*'
|
||||
react: ^18.0.0 || ^19.0.0
|
||||
react-dom: ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@emotion/is-prop-valid':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
|
||||
fresh@2.0.0:
|
||||
resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
|
||||
engines: {node: '>= 0.8'}
|
||||
@@ -589,6 +625,9 @@ packages:
|
||||
resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
gsap@3.15.0:
|
||||
resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
|
||||
|
||||
has-symbols@1.1.0:
|
||||
resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@@ -597,6 +636,9 @@ packages:
|
||||
resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
hey-listen@1.0.8:
|
||||
resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
|
||||
|
||||
hookable@5.5.3:
|
||||
resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
|
||||
|
||||
@@ -833,6 +875,18 @@ packages:
|
||||
mlly@1.8.2:
|
||||
resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
|
||||
|
||||
motion-dom@12.39.0:
|
||||
resolution: {integrity: sha512-Xn7aAcGDhco/JZTXOub64UmaYn73C6J1Po7Fk+8EvkJsNGTqfhon6UJY53vJKXW5v5Zl8HrYsVxv6oPXeGoGLQ==}
|
||||
|
||||
motion-utils@12.39.0:
|
||||
resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
|
||||
|
||||
motion-v@1.10.3:
|
||||
resolution: {integrity: sha512-9Ewo/wwGv7FO3PqYJpllBF/Efc7tbeM1iinVrM73s0RUQrnXHwMZCaRX98u4lu0PQCrZghPPfCsQ14pWKIEbnQ==}
|
||||
peerDependencies:
|
||||
'@vueuse/core': '>=10.0.0'
|
||||
vue: '>=3.0.0'
|
||||
|
||||
ms@2.1.3:
|
||||
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
||||
|
||||
@@ -1398,6 +1452,8 @@ snapshots:
|
||||
dependencies:
|
||||
undici-types: 7.21.0
|
||||
|
||||
'@types/web-bluetooth@0.0.21': {}
|
||||
|
||||
'@vitejs/plugin-vue@6.0.6(vite@8.0.12(@types/node@25.7.0)(jiti@1.21.7)(yaml@2.9.0))(vue@3.5.34)':
|
||||
dependencies:
|
||||
'@rolldown/pluginutils': 1.0.0-rc.13
|
||||
@@ -1481,6 +1537,19 @@ snapshots:
|
||||
|
||||
'@vue/shared@3.5.34': {}
|
||||
|
||||
'@vueuse/core@14.3.0(vue@3.5.34)':
|
||||
dependencies:
|
||||
'@types/web-bluetooth': 0.0.21
|
||||
'@vueuse/metadata': 14.3.0
|
||||
'@vueuse/shared': 14.3.0(vue@3.5.34)
|
||||
vue: 3.5.34
|
||||
|
||||
'@vueuse/metadata@14.3.0': {}
|
||||
|
||||
'@vueuse/shared@14.3.0(vue@3.5.34)':
|
||||
dependencies:
|
||||
vue: 3.5.34
|
||||
|
||||
accepts@2.0.0:
|
||||
dependencies:
|
||||
mime-types: 3.0.2
|
||||
@@ -1744,6 +1813,12 @@ snapshots:
|
||||
|
||||
fraction.js@5.3.4: {}
|
||||
|
||||
framer-motion@12.39.0:
|
||||
dependencies:
|
||||
motion-dom: 12.39.0
|
||||
motion-utils: 12.39.0
|
||||
tslib: 2.8.1
|
||||
|
||||
fresh@2.0.0: {}
|
||||
|
||||
fsevents@2.3.3:
|
||||
@@ -1783,12 +1858,16 @@ snapshots:
|
||||
|
||||
gopd@1.2.0: {}
|
||||
|
||||
gsap@3.15.0: {}
|
||||
|
||||
has-symbols@1.1.0: {}
|
||||
|
||||
hasown@2.0.3:
|
||||
dependencies:
|
||||
function-bind: 1.1.2
|
||||
|
||||
hey-listen@1.0.8: {}
|
||||
|
||||
hookable@5.5.3: {}
|
||||
|
||||
http-errors@2.0.1:
|
||||
@@ -1980,6 +2059,24 @@ snapshots:
|
||||
pkg-types: 1.3.1
|
||||
ufo: 1.6.4
|
||||
|
||||
motion-dom@12.39.0:
|
||||
dependencies:
|
||||
motion-utils: 12.39.0
|
||||
|
||||
motion-utils@12.39.0: {}
|
||||
|
||||
motion-v@1.10.3(@vueuse/core@14.3.0(vue@3.5.34))(vue@3.5.34):
|
||||
dependencies:
|
||||
'@vueuse/core': 14.3.0(vue@3.5.34)
|
||||
framer-motion: 12.39.0
|
||||
hey-listen: 1.0.8
|
||||
motion-dom: 12.39.0
|
||||
vue: 3.5.34
|
||||
transitivePeerDependencies:
|
||||
- '@emotion/is-prop-valid'
|
||||
- react
|
||||
- react-dom
|
||||
|
||||
ms@2.1.3: {}
|
||||
|
||||
muggle-string@0.4.1: {}
|
||||
@@ -2323,8 +2420,7 @@ snapshots:
|
||||
|
||||
ts-interface-checker@0.1.13: {}
|
||||
|
||||
tslib@2.8.1:
|
||||
optional: true
|
||||
tslib@2.8.1: {}
|
||||
|
||||
type-is@1.6.18:
|
||||
dependencies:
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
+3
-45
@@ -58,8 +58,7 @@ function publicUser(user) {
|
||||
id: user.id,
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
whatsapp: user.whatsapp,
|
||||
role: user.role || "user"
|
||||
whatsapp: user.whatsapp
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,7 +116,7 @@ app.post("/api/auth/register", async (req, res, next) => {
|
||||
[name, email.toLowerCase(), whatsapp, passwordHash]
|
||||
)
|
||||
|
||||
const user = { id: result.insertId, name, email: email.toLowerCase(), whatsapp, role: "user" }
|
||||
const user = { id: result.insertId, name, email: email.toLowerCase(), whatsapp }
|
||||
res.status(201).json({ token: signUser(user), user: publicUser(user) })
|
||||
} catch (error) {
|
||||
if (error.code === "ER_DUP_ENTRY") {
|
||||
@@ -153,7 +152,7 @@ app.post("/api/auth/login", async (req, res, next) => {
|
||||
|
||||
app.get("/api/auth/me", auth, async (req, res, next) => {
|
||||
try {
|
||||
const [rows] = await pool.query("SELECT id, name, email, whatsapp, role FROM users WHERE id = ?", [req.user.id])
|
||||
const [rows] = await pool.query("SELECT id, name, email, whatsapp FROM users WHERE id = ?", [req.user.id])
|
||||
if (!rows[0]) {
|
||||
res.status(404).json({ message: "User tidak ditemukan." })
|
||||
return
|
||||
@@ -262,28 +261,6 @@ app.delete("/api/products/:id", auth, async (req, res, next) => {
|
||||
}
|
||||
})
|
||||
|
||||
app.delete("/api/admin/products/:id", auth, superadminOnly, async (req, res, next) => {
|
||||
try {
|
||||
const product = await findProductById(req.params.id)
|
||||
|
||||
if (!product) {
|
||||
res.status(404).json({ message: "Produk tidak ditemukan." })
|
||||
return
|
||||
}
|
||||
|
||||
await pool.query("DELETE FROM products WHERE id = ?", [req.params.id])
|
||||
|
||||
if (product.image.startsWith("/uploads/")) {
|
||||
fs.rm(path.join(uploadsDir, path.basename(product.image)), { force: true }, () => {})
|
||||
}
|
||||
|
||||
res.json({ message: "Produk berhasil dihapus oleh superadmin." })
|
||||
} catch (error) {
|
||||
next(error)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
app.use((error, req, res, next) => {
|
||||
if (error instanceof multer.MulterError) {
|
||||
res.status(400).json({ message: "Upload gagal. Ukuran foto maksimal 3MB." })
|
||||
@@ -302,22 +279,3 @@ app.use((error, req, res, next) => {
|
||||
app.listen(port, () => {
|
||||
console.log(`SecondTech API berjalan di http://localhost:${port}`)
|
||||
})
|
||||
|
||||
|
||||
async function superadminOnly(req, res, next) {
|
||||
try {
|
||||
const [rows] = await pool.query(
|
||||
"SELECT role FROM users WHERE id = ?",
|
||||
[req.user.id]
|
||||
)
|
||||
|
||||
if (!rows[0] || rows[0].role !== "superadmin") {
|
||||
res.status(403).json({ message: "Hanya superadmin yang boleh mengakses fitur ini." })
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
} catch (error) {
|
||||
next(error)
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 826 KiB |
@@ -1,25 +1,8 @@
|
||||
<template>
|
||||
<aside class="card p-4">
|
||||
<div class="mb-6">
|
||||
<p class="text-xs font-bold uppercase tracking-wider text-slate-500">
|
||||
Menu User
|
||||
</p>
|
||||
<p class="text-xs font-bold uppercase tracking-wider text-slate-500">Menu User</p>
|
||||
<h2 class="mt-1 text-lg font-extrabold">Dashboard</h2>
|
||||
|
||||
<div v-if="currentUser" class="mt-4 rounded-xl bg-slate-50 p-3">
|
||||
<p class="text-sm font-bold text-slate-800">
|
||||
{{ currentUser.name }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-slate-500">
|
||||
{{ currentUser.email }}
|
||||
</p>
|
||||
<p
|
||||
v-if="isSuperadmin"
|
||||
class="mt-2 inline-flex rounded-full bg-red-50 px-3 py-1 text-xs font-bold text-red-700"
|
||||
>
|
||||
Superadmin
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="grid gap-2">
|
||||
@@ -27,31 +10,18 @@
|
||||
<LayoutDashboard size="18" />
|
||||
Barang Saya
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="side-link" to="/jual">
|
||||
<PlusCircle size="18" />
|
||||
Jual Barang
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="side-link" to="/marketplace">
|
||||
<Store size="18" />
|
||||
Marketplace
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="side-link" to="/tersimpan">
|
||||
<Heart size="18" />
|
||||
Barang Tersimpan
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
v-if="isSuperadmin"
|
||||
class="side-link admin-link"
|
||||
to="/admin/products"
|
||||
>
|
||||
<ShieldCheck size="18" />
|
||||
Admin Marketplace
|
||||
</RouterLink>
|
||||
|
||||
<button class="side-link text-left" type="button" @click="logout">
|
||||
<LogOut size="18" />
|
||||
Logout
|
||||
@@ -61,66 +31,22 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import {
|
||||
Heart,
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
PlusCircle,
|
||||
ShieldCheck,
|
||||
Store
|
||||
} from "lucide-vue-next"
|
||||
import { clearAuth, fetchCurrentUser, getCurrentUser, getToken, setAuth } from "../utils"
|
||||
import { useRouter } from "vue-router"
|
||||
import { Heart, LayoutDashboard, LogOut, PlusCircle, Store } from "lucide-vue-next"
|
||||
import { clearAuth } from "../utils"
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const currentUser = ref(getCurrentUser())
|
||||
|
||||
const isSuperadmin = computed(() => {
|
||||
return currentUser.value?.role === "superadmin"
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
currentUser.value = getCurrentUser()
|
||||
}
|
||||
)
|
||||
|
||||
async function refreshCurrentUser() {
|
||||
if (!getToken()) return
|
||||
|
||||
try {
|
||||
const data = await fetchCurrentUser()
|
||||
setAuth({
|
||||
token: getToken(),
|
||||
user: data.user
|
||||
})
|
||||
currentUser.value = getCurrentUser()
|
||||
} catch {
|
||||
clearAuth()
|
||||
currentUser.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
clearAuth()
|
||||
router.push("/login")
|
||||
}
|
||||
|
||||
onMounted(refreshCurrentUser)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.side-link {
|
||||
@apply flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-100;
|
||||
}
|
||||
|
||||
.admin-link {
|
||||
@apply bg-red-50 text-red-700 hover:bg-red-100;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
@apply bg-brand-50 text-brand-700;
|
||||
}
|
||||
|
||||
@@ -18,41 +18,16 @@
|
||||
<RouterLink class="nav-link" to="/jual">Jual Barang</RouterLink>
|
||||
<RouterLink class="nav-link" to="/dashboard">Dashboard</RouterLink>
|
||||
<RouterLink class="nav-link" to="/tersimpan">Tersimpan</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
v-if="isSuperadmin"
|
||||
class="nav-link"
|
||||
to="/admin/products"
|
||||
>
|
||||
Admin Marketplace
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<div class="hidden items-center gap-3 md:flex">
|
||||
<template v-if="currentUser">
|
||||
<span class="text-sm font-bold text-slate-700">
|
||||
{{ currentUser.name }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="isSuperadmin"
|
||||
class="rounded-full bg-red-50 px-3 py-1 text-xs font-bold text-red-700"
|
||||
>
|
||||
Superadmin
|
||||
</span>
|
||||
|
||||
<button class="btn-secondary !px-4 !py-2" @click="logout">
|
||||
Logout
|
||||
</button>
|
||||
<span class="text-sm font-bold text-slate-700">{{ currentUser.name }}</span>
|
||||
<button class="btn-secondary !px-4 !py-2" @click="logout">Logout</button>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<RouterLink to="/login" class="btn-secondary !px-4 !py-2">
|
||||
Login
|
||||
</RouterLink>
|
||||
<RouterLink to="/register" class="btn-primary !px-4 !py-2">
|
||||
Register
|
||||
</RouterLink>
|
||||
<RouterLink to="/login" class="btn-secondary !px-4 !py-2">Login</RouterLink>
|
||||
<RouterLink to="/register" class="btn-primary !px-4 !py-2">Register</RouterLink>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -68,37 +43,12 @@
|
||||
<RouterLink class="mobile-link" to="/jual" @click="open=false">Jual Barang</RouterLink>
|
||||
<RouterLink class="mobile-link" to="/dashboard" @click="open=false">Dashboard</RouterLink>
|
||||
<RouterLink class="mobile-link" to="/tersimpan" @click="open=false">Tersimpan</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
v-if="isSuperadmin"
|
||||
class="mobile-link"
|
||||
to="/admin/products"
|
||||
@click="open = false"
|
||||
>
|
||||
Admin Marketplace
|
||||
</RouterLink>
|
||||
|
||||
<div v-if="currentUser" class="mt-2 grid gap-2">
|
||||
<div class="rounded-xl bg-slate-50 px-3 py-2">
|
||||
<p class="text-sm font-bold text-slate-800">{{ currentUser.name }}</p>
|
||||
<p class="text-xs text-slate-500">{{ currentUser.email }}</p>
|
||||
<p v-if="isSuperadmin" class="mt-1 text-xs font-bold text-red-700">
|
||||
Superadmin
|
||||
</p>
|
||||
<button class="btn-secondary !py-2 text-center" @click="logout">Logout</button>
|
||||
</div>
|
||||
|
||||
<button class="btn-secondary !py-2 text-center" @click="logout">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="mt-2 grid grid-cols-2 gap-2">
|
||||
<RouterLink to="/login" class="btn-secondary !py-2 text-center" @click="open = false">
|
||||
Login
|
||||
</RouterLink>
|
||||
<RouterLink to="/register" class="btn-primary !py-2 text-center" @click="open = false">
|
||||
Register
|
||||
</RouterLink>
|
||||
<RouterLink to="/login" class="btn-secondary !py-2 text-center" @click="open=false">Login</RouterLink>
|
||||
<RouterLink to="/register" class="btn-primary !py-2 text-center" @click="open=false">Register</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,20 +56,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from "vue"
|
||||
import { ref, watch } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { Cpu, Menu } from "lucide-vue-next"
|
||||
import { clearAuth, fetchCurrentUser, getCurrentUser, getToken, setAuth } from "../utils"
|
||||
import { clearAuth, getCurrentUser } from "../utils"
|
||||
|
||||
const open = ref(false)
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const currentUser = ref(getCurrentUser())
|
||||
|
||||
const isSuperadmin = computed(() => {
|
||||
return currentUser.value?.role === "superadmin"
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
@@ -127,41 +73,21 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
async function refreshCurrentUser() {
|
||||
if (!getToken()) return
|
||||
|
||||
try {
|
||||
const data = await fetchCurrentUser()
|
||||
setAuth({
|
||||
token: getToken(),
|
||||
user: data.user
|
||||
})
|
||||
currentUser.value = getCurrentUser()
|
||||
} catch {
|
||||
clearAuth()
|
||||
currentUser.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
clearAuth()
|
||||
currentUser.value = null
|
||||
open.value = false
|
||||
router.push("/login")
|
||||
}
|
||||
|
||||
onMounted(refreshCurrentUser)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav-link {
|
||||
@apply text-sm font-semibold text-slate-600 transition hover:text-brand-700;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
@apply text-brand-700;
|
||||
}
|
||||
|
||||
.mobile-link {
|
||||
@apply rounded-xl px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-100;
|
||||
}
|
||||
|
||||
+9
-36
@@ -98,40 +98,13 @@ export const products = [
|
||||
]
|
||||
|
||||
export const categories = [
|
||||
{
|
||||
name: "Semua",
|
||||
icon: "Boxes"
|
||||
},
|
||||
{
|
||||
name: "Laptop",
|
||||
icon: "Laptop"
|
||||
},
|
||||
{
|
||||
name: "PC",
|
||||
icon: "PcCase"
|
||||
},
|
||||
{
|
||||
name: "Monitor",
|
||||
icon: "Monitor"
|
||||
},
|
||||
{
|
||||
name: "Keyboard",
|
||||
icon: "Keyboard"
|
||||
},
|
||||
{
|
||||
name: "Router",
|
||||
icon: "Router"
|
||||
},
|
||||
{
|
||||
name: "Switch",
|
||||
icon: "Network"
|
||||
},
|
||||
{
|
||||
name: "Server",
|
||||
icon: "Server"
|
||||
},
|
||||
{
|
||||
name: "Access Point",
|
||||
icon: "Wifi"
|
||||
}
|
||||
"Semua",
|
||||
"Laptop",
|
||||
"PC",
|
||||
"Monitor",
|
||||
"Keyboard",
|
||||
"Router",
|
||||
"Switch",
|
||||
"Server",
|
||||
"Access Point"
|
||||
]
|
||||
|
||||
@@ -3,4 +3,8 @@ import App from "./App.vue"
|
||||
import router from "./router"
|
||||
import "./assets/main.css"
|
||||
|
||||
if (localStorage.getItem("secondtech_theme") === "dark") {
|
||||
document.documentElement.classList.add("dark")
|
||||
}
|
||||
|
||||
createApp(App).use(router).mount("#app")
|
||||
|
||||
+1
-14
@@ -8,8 +8,7 @@ import DashboardView from "../views/DashboardView.vue"
|
||||
import SavedView from "../views/SavedView.vue"
|
||||
import LoginView from "../views/LoginView.vue"
|
||||
import RegisterView from "../views/RegisterView.vue"
|
||||
import AdminProductsView from "../views/AdminProductsView.vue"
|
||||
import { getCurrentUser, getToken } from "../utils"
|
||||
import { getToken } from "../utils"
|
||||
|
||||
const routes = [
|
||||
{ path: "/", name: "home", component: HomeView },
|
||||
@@ -18,12 +17,6 @@ const routes = [
|
||||
{ path: "/jual", name: "sell-product", component: SellProductView, meta: { requiresAuth: true } },
|
||||
{ path: "/dashboard", name: "dashboard", component: DashboardView, meta: { requiresAuth: true } },
|
||||
{ path: "/tersimpan", name: "saved", component: SavedView, meta: { requiresAuth: true } },
|
||||
{
|
||||
path: "/admin/products",
|
||||
name: "admin-products",
|
||||
component: AdminProductsView,
|
||||
meta: { requiresAuth: true, requiresSuperadmin: true }
|
||||
},
|
||||
{ path: "/login", name: "login", component: LoginView },
|
||||
{ path: "/register", name: "register", component: RegisterView }
|
||||
]
|
||||
@@ -37,12 +30,6 @@ router.beforeEach((to) => {
|
||||
if (to.meta.requiresAuth && !getToken()) {
|
||||
return "/login"
|
||||
}
|
||||
|
||||
const user = getCurrentUser()
|
||||
|
||||
if (to.meta.requiresSuperadmin && user?.role !== "superadmin") {
|
||||
return "/dashboard"
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
+1
-19
@@ -31,14 +31,7 @@ export function getCurrentUser() {
|
||||
|
||||
export function setAuth({ token, user }) {
|
||||
localStorage.setItem("secondtech_token", token)
|
||||
|
||||
setLocal("secondtech_user", {
|
||||
id: user.id,
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
whatsapp: user.whatsapp,
|
||||
role: user.role || "user"
|
||||
})
|
||||
setLocal("secondtech_user", user)
|
||||
}
|
||||
|
||||
export function clearAuth() {
|
||||
@@ -63,7 +56,6 @@ async function requestJson(path, options = {}) {
|
||||
...options,
|
||||
headers
|
||||
})
|
||||
|
||||
const data = await response.json().catch(() => ({}))
|
||||
|
||||
if (!response.ok) {
|
||||
@@ -87,10 +79,6 @@ export function loginUser(payload) {
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchCurrentUser() {
|
||||
return requestJson("/api/auth/me")
|
||||
}
|
||||
|
||||
export function fetchProducts() {
|
||||
return requestJson("/api/products")
|
||||
}
|
||||
@@ -123,12 +111,6 @@ export function deleteProductById(id) {
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteProductAsAdmin(id) {
|
||||
return requestJson(`/api/admin/products/${id}`, {
|
||||
method: "DELETE"
|
||||
})
|
||||
}
|
||||
|
||||
export function getSavedProducts() {
|
||||
return getLocal("secondtech_saved", [])
|
||||
}
|
||||
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<section class="container-page py-10">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-extrabold">Admin Marketplace</h1>
|
||||
<p class="mt-2 text-slate-600">Kelola semua produk yang tampil di marketplace.</p>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMessage" class="mb-5 rounded-xl bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
|
||||
<div v-if="loading" class="card p-10 text-center">
|
||||
<h2 class="text-xl font-extrabold">Memuat produk...</h2>
|
||||
</div>
|
||||
|
||||
<div v-else-if="products.length" class="grid gap-4">
|
||||
<div
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
class="card grid gap-4 p-4 md:grid-cols-[140px_1fr_auto] md:items-center"
|
||||
>
|
||||
<img
|
||||
:src="getProductImageUrl(product.image)"
|
||||
:alt="product.title"
|
||||
class="aspect-[4/3] w-full rounded-xl object-cover md:w-36"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-bold text-brand-700">
|
||||
{{ product.category }}
|
||||
</span>
|
||||
<span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-700">
|
||||
{{ product.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-3 font-extrabold">{{ product.title }}</h3>
|
||||
<p class="mt-1 text-sm text-slate-500">
|
||||
{{ product.seller }} • {{ product.location }} • {{ product.condition }}
|
||||
</p>
|
||||
<p class="mt-2 font-extrabold text-brand-700">
|
||||
{{ formatRupiah(product.price) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 md:flex-col">
|
||||
<RouterLink :to="`/produk/${product.id}`" class="btn-secondary !px-3 !py-2">
|
||||
Detail
|
||||
</RouterLink>
|
||||
<button
|
||||
class="rounded-xl bg-red-50 px-3 py-2 text-sm font-bold text-red-700 hover:bg-red-100"
|
||||
@click="deleteAsAdmin(product.id)"
|
||||
>
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="card p-10 text-center">
|
||||
<h2 class="text-xl font-extrabold">Belum ada produk</h2>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue"
|
||||
import { API_BASE_URL, fetchProducts, formatRupiah, getProductImageUrl, getToken } from "../utils"
|
||||
|
||||
const products = ref([])
|
||||
const loading = ref(true)
|
||||
const errorMessage = ref("")
|
||||
|
||||
async function loadProducts() {
|
||||
loading.value = true
|
||||
errorMessage.value = ""
|
||||
|
||||
try {
|
||||
const data = await fetchProducts()
|
||||
products.value = data.products
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteAsAdmin(id) {
|
||||
if (!confirm("Yakin ingin menghapus produk ini dari marketplace?")) return
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/admin/products/${id}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
Authorization: `Bearer ${getToken()}`
|
||||
}
|
||||
})
|
||||
|
||||
const data = await response.json().catch(() => ({}))
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || "Gagal menghapus produk.")
|
||||
}
|
||||
|
||||
products.value = products.value.filter((product) => product.id !== id)
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadProducts)
|
||||
</script>
|
||||
+44
-64
@@ -2,15 +2,32 @@
|
||||
<section class="bg-gradient-to-br from-brand-50 via-white to-slate-100">
|
||||
<div class="container-page grid min-h-[560px] items-center gap-10 py-16 lg:grid-cols-2">
|
||||
<div>
|
||||
<span class="rounded-full bg-brand-100 px-4 py-2 text-sm font-bold text-brand-700">
|
||||
Marketplace Barang Bekas Teknologi
|
||||
</span>
|
||||
<h1 class="mt-6 text-4xl font-extrabold tracking-tight text-slate-950 sm:text-5xl lg:text-6xl">
|
||||
Jual beli perangkat Teknologi bekas.
|
||||
</h1>
|
||||
<p class="mt-6 max-w-xl text-lg leading-8 text-slate-600">
|
||||
Temukan laptop bekas, PC, monitor, keyboard, router, switch, access point, dan server bekas untuk berbagai kebutuhan.
|
||||
</p>
|
||||
<ShinyText
|
||||
text="SecondTech"
|
||||
className="text-1xl font-extrabold tracking-tight sm:text-1xl lg:text-2xl"
|
||||
:color="'#1c4ed9'"
|
||||
:shineColor="'#e0e7ff'"
|
||||
:spread="45"
|
||||
:speed="1"
|
||||
:delay="2"
|
||||
:direction="'left'"
|
||||
:pauseOnHover="true"
|
||||
:yoyo="true"
|
||||
/>
|
||||
<div>
|
||||
<TextType
|
||||
as="h2"
|
||||
className="mt-6 text-3xl font-extrabold tracking-tight text-zinc-950 sm:text-6xl lg:text-5xl"
|
||||
:text="['Menjual Barang Bekas, yang kamu butuhkan, di satu tempat.']"
|
||||
:typingSpeed="75"
|
||||
:pauseDuration="1500"
|
||||
:showCursor="false"
|
||||
:textColors="['#0f1729']"
|
||||
cursorCharacter="|"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 max-w-xl text-lg leading-8 text-slate-600">Temukan laptop bekas, PC, monitor, keyboard, router, switch, access point, dan server bekas untuk berbagai kebutuhan.</p>
|
||||
<div class="mt-8 flex flex-wrap gap-3">
|
||||
<RouterLink to="/jual" class="btn-primary">Jual Barang Sekarang</RouterLink>
|
||||
<RouterLink to="/marketplace" class="btn-secondary">Lihat Marketplace</RouterLink>
|
||||
@@ -19,11 +36,7 @@
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute -inset-4 rounded-[2rem] bg-brand-100 blur-2xl"></div>
|
||||
<img
|
||||
class="relative aspect-[4/3] w-full rounded-[2rem] object-cover shadow-2xl"
|
||||
src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop"
|
||||
alt="Tech marketplace"
|
||||
/>
|
||||
<img class="relative aspect-[4/3] w-full rounded-[2rem] object-cover shadow-2xl" src="/kolase home.png" alt="Tech marketplace" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -38,16 +51,11 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
||||
<div
|
||||
v-for="cat in categoryList"
|
||||
:key="cat.name"
|
||||
class="card p-5 text-center transition hover:-translate-y-1 hover:shadow-md"
|
||||
>
|
||||
<div v-for="cat in categoryList" :key="cat" class="card p-5 text-center transition hover:-translate-y-1 hover:shadow-md">
|
||||
<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-700">
|
||||
<component :is="iconMap[cat.icon]" :size="22" />
|
||||
<Cpu size="22" />
|
||||
</div>
|
||||
|
||||
<p class="font-bold">{{ cat.name }}</p>
|
||||
<p class="font-bold">{{ cat }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -62,59 +70,31 @@
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<ProductCard
|
||||
v-for="product in latestProducts"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
:saved="saved.includes(product.id)"
|
||||
@toggle-save="toggleSave"
|
||||
/>
|
||||
<ProductCard v-for="product in latestProducts" :key="product.id" :product="product" :saved="saved.includes(product.id)" @toggle-save="toggleSave" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from "vue"
|
||||
import ProductCard from "../components/ProductCard.vue"
|
||||
import { getSavedProducts, setSavedProducts } from "../utils"
|
||||
import {
|
||||
Boxes,
|
||||
Laptop,
|
||||
PcCase,
|
||||
Monitor,
|
||||
Keyboard,
|
||||
Router,
|
||||
Network,
|
||||
Server,
|
||||
Wifi
|
||||
} from "lucide-vue-next"
|
||||
import { computed, ref } from 'vue';
|
||||
import { Cpu } from 'lucide-vue-next';
|
||||
import ProductCard from '../components/ProductCard.vue';
|
||||
import { products, categories } from '../data/products';
|
||||
import { getSavedProducts, setSavedProducts } from '../utils';
|
||||
import ShinyText from '../vuebits/ShinyText/ShinyText.vue';
|
||||
import TextType from '../vuebits/TextType/TextType.vue';
|
||||
|
||||
import { products, categories } from "../data/products"
|
||||
|
||||
const saved = ref(getSavedProducts())
|
||||
const categoryList = categories
|
||||
.filter((category) => category.name !== "Semua")
|
||||
.slice(0, 6)
|
||||
const latestProducts = computed(() => products.slice(0, 4))
|
||||
const iconMap = {
|
||||
Boxes,
|
||||
Laptop,
|
||||
PcCase,
|
||||
Monitor,
|
||||
Keyboard,
|
||||
Router,
|
||||
Network,
|
||||
Server,
|
||||
Wifi
|
||||
}
|
||||
const saved = ref(getSavedProducts());
|
||||
const categoryList = categories.filter((c) => c !== 'Semua').slice(0, 6);
|
||||
const latestProducts = computed(() => products.slice(0, 4));
|
||||
|
||||
function toggleSave(id) {
|
||||
if (saved.value.includes(id)) {
|
||||
saved.value = saved.value.filter((item) => item !== id)
|
||||
saved.value = saved.value.filter((item) => item !== id);
|
||||
} else {
|
||||
saved.value.push(id)
|
||||
saved.value.push(id);
|
||||
}
|
||||
setSavedProducts(saved.value)
|
||||
setSavedProducts(saved.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<section class="container-page grid min-h-[70vh] place-items-center py-10">
|
||||
<div class="card w-full max-w-md p-6">
|
||||
<h1 class="text-2xl font-extrabold">Selamat Datang Kembali!</h1>
|
||||
<p class="mt-2 text-sm text-slate-600">Masuk dan lanjutkan jualanmu.</p>
|
||||
<h1 class="text-2xl font-extrabold">Login</h1>
|
||||
<p class="mt-2 text-sm text-slate-600">Masuk untuk mengelola barang jualanmu.</p>
|
||||
|
||||
<form class="mt-6 grid gap-4" @submit.prevent="login">
|
||||
<p v-if="errorMessage" class="rounded-xl bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<section class="container-page py-10">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-extrabold">Jual Barang</h1>
|
||||
<p class="mt-2 text-slate-600">Posting barang anda ke marketplace dengan foto produk asli.</p>
|
||||
<p class="mt-2 text-slate-600">Posting barang ke marketplace dengan foto asli dari perangkatmu.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-8 lg:grid-cols-[1fr_360px]">
|
||||
@@ -65,7 +65,7 @@
|
||||
|
||||
<div>
|
||||
<label class="label">Deskripsi</label>
|
||||
<textarea v-model="form.description" class="input mt-2 min-h-32" placeholder="Deskripsikan kondisi barang anda..." required></textarea>
|
||||
<textarea v-model="form.description" class="input mt-2 min-h-32" placeholder="Jelaskan kondisi barang..." required></textarea>
|
||||
</div>
|
||||
|
||||
<button class="btn-primary w-full" :disabled="loading">
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
<script setup lang="ts">
|
||||
import { Motion, useAnimationFrame, useMotionValue, useTransform } from 'motion-v';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
interface ShinyTextProps {
|
||||
text: string;
|
||||
disabled?: boolean;
|
||||
speed?: number;
|
||||
className?: string;
|
||||
color?: string;
|
||||
shineColor?: string;
|
||||
spread?: number;
|
||||
yoyo?: boolean;
|
||||
pauseOnHover?: boolean;
|
||||
direction?: 'left' | 'right';
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ShinyTextProps>(), {
|
||||
disabled: false,
|
||||
speed: 2,
|
||||
className: '',
|
||||
color: '#b5b5b5',
|
||||
shineColor: '#ffffff',
|
||||
spread: 120,
|
||||
yoyo: false,
|
||||
pauseOnHover: false,
|
||||
direction: 'left',
|
||||
delay: 0
|
||||
});
|
||||
|
||||
const isPaused = ref(false);
|
||||
const progress = useMotionValue(0);
|
||||
const elapsedRef = ref(0);
|
||||
const lastTimeRef = ref<number | null>(null);
|
||||
const directionRef = ref(props.direction === 'left' ? 1 : -1);
|
||||
|
||||
const animationDuration = computed(() => props.speed * 1000);
|
||||
const delayDuration = computed(() => props.delay * 1000);
|
||||
|
||||
useAnimationFrame(time => {
|
||||
if (props.disabled || isPaused.value) {
|
||||
lastTimeRef.value = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lastTimeRef.value === null) {
|
||||
lastTimeRef.value = time;
|
||||
return;
|
||||
}
|
||||
|
||||
const deltaTime = time - lastTimeRef.value;
|
||||
lastTimeRef.value = time;
|
||||
|
||||
elapsedRef.value += deltaTime;
|
||||
|
||||
// Animation goes from 0 to 100
|
||||
if (props.yoyo) {
|
||||
const cycleDuration = animationDuration.value + delayDuration.value;
|
||||
const fullCycle = cycleDuration * 2;
|
||||
const cycleTime = elapsedRef.value % fullCycle;
|
||||
|
||||
if (cycleTime < animationDuration.value) {
|
||||
// Forward animation: 0 -> 100
|
||||
const p = (cycleTime / animationDuration.value) * 100;
|
||||
progress.set(directionRef.value === 1 ? p : 100 - p);
|
||||
} else if (cycleTime < cycleDuration) {
|
||||
// Delay at end
|
||||
progress.set(directionRef.value === 1 ? 100 : 0);
|
||||
} else if (cycleTime < cycleDuration + animationDuration.value) {
|
||||
// Reverse animation: 100 -> 0
|
||||
const reverseTime = cycleTime - cycleDuration;
|
||||
const p = 100 - (reverseTime / animationDuration.value) * 100;
|
||||
progress.set(directionRef.value === 1 ? p : 100 - p);
|
||||
} else {
|
||||
// Delay at start
|
||||
progress.set(directionRef.value === 1 ? 0 : 100);
|
||||
}
|
||||
} else {
|
||||
const cycleDuration = animationDuration.value + delayDuration.value;
|
||||
const cycleTime = elapsedRef.value % cycleDuration;
|
||||
|
||||
if (cycleTime < animationDuration.value) {
|
||||
// Animation phase: 0 -> 100
|
||||
const p = (cycleTime / animationDuration.value) * 100;
|
||||
progress.set(directionRef.value === 1 ? p : 100 - p);
|
||||
} else {
|
||||
// Delay phase - hold at end (shine off-screen)
|
||||
progress.set(directionRef.value === 1 ? 100 : 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.direction,
|
||||
() => {
|
||||
directionRef.value = props.direction === 'left' ? 1 : -1;
|
||||
elapsedRef.value = 0;
|
||||
progress.set(0);
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
const backgroundPosition = useTransform(progress, p => `${150 - p * 2}% center`);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (props.pauseOnHover) isPaused.value = true;
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (props.pauseOnHover) isPaused.value = false;
|
||||
};
|
||||
|
||||
const gradientStyle = computed(() => ({
|
||||
backgroundImage: `linear-gradient(${props.spread}deg, ${props.color} 0%, ${props.color} 35%, ${props.shineColor} 50%, ${props.color} 65%, ${props.color} 100%)`,
|
||||
backgroundSize: '200% auto',
|
||||
WebkitBackgroundClip: 'text',
|
||||
backgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Motion
|
||||
tag="span"
|
||||
:class="['inline-block', className]"
|
||||
:style="{ ...gradientStyle, backgroundPosition }"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
{{ text }}
|
||||
</Motion>
|
||||
</template>
|
||||
@@ -0,0 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, watch, computed, useTemplateRef } from 'vue';
|
||||
import { gsap } from 'gsap';
|
||||
|
||||
interface TextTypeProps {
|
||||
className?: string;
|
||||
showCursor?: boolean;
|
||||
hideCursorWhileTyping?: boolean;
|
||||
cursorCharacter?: string;
|
||||
cursorBlinkDuration?: number;
|
||||
cursorClassName?: string;
|
||||
text: string | string[];
|
||||
as?: string;
|
||||
typingSpeed?: number;
|
||||
initialDelay?: number;
|
||||
pauseDuration?: number;
|
||||
deletingSpeed?: number;
|
||||
loop?: boolean;
|
||||
textColors?: string[];
|
||||
variableSpeed?: { min: number; max: number };
|
||||
onSentenceComplete?: (sentence: string, index: number) => void;
|
||||
startOnVisible?: boolean;
|
||||
reverseMode?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TextTypeProps>(), {
|
||||
as: 'div',
|
||||
typingSpeed: 50,
|
||||
initialDelay: 0,
|
||||
pauseDuration: 2000,
|
||||
deletingSpeed: 30,
|
||||
loop: true,
|
||||
className: '',
|
||||
showCursor: true,
|
||||
hideCursorWhileTyping: false,
|
||||
cursorCharacter: '|',
|
||||
cursorBlinkDuration: 0.5,
|
||||
textColors: () => [],
|
||||
startOnVisible: false,
|
||||
reverseMode: false
|
||||
});
|
||||
|
||||
const displayedText = ref('');
|
||||
const currentCharIndex = ref(0);
|
||||
const isDeleting = ref(false);
|
||||
const currentTextIndex = ref(0);
|
||||
const isVisible = ref(!props.startOnVisible);
|
||||
const cursorRef = useTemplateRef('cursorRef');
|
||||
const containerRef = useTemplateRef('containerRef');
|
||||
|
||||
const textArray = computed(() => (Array.isArray(props.text) ? props.text : [props.text]));
|
||||
|
||||
const getRandomSpeed = () => {
|
||||
if (!props.variableSpeed) return props.typingSpeed;
|
||||
const { min, max } = props.variableSpeed;
|
||||
return Math.random() * (max - min) + min;
|
||||
};
|
||||
|
||||
const getCurrentTextColor = () => {
|
||||
if (!props.textColors.length) return '#ffffff';
|
||||
return props.textColors[currentTextIndex.value % props.textColors.length];
|
||||
};
|
||||
|
||||
let timeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const clearTimeoutIfNeeded = () => {
|
||||
if (timeout) clearTimeout(timeout);
|
||||
};
|
||||
|
||||
const executeTypingAnimation = () => {
|
||||
const currentText = textArray.value[currentTextIndex.value];
|
||||
const processedText = props.reverseMode ? currentText.split('').reverse().join('') : currentText;
|
||||
|
||||
if (isDeleting.value) {
|
||||
if (displayedText.value === '') {
|
||||
isDeleting.value = false;
|
||||
if (currentTextIndex.value === textArray.value.length - 1 && !props.loop) return;
|
||||
|
||||
props.onSentenceComplete?.(textArray.value[currentTextIndex.value], currentTextIndex.value);
|
||||
|
||||
currentTextIndex.value = (currentTextIndex.value + 1) % textArray.value.length;
|
||||
currentCharIndex.value = 0;
|
||||
timeout = setTimeout(() => {}, props.pauseDuration);
|
||||
} else {
|
||||
timeout = setTimeout(() => {
|
||||
displayedText.value = displayedText.value.slice(0, -1);
|
||||
}, props.deletingSpeed);
|
||||
}
|
||||
} else {
|
||||
if (currentCharIndex.value < processedText.length) {
|
||||
timeout = setTimeout(
|
||||
() => {
|
||||
displayedText.value += processedText[currentCharIndex.value];
|
||||
currentCharIndex.value += 1;
|
||||
},
|
||||
props.variableSpeed ? getRandomSpeed() : props.typingSpeed
|
||||
);
|
||||
} else if (textArray.value.length > 1) {
|
||||
timeout = setTimeout(() => {
|
||||
isDeleting.value = true;
|
||||
}, props.pauseDuration);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
[displayedText, currentCharIndex, isDeleting, isVisible],
|
||||
() => {
|
||||
if (!isVisible.value) return;
|
||||
clearTimeoutIfNeeded();
|
||||
|
||||
if (currentCharIndex.value === 0 && !isDeleting.value && displayedText.value === '') {
|
||||
timeout = setTimeout(() => {
|
||||
executeTypingAnimation();
|
||||
}, props.initialDelay);
|
||||
} else {
|
||||
executeTypingAnimation();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.showCursor && cursorRef.value) {
|
||||
gsap.set(cursorRef.value, { opacity: 1 });
|
||||
gsap.to(cursorRef.value, {
|
||||
opacity: 0,
|
||||
duration: props.cursorBlinkDuration,
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
ease: 'power2.inOut'
|
||||
});
|
||||
}
|
||||
|
||||
if (props.startOnVisible && containerRef.value) {
|
||||
const observer = new IntersectionObserver(
|
||||
entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) isVisible.value = true;
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
if (containerRef.value instanceof Element) {
|
||||
observer.observe(containerRef.value);
|
||||
}
|
||||
onBeforeUnmount(() => observer.disconnect());
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimeoutIfNeeded();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="as"
|
||||
ref="containerRef"
|
||||
:class="`inline-block whitespace-pre-wrap tracking-tight ${className}`"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<span class="inline" :style="{ color: getCurrentTextColor() }">
|
||||
{{ displayedText }}
|
||||
</span>
|
||||
<span
|
||||
v-if="showCursor"
|
||||
ref="cursorRef"
|
||||
:class="`ml-1 inline-block opacity-100 ${
|
||||
hideCursorWhileTyping && (currentCharIndex < textArray[currentTextIndex].length || isDeleting) ? 'hidden' : ''
|
||||
} ${cursorClassName}`"
|
||||
>
|
||||
{{ cursorCharacter }}
|
||||
</span>
|
||||
</component>
|
||||
</template>
|
||||
Reference in New Issue
Block a user