fix: #1612 refactor components to use tanstack query for data fetching (

#1650)
bcgov · Nov 18, 2024 · 24e426e · 24e426e
1 parent 8063790
commit 24e426e
Show file tree

Hide file tree

Showing 122 changed files with 5,385 additions and 4,982 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,7 @@
     "dependencies": {
         "@bcgov-nr/nr-theme": "^1.8.9",
         "@carbon/icons-vue": "^10.99.1",
+        "@carbon/themes": "^11.43.0",
         "@carbon/type": "^11.31.0",
         "@tanstack/vue-query": "^5.56.2",
         "aws-amplify": "^5.3.21",
@@ -26,7 +27,6 @@
         "fam-admin-mgmt-api": "file:../client-code-gen/gen/admin-management-api",
         "fam-app-acsctl-api": "file:../client-code-gen/gen/app-access-control-api",
         "luxon": "^3.5.0",
-        "primeflex": "^3.3.1",
         "primevue": "3.46.0",
         "vee-validate": "^4.12.6",
         "vue": "^3.4.23",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -25,8 +25,8 @@ const layoutComponent = computed(() => {
 </template>
 
 <style lang="scss">
-@import "primeflex/primeflex.css";
 @import "@/assets/styles/styles.scss";
+@import "@/assets/styles/themes.scss";
 @import "primevue/resources/primevue.min.css";
 @import "primevue/resources/themes/bootstrap4-light-blue/theme.css";
 </style>
diff --git a/frontend/src/assets/styles/card.scss b/frontend/src/assets/styles/card.scss
@@ -1,50 +1,34 @@
-@use 'sass:map';
-@use '@bcgov-nr/nr-theme/design-tokens/light-theme.scss' as lightTheme;
+@use "sass:map";
+@use "@bcgov-nr/nr-theme/design-tokens/light-theme.scss" as lightTheme;
 
-.p-card .p-card-header {
-    display: flex;
-    padding: 1.5rem;
-    align-items: center;
+.custom-card-container {
+    .p-card {
+        .p-card-header {
+            display: flex;
+            padding: 1.5rem;
+            align-items: center;
 
-    svg {
-        color: map.get(lightTheme.$light-theme, 'support-success');
-        margin-bottom: 0.1rem;
-    }
-
-    p {
-        margin: 0;
-        padding: 0 0 0 1rem;
-        display: inline-flex;
-        margin-bottom: 0;
-        color: map.get(lightTheme.$light-theme, 'text-primary');
-        font-size: 0.875rem;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 1.125rem; /* 128.571% */
-        letter-spacing: 0.01rem;
-    }
-}
+            svg {
+                color: map.get(lightTheme.$light-theme, "support-success");
+                margin-bottom: 0.1rem;
+            }
 
-.p-card .p-card-content {
-    display: flex;
-    padding: 0;
-    margin: 0;
-
-    div {
-        display: flex;
-        flex-direction: column;
-        align-self: center;
-    }
-
-    label {
-        color: map.get(lightTheme.$light-theme, 'text-primary');
-        margin: 0 0 0.75rem;
-    }
+            p {
+                margin: 0;
+                padding: 0 0 0 1rem;
+                display: inline-flex;
+                margin-bottom: 0;
+                color: map.get(lightTheme.$light-theme, "text-primary");
+                font-size: 0.875rem;
+                font-style: normal;
+                font-weight: 700;
+                line-height: 1.125rem; /* 128.571% */
+                letter-spacing: 0.01rem;
+            }
+        }
 
-    span {
-        margin: 0;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        letter-spacing: 0.01rem;
+        .custom-carbon-icon-misuse {
+            fill: var(--support-error);
+        }
     }
 }
diff --git a/frontend/src/assets/styles/default-theme.scss b/frontend/src/assets/styles/default-theme.scss
@@ -1,61 +1,64 @@
-@use 'sass:map';
-@use '@bcgov-nr/nr-theme/design-tokens/light-theme.scss' as lightTheme;
-@use '@bcgov-nr/nr-theme/design-tokens/dark-theme.scss' as darkTheme;
-@use '@bcgov-nr/nr-theme/design-tokens/light-notifications.scss' as lightNotifications;
+@use "sass:map";
+@use "@bcgov-nr/nr-theme/design-tokens/light-theme.scss" as lightTheme;
+@use "@bcgov-nr/nr-theme/design-tokens/dark-theme.scss" as darkTheme;
+
+@use "@bcgov-nr/nr-theme/design-tokens/light-notifications.scss" as
+    lightNotifications;
 // need to use type family first, and then use stylesheet, so the body type tokens can get the font path correctly
-@use '@bcgov-nr/nr-theme/design-tokens/type-family.scss';
-@use '@bcgov-nr/nr-theme/style-sheets/primevue-components-overrides.scss';
+@use "@bcgov-nr/nr-theme/design-tokens/type-family.scss";
+@use "@bcgov-nr/nr-theme/style-sheets/primevue-components-overrides.scss";
 
 // Header
 $header-height: 3rem;
 $header-width: 100vw;
 
 // Card
-$card-width: 38rem;
-$card-margin-top: 2rem;
 
 //darkTheme
-$dark-text-primary: map.get(darkTheme.$dark-theme, 'text-primary');
-$text-on-color: map.get(darkTheme.$dark-theme, 'text-on-color');
+$dark-text-primary: map.get(darkTheme.$dark-theme, "text-primary");
+$text-on-color: map.get(darkTheme.$dark-theme, "text-on-color");
 
 //lightTheme
-$light-layer-selected-01: map.get(lightTheme.$light-theme, 'layer-selected-01');
-$light-layer-hover-01: map.get(lightTheme.$light-theme, 'layer-hover-01');
+$light-layer-selected-01: map.get(lightTheme.$light-theme, "layer-selected-01");
+$light-layer-hover-01: map.get(lightTheme.$light-theme, "layer-hover-01");
 $light-layer-selected-hover-01: map.get(
     lightTheme.$light-theme,
-    'layer-selected-hover-01'
+    "layer-selected-hover-01"
 );
-$light-link-primary: map.get(lightTheme.$light-theme, 'link-primary');
+$light-link-primary: map.get(lightTheme.$light-theme, "link-primary");
 $light-link-primary-hover: map.get(
     lightTheme.$light-theme,
-    'link-primary-hover'
+    "link-primary-hover"
+);
+$light-background-inverse: map.get(
+    lightTheme.$light-theme,
+    "background-inverse"
 );
-$light-background-inverse: map.get(lightTheme.$light-theme, 'background-inverse');
 
 //border
 $light-border-interactive: map.get(
     lightTheme.$light-theme,
-    'border-interactive'
+    "border-interactive"
 );
-$light-border-subtle-00: map.get(lightTheme.$light-theme, 'border-subtle-00');
-$light-border-strong-01: map.get(lightTheme.$light-theme, 'border-strong-01');
+$light-border-subtle-00: map.get(lightTheme.$light-theme, "border-subtle-00");
+$light-border-strong-01: map.get(lightTheme.$light-theme, "border-strong-01");
 
 //text
-$light-text-primary: map.get(lightTheme.$light-theme, 'text-primary');
-$light-text-secondary: map.get(lightTheme.$light-theme, 'text-secondary');
-$light-text-error: map.get(lightTheme.$light-theme, 'text-error');
+$light-text-primary: map.get(lightTheme.$light-theme, "text-primary");
+$light-text-secondary: map.get(lightTheme.$light-theme, "text-secondary");
+$light-text-error: map.get(lightTheme.$light-theme, "text-error");
 
-$light-background-brand: map.get(lightTheme.$light-theme, 'background-brand');
-$light-interactive: map.get(lightTheme.$light-theme, 'interactive');
+$light-background-brand: map.get(lightTheme.$light-theme, "background-brand");
+$light-interactive: map.get(lightTheme.$light-theme, "interactive");
 
 //background
-$light-layer-one: map.get(lightTheme.$light-theme, 'layer-01');
-$light-layer-two: map.get(lightTheme.$light-theme, 'layer-02');
+$light-layer-one: map.get(lightTheme.$light-theme, "layer-01");
+$light-layer-two: map.get(lightTheme.$light-theme, "layer-02");
 
 //support
-$light-support-error: map.get(lightTheme.$light-theme, 'support-error');
-$light-support-success: map.get(lightTheme.$light-theme, 'support-success');
+$light-support-error: map.get(lightTheme.$light-theme, "support-error");
+$light-support-success: map.get(lightTheme.$light-theme, "support-success");
 
 //icon
-$light-icon-primary: map.get(lightTheme.$light-theme, 'icon-primary');
-$light-icon-on-color: map.get(lightTheme.$light-theme, 'icon-on-color');
+$light-icon-primary: map.get(lightTheme.$light-theme, "icon-primary");
+$light-icon-on-color: map.get(lightTheme.$light-theme, "icon-on-color");