Quellcode durchsuchen

nuevo componente para los encabezados de las vistas de listas

robert2206 vor 8 Jahren
Ursprung
Commit
5ea926d8df

+ 1 - 1
src/app/app.component.ts

@@ -45,7 +45,7 @@ export class OdooMobileApp {
                         component: CustomerListPage
                     },
                     {
-                        visible: false,
+                        visible: true,
                         title: "Presupuestos",
                         icon: "basket",
                         component: BudgetListPage 

+ 12 - 1
src/app/app.module.ts

@@ -6,10 +6,13 @@ import { LoginPage } from '../pages/login/login';
 import { HallPage } from '../pages/hall/hall';
 import { HomePage } from '../pages/home/home';
 
+import { OdooListHeader } from "../components/odoo-list-header/odoo-list-header";
+
 import { CustomerListPage } from '../pages/customer-list/customer-list';
 import { CustomerOptions } from "../pages/customer-list/customer-options";
 import { CustomerDetailsPage } from "../pages/customer-details/customer-details";
 import { BudgetListPage } from '../pages/budget-list/budget-list';
+import { BudgetDetailsPage } from "../pages/budget-details/budget-details";
 import { ProductListPage } from '../pages/product-list/product-list';
 import { ProductOptions } from '../pages/product-list/product-options';
 import { ProductDetailsPage } from '../pages/product-details/product-details';
@@ -46,6 +49,7 @@ import { DoubleTapDirective } from "../directives/double-tap-directive";
 @NgModule({
     declarations: [
         OdooMobileApp,
+        // Pages
         LoginPage,
         HallPage,
         HomePage,
@@ -53,6 +57,7 @@ import { DoubleTapDirective } from "../directives/double-tap-directive";
         CustomerOptions,
         CustomerDetailsPage,
         BudgetListPage,
+        BudgetDetailsPage,
         ProductListPage,
         ProductOptions,
         ProductDetailsPage,
@@ -64,11 +69,15 @@ import { DoubleTapDirective } from "../directives/double-tap-directive";
         ToolsPage,
         SettingsPage,
         AboutPage,
+        // Pipes
         ViewMenuPipe,
         ImageSanitizerPipe,
         ProductAttributeLinePipe,
         ProductAttributeValuePipe,
-        DoubleTapDirective
+        // Directives
+        DoubleTapDirective,
+        // Components
+        OdooListHeader
     ],
     imports: [
         IonicModule.forRoot(OdooMobileApp),
@@ -77,6 +86,7 @@ import { DoubleTapDirective } from "../directives/double-tap-directive";
     bootstrap: [IonicApp],
     entryComponents: [
         OdooMobileApp,
+        // Pages
         LoginPage,
         HallPage,
         HomePage,
@@ -84,6 +94,7 @@ import { DoubleTapDirective } from "../directives/double-tap-directive";
         CustomerOptions,
         CustomerDetailsPage,
         BudgetListPage,
+        BudgetDetailsPage,
         ProductListPage,
         ProductOptions,
         ProductDetailsPage,

+ 25 - 0
src/components/odoo-list-header/odoo-list-header.html

@@ -0,0 +1,25 @@
+<ion-header>
+    <ion-navbar color="primary">
+        <button ion-button menuToggle>
+            <ion-icon name="menu"></ion-icon>
+        </button>
+
+        <ion-title>{{ title }}</ion-title>
+
+        <ion-buttons end>
+            <button ion-button (click)="toggleSearch()">
+                <ion-icon color="ligth" name="search"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-navbar>
+</ion-header>
+
+<ion-toolbar color="primary" *ngIf="isSearchMode()">
+    <ion-searchbar placeholder="Buscar" debounce="1000" (ionInput)="searchInput($event)"></ion-searchbar>
+    
+    <ion-buttons end>
+        <button ion-button (click)="toggleSearch()">
+            <ion-icon name="arrow-forward"></ion-icon>
+        </button>
+    </ion-buttons>
+</ion-toolbar>

+ 47 - 0
src/components/odoo-list-header/odoo-list-header.ts

@@ -0,0 +1,47 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+
+@Component({
+    selector: "odoo-list-header",
+    templateUrl: "odoo-list-header.html"
+})
+export class OdooListHeader {
+
+    searchMode: boolean;
+
+    @Input()
+    title: string;
+
+    @Output()
+    toggle: EventEmitter<any>;
+
+    @Output()
+    search: EventEmitter<any>;
+
+    constructor() { 
+        this.searchMode = false;
+        this.toggle = new EventEmitter();
+        this.search = new EventEmitter();
+    }
+
+    /**
+     *
+     */
+    toggleSearch(): void {
+        this.searchMode = !this.searchMode;
+        this.toggle.emit();
+    }
+
+    /**
+     *
+     */
+    isSearchMode(): boolean {
+        return this.searchMode;
+    }
+
+    /**
+     *
+     */
+    searchInput(event): void {
+        this.search.emit(event);
+    } 
+}

+ 3 - 2
src/pages/budget-details/budget-details.html

@@ -2,10 +2,11 @@
     <ion-navbar>
         <ion-title>Presupuesto</ion-title>
     </ion-navbar>
-
 </ion-header>
 
 
-<ion-content padding>
+<ion-content>
+
+    <h2>Hello</h2>
 
 </ion-content>

+ 1 - 20
src/pages/budget-list/budget-list.html

@@ -1,23 +1,4 @@
-<ion-header>
-
-    <ion-navbar color="primary">
-        <button ion-button menuToggle>
-            <ion-icon name="menu"></ion-icon>
-        </button>
-
-        <ion-title>Presupuestos</ion-title>
-    </ion-navbar>
-
-</ion-header>
-
-<ion-toolbar color="primary" *ngIf="isSearchMode()">
-    <ion-searchbar placeholder="Buscar" debounce="1000" (ionInput)="search($event)"></ion-searchbar>
-    <ion-buttons end>
-        <button ion-button (click)="toggleSearch()">
-            <ion-icon name="arrow-forward"></ion-icon>
-        </button>
-    </ion-buttons>
-</ion-toolbar>
+<odoo-list-header [title]="'Presupuestos'" (toggle)="toggleSearch()" (search)="search($event)"></odoo-list-header>
 
 <ion-content>
 

+ 5 - 0
src/pages/budget-list/budget-list.ts

@@ -65,4 +65,9 @@ export class BudgetListPage extends DefaultListable<SaleOrder> implements INavig
     showOptions(): void {
         
     }
+
+    test() {
+        console.log("ok");
+        
+    }
 }