feat: allow to add new subscription

src/app/components/events/event-filter/event-filter.component.html

@@ -53,8 +53,7 @@ <h2>{{ 'COMPONENTS.FILTER.GENRE' | translate }}</h2>
                 [disabled]="eventsFilterService.numberOfFilters === 0">
             {{ 'COMPONENTS.FILTER.DELETE_FILTER' | translate }}
         </button>
-        <button type="button" class="clndr accent" (click)="createSubscription()"
-                [disabled]="eventsFilterService.numberOfFilters === 0">
+        <button type="button" class="clndr accent" (click)="createSubscription()">
             {{ 'COMPONENTS.FILTER.ABO_FILTER' | translate }}
         </button>
     </div>

src/app/shared/components/forms/subscription/subscription.component.html

@@ -6,6 +6,10 @@
     <div class="mb-3">
         <label for="name" class="form-label">
             {{ 'FORMS.SUBSCRIPTION.NAME' | translate }}
+            <app-info-button>
+                <b>{{ 'FORMS.SUBSCRIPTION.NAME_DESC_TITLE' | translate }}:</b>
+                {{ 'FORMS.SUBSCRIPTION.NAME_DESC_TEXT' | translate }}
+            </app-info-button>
         </label>
         <input formControlName="name" type="text" class="form-control" id="name"
                [class.is-invalid]="isFieldInvalid('name')">
@@ -16,7 +20,10 @@
 
     <div class="row" *ngIf="subscription?.id">
         <div class="col" formArrayName="genres">
-            {{ 'FORMS.SUBSCRIPTION.GENRES' | translate }} *<br>
+            {{ 'FORMS.SUBSCRIPTION.GENRES' | translate }} *
+            <app-info-button>
+                {{ 'FORMS.SUBSCRIPTION.GENRES_DESC_TEXT' | translate }}
+            </app-info-button>
             <div class="form-check" *ngFor="let genre of genres; let i = index"
                  [class.is-invalid]="isFieldInvalid('genres')">
                 <input class="form-check-input" type="checkbox" value="{{ genre }}" id="genre-{{genre.id}}"
@@ -30,7 +37,10 @@
             </div>
         </div>
         <div class="col" formArrayName="regions">
-            {{ 'FORMS.SUBSCRIPTION.REGIONS' | translate }} *<br>
+            {{ 'FORMS.SUBSCRIPTION.REGIONS' | translate }} *
+            <app-info-button>
+                {{ 'FORMS.SUBSCRIPTION.REGIONS_DESC_TEXT' | translate }}
+            </app-info-button>
             <div class="form-check" *ngFor="let region of regions; let i = index"
                  [class.is-invalid]="isFieldInvalid('regions')">
                 <input class="form-check-input" type="checkbox" value="{{ region }}" id="region-{{region.id}}"
@@ -45,7 +55,7 @@
         </div>
     </div>
 
-    <div class="mb-3" *ngIf="subscription?.id">
+    <div class="mb-3 mt-3" *ngIf="subscription?.id">
         <label for="searchTerm" class="form-label">
             {{ 'FORMS.SUBSCRIPTION.SEARCH_TERM' | translate }}
         </label>

src/app/shared/components/forms/subscription/subscription.component.ts

@@ -56,7 +56,7 @@ export class SubscriptionComponent {
         subscriptionToSave.genres = this.transformFormArrayToDto('genres', this.genres);
         subscriptionToSave.regions = this.transformFormArrayToDto('regions', this.regions);
 
-        if (this.subscription?.id) {
+        if (this.subscription?.id && this.subscription.id !== 'xxx') {
             this.subscriptionsService.updateSubscription(subscriptionToSave).subscribe(() => {
                 this.success.emit();
             });

src/app/user-area/pages/my-subscriptions/my-subscriptions.component.html

@@ -1,6 +1,12 @@
-<section class="content-wide">
+<section class="content-limited">
     <h1>Mes abunaments</h1>
 
+    <p *ngIf="!isLoading && subscriptions.length === 0">
+        Ti has registrà anc nagins abunaments.
+    </p>
+
+    <button class="clndr accent" (click)="createNew()" style="margin-bottom: 24px;">Agiuntar in nov abunament</button>
+
     <table class="table table-striped" *ngIf="!isLoading && subscriptions.length > 0">
         <thead class="table-light">
         <tr>
@@ -47,8 +53,4 @@ <h1>Mes abunaments</h1>
         </tbody>
     </table>
 
-    <p *ngIf="!isLoading && subscriptions.length === 0">
-        Ti has registrà anc nagins abunaments.
-    </p>
-
 </section>

src/app/user-area/pages/my-subscriptions/my-subscriptions.component.ts

@@ -33,6 +33,10 @@ export class MySubscriptionsComponent {
         return subscription.regions.map(region => region.name).join(', ');
     }
 
+    createNew() {
+        this.router.navigateByUrl("/user/subscriptions/new");
+    }
+
     edit(subscription: Subscription) {
         this.router.navigateByUrl('/user/subscriptions/' + subscription.id);
     }

src/app/user-area/pages/new-subscription/new-subscription.component.html

@@ -0,0 +1,5 @@
+<section class="content-narrow">
+    <h1>{{ 'COMPONENTS.MODALS.NEW_SUBSCRIPTION.TITLE' | translate }}</h1>
+
+    <app-subscription [subscription]="subscription" (success)="success()" (cancel)="cancel()"></app-subscription>
+</section>

src/app/user-area/pages/new-subscription/new-subscription.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewSubscriptionComponent } from './new-subscription.component';
+
+describe('NewSubscriptionComponent', () => {
+  let component: NewSubscriptionComponent;
+  let fixture: ComponentFixture<NewSubscriptionComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NewSubscriptionComponent]
+    });
+    fixture = TestBed.createComponent(NewSubscriptionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user-area/pages/new-subscription/new-subscription.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { Subscription } from '../../../shared/data/subscription';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-new-subscription',
+    templateUrl: './new-subscription.component.html',
+    styleUrls: ['./new-subscription.component.scss']
+})
+export class NewSubscriptionComponent {
+    subscription: Subscription;
+
+    constructor(private router: Router) {
+        this.subscription = new Subscription();
+        this.subscription.id = 'xxx';
+    }
+
+    success() {
+        this.router.navigateByUrl("/user/subscriptions");
+    }
+
+    cancel() {
+        this.router.navigateByUrl("/user/subscriptions");
+    }
+}

