Skip to content

Commit 390c91d

Browse files
Benoit NgoNgob
Benoit Ngo
authored and
Ngob
committed
feat(frontend): Adding primevue + primeflex + primeicons
1 parent 597404c commit 390c91d

File tree

13 files changed

+1530
-1565
lines changed

13 files changed

+1530
-1565
lines changed

‎Makefile‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -88,20 +88,21 @@ restart: down up ## Soft Restart
8888
.PHONY: frestart
8989
frestart: fdown fup ## Hard restart
9090

91-
.PHONY: stop-front
92-
stop-front: sync-env ## stop front container
91+
92+
.PHONY: fe-stop
93+
fe-stop: sync-env ## stop front container
9394
DOCKER_BUILDKIT=1 docker compose stop front
9495

95-
.PHONY: rm-front
96-
rm-front: sync-env ## remove front container
96+
.PHONY: fe-rm
97+
fe-rm: sync-env ## remove front container
9798
DOCKER_BUILDKIT=1 docker compose rm front -f
9899

99-
.PHONY: start-front
100-
start-front: sync-env ## start front container
100+
.PHONY: fe-start
101+
fe-start: sync-env ## start front container
101102
DOCKER_BUILDKIT=1 docker compose up front -d
102103

103-
.PHONY: reset-front
104-
reset-front: stop-front rm-front start-front ## reset front container
104+
.PHONY: fe-restart
105+
fe-restart: fe-stop fe-rm fe-start ## reset front container
105106

106107
.PHONY: dumpautoload
107108
dumpautoload: sync-env ## dump the composer autoloader

‎apps/front/nuxt.config.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,12 @@ export default defineNuxtConfig({
1919
],
2020
},
2121
},
22-
css: ["@/assets/styles/main.scss"],
22+
css: [
23+
"@/assets/styles/main.scss",
24+
"primevue/resources/themes/lara-light-blue/theme.css",
25+
"primeflex/primeflex.css",
26+
"primeicons/primeicons.css",
27+
],
2328
vite: {
2429
plugins: [svgLoader()],
2530
css: {
@@ -31,5 +36,10 @@ export default defineNuxtConfig({
3136
},
3237
},
3338
},
39+
watch: [
40+
"src/assets/styles/_functions.scss",
41+
"src/assets/styles/_variables.scss",
42+
"src/assets/styles/_mixins.scss",
43+
],
3444
// ssr: false
3545
});

‎apps/front/package.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,20 @@
2222
},
2323
"dependencies": {
2424
"@pinia/nuxt": "^0.4.11",
25-
"bootstrap": "^5.2.3",
2625
"defu": "^6.1.2",
27-
"h3": "^1.6.6",
26+
"h3": "^1.8.2",
2827
"nitropack": "^2.4.1",
29-
"nuxt": "3.5.1",
30-
"ofetch": "^1.0.1",
28+
"nuxt": "3.7.4",
29+
"ofetch": "^1.3.3",
3130
"ohash": "^1.1.2",
32-
"pinia": "^2.1.3",
31+
"pinia": "^2.1.6",
3332
"pino": "^8.8.0",
3433
"prettier": "^2.8.8",
34+
"primeflex": "^3.3.1",
35+
"primeicons": "^6.0.1",
36+
"primevue": "^3.35.0",
3537
"sass": "^1.57.1",
3638
"vite-svg-loader": "^4.0.0",
37-
"vue": "^3.2.45"
39+
"vue": "^3.3.4"
3840
}
3941
}

‎apps/front/src/assets/styles/_functions.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
@import "../node_modules/bootstrap/scss/functions";

‎apps/front/src/assets/styles/_mixins.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +0,0 @@
1-
2-
@import "../node_modules/bootstrap/scss/mixins";

‎apps/front/src/assets/styles/_variables.scss‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1 @@
1-
2-
//$body-bg: #000;
3-
//$body-color: #111;
4-
5-
// Required
6-
@import "../node_modules/bootstrap/scss/variables";
7-
@import "../node_modules/bootstrap/scss/maps";
1+
$white: #FFF;

