[Feature] Rebuild the Form element

Author: qianmoQ

src/renderer/app/layout/layout.routing.ts

@@ -43,10 +43,6 @@ const LAYOUT_ROUTES: Routes = [
             path: 'scrollbar',
             loadChildren: () => import('../pages/component/scrollbar/scrollbar.module').then(m => m.ScrollbarModule)
           },
-          {
-            path: 'datepicker',
-            loadChildren: () => import('../pages/component/datepicker/datepicker.module').then(m => m.DatepickerModule)
-          },
           {
             path: 'carousel',
             loadChildren: () => import('../pages/component/carousel/carousel.module').then(m => m.CarouselComponentModule)
@@ -63,10 +59,6 @@ const LAYOUT_ROUTES: Routes = [
             path: 'sortable',
             loadChildren: () => import('../pages/component/sortable/sortable.module').then(m => m.SortableComponentModule)
           },
-          {
-            path: 'rating',
-            loadChildren: () => import('../pages/component/rating/rating.module').then(m => m.RatingComponentModule)
-          },
           {
             path: 'alert',
             loadChildren: () => import('../pages/component/alert/alert.module').then(m => m.AlertsComponentModule)
@@ -83,10 +75,6 @@ const LAYOUT_ROUTES: Routes = [
             path: 'typeahead',
             loadChildren: () => import('../pages/component/typeahead/typeahead.module').then(m => m.TypeaheadComponentModule)
           },
-          {
-            path: 'timepicker',
-            loadChildren: () => import('../pages/component/timepicker/timepicker.module').then(m => m.TimepickerComponentModule)
-          },
           {
             path: 'accordion',
             loadChildren: () => import('../pages/component/accordion/accordion.module').then(m => m.AccordionComponentModule)
@@ -101,6 +89,23 @@ const LAYOUT_ROUTES: Routes = [
           }
         ]
       },
+      {
+        path: 'form',
+        children: [
+          {
+            path: 'datepicker',
+            loadChildren: () => import('../pages/form/datepicker/datepicker.module').then(m => m.DatepickerModule)
+          },
+          {
+            path: 'timepicker',
+            loadChildren: () => import('../pages/form/timepicker/timepicker.module').then(m => m.TimepickerComponentModule)
+          },
+          {
+            path: 'rating',
+            loadChildren: () => import('../pages/form/rating/rating.module').then(m => m.RatingComponentModule)
+          }
+        ]
+      },
       {
         path: 'directive',
         children: [

src/renderer/app/layout/navigation/navigation.component.html

@@ -26,9 +26,6 @@
           <li routerLinkActive="navigation__active">
             <a [routerLink]="['/component/scrollbar']"><i class="fa fa-bars"></i> Scrollbar</a>
           </li>
-          <li routerLinkActive="navigation__active">
-            <a [routerLink]="['/component/datepicker']"><i class="fa fa-clock-o"></i> Datepicker</a>
-          </li>
           <li routerLinkActive="navigation__active">
             <a [routerLink]="['/component/carousel']"><i class="fa fa-calculator"></i> Carousel</a>
           </li>
@@ -41,9 +38,6 @@
           <li routerLinkActive="navigation__active">
             <a [routerLink]="['/component/sortable']"><i class="fa fa-sort"></i> Sortable</a>
           </li>
-          <li routerLinkActive="navigation__active">
-            <a [routerLink]="['/component/rating']"><i class="fa fa-random"></i> Rating</a>
-          </li>
           <li routerLinkActive="navigation__active">
             <a [routerLink]="['/component/alert']"><i class="fa fa-warning"></i> Alert</a>
           </li>
@@ -56,9 +50,6 @@
           <li routerLinkActive="navigation__active">
             <a [routerLink]="['/component/typeahead']"><i class="fa fa-tty"></i> Typeahead</a>
           </li>
-          <li routerLinkActive="navigation__active">
-            <a [routerLink]="['/component/timepicker']"><i class="fa fa-times-circle"></i> Timepicker</a>
-          </li>
           <li routerLinkActive="navigation__active">
             <a [routerLink]="['/component/accordion']"><i class="fa fa-universal-access"></i> Accordion</a>
           </li>
@@ -70,6 +61,21 @@
           </li>
         </ul>
       </li>
+      <li routerLinkActive="navigation__sub--active" class="navigation__sub">
+        <a (click)="toggleNavigationSub('Form', $event)">
+          <i class="zmdi zmdi-text-format"></i> Form</a>
+        <ul [@toggleHeight]="navigationSubState.Form">
+          <li routerLinkActive="navigation__active">
+            <a [routerLink]="['/form/timepicker']"><i class="fa fa-times-circle"></i> Timepicker</a>
+          </li>
+          <li routerLinkActive="navigation__active">
+            <a [routerLink]="['/form/datepicker']"><i class="fa fa-clock-o"></i> Datepicker</a>
+          </li>
+          <li routerLinkActive="navigation__active">
+            <a [routerLink]="['/form/rating']"><i class="fa fa-random"></i> Rating</a>
+          </li>
+        </ul>
+      </li>
       <li routerLinkActive="navigation__sub--active" class="navigation__sub">
         <a (click)="toggleNavigationSub('Directive', $event)">
           <i class="zmdi zmdi-chart"></i> Directive</a>

src/renderer/app/layout/navigation/navigation.component.ts

@@ -27,7 +27,8 @@ export class NavigationComponent implements OnInit {
     Icon: 'inactive',
     Component: 'inactive',
     Directive: 'inactive',
-    Error: 'inactive'
+    Error: 'inactive',
+    Form: 'inactive'
   };
 
   constructor(private navigationService: NavigationService) {