Skip to content

Commit

Permalink
feat: add month view header
Browse files Browse the repository at this point in the history
  • Loading branch information
@krantheman
krantheman committed Apr 30, 2024
1 parent e71ee98 commit 66e16a3
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 42 deletions.
4 changes: 3 additions & 1 deletion roster/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,18 @@
"copy-html-entry": "cp ../hrms/public/roster/index.html ../hrms/www/roster.html"
},
"dependencies": {
"dayjs": "^1.11.11",
"feather-icons": "^4.29.1",
"frappe-ui": "^0.1.53",
"vue": "^3.4.25",
"vue-router": "^4.3.2"
},
"devDependencies": {
"@types/vue": "^2.0.0",
"@vitejs/plugin-vue": "^5.0.4",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.15",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"vite": "^5.2.10",
"vue-tsc": "^2.0.14"
Expand Down
26 changes: 26 additions & 0 deletions roster/src/components/MonthView.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<div class="bg-white rounded-lg border p-4">
<div class="flex">
<Button icon="chevron-left" variant="ghost" @click="() => updateMonth(-1)" />
<span class="px-1 w-20 text-center my-auto">{{ month }} '{{ year }}</span>
<Button icon="chevron-right" variant="ghost" @click="() => updateMonth(1)" />
</div>
</div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import dayjs from "../utils/dayjs";
const firstOfMonth = ref(dayjs().date(1));
const month = computed(() => {
return dayjs().month(firstOfMonth.value.$M).format("MMM");
});
const year = computed(() => {
return dayjs().year(firstOfMonth.value.$y).format("YY");
});
const updateMonth = (change) => {
firstOfMonth.value = firstOfMonth.value.add(change, "M");
};
</script>
34 changes: 4 additions & 30 deletions roster/src/pages/Home.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,9 @@
<template>
<div class="max-w-3xl py-12 mx-auto">
<Button icon-left="code" @click="$resources.ping.fetch" :loading="$resources.ping.loading">
Click to send 'ping' request
</Button>
<div>
{{ $resources.ping.data }}
</div>
<pre>{{ $resources.ping }}</pre>

<Button @click="showDialog = true">Open Dialog</Button>
<Dialog title="Title" v-model="showDialog"> Dialog content </Dialog>
<div class="p-12 bg-gray-50 h-screen">
<MonthView />
</div>
</template>

<script>
import { Dialog } from "frappe-ui";
export default {
name: "Home",
data() {
return {
showDialog: false,
};
},
resources: {
ping: {
url: "ping",
},
},
components: {
Dialog,
},
};
<script setup>
import MonthView from "../components/MonthView.vue";
</script>
8 changes: 8 additions & 0 deletions roster/src/utils/dayjs.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import dayjs from "dayjs";
import updateLocale from "dayjs/plugin/updateLocale";
import localizedFormat from "dayjs/plugin/localizedFormat";

dayjs.extend(updateLocale);
dayjs.extend(localizedFormat);

export default dayjs;
3 changes: 2 additions & 1 deletion roster/tsconfig.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
Expand All @@ -14,5 +15,5 @@
"lib": ["ESNext", "DOM"],
"skipLibCheck": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts"]
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}
10 changes: 9 additions & 1 deletion roster/vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,17 @@ export default defineConfig({
outDir: `../${path.basename(path.resolve(".."))}/public/roster`,
emptyOutDir: true,
target: "es2015",
commonjsOptions: {
include: [/tailwind.config.js/, /node_modules/],
},
},
optimizeDeps: {
include: ["frappe-ui > feather-icons", "showdown", "engine.io-client"],
include: [
"frappe-ui > feather-icons",
"showdown",
"tailwind.config.js",
"engine.io-client",
],
},
});

Expand Down
118 changes: 109 additions & 9 deletions roster/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -614,6 +614,13 @@
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==

"@types/vue@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@types/vue/-/vue-2.0.0.tgz#ec77b3d89591deb9ca5cb052368aa9c32be088e7"
integrity sha512-WDElkBv/o4lVwu6wYHB06AXs4Xo2fwDjJUpvPRc1QQdzkUSiGFjrYuSCy8raxLE5FObgKq8ND7R5gSZTFLK60w==
dependencies:
vue "*"

"@types/web-bluetooth@^0.0.20":
version "0.0.20"
resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
Expand Down Expand Up @@ -657,6 +664,17 @@
estree-walker "^2.0.2"
source-map-js "^1.2.0"

