techlify-inventory-common 0.0.1

package/src/app/@modules/user-setting-button/user-setting-button.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { UserSettingButtonComponent } from "./user-setting-button/user-setting-button.component";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+import { MatMenuModule } from "@angular/material/menu";
+import { RouterModule } from "@angular/router";
+
+@NgModule({
+  declarations: [UserSettingButtonComponent],
+  exports: [UserSettingButtonComponent],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    RouterModule,
+  ],
+})
+export class UserSettingButtonModule {}

package/src/app/app-routing.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from "@angular/core";
+import { PreloadAllModules, RouterModule, Routes } from "@angular/router";
+import { AuthenticationGuard } from "ngx-techlify-core";
+
+const routes: Routes = [
+  {
+    path: "login",
+    loadChildren: () =>
+      import("ngx-techlify-core").then((mod) => mod.LoginModule),
+  },
+  {
+    path: "",
+    loadChildren: () =>
+      import("@modules/sidebar-layout/sidebar-layout.module").then(
+        (mod) => mod.SidebarLayoutModule
+      ),
+    canActivate: [AuthenticationGuard],
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
+  ],
+  exports: [RouterModule],
+  providers: [],
+})
+export class AppRoutingModule {}

package/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

package/src/app/app.component.scss

@@ -0,0 +1,43 @@
+table {
+  width: 100%;
+  margin: 10px;
+}
+
+.mt-10 {
+  margin-top: 5rem;
+}
+.mat-nav-link,
+.mat-nav-link:hover {
+  font-size: 14px;
+  text-decoration: none;
+}
+
+.toolbar-item-spacer {
+  flex: 1 1 auto;
+}
+
+.app-container {
+  height: 90%;
+  margin: 0;
+}
+.app-sidenav {
+  position: fixed;
+  left: 0;
+  max-width: calc(20%);
+  min-width: calc(20%);
+  max-height: calc(100%);
+  min-height: calc(100%);
+  box-shadow: none;
+  border-right: 1px solid rgb(173, 171, 171);
+}
+.app-sidenav-content {
+  display: flex;
+  height: 500px;
+  align-items: center;
+  justify-content: center;
+}
+
+.mat-list-item,
+.mat-expansion-panel-header {
+  color: rgb(0, 119, 255);
+}

package/src/app/app.component.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { AppComponent } from "./app.component";
+
+describe("AppComponent", () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
+    }).compileComponents();
+  });
+
+  it("should create the app", () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});

package/src/app/app.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit } from "@angular/core";
+import { CurrentUserService, HttpCacheService, User } from "ngx-techlify-core";
+import { NgxPermissionsService } from "ngx-permissions";
+import { NavigationEnd, Router } from "@angular/router";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
+})
+export class AppComponent implements OnInit {
+  constructor(
+    private httpCacheService: HttpCacheService,
+    private currentUserService: CurrentUserService,
+    private ngxPermissionsService: NgxPermissionsService,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    // Reset the cache for fresh load
+    this.httpCacheService.cleanCache();
+
+    // update the user and permissions
+    this.setupUserAndPermissionsAfterLogin();
+
+    this.refreshUser();
+  }
+
+  private refreshUser() {
+    this.currentUserService.getUserObservable(true).subscribe({
+      next: (user: User) => {
+        const permissions = ((user?.permissions as []) || []).map(
+          (x: any) => x.slug
+        );
+        if (user?.user_type_id === 1) {
+          permissions.push("app_admin");
+        } else if (user?.user_type_id === 2) {
+          permissions.push("client_admin");
+        } else if (user?.user_type_id === 3) {
+          permissions.push("client_user");
+        }
+        this.ngxPermissionsService.loadPermissions(permissions);
+      },
+    });
+  }
+
+  /**
+   * Listen for route change and update the user and permissions.
+   *
+   * @private
+   */
+  private setupUserAndPermissionsAfterLogin() {
+    // listen for route change after the login and reset the permissions
+    this.router.events.subscribe((event: any) => {
+      if (event instanceof NavigationEnd) {
+        if (event.url.trim() === "/") {
+          this.refreshUser();
+        }
+      }
+    });
+  }
+}

package/src/app/app.module.ts

@@ -0,0 +1,73 @@
+import { APP_INITIALIZER, NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import {
+  CoreModule,
+  HttpService,
+  MaterialModule,
+  TechlifyConfig,
+} from "ngx-techlify-core";
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { CurrentUserService, UserConfig } from "ngx-techlify-core";
+import { NgxPermissionsService, NgxPermissionsModule } from "ngx-permissions";
+import { DatePipe } from "@angular/common";
+import { environment } from "src/environments/environment";
+import { NgxSpinnerModule } from "ngx-spinner";
+import { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS } from "@angular/material/button-toggle";
+
+const userConfigInstance = new UserConfig(environment.user);
+const configInstance = new TechlifyConfig(environment);
+
+export const setupPermissionFactory = (
+  http: HttpService,
+  ps: NgxPermissionsService
+) =>
+  async function () {
+    const userInfo: any = await http.get("api/user/current").toPromise();
+    const permissions = ((userInfo?.user?.permissions as []) || []).map(
+      (x: any) => x.slug
+    );
+    if (userInfo?.user?.user_type_id === 1) {
+      permissions.push("app_admin");
+    } else if (userInfo?.user?.user_type_id === 2) {
+      permissions.push("client_admin");
+    } else {
+      permissions.push("client_user");
+    }
+    ps.loadPermissions(permissions);
+  };
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    BrowserModule,
+    CoreModule,
+    MaterialModule,
+    NgxPermissionsModule.forRoot(),
+    NgxSpinnerModule,
+  ],
+  providers: [
+    { provide: TechlifyConfig, useValue: configInstance },
+    { provide: UserConfig, useValue: userConfigInstance },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: setupPermissionFactory,
+      deps: [HttpService, NgxPermissionsService],
+      multi: true,
+    },
+    {
+      provide: MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,
+      useValue: {
+        hideSingleSelectionIndicator: true,
+        hideMultipleSelectionIndicator: true,
+      },
+    },
+    CurrentUserService,
+    DatePipe,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

