Merged PR 1828: #5005 Datepicker UI

#5005 Datepicker UI

apps/isa-app/src/app/guards/can-activate-goods-in.guard.ts

@@ -14,7 +14,10 @@ export class CanActivateGoodsInGuard {
 
   async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const pid = this._config.get('process.ids.goodsIn', z.number());
-    const process = await this._applicationService.getProcessById$(pid).pipe(first()).toPromise();
+    const process = await this._applicationService
+      .getProcessById$(pid)
+      .pipe(first())
+      .toPromise();
     if (!process) {
       await this._applicationService.createProcess({
         id: this._config.get('process.ids.goodsIn'),
@@ -23,7 +26,9 @@ export class CanActivateGoodsInGuard {
         name: '',
       });
     }
-    this._applicationService.activateProcess(this._config.get('process.ids.goodsIn'));
+    this._applicationService.activateProcess(
+      this._config.get('process.ids.goodsIn'),
+    );
     return true;
   }
 }

apps/isa-app/src/main.ts

@@ -1,8 +1,11 @@
 import { enableProdMode, isDevMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { CONFIG_DATA } from '@isa/core/config';
+import { setDefaultOptions } from 'date-fns';
+import { de } from 'date-fns/locale';
 import * as moment from 'moment';
 
+setDefaultOptions({ locale: de });
 moment.locale('de');
 
 import { AppModule } from './app/app.module';
@@ -16,7 +19,9 @@ async function bootstrap() {
 
   const config = await configRes.json();
 
-  platformBrowserDynamic([{ provide: CONFIG_DATA, useValue: config }]).bootstrapModule(AppModule);
+  platformBrowserDynamic([
+    { provide: CONFIG_DATA, useValue: config },
+  ]).bootstrapModule(AppModule);
 }
 
 try {
@@ -24,4 +29,3 @@ try {
 } catch (error) {
   console.error(error);
 }
-

apps/isa-app/src/ui.scss

@@ -1,3 +1,4 @@
-@use "../../../libs/ui/buttons/src/buttons.scss";
-@use "../../../libs/ui/input-controls/src/input-controls.scss";
-@use "../../../libs/ui/progress-bar/src/lib/progress-bar.scss";
+@use '../../../libs/ui/buttons/src/buttons.scss';
+@use '../../../libs/ui/datepicker/src/datepicker.scss';
+@use '../../../libs/ui/input-controls/src/input-controls.scss';
+@use '../../../libs/ui/progress-bar/src/lib/progress-bar.scss';

apps/isa-app/stories/ui/datepicker/ui-datepicker.stories.ts

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { DateRangeValue, RangeDatepickerComponent } from '@isa/ui/datepicker';
+
+interface DatepickerComponentInputs {
+  value: DateRangeValue;
+  min: Date;
+  max: Date;
+}
+
+const meta: Meta<RangeDatepickerComponent> = {
+  title: 'ui/datepicker/Datepicker',
+  component: RangeDatepickerComponent,
+  argTypes: {
+    value: { control: 'object' },
+    min: { control: 'date' },
+    max: { control: 'date' },
+  },
+  args: {
+    value: undefined,
+    min: new Date(2022, 0, 1),
+    max: new Date(2026, 11, 31),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<DatepickerComponentInputs>;
+
+export const Default: Story = {
+  args: {
+    value: [new Date(), new Date(Date.now() + 5 * 24 * 60 * 60 * 1000)], // Start: today, End: 5 days after today
+  },
+};