"@vue/[email protected]":
version "3.4.26"
resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.26.tgz#d507886520e83a6f8339ed55ed0b2b5d84b44b73"
integrity sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==
dependencies:
"@babel/parser" "^7.24.4"
"@vue/shared" "3.4.26"
entities "^4.5.0"
estree-walker "^2.0.2"
source-map-js "^1.2.0"

"@vue/[email protected]", "@vue/compiler-dom@^3.4.0":
version "3.4.25"
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.25.tgz#b367e0c84e11d9e9f70beabdd6f6b2277fde375f"
Expand All @@ -665,6 +683,14 @@
"@vue/compiler-core" "3.4.25"
"@vue/shared" "3.4.25"

"@vue/[email protected]":
version "3.4.26"
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.26.tgz#acc7b788b48152d087d4bb9e655b795e3dbec554"
integrity sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==
dependencies:
"@vue/compiler-core" "3.4.26"
"@vue/shared" "3.4.26"

"@vue/[email protected]":
version "3.4.25"
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.25.tgz#ceab148f81571c8b251e8a8b75a9972addf1db8b"
Expand All @@ -680,6 +706,21 @@
postcss "^8.4.38"
source-map-js "^1.2.0"

"@vue/[email protected]":
version "3.4.26"
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.26.tgz#c679f206829954c3c078d8a9be76d0098b8377ae"
integrity sha512-It1dp+FAOCgluYSVYlDn5DtZBxk1NCiJJfu2mlQqa/b+k8GL6NG/3/zRbJnHdhV2VhxFghaDq5L4K+1dakW6cw==
dependencies:
"@babel/parser" "^7.24.4"
"@vue/compiler-core" "3.4.26"
"@vue/compiler-dom" "3.4.26"
"@vue/compiler-ssr" "3.4.26"
"@vue/shared" "3.4.26"
estree-walker "^2.0.2"
magic-string "^0.30.10"
postcss "^8.4.38"
source-map-js "^1.2.0"

"@vue/[email protected]":
version "3.4.25"
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.25.tgz#7fdd540bfdf2d4a3d6cb107b7ba4c77228d36331"
Expand All @@ -688,6 +729,14 @@
"@vue/compiler-dom" "3.4.25"
"@vue/shared" "3.4.25"

"@vue/[email protected]":
version "3.4.26"
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.26.tgz#22842d8adfff972d87bb798b8d496111f7f814b5"
integrity sha512-FNwLfk7LlEPRY/g+nw2VqiDKcnDTVdCfBREekF8X74cPLiWHUX6oldktf/Vx28yh4STNy7t+/yuLoMBBF7YDiQ==
dependencies:
"@vue/compiler-dom" "3.4.26"
"@vue/shared" "3.4.26"

"@vue/devtools-api@^6.5.1":
version "6.6.1"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
Expand All @@ -713,6 +762,13 @@
dependencies:
"@vue/shared" "3.4.25"

"@vue/[email protected]":
version "3.4.26"
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.26.tgz#1191f543809d4c93e5b3e842ba83022350a3f205"
integrity sha512-E/ynEAu/pw0yotJeLdvZEsp5Olmxt+9/WqzvKff0gE67tw73gmbx6tRkiagE/eH0UCubzSlGRebCbidB1CpqZQ==
dependencies:
"@vue/shared" "3.4.26"

"@vue/[email protected]":
version "3.4.25"
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.25.tgz#c5545d469ae0827dc471a1376f97c6ace41081ec"
Expand All @@ -721,6 +777,14 @@
"@vue/reactivity" "3.4.25"
"@vue/shared" "3.4.25"

"@vue/[email protected]":
version "3.4.26"
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.26.tgz#51ee971cb700370a67e5a510c4a84eff7491d658"
integrity sha512-AFJDLpZvhT4ujUgZSIL9pdNcO23qVFh7zWCsNdGQBw8ecLNxOOnPcK9wTTIYCmBJnuPHpukOwo62a2PPivihqw==
dependencies:
"@vue/reactivity" "3.4.26"
"@vue/shared" "3.4.26"

"@vue/[email protected]":
version "3.4.25"
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.25.tgz#9bc195e4860edcd0db4303cbba5a160922b963fd"
Expand All @@ -730,6 +794,15 @@
"@vue/shared" "3.4.25"
csstype "^3.1.3"