package/src/app/material.module.ts

@@ -0,0 +1,95 @@
+/*
+ * This module imports and re-exports all Angular Material modules for convenience,
+ * so only 1 module import is needed in your feature modules.
+ * See https://material.angular.io/guide/getting-started#step-3-import-the-component-modules.
+ *
+ * To optimize your production builds, you should only import the components used in your app.
+ */
+
+import { NgModule } from "@angular/core";
+import {
+  MatCommonModule,
+  MatLineModule,
+  MatNativeDateModule,
+  MatPseudoCheckboxModule,
+  MatRippleModule,
+} from "@angular/material/core";
+import { MatOptionModule } from "@angular/material/core";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatBadgeModule } from "@angular/material/badge";
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonToggleModule } from "@angular/material/button-toggle";
+import { MatCardModule } from "@angular/material/card";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatChipsModule } from "@angular/material/chips";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatExpansionModule } from "@angular/material/expansion";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatGridListModule } from "@angular/material/grid-list";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatListModule } from "@angular/material/list";
+import { MatMenuModule } from "@angular/material/menu";
+import { MatPaginatorModule } from "@angular/material/paginator";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatRadioModule } from "@angular/material/radio";
+import { MatSelectModule } from "@angular/material/select";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { MatSliderModule } from "@angular/material/slider";
+import { MatSnackBarModule } from "@angular/material/snack-bar";
+import { MatSortModule } from "@angular/material/sort";
+import { MatStepperModule } from "@angular/material/stepper";
+import { MatTableModule } from "@angular/material/table";
+import { MatTabsModule } from "@angular/material/tabs";
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatTreeModule } from "@angular/material/tree";
+
+@NgModule({
+  exports: [
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatCommonModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatLineModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatOptionModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatPseudoCheckboxModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSlideToggleModule,
+    MatSliderModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatStepperModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+  ],
+})
+export class MaterialModule {}

package/src/assets/product/product-import-sample.csv

@@ -0,0 +1 @@
+Name,SKU,Initial Quantity,Initial Quantity Date,Reorder Point,Measure,Categories

package/src/environments/common-environment.ts

@@ -0,0 +1,36 @@
+export const commonEnvironment = {
+  projectKey: "INVENTORY",
+  storage: localStorage,
+  authClientId: 2,
+  authGrantType: "password",
+  user: {
+    appName: "Inventory",
+    appLogoUrl: "",
+    appUrl: "https://inventory.techlify.com",
+    showSignup: false,
+    showSocialLogin: false,
+    socialLoginRedirectUrl: "",
+    showForgotPassword: false,
+    allowAppAdminLogin: true,
+    loginWithoutSubscription: true,
+    allowAllUsersToLogin: true,
+    userConfig: {
+      showExploreUser: true,
+      showRoles: true,
+      showPermissions: true,
+      showAddUser: true,
+      showPhone: false,
+      showUserTypes: true,
+      userTypes: [
+        {
+          title: "Admin",
+          value: 2,
+        },
+        {
+          title: "Normal User",
+          value: 3,
+        },
+      ],
+    },
+  },
+};

package/src/environments/environment.prod.ts

@@ -0,0 +1,10 @@
+import { commonEnvironment } from "./common-environment";
+
+export const environment = {
+  ...commonEnvironment,
+  production: true,
+  version: "0.1",
+  apiUrl: "https://api.inventory.techlify.com/public/",
+  authClientSecret: "f5VZGE298jQYNATsxkAQHvCCp2gX9ed3HfIWmkgB",
+  authGrantType: "password",
+};

package/src/environments/environment.staging.ts

@@ -0,0 +1,19 @@
+import { commonEnvironment } from "./common-environment";
+
+export const environment = {
+  ...commonEnvironment,
+  production: true,
+  version: "0.1-staging",
+  apiUrl: "https://api.inventory.technology.gy/public/",
+  authClientSecret: "m5VZGE298jQYNATsxkAQHvCCp2gX9ed3HfIWmkgB",
+  authGrantType: "password",
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

package/src/environments/environment.ts

@@ -0,0 +1,18 @@
+import { commonEnvironment } from "./common-environment";
+
+export const environment = {
+  ...commonEnvironment,
+  production: false,
+  version: "0.1-dev",
+  apiUrl: "http://localhost/inventory-api/public/",
+  authClientSecret: "m5VZGE298jQYNATsxkAQHvCCp2gX9ed3HfIWmkgB",
+  authGrantType: "password",
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */

package/src/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>InventoryUi</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
+      crossorigin="anonymous"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
+  </head>
+  <body class="bg-light">
+    <app-root></app-root>
+  </body>
+</html>

package/src/main.ts

@@ -0,0 +1,19 @@
+/*
+ * Entry point of the application.
+ * Only platform bootstrapping code should be here.
+ * For app-specific initialization, use `app/app.component.ts`.
+ */
+
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+
+import { AppModule } from "@app/app.module";
+import { environment } from "@env/environment";
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

package/src/polyfills.ts

@@ -0,0 +1,57 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import "@angular/localize/init";
+
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import "zone.js"; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */