fam-archetype-app 0.0.1

package/src/fam-archetype-app/files/src/core/layout/component/menu/menu.component.scss

@@ -0,0 +1,163 @@
+//.layout-sidebar {
+//  position: fixed;
+//  width: 20rem;
+//  height: calc(100vh - 8rem);
+//  z-index: 999;
+//  overflow-y: auto;
+//  user-select: none;
+//  top: 6rem;
+//  left: 2rem;
+//  transition:
+//    transform 0.2s,
+//    left 0.2s;
+//  background-color: var(--p-overlay-popover-background);
+//  border-radius: var(--p-content-border-radius);
+//  padding: 0.5rem 1.5rem;
+//}
+
+.layout-menu {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  .layout-root-menuitem {
+    > .layout-menuitem-root-text {
+      font-size: 0.857rem;
+      text-transform: uppercase;
+      font-weight: 700;
+      color: var(--p-text-color);
+      margin: 0.75rem 0;
+    }
+
+    > a {
+      display: none;
+    }
+  }
+
+  a {
+    user-select: none;
+
+    &.active-menuitem {
+      > .layout-submenu-toggler {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  li.active-menuitem {
+    > a {
+      .layout-submenu-toggler {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    a {
+      display: flex;
+      align-items: center;
+      position: relative;
+      outline: 0 none;
+      color: var(--p-text-color);
+      cursor: pointer;
+      padding: 0.75rem 1rem;
+      border-radius: var(--p-content-border-radius);
+      transition:
+        background-color var(--p-transition-duration),
+        box-shadow var(--p-transition-duration);
+
+      .layout-menuitem-icon {
+        margin-right: 0.5rem;
+      }
+
+      .layout-submenu-toggler {
+        font-size: 75%;
+        margin-left: auto;
+        transition: transform var(--p-transition-duration);
+      }
+
+      &.active-route {
+        font-weight: 700;
+        color: var(--p-primary-color);
+      }
+
+      &:hover {
+        background-color: var(--p-content-hover-background);
+      }
+
+      &:focus {
+        outline-offset: -1px;
+        box-shadow: inset var(--p-focus-ring-shadow);
+      }
+    }
+
+    ul {
+      overflow: hidden;
+      border-radius: var(--p-content-border-radius);
+
+      li {
+        a {
+          margin-left: 1rem;
+        }
+
+        li {
+          a {
+            margin-left: 2rem;
+          }
+
+          li {
+            a {
+              margin-left: 2.5rem;
+            }
+
+            li {
+              a {
+                margin-left: 3rem;
+              }
+
+              li {
+                a {
+                  margin-left: 3.5rem;
+                }
+
+                li {
+                  a {
+                    margin-left: 4rem;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ::ng-deep .p-panelmenu-panel {
+    border: none !important;
+  }
+}
+
+.layout-submenu-enter-from,
+.layout-submenu-leave-to {
+  max-height: 0;
+}
+
+.layout-submenu-enter-to,
+.layout-submenu-leave-from {
+  max-height: 1000px;
+}
+
+.layout-submenu-leave-active {
+  overflow: hidden;
+  transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.layout-submenu-enter-active {
+  overflow: hidden;
+  transition: max-height 1s ease-in-out;
+}

package/src/fam-archetype-app/files/src/core/layout/component/menuitem/menuitem.component.html

@@ -0,0 +1,39 @@
+<li>
+<!--    <ng-container>-->
+<!--        <div *ngIf="root" class="layout-menuitem-root-text">{{ item.label }}</div> -->
+<!--        <a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>-->
+<!--            <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>-->
+<!--            <span class="layout-menuitem-text">{{ item.label }}</span>-->
+<!--            <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>-->
+<!--        </a>-->
+        <a
+            *ngIf="item.routerLink && !item.items"
+            (click)="itemClick($event)"
+            [ngClass]="item.styleClass"
+            [routerLink]="item.routerLink"
+            routerLinkActive="active-route"
+            [routerLinkActiveOptions]="item.routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
+            [fragment]="item.fragment"
+            [queryParamsHandling]="item.queryParamsHandling"
+            [preserveFragment]="item.preserveFragment"
+            [skipLocationChange]="item.skipLocationChange"
+            [replaceUrl]="item.replaceUrl"
+            [state]="item.state"
+            [queryParams]="item.queryParams"
+            [attr.target]="item.target"
+            tabindex="0"
+            pRipple
+        >
+            <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+            <span class="layout-menuitem-text">{{ item.label }}</span>
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+        </a>
+
+        <ul *ngIf="item.items">
+            <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+                <app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']"></app-menuitem>
+            </ng-template>
+        </ul>
+<!--    </ng-container>-->
+</li>
+

package/src/fam-archetype-app/files/src/core/layout/component/menuitem/menuitem.component.scss

@@ -0,0 +1,44 @@
+.layout-menuitem-root-text {
+  font-size: 0.857rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--p-text-color);
+  margin: 0.75rem 0;
+}
+
+a {
+  user-select: none;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  a {
+    display: flex;
+    align-items: center;
+    position: relative;
+    outline: 0 none;
+    color: var(--p-text-color);
+    cursor: pointer;
+    padding: 0.75rem 1rem;
+    border-radius: var(--p-content-border-radius);
+    transition:
+            background-color var(--p-transition-duration),
+            box-shadow var(--p-transition-duration);
+
+    .layout-menuitem-icon {
+      margin-right: 0.5rem;
+    }
+
+    &.active-route {
+      font-weight: 700;
+      color: var(--p-primary-color);
+    }
+
+    &:hover {
+      background-color: var(--p-content-hover-background);
+    }
+  }
+}

package/src/fam-archetype-app/files/src/core/layout/component/not-found/not-found.component.html

@@ -0,0 +1,12 @@
+<div class="flex items-center justify-center min-h-screen overflow-hidden">
+    <div class="flex flex-col items-center justify-center">
+        <div class="diba-error-container">
+            <div class="diba-rounded-border w-full bg-surface-0 dark:bg-surface-900 p-16 flex flex-col items-center">
+                <span class="text-primary font-bold text-3xl">404</span>
+                <h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-4">Pàgina no trobada</h1>
+                <div class="text-surface-600 dark:text-surface-200 mb-16">La pàgina que cerqueu no es troba disponible.</div>
+                <p-button label="Retorneu a l'inici" routerLink="/" />
+            </div>
+        </div>
+    </div>
+</div>

package/src/fam-archetype-app/files/src/core/layout/component/not-found/not-found.component.scss

@@ -0,0 +1,17 @@
+.diba-error-container {
+  border-radius: 56px;
+  padding: 0.3rem;
+  background: linear-gradient(
+    180deg,
+    color-mix(
+      in srgb,
+      var(--p-primary-color),
+      transparent 60%
+    ) 10%,
+    var(--p-surface-100) 30%,
+  );
+}
+
+.diba-rounded-border {
+  border-radius: 53px;
+}

package/src/fam-archetype-app/files/src/core/layout/component/sidebar/sidebar.component.html

@@ -0,0 +1,13 @@
+<div #sidebar class="layout-sidebar {{ isActive() }}">
+    <app-menu></app-menu>
+    <div class="layout-sidebar-footer flex justify-end">
+        <button 
+            pButton 
+            type="button" 
+            label="Toogle Menu" 
+            class="text-base flex justify-end layout-topbar-action"
+            (click)="toggleMenu()">
+            <fa-icon [icon]="faArrowUp"></fa-icon>
+        </button>
+    </div>
+</div>

package/src/fam-archetype-app/files/src/core/layout/component/sidebar/sidebar.component.scss

@@ -0,0 +1,33 @@
+.layout-sidebar {
+  z-index: 1;
+  overflow-y: auto;
+  user-select: none;
+  //top: 3.5rem;
+  left: 0;
+  background-color: var(--p-overlay-popover-background);
+  border-radius: 0;
+  padding: 0.5rem 1.5rem;
+  transform: translateX(-100%);
+  border-right: 1px solid var(--p-content-border-color);
+  transition:
+          transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
+          left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
+  box-shadow:
+          0 3px 5px rgba(0, 0, 0, 0.02),
+          0 0 2px rgba(0, 0, 0, 0.05),
+          0 1px 4px rgba(0, 0, 0, 0.08);
+  display: none;
+
+  &.active {
+    transform: translateX(0);
+    display: block;
+    padding: 0.5rem 0rem;
+    //min-height: calc(100vh - 7rem);
+  }
+}
+
+.layout-sidebar-footer {
+  border-top: 1px solid var(--p-content-border-color);
+  padding-right: .65rem;
+  padding-top: .25rem;
+}

package/src/fam-archetype-app/files/src/core/layout/component/top-menu/top-menu.component.html

@@ -0,0 +1,12 @@
+<p-menubar [model]="model">
+<ng-template pTemplate="end">
+    <button 
+        pButton 
+        type="button" 
+        label="Toogle Menu" 
+        class="text-base mr-2 layout-topbar-action"
+        (click)="toggleMenu()">
+        <fa-icon [icon]="faArrowLeft"></fa-icon>
+    </button>
+  </ng-template>
+</p-menubar>

package/src/fam-archetype-app/files/src/core/layout/component/top-menu/top-menu.component.scss

@@ -0,0 +1,9 @@
+::ng-deep .p-menubar {
+  position: fixed;
+  top: 3.5rem;
+  width: 100%;
+  border: none;
+  --p-menubar-padding: 0;
+  --p-menubar-gap: 0;
+  z-index: 1100 !important; 
+}

package/src/fam-archetype-app/files/src/core/layout/component/topbar/_mixins.scss

@@ -0,0 +1,8 @@
+@mixin focused() {
+  outline: var(--p-focus-ring-color) var(--p-focus-ring-style) var(--p-focus-ring-width);
+  outline-offset: var(--p-focus-ring-offset);
+  box-shadow: var(--p-focus-ring-shadow);
+  transition:
+    box-shadow var(--p-transition-duration),
+    outline-color var(--p-transition-duration);
+}

package/src/fam-archetype-app/files/src/core/layout/component/topbar/topbar.component.html.template

@@ -0,0 +1,45 @@
+<div class="layout-topbar diba-topbar">
+    <div class="layout-topbar-logo-container">
+        <!--button *ngIf="!topMenuService.showTopMenu()" class="layout-menu-button layout-topbar-action" (click)="layoutService.onMenuToggle()">
+            <i class="pi pi-bars"></i>
+        </button-->
+        <a class="layout-topbar-logo" routerLink="/">
+            <img class="brand-logo" ngSrc="https://media.diba.cat/diba/maqueta/logos/logodiba_header.svg" alt="Diputació de Barcelona" width="120" height="40" priority>
+        </a>
+    </div>
+
+    <div class="layout-topbar-title-container absolute left-1/2 -translate-x-1/2">
+        <h2 class="layout-topbar-title-text mb-0"><%= name %></h2>
+    </div>
+
+    <div class="layout-topbar-actions">
+        <button class="layout-topbar-menu-button layout-topbar-action" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true">
+            <i class="pi pi-ellipsis-v"></i>
+        </button>
+
+        <div class="layout-topbar-menu hidden lg:block">
+            <div class="layout-topbar-menu-content">
+                <button 
+                    type="button" 
+                    class="layout-topbar-action" 
+                    (click)="onProfileClick()">
+                    <fa-icon [icon]="faUser"></fa-icon>
+                    <span>{{ 'PROFILE' | primengTranslation }}</span>
+                </button>
+                <button type="button" 
+                    class="layout-topbar-action"
+                    (click)="onEnvironmentClick()">
+                    <fa-icon [icon]="faCompass"></fa-icon>
+                    <span>{{ 'ENVIRONMENT' | primengTranslation }}</span>
+                </button>
+                <button 
+                    type="button" 
+                    class="layout-topbar-action"
+                    (click)="onLogoutClick()">
+                    <fa-icon [icon]="faArrowRightFromBracket"></fa-icon>
+                    <span>{{ 'LOGOUT' | primengTranslation }}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

package/src/fam-archetype-app/files/src/core/layout/component/topbar/topbar.component.scss

@@ -0,0 +1,77 @@
+@use 'mixins' as *;
+
+.layout-topbar {
+  //position: fixed;
+  height: 3.5rem;
+  z-index: 997;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding: 0 1rem;
+  background-color: var(--p-content-background);
+  transition: left 0.2s;
+  display: flex;
+  align-items: center;
+
+  .layout-topbar-logo-container {
+    width: 20rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .layout-topbar-logo {
+    display: inline-flex;
+    align-items: center;
+    font-size: 1.5rem;
+    border-radius: var(--p-content-border-radius);
+    color: var(--p-text-color);
+    font-weight: 500;
+    gap: 0.5rem;
+
+    svg {
+      width: 3rem;
+    }
+
+    &:focus-visible {
+      @include focused();
+    }
+  }
+
+  .layout-menu-button {
+    margin-right: 0.5rem;
+  }
+
+  .layout-topbar-menu-button {
+    display: none;
+  }
+
+  .layout-topbar-actions {
+    margin-left: auto;
+    display: flex;
+    gap: 1rem;
+  }
+
+  .layout-topbar-menu-content {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .layout-config-menu {
+    display: flex;
+    gap: 1rem;
+  }
+}
+
+.brand-logo {
+  height: 40px;
+}
+
+.logo-separator {
+  width: 2px; /* Thickness of the vertical line */
+  height: 35px; /* Adjust height as needed */
+  background-color: var(--p-primary-color);
+}
+
+.diba-topbar {
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.02), 0 0 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.08);
+}

package/src/fam-archetype-app/files/src/environments/environment.dev.ts.template

@@ -0,0 +1,12 @@
+export const environment = {
+    apiBaseUrl: '<%= apiUrl %>',
+    auth: {
+        disable_auth: true,
+        apiBaseSAMLUrl: '<%= apiSaml %>',
+        endpoints: {
+            session: '/session',
+            samlLogin: '/saml/login',
+            logout: '/saml/logoutSAMLRequest'
+        }
+    }
+};

package/src/fam-archetype-app/files/src/environments/environment.int.ts.template

@@ -0,0 +1,12 @@
+export const environment = {
+    apiBaseUrl: '<%= apiUrl %>',
+    auth: {
+        disable_auth: true,
+        apiBaseSAMLUrl: '<%= apiSaml %>',
+        endpoints: {
+            session: '/session',
+            samlLogin: '/saml/login',
+            logout: '/saml/logoutSAMLRequest'
+        }
+    }
+};

package/src/fam-archetype-app/files/src/environments/environment.pre.ts.template

@@ -0,0 +1,12 @@
+export const environment = {
+    apiBaseUrl: '<%= apiUrl %>',
+    auth: {
+        disable_auth: true,
+        apiBaseSAMLUrl: '<%= apiSaml %>',
+        endpoints: {
+            session: '/session',
+            samlLogin: '/saml/login',
+            logout: '/saml/logoutSAMLRequest'
+        }
+    }
+};

package/src/fam-archetype-app/files/src/environments/environment.ts.template

@@ -0,0 +1,12 @@
+export const environment = {
+    apiBaseUrl: '<%= apiUrl %>',
+    auth: {
+        disable_auth: true,
+        apiBaseSAMLUrl: '<%= apiSaml %>',
+        endpoints: {
+            session: '/session',
+            samlLogin: '/saml/login',
+            logout: '/saml/logoutSAMLRequest'
+        }
+    }
+};

package/src/fam-archetype-app/files/src/index.html.template

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title><%= name %></title>
+        <base href="/" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.o" />
+        <link rel="preconnect" href="https://media.diba.cat">
+        <link rel="stylesheet" type="text/css" href="https://maqueta.diba.cat/v4/assets/dist/diba-maqueta.min.css" crossorigin="anonymous">
+        <link rel="icon" type="image/x-icon" href="https://maqueta.diba.cat/v3/assets/img/favicon.ico" />
+        <link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet" />
+    </head>
+
+    <body>
+        <script src="https://kit.fontawesome.com/5bd7159fa2.js" crossorigin="anonymous"></script>
+        <app-root></app-root>
+    </body>
+</html>

package/src/fam-archetype-app/files/src/shared/filters/diba-filters/diba-filters.component.html

@@ -0,0 +1,69 @@
+<div class="border p-4 bg-gray-100 mb-4">
+        <div class="cursor-pointer flex justify-between" [class.pb-4]="expanded" (click)="expand()">
+        <span class="font-bold">{{ 'Filtres' || primengTranslation }}</span>
+        <span>
+        <div [class.hidden]="expanded"><i class="fa-solid fa-chevron-down text-xl text-primary-600"></i></div>
+        <div [class.hidden]="!expanded"><i  class="fa-solid fa-chevron-up text-xl text-primary-600"></i></div>
+        </span>
+        </div>
+        <div [ngClass]="{
+                'opacity-100 h-auto visible': expanded,
+                'opacity-0 h-0 invisible': !expanded
+                }">
+                <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+
+                        <div *ngFor="let filter of filters" class="self-center">
+                                <div *ngIf="filter.type===FilterType.TEXT">
+                                        <label for="filter.label" class="block mb-1">{{ filter.label | primengTranslation }}</label>
+                                        <input pInputText id="filter.label" [(ngModel)]="filter.value" class="w-full" />
+                                </div>
+                                <div *ngIf="filter.type===FilterType.SELECT">
+                                        <label for="filter.label" class="block mb-1">{{ filter.label | primengTranslation }}</label>
+                                        <p-select 
+                                                [options]="filter.selectValues" 
+                                                [(ngModel)]="filter.value" 
+                                                [filter]="true"
+                                                class="w-full" />
+                                </div>
+                                <div *ngIf="filter.type===FilterType.BOOLEAN">
+                                        <label for="filter.label" class="block mb-1">{{ filter.label | primengTranslation }}</label>
+                                        <p-select 
+                                                [options]="filter.selectValues" 
+                                                [(ngModel)]="filter.value"
+                                                class="w-full" />
+                                </div>
+                                <div *ngIf="filter.type===FilterType.DATE" class="">
+                                        <label for="filter.label" class="block mb-1">{{ filter.label | primengTranslation }}</label>
+                                        <p-datepicker 
+                                                id="filter.label" 
+                                                [(ngModel)]="filter.value"
+                                                [showIcon]="true"
+                                                dateFormat="dd/mm/yy"
+                                                (onSelect)="onDateSelect($event, filter.label)"
+                                        />
+                                </div>
+                                <div *ngIf="filter.type===FilterType.NUMBER" class="">
+                                        <label for="filter.label" class="block mb-1">{{ filter.label | primengTranslation }}</label>
+                                        <p-inputnumber 
+                                                id="filter.label" 
+                                                [(ngModel)]="filter.value"
+                                        />
+                                </div>
+                        </div>
+                        <div class="flex justify-end mt-4 gap-2 col-start-4">
+                                <p-button
+                                        class="btn-primary-diba"
+                                        label="{{ 'Filtra' | primengTranslation }}"
+                                        severity="success"
+                                        (onClick)="handleSearch()"
+                                ><i class="fa-solid fa-magnifying-glass"></i></p-button>
+                                <p-button
+                                        class="btn-secondary-diba"
+                                        label="{{ 'Neteja' | primengTranslation }}"
+                                        severity="success"
+                                        (onClick)="handleClean()"
+                                ><i class="fa-solid fa-eraser"></i></p-button>
+                        </div>
+                </div>
+        </div>
+</div>

package/src/fam-archetype-app/files/src/shared/styles/_movements.scss

@@ -0,0 +1,19 @@
+.type-decret {
+  background-color: #fdcb6eb3;
+}
+
+.type-ado {
+  background-color: #55efc4b3;
+}
+
+.type-pressupostos-factures {
+  background-color: #fab1a0b3;
+}
+
+.type-modificacio-credit {
+  background-color: #74b9ffb3;
+}
+
+.type-romanents {
+  background-color: #a29bfe;
+}

package/src/fam-archetype-app/files/src/shared/styles/global/_core.scss

@@ -0,0 +1,20 @@
+html {
+    height: 100%;
+    font-size: 15px;
+}
+
+body {
+    font-family: 'DiBa', 'Lato', sans-serif;
+    color: var(--p-text-color);
+    background-color: var(--p-surface-100);
+    margin: 0;
+    padding: 0;
+    min-height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.2;
+}
+
+a {
+    text-decoration: none;
+}