"@vue/[email protected]":
version "3.4.26"
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.26.tgz#179aa7c8dc964112e6d096bc8ec5f361111009a1"
integrity sha512-UftYA2hUXR2UOZD/Fc3IndZuCOOJgFxJsWOxDkhfVcwLbsfh2CdXE2tG4jWxBZuDAs9J9PzRTUFt1PgydEtItw==
dependencies:
"@vue/runtime-core" "3.4.26"
"@vue/shared" "3.4.26"
csstype "^3.1.3"

"@vue/[email protected]":
version "3.4.25"
resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.25.tgz#6cfc96ee631104951d5d6c09a8f1e7cef3ef3972"
Expand All @@ -738,11 +811,24 @@
"@vue/compiler-ssr" "3.4.25"
"@vue/shared" "3.4.25"

"@vue/[email protected]":
version "3.4.26"
resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.26.tgz#6d0c6b0366bfe0232579aea00e3ff6784e5a1c60"
integrity sha512-xoGAqSjYDPGAeRWxeoYwqJFD/gw7mpgzOvSxEmjWaFO2rE6qpbD1PC172YRpvKhrihkyHJkNDADFXTfCyVGhKw==
dependencies:
"@vue/compiler-ssr" "3.4.26"
"@vue/shared" "3.4.26"

"@vue/[email protected]", "@vue/shared@^3.4.0":
version "3.4.25"
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.25.tgz#243ba8543e7401751e0ca319f75a80f153edd273"
integrity sha512-k0yappJ77g2+KNrIaF0FFnzwLvUBLUYr8VOwz+/6vLsmItFp51AcxLL7Ey3iPd7BIRyWPOcqUjMnm7OkahXllA==

"@vue/[email protected]":
version "3.4.26"
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.26.tgz#f17854fb1faf889854aed4b23b60e86a8cab6403"
integrity sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==

"@vueuse/core@^10.4.1", "@vueuse/core@^10.5.0":
version "10.9.0"
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.9.0.tgz#7d779a95cf0189de176fee63cee4ba44b3c85d64"
Expand Down Expand Up @@ -949,6 +1035,11 @@ csstype@^3.1.3:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==

dayjs@^1.11.11:
version "1.11.11"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==

de-indent@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
Expand Down Expand Up @@ -1296,9 +1387,9 @@ lodash.merge@^4.6.2:
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==

lru-cache@^10.2.0:
version "10.2.1"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.1.tgz#e8d901141f22937968e45a6533d52824070151e4"
integrity sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==
version "10.2.2"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.2.tgz#48206bc114c1252940c41b25b41af5b545aca878"
integrity sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==

lru-cache@^6.0.0:
version "6.0.0"
Expand Down Expand Up @@ -1823,7 +1914,6 @@ source-map-js@^1.2.0:
integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==

"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
name string-width-cjs
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand All @@ -1842,7 +1932,6 @@ string-width@^5.0.1, string-width@^5.1.2:
strip-ansi "^7.0.1"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
name strip-ansi-cjs
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand Down Expand Up @@ -1874,7 +1963,7 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

tailwindcss@^3.0.15:
tailwindcss@^3.4.3:
version "3.4.3"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.3.tgz#be48f5283df77dfced705451319a5dffb8621519"
integrity sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==
Expand Down Expand Up @@ -2003,6 +2092,17 @@ vue-tsc@^2.0.14:
"@vue/language-core" "2.0.14"
semver "^7.5.4"

vue@*:
version "3.4.26"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.26.tgz#936c97e37672c737705d7bdfa62c31af18742269"
integrity sha512-bUIq/p+VB+0xrJubaemrfhk1/FiW9iX+pDV+62I/XJ6EkspAO9/DXEjbDFoe8pIfOZBqfk45i9BMc41ptP/uRg==
dependencies:
"@vue/compiler-dom" "3.4.26"
"@vue/compiler-sfc" "3.4.26"
"@vue/runtime-dom" "3.4.26"
"@vue/server-renderer" "3.4.26"
"@vue/shared" "3.4.26"

vue@^3.4.25:
version "3.4.25"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.25.tgz#e59d4ed36389647b52ff2fd7aa84bb6691f4205b"
Expand Down Expand Up @@ -2060,6 +2160,6 @@ yallist@^4.0.0:
integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

yaml@^2.3.4:
version "2.4.1"
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.1.tgz#2e57e0b5e995292c25c75d2658f0664765210eed"
integrity sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==
version "2.4.2"
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.2.tgz#7a2b30f2243a5fc299e1f14ca58d475ed4bc5362"
integrity sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==

0 comments on commit 66e16a3

Please sign in to comment.