src/app/user-area/user-area-routing.module.ts

@@ -18,6 +18,7 @@ import { ProfileComponent } from './pages/profile/profile.component';
 import { ChangePasswordComponent } from './pages/change-password/change-password.component';
 import { DeleteAccountComponent } from './pages/delete-account/delete-account.component';
 import { eventFormFilledGuard } from '../routing/form-filled.guard';
+import { NewSubscriptionComponent } from './pages/new-subscription/new-subscription.component';
 
 
 const routes: Routes = [
@@ -37,6 +38,10 @@ const routes: Routes = [
                 path: '',
                 component: MySubscriptionsComponent, canActivate: [authGuard()]
             },
+            {
+                path: 'new',
+                component: NewSubscriptionComponent, canActivate: [authGuard()]
+            },
             {
                 path: ':id',
                 pathMatch: 'full',

src/app/user-area/user-area.module.ts

@@ -17,6 +17,7 @@ import { ConfirmEmailComponent } from './pages/confirm-email/confirm-email.compo
 import { ConfirmPasswordComponent } from './pages/confirm-password/confirm-password.component';
 import { UserAreaRoutingModule } from './user-area-routing.module';
 import { SharedModule } from '../shared/shared.module';
+import { NewSubscriptionComponent } from './pages/new-subscription/new-subscription.component';
 
 @NgModule({
     declarations: [
@@ -35,6 +36,7 @@ import { SharedModule } from '../shared/shared.module';
         RegisterComponent,
         ConfirmEmailComponent,
         ConfirmPasswordComponent,
+        NewSubscriptionComponent,
     ],
     imports: [
         CommonModule,

src/assets/i18n/rm.json

@@ -95,7 +95,7 @@
             },
             "NEW_SUBSCRIPTION": {
                 "TITLE": "Crear in nov abunament",
-                "DESCRIPTION": "Ti pos abunar occurrenzas tenor tes criteris."
+                "DESCRIPTION": "Ti pos abunar occurrenzas tenor ils criteris tschernids."
             }
         },
         "NEW_EVENT_BTN": {
@@ -163,11 +163,15 @@
             "ADD_IMAGE_OR_DOCUMENT_INVALID_FILE_SIZE": "La datoteca na dastga betg esser pli gronda che 20MB."
         },
         "SUBSCRIPTION": {
-            "NAME": "Num",
+            "NAME": "Num da l'abunament",
+            "NAME_DESC_TITLE": "Num da l'abunament",
+            "NAME_DESC_TEXT": "Quai num vign mussà a vus en l'email (p.ex. «Litteratura en l'Engiadina Bassa» u «tut»)",
             "NAME_ERROR": "Endatescha p.pl. in num.",
             "GENRES": "categorias",
+            "GENRES_DESC_TEXT": "Tscherna las categorias che ti vuls vegnir infurmà. Tscherner nagut per vegnir infurmà davart tut las categorias.",
             "GENRES_ERROR": "Tscherna almain ina categoria.",
             "REGIONS": "regiuns",
+            "REGIONS_DESC_TEXT": "Tscherna las regiuns che ti vuls vegnir infurmà. Tscherner nagut per vegnir infurmà davart tut las regiuns.",
             "REGIONS_ERROR": "Tscherna almain ina regiun.",
             "SEARCH_TERM": "Term da tschertga",
             "SEARCH_TERM_ERROR": "Endatescha p.pl. in term da tschertga.",

src/styles.scss

@@ -67,6 +67,16 @@ section.content-narrow {
     }
 }
 
+section.content-limited {
+    padding: 0 0.5rem;
+
+    @include media-breakpoint-up(lg) {
+        padding: unset;
+        max-width: 1200px;
+        margin: 2rem auto;
+    }
+}
+
 section.content-wide {
     margin: 2rem;
 }
@@ -94,6 +104,14 @@ a {
     }
 }
 
+table {
+    thead {
+        tr {
+            font-family: "CadizBlack", sans-serif;
+        }
+    }
+}
+
 button.clndr {
     background-color: white;
     border: 1px solid black;