‎apps/front/src/assets/styles/main.scss‎

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +0,0 @@
1-
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
2-
//@import "functions"; this is imported via nuxt.config
3-
4-
5-
// 2. Include any default variable overrides here
6-
7-
8-
// 3. Include remainder of required Bootstrap stylesheets
9-
//@import "variables"; this is imported via nuxt.config
10-
11-
//@import "mixins"; this is imported via nuxt.config
12-
13-
14-
@import "../node_modules/bootstrap/scss/utilities";
15-
16-
17-
// 4. Include any optional Bootstrap components as you like
18-
// Layout & components
19-
@import "../node_modules/bootstrap/scss/root";
20-
@import "../node_modules/bootstrap/scss/reboot";
21-
@import "../node_modules/bootstrap/scss/type";
22-
@import "../node_modules/bootstrap/scss/images";
23-
@import "../node_modules/bootstrap/scss/containers";
24-
@import "../node_modules/bootstrap/scss/grid";
25-
@import "../node_modules/bootstrap/scss/tables";
26-
@import "../node_modules/bootstrap/scss/forms";
27-
@import "../node_modules/bootstrap/scss/buttons";
28-
@import "../node_modules/bootstrap/scss/transitions";
29-
@import "../node_modules/bootstrap/scss/dropdown";
30-
@import "../node_modules/bootstrap/scss/button-group";
31-
@import "../node_modules/bootstrap/scss/nav";
32-
@import "../node_modules/bootstrap/scss/navbar";
33-
@import "../node_modules/bootstrap/scss/card";
34-
@import "../node_modules/bootstrap/scss/accordion";
35-
@import "../node_modules/bootstrap/scss/breadcrumb";
36-
@import "../node_modules/bootstrap/scss/pagination";
37-
@import "../node_modules/bootstrap/scss/badge";
38-
@import "../node_modules/bootstrap/scss/alert";
39-
@import "../node_modules/bootstrap/scss/progress";
40-
@import "../node_modules/bootstrap/scss/list-group";
41-
@import "../node_modules/bootstrap/scss/close";
42-
@import "../node_modules/bootstrap/scss/toasts";
43-
@import "../node_modules/bootstrap/scss/modal";
44-
@import "../node_modules/bootstrap/scss/tooltip";
45-
@import "../node_modules/bootstrap/scss/popover";
46-
@import "../node_modules/bootstrap/scss/carousel";
47-
@import "../node_modules/bootstrap/scss/spinners";
48-
@import "../node_modules/bootstrap/scss/offcanvas";
49-
@import "../node_modules/bootstrap/scss/placeholders";
50-
51-
// Helpers
52-
@import "../node_modules/bootstrap/scss/helpers";
53-
54-
// Utilities
55-
@import "../node_modules/bootstrap/scss/utilities/api";
56-
// scss-docs-end import-stack

‎apps/front/src/components/layout/AppHeader.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
2-
<div class="row justify-content-end py-2 mb-2">
3-
<div class="col-1">
4-
<NuxtLink to="/auth/register">Register</NuxtLink>
2+
<div class="grid">
3+
<div class="col-2 col-offset-8">
4+
<NuxtLink to="/auth/register">Register</NuxtLink>
5+
</div>
6+
<div class="col-2">
7+
<p v-if="username">Welcome {{ username }}</p>
8+
</div>
59
</div>
6-
<div class="col-2">
7-
<p v-if="username">Welcome {{ username }}</p>
8-
</div>
9-
</div>
1010
</template>
1111
<script setup lang="ts">
1212
import { useAuthUser } from "~/store/auth";
1313
1414
const authStore = useAuthUser();
1515
1616
const username = authStore.authUser?.username || "";
17-
</script>
17+
</script>

‎apps/front/src/components/layout/menu/AppMenu.vue‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
11
<template>
2-
<div
3-
class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top"
4-
>
5-
<NuxtLink to="/users">Users</NuxtLink>
6-
<NuxtLink to="/" class="d-block p-3 link-dark text-decoration-none">
7-
<Icon1Square />
8-
</NuxtLink>
9-
<ul
10-
class="nav nav-pills nav-flush flex-sm-column flex-row flex-nowrap mb-auto mx-auto text-center align-items-center"
11-
>
12-
<MenuItem to="/demo/page1">
13-
<Icon1Square />
14-
<span class="mx-2"> This is the item 1</span>
15-
</MenuItem>
16-
<MenuItem to="/demo/page2">
17-
<Icon2Square />
18-
<span class="mx-2"> This is the item 2</span>
19-
</MenuItem>
20-
<MenuItem to="/demo/page3">
21-
<Icon3Square />
22-
<span class="mx-2"> This is the item 3</span>
23-
</MenuItem>
24-
</ul>
25-
</div>
2+
<TieredMenu :model="items" class="h-screen sticky w-full"> </TieredMenu>
263
</template>
274
<script setup lang="ts">
28-
// Credit to https://dev.to/codeply/bootstrap-5-sidebar-examples-38pb
29-
// Another interesting ressource https://www.codeply.com/p/yE87h7irNi/icons-text
30-
31-
import MenuItem from "./MenuItem.vue";
32-
import Icon1Square from "~/assets/images/icon-1-square.svg?component";
33-
import Icon2Square from "~/assets/images/icon-2-square.svg?component";
34-
import Icon3Square from "~/assets/images/icon-3-square.svg?component";
5+
const items = computed(() => [
6+
{
7+
label: "Users",
8+
icon: "pi pi-fw pi-file",
9+
to: "/users",
10+
},
11+
{
12+
label: "Page1",
13+
icon: "pi pi-fw pi-pencil",
14+
to: "/demo/page1",
15+
},
16+
{
17+
label: "Page2",
18+
icon: "pi pi-fw pi-pencil",
19+
to: "/demo/page2",
20+
},
21+
{
22+
label: "Page3",
23+
icon: "pi pi-fw pi-pencil",
24+
to: "/demo/page3",
25+
},
26+
{
27+
separator: true,
28+
},
29+
{
30+
label: "Quit",
31+
icon: "pi pi-fw pi-power-off",
32+
},
33+
]);
3534
</script>

‎apps/front/src/components/layout/menu/MenuItem.vue‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)