Skip to content

Commit

Permalink
add card layout
Browse files Browse the repository at this point in the history
  • Loading branch information
andyluss committed Jan 2, 2025
1 parent d26d9c2 commit 2595647
Show file tree
Hide file tree
Showing 9 changed files with 182 additions and 31 deletions.
9 changes: 6 additions & 3 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
{
"[astro]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"editor.defaultFormatter": "biomejs.biome",
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
},
"editor.formatOnSave": true
}
27 changes: 27 additions & 0 deletions biome.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"$schema": "https://biomejs.dev/schemas/1.8.2/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"overrides": [
{
"include": [
"*.astro"
],
"linter": {
"rules": {
"style": {
"useConst": "off",
"useImportType": "off"
}
}
}
}
]
}
51 changes: 29 additions & 22 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 6 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,14 @@
"@astrojs/tailwind": "^5.1.4",
"@astrojs/vue": "^5.0.3",
"astro": "^5.1.1",
"tailwindcss": "^3.4.15",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.2",
"vue": "^3.5.13"
"vue": "^3.5.13",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@biomejs/biome": "1.8.2",
"prettier": "^3.3.3",
"@biomejs/biome": "^1.8.2",
"prettier": "^3.4.2",
"prettier-plugin-astro": "^0.14.1"
}
}
}
97 changes: 97 additions & 0 deletions src/card-layouts/dashboard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<script setup lang="ts">
import { ref } from "vue";
import draggable from "vuedraggable";
// const chartComps = { BinUtilizationRate, OrdersByTime, PalletsByTime };
const chartList = ref([
{ name: "BinUtilizationRate" },
{ name: "OrdersByTime" },
{ name: "PalletsByTime" },
]);
// // Layout:
// onMounted(() => {
// const savedLayout = getLayoutInDashboard();
// if (savedLayout) {
// const all = _.unionBy(chartList.value, savedLayout, "name");
// chartList.value = _.intersectionBy(chartList.value, all, "name");
// saveLayoutInDashboard(chartList.value);
// }
// });
// function getLayoutInDashboard() {
// const item = getLocalItem(local.dashboard);
// if (!item) return [];
// return JSON.parse(item);
// }
// function saveLayoutInDashboard(layout: { name: string }[]) {
// setLocalItem(local.dashboard, JSON.stringify(layout));
// }
// Drag:
const drag = ref(false);
function onDragEnd() {
drag.value = false;
// saveLayoutInDashboard(chartList.value);
}
</script>

<template>
<div class="page-root dashboard-container d-block">
<div class="title-bar-two-sides title-bar-stick">
<h1 class="page-title">
Dashboard
</h1>
</div>
<draggable
v-model="chartList"
item-key="name"
animation="200"
ghost-class="ghost"
class="list-group"
@start="drag = true"
@end="onDragEnd"
>
<template #item="{ element }">
<div class="list-group-item">
<!-- <component :is="chartComps[element.name]"/> -->
</div>
</template>
</draggable>
</div>
</template>

<style scoped>
.dashboard-container {
display: flex;
flex-direction: column;
}
.dashboard-container .ghost {
opacity: 0.5;
background: #c8ebfb;
}
.dashboard-container .list-group {
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.dashboard-container .list-group-item {
margin: 0 40px 40px 0;
flex: none;
}
/* no effect? */
.dashboard-container .list-group-item.table-css {
flex: none;
width: 50%;
padding: 0 20px 20px 0;
margin: 0;
}
</style>
Empty file added src/card-layouts/line.astro
Empty file.
File renamed without changes.
16 changes: 16 additions & 0 deletions src/pages/demo.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
import Dashboard from "../card-layouts/dashboard.vue";
import BaseHead from "../components/BaseHead.astro";
---

<!doctype html>
<html lang="en">
<head>
<BaseHead title="Demo" description="Demo page" />
</head>
<body>
<main class="flex justify-center">
<Dashboard client:load/>
</main>
</body>
</html>
2 changes: 1 addition & 1 deletion src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Card from "../components/Card.astro";
import Card from "../cards/Card.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
---

Expand Down

0 comments on commit 2595647

Please sign in to comment.