diff --git a/framework/Volo.Abp.sln b/framework/Volo.Abp.sln index bd364b91b8..a3ee894572 100644 --- a/framework/Volo.Abp.sln +++ b/framework/Volo.Abp.sln @@ -307,6 +307,10 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Volo.Abp.BlobStoring.Azure. EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Volo.Abp.EntityFrameworkCore.Oracle", "src\Volo.Abp.EntityFrameworkCore.Oracle\Volo.Abp.EntityFrameworkCore.Oracle.csproj", "{1738845A-5348-4EB8-B736-CD1D22A808B4}" EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Volo.Abp.Caching.StackExchangeRedis", "src\Volo.Abp.Caching.StackExchangeRedis\Volo.Abp.Caching.StackExchangeRedis.csproj", "{2B83DF1F-0FD2-4DEA-ABC5-E324B51401D4}" +EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Volo.Abp.Caching.StackExchangeRedis.Tests", "test\Volo.Abp.Caching.StackExchangeRedis.Tests\Volo.Abp.Caching.StackExchangeRedis.Tests.csproj", "{60D0E384-965E-4F81-9D71-B28F419254FC}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU @@ -913,6 +917,14 @@ Global {1738845A-5348-4EB8-B736-CD1D22A808B4}.Debug|Any CPU.Build.0 = Debug|Any CPU {1738845A-5348-4EB8-B736-CD1D22A808B4}.Release|Any CPU.ActiveCfg = Release|Any CPU {1738845A-5348-4EB8-B736-CD1D22A808B4}.Release|Any CPU.Build.0 = Release|Any CPU + {2B83DF1F-0FD2-4DEA-ABC5-E324B51401D4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {2B83DF1F-0FD2-4DEA-ABC5-E324B51401D4}.Debug|Any CPU.Build.0 = Debug|Any CPU + {2B83DF1F-0FD2-4DEA-ABC5-E324B51401D4}.Release|Any CPU.ActiveCfg = Release|Any CPU + {2B83DF1F-0FD2-4DEA-ABC5-E324B51401D4}.Release|Any CPU.Build.0 = Release|Any CPU + {60D0E384-965E-4F81-9D71-B28F419254FC}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {60D0E384-965E-4F81-9D71-B28F419254FC}.Debug|Any CPU.Build.0 = Debug|Any CPU + {60D0E384-965E-4F81-9D71-B28F419254FC}.Release|Any CPU.ActiveCfg = Release|Any CPU + {60D0E384-965E-4F81-9D71-B28F419254FC}.Release|Any CPU.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE @@ -1068,6 +1080,8 @@ Global {C44242F7-D55D-4867-AAF4-A786E404312E} = {5DF0E140-0513-4D0D-BE2E-3D4D85CD70E6} {A80E9A0B-8932-4B5D-83FB-6751708FD484} = {447C8A77-E5F0-4538-8687-7383196D04EA} {1738845A-5348-4EB8-B736-CD1D22A808B4} = {5DF0E140-0513-4D0D-BE2E-3D4D85CD70E6} + {2B83DF1F-0FD2-4DEA-ABC5-E324B51401D4} = {5DF0E140-0513-4D0D-BE2E-3D4D85CD70E6} + {60D0E384-965E-4F81-9D71-B28F419254FC} = {447C8A77-E5F0-4538-8687-7383196D04EA} EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution SolutionGuid = {BB97ECF4-9A84-433F-A80B-2A3285BDD1D5} diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/AbpPageSearchBoxViewComponent.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/AbpPageSearchBoxViewComponent.cs index d14c92c62e..a21a3c51cd 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/AbpPageSearchBoxViewComponent.cs +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/AbpPageSearchBoxViewComponent.cs @@ -1,5 +1,4 @@ -using System.Threading.Tasks; -using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc; namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpPageSearchBox { diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/Default.cshtml index d7a2e893d4..65853b9d73 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/Default.cshtml +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/Default.cshtml @@ -1,13 +1,17 @@ @using Localization.Resources.AbpUi @using Microsoft.Extensions.Localization + @inject IStringLocalizer L +
- +
- +
-
\ No newline at end of file + + + diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/_ViewImports.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/_ViewImports.cshtml new file mode 100644 index 0000000000..c1da1f5f10 --- /dev/null +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpPageSearchBox/_ViewImports.cshtml @@ -0,0 +1,4 @@ +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI +@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap +@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling \ No newline at end of file diff --git a/framework/src/Volo.Abp.Caching.StackExchangeRedis/FodyWeavers.xml b/framework/src/Volo.Abp.Caching.StackExchangeRedis/FodyWeavers.xml new file mode 100644 index 0000000000..be0de3a908 --- /dev/null +++ b/framework/src/Volo.Abp.Caching.StackExchangeRedis/FodyWeavers.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/framework/src/Volo.Abp.Caching.StackExchangeRedis/FodyWeavers.xsd b/framework/src/Volo.Abp.Caching.StackExchangeRedis/FodyWeavers.xsd new file mode 100644 index 0000000000..3f3946e282 --- /dev/null +++ b/framework/src/Volo.Abp.Caching.StackExchangeRedis/FodyWeavers.xsd @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + 'true' to run assembly verification (PEVerify) on the target assembly after all weavers have been executed. + + + + + A comma-separated list of error codes that can be safely ignored in assembly verification. + + + + + 'false' to turn off automatic generation of the XML Schema file. + + + + + \ No newline at end of file diff --git a/framework/src/Volo.Abp.Caching.StackExchangeRedis/Volo.Abp.Caching.StackExchangeRedis.csproj b/framework/src/Volo.Abp.Caching.StackExchangeRedis/Volo.Abp.Caching.StackExchangeRedis.csproj new file mode 100644 index 0000000000..c362c16bff --- /dev/null +++ b/framework/src/Volo.Abp.Caching.StackExchangeRedis/Volo.Abp.Caching.StackExchangeRedis.csproj @@ -0,0 +1,25 @@ + + + + + + + netstandard2.0 + Volo.Abp.Caching.StackExchangeRedis + Volo.Abp.Caching.StackExchangeRedis + $(AssetTargetFallback);portable-net45+win8+wp8+wpa81; + false + false + false + + + + + + + + + + + + diff --git a/framework/src/Volo.Abp.Caching.StackExchangeRedis/Volo/Abp/Caching/StackExchangeRedis/AbpCachingStackExchangeRedisModule.cs b/framework/src/Volo.Abp.Caching.StackExchangeRedis/Volo/Abp/Caching/StackExchangeRedis/AbpCachingStackExchangeRedisModule.cs new file mode 100644 index 0000000000..b0f7d68ee4 --- /dev/null +++ b/framework/src/Volo.Abp.Caching.StackExchangeRedis/Volo/Abp/Caching/StackExchangeRedis/AbpCachingStackExchangeRedisModule.cs @@ -0,0 +1,30 @@ +using System; +using Microsoft.Extensions.Caching.Distributed; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.DependencyInjection.Extensions; +using Volo.Abp.Modularity; + +namespace Volo.Abp.Caching.StackExchangeRedis +{ + [DependsOn( + typeof(AbpCachingModule) + )] + public class AbpCachingStackExchangeRedisModule : AbpModule + { + public override void ConfigureServices(ServiceConfigurationContext context) + { + var configuration = context.Services.GetConfiguration(); + + context.Services.AddStackExchangeRedisCache(options => + { + var redisConfiguration = configuration["Redis:Configuration"]; + if (!redisConfiguration.IsNullOrEmpty()) + { + options.Configuration = configuration["Redis:Configuration"]; + } + }); + + context.Services.Replace(ServiceDescriptor.Singleton()); + } + } +} \ No newline at end of file diff --git a/framework/src/Volo.Abp.Caching.StackExchangeRedis/Volo/Abp/Caching/StackExchangeRedis/AbpRedisCache.cs b/framework/src/Volo.Abp.Caching.StackExchangeRedis/Volo/Abp/Caching/StackExchangeRedis/AbpRedisCache.cs new file mode 100644 index 0000000000..a5236022f3 --- /dev/null +++ b/framework/src/Volo.Abp.Caching.StackExchangeRedis/Volo/Abp/Caching/StackExchangeRedis/AbpRedisCache.cs @@ -0,0 +1,49 @@ +using System; +using System.Reflection; +using System.Threading; +using System.Threading.Tasks; +using Microsoft.Extensions.Caching.StackExchangeRedis; +using Microsoft.Extensions.Options; +using StackExchange.Redis; +using Volo.Abp.DependencyInjection; + +namespace Volo.Abp.Caching.StackExchangeRedis +{ + [DisableConventionalRegistration] + public class AbpRedisCache : RedisCache + { + private static readonly FieldInfo RedisDatabaseField; + private static readonly MethodInfo ConnectMethod; + private static readonly MethodInfo ConnectAsyncMethod; + + protected IDatabase RedisDatabase => RedisDatabaseField.GetValue(this) as IDatabase; + + static AbpRedisCache() + { + RedisDatabaseField = typeof(RedisCache) + .GetField("_cache", BindingFlags.Instance | BindingFlags.NonPublic); + + ConnectMethod = typeof(RedisCache) + .GetMethod("Connect", BindingFlags.Instance | BindingFlags.NonPublic); + + ConnectAsyncMethod = typeof(RedisCache) + .GetMethod("ConnectAsync", BindingFlags.Instance | BindingFlags.NonPublic); + } + + public AbpRedisCache(IOptions optionsAccessor) + : base(optionsAccessor) + { + + } + + protected virtual void Connect() + { + ConnectMethod.Invoke(this, Array.Empty()); + } + + protected virtual Task ConnectAsync(CancellationToken token = default) + { + return (Task) ConnectAsyncMethod.Invoke(this, new object[] {token}); + } + } +} \ No newline at end of file diff --git a/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo.Abp.Caching.StackExchangeRedis.Tests.csproj b/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo.Abp.Caching.StackExchangeRedis.Tests.csproj new file mode 100644 index 0000000000..15f4bc8b9d --- /dev/null +++ b/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo.Abp.Caching.StackExchangeRedis.Tests.csproj @@ -0,0 +1,17 @@ + + + + + + netcoreapp3.1 + + + + + + + + + + + diff --git a/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo/Abp/Caching/StackExchangeRedis/AbpCachingStackExchangeRedisTestBase.cs b/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo/Abp/Caching/StackExchangeRedis/AbpCachingStackExchangeRedisTestBase.cs new file mode 100644 index 0000000000..354ce3cc2b --- /dev/null +++ b/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo/Abp/Caching/StackExchangeRedis/AbpCachingStackExchangeRedisTestBase.cs @@ -0,0 +1,12 @@ +using Volo.Abp.Testing; + +namespace Volo.Abp.Caching.StackExchangeRedis +{ + public abstract class AbpCachingStackExchangeRedisTestBase : AbpIntegratedTest + { + protected override void SetAbpApplicationCreationOptions(AbpApplicationCreationOptions options) + { + options.UseAutofac(); + } + } +} \ No newline at end of file diff --git a/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo/Abp/Caching/StackExchangeRedis/AbpCachingStackExchangeRedisTestModule.cs b/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo/Abp/Caching/StackExchangeRedis/AbpCachingStackExchangeRedisTestModule.cs new file mode 100644 index 0000000000..5d67ae743a --- /dev/null +++ b/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo/Abp/Caching/StackExchangeRedis/AbpCachingStackExchangeRedisTestModule.cs @@ -0,0 +1,15 @@ +using Volo.Abp.Autofac; +using Volo.Abp.Modularity; + +namespace Volo.Abp.Caching.StackExchangeRedis +{ + [DependsOn( + typeof(AbpCachingStackExchangeRedisModule), + typeof(AbpTestBaseModule), + typeof(AbpAutofacModule) + )] + public class AbpCachingStackExchangeRedisTestModule : AbpModule + { + + } +} \ No newline at end of file diff --git a/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo/Abp/Caching/StackExchangeRedis/AbpRedisCache_Tests.cs b/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo/Abp/Caching/StackExchangeRedis/AbpRedisCache_Tests.cs new file mode 100644 index 0000000000..660c8dbdb7 --- /dev/null +++ b/framework/test/Volo.Abp.Caching.StackExchangeRedis.Tests/Volo/Abp/Caching/StackExchangeRedis/AbpRedisCache_Tests.cs @@ -0,0 +1,22 @@ +using Microsoft.Extensions.Caching.Distributed; +using Shouldly; +using Xunit; + +namespace Volo.Abp.Caching.StackExchangeRedis +{ + public class AbpRedisCache_Tests : AbpCachingStackExchangeRedisTestBase + { + private readonly IDistributedCache _distributedCache; + + public AbpRedisCache_Tests() + { + _distributedCache = GetRequiredService(); + } + + [Fact] + public void Should_Replace_RedisCache() + { + (_distributedCache is AbpRedisCache).ShouldBeTrue(); + } + } +} \ No newline at end of file diff --git a/modules/permission-management/src/Volo.Abp.PermissionManagement.Domain/Volo/Abp/PermissionManagement/PermissionStore.cs b/modules/permission-management/src/Volo.Abp.PermissionManagement.Domain/Volo/Abp/PermissionManagement/PermissionStore.cs index 2ffd6f80e1..bd8fe7abc2 100644 --- a/modules/permission-management/src/Volo.Abp.PermissionManagement.Domain/Volo/Abp/PermissionManagement/PermissionStore.cs +++ b/modules/permission-management/src/Volo.Abp.PermissionManagement.Domain/Volo/Abp/PermissionManagement/PermissionStore.cs @@ -1,4 +1,5 @@ -using System.Threading.Tasks; +using System.Linq; +using System.Threading.Tasks; using Microsoft.Extensions.Logging; using Microsoft.Extensions.Logging.Abstractions; using Volo.Abp.Authorization.Permissions; @@ -10,17 +11,21 @@ namespace Volo.Abp.PermissionManagement public class PermissionStore : IPermissionStore, ITransientDependency { public ILogger Logger { get; set; } - + protected IPermissionGrantRepository PermissionGrantRepository { get; } + protected IPermissionDefinitionManager PermissionDefinitionManager { get; } + protected IDistributedCache Cache { get; } - + public PermissionStore( IPermissionGrantRepository permissionGrantRepository, - IDistributedCache cache) + IDistributedCache cache, + IPermissionDefinitionManager permissionDefinitionManager) { PermissionGrantRepository = permissionGrantRepository; Cache = cache; + PermissionDefinitionManager = permissionDefinitionManager; Logger = NullLogger.Instance; } @@ -29,7 +34,10 @@ namespace Volo.Abp.PermissionManagement return (await GetCacheItemAsync(name, providerName, providerKey)).IsGranted; } - protected virtual async Task GetCacheItemAsync(string name, string providerName, string providerKey) + protected virtual async Task GetCacheItemAsync( + string name, + string providerName, + string providerKey) { var cacheKey = CalculateCacheKey(name, providerName, providerKey); @@ -43,23 +51,45 @@ namespace Volo.Abp.PermissionManagement return cacheItem; } - Logger.LogDebug($"Not found in the cache, getting from the repository: {cacheKey}"); + Logger.LogDebug($"Not found in the cache: {cacheKey}"); + + cacheItem = new PermissionGrantCacheItem(name, false); + + await SetCacheItemsAsync(providerName, providerKey, name, cacheItem); - cacheItem = new PermissionGrantCacheItem( - name, - (await PermissionGrantRepository.FindAsync(name, providerName, providerKey)) != null - ); + return cacheItem; + } - Logger.LogDebug($"Setting the cache item: {cacheKey}"); + protected virtual async Task SetCacheItemsAsync( + string providerName, + string providerKey, + string currentName, + PermissionGrantCacheItem currentCacheItem) + { + var permissions = PermissionDefinitionManager.GetPermissions(); + + Logger.LogDebug($"Getting all granted permissions from the repository for this provider name,key: {providerName},{providerKey}"); - await Cache.SetAsync( - cacheKey, - cacheItem - ); + var permissionGrants = await PermissionGrantRepository.GetListAsync(providerName, providerKey); - Logger.LogDebug($"Finished setting the cache item: {cacheKey}"); + Logger.LogDebug($"Setting the cache items. Count: {permissions.Count}"); - return cacheItem; + foreach (var permission in permissions) + { + var isGranted = permissionGrants.Any(pg => pg.Name == permission.Name); //TODO: Optimize? Dictionary/Hash + + await Cache.SetAsync( + CalculateCacheKey(permission.Name, providerName, providerKey), + new PermissionGrantCacheItem(permission.Name, isGranted) + ); + + if (permission.Name == currentName) + { + currentCacheItem.IsGranted = isGranted; + } + } + + Logger.LogDebug($"Finished setting the cache items. Count: {permissions.Count}"); } protected virtual string CalculateCacheKey(string name, string providerName, string providerKey) @@ -67,4 +97,4 @@ namespace Volo.Abp.PermissionManagement return PermissionGrantCacheItem.CalculateCacheKey(name, providerName, providerKey); } } -} +} \ No newline at end of file diff --git a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts b/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts index be5089316a..8f6973079d 100644 --- a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts +++ b/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts @@ -1,36 +1,37 @@ -import { ABP } from '@abp/ng.core'; +import { ABP, DynamicLayoutComponent } from '@abp/ng.core'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: '', - loadChildren: () => import('./home/home.module').then(m => m.HomeModule), - data: { - routes: { - name: '::Menu:Home', - order: 1, - } as ABP.Route, - }, - }, - { - path: 'account', - loadChildren: () => - import('@abp/ng.account').then(m => m.AccountModule.forLazy({ redirectUrl: '/' })), - }, - { - path: 'identity', - loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()), - }, - { - path: 'tenant-management', - loadChildren: () => - import('@abp/ng.tenant-management').then(m => m.TenantManagementModule.forLazy()), - }, - { - path: 'setting-management', - loadChildren: () => - import('@abp/ng.setting-management').then(m => m.SettingManagementModule.forLazy()), + component: DynamicLayoutComponent, + children: [ + { + path: '', + pathMatch: 'full', + loadChildren: () => import('./home/home.module').then(m => m.HomeModule), + }, + { + path: 'account', + loadChildren: () => + import('@abp/ng.account').then(m => m.AccountModule.forLazy({ redirectUrl: '/' })), + }, + { + path: 'identity', + loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()), + }, + { + path: 'tenant-management', + loadChildren: () => + import('@abp/ng.tenant-management').then(m => m.TenantManagementModule.forLazy()), + }, + { + path: 'setting-management', + loadChildren: () => + import('@abp/ng.setting-management').then(m => m.SettingManagementModule.forLazy()), + }, + ], }, ]; diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts index 71fedf421b..4e69d73cd0 100644 --- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts +++ b/npm/ng-packs/apps/dev-app/src/app/app.module.ts @@ -13,6 +13,7 @@ import { NgxsModule } from '@ngxs/store'; import { environment } from '../environments/environment'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { APP_ROUTE_PROVIDER } from './route.provider'; const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })]; @@ -35,6 +36,7 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })]; ThemeBasicModule.forRoot(), ...(environment.production ? [] : LOGGERS), ], + providers: [APP_ROUTE_PROVIDER], declarations: [AppComponent], bootstrap: [AppComponent], }) diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts b/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts index 367affb583..634706a36c 100644 --- a/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts +++ b/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts @@ -1,12 +1,10 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home.component'; -import { ApplicationLayoutComponent } from '@abp/ng.theme.basic'; const routes: Routes = [ { path: '', - component: ApplicationLayoutComponent, children: [{ path: '', component: HomeComponent }], }, ]; diff --git a/npm/ng-packs/apps/dev-app/src/app/route.provider.ts b/npm/ng-packs/apps/dev-app/src/app/route.provider.ts new file mode 100644 index 0000000000..5a14ad7ba0 --- /dev/null +++ b/npm/ng-packs/apps/dev-app/src/app/route.provider.ts @@ -0,0 +1,20 @@ +import { RoutesService, eLayoutType } from '@abp/ng.core'; +import { APP_INITIALIZER } from '@angular/core'; + +export const APP_ROUTE_PROVIDER = [ + { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true }, +]; + +function configureRoutes(routes: RoutesService) { + return () => { + routes.add([ + { + path: '/', + name: '::Menu:Home', + iconClass: 'fas fa-home', + order: 1, + layout: eLayoutType.application, + }, + ]); + }; +} diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json index 37476c4fd8..a5cf9861f3 100644 --- a/npm/ng-packs/package.json +++ b/npm/ng-packs/package.json @@ -19,7 +19,7 @@ "ci:test": "ng test --coverage=false", "ci:build": "cd scripts && yarn build:prod", "lerna": "lerna", - "compile:ivy": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points --tsconfig './tsconfig.prod.json'", + "compile:ivy": "yarn ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points --tsconfig './tsconfig.prod.json' --source node_modules --async false", "postinstall": "npm run compile:ivy" }, "devDependencies": { diff --git a/npm/ng-packs/packages/account/ngcc.config.js b/npm/ng-packs/packages/account/ngcc.config.js new file mode 100644 index 0000000000..93f34d5655 --- /dev/null +++ b/npm/ng-packs/packages/account/ngcc.config.js @@ -0,0 +1,7 @@ +module.exports = { + entryPoints: { + '.': {}, + './config': {}, + './dist': { ignore: true }, + }, +}; diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts index 25d49fb169..49a0868967 100644 --- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts +++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts @@ -1,4 +1,4 @@ -import { Component, Injector, OnDestroy, Type } from '@angular/core'; +import { Component, Injector, OnDestroy, Type, Optional, SkipSelf } from '@angular/core'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { Store } from '@ngxs/store'; import { eLayoutType } from '../enums/common'; @@ -23,7 +23,12 @@ import { TreeNode } from '../utils/tree-utils'; export class DynamicLayoutComponent implements OnDestroy { layout: Type; - constructor(injector: Injector, private store: Store) { + constructor( + injector: Injector, + private store: Store, + @Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent, + ) { + if (dynamicLayoutComponent) return; const route = injector.get(ActivatedRoute); const router = injector.get(Router); const routes = injector.get(RoutesService); diff --git a/npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts index 2dffa1532d..f5f4d22f5e 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts @@ -2,6 +2,10 @@ import { Directive, Input, Optional, ElementRef, Renderer2, AfterViewInit } from import { Subject } from 'rxjs'; import snq from 'snq'; +/** + * + * @deprecated To be deleted in v3.3 + */ @Directive({ selector: '[abpVisibility]', }) @@ -40,7 +44,8 @@ export class VisibilityDirective implements AfterViewInit { setTimeout(() => { const htmlNodes = snq( - () => Array.from(this.focusedElement.childNodes).filter(node => node instanceof HTMLElement), + () => + Array.from(this.focusedElement.childNodes).filter(node => node instanceof HTMLElement), [], ); diff --git a/npm/ng-packs/packages/core/src/lib/states/config.state.ts b/npm/ng-packs/packages/core/src/lib/states/config.state.ts index 4bbf25ade2..d9793529aa 100644 --- a/npm/ng-packs/packages/core/src/lib/states/config.state.ts +++ b/npm/ng-packs/packages/core/src/lib/states/config.state.ts @@ -190,7 +190,7 @@ export class ConfigState { @Action(GetAppConfiguration) addData({ patchState, dispatch }: StateContext) { - const apiName = this.store.selectSnapshot(ConfigState.getDeep('environment.application.name')); + const apiName = 'default'; const api = this.store.selectSnapshot(ConfigState.getApiUrl(apiName)); return this.http .get(`${api}/api/abp/application-configuration`) diff --git a/npm/ng-packs/packages/identity/ngcc.config.js b/npm/ng-packs/packages/identity/ngcc.config.js new file mode 100644 index 0000000000..93f34d5655 --- /dev/null +++ b/npm/ng-packs/packages/identity/ngcc.config.js @@ -0,0 +1,7 @@ +module.exports = { + entryPoints: { + '.': {}, + './config': {}, + './dist': { ignore: true }, + }, +}; diff --git a/npm/ng-packs/packages/setting-management/ngcc.config.js b/npm/ng-packs/packages/setting-management/ngcc.config.js new file mode 100644 index 0000000000..93f34d5655 --- /dev/null +++ b/npm/ng-packs/packages/setting-management/ngcc.config.js @@ -0,0 +1,7 @@ +module.exports = { + entryPoints: { + '.': {}, + './config': {}, + './dist': { ignore: true }, + }, +}; diff --git a/npm/ng-packs/packages/tenant-management/ngcc.config.js b/npm/ng-packs/packages/tenant-management/ngcc.config.js new file mode 100644 index 0000000000..93f34d5655 --- /dev/null +++ b/npm/ng-packs/packages/tenant-management/ngcc.config.js @@ -0,0 +1,7 @@ +module.exports = { + entryPoints: { + '.': {}, + './config': {}, + './dist': { ignore: true }, + }, +}; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/actions/index.ts b/npm/ng-packs/packages/theme-basic/src/lib/actions/index.ts deleted file mode 100644 index 2e29080de8..0000000000 --- a/npm/ng-packs/packages/theme-basic/src/lib/actions/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './layout.actions'; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/actions/layout.actions.ts b/npm/ng-packs/packages/theme-basic/src/lib/actions/layout.actions.ts deleted file mode 100644 index 3786ea82b7..0000000000 --- a/npm/ng-packs/packages/theme-basic/src/lib/actions/layout.actions.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Layout } from '../models/layout'; - -export class AddNavigationElement { - static readonly type = '[Layout] Add Navigation Element'; - constructor(public payload: Layout.NavigationElement | Layout.NavigationElement[]) {} -} - -export class RemoveNavigationElementByName { - static readonly type = '[Layout] Remove Navigation ElementByName'; - constructor(public name: string) {} -} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html index c4acbec880..eb68dc7df0 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html @@ -34,21 +34,15 @@ -
+ +
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts index 06b6d5339c..6c4de6cf21 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts @@ -2,6 +2,8 @@ export * from './account-layout/account-layout.component'; export * from './application-layout/application-layout.component'; export * from './empty-layout/empty-layout.component'; export * from './logo/logo.component'; +export * from './nav-items/current-user.component'; +export * from './nav-items/languages.component'; export * from './nav-items/nav-items.component'; export * from './routes/routes.component'; export * from './validation-error/validation-error.component'; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts new file mode 100644 index 0000000000..70238d3538 --- /dev/null +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts @@ -0,0 +1,67 @@ +import { ApplicationConfiguration, AuthService, ConfigState } from '@abp/ng.core'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { Select } from '@ngxs/store'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'abp-current-user', + // tslint:disable-next-line: component-max-inline-declarations + template: ` + + {{ + 'AbpAccount::Login' | abpLocalization + }} + +
+ +
+ {{ 'AbpAccount::ManageYourProfile' | abpLocalization }} + {{ 'AbpUi::Logout' | abpLocalization }} +
+
+ `, +}) +export class CurrentUserComponent implements OnInit { + @Select(ConfigState.getOne('currentUser')) + currentUser$: Observable; + + get smallScreen(): boolean { + return window.innerWidth < 992; + } + + constructor(private authService: AuthService, private router: Router) {} + + ngOnInit() {} + + logout() { + this.authService.logout().subscribe(() => { + this.router.navigate(['/'], { state: { redirectUrl: this.router.url } }); + }); + } +} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts new file mode 100644 index 0000000000..115e9e563e --- /dev/null +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts @@ -0,0 +1,88 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Store, Select } from '@ngxs/store'; +import { SetLanguage, ConfigState, ApplicationConfiguration, SessionState } from '@abp/ng.core'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import snq from 'snq'; + +@Component({ + selector: 'abp-languages', + // tslint:disable-next-line: component-max-inline-declarations + template: ` +
+ +
+ {{ lang?.displayName }} +
+
+ `, +}) +export class LanguagesComponent implements OnInit { + get smallScreen(): boolean { + return window.innerWidth < 992; + } + + @Select(ConfigState.getDeep('localization.languages')) + languages$: Observable; + + get defaultLanguage$(): Observable { + return this.languages$.pipe( + map( + languages => + snq( + () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName, + ), + '', + ), + ); + } + + get dropdownLanguages$(): Observable { + return this.languages$.pipe( + map( + languages => + snq(() => languages.filter(lang => lang.cultureName !== this.selectedLangCulture)), + [], + ), + ); + } + + get selectedLangCulture(): string { + return this.store.selectSnapshot(SessionState.getLanguage); + } + + constructor(private store: Store) {} + + ngOnInit() {} + + onChangeLang(cultureName: string) { + this.store.dispatch(new SetLanguage(cultureName)); + } +} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html index cb86773db5..955ccb8878 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html @@ -1,81 +1,16 @@
    - -
- - -
  • -
    - -
    - {{ lang?.displayName }} -
    -
    -
    • -     +
  • + - -
  • - - {{ - 'AbpAccount::Login' | abpLocalization - }} + +
    -
    - -
    - {{ 'AbpAccount::ManageYourProfile' | abpLocalization }} - {{ 'AbpUi::Logout' | abpLocalization }} -
    -
    • - + diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts index 6819807cd7..7a5ee9b37a 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts @@ -1,125 +1,12 @@ -import { - ABP, - ApplicationConfiguration, - AuthService, - ConfigState, - SessionState, - SetLanguage, - takeUntilDestroy, -} from '@abp/ng.core'; -import { - AfterViewInit, - Component, - Input, - OnDestroy, - TemplateRef, - TrackByFunction, - ViewChild, -} from '@angular/core'; -import { Navigate, RouterState } from '@ngxs/router-plugin'; -import { Select, Store } from '@ngxs/store'; -import compare from 'just-compare'; -import { Observable } from 'rxjs'; -import { filter, map } from 'rxjs/operators'; -import snq from 'snq'; -import { AddNavigationElement } from '../../actions/layout.actions'; -import { eNavigationElementNames } from '../../enums/navigation-element-names'; -import { Layout } from '../../models/layout'; -import { LayoutState } from '../../states/layout.state'; +import { NavItem, NavItemsService } from '@abp/ng.theme.shared'; +import { Component, Input, TrackByFunction } from '@angular/core'; @Component({ selector: 'abp-nav-items', templateUrl: 'nav-items.component.html', }) -export class NavItemsComponent implements AfterViewInit, OnDestroy { - @Select(LayoutState.getNavigationElements) - navElements$: Observable; +export class NavItemsComponent { + trackByFn: TrackByFunction = (_, element) => element.id; - @Select(ConfigState.getOne('currentUser')) - currentUser$: Observable; - - @Select(ConfigState.getDeep('localization.languages')) - languages$: Observable; - - @ViewChild('currentUser', { static: false, read: TemplateRef }) - currentUserRef: TemplateRef; - - @ViewChild('language', { static: false, read: TemplateRef }) - languageRef: TemplateRef; - - @Input() - smallScreen: boolean; - - rightPartElements: TemplateRef[] = []; - - trackByFn: TrackByFunction = (_, element) => element.name; - - get defaultLanguage$(): Observable { - return this.languages$.pipe( - map( - languages => - snq( - () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName, - ), - '', - ), - ); - } - - get dropdownLanguages$(): Observable { - return this.languages$.pipe( - map( - languages => - snq(() => languages.filter(lang => lang.cultureName !== this.selectedLangCulture)), - [], - ), - ); - } - - get selectedLangCulture(): string { - return this.store.selectSnapshot(SessionState.getLanguage); - } - - constructor(private store: Store, private authService: AuthService) {} - - ngAfterViewInit() { - const navigations = this.store - .selectSnapshot(LayoutState.getNavigationElements) - .map(({ name }) => name); - - if (navigations.indexOf(eNavigationElementNames.Language) < 0) { - this.store.dispatch( - new AddNavigationElement([ - { element: this.languageRef, order: 4, name: eNavigationElementNames.Language }, - { element: this.currentUserRef, order: 5, name: eNavigationElementNames.User }, - ]), - ); - } - - this.navElements$ - .pipe( - map(elements => elements.map(({ element }) => element)), - filter(elements => !compare(elements, this.rightPartElements)), - takeUntilDestroy(this), - ) - .subscribe(elements => { - setTimeout(() => (this.rightPartElements = elements), 0); - }); - } - - ngOnDestroy() {} - - onChangeLang(cultureName: string) { - this.store.dispatch(new SetLanguage(cultureName)); - } - - logout() { - this.authService.logout().subscribe(() => { - this.store.dispatch( - new Navigate(['/'], null, { - state: { redirectUrl: this.store.selectSnapshot(RouterState).state.url }, - }), - ); - }); - } + constructor(public readonly navItems: NavItemsService) {} } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html index d987f22860..42bdd7376a 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html @@ -18,10 +18,10 @@
  • { + navItems.addItems([ + { + id: eThemeBasicComponents.Languages, + order: 100, + component: LanguagesComponent, + }, + { + id: eThemeBasicComponents.CurrentUser, + order: 101, + component: CurrentUserComponent, + }, + ]); + }; +} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/services/index.ts b/npm/ng-packs/packages/theme-basic/src/lib/services/index.ts deleted file mode 100644 index 455d7798f5..0000000000 --- a/npm/ng-packs/packages/theme-basic/src/lib/services/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './layout-state.service'; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/services/layout-state.service.ts b/npm/ng-packs/packages/theme-basic/src/lib/services/layout-state.service.ts deleted file mode 100644 index 415cef61d3..0000000000 --- a/npm/ng-packs/packages/theme-basic/src/lib/services/layout-state.service.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Store } from '@ngxs/store'; -import { LayoutState } from '../states/layout.state'; -import { AddNavigationElement, RemoveNavigationElementByName } from '../actions'; -import { Layout } from '../models/layout'; - -@Injectable({ providedIn: 'root' }) -export class LayoutStateService { - constructor(private store: Store) {} - - getNavigationElements() { - return this.store.selectSnapshot(LayoutState.getNavigationElements); - } - - dispatchAddNavigationElement(...args: ConstructorParameters) { - return this.store.dispatch(new AddNavigationElement(...args)); - } - - dispatchRemoveNavigationElementByName( - ...args: ConstructorParameters - ) { - return this.store.dispatch(new RemoveNavigationElementByName(...args)); - } -} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/states/index.ts b/npm/ng-packs/packages/theme-basic/src/lib/states/index.ts deleted file mode 100644 index 1e257fc64c..0000000000 --- a/npm/ng-packs/packages/theme-basic/src/lib/states/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './layout.state'; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/states/layout.state.ts b/npm/ng-packs/packages/theme-basic/src/lib/states/layout.state.ts deleted file mode 100644 index 93f4352d69..0000000000 --- a/npm/ng-packs/packages/theme-basic/src/lib/states/layout.state.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Action, Selector, State, StateContext } from '@ngxs/store'; -import snq from 'snq'; -import { AddNavigationElement, RemoveNavigationElementByName } from '../actions/layout.actions'; -import { Layout } from '../models/layout'; - -@State({ - name: 'LayoutState', - defaults: { navigationElements: [] } as Layout.State, -}) -@Injectable() -export class LayoutState { - @Selector() - static getNavigationElements({ navigationElements }: Layout.State): Layout.NavigationElement[] { - return navigationElements; - } - - @Action(AddNavigationElement) - layoutAddAction( - { getState, patchState }: StateContext, - { payload = [] }: AddNavigationElement, - ) { - let { navigationElements } = getState(); - - if (!Array.isArray(payload)) { - payload = [payload]; - } - - if (navigationElements.length) { - payload = snq( - () => - (payload as Layout.NavigationElement[]).filter( - ({ name }) => navigationElements.findIndex(nav => nav.name === name) < 0, - ), - [], - ); - } - - if (!payload.length) return; - - navigationElements = [...navigationElements, ...payload] - .map(element => ({ ...element, order: element.order || 99 })) - .sort((a, b) => a.order - b.order); - - return patchState({ - navigationElements, - }); - } - - @Action(RemoveNavigationElementByName) - layoutRemoveAction( - { getState, patchState }: StateContext, - { name }: RemoveNavigationElementByName, - ) { - let { navigationElements } = getState(); - - const index = navigationElements.findIndex(element => element.name === name); - - if (index > -1) { - navigationElements = navigationElements.splice(index, 1); - } - - return patchState({ - navigationElements, - }); - } -} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/tests/layout-state.service.spec.ts b/npm/ng-packs/packages/theme-basic/src/lib/tests/layout-state.service.spec.ts deleted file mode 100644 index de4f489aaa..0000000000 --- a/npm/ng-packs/packages/theme-basic/src/lib/tests/layout-state.service.spec.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { createServiceFactory, SpectatorService, SpyObject } from '@ngneat/spectator/jest'; -import { Store } from '@ngxs/store'; -import * as LayoutActions from '../actions'; -import { LayoutStateService } from '../services/layout-state.service'; -import { LayoutState } from '../states/layout.state'; -describe('LayoutStateService', () => { - let service: LayoutStateService; - let spectator: SpectatorService; - let store: SpyObject; - - const createService = createServiceFactory({ service: LayoutStateService, mocks: [Store] }); - beforeEach(() => { - spectator = createService(); - service = spectator.service; - store = spectator.get(Store); - }); - - test('should have the all LayoutState static methods', () => { - const reg = /(?<=static )(.*)(?=\()/gm; - LayoutState.toString() - .match(reg) - .forEach(fnName => { - expect(service[fnName]).toBeTruthy(); - - const spy = jest.spyOn(store, 'selectSnapshot'); - spy.mockClear(); - - const isDynamicSelector = LayoutState[fnName].name !== 'memoized'; - - if (isDynamicSelector) { - LayoutState[fnName] = jest.fn((...args) => args); - service[fnName]('test', 0, {}); - expect(LayoutState[fnName]).toHaveBeenCalledWith('test', 0, {}); - } else { - service[fnName](); - expect(spy).toHaveBeenCalledWith(LayoutState[fnName]); - } - }); - }); - - test('should have a dispatch method for every LayoutState action', () => { - const reg = /(?<=dispatch)(\w+)(?=\()/gm; - LayoutStateService.toString() - .match(reg) - .forEach(fnName => { - expect(LayoutActions[fnName]).toBeTruthy(); - - const spy = jest.spyOn(store, 'dispatch'); - spy.mockClear(); - - const params = Array.from(new Array(LayoutActions[fnName].length)); - - service[`dispatch${fnName}`](...params); - expect(spy).toHaveBeenCalledWith(new LayoutActions[fnName](...params)); - }); - }); -}); diff --git a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts index 5c4d67515e..f599124e83 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts @@ -3,7 +3,6 @@ import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { ModuleWithProviders, NgModule } from '@angular/core'; import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; import { NgxValidateCoreModule } from '@ngx-validate/core'; -import { NgxsModule } from '@ngxs/store'; import { AccountLayoutComponent } from './components/account-layout/account-layout.component'; import { ApplicationLayoutComponent } from './components/application-layout/application-layout.component'; import { EmptyLayoutComponent } from './components/empty-layout/empty-layout.component'; @@ -11,8 +10,10 @@ import { LogoComponent } from './components/logo/logo.component'; import { NavItemsComponent } from './components/nav-items/nav-items.component'; import { RoutesComponent } from './components/routes/routes.component'; import { ValidationErrorComponent } from './components/validation-error/validation-error.component'; +import { CurrentUserComponent } from './components/nav-items/current-user.component'; +import { LanguagesComponent } from './components/nav-items/languages.component'; import { BASIC_THEME_STYLES_PROVIDERS } from './providers/styles.provider'; -import { LayoutState } from './states/layout.state'; +import { BASIC_THEME_NAV_ITEM_PROVIDERS } from './providers/nav-item.provider'; export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent]; @@ -23,6 +24,17 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt LogoComponent, NavItemsComponent, RoutesComponent, + CurrentUserComponent, + LanguagesComponent, + ], + exports: [ + ...LAYOUTS, + ValidationErrorComponent, + LogoComponent, + NavItemsComponent, + RoutesComponent, + CurrentUserComponent, + LanguagesComponent, ], imports: [ CoreModule, @@ -30,7 +42,6 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt NgbCollapseModule, NgbDropdownModule, NgxValidateCoreModule, - NgxsModule.forFeature([LayoutState]), NgxValidateCoreModule.forRoot({ targetSelector: '.form-group', blueprints: { @@ -52,20 +63,13 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt errorTemplate: ValidationErrorComponent, }), ], - exports: [ - ...LAYOUTS, - ValidationErrorComponent, - LogoComponent, - NavItemsComponent, - RoutesComponent, - ], - entryComponents: [...LAYOUTS, ValidationErrorComponent], + entryComponents: [...LAYOUTS, ValidationErrorComponent, CurrentUserComponent, LanguagesComponent], }) export class ThemeBasicModule { static forRoot(): ModuleWithProviders { return { ngModule: ThemeBasicModule, - providers: [BASIC_THEME_STYLES_PROVIDERS], + providers: [BASIC_THEME_NAV_ITEM_PROVIDERS, BASIC_THEME_STYLES_PROVIDERS], }; } } diff --git a/npm/ng-packs/packages/theme-basic/src/public-api.ts b/npm/ng-packs/packages/theme-basic/src/public-api.ts index 680c00ebbb..9b5870914b 100644 --- a/npm/ng-packs/packages/theme-basic/src/public-api.ts +++ b/npm/ng-packs/packages/theme-basic/src/public-api.ts @@ -2,11 +2,8 @@ * Public API Surface of theme-basic */ -export * from './lib/actions'; export * from './lib/components'; export * from './lib/enums'; export * from './lib/models'; export * from './lib/providers'; -export * from './lib/services'; -export * from './lib/states'; export * from './lib/theme-basic.module'; diff --git a/npm/ng-packs/packages/theme-shared/extensions/ng-package.json b/npm/ng-packs/packages/theme-shared/extensions/ng-package.json new file mode 100644 index 0000000000..d6080a2993 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/theme-shared/extensions", + "lib": { + "entryFile": "src/public-api.ts" + } +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/adapters/date-time.adapter.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/adapters/date-time.adapter.ts new file mode 100644 index 0000000000..11da774d1b --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/adapters/date-time.adapter.ts @@ -0,0 +1,56 @@ +import { Injectable } from '@angular/core'; +import { NgbDateStruct, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap'; + +@Injectable() +export class DateTimeAdapter { + value: NgbDateTimeStruct; + + fromModel(value: string | Date): NgbDateTimeStruct | null { + if (!value) return null; + + const date = new Date(value); + + if (isNaN((date as unknown) as number)) return null; + + this.value = { + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + hour: date.getHours(), + minute: date.getMinutes(), + second: date.getSeconds(), + }; + + return this.value; + } + + toModel(value: NgbDateTimeStruct | null): string { + if (!value) return ''; + + const now = new Date(); + + value = { + year: now.getUTCFullYear(), + month: now.getMonth() + 1, + day: now.getDate(), + hour: 0, + minute: 0, + second: 0, + ...this.value, + ...value, + }; + + const date = new Date( + value.year, + value.month - 1, + value.day, + value.hour, + value.minute, + value.second, + ); + + return new Date(date).toISOString(); + } +} + +type NgbDateTimeStruct = NgbDateStruct & NgbTimeStruct; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/adapters/date.adapter.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/adapters/date.adapter.ts new file mode 100644 index 0000000000..4449bae024 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/adapters/date.adapter.ts @@ -0,0 +1,29 @@ +import { formatDate } from '@angular/common'; +import { Injectable } from '@angular/core'; +import { NgbDateAdapter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; + +@Injectable() +export class DateAdapter extends NgbDateAdapter { + fromModel(value: string | Date): NgbDateStruct | null { + if (!value) return null; + + const date = new Date(value); + + if (isNaN((date as unknown) as number)) return null; + + return { + day: date.getDate(), + month: date.getMonth() + 1, + year: date.getFullYear(), + }; + } + + toModel(value: NgbDateStruct | null): string { + if (!value) return ''; + + const date = new Date(value.year, value.month - 1, value.day); + const formattedDate = formatDate(date, 'yyyy-MM-dd', 'en'); + + return formattedDate; + } +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/adapters/time.adapter.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/adapters/time.adapter.ts new file mode 100644 index 0000000000..33c25ddd8c --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/adapters/time.adapter.ts @@ -0,0 +1,35 @@ +import { formatDate } from '@angular/common'; +import { Injectable } from '@angular/core'; +import { NgbTimeAdapter, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap'; + +@Injectable() +export class TimeAdapter extends NgbTimeAdapter { + fromModel(value: string | Date): NgbTimeStruct | null { + if (!value) return null; + + const date = isTimeStr(value) + ? new Date(0, 0, 1, ...value.split(':').map(Number)) + : new Date(value); + + if (isNaN((date as unknown) as number)) return null; + + return { + hour: date.getHours(), + minute: date.getMinutes(), + second: date.getSeconds(), + }; + } + + toModel(value: NgbTimeStruct | null): string { + if (!value) return ''; + + const date = new Date(0, 0, 1, value.hour, value.minute, value.second); + const formattedDate = formatDate(date, 'HH:mm', 'en'); + + return formattedDate; + } +} + +function isTimeStr(value: string | Date): value is string { + return /^((2[123])|[01][0-9])(\:[0-5][0-9]){1,2}$/.test(String(value)); +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/abstract-actions/abstract-actions.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/abstract-actions/abstract-actions.component.ts new file mode 100644 index 0000000000..14d680059a --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/abstract-actions/abstract-actions.component.ts @@ -0,0 +1,32 @@ +import { Directive, Injector, Input } from '@angular/core'; +import { ActionData, ActionList } from '../../models/actions'; +import { ExtensionsService } from '../../services/extensions.service'; +import { EXTENSIONS_ACTION_TYPE, EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token'; + +// tslint:disable: directive-class-suffix +// Fix for https://github.com/angular/angular/issues/23904 +// @dynamic +@Directive() +export abstract class AbstractActionsComponent> extends ActionData< + InferredRecord +> { + readonly actionList: L; + + readonly getInjected: InferredData['getInjected']; + + @Input() readonly record: InferredData['record']; + + constructor(injector: Injector) { + super(); + + // tslint:disable-next-line + this.getInjected = injector.get.bind(injector); + const extensions = injector.get(ExtensionsService); + const name = injector.get(EXTENSIONS_IDENTIFIER); + const type = injector.get(EXTENSIONS_ACTION_TYPE); + this.actionList = (extensions[type].get(name).actions as unknown) as L; + } +} + +type InferredData = ActionData>; +type InferredRecord = L extends ActionList ? R : never; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/date-time-picker/date-time-picker.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/date-time-picker/date-time-picker.component.ts new file mode 100644 index 0000000000..157f9f49e2 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/date-time-picker/date-time-picker.component.ts @@ -0,0 +1,74 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + Optional, + SkipSelf, + ViewChild, +} from '@angular/core'; +import { ControlContainer } from '@angular/forms'; +import { + NgbDateAdapter, + NgbInputDatepicker, + NgbTimeAdapter, + NgbTimepicker, +} from '@ng-bootstrap/ng-bootstrap'; +import { DateTimeAdapter } from '../../adapters/date-time.adapter'; +import { FormProp } from '../../models/form-props'; +import { selfFactory } from '../../utils/factory.util'; + +@Component({ + exportAs: 'abpDateTimePicker', + selector: 'abp-date-time-picker', + template: ` + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, + viewProviders: [ + { + provide: ControlContainer, + useFactory: selfFactory, + deps: [[new Optional(), new SkipSelf(), ControlContainer]], + }, + { + provide: NgbDateAdapter, + useClass: DateTimeAdapter, + }, + { + provide: NgbTimeAdapter, + useClass: DateTimeAdapter, + }, + ], +}) +export class DateTimePickerComponent { + @Input() prop: FormProp; + + @ViewChild(NgbInputDatepicker) date: NgbInputDatepicker; + @ViewChild(NgbTimepicker) time: NgbTimepicker; + + constructor(public readonly cdRef: ChangeDetectorRef) {} + + setDate(datestr: string) { + this.date.writeValue(datestr); + } + + setTime(datestr: string) { + this.time.writeValue(datestr); + } +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html new file mode 100644 index 0000000000..ef1647b540 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html @@ -0,0 +1,92 @@ +
    + + + + + + +
    + + +
    +     + + + + + + + + + + + + + + + + + + + + + + + + + +
    diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts new file mode 100644 index 0000000000..f796c2d5fe --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts @@ -0,0 +1,80 @@ +import { TrackByService } from '@abp/ng.core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + Optional, + SkipSelf, +} from '@angular/core'; +import { ControlContainer, Validators } from '@angular/forms'; +import { NgbDateAdapter, NgbTimeAdapter } from '@ng-bootstrap/ng-bootstrap'; +import { DateAdapter } from '../../adapters/date.adapter'; +import { TimeAdapter } from '../../adapters/time.adapter'; +import { ePropType } from '../../enums/props.enum'; +import { FormProp } from '../../models/form-props'; +import { PropData } from '../../models/props'; +import { selfFactory } from '../../utils/factory.util'; + +@Component({ + selector: 'abp-extensible-form-prop', + templateUrl: './extensible-form-prop.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + viewProviders: [ + { + provide: ControlContainer, + useFactory: selfFactory, + deps: [[new Optional(), new SkipSelf(), ControlContainer]], + }, + { provide: NgbDateAdapter, useClass: DateAdapter }, + { provide: NgbTimeAdapter, useClass: TimeAdapter }, + ], +}) +export class ExtensibleFormPropComponent { + @Input() data: PropData; + + @Input() prop: FormProp; + + constructor(public readonly cdRef: ChangeDetectorRef, public readonly track: TrackByService) {} + + getAsterisk(prop: FormProp, data: PropData): string { + return prop.validators(data).some(validator => validator === Validators.required) ? '*' : ''; + } + + getComponent(prop: FormProp): string { + if (prop.options) return 'select'; + + switch (prop.type) { + case ePropType.Boolean: + return 'checkbox'; + case ePropType.Date: + return 'date'; + case ePropType.DateTime: + return 'dateTime'; + case ePropType.Text: + return 'textarea'; + case ePropType.Time: + return 'time'; + default: + return 'input'; + } + } + + getType(prop: FormProp): string { + switch (prop.type) { + case ePropType.Date: + case ePropType.String: + return 'text'; + case ePropType.Boolean: + return 'checkbox'; + case ePropType.Number: + return 'number'; + case ePropType.Email: + return 'email'; + case ePropType.Password: + return 'password'; + default: + return 'hidden'; + } + } +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html new file mode 100644 index 0000000000..f8b5fba383 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts new file mode 100644 index 0000000000..995b29b8d1 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts @@ -0,0 +1,82 @@ +import { TrackByService } from '@abp/ng.core'; +import { + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Inject, + Input, + OnDestroy, + Optional, + QueryList, + SkipSelf, + ViewChildren, +} from '@angular/core'; +import { ControlContainer, FormGroup } from '@angular/forms'; +import { Subscription } from 'rxjs'; +import { debounceTime } from 'rxjs/operators'; +import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties'; +import { FormPropList } from '../../models/form-props'; +import { ExtensionsService } from '../../services/extensions.service'; +import { EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token'; +import { selfFactory } from '../../utils/factory.util'; +import { ExtensibleFormPropComponent } from './extensible-form-prop.component'; + +@Component({ + exportAs: 'abpExtensibleForm', + selector: 'abp-extensible-form', + templateUrl: './extensible-form.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + viewProviders: [ + { + provide: ControlContainer, + useFactory: selfFactory, + deps: [[new Optional(), new SkipSelf(), ControlContainer]], + }, + ], +}) +export class ExtensibleFormComponent implements AfterViewInit, OnDestroy { + @ViewChildren(ExtensibleFormPropComponent) + formProps: QueryList; + + @Input() + set selectedRecord(record: R) { + const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit'; + this.propList = this.extensions[`${type}FormProps`].get(this.identifier).props; + this.record = record; + } + + private subscription = new Subscription(); + extraPropertiesKey = EXTRA_PROPERTIES_KEY; + propList: FormPropList; + record: R; + + get form(): FormGroup { + return (this.container ? this.container.control : { controls: {} }) as FormGroup; + } + + get extraProperties(): FormGroup { + return (this.form.controls.extraProperties || { controls: {} }) as FormGroup; + } + + constructor( + public readonly cdRef: ChangeDetectorRef, + public readonly track: TrackByService, + private container: ControlContainer, + private extensions: ExtensionsService, + @Inject(EXTENSIONS_IDENTIFIER) private identifier: string, + ) {} + + ngAfterViewInit() { + this.subscription.add( + this.form.statusChanges.pipe(debounceTime(0)).subscribe(() => { + this.formProps.forEach(prop => prop.cdRef.markForCheck()); + this.cdRef.detectChanges(); + }), + ); + } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html new file mode 100644 index 0000000000..d30b005a98 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + +
    +     +     +     +     +     diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts new file mode 100644 index 0000000000..7768d70c2c --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts @@ -0,0 +1,88 @@ +import { ListService } from '@abp/ng.core'; +import { formatDate } from '@angular/common'; +import { + ChangeDetectionStrategy, + Component, + Inject, + Injector, + Input, + LOCALE_ID, + TemplateRef, + TrackByFunction, +} from '@angular/core'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { ePropType } from '../../enums/props.enum'; +import { EntityProp, EntityPropList } from '../../models/entity-props'; +import { PropData } from '../../models/props'; +import { ExtensionsService } from '../../services/extensions.service'; +import { EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token'; +const DEFAULT_ACTIONS_COLUMN_WIDTH = 150; + +@Component({ + exportAs: 'abpExtensibleTable', + selector: 'abp-extensible-table', + templateUrl: './extensible-table.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ExtensibleTableComponent { + @Input() actionsText: string; + @Input() data: R[]; + @Input() list: ListService; + @Input() recordsTotal: number; + @Input() set actionsColumnWidth(width: number) { + this.setColumnWidths(width ? Number(width) : undefined); + } + @Input() actionsTemplate: TemplateRef; + + readonly columnWidths: number[]; + + readonly propList: EntityPropList; + + readonly trackByFn: TrackByFunction> = (_, item) => item.name; + + constructor(@Inject(LOCALE_ID) private locale: string, injector: Injector) { + const extensions = injector.get(ExtensionsService); + const name = injector.get(EXTENSIONS_IDENTIFIER); + this.propList = extensions.entityProps.get(name).props; + this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH); + } + + private setColumnWidths(actionsColumn: number) { + const widths = [actionsColumn]; + this.propList.forEach(({ value: prop }) => { + widths.push(prop.columnWidth); + }); + (this.columnWidths as any) = widths; + } + + private getDate(value: Date, format: string) { + return value ? formatDate(value, format, this.locale) : ''; + } + + private getIcon(value: boolean) { + return value + ? '
    ' + : '
    '; + } + + getContent(prop: EntityProp, data: PropData): Observable { + return prop.valueResolver(data).pipe( + map(value => { + switch (prop.type) { + case ePropType.Boolean: + return this.getIcon(value); + case ePropType.Date: + return this.getDate(value, 'yyyy-MM-dd'); + case ePropType.Time: + return this.getDate(value, 'HH:mm'); + case ePropType.DateTime: + return this.getDate(value, 'yyyy-MM-dd HH:mm:ss Z'); + default: + return value; + // More types can be handled in the future + } + }), + ); + } +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html new file mode 100644 index 0000000000..04ac1017a4 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html @@ -0,0 +1,24 @@ +
    + +
    + + + +
    +
    diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.ts new file mode 100644 index 0000000000..30d36699b6 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.ts @@ -0,0 +1,36 @@ +import { + ChangeDetectionStrategy, + Component, + Injector, + Input, + TrackByFunction, +} from '@angular/core'; +import { EntityAction, EntityActionList } from '../../models/entity-actions'; +import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token'; +import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.component'; + +@Component({ + exportAs: 'abpGridActions', + selector: 'abp-grid-actions', + templateUrl: './grid-actions.component.html', + providers: [ + { + provide: EXTENSIONS_ACTION_TYPE, + useValue: 'entityActions', + }, + ], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class GridActionsComponent extends AbstractActionsComponent> { + @Input() icon = 'fa fa-cog'; + + @Input() readonly index: number; + + @Input() text = ''; + + readonly trackByFn: TrackByFunction> = (_, item) => item.text; + + constructor(injector: Injector) { + super(injector); + } +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html new file mode 100644 index 0000000000..8f97f6aa64 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html @@ -0,0 +1,18 @@ +
    +
    + + + + + + + + + +
    +
    diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.ts new file mode 100644 index 0000000000..dfd7c0105d --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.ts @@ -0,0 +1,49 @@ +import { + ChangeDetectionStrategy, + Component, + InjectFlags, + InjectionToken, + Injector, + TrackByFunction, + Type, +} from '@angular/core'; +import { ToolbarActionList, ToolbarComponent } from '../../models/toolbar-actions'; +import { + EXTENSIONS_ACTION_CALLBACK, + EXTENSIONS_ACTION_DATA, + EXTENSIONS_ACTION_TYPE, +} from '../../tokens/extensions.token'; +import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.component'; + +@Component({ + exportAs: 'abpPageToolbar', + selector: 'abp-page-toolbar', + templateUrl: './page-toolbar.component.html', + providers: [ + { + provide: EXTENSIONS_ACTION_TYPE, + useValue: 'toolbarActions', + }, + ], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class PageToolbarComponent extends AbstractActionsComponent> { + readonly trackByFn: TrackByFunction> = (_, item) => + item.action || item.component; + + constructor(private readonly injector: Injector) { + super(injector); + } + + createInjector(action: ToolbarComponent): Injector { + const get = (token: Type | InjectionToken, notFoundValue?: T, flags?: InjectFlags) => { + return token === EXTENSIONS_ACTION_DATA + ? this.data + : token === EXTENSIONS_ACTION_CALLBACK + ? (data = this.data) => action.action(data) + : this.getInjected.call(this.injector, token, notFoundValue, flags); + }; + + return { get }; + } +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/constants/extra-properties.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/constants/extra-properties.ts new file mode 100644 index 0000000000..e46e633e07 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/constants/extra-properties.ts @@ -0,0 +1 @@ +export const EXTRA_PROPERTIES_KEY = 'extraProperties'; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/directives/disabled.directive.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/directives/disabled.directive.ts new file mode 100644 index 0000000000..da3b985666 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/directives/disabled.directive.ts @@ -0,0 +1,19 @@ +import { Directive, Host, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { NgControl } from '@angular/forms'; + +@Directive({ + selector: '[abpDisabled]', +}) +export class DisabledDirective implements OnChanges { + @Input() + abpDisabled: boolean; + + constructor(@Host() private ngControl: NgControl) {} + + // Related issue: https://github.com/angular/angular/issues/35330 + ngOnChanges({ abpDisabled }: SimpleChanges) { + if (this.ngControl.control && abpDisabled) { + this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable'](); + } + } +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/directives/prop-data.directive.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/directives/prop-data.directive.ts new file mode 100644 index 0000000000..8de502f14b --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/directives/prop-data.directive.ts @@ -0,0 +1,54 @@ +import { + Directive, + Injector, + Input, + OnChanges, + OnDestroy, + TemplateRef, + ViewContainerRef, +} from '@angular/core'; +import { PropData, PropList } from '../models/props'; + +@Directive({ + exportAs: 'abpPropData', + selector: '[abpPropData]', +}) +export class PropDataDirective> extends PropData> + implements OnChanges, OnDestroy { + /* tslint:disable:no-input-rename */ + @Input('abpPropDataFromList') readonly propList: L; + + @Input('abpPropDataWithRecord') readonly record: InferredData['record']; + + @Input('abpPropDataAtIndex') readonly index: number; + /* tslint:enable:no-input-rename */ + + readonly getInjected: InferredData['getInjected']; + + constructor( + private tempRef: TemplateRef, + private vcRef: ViewContainerRef, + injector: Injector, + ) { + super(); + + // tslint:disable-next-line + this.getInjected = injector.get.bind(injector); + } + + ngOnChanges() { + this.vcRef.clear(); + + this.vcRef.createEmbeddedView(this.tempRef, { + $implicit: this.data, + index: 0, + }); + } + + ngOnDestroy() { + this.vcRef.clear(); + } +} + +type InferredData = PropData>; +type InferredRecord = L extends PropList ? R : never; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/props.enum.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/props.enum.ts new file mode 100644 index 0000000000..1acb15f8d4 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/props.enum.ts @@ -0,0 +1,12 @@ +export const enum ePropType { + Boolean = 'boolean', + Date = 'date', + DateTime = 'dateTime', + Email = 'email', + Enum = 'enum', + Number = 'number', + Password = 'password', + String = 'string', + Text = 'text', + Time = 'time', +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/actions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/actions.ts new file mode 100644 index 0000000000..4b1d1bd740 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/actions.ts @@ -0,0 +1,79 @@ +/* tslint:disable:variable-name */ +import { LinkedList } from '@abp/utils'; +import { InjectFlags, InjectionToken, Type } from '@angular/core'; +import { O } from 'ts-toolbelt'; + +export abstract class ActionList> extends LinkedList     {} + +export abstract class ActionData { + abstract getInjected: ( + token: Type | InjectionToken, + notFoundValue?: T, + flags?: InjectFlags, + ) => T; + index?: number; + abstract record: R; + + get data(): ReadonlyActionData { + return { + getInjected: this.getInjected, + index: this.index, + record: this.record, + }; + } +} + +export type ReadonlyActionData = O.Readonly, 'data'>>; + +export abstract class Action { + constructor( + public readonly permission: string, + public readonly visible: ActionPredicate = _ => true, + public readonly action: ActionCallback = _ => {}, + ) {} +} + +export type ActionCallback = (data?: Omit, 'data'>) => R; +export type ActionPredicate = (data?: Omit, 'data'>) => boolean; + +export abstract class ActionsFactory> { + protected abstract _ctor: Type; + private contributorCallbacks: ActionContributorCallbacks> = {}; + + get(name: string): C { + this.contributorCallbacks[name] = this.contributorCallbacks[name] || []; + + return new this._ctor(this.contributorCallbacks[name]); + } +} + +export abstract class Actions { + protected abstract _ctor: Type; + + get actions(): L { + const actionList = new this._ctor(); + + this.callbackList.forEach(callback => callback(actionList)); + + return actionList; + } + + constructor(private readonly callbackList: ActionContributorCallback[]) {} + + addContributor(contributeCallback: ActionContributorCallback) { + this.callbackList.push(contributeCallback); + } + + clearContributors() { + while (this.callbackList.length) this.callbackList.pop(); + } +} + +export type ActionContributorCallbacks> = Record< + string, + ActionContributorCallback[] +>; + +export type ActionContributorCallback> = (actionList: L) => any; + +type InferredActionList = C extends Actions ? L : never; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts new file mode 100644 index 0000000000..4938e10337 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts @@ -0,0 +1,53 @@ +/* tslint:disable:variable-name */ +import { Type } from '@angular/core'; +import { O } from 'ts-toolbelt'; +import { + Action, + ActionContributorCallback, + ActionContributorCallbacks, + ActionList, + Actions, + ActionsFactory, +} from './actions'; + +export class EntityActionList extends ActionList> {} + +export class EntityActions extends Actions> { + protected _ctor: Type> = EntityActionList; +} + +export class EntityActionsFactory extends ActionsFactory> { + protected _ctor: Type> = EntityActions; +} + +export class EntityAction extends Action { + readonly text: string; + readonly icon: string; + + constructor(options: EntityActionOptions) { + super(options.permission, options.visible, options.action); + this.text = options.text; + this.icon = options.icon || ''; + } + + static create(options: EntityActionOptions) { + return new EntityAction(options); + } + + static createMany(arrayOfOptions: EntityActionOptions[]) { + return arrayOfOptions.map(EntityAction.create); + } +} + +export type EntityActionOptions = O.Optional< + O.Writable>, + 'permission' | 'visible' | 'icon' +>; + +export type EntityActionDefaults = Record[]>; +export type EntityActionContributorCallback = ActionContributorCallback< + EntityActionList +>; +export type EntityActionContributorCallbacks = ActionContributorCallbacks< + EntityActionList +>; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts new file mode 100644 index 0000000000..a49a8e8d41 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts @@ -0,0 +1,67 @@ +/* tslint:disable:variable-name */ +import { Type } from '@angular/core'; +import { Observable, of } from 'rxjs'; +import { O } from 'ts-toolbelt'; +import { + Prop, + PropCallback, + PropContributorCallback, + PropContributorCallbacks, + PropList, + Props, + PropsFactory, +} from './props'; + +export class EntityPropList extends PropList> {} + +export class EntityProps extends Props> { + protected _ctor: Type> = EntityPropList; +} + +export class EntityPropsFactory extends PropsFactory> { + protected _ctor: Type> = EntityProps; +} + +export class EntityProp extends Prop { + readonly columnWidth: number | undefined; + readonly sortable: boolean; + readonly valueResolver: PropCallback>; + + constructor(options: EntityPropOptions) { + super( + options.type, + options.name, + options.displayName, + options.permission, + options.visible, + options.isExtra, + ); + + this.columnWidth = options.columnWidth; + this.sortable = options.sortable || false; + this.valueResolver = options.valueResolver || (data => of(data.record[this.name])); + } + + static create(options: EntityPropOptions) { + return new EntityProp(options); + } + + static createMany(arrayOfOptions: EntityPropOptions[]) { + return arrayOfOptions.map(EntityProp.create); + } +} + +export type EntityPropOptions = O.Optional< + O.Writable>, + | 'permission' + | 'visible' + | 'displayName' + | 'isExtra' + | 'columnWidth' + | 'sortable' + | 'valueResolver' +>; + +export type EntityPropDefaults = Record[]>; +export type EntityPropContributorCallback = PropContributorCallback>; +export type EntityPropContributorCallbacks = PropContributorCallbacks>; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts new file mode 100644 index 0000000000..f9e6dca9ff --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts @@ -0,0 +1,109 @@ +/* tslint:disable:variable-name */ +import { ABP } from '@abp/ng.core'; +import { Injector, Type } from '@angular/core'; +import { AsyncValidatorFn, ValidatorFn } from '@angular/forms'; +import { Observable } from 'rxjs'; +import { O } from 'ts-toolbelt'; +import { + Prop, + PropCallback, + PropContributorCallback, + PropContributorCallbacks, + PropData, + PropList, + PropPredicate, + Props, + PropsFactory, +} from './props'; + +export class FormPropList extends PropList> {} + +export class FormProps extends Props> { + protected _ctor: Type> = FormPropList; +} + +export class CreateFormPropsFactory extends PropsFactory> { + protected _ctor: Type> = FormProps; +} + +export class EditFormPropsFactory extends PropsFactory> { + protected _ctor: Type> = FormProps; +} + +export class FormProp extends Prop { + readonly validators: PropCallback; + readonly asyncValidators: PropCallback; + readonly disabled: PropPredicate; + readonly readonly: PropPredicate; + readonly autocomplete: string; + readonly defaultValue: boolean | number | string | Date; + readonly options: PropCallback[]>> | undefined; + readonly id: string | undefined; + + constructor(options: FormPropOptions) { + super( + options.type, + options.name, + options.displayName, + options.permission, + options.visible, + options.isExtra, + ); + + this.asyncValidators = options.asyncValidators || (_ => []); + this.validators = options.validators || (_ => []); + this.disabled = options.disabled || (_ => false); + this.readonly = options.readonly || (_ => false); + this.autocomplete = options.autocomplete || 'off'; + this.options = options.options; + this.id = options.id || options.name; + const defaultValue = options.defaultValue; + this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || null; + } + + static create(options: FormPropOptions) { + return new FormProp(options); + } + + static createMany(arrayOfOptions: FormPropOptions[]) { + return arrayOfOptions.map(FormProp.create); + } +} + +export class FormPropData extends PropData { + getInjected: PropData['getInjected']; + + constructor(injector: Injector, public readonly record: R) { + super(); + + // tslint:disable-next-line + this.getInjected = injector.get.bind(injector); + } +} + +export type FormPropOptions = O.Optional< + O.Writable>, + | 'permission' + | 'visible' + | 'displayName' + | 'isExtra' + | 'validators' + | 'asyncValidators' + | 'disabled' + | 'readonly' + | 'autocomplete' + | 'defaultValue' + | 'options' + | 'id' +>; + +export type CreateFormPropDefaults = Record[]>; +export type CreateFormPropContributorCallback = PropContributorCallback>; +export type CreateFormPropContributorCallbacks = PropContributorCallbacks>; +export type EditFormPropDefaults = Record[]>; +export type EditFormPropContributorCallback = PropContributorCallback>; +export type EditFormPropContributorCallbacks = PropContributorCallbacks>; + +function isFalsyValue(defaultValue: FormProp['defaultValue']): boolean { + return [0, '', false].indexOf(defaultValue as any) > -1; +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts new file mode 100644 index 0000000000..6a44e4e231 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts @@ -0,0 +1,96 @@ +import { ePropType } from '../../enums/props.enum'; +import { EntityPropList } from '../entity-props'; +import { FormPropList } from '../form-props'; +import { PropContributorCallbacks } from '../props'; + +export interface PropContributors { + prop: PropContributorCallbacks>; + createForm: PropContributorCallbacks>; + editForm: PropContributorCallbacks>; +} + +export interface Config { + objectExtensions: Item; +} + +export interface Item { + modules: Modules; + enums: Enums; +} + +export type Modules = Configuration; + +export interface Module { + configuration: Configuration; + entities: Entities; +} + +export type Entities = Configuration; + +export interface Entity { + configuration: Configuration; + properties: Properties; +} + +export type Properties = Configuration; + +export interface Property { + type: string; + typeSimple: ePropType; + displayName: DisplayName | null; + api: Api; + ui: Ui; + attributes: Attribute[]; + configuration: Configuration; + defaultValue?: any; +} + +export interface DisplayName { + name: string; + resource: string; +} + +export interface Api { + onGet: ApiConfig; + onCreate: ApiConfig; + onUpdate: ApiConfig; +} + +export interface ApiConfig { + isAvailable: boolean; +} + +export interface Ui { + onTable: UiPropConfig; + onCreateForm: UiFormConfig; + onEditForm: UiFormConfig; +} + +export interface UiPropConfig { + isSortable: boolean; + isVisible: boolean; +} + +export interface UiFormConfig { + isVisible: boolean; +} + +export interface Attribute { + typeSimple: string; + config: Configuration; +} + +export type Configuration = Record; + +export type Enums = Record; + +export interface Enum { + fields: EnumMember[]; + localizationResource?: string; + transformed?: any; +} + +export interface EnumMember { + name: string; + value: any; +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/object-extensions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/object-extensions.ts new file mode 100644 index 0000000000..65bc2a7fdf --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/object-extensions.ts @@ -0,0 +1,3 @@ +import * as ObjectExtensions from './internal/object-extensions'; + +export { ObjectExtensions }; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts new file mode 100644 index 0000000000..1e2fa9a0a0 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts @@ -0,0 +1,85 @@ +/* tslint:disable:variable-name */ +import { LinkedList } from '@abp/utils'; +import { InjectFlags, InjectionToken, Type } from '@angular/core'; +import { O } from 'ts-toolbelt'; +import { ePropType } from '../enums/props.enum'; + +export abstract class PropList> extends LinkedList {} + +export abstract class PropData { + abstract getInjected: ( + token: Type | InjectionToken, + notFoundValue?: T, + flags?: InjectFlags, + ) => T; + index?: number; + abstract record: R; + + get data(): ReadonlyPropData { + return { + getInjected: this.getInjected, + index: this.index, + record: this.record, + }; + } +} + +export type ReadonlyPropData = O.Readonly, 'data'>>; + +export abstract class Prop { + constructor( + public readonly type: ePropType, + public readonly name: string, + public readonly displayName: string, + public readonly permission: string, + public readonly visible: PropPredicate = _ => true, + public readonly isExtra = false, + ) { + this.displayName = this.displayName || this.name; + } +} + +export type PropCallback = (data?: Omit, 'data'>) => R; +export type PropPredicate = (data?: Omit, 'data'>) => boolean; + +export abstract class PropsFactory> { + protected abstract _ctor: Type; + private contributorCallbacks: PropContributorCallbacks> = {}; + + get(name: string): C { + this.contributorCallbacks[name] = this.contributorCallbacks[name] || []; + + return new this._ctor(this.contributorCallbacks[name]); + } +} + +export abstract class Props { + protected abstract _ctor: Type; + + get props(): L { + const propList = new this._ctor(); + + this.callbackList.forEach(callback => callback(propList)); + + return propList; + } + + constructor(private readonly callbackList: PropContributorCallback[]) {} + + addContributor(contributeCallback: PropContributorCallback) { + this.callbackList.push(contributeCallback); + } + + clearContributors() { + while (this.callbackList.length) this.callbackList.pop(); + } +} + +export type PropContributorCallbacks> = Record< + string, + PropContributorCallback[] +>; + +export type PropContributorCallback> = (propList: L) => any; + +type InferredPropList = C extends Props ? L : never; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/toolbar-actions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/toolbar-actions.ts new file mode 100644 index 0000000000..1a166b083d --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/toolbar-actions.ts @@ -0,0 +1,78 @@ +/* tslint:disable:variable-name */ +import { Type } from '@angular/core'; +import { O } from 'ts-toolbelt'; +import { + Action, + ActionContributorCallback, + ActionContributorCallbacks, + ActionList, + Actions, + ActionsFactory, +} from './actions'; + +export class ToolbarActionList extends ActionList< + R, + ToolbarAction | ToolbarComponent +> {} + +export class ToolbarActions extends Actions> { + protected _ctor: Type> = ToolbarActionList; +} + +export class ToolbarActionsFactory extends ActionsFactory> { + protected _ctor: Type> = ToolbarActions; +} + +export class ToolbarAction extends Action { + readonly text: string; + readonly icon: string; + + constructor(options: ToolbarActionOptions) { + super(options.permission, options.visible, options.action); + this.text = options.text; + this.icon = options.icon || ''; + } + + static create(options: ToolbarActionOptions) { + return new ToolbarAction(options); + } + + static createMany(arrayOfOptions: ToolbarActionOptions[]) { + return arrayOfOptions.map(ToolbarAction.create); + } +} + +export class ToolbarComponent extends Action { + readonly component: Type; + + constructor(options: ToolbarComponentOptions) { + super(options.permission, options.visible, options.action); + this.component = options.component; + } + + static create(options: ToolbarComponentOptions) { + return new ToolbarComponent(options); + } + + static createMany(arrayOfOptions: ToolbarComponentOptions[]) { + return arrayOfOptions.map(ToolbarComponent.create); + } +} + +export type ToolbarActionOptions = O.Optional< + O.Writable>, + 'permission' | 'visible' | 'icon' +>; + +export type ToolbarComponentOptions = O.Optional< + O.Writable>, + 'permission' | 'visible' | 'action' +>; + +export type ToolbarActionDefaults = Record[]>; +export type ToolbarActionContributorCallback = ActionContributorCallback< + ToolbarActionList +>; +export type ToolbarActionContributorCallbacks = ActionContributorCallbacks< + ToolbarActionList +>; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/services/extensions.service.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/services/extensions.service.ts new file mode 100644 index 0000000000..e57a874ef8 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/services/extensions.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { EntityActionsFactory } from '../models/entity-actions'; +import { EntityPropsFactory } from '../models/entity-props'; +import { CreateFormPropsFactory, EditFormPropsFactory } from '../models/form-props'; +import { ToolbarActionsFactory } from '../models/toolbar-actions'; + +@Injectable({ + providedIn: 'root', +}) +export class ExtensionsService { + readonly entityActions = new EntityActionsFactory(); + readonly toolbarActions = new ToolbarActionsFactory(); + readonly entityProps = new EntityPropsFactory(); + readonly createFormProps = new CreateFormPropsFactory(); + readonly editFormProps = new EditFormPropsFactory(); +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts new file mode 100644 index 0000000000..ba504756aa --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts @@ -0,0 +1,13 @@ +import { InjectionToken } from '@angular/core'; +import { ActionCallback, ReadonlyActionData as ActionData } from '../models/actions'; +import { ExtensionsService } from '../services/extensions.service'; + +export const EXTENSIONS_IDENTIFIER = new InjectionToken('EXTENSIONS_IDENTIFIER'); +export type ActionKeys = Extract<'entityActions' | 'toolbarActions', keyof ExtensionsService>; + +export const EXTENSIONS_ACTION_TYPE = new InjectionToken('EXTENSIONS_ACTION_TYPE'); + +export const EXTENSIONS_ACTION_DATA = new InjectionToken('EXTENSIONS_ACTION_DATA'); +export const EXTENSIONS_ACTION_CALLBACK = new InjectionToken>( + 'EXTENSIONS_ACTION_DATA', +); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts new file mode 100644 index 0000000000..c0c93ce151 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts @@ -0,0 +1,48 @@ +import { CoreModule } from '@abp/ng.core'; +import { ThemeSharedModule } from '@abp/ng.theme.shared'; +import { NgModule } from '@angular/core'; +import { + NgbDatepickerModule, + NgbDropdownModule, + NgbTimepickerModule, +} from '@ng-bootstrap/ng-bootstrap'; +import { NgxValidateCoreModule } from '@ngx-validate/core'; +import { DateTimePickerComponent } from './components/date-time-picker/date-time-picker.component'; +import { ExtensibleFormPropComponent } from './components/extensible-form/extensible-form-prop.component'; +import { ExtensibleFormComponent } from './components/extensible-form/extensible-form.component'; +import { ExtensibleTableComponent } from './components/extensible-table/extensible-table.component'; +import { GridActionsComponent } from './components/grid-actions/grid-actions.component'; +import { PageToolbarComponent } from './components/page-toolbar/page-toolbar.component'; +import { DisabledDirective } from './directives/disabled.directive'; +import { PropDataDirective } from './directives/prop-data.directive'; + +@NgModule({ + exports: [ + DateTimePickerComponent, + PageToolbarComponent, + GridActionsComponent, + ExtensibleFormComponent, + ExtensibleTableComponent, + PropDataDirective, + DisabledDirective, + ], + declarations: [ + DateTimePickerComponent, + PageToolbarComponent, + GridActionsComponent, + ExtensibleFormPropComponent, + ExtensibleFormComponent, + ExtensibleTableComponent, + PropDataDirective, + DisabledDirective, + ], + imports: [ + CoreModule, + ThemeSharedModule, + NgxValidateCoreModule, + NgbDatepickerModule, + NgbDropdownModule, + NgbTimepickerModule, + ], +}) +export class UiExtensionsModule {} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/actions.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/actions.util.ts new file mode 100644 index 0000000000..f4501317df --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/actions.util.ts @@ -0,0 +1,49 @@ +import { ActionContributorCallback, ActionList, ActionsFactory } from '../models/actions'; +import { + EntityActionContributorCallbacks, + EntityActionDefaults, + EntityActions, + EntityActionsFactory, +} from '../models/entity-actions'; +import { + ToolbarActionContributorCallbacks, + ToolbarActionDefaults, + ToolbarActions, + ToolbarActionsFactory, +} from '../models/toolbar-actions'; + +export function mergeWithDefaultActions>( + extension: F, + defaultActions: InferredActionDefaults, + ...contributors: InferredActionContributorCallbacks[] +) { + Object.keys(defaultActions).forEach((name: string) => { + const actions: InferredActions = extension.get(name); + actions.clearContributors(); + actions.addContributor((actionList: ActionList) => + actionList.addManyTail(defaultActions[name]), + ); + contributors.forEach(contributor => + (contributor[name] || []).forEach((callback: ActionContributorCallback) => + actions.addContributor(callback), + ), + ); + }); +} +type InferredActionDefaults = F extends EntityActionsFactory + ? EntityActionDefaults + : F extends ToolbarActionsFactory + ? ToolbarActionDefaults + : never; + +type InferredActionContributorCallbacks = F extends EntityActionsFactory + ? EntityActionContributorCallbacks + : F extends ToolbarActionsFactory + ? ToolbarActionContributorCallbacks + : never; + +type InferredActions = F extends EntityActionsFactory + ? EntityActions + : F extends ToolbarActionsFactory + ? ToolbarActions + : never; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/enum.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/enum.util.ts new file mode 100644 index 0000000000..869b9a8c80 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/enum.util.ts @@ -0,0 +1,73 @@ +import { ABP, LocalizationService } from '@abp/ng.core'; +import { merge, Observable, of } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { EXTRA_PROPERTIES_KEY } from '../constants/extra-properties'; +import { ObjectExtensions } from '../models/object-extensions'; +import { PropCallback } from '../models/props'; + +export function createEnum(members: ObjectExtensions.EnumMember[]) { + const enumObject: any = {}; + + members.forEach(({ name, value }) => { + enumObject[(enumObject[name] = value)] = name; + }); + + return enumObject; +} + +export function createEnumValueResolver( + enumType: string, + lookupEnum: ObjectExtensions.Enum, + propName: string, +): PropCallback> { + return data => { + const value = data.record[EXTRA_PROPERTIES_KEY][propName]; + const key = lookupEnum.transformed[value]; + const l10n = data.getInjected(LocalizationService); + const localizeEnum = createEnumLocalizer(l10n, enumType, lookupEnum); + + return createLocalizationStream(l10n, localizeEnum(key)); + }; +} + +export function createEnumOptions( + enumType: string, + lookupEnum: ObjectExtensions.Enum, +): PropCallback[]>> { + return data => { + const l10n = data.getInjected(LocalizationService); + const localizeEnum = createEnumLocalizer(l10n, enumType, lookupEnum); + + return createLocalizationStream( + l10n, + lookupEnum.fields.map(({ name, value }) => ({ + key: localizeEnum(name), + value, + })), + ); + }; +} + +function createLocalizationStream(l10n: LocalizationService, mapTarget: any) { + return merge(of(null), l10n.languageChange).pipe(map(() => mapTarget)); +} + +function createEnumLocalizer( + l10n: LocalizationService, + enumType: string, + lookupEnum: ObjectExtensions.Enum, +): (key: string) => string { + const resource = lookupEnum.localizationResource; + const shortType = getShortEnumType(enumType); + + return key => + l10n.localizeWithFallbackSync( + [resource], + ['Enum:' + shortType + '.' + key, shortType + '.' + key, key], + key, + ); +} + +function getShortEnumType(enumType: string): string { + return enumType.split('.').pop(); +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/factory.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/factory.util.ts new file mode 100644 index 0000000000..5bb6265075 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/factory.util.ts @@ -0,0 +1,3 @@ +export function selfFactory(dependency?: any) { + return dependency; +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/form-props.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/form-props.util.ts new file mode 100644 index 0000000000..828ac383d0 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/form-props.util.ts @@ -0,0 +1,61 @@ +import { FormControl, FormGroup } from '@angular/forms'; +import { DateTimeAdapter } from '../adapters/date-time.adapter'; +import { DateAdapter } from '../adapters/date.adapter'; +import { TimeAdapter } from '../adapters/time.adapter'; +import { EXTRA_PROPERTIES_KEY } from '../constants/extra-properties'; +import { ePropType } from '../enums/props.enum'; +import { FormPropList } from '../models/form-props'; +import { PropData } from '../models/props'; +import { ExtensionsService } from '../services/extensions.service'; +import { EXTENSIONS_IDENTIFIER } from '../tokens/extensions.token'; + +export function generateFormFromProps(data: PropData) { + const extensions = data.getInjected(ExtensionsService); + const identifier = data.getInjected(EXTENSIONS_IDENTIFIER); + + const form = new FormGroup({}); + const extraForm = new FormGroup({}); + form.addControl(EXTRA_PROPERTIES_KEY, extraForm); + + const record = data.record || {}; + const type = JSON.stringify(record) === '{}' ? 'create' : 'edit'; + const props: FormPropList = extensions[`${type}FormProps`].get(identifier).props; + const extraProperties = record[EXTRA_PROPERTIES_KEY] || {}; + + props.forEach(({ value: prop }) => { + const name = prop.name; + const isExtraProperty = prop.isExtra || name in extraProperties; + let value = isExtraProperty ? extraProperties[name] : name in record ? record[name] : undefined; + + if (typeof value === 'undefined') value = prop.defaultValue; + + if (value) { + let adapter: DateAdapter | TimeAdapter | DateTimeAdapter; + switch (prop.type) { + case ePropType.Date: + adapter = new DateAdapter(); + value = adapter.toModel(adapter.fromModel(value)); + break; + case ePropType.Time: + adapter = new TimeAdapter(); + value = adapter.toModel(adapter.fromModel(value)); + break; + case ePropType.DateTime: + adapter = new DateTimeAdapter(); + value = adapter.toModel(adapter.fromModel(value) as any); + break; + default: + break; + } + } + + const formControl = new FormControl(value, { + asyncValidators: prop.asyncValidators(data), + validators: prop.validators(data), + }); + + (isExtraProperty ? extraForm : form).addControl(name, formControl); + }); + + return form; +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/localization.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/localization.util.ts new file mode 100644 index 0000000000..72fed93dea --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/localization.util.ts @@ -0,0 +1,27 @@ +import { ApplicationConfiguration, createLocalizationPipeKeyGenerator } from '@abp/ng.core'; +import { ObjectExtensions } from '../models/object-extensions'; + +export function createDisplayNameLocalizationPipeKeyGenerator( + localization: ApplicationConfiguration.Localization, +) { + const generateLocalizationPipeKey = createLocalizationPipeKeyGenerator(localization); + + return (displayName: ObjectExtensions.DisplayName, fallback: ObjectExtensions.DisplayName) => { + if (displayName && displayName.name) + return generateLocalizationPipeKey( + [displayName.resource], + [displayName.name], + displayName.name, + ); + + const key = generateLocalizationPipeKey( + [fallback.resource], + ['DisplayName:' + fallback.name], + undefined, + ); + + if (key) return key; + + return generateLocalizationPipeKey([fallback.resource], [fallback.name], fallback.name); + }; +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/props.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/props.util.ts new file mode 100644 index 0000000000..b750131065 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/props.util.ts @@ -0,0 +1,62 @@ +import { of } from 'rxjs'; +import { EXTRA_PROPERTIES_KEY } from '../constants/extra-properties'; +import { + EntityPropContributorCallbacks, + EntityPropDefaults, + EntityProps, + EntityPropsFactory, +} from '../models/entity-props'; +import { + CreateFormPropContributorCallbacks, + CreateFormPropDefaults, + CreateFormPropsFactory, + EditFormPropContributorCallbacks, + EditFormPropDefaults, + EditFormPropsFactory, + FormProps, +} from '../models/form-props'; +import { PropContributorCallback, PropData, PropList, PropsFactory } from '../models/props'; + +export function createExtraPropertyValueResolver(name: string) { + return (data?: PropData) => of(data.record[EXTRA_PROPERTIES_KEY][name]); +} + +export function mergeWithDefaultProps>( + extension: F, + defaultProps: InferredPropDefaults, + ...contributors: InferredPropContributorCallbacks[] +) { + Object.keys(defaultProps).forEach((name: string) => { + const props: InferredProps = extension.get(name); + props.clearContributors(); + props.addContributor((propList: PropList) => propList.addManyTail(defaultProps[name])); + contributors.forEach(contributor => + (contributor[name] || []).forEach((callback: PropContributorCallback) => + props.addContributor(callback), + ), + ); + }); +} +type InferredPropDefaults = F extends EntityPropsFactory + ? EntityPropDefaults + : F extends CreateFormPropsFactory + ? CreateFormPropDefaults + : F extends EditFormPropsFactory + ? EditFormPropDefaults + : never; + +type InferredPropContributorCallbacks = F extends EntityPropsFactory + ? EntityPropContributorCallbacks + : F extends CreateFormPropsFactory + ? CreateFormPropContributorCallbacks + : F extends EditFormPropsFactory + ? EditFormPropContributorCallbacks + : never; + +type InferredProps = F extends EntityPropsFactory + ? EntityProps + : F extends CreateFormPropsFactory + ? FormProps + : F extends EditFormPropsFactory + ? FormProps + : never; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts new file mode 100644 index 0000000000..9ae9784e26 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts @@ -0,0 +1,174 @@ +import { ABP, ApplicationConfiguration } from '@abp/ng.core'; +import { createSelector, Store } from '@ngxs/store'; +import { Observable, pipe, zip } from 'rxjs'; +import { filter, map, switchMap, take } from 'rxjs/operators'; +import { ePropType } from '../enums/props.enum'; +import { EntityProp, EntityPropList } from '../models/entity-props'; +import { FormProp, FormPropList } from '../models/form-props'; +import { ObjectExtensions } from '../models/object-extensions'; +import { PropCallback } from '../models/props'; +import { createEnum, createEnumOptions, createEnumValueResolver } from './enum.util'; +import { createDisplayNameLocalizationPipeKeyGenerator } from './localization.util'; +import { createExtraPropertyValueResolver } from './props.util'; +import { getValidatorsFromProperty } from './validation.util'; + +const selectConfig = (state: any) => state.ConfigState; + +const selectObjectExtensions = createSelector( + [selectConfig], + (config: ObjectExtensions.Config) => config.objectExtensions, +); + +const selectLocalization = createSelector( + [selectConfig], + (config: ApplicationConfiguration.Response) => config.localization, +); + +const selectEnums = createSelector( + [selectObjectExtensions, selectLocalization], + (extensions: ObjectExtensions.Item) => + Object.keys(extensions.enums).reduce((acc, key) => { + const { fields, localizationResource } = extensions.enums[key]; + acc[key] = { + fields, + localizationResource, + transformed: createEnum(fields), + }; + return acc; + }, {} as ObjectExtensions.Enums), +); + +const createObjectExtensionEntitiesSelector = (moduleKey: ModuleKey) => + createSelector([selectObjectExtensions], (extensions: ObjectExtensions.Item) => { + if (!extensions) return null; + + return (extensions.modules[moduleKey] || ({} as ObjectExtensions.Module)).entities; + }); + +export function getObjectExtensionEntitiesFromStore(store: Store, moduleKey: ModuleKey) { + return store.select(createObjectExtensionEntitiesSelector(moduleKey)).pipe( + map(entities => (isUndefined(entities) ? {} : entities)), + filter(Boolean), + take(1), + ); +} + +export function mapEntitiesToContributors(store: Store, resource: string) { + return pipe( + switchMap(entities => + zip(store.select(selectLocalization), store.select(selectEnums)).pipe( + map(([localization, enums]) => { + const generateDisplayName = createDisplayNameLocalizationPipeKeyGenerator(localization); + + return Object.keys(entities).reduce( + (acc, key: keyof ObjectExtensions.Entities) => { + acc.prop[key] = []; + acc.createForm[key] = []; + acc.editForm[key] = []; + + const entity: ObjectExtensions.Entity = entities[key]; + if (!entity) return acc; + + const properties = entity.properties; + if (!properties) return acc; + + const mapPropertiesToContributors = createPropertiesToContributorsMapper( + generateDisplayName, + resource, + enums, + ); + + return mapPropertiesToContributors(properties, acc, key); + }, + { + prop: {}, + createForm: {}, + editForm: {}, + } as ObjectExtensions.PropContributors, + ); + }), + ), + ), + take(1), + ); +} + +function createPropertiesToContributorsMapper( + generateDisplayName: DisplayNameGeneratorFn, + resource: string, + enums: Record, +) { + return ( + properties: Record, + contributors: ObjectExtensions.PropContributors, + key: string, + ) => { + const isExtra = true; + + Object.keys(properties).forEach((name: string) => { + const property = properties[name]; + const type = getTypeFromProperty(property); + const displayName = generateDisplayName(property.displayName, { name, resource }); + + if (property.ui.onTable.isVisible) { + const sortable = Boolean(property.ui.onTable.isSortable); + const columnWidth = type === ePropType.Boolean ? 150 : 250; + const valueResolver = + type === ePropType.Enum + ? createEnumValueResolver(property.type, enums[property.type], name) + : createExtraPropertyValueResolver(name); + + const entityProp = new EntityProp({ + type, + name, + displayName, + sortable, + columnWidth, + valueResolver, + isExtra, + }); + + const contributor = (propList: EntityPropList) => propList.addTail(entityProp); + contributors.prop[key].push(contributor); + } + + const isOnCreateForm = property.ui.onCreateForm.isVisible; + const isOnEditForm = property.ui.onEditForm.isVisible; + + if (isOnCreateForm || isOnEditForm) { + const defaultValue = property.defaultValue; + const validators = () => getValidatorsFromProperty(property); + let options: PropCallback[]>>; + if (type === ePropType.Enum) options = createEnumOptions(name, enums[property.type]); + + const formProp = new FormProp({ + type, + name, + displayName, + options, + defaultValue, + validators, + isExtra, + }); + + const formContributor = (propList: FormPropList) => propList.addTail(formProp); + + if (isOnCreateForm) contributors.createForm[key].push(formContributor); + if (isOnEditForm) contributors.editForm[key].push(formContributor); + } + }); + + return contributors; + }; +} + +function getTypeFromProperty(property: ObjectExtensions.Property): ePropType { + return (property.typeSimple.replace(/\?$/, '') as string) as ePropType; +} + +function isUndefined(obj: any): obj is undefined { + return typeof obj === 'undefined'; +} + +type DisplayNameGeneratorFn = ReturnType; +type ModuleKey = keyof ObjectExtensions.Modules; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/validation.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/validation.util.ts new file mode 100644 index 0000000000..26d546fbd3 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/validation.util.ts @@ -0,0 +1,14 @@ +import { AbpValidators } from '@abp/ng.core'; +import { ValidatorFn } from '@angular/forms'; +import { ObjectExtensions } from '../models/object-extensions'; + +export function getValidatorsFromProperty(property: ObjectExtensions.Property): ValidatorFn[] { + const validators: ValidatorFn[] = []; + + property.attributes.forEach(attr => { + if (attr.typeSimple in AbpValidators) + validators.push(AbpValidators[attr.typeSimple](attr.config)); + }); + + return validators; +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts b/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts new file mode 100644 index 0000000000..a3afbe7efd --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts @@ -0,0 +1,70 @@ +export * from './lib/adapters/date-time.adapter'; +export * from './lib/adapters/date.adapter'; +export * from './lib/adapters/time.adapter'; +export * from './lib/components/date-time-picker/date-time-picker.component'; +export * from './lib/components/extensible-form/extensible-form-prop.component'; +export * from './lib/components/extensible-form/extensible-form.component'; +export * from './lib/components/extensible-table/extensible-table.component'; +export * from './lib/components/grid-actions/grid-actions.component'; +export * from './lib/components/page-toolbar/page-toolbar.component'; +export * from './lib/constants/extra-properties'; +export * from './lib/directives/disabled.directive'; +export * from './lib/directives/prop-data.directive'; +export * from './lib/enums/props.enum'; +export { + ActionCallback, + ActionList, + ActionPredicate, + ReadonlyActionData as ActionData, +} from './lib/models/actions'; +export { + EntityAction, + EntityActionContributorCallback, + EntityActionList, + EntityActionOptions, + EntityActions, + EntityActionsFactory, +} from './lib/models/entity-actions'; +export { + EntityProp, + EntityPropContributorCallback, + EntityPropList, + EntityPropOptions, + EntityProps, + EntityPropsFactory, +} from './lib/models/entity-props'; +export { + CreateFormPropContributorCallback, + CreateFormPropsFactory, + EditFormPropContributorCallback, + EditFormPropsFactory, + FormProp, + FormPropData, + FormPropList, + FormPropOptions, + FormProps, +} from './lib/models/form-props'; +export * from './lib/models/object-extensions'; +export { + PropCallback, + PropList, + PropPredicate, + ReadonlyPropData as PropData, +} from './lib/models/props'; +export { + ToolbarAction, + ToolbarActionContributorCallback, + ToolbarActionList, + ToolbarActionOptions, + ToolbarActions, + ToolbarActionsFactory, + ToolbarComponent, + ToolbarComponentOptions, +} from './lib/models/toolbar-actions'; +export * from './lib/services/extensions.service'; +export * from './lib/tokens/extensions.token'; +export * from './lib/ui-extensions.module'; +export * from './lib/utils/actions.util'; +export * from './lib/utils/form-props.util'; +export * from './lib/utils/props.util'; +export * from './lib/utils/state.util'; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/actions.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/actions.spec.ts new file mode 100644 index 0000000000..ea8d111bec --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/actions.spec.ts @@ -0,0 +1,22 @@ +import { ActionData } from '../lib/models/actions'; + +describe('ActionData', () => { + describe('#data', () => { + it('should return record and getInjected', () => { + const spy = jest.fn(); + class Data extends ActionData { + index = 0; + record = 'X'; + getInjected = spy; + } + + const data = new Data(); + data.data.getInjected(null); + + expect(spy).toHaveBeenCalledTimes(1); + expect(spy).toHaveBeenCalledWith(null); + expect(data.data.index).toBe(0); + expect(data.data.record).toBe('X'); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/actions.util.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/actions.util.spec.ts new file mode 100644 index 0000000000..fd3b27c564 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/actions.util.spec.ts @@ -0,0 +1,53 @@ +import { + EntityAction, + EntityActionContributorCallbacks, + EntityActionDefaults, + EntityActionsFactory, +} from '../lib/models/entity-actions'; +import { mergeWithDefaultActions } from '../lib/utils/actions.util'; + +describe('Entity Action Utils', () => { + describe('#mergeEntityActions', () => { + let entityActions: EntityActionsFactory; + + beforeEach(() => { + entityActions = new EntityActionsFactory(); + }); + + it('should merge default actions with action contributors', () => { + const defaults: EntityActionDefaults = { + x: [(1 as any) as EntityAction, (2 as any) as EntityAction, (3 as any) as EntityAction], + y: [(1 as any) as EntityAction, (2 as any) as EntityAction, (3 as any) as EntityAction], + }; + + const contributors1: EntityActionContributorCallbacks = { + x: [ + actionList => { + const x2 = actionList.dropByIndex(1); // 1 <-> 3 + actionList.addHead(x2.value); // 2 <-> 1 <-> 3 + }, + actionList => { + actionList.dropTail(); // 2 <-> 1 + }, + ], + }; + + const contributors2: EntityActionContributorCallbacks = { + y: [ + actionList => { + const y2 = actionList.dropByIndex(1); // 1 <-> 3 + actionList.addTail(y2.value); // 1 <-> 3 <-> 2 + }, + actionList => { + actionList.dropHead(); // 3 <-> 2 + }, + ], + }; + + mergeWithDefaultActions(entityActions, defaults, contributors1, contributors2); + + expect(entityActions.get('x').actions.toString()).toBe('2 <-> 1'); + expect(entityActions.get('y').actions.toString()).toBe('3 <-> 2'); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/date-time.adapter.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/date-time.adapter.spec.ts new file mode 100644 index 0000000000..621246b5e0 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/date-time.adapter.spec.ts @@ -0,0 +1,35 @@ +import { DateTimeAdapter } from '../lib/adapters/date-time.adapter'; + +describe('DateTime Adapter', () => { + const adapter = new DateTimeAdapter(); + const date = new Date(2002, 2, 30, 13, 30, 45, 0); + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + const hour = date.getHours(); + const minute = date.getMinutes(); + const second = date.getSeconds(); + + describe('#fromModel', () => { + test.each` + param | expected + ${undefined} | ${null} + ${null} | ${null} + ${'x'} | ${null} + ${date} | ${{ year, month, day, hour, minute, second }} + `('should return $expected when $param is given', ({ param, expected }) => { + expect(adapter.fromModel(param)).toEqual(expected); + }); + }); + + describe('#toModel', () => { + test.each` + param | expected + ${undefined} | ${''} + ${null} | ${''} + ${{ year, month, day, hour, minute, second }} | ${date.toISOString()} + `('should return $expected when $param is given', ({ param, expected }) => { + expect(adapter.toModel(param)).toEqual(expected); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/date.adapter.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/date.adapter.spec.ts new file mode 100644 index 0000000000..e1101f6a29 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/date.adapter.spec.ts @@ -0,0 +1,31 @@ +import { DateAdapter } from '../lib/adapters/date.adapter'; + +describe('Date Adapter', () => { + const adapter = new DateAdapter(); + + describe('#fromModel', () => { + test.each` + param | expected + ${undefined} | ${null} + ${null} | ${null} + ${'x'} | ${null} + ${'2002-03-30'} | ${{ day: 30, month: 3, year: 2002 }} + ${'03/30/2002'} | ${{ day: 30, month: 3, year: 2002 }} + ${new Date(0)} | ${{ day: 1, month: 1, year: 1970 }} + `('should return $expected when $param is given', ({ param, expected }) => { + expect(adapter.fromModel(param)).toEqual(expected); + }); + }); + + describe('#toModel', () => { + test.each` + param | expected + ${undefined} | ${''} + ${null} | ${''} + ${{ day: 30, month: 3, year: 2002 }} | ${'2002-03-30'} + ${{ day: 1, month: 1, year: 1970 }} | ${'1970-01-01'} + `('should return $expected when $param is given', ({ param, expected }) => { + expect(adapter.toModel(param)).toEqual(expected); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/entity-actions.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/entity-actions.spec.ts new file mode 100644 index 0000000000..35833a1950 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/entity-actions.spec.ts @@ -0,0 +1,151 @@ +import { LinkedList } from '@abp/utils'; +import { + EntityAction, + EntityActionContributorCallback, + EntityActionList, + EntityActions, + EntityActionsFactory, +} from '../lib/models/entity-actions'; + +describe('EntityActionList', () => { + it('should inherit from LinkedList', () => { + expect(new EntityActionList() instanceof LinkedList).toBe(true); + }); +}); + +describe('EntityActions', () => { + const add1toTail: EntityActionContributorCallback = actionList => actionList.addTail(1 as any); + const add2toTail: EntityActionContributorCallback = actionList => actionList.addTail(2 as any); + const add3toTail: EntityActionContributorCallback = actionList => actionList.addTail(3 as any); + const dropIndex1: EntityActionContributorCallback = actionList => actionList.dropByIndex(1); + + describe('#actions', () => { + test.each` + callbackList | expected + ${[]} | ${''} + ${[add1toTail, add2toTail, add3toTail]} | ${'1 <-> 2 <-> 3'} + ${[add3toTail, add2toTail, add1toTail]} | ${'3 <-> 2 <-> 1'} + ${[add1toTail, add2toTail, add3toTail, dropIndex1]} | ${'1 <-> 3'} + `( + 'should return $expected when given callbackList is $callbackList', + ({ callbackList, expected }) => { + const creator = new EntityActions(callbackList); + expect(creator.actions.toString()).toBe(expected); + }, + ); + }); + + describe('#addContributor', () => { + const creator = new EntityActions([]); + + test.each` + callbackList | callback | expected + ${[]} | ${add1toTail} | ${'1'} + ${[add1toTail]} | ${add2toTail} | ${'1 <-> 2'} + ${[add1toTail, add2toTail]} | ${add3toTail} | ${'1 <-> 2 <-> 3'} + ${[add1toTail, add2toTail, add3toTail]} | ${dropIndex1} | ${'1 <-> 3'} + `( + 'should set actions to $expected when callbackList is $callbackList and given callback is $callback', + ({ callback, expected }) => { + creator.addContributor(callback); + expect(creator.actions.toString()).toBe(expected); + }, + ); + }); +}); + +describe('EntityActionsFactory', () => { + describe('#get', () => { + it('should create and return an EntityActions instance', () => { + const entityActions = new EntityActionsFactory(); + const creator = entityActions.get(''); + + expect(creator).toBeInstanceOf(EntityActions); + }); + + it('should store and pass contributorCallbacks to EntityActionsCreator instance it returns', () => { + const entityActions = new EntityActionsFactory(); + const creatorX1 = entityActions.get('X'); + + expect(creatorX1).toBeInstanceOf(EntityActions); + expect(creatorX1.actions.toArray()).toHaveLength(0); + + creatorX1.addContributor(actionList => actionList.addTail(1 as any)); + + const creatorX2 = entityActions.get('X'); + expect(creatorX2.actions.toArray()).toHaveLength(1); + }); + }); +}); + +describe('EntityAction', () => { + it('should be created when options object is passed as argument', () => { + const options = { + text: 'TEXT', + action: () => 'ACTION', + permission: 'PERMISSION', + visible: () => false, + icon: 'ICON', + }; + + const action = new EntityAction(options); + + expect(action.text).toBe(options.text); + expect(action.action(null)).toBe(options.action()); + expect(action.permission).toBe(options.permission); + expect(action.visible(null)).toBe(options.visible()); + expect(action.icon).toBe(options.icon); + }); + + it('should be created when only required options are passed', () => { + const options = { + text: 'TEXT', + action: () => 'ACTION', + }; + + const action = new EntityAction(options); + + expect(action.text).toBe(options.text); + expect(action.action).toBe(options.action); + expect(action.permission).toBeUndefined(); + expect(action.visible(null)).toBe(true); + expect(action.icon).toBe(''); + }); + + describe('#create', () => { + it('should return a new instance from given options', () => { + const options = { + text: 'TEXT', + action: () => 'ACTION', + }; + + const action = EntityAction.create(options); + + expect(action).toBeInstanceOf(EntityAction); + expect(action.text).toBe(options.text); + expect(action.action).toBe(options.action); + }); + }); + + describe('#createMany', () => { + it('should return multiple instances from given options array', () => { + const options1 = { + text: 'TEXT 1', + action: () => 'ACTION 1', + }; + const options2 = { + text: 'TEXT 2', + action: () => 'ACTION 2', + }; + + const [action1, action2] = EntityAction.createMany([options1, options2]); + + expect(action1).toBeInstanceOf(EntityAction); + expect(action1.text).toBe(options1.text); + expect(action1.action).toBe(options1.action); + expect(action2).toBeInstanceOf(EntityAction); + expect(action2.text).toBe(options2.text); + expect(action2.action).toBe(options2.action); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/entity-props.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/entity-props.spec.ts new file mode 100644 index 0000000000..faccbf53b2 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/entity-props.spec.ts @@ -0,0 +1,166 @@ +import { LinkedList } from '@abp/utils'; +import { NEVER } from 'rxjs'; +import { ePropType } from '../lib/enums/props.enum'; +import { + EntityProp, + EntityPropContributorCallback, + EntityPropList, + EntityProps, + EntityPropsFactory, +} from '../lib/models/entity-props'; +import { PropData } from '../lib/models/props'; + +describe('EntityPropList', () => { + it('should inherit from LinkedList', () => { + expect(new EntityPropList() instanceof LinkedList).toBe(true); + }); +}); + +describe('EntityProps', () => { + const add1toTail: EntityPropContributorCallback = propList => propList.addTail(1 as any); + const add2toTail: EntityPropContributorCallback = propList => propList.addTail(2 as any); + const add3toTail: EntityPropContributorCallback = propList => propList.addTail(3 as any); + const dropIndex1: EntityPropContributorCallback = propList => propList.dropByIndex(1); + + describe('#props', () => { + test.each` + callbackList | expected + ${[]} | ${''} + ${[add1toTail, add2toTail, add3toTail]} | ${'1 <-> 2 <-> 3'} + ${[add3toTail, add2toTail, add1toTail]} | ${'3 <-> 2 <-> 1'} + ${[add1toTail, add2toTail, add3toTail, dropIndex1]} | ${'1 <-> 3'} + `( + 'should return $expected when given callbackList is $callbackList', + ({ callbackList, expected }) => { + const creator = new EntityProps(callbackList); + expect(creator.props.toString()).toBe(expected); + }, + ); + }); + + describe('#addContributor', () => { + const creator = new EntityProps([]); + + test.each` + callbackList | callback | expected + ${[]} | ${add1toTail} | ${'1'} + ${[add1toTail]} | ${add2toTail} | ${'1 <-> 2'} + ${[add1toTail, add2toTail]} | ${add3toTail} | ${'1 <-> 2 <-> 3'} + ${[add1toTail, add2toTail, add3toTail]} | ${dropIndex1} | ${'1 <-> 3'} + `( + 'should set props to $expected when callbackList is $callbackList and given callback is $callback', + ({ callback, expected }) => { + creator.addContributor(callback); + expect(creator.props.toString()).toBe(expected); + }, + ); + }); +}); + +describe('EntityPropsFactory', () => { + describe('#get', () => { + it('should create and return an EntityProps instance', () => { + const entityProps = new EntityPropsFactory(); + const creator = entityProps.get(''); + + expect(creator).toBeInstanceOf(EntityProps); + }); + + it('should store and pass contributorCallbacks to EntityPropsCreator instance it returns', () => { + const entityProps = new EntityPropsFactory(); + const creatorX1 = entityProps.get('X'); + + expect(creatorX1).toBeInstanceOf(EntityProps); + expect(creatorX1.props.toArray()).toHaveLength(0); + + creatorX1.addContributor(propList => propList.addTail(1 as any)); + + const creatorX2 = entityProps.get('X'); + expect(creatorX2.props.toArray()).toHaveLength(1); + }); + }); +}); + +describe('EntityProp', () => { + it('should be created when options object is passed as argument', () => { + const options = { + type: ePropType.String, + name: 'NAME', + displayName: 'DISPLAY NAME', + permission: 'PERMISSION', + visible: () => false, + valueResolver: () => NEVER, + sortable: true, + columnWidth: 999, + }; + + const prop = new EntityProp(options); + + expect(prop.type).toBe(options.type); + expect(prop.name).toBe(options.name); + expect(prop.displayName).toBe(options.displayName); + expect(prop.permission).toBe(options.permission); + expect(prop.visible()).toBe(options.visible()); + expect(prop.valueResolver()).toBe(options.valueResolver()); + expect(prop.sortable).toBe(options.sortable); + expect(prop.columnWidth).toBe(options.columnWidth); + }); + + it('should be created when only required options are passed', done => { + const options = { + type: ePropType.String, + name: 'NAME', + }; + + const prop = new EntityProp(options); + + expect(prop.type).toBe(options.type); + expect(prop.name).toBe(options.name); + expect(prop.displayName).toBe(options.name); + expect(prop.permission).toBeUndefined(); + expect(prop.visible()).toBe(true); + expect(prop.sortable).toBe(false); + expect(prop.columnWidth).toBeUndefined(); + prop.valueResolver({ record: { NAME: 'X' } } as PropData).subscribe(value => { + expect(value).toBe('X'); + done(); + }); + }); + + describe('#create', () => { + it('should return a new instance from given options', () => { + const options = { + type: ePropType.String, + name: 'NAME', + }; + + const prop = EntityProp.create(options); + + expect(prop).toBeInstanceOf(EntityProp); + expect(prop.type).toBe(options.type); + expect(prop.name).toBe(options.name); + }); + }); + + describe('#createMany', () => { + it('should return multiple instances from given options array', () => { + const options1 = { + type: ePropType.String, + name: 'NAME 1', + }; + const options2 = { + type: ePropType.Boolean, + name: 'NAME 2', + }; + + const [prop1, prop2] = EntityProp.createMany([options1, options2]); + + expect(prop1).toBeInstanceOf(EntityProp); + expect(prop1.type).toBe(options1.type); + expect(prop1.name).toBe(options1.name); + expect(prop2).toBeInstanceOf(EntityProp); + expect(prop2.type).toBe(options2.type); + expect(prop2.name).toBe(options2.name); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/enum.util.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/enum.util.spec.ts new file mode 100644 index 0000000000..68f7df2fb5 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/enum.util.spec.ts @@ -0,0 +1,133 @@ +import { LocalizationService } from '@abp/ng.core'; +import { Store } from '@ngxs/store'; +import { Subject } from 'rxjs'; +import { take } from 'rxjs/operators'; +import { PropData } from '../lib/models/props'; +import { createEnum, createEnumOptions, createEnumValueResolver } from '../lib/utils/enum.util'; + +const fields = [ + { name: 'foo', value: 1 }, + { name: 'bar', value: 2 }, + { name: 'baz', value: 3 }, +]; + +class MockPropData extends PropData { + getInjected: PropData['getInjected']; + + constructor(public readonly record: R) { + super(); + } +} + +describe('Enum Utils', () => { + describe('#createEnum', () => { + const enumFromFields = createEnum(fields); + + test.each` + key | expected + ${'foo'} | ${1} + ${'bar'} | ${2} + ${'baz'} | ${3} + ${1} | ${'foo'} + ${2} | ${'bar'} + ${3} | ${'baz'} + `('should create an enum that returns $expected when $key is accessed', ({ key, expected }) => { + expect(enumFromFields[key]).toBe(expected); + }); + }); + + describe('#createEnumValueResolver', () => { + const service = new LocalizationService( + new Subject().asObservable(), + ({ + selectSnapshot: () => ({ + values: { + Default: { + 'Enum:MyEnum.foo': 'Foo', + 'MyEnum.bar': 'Bar', + baz: 'Baz', + }, + }, + defaultResourceName: 'Default', + currentCulture: null, + languages: [], + }), + } as unknown) as Store, + null, + null, + null, + ); + + test.each` + value | expected + ${1} | ${'Foo'} + ${2} | ${'Bar'} + ${3} | ${'Baz'} + `( + 'should create a resolver that returns observable $expected when enum value is $value', + async ({ value, expected }) => { + const valueResolver = createEnumValueResolver( + 'MyCompanyName.MyProjectName.MyEnum', + { + fields, + localizationResource: null, + transformed: createEnum(fields), + }, + 'EnumProp', + ); + const propData = new MockPropData({ extraProperties: { EnumProp: value } }); + propData.getInjected = () => service as any; + + const resolved = await valueResolver(propData) + .pipe(take(1)) + .toPromise(); + + expect(resolved).toBe(expected); + }, + ); + }); + + describe('#createEnumOptions', () => { + const service = new LocalizationService( + new Subject().asObservable(), + ({ + selectSnapshot: () => ({ + values: { + Default: { + 'Enum:MyEnum.foo': 'Foo', + 'MyEnum.bar': 'Bar', + baz: 'Baz', + }, + }, + defaultResourceName: 'Default', + currentCulture: null, + languages: [], + }), + } as unknown) as Store, + null, + null, + null, + ); + + it('should create a generator that returns observable options from enums', async () => { + const options = createEnumOptions('MyCompanyName.MyProjectName.MyEnum', { + fields, + localizationResource: null, + transformed: createEnum(fields), + }); + + const propData = new MockPropData({}); + propData.getInjected = () => service as any; + + const resolved = await options(propData) + .pipe(take(1)) + .toPromise(); + + expect(resolved).toEqual([ + { key: 'Foo', value: 1 }, + { key: 'Bar', value: 2 }, + { key: 'Baz', value: 3 }, + ]); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/extensions.service.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/extensions.service.spec.ts new file mode 100644 index 0000000000..73aa7efe12 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/extensions.service.spec.ts @@ -0,0 +1,50 @@ +import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest'; +import { EntityActionsFactory } from '../lib/models/entity-actions'; +import { EntityPropsFactory } from '../lib/models/entity-props'; +import { CreateFormPropsFactory, EditFormPropsFactory } from '../lib/models/form-props'; +import { ToolbarActionsFactory } from '../lib/models/toolbar-actions'; +import { ExtensionsService } from '../lib/services/extensions.service'; + +describe('ExtensionsService', () => { + let service: ExtensionsService; + let spectator: SpectatorService; + + const createService = createServiceFactory({ + service: ExtensionsService, + }); + + beforeEach(() => { + spectator = createService(); + service = spectator.service; + }); + + describe('#entityActions', () => { + it('should be an instance of EntityActionsFactory class', () => { + expect(service.entityActions).toBeInstanceOf(EntityActionsFactory); + }); + }); + + describe('#toolbarActions', () => { + it('should be an instance of ToolbarActionsFactory class', () => { + expect(service.toolbarActions).toBeInstanceOf(ToolbarActionsFactory); + }); + }); + + describe('#entityProps', () => { + it('should be an instance of EntityPropsFactory class', () => { + expect(service.entityProps).toBeInstanceOf(EntityPropsFactory); + }); + }); + + describe('#createFormProps', () => { + it('should be an instance of CreateFormPropsFactory class', () => { + expect(service.createFormProps).toBeInstanceOf(CreateFormPropsFactory); + }); + }); + + describe('#editFormProps', () => { + it('should be an instance of EditFormPropsFactory class', () => { + expect(service.editFormProps).toBeInstanceOf(EditFormPropsFactory); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/factory.util.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/factory.util.spec.ts new file mode 100644 index 0000000000..61bd744f23 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/factory.util.spec.ts @@ -0,0 +1,28 @@ +import { selfFactory } from '../lib/utils/factory.util'; + +describe('Factory Utils', () => { + describe('#selfFactory', () => { + const arr = []; + const obj = {}; + const date = new Date(); + const promise = Promise.resolve(null); + + test.each` + parameter + ${'x'} + ${''} + ${1} + ${0} + ${true} + ${false} + ${arr} + ${obj} + ${date} + ${promise} + ${null} + ${undefined} + `('should return given $parameter back', ({ parameter }) => { + expect(selfFactory(parameter)).toBe(parameter); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/form-props.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/form-props.spec.ts new file mode 100644 index 0000000000..a7ad56aca9 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/form-props.spec.ts @@ -0,0 +1,193 @@ +import { LinkedList } from '@abp/utils'; +import { NEVER } from 'rxjs'; +import { ePropType } from '../lib/enums/props.enum'; +import { + CreateFormPropContributorCallback, + CreateFormPropsFactory, + EditFormPropsFactory, + FormProp, + FormPropList, + FormProps, +} from '../lib/models/form-props'; + +describe('FormPropList', () => { + it('should inherit from LinkedList', () => { + expect(new FormPropList() instanceof LinkedList).toBe(true); + }); +}); + +describe('FormProps', () => { + const add1toTail: CreateFormPropContributorCallback = propList => propList.addTail(1 as any); + const add2toTail: CreateFormPropContributorCallback = propList => propList.addTail(2 as any); + const add3toTail: CreateFormPropContributorCallback = propList => propList.addTail(3 as any); + const dropIndex1: CreateFormPropContributorCallback = propList => propList.dropByIndex(1); + + describe('#props', () => { + test.each` + callbackList | expected + ${[]} | ${''} + ${[add1toTail, add2toTail, add3toTail]} | ${'1 <-> 2 <-> 3'} + ${[add3toTail, add2toTail, add1toTail]} | ${'3 <-> 2 <-> 1'} + ${[add1toTail, add2toTail, add3toTail, dropIndex1]} | ${'1 <-> 3'} + `( + 'should return $expected when given callbackList is $callbackList', + ({ callbackList, expected }) => { + const creator = new FormProps(callbackList); + expect(creator.props.toString()).toBe(expected); + }, + ); + }); + + describe('#addContributor', () => { + const creator = new FormProps([]); + + test.each` + callbackList | callback | expected + ${[]} | ${add1toTail} | ${'1'} + ${[add1toTail]} | ${add2toTail} | ${'1 <-> 2'} + ${[add1toTail, add2toTail]} | ${add3toTail} | ${'1 <-> 2 <-> 3'} + ${[add1toTail, add2toTail, add3toTail]} | ${dropIndex1} | ${'1 <-> 3'} + `( + 'should set props to $expected when callbackList is $callbackList and given callback is $callback', + ({ callback, expected }) => { + creator.addContributor(callback); + expect(creator.props.toString()).toBe(expected); + }, + ); + }); +}); + +describe('FormPropsFactory', () => { + describe('#get', () => { + it('should create and return an FormProps instance', () => { + const formProps = new CreateFormPropsFactory(); + const creator = formProps.get(''); + + expect(creator).toBeInstanceOf(FormProps); + }); + + it('should store and pass contributorCallbacks to FormPropsCreator instance it returns', () => { + const formProps = new EditFormPropsFactory(); + const creatorX1 = formProps.get('X'); + + expect(creatorX1).toBeInstanceOf(FormProps); + expect(creatorX1.props.toArray()).toHaveLength(0); + + creatorX1.addContributor(propList => propList.addTail(1 as any)); + + const creatorX2 = formProps.get('X'); + expect(creatorX2.props.toArray()).toHaveLength(1); + }); + }); +}); + +describe('FormProp', () => { + it('should be created when options object is passed as argument', () => { + const options = { + type: ePropType.String, + name: 'NAME', + displayName: 'DISPLAY NAME', + permission: 'PERMISSION', + visible: () => false, + asyncValidators: () => [null], + validators: () => [null], + disabled: () => true, + readonly: () => true, + autocomplete: 'AUTOCOMPLETE', + defaultValue: 'DEFAULT VALUE', + options: () => NEVER, + id: 'ID', + }; + + const prop = new FormProp(options); + + expect(prop.type).toBe(options.type); + expect(prop.name).toBe(options.name); + expect(prop.displayName).toBe(options.displayName); + expect(prop.permission).toBe(options.permission); + expect(prop.visible()).toBe(options.visible()); + expect(prop.asyncValidators()).toEqual(options.asyncValidators()); + expect(prop.validators()).toEqual(options.validators()); + expect(prop.disabled()).toBe(options.disabled()); + expect(prop.readonly()).toBe(options.readonly()); + expect(prop.autocomplete).toBe(options.autocomplete); + expect(prop.defaultValue).toBe(options.defaultValue); + expect(prop.options()).toBe(options.options()); + expect(prop.id).toBe(options.id); + }); + + it('should be created when only required options are passed', () => { + const options = { + type: ePropType.String, + name: 'NAME', + }; + + const prop = new FormProp(options); + + expect(prop.type).toBe(options.type); + expect(prop.name).toBe(options.name); + expect(prop.displayName).toBe(options.name); + expect(prop.permission).toBeUndefined(); + expect(prop.visible()).toBe(true); + expect(prop.asyncValidators()).toEqual([]); + expect(prop.validators()).toEqual([]); + expect(prop.disabled()).toBe(false); + expect(prop.readonly()).toBe(false); + expect(prop.autocomplete).toBe('off'); + expect(prop.defaultValue).toBeNull(); + expect(prop.options).toBeUndefined(); + expect(prop.id).toBe(options.name); + }); + + test.each` + defaultValue | expected + ${0} | ${0} + ${''} | ${''} + ${false} | ${false} + ${undefined} | ${null} + `( + 'should set defaultValue as $expected when $defaultValue is given', + ({ defaultValue, expected }) => { + const options = { type: null, name: null, defaultValue }; + const prop = new FormProp(options); + expect(prop.defaultValue).toBe(expected); + }, + ); + + describe('#create', () => { + it('should return a new instance from given options', () => { + const options = { + type: ePropType.String, + name: 'NAME', + }; + + const prop = FormProp.create(options); + + expect(prop).toBeInstanceOf(FormProp); + expect(prop.type).toBe(options.type); + expect(prop.name).toBe(options.name); + }); + }); + + describe('#createMany', () => { + it('should return multiple instances from given options array', () => { + const options1 = { + type: ePropType.String, + name: 'NAME 1', + }; + const options2 = { + type: ePropType.Boolean, + name: 'NAME 2', + }; + + const [prop1, prop2] = FormProp.createMany([options1, options2]); + + expect(prop1).toBeInstanceOf(FormProp); + expect(prop1.type).toBe(options1.type); + expect(prop1.name).toBe(options1.name); + expect(prop2).toBeInstanceOf(FormProp); + expect(prop2.type).toBe(options2.type); + expect(prop2.name).toBe(options2.name); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/form-props.util.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/form-props.util.spec.ts new file mode 100644 index 0000000000..af1edbb9fb --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/form-props.util.spec.ts @@ -0,0 +1,142 @@ +import { LocalizationService } from '@abp/ng.core'; +import { Injector } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest'; +import { ePropType } from '../lib/enums/props.enum'; +import { FormProp, FormPropData } from '../lib/models/form-props'; +import { ExtensionsService } from '../lib/services/extensions.service'; +import { EXTENSIONS_IDENTIFIER } from '../lib/tokens/extensions.token'; +import { generateFormFromProps } from '../lib/utils/form-props.util'; + +describe('Form Prop Utils', () => { + describe('#generateFormFromProps', () => { + let spectator: SpectatorService>; + let injector: Injector; + const identifier = 'X'; + + const createService = createServiceFactory({ + service: ExtensionsService, + providers: [ + { + provide: EXTENSIONS_IDENTIFIER, + useValue: identifier, + }, + { + provide: LocalizationService, + useValue: { currentLang: 'en' }, + }, + ], + }); + + beforeEach(() => { + spectator = createService(); + const props = FormProp.createMany([ + { + type: ePropType.String, + name: 'foo', + validators: () => [Validators.required], + defaultValue: 'bar', + }, + { + type: ePropType.Boolean, + name: 'bool', + }, + { + type: ePropType.Date, + name: 'date', + }, + { + type: ePropType.DateTime, + name: 'dateTime', + }, + { + type: ePropType.Time, + name: 'time', + }, + ]); + + spectator.service.createFormProps + .get(identifier) + .addContributor(propList => propList.addManyTail(props)); + spectator.service.editFormProps + .get(identifier) + .addContributor(propList => propList.addManyTail(props)); + + const generator = getInjected(spectator); + injector = { + get: () => generator.next().value as any, + }; + }); + + it('should return a blank FormGroup instance', () => { + const data = new FormPropData(injector, null); + + const formGroup = generateFormFromProps(data); + expect(formGroup).toBeInstanceOf(FormGroup); + expect(formGroup.value.foo).toBe('bar'); + + const formControl = formGroup.get('foo'); + expect(formControl).toBeInstanceOf(FormControl); + expect(formControl.valid).toBe(true); + }); + + it('should return a prefilled FormGroup instance', () => { + const data = new FormPropData(injector, { id: 1, foo: null }); + + const formGroup = generateFormFromProps(data); + expect(formGroup).toBeInstanceOf(FormGroup); + expect(formGroup.value.foo).toBe(null); + + const formControl = formGroup.get('foo'); + expect(formControl).toBeInstanceOf(FormControl); + expect(formControl.invalid).toBe(true); + }); + + it('should add a FormGroup named extraProperties', () => { + const data = new FormPropData(injector, null); + + const formGroup = generateFormFromProps(data); + const extraPropertiesGroup = formGroup.get('extraProperties'); + expect(extraPropertiesGroup).toBeInstanceOf(FormGroup); + }); + + it('should add extraProperties to extraProperties FormGroup', () => { + const data = new FormPropData(injector, { + id: 1, + foo: undefined, + extraProperties: { + bool: true, + date: '03/30/2002', + dateTime: '2002-03-30 13:30:59Z', + time: '13:30:59', + }, + }); + + const formGroup = generateFormFromProps(data); + const extraPropertiesGroup = formGroup.get('extraProperties'); + expect(extraPropertiesGroup.value).toEqual({ + bool: true, + date: '2002-03-30', + dateTime: '2002-03-30T13:30:59.000Z', + time: '13:30', + }); + }); + }); +}); + +function* getInjected(spectator: SpectatorService) { + yield spectator.service; + yield spectator.get(EXTENSIONS_IDENTIFIER); + yield spectator.get(LocalizationService); +} + +interface Foo { + id: number; + foo: string; + extraProperties?: { + bool: boolean; + date: string; + dateTime: string; + time: string; + }; +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/localization.util.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/localization.util.spec.ts new file mode 100644 index 0000000000..f0abe48f76 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/localization.util.spec.ts @@ -0,0 +1,31 @@ +import { createDisplayNameLocalizationPipeKeyGenerator } from '../lib/utils/localization.util'; + +describe('Localization Utils', () => { + describe('#createDisplayNameLocalizationPipeKeyGenerator', () => { + const generateDisplayName = createDisplayNameLocalizationPipeKeyGenerator({ + values: { + Foo: { Bar: 'Bar', 'DisplayName:Bar': 'Bar' }, + Default: { Bar: 'Bar', 'DisplayName:Bar': 'Bar' }, + }, + defaultResourceName: 'Default', + currentCulture: null, + languages: [], + }); + + test.each` + displayName | fallback | expected + ${{ name: 'Bar', resource: 'Foo' }} | ${null} | ${'Foo::Bar'} + ${{ name: 'Baz', resource: 'Foo' }} | ${null} | ${'Baz'} + ${null} | ${{ name: 'Bar', resource: 'Foo' }} | ${'Foo::DisplayName:Bar'} + ${null} | ${{ name: 'Bar', resource: 'Default' }} | ${'Default::DisplayName:Bar'} + ${null} | ${{ name: 'Baz', resource: 'Default' }} | ${'Baz'} + `( + 'should return $expected when diplay name is $displayName and fallback is $fallback', + ({ displayName, fallback, expected }) => { + const result = generateDisplayName(displayName, fallback); + + expect(result).toBe(expected); + }, + ); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/props.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/props.spec.ts new file mode 100644 index 0000000000..adaaea677d --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/props.spec.ts @@ -0,0 +1,22 @@ +import { PropData } from '../lib/models/props'; + +describe('PropData', () => { + describe('#data', () => { + it('should return record and getInjected', () => { + const spy = jest.fn(); + class Data extends PropData { + index = 0; + record = 'X'; + getInjected = spy; + } + + const data = new Data(); + data.data.getInjected(null); + + expect(spy).toHaveBeenCalledTimes(1); + expect(spy).toHaveBeenCalledWith(null); + expect(data.data.index).toBe(0); + expect(data.data.record).toBe('X'); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/props.util.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/props.util.spec.ts new file mode 100644 index 0000000000..0c18d71eb5 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/props.util.spec.ts @@ -0,0 +1,72 @@ +import { + EntityProp, + EntityPropContributorCallbacks, + EntityPropDefaults, + EntityPropsFactory, +} from '../lib/models/entity-props'; +import { PropData } from '../lib/models/props'; +import { createExtraPropertyValueResolver, mergeWithDefaultProps } from '../lib/utils/props.util'; + +class MockPropData extends PropData { + getInjected: PropData['getInjected']; + + constructor(public readonly record: R) { + super(); + } +} + +describe('Entity Prop Utils', () => { + describe('#createExtraPropertyValueResolver', () => { + it('should return a resolver that resolves an observable value from extraProperties', async () => { + const valueResolver = createExtraPropertyValueResolver('foo'); + const propData = new MockPropData({ extraProperties: { foo: 'bar' } }); + + const bar = await valueResolver(propData).toPromise(); + expect(bar).toBe('bar'); + }); + }); + + describe('#mergeEntityProps', () => { + let entityProps: EntityPropsFactory; + + beforeEach(() => { + entityProps = new EntityPropsFactory(); + }); + + it('should merge default props with prop contributors', () => { + const defaults: EntityPropDefaults = { + x: [(1 as any) as EntityProp, (2 as any) as EntityProp, (3 as any) as EntityProp], + y: [(1 as any) as EntityProp, (2 as any) as EntityProp, (3 as any) as EntityProp], + }; + + const contributors1: EntityPropContributorCallbacks = { + x: [ + propList => { + const x2 = propList.dropByIndex(1); // 1 <-> 3 + propList.addHead(x2.value); // 2 <-> 1 <-> 3 + }, + propList => { + propList.dropTail(); // 2 <-> 1 + }, + ], + }; + + const contributors2: EntityPropContributorCallbacks = { + y: [ + propList => { + const y2 = propList.dropByIndex(1); // 1 <-> 3 + propList.addTail(y2.value); // 1 <-> 3 <-> 2 + }, + propList => { + propList.dropHead(); // 3 <-> 2 + }, + ], + }; + + mergeWithDefaultProps(entityProps, defaults, contributors1, contributors2); + + expect(entityProps.get('x').props.toString()).toBe('2 <-> 1'); + expect(entityProps.get('y').props.toString()).toBe('3 <-> 2'); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/state.util.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/state.util.spec.ts new file mode 100644 index 0000000000..9592d4c9c1 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/state.util.spec.ts @@ -0,0 +1,302 @@ +import { ApplicationConfiguration, ConfigState } from '@abp/ng.core'; +import { HttpClient } from '@angular/common/http'; +import { SpectatorService } from '@ngneat/spectator'; +import { createServiceFactory } from '@ngneat/spectator/jest'; +import { NgxsModule, Store } from '@ngxs/store'; +import { of } from 'rxjs'; +import { take } from 'rxjs/operators'; +import { ePropType } from '../lib/enums/props.enum'; +import { EntityPropList } from '../lib/models/entity-props'; +import { FormPropList } from '../lib/models/form-props'; +import { ObjectExtensions } from '../lib/models/object-extensions'; +import { + getObjectExtensionEntitiesFromStore, + mapEntitiesToContributors, +} from '../lib/utils/state.util'; + +describe('State Utils', () => { + let spectator: SpectatorService; + let store: Store; + + const createService = createServiceFactory({ + service: Store, + imports: [NgxsModule.forRoot([ConfigState])], + mocks: [HttpClient], + }); + + beforeEach(() => { + spectator = createService(); + store = spectator.service; + store.reset(createMockState()); + }); + + describe('#getObjectExtensionEntitiesFromStore', () => { + it('should return observable entities of an existing module', async () => { + const entities = await getObjectExtensionEntitiesFromStore(store, 'Identity').toPromise(); + expect('Role' in entities).toBe(true); + }); + + it('should return observable empty object if module does not exist', async () => { + const entities = await getObjectExtensionEntitiesFromStore(store, 'Saas').toPromise(); + expect(entities).toEqual({}); + }); + + it('should not emit when object extensions do not exist', done => { + store.reset({ ConfigState: {} }); + const emit = jest.fn(); + + getObjectExtensionEntitiesFromStore(store, 'Identity').subscribe(emit); + + setTimeout(() => { + expect(emit).not.toHaveBeenCalled(); + done(); + }, 1000); + }); + }); + + describe('#mapEntitiesToContributors', () => { + it('should return contributors from given entities', async () => { + const contributors = await of(createMockEntities()) + .pipe(mapEntitiesToContributors(store, 'AbpIdentity'), take(1)) + .toPromise(); + + const propList = new EntityPropList(); + contributors.prop.Role.forEach(callback => callback(propList)); + + expect(propList.length).toBe(3); + expect(propList.head.value.name).toBe('Title'); + expect(propList.head.next.value.name).toBe('IsHero'); + expect(propList.head.next.next.value.name).toBe('MyEnum'); + + const createFormList = new FormPropList(); + contributors.createForm.Role.forEach(callback => callback(createFormList)); + + expect(createFormList.length).toBe(2); + expect(createFormList.head.value.name).toBe('Title'); + expect(createFormList.head.next.value.name).toBe('MyEnum'); + + const editFormList = new FormPropList(); + contributors.editForm.Role.forEach(callback => callback(editFormList)); + + expect(editFormList.length).toBe(2); + expect(editFormList.head.value.name).toBe('Title'); + expect(editFormList.head.next.value.name).toBe('IsHero'); + }); + }); +}); + +function createMockState(): MockState { + return { + ConfigState: { + objectExtensions: { + modules: { + Identity: { + entities: createMockEntities(), + configuration: null, + }, + }, + enums: { + 'MyCompanyName.MyProjectName.MyEnum': { + fields: [ + { + name: 'MyEnumValue0', + value: 0, + }, + { + name: 'MyEnumValue1', + value: 1, + }, + { + name: 'MyEnumValue2', + value: 2, + }, + ], + localizationResource: null, + }, + }, + }, + localization: { + values: { + Default: {}, + AbpIdentity: {}, + }, + defaultResourceName: 'Default', + currentCulture: null, + languages: [], + }, + }, + }; +} + +function createMockEntities(): ObjectExtensions.Entities { + return { + Role: { + properties: { + Title: { + type: 'System.String', + typeSimple: ePropType.String, + displayName: null, + api: { + onGet: { + isAvailable: true, + }, + onCreate: { + isAvailable: true, + }, + onUpdate: { + isAvailable: true, + }, + }, + ui: { + onTable: { + isSortable: true, + isVisible: true, + }, + onCreateForm: { + isVisible: true, + }, + onEditForm: { + isVisible: true, + }, + }, + attributes: [ + { + typeSimple: 'required', + config: {}, + }, + { + typeSimple: 'stringLength', + config: { + maximumLength: 20, + minimumLength: 2, + }, + }, + ], + configuration: {}, + }, + IsHero: { + type: 'System.Boolean', + typeSimple: ePropType.Boolean, + displayName: null, + api: { + onGet: { + isAvailable: true, + }, + onCreate: { + isAvailable: true, + }, + onUpdate: { + isAvailable: true, + }, + }, + ui: { + onTable: { + isSortable: false, + isVisible: true, + }, + onCreateForm: { + isVisible: false, + }, + onEditForm: { + isVisible: true, + }, + }, + attributes: [], + configuration: {}, + }, + AsOf: { + type: 'System.Date', + typeSimple: ePropType.Date, + displayName: { + name: 'Active as of', + resource: 'AbpIdentity', + }, + api: { + onGet: { + isAvailable: true, + }, + onCreate: { + isAvailable: true, + }, + onUpdate: { + isAvailable: true, + }, + }, + ui: { + onTable: { + isSortable: false, + isVisible: false, + }, + onCreateForm: { + isVisible: false, + }, + onEditForm: { + isVisible: false, + }, + }, + attributes: [], + configuration: {}, + }, + MyEnum: { + type: 'MyCompanyName.MyProjectName.MyEnum', + typeSimple: ePropType.Enum, + displayName: null, + api: { + onGet: { + isAvailable: true, + }, + onCreate: { + isAvailable: true, + }, + onUpdate: { + isAvailable: true, + }, + }, + ui: { + onTable: { + isSortable: false, + isVisible: true, + }, + onCreateForm: { + isVisible: true, + }, + onEditForm: { + isVisible: false, + }, + }, + attributes: [ + { + typeSimple: 'required', + config: { + allowEmptyStrings: false, + }, + }, + { + typeSimple: 'enumDataType', + config: { + enumType: 'MyCompanyName.MyProjectName.MyEnum', + dataType: 'Custom', + customDataType: 'Enumeration', + }, + }, + ], + configuration: {}, + defaultValue: 2, + }, + }, + configuration: {}, + }, + User: { + properties: null, + configuration: {}, + }, + ClaimType: null, + }; +} + +interface MockState { + ConfigState: { + localization: ApplicationConfiguration.Localization; + objectExtensions: ObjectExtensions.Item; + }; +} diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/time.adapter.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/time.adapter.spec.ts new file mode 100644 index 0000000000..40d7fab58b --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/time.adapter.spec.ts @@ -0,0 +1,36 @@ +import { TimeAdapter } from '../lib/adapters/time.adapter'; + +describe('Time Adapter', () => { + const adapter = new TimeAdapter(); + + describe('#fromModel', () => { + const date = new Date(); + const hour = date.getHours(); + const minute = date.getMinutes(); + const second = date.getSeconds(); + + test.each` + param | expected + ${undefined} | ${null} + ${null} | ${null} + ${'x'} | ${null} + ${'13:30:45'} | ${{ hour: 13, minute: 30, second: 45 }} + ${'13:30'} | ${{ hour: 13, minute: 30, second: 0 }} + ${date} | ${{ hour, minute, second }} + `('should return $expected when $param is given', ({ param, expected }) => { + expect(adapter.fromModel(param)).toEqual(expected); + }); + }); + + describe('#toModel', () => { + test.each` + param | expected + ${undefined} | ${''} + ${null} | ${''} + ${{ hour: 13, minute: 30, second: 0 }} | ${'13:30'} + ${{ hour: 13, minute: 30, second: 45 }} | ${'13:30'} + `('should return $expected when $param is given', ({ param, expected }) => { + expect(adapter.toModel(param)).toEqual(expected); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/toolbar-actions.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/toolbar-actions.spec.ts new file mode 100644 index 0000000000..a966628a56 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/toolbar-actions.spec.ts @@ -0,0 +1,216 @@ +import { LinkedList } from '@abp/utils'; +import { + ToolbarAction, + ToolbarActionContributorCallback, + ToolbarActionList, + ToolbarActions, + ToolbarActionsFactory, + ToolbarComponent, +} from '../lib/models/toolbar-actions'; + +describe('ToolbarActionList', () => { + it('should inherit from LinkedList', () => { + expect(new ToolbarActionList() instanceof LinkedList).toBe(true); + }); +}); + +describe('ToolbarActions', () => { + const add1toTail: ToolbarActionContributorCallback = actionList => actionList.addTail(1 as any); + const add2toTail: ToolbarActionContributorCallback = actionList => actionList.addTail(2 as any); + const add3toTail: ToolbarActionContributorCallback = actionList => actionList.addTail(3 as any); + const dropIndex1: ToolbarActionContributorCallback = actionList => actionList.dropByIndex(1); + + describe('#actions', () => { + test.each` + callbackList | expected + ${[]} | ${''} + ${[add1toTail, add2toTail, add3toTail]} | ${'1 <-> 2 <-> 3'} + ${[add3toTail, add2toTail, add1toTail]} | ${'3 <-> 2 <-> 1'} + ${[add1toTail, add2toTail, add3toTail, dropIndex1]} | ${'1 <-> 3'} + `( + 'should return $expected when given callbackList is $callbackList', + ({ callbackList, expected }) => { + const creator = new ToolbarActions(callbackList); + expect(creator.actions.toString()).toBe(expected); + }, + ); + }); + + describe('#addContributor', () => { + const creator = new ToolbarActions([]); + + test.each` + callbackList | callback | expected + ${[]} | ${add1toTail} | ${'1'} + ${[add1toTail]} | ${add2toTail} | ${'1 <-> 2'} + ${[add1toTail, add2toTail]} | ${add3toTail} | ${'1 <-> 2 <-> 3'} + ${[add1toTail, add2toTail, add3toTail]} | ${dropIndex1} | ${'1 <-> 3'} + `( + 'should set actions to $expected when callbackList is $callbackList and given callback is $callback', + ({ callback, expected }) => { + creator.addContributor(callback); + expect(creator.actions.toString()).toBe(expected); + }, + ); + }); +}); + +describe('ToolbarActionsFactory', () => { + describe('#get', () => { + it('should create and return an ToolbarActions instance', () => { + const entityActions = new ToolbarActionsFactory(); + const creator = entityActions.get(''); + + expect(creator).toBeInstanceOf(ToolbarActions); + }); + + it('should store and pass contributorCallbacks to ToolbarActionsCreator instance it returns', () => { + const entityActions = new ToolbarActionsFactory(); + const creatorX1 = entityActions.get('X'); + + expect(creatorX1).toBeInstanceOf(ToolbarActions); + expect(creatorX1.actions.toArray()).toHaveLength(0); + + creatorX1.addContributor(actionList => actionList.addTail(1 as any)); + + const creatorX2 = entityActions.get('X'); + expect(creatorX2.actions.toArray()).toHaveLength(1); + }); + }); +}); + +describe('ToolbarAction', () => { + it('should be created when options object is passed as argument', () => { + const options = { + text: 'TEXT', + action: () => 'ACTION', + permission: 'PERMISSION', + visible: () => false, + icon: 'ICON', + }; + + const action = new ToolbarAction(options); + + expect(action.text).toBe(options.text); + expect(action.action(null)).toBe(options.action()); + expect(action.permission).toBe(options.permission); + expect(action.visible(null)).toBe(options.visible()); + expect(action.icon).toBe(options.icon); + }); + + it('should be created when only required options are passed', () => { + const options = { + text: 'TEXT', + action: () => 'ACTION', + }; + + const action = new ToolbarAction(options); + + expect(action.text).toBe(options.text); + expect(action.action).toBe(options.action); + expect(action.permission).toBeUndefined(); + expect(action.visible(null)).toBe(true); + expect(action.icon).toBe(''); + }); + + describe('#create', () => { + it('should return a new instance from given options', () => { + const options = { + text: 'TEXT', + action: () => 'ACTION', + }; + + const action = ToolbarAction.create(options); + + expect(action).toBeInstanceOf(ToolbarAction); + expect(action.text).toBe(options.text); + expect(action.action).toBe(options.action); + }); + }); + + describe('#createMany', () => { + it('should return multiple instances from given options array', () => { + const options1 = { + text: 'TEXT 1', + action: () => 'ACTION 1', + }; + const options2 = { + text: 'TEXT 2', + action: () => 'ACTION 2', + }; + + const [action1, action2] = ToolbarAction.createMany([options1, options2]); + + expect(action1).toBeInstanceOf(ToolbarAction); + expect(action1.text).toBe(options1.text); + expect(action1.action).toBe(options1.action); + expect(action2).toBeInstanceOf(ToolbarAction); + expect(action2.text).toBe(options2.text); + expect(action2.action).toBe(options2.action); + }); + }); +}); +class MockComponent1 {} +class MockComponent2 {} + +describe('ToolbarComponent', () => { + it('should be created when options object is passed as argument', () => { + const options = { + component: MockComponent1, + action: () => 'ACTION', + permission: 'PERMISSION', + visible: () => false, + }; + + const action = new ToolbarComponent(options); + + expect(action.component).toBe(options.component); + expect(action.action).toBe(options.action); + expect(action.permission).toBe(options.permission); + expect(action.visible).toBe(options.visible); + }); + + it('should be created when only required options are passed', () => { + const options = { + component: MockComponent1, + }; + + const action = new ToolbarComponent(options); + + expect(action.component).toBe(options.component); + expect(action.action()).toBeUndefined(); + expect(action.permission).toBeUndefined(); + expect(action.visible()).toBe(true); + }); + + describe('#create', () => { + it('should return a new instance from given options', () => { + const options = { + component: MockComponent1, + }; + + const action = ToolbarComponent.create(options); + + expect(action).toBeInstanceOf(ToolbarComponent); + expect(action.component).toBe(options.component); + }); + }); + + describe('#createMany', () => { + it('should return multiple instances from given options array', () => { + const options1 = { + component: MockComponent1, + }; + const options2 = { + component: MockComponent2, + }; + + const [action1, action2] = ToolbarComponent.createMany([options1, options2]); + + expect(action1).toBeInstanceOf(ToolbarComponent); + expect(action1.component).toBe(options1.component); + expect(action2).toBeInstanceOf(ToolbarComponent); + expect(action2.component).toBe(options2.component); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/tests/validation.util.spec.ts b/npm/ng-packs/packages/theme-shared/extensions/src/tests/validation.util.spec.ts new file mode 100644 index 0000000000..b26bd9e1b0 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/tests/validation.util.spec.ts @@ -0,0 +1,20 @@ +import { Validators } from '@angular/forms'; +import { ObjectExtensions } from '../lib/models/object-extensions'; +import { getValidatorsFromProperty } from '../lib/utils/validation.util'; + +describe('Validation Utils', () => { + describe('#getValidatorsFromProperty', () => { + it('should return a list of validators derived from property attributes', () => { + const property = { + attributes: [ + { + typeSimple: 'emailAddress', + config: {}, + }, + ], + } as ObjectExtensions.Property; + + expect(getValidatorsFromProperty(property)[0]).toBe(Validators.email); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/ngcc.config.js b/npm/ng-packs/packages/theme-shared/ngcc.config.js new file mode 100644 index 0000000000..a7e9362f3f --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/ngcc.config.js @@ -0,0 +1,7 @@ +module.exports = { + entryPoints: { + '.': {}, + './extensions': {}, + './dist': { ignore: true }, + }, +}; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts index 6563f55d26..23638b7fe3 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts @@ -18,6 +18,11 @@ export interface TableSortOptions { order: SortOrder; } + +/** + * + * @deprecated To be deleted in v3.3 + */ @Directive({ selector: '[abpTableSort]', providers: [SortPipe], diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/index.ts index 628ce6d80d..d1e2e71c5c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/models/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/models/index.ts @@ -2,3 +2,4 @@ export * from './common'; export * from './confirmation'; export * from './statistics'; export * from './toaster'; +export * from './nav-item'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts new file mode 100644 index 0000000000..ea3d5c45a2 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts @@ -0,0 +1,10 @@ +import { Type } from '@angular/core'; + +export interface NavItem { + id: string | number; + component?: Type; + html?: string; + action?: () => void; + order?: number; + requiredPolicy?: string; +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts b/npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts index 2c71c637fb..70219aa8ef 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts @@ -10,10 +10,10 @@ export function configureRoutes(routes: RoutesService) { return () => { routes.add([ { - path: '/', + path: undefined, name: eThemeSharedRouteNames.Administration, iconClass: 'fa fa-wrench', - order: 1, + order: 100, }, ]); }; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/index.ts index c363a56894..29a2ca9668 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/services/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/services/index.ts @@ -1,3 +1,4 @@ export * from './confirmation.service'; export * from './modal.service'; export * from './toaster.service'; +export * from './nav-items.service'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/nav-items.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/nav-items.service.ts new file mode 100644 index 0000000000..95403837fd --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/services/nav-items.service.ts @@ -0,0 +1,49 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { NavItem } from '../models/nav-item'; + +@Injectable({ providedIn: 'root' }) +export class NavItemsService { + private _items$ = new BehaviorSubject([]); + + get items(): NavItem[] { + return this._items$.value; + } + + get items$(): Observable { + return this._items$.asObservable(); + } + + addItems(items: NavItem[]) { + this._items$.next([...this.items, ...items].sort(sortItems)); + } + + removeItem(id: string | number) { + const index = this.items.findIndex(item => item.id === id); + + if (index > -1) { + this._items$.next([...this.items.slice(0, index), ...this.items.slice(index + 1)]); + } + } + + patchItem(id: string | number, item: Partial>) { + const index = this.items.findIndex(i => i.id === id); + + if (index > -1) { + this._items$.next( + [ + ...this.items.slice(0, index), + { ...this.items[index], ...item }, + ...this.items.slice(index + 1), + ].sort(sortItems), + ); + } + } +} + +function sortItems(a: NavItem, b: NavItem) { + if (!a.order) return 1; + if (!b.order) return -1; + + return a.order < b.order ? -1 : 1; +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts index f1d694dded..9f290b5ca3 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts @@ -1,4 +1,3 @@ export * from './date-parser-formatter'; -export * from './nav-items'; export * from './validation-utils'; export * from './widget-utils'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/utils/nav-items.ts b/npm/ng-packs/packages/theme-shared/src/lib/utils/nav-items.ts deleted file mode 100644 index b6b002a151..0000000000 --- a/npm/ng-packs/packages/theme-shared/src/lib/utils/nav-items.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Type } from '@angular/core'; -import { ReplaySubject } from 'rxjs'; - -export interface NavItem { - component?: Type; - html?: string; - action?: () => void; - order?: number; - permission?: string; -} - -const navItems: NavItem[] = []; -const navItems$ = new ReplaySubject(1); - -export function addNavItem(item: NavItem) { - navItems.push(item); - navItems$.next(navItems.sort((a, b) => (a.order ? a.order - b.order : 1))); -} - -export function getNavItems() { - return navItems$.asObservable(); -} diff --git a/npm/ng-packs/tsconfig.json b/npm/ng-packs/tsconfig.json index a8c1b3addb..02971ebe83 100644 --- a/npm/ng-packs/tsconfig.json +++ b/npm/ng-packs/tsconfig.json @@ -17,6 +17,7 @@ "paths": { "@abp/ng.core": ["packages/core/src/public-api.ts"], "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"], + "@abp/ng.theme.shared/extensions": ["packages/theme-shared/src/public-api.ts"], "@abp/ng.theme.basic": ["packages/theme-basic/src/public-api.ts"], "@abp/ng.account": ["packages/account/src/public-api.ts"], "@abp/ng.account/config": ["packages/account/config/src/public-api.ts"], diff --git a/nupkg/common.ps1 b/nupkg/common.ps1 index ec4c01dfd4..8815a0a157 100644 --- a/nupkg/common.ps1 +++ b/nupkg/common.ps1 @@ -59,6 +59,7 @@ $projects = ( "framework/src/Volo.Abp.BlobStoring", "framework/src/Volo.Abp.BlobStoring.FileSystem", "framework/src/Volo.Abp.Caching", + "framework/src/Volo.Abp.Caching.StackExchangeRedis", "framework/src/Volo.Abp.Castle.Core", "framework/src/Volo.Abp.Cli.Core", "framework/src/Volo.Abp.Cli", diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.Host/MyCompanyName.MyProjectName.HttpApi.Host.csproj b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.Host/MyCompanyName.MyProjectName.HttpApi.Host.csproj index 41f685bd4f..a632006046 100644 --- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.Host/MyCompanyName.MyProjectName.HttpApi.Host.csproj +++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.Host/MyCompanyName.MyProjectName.HttpApi.Host.csproj @@ -15,11 +15,11 @@ - + diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.Host/MyProjectNameHttpApiHostModule.cs b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.Host/MyProjectNameHttpApiHostModule.cs index 591b92ae44..6bab8b24f2 100644 --- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.Host/MyProjectNameHttpApiHostModule.cs +++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.Host/MyProjectNameHttpApiHostModule.cs @@ -19,6 +19,7 @@ using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared; using Volo.Abp.AspNetCore.Serilog; using Volo.Abp.Autofac; using Volo.Abp.Caching; +using Volo.Abp.Caching.StackExchangeRedis; using Volo.Abp.Localization; using Volo.Abp.Modularity; using Volo.Abp.VirtualFileSystem; @@ -28,6 +29,7 @@ namespace MyCompanyName.MyProjectName [DependsOn( typeof(MyProjectNameHttpApiModule), typeof(AbpAutofacModule), + typeof(AbpCachingStackExchangeRedisModule), typeof(AbpAspNetCoreMvcUiMultiTenancyModule), typeof(MyProjectNameApplicationModule), typeof(MyProjectNameEntityFrameworkCoreDbMigrationsModule), @@ -124,11 +126,6 @@ namespace MyCompanyName.MyProjectName IConfiguration configuration, IWebHostEnvironment hostingEnvironment) { - context.Services.AddStackExchangeRedisCache(options => - { - options.Configuration = configuration["Redis:Configuration"]; - }); - if (!hostingEnvironment.IsDevelopment()) { var redis = ConnectionMultiplexer.Connect(configuration["Redis:Configuration"]); diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.IdentityServer/MyCompanyName.MyProjectName.IdentityServer.csproj b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.IdentityServer/MyCompanyName.MyProjectName.IdentityServer.csproj index 9478cef991..dd569c7092 100644 --- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.IdentityServer/MyCompanyName.MyProjectName.IdentityServer.csproj +++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.IdentityServer/MyCompanyName.MyProjectName.IdentityServer.csproj @@ -35,16 +35,15 @@ - + - diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.IdentityServer/MyProjectNameIdentityServerModule.cs b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.IdentityServer/MyProjectNameIdentityServerModule.cs index 8d23b73d0f..caa21c9706 100644 --- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.IdentityServer/MyProjectNameIdentityServerModule.cs +++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.IdentityServer/MyProjectNameIdentityServerModule.cs @@ -23,6 +23,7 @@ using Volo.Abp.Auditing; using Volo.Abp.Autofac; using Volo.Abp.BackgroundJobs; using Volo.Abp.Caching; +using Volo.Abp.Caching.StackExchangeRedis; using Volo.Abp.Localization; using Volo.Abp.Modularity; using Volo.Abp.UI.Navigation.Urls; @@ -33,6 +34,7 @@ namespace MyCompanyName.MyProjectName { [DependsOn( typeof(AbpAutofacModule), + typeof(AbpCachingStackExchangeRedisModule), typeof(AbpAccountWebIdentityServerModule), typeof(AbpAccountApplicationModule), typeof(AbpAspNetCoreMvcUiBasicThemeModule), @@ -103,11 +105,6 @@ namespace MyCompanyName.MyProjectName options.KeyPrefix = "MyProjectName:"; }); - context.Services.AddStackExchangeRedisCache(options => - { - options.Configuration = configuration["Redis:Configuration"]; - }); - if (!hostingEnvironment.IsDevelopment()) { var redis = ConnectionMultiplexer.Connect(configuration["Redis:Configuration"]); diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Web.Host/MyCompanyName.MyProjectName.Web.Host.csproj b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Web.Host/MyCompanyName.MyProjectName.Web.Host.csproj index a39def545b..16066b7e4d 100644 --- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Web.Host/MyCompanyName.MyProjectName.Web.Host.csproj +++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Web.Host/MyCompanyName.MyProjectName.Web.Host.csproj @@ -21,12 +21,12 @@ - + diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Web.Host/MyProjectNameWebModule.cs b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Web.Host/MyProjectNameWebModule.cs index 9e1930a260..689fe33eca 100644 --- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Web.Host/MyProjectNameWebModule.cs +++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Web.Host/MyProjectNameWebModule.cs @@ -26,6 +26,7 @@ using Volo.Abp.AspNetCore.Serilog; using Volo.Abp.Autofac; using Volo.Abp.AutoMapper; using Volo.Abp.Caching; +using Volo.Abp.Caching.StackExchangeRedis; using Volo.Abp.FeatureManagement; using Volo.Abp.Http.Client.IdentityModel.Web; using Volo.Abp.Identity.Web; @@ -47,6 +48,7 @@ namespace MyCompanyName.MyProjectName.Web typeof(AbpAspNetCoreMvcClientModule), typeof(AbpAspNetCoreMvcUiBasicThemeModule), typeof(AbpAutofacModule), + typeof(AbpCachingStackExchangeRedisModule), typeof(AbpFeatureManagementWebModule), typeof(AbpHttpClientIdentityModelWebModule), typeof(AbpIdentityWebModule), @@ -74,6 +76,7 @@ namespace MyCompanyName.MyProjectName.Web var configuration = context.Services.GetConfiguration(); ConfigureCache(configuration); + ConfigureRedis(context, configuration, hostingEnvironment); ConfigureUrls(configuration); ConfigureAuthentication(context, configuration); ConfigureAutoMapper(); @@ -194,11 +197,6 @@ namespace MyCompanyName.MyProjectName.Web IConfiguration configuration, IWebHostEnvironment hostingEnvironment) { - context.Services.AddStackExchangeRedisCache(options => - { - options.Configuration = configuration["Redis:Configuration"]; - }); - if (!hostingEnvironment.IsDevelopment()) { var redis = ConnectionMultiplexer.Connect(configuration["Redis:Configuration"]); diff --git a/templates/module/angular/.editorconfig b/templates/module/angular/.editorconfig index e89330a618..59d9a3a3e7 100644 --- a/templates/module/angular/.editorconfig +++ b/templates/module/angular/.editorconfig @@ -8,6 +8,9 @@ indent_size = 2 insert_final_newline = true trim_trailing_whitespace = true +[*.ts] +quote_type = single + [*.md] max_line_length = off trim_trailing_whitespace = false diff --git a/templates/module/angular/.gitignore b/templates/module/angular/.gitignore index c3569131e4..a8e3c659a1 100644 --- a/templates/module/angular/.gitignore +++ b/templates/module/angular/.gitignore @@ -11,8 +11,8 @@ /node_modules # profiling files -chrome-profiler-events.json -speed-measure-plugin.json +chrome-profiler-events*.json +speed-measure-plugin*.json # IDEs and editors /.idea @@ -45,4 +45,4 @@ testem.log .DS_Store Thumbs.db -yarn.lock* \ No newline at end of file +yarn.lock \ No newline at end of file diff --git a/templates/module/angular/.prettierrc b/templates/module/angular/.prettierrc deleted file mode 100644 index 5e2863a11f..0000000000 --- a/templates/module/angular/.prettierrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "printWidth": 100, - "singleQuote": true, - "trailingComma": "all" -} diff --git a/templates/module/angular/README.md b/templates/module/angular/README.md index 04db0abd53..5f5ca53a7d 100644 --- a/templates/module/angular/README.md +++ b/templates/module/angular/README.md @@ -1 +1,27 @@ -# MyProjectName \ No newline at end of file +# MyProjectName + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.9. + +## Development server + +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/templates/module/angular/angular.json b/templates/module/angular/angular.json index 642e441e81..fcc60f516e 100644 --- a/templates/module/angular/angular.json +++ b/templates/module/angular/angular.json @@ -3,28 +3,68 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "myProjectName": { + "my-project-name": { + "projectType": "library", + "root": "projects/my-project-name", + "sourceRoot": "projects/my-project-name/src", + "prefix": "lib", + "architect": { + "build": { + "builder": "@angular-devkit/build-ng-packagr:build", + "options": { + "tsConfig": "projects/my-project-name/tsconfig.lib.json", + "project": "projects/my-project-name/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "projects/my-project-name/tsconfig.lib.prod.json" + } + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "projects/my-project-name/src/test.ts", + "tsConfig": "projects/my-project-name/tsconfig.spec.json", + "karmaConfig": "projects/my-project-name/karma.conf.js" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "projects/my-project-name/tsconfig.lib.json", + "projects/my-project-name/tsconfig.spec.json" + ], + "exclude": ["**/node_modules/**"] + } + } + } + }, + "dev-app": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, - "root": "", - "sourceRoot": "src", + "root": "projects/dev-app", + "sourceRoot": "projects/dev-app/src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist/myProjectName", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", + "outputPath": "dist/dev-app", + "index": "projects/dev-app/src/index.html", + "main": "projects/dev-app/src/main.ts", + "polyfills": "projects/dev-app/src/polyfills.ts", + "tsConfig": "projects/dev-app/tsconfig.app.json", "aot": true, - "extractCss": true, - "assets": ["src/favicon.ico", "src/assets"], + "assets": [ + "projects/dev-app/src/favicon.ico", + "projects/dev-app/src/assets" + ], "styles": [ { "input": "node_modules/@abp/ng.theme.shared/styles/bootstrap-rtl.min.css", @@ -61,16 +101,17 @@ "inject": true, "bundleName": "ngx-datatable-material" }, - "src/styles.scss" + "projects/dev-app/src/styles.scss" ], "scripts": [] }, "configurations": { "production": { + "tsConfig": "projects/dev-app/tsconfig.prod.json", "fileReplacements": [ { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" + "replace": "projects/dev-app/src/environments/environment.ts", + "with": "projects/dev-app/src/environments/environment.prod.ts" } ], "optimization": true, @@ -89,7 +130,8 @@ }, { "type": "anyComponentStyle", - "maximumWarning": "6kb" + "maximumWarning": "6kb", + "maximumError": "10kb" } ] } @@ -98,149 +140,63 @@ "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { - "browserTarget": "myProjectName:build" + "browserTarget": "dev-app:build" }, "configurations": { "production": { - "browserTarget": "myProjectName:build:production" + "browserTarget": "dev-app:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "myProjectName:build" + "browserTarget": "dev-app:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": ["src/favicon.ico", "src/assets"], - "styles": [ - { - "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", - "inject": true, - "bundleName": "bootstrap.min" - }, - "src/styles.scss", - { - "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css", - "inject": false, - "bundleName": "fontawesome-all.min" - }, - { - "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css", - "inject": false, - "bundleName": "fontawesome-v4-shims.min" - } + "main": "projects/dev-app/src/test.ts", + "polyfills": "projects/dev-app/src/polyfills.ts", + "tsConfig": "projects/dev-app/tsconfig.spec.json", + "karmaConfig": "projects/dev-app/karma.conf.js", + "assets": [ + "projects/dev-app/src/favicon.ico", + "projects/dev-app/src/assets" ], + "styles": ["projects/dev-app/src/styles.scss"], "scripts": [] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"], + "tsConfig": [ + "projects/dev-app/tsconfig.app.json", + "projects/dev-app/tsconfig.spec.json", + "projects/dev-app/e2e/tsconfig.json" + ], "exclude": ["**/node_modules/**"] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "myProjectName:serve" + "protractorConfig": "projects/dev-app/e2e/protractor.conf.js", + "devServerTarget": "dev-app:serve" }, "configurations": { "production": { - "devServerTarget": "myProjectName:serve:production" + "devServerTarget": "dev-app:serve:production" } } } } - }, - "my-project-name": { - "projectType": "library", - "root": "projects/my-project-name", - "sourceRoot": "projects/my-project-name/src", - "prefix": "lib", - "architect": { - "build": { - "builder": "@angular-devkit/build-ng-packagr:build", - "options": { - "tsConfig": "projects/my-project-name/tsconfig.lib.json", - "project": "projects/my-project-name/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "projects/my-project-name/tsconfig.lib.prod.json" - } - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "projects/my-project-name/src/test.ts", - "tsConfig": "projects/my-project-name/tsconfig.spec.json", - "karmaConfig": "projects/my-project-name/karma.conf.js" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "projects/my-project-name/tsconfig.lib.json", - "projects/my-project-name/tsconfig.spec.json" - ], - "exclude": ["**/node_modules/**"] - } - } - } - }, - "my-project-name-config": { - "projectType": "library", - "root": "projects/my-project-name-config", - "sourceRoot": "projects/my-project-name-config/src", - "prefix": "lib", - "architect": { - "build": { - "builder": "@angular-devkit/build-ng-packagr:build", - "options": { - "tsConfig": "projects/my-project-name-config/tsconfig.lib.json", - "project": "projects/my-project-name-config/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "projects/my-project-name-config/tsconfig.lib.prod.json" - } - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "projects/my-project-name-config/src/test.ts", - "tsConfig": "projects/my-project-name-config/tsconfig.spec.json", - "karmaConfig": "projects/my-project-name-config/karma.conf.js" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "projects/my-project-name-config/tsconfig.lib.json", - "projects/my-project-name-config/tsconfig.spec.json" - ], - "exclude": ["**/node_modules/**"] - } - } - } } }, - "defaultProject": "myProjectName", "cli": { "analytics": false - } + }, + "defaultProject": "dev-app" } diff --git a/templates/module/angular/e2e/src/app.po.ts b/templates/module/angular/e2e/src/app.po.ts deleted file mode 100644 index 5776aa9eb8..0000000000 --- a/templates/module/angular/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - navigateTo() { - return browser.get(browser.baseUrl) as Promise; - } - - getTitleText() { - return element(by.css('app-root h1')).getText() as Promise; - } -} diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json index 1d5950e772..9b9fa9bf80 100644 --- a/templates/module/angular/package.json +++ b/templates/module/angular/package.json @@ -1,57 +1,53 @@ { - "name": "MyProjectName", + "name": "my-project-name", "version": "0.0.0", "scripts": { "ng": "ng", - "start": "ng serve", - "start:hmr": "ng serve --open", - "build": "ng build", + "start": "ng serve dev-app --open", + "build": "ng build my-project-name --prod", + "build:app": "ng build dev-app --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { - "@abp/ng.account": "~2.9.0", - "@abp/ng.identity": "~2.9.0", - "@abp/ng.setting-management": "~2.9.0", - "@abp/ng.tenant-management": "~2.9.0", - "@abp/ng.theme.basic": "~2.9.0", - "@angular/animations": "~9.1.2", - "@angular/common": "~9.1.2", - "@angular/compiler": "~9.1.2", - "@angular/core": "~9.1.2", - "@angular/forms": "~9.1.2", - "@angular/platform-browser": "~9.1.2", - "@angular/platform-browser-dynamic": "~9.1.2", - "@angular/router": "~9.1.2", - "rxjs": "~6.5.5", + "@angular/animations": "~9.1.11", + "@angular/common": "~9.1.11", + "@angular/compiler": "~9.1.11", + "@angular/core": "~9.1.11", + "@angular/forms": "~9.1.11", + "@angular/platform-browser": "~9.1.11", + "@angular/platform-browser-dynamic": "~9.1.11", + "@angular/router": "~9.1.11", + "@abp/ng.account": "~3.0.0", + "@abp/ng.identity": "~3.0.0", + "@abp/ng.tenant-management": "~3.0.0", + "@abp/ng.setting-management": "~3.0.0", + "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.901.1", - "@angular-devkit/build-ng-packagr": "~0.901.1", - "@angular/cli": "~9.1.1", - "@angular/compiler-cli": "~9.1.2", - "@angular/language-service": "~9.1.2", - "@ngxs/logger-plugin": "^3.5.1", - "@types/jasmine": "~3.3.8", - "@types/jasminewd2": "~2.0.3", + "@angular-devkit/build-angular": "~0.901.9", + "@angular-devkit/build-ng-packagr": "~0.901.9", + "@angular/cli": "~9.1.9", + "@angular/compiler-cli": "~9.1.11", "@types/node": "^12.11.1", + "@types/jasmine": "~3.5.0", + "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.1.2", - "jasmine-core": "~3.4.0", + "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", - "karma": "~4.1.0", - "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "~2.0.1", - "karma-jasmine": "~2.0.1", - "karma-jasmine-html-reporter": "^1.4.0", + "karma": "~5.0.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", "ng-packagr": "^9.0.0", - "ngxs-schematic": "^1.1.9", - "protractor": "~5.4.0", - "ts-node": "~7.0.0", - "tslint": "~5.15.0", + "protractor": "~7.0.0", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", "typescript": "~3.8.3" } } diff --git a/templates/module/angular/browserslist b/templates/module/angular/projects/dev-app/browserslist similarity index 100% rename from templates/module/angular/browserslist rename to templates/module/angular/projects/dev-app/browserslist diff --git a/templates/module/angular/e2e/protractor.conf.js b/templates/module/angular/projects/dev-app/e2e/protractor.conf.js similarity index 96% rename from templates/module/angular/e2e/protractor.conf.js rename to templates/module/angular/projects/dev-app/e2e/protractor.conf.js index 73e4e6806c..7c798cfff0 100644 --- a/templates/module/angular/e2e/protractor.conf.js +++ b/templates/module/angular/projects/dev-app/e2e/protractor.conf.js @@ -13,7 +13,7 @@ exports.config = { './src/**/*.e2e-spec.ts' ], capabilities: { - 'browserName': 'chrome' + browserName: 'chrome' }, directConnect: true, baseUrl: 'http://localhost:4200/', diff --git a/templates/module/angular/e2e/src/app.e2e-spec.ts b/templates/module/angular/projects/dev-app/e2e/src/app.e2e-spec.ts similarity index 89% rename from templates/module/angular/e2e/src/app.e2e-spec.ts rename to templates/module/angular/projects/dev-app/e2e/src/app.e2e-spec.ts index ddea6e46a7..e8eda49d2a 100644 --- a/templates/module/angular/e2e/src/app.e2e-spec.ts +++ b/templates/module/angular/projects/dev-app/e2e/src/app.e2e-spec.ts @@ -10,7 +10,7 @@ describe('workspace-project App', () => { it('should display welcome message', () => { page.navigateTo(); - expect(page.getTitleText()).toEqual('Welcome to myProjectName!'); + expect(page.getTitleText()).toEqual('dev-app app is running!'); }); afterEach(async () => { diff --git a/templates/module/angular/projects/dev-app/e2e/src/app.po.ts b/templates/module/angular/projects/dev-app/e2e/src/app.po.ts new file mode 100644 index 0000000000..b68475e0fc --- /dev/null +++ b/templates/module/angular/projects/dev-app/e2e/src/app.po.ts @@ -0,0 +1,11 @@ +import { browser, by, element } from 'protractor'; + +export class AppPage { + navigateTo(): Promise { + return browser.get(browser.baseUrl) as Promise; + } + + getTitleText(): Promise { + return element(by.css('app-root .content span')).getText() as Promise; + } +} diff --git a/templates/module/angular/e2e/tsconfig.json b/templates/module/angular/projects/dev-app/e2e/tsconfig.json similarity index 65% rename from templates/module/angular/e2e/tsconfig.json rename to templates/module/angular/projects/dev-app/e2e/tsconfig.json index 39b800f789..bc240fbf87 100644 --- a/templates/module/angular/e2e/tsconfig.json +++ b/templates/module/angular/projects/dev-app/e2e/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "../tsconfig.json", + "extends": "../../../tsconfig.json", "compilerOptions": { - "outDir": "../out-tsc/e2e", + "outDir": "../../../out-tsc/e2e", "module": "commonjs", "target": "es5", "types": [ diff --git a/templates/module/angular/src/favicon.ico b/templates/module/angular/projects/dev-app/favicon.ico similarity index 100% rename from templates/module/angular/src/favicon.ico rename to templates/module/angular/projects/dev-app/favicon.ico diff --git a/templates/module/angular/karma.conf.js b/templates/module/angular/projects/dev-app/karma.conf.js similarity index 92% rename from templates/module/angular/karma.conf.js rename to templates/module/angular/projects/dev-app/karma.conf.js index 4e919a630c..6059f553f2 100644 --- a/templates/module/angular/karma.conf.js +++ b/templates/module/angular/projects/dev-app/karma.conf.js @@ -16,7 +16,7 @@ module.exports = function (config) { clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { - dir: require('path').join(__dirname, './coverage/myProjectName'), + dir: require('path').join(__dirname, '../../coverage/dev-app'), reports: ['html', 'lcovonly', 'text-summary'], fixWebpackSourcePaths: true }, diff --git a/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts b/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts new file mode 100644 index 0000000000..47b7ce8ecd --- /dev/null +++ b/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts @@ -0,0 +1,57 @@ +import { ABP, DynamicLayoutComponent } from '@abp/ng.core'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +const routes: Routes = [ + { + path: '', + component: DynamicLayoutComponent, + children: [ + { + path: '', + pathMatch: 'full', + loadChildren: () => + import('./home/home.module').then((m) => m.HomeModule), + }, + { + path: 'account', + loadChildren: () => + import('@abp/ng.account').then((m) => + m.AccountModule.forLazy({ redirectUrl: '/' }) + ), + }, + { + path: 'identity', + loadChildren: () => + import('@abp/ng.identity').then((m) => m.IdentityModule.forLazy()), + }, + { + path: 'tenant-management', + loadChildren: () => + import('@abp/ng.tenant-management').then((m) => + m.TenantManagementModule.forLazy() + ), + }, + { + path: 'setting-management', + loadChildren: () => + import('@abp/ng.setting-management').then((m) => + m.SettingManagementModule.forLazy() + ), + }, + { + path: 'my-project-name', + loadChildren: () => + import('@my-company-name/my-project-name').then((m) => + m.MyProjectNameModule.forLazy() + ), + }, + ], + }, +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule], +}) +export class AppRoutingModule {} diff --git a/templates/module/angular/src/app/app.component.ts b/templates/module/angular/projects/dev-app/src/app/app.component.ts similarity index 100% rename from templates/module/angular/src/app/app.component.ts rename to templates/module/angular/projects/dev-app/src/app/app.component.ts diff --git a/templates/module/angular/src/app/app.module.ts b/templates/module/angular/projects/dev-app/src/app/app.module.ts similarity index 56% rename from templates/module/angular/src/app/app.module.ts rename to templates/module/angular/projects/dev-app/src/app/app.module.ts index 3145dfd66a..7951177ca7 100644 --- a/templates/module/angular/src/app/app.module.ts +++ b/templates/module/angular/projects/dev-app/src/app/app.module.ts @@ -1,44 +1,41 @@ -import { AccountConfigModule } from '@abp/ng.account.config'; +import { AccountConfigModule } from '@abp/ng.account/config'; import { CoreModule } from '@abp/ng.core'; -import { IdentityConfigModule } from '@abp/ng.identity.config'; -import { SettingManagementConfigModule } from '@abp/ng.setting-management.config'; -import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config'; +import { IdentityConfigModule } from '@abp/ng.identity/config'; +import { SettingManagementConfigModule } from '@abp/ng.setting-management/config'; +import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config'; import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin'; +import { MyProjectNameConfigModule } from '@my-company-name/my-project-name/config'; import { NgxsModule } from '@ngxs/store'; -import { OAuthModule } from 'angular-oauth2-oidc'; -import { MyProjectNameConfigModule } from '../../projects/my-project-name-config/src/public-api'; import { environment } from '../environments/environment'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { APP_ROUTE_PROVIDER } from './route.provider'; import { SharedModule } from './shared/shared.module'; -const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })]; - @NgModule({ - declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule, - ThemeSharedModule.forRoot(), CoreModule.forRoot({ environment, + sendNullsAsQueryParam: false, + skipGetAppConfiguration: false, }), - OAuthModule.forRoot(), - NgxsModule.forRoot([]), - AccountConfigModule.forRoot({ redirectUrl: '/' }), - IdentityConfigModule, - TenantManagementConfigModule, - SettingManagementConfigModule, - MyProjectNameConfigModule, + ThemeSharedModule.forRoot(), + AccountConfigModule.forRoot(), + IdentityConfigModule.forRoot(), + MyProjectNameConfigModule.forRoot(), + TenantManagementConfigModule.forRoot(), + SettingManagementConfigModule.forRoot(), + NgxsModule.forRoot(), SharedModule, - - ...(environment.production ? [] : LOGGERS), ], + providers: [APP_ROUTE_PROVIDER], + declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/templates/module/angular/src/app/home/home-routing.module.ts b/templates/module/angular/projects/dev-app/src/app/home/home-routing.module.ts similarity index 77% rename from templates/module/angular/src/app/home/home-routing.module.ts rename to templates/module/angular/projects/dev-app/src/app/home/home-routing.module.ts index 367affb583..634706a36c 100644 --- a/templates/module/angular/src/app/home/home-routing.module.ts +++ b/templates/module/angular/projects/dev-app/src/app/home/home-routing.module.ts @@ -1,12 +1,10 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home.component'; -import { ApplicationLayoutComponent } from '@abp/ng.theme.basic'; const routes: Routes = [ { path: '', - component: ApplicationLayoutComponent, children: [{ path: '', component: HomeComponent }], }, ]; diff --git a/templates/module/angular/src/assets/.gitkeep b/templates/module/angular/projects/dev-app/src/app/home/home.component.html similarity index 100% rename from templates/module/angular/src/assets/.gitkeep rename to templates/module/angular/projects/dev-app/src/app/home/home.component.html diff --git a/templates/module/angular/projects/dev-app/src/app/home/home.component.ts b/templates/module/angular/projects/dev-app/src/app/home/home.component.ts new file mode 100644 index 0000000000..ab1f354e89 --- /dev/null +++ b/templates/module/angular/projects/dev-app/src/app/home/home.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', +}) +export class HomeComponent {} diff --git a/templates/module/angular/src/app/home/home.module.ts b/templates/module/angular/projects/dev-app/src/app/home/home.module.ts similarity index 100% rename from templates/module/angular/src/app/home/home.module.ts rename to templates/module/angular/projects/dev-app/src/app/home/home.module.ts diff --git a/templates/module/angular/projects/dev-app/src/app/route.provider.ts b/templates/module/angular/projects/dev-app/src/app/route.provider.ts new file mode 100644 index 0000000000..a412259466 --- /dev/null +++ b/templates/module/angular/projects/dev-app/src/app/route.provider.ts @@ -0,0 +1,25 @@ +import { RoutesService, eLayoutType } from '@abp/ng.core'; +import { APP_INITIALIZER } from '@angular/core'; + +export const APP_ROUTE_PROVIDER = [ + { + provide: APP_INITIALIZER, + useFactory: configureRoutes, + deps: [RoutesService], + multi: true, + }, +]; + +function configureRoutes(routes: RoutesService) { + return () => { + routes.add([ + { + path: '/', + name: 'Home', + iconClass: 'fas fa-home', + order: 1, + layout: eLayoutType.application, + }, + ]); + }; +} diff --git a/templates/module/angular/src/app/shared/shared.module.ts b/templates/module/angular/projects/dev-app/src/app/shared/shared.module.ts similarity index 100% rename from templates/module/angular/src/app/shared/shared.module.ts rename to templates/module/angular/projects/dev-app/src/app/shared/shared.module.ts diff --git a/templates/module/angular/projects/dev-app/src/assets/.gitkeep b/templates/module/angular/projects/dev-app/src/assets/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/templates/module/angular/src/environments/environment.prod.ts b/templates/module/angular/projects/dev-app/src/environments/environment.prod.ts similarity index 86% rename from templates/module/angular/src/environments/environment.prod.ts rename to templates/module/angular/projects/dev-app/src/environments/environment.prod.ts index 23d41cf375..9171185a9e 100644 --- a/templates/module/angular/src/environments/environment.prod.ts +++ b/templates/module/angular/projects/dev-app/src/environments/environment.prod.ts @@ -15,6 +15,9 @@ export const environment = { }, apis: { default: { + url: 'https://localhost:44301', + }, + MyProjectName: { url: 'https://localhost:44300', }, }, diff --git a/templates/module/angular/src/environments/environment.ts b/templates/module/angular/projects/dev-app/src/environments/environment.ts similarity index 86% rename from templates/module/angular/src/environments/environment.ts rename to templates/module/angular/projects/dev-app/src/environments/environment.ts index 32d3aa3d4c..452b154f4a 100644 --- a/templates/module/angular/src/environments/environment.ts +++ b/templates/module/angular/projects/dev-app/src/environments/environment.ts @@ -15,6 +15,9 @@ export const environment = { }, apis: { default: { + url: 'https://localhost:44301', + }, + MyProjectName: { url: 'https://localhost:44300', }, }, diff --git a/templates/module/angular/projects/dev-app/src/index.html b/templates/module/angular/projects/dev-app/src/index.html new file mode 100644 index 0000000000..067936da71 --- /dev/null +++ b/templates/module/angular/projects/dev-app/src/index.html @@ -0,0 +1,13 @@ + + + + + DevApp + + + + + + + + diff --git a/templates/module/angular/src/main.ts b/templates/module/angular/projects/dev-app/src/main.ts similarity index 75% rename from templates/module/angular/src/main.ts rename to templates/module/angular/projects/dev-app/src/main.ts index d9a2e7e4a5..c7b673cf44 100644 --- a/templates/module/angular/src/main.ts +++ b/templates/module/angular/projects/dev-app/src/main.ts @@ -8,6 +8,5 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/templates/module/angular/src/polyfills.ts b/templates/module/angular/projects/dev-app/src/polyfills.ts similarity index 100% rename from templates/module/angular/src/polyfills.ts rename to templates/module/angular/projects/dev-app/src/polyfills.ts diff --git a/templates/module/angular/projects/dev-app/src/styles.scss b/templates/module/angular/projects/dev-app/src/styles.scss new file mode 100644 index 0000000000..90d4ee0072 --- /dev/null +++ b/templates/module/angular/projects/dev-app/src/styles.scss @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/templates/module/angular/src/test.ts b/templates/module/angular/projects/dev-app/src/test.ts similarity index 81% rename from templates/module/angular/src/test.ts rename to templates/module/angular/projects/dev-app/src/test.ts index 16317897b1..50193eb0f2 100644 --- a/templates/module/angular/src/test.ts +++ b/templates/module/angular/projects/dev-app/src/test.ts @@ -7,7 +7,12 @@ import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -declare const require: any; +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + keys(): string[]; + (id: string): T; + }; +}; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( diff --git a/templates/module/angular/projects/dev-app/tsconfig.app.json b/templates/module/angular/projects/dev-app/tsconfig.app.json new file mode 100644 index 0000000000..809c09ca71 --- /dev/null +++ b/templates/module/angular/projects/dev-app/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts", + "src/polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/templates/module/angular/projects/dev-app/tsconfig.prod.json b/templates/module/angular/projects/dev-app/tsconfig.prod.json new file mode 100644 index 0000000000..3d4cab2c18 --- /dev/null +++ b/templates/module/angular/projects/dev-app/tsconfig.prod.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.prod.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/templates/module/angular/tsconfig.spec.json b/templates/module/angular/projects/dev-app/tsconfig.spec.json similarity index 74% rename from templates/module/angular/tsconfig.spec.json rename to templates/module/angular/projects/dev-app/tsconfig.spec.json index 6400fde7d5..a8ce1d396b 100644 --- a/templates/module/angular/tsconfig.spec.json +++ b/templates/module/angular/projects/dev-app/tsconfig.spec.json @@ -1,7 +1,7 @@ { - "extends": "./tsconfig.json", + "extends": "../../tsconfig.json", "compilerOptions": { - "outDir": "./out-tsc/spec", + "outDir": "../../out-tsc/spec", "types": [ "jasmine", "node" diff --git a/templates/module/angular/projects/my-project-name-config/tslint.json b/templates/module/angular/projects/dev-app/tslint.json similarity index 89% rename from templates/module/angular/projects/my-project-name-config/tslint.json rename to templates/module/angular/projects/dev-app/tslint.json index 124133f849..19e8161a0b 100644 --- a/templates/module/angular/projects/my-project-name-config/tslint.json +++ b/templates/module/angular/projects/dev-app/tslint.json @@ -4,13 +4,13 @@ "directive-selector": [ true, "attribute", - "lib", + "app", "camelCase" ], "component-selector": [ true, "element", - "lib", + "app", "kebab-case" ] } diff --git a/templates/module/angular/projects/my-project-name-config/README.md b/templates/module/angular/projects/my-project-name-config/README.md deleted file mode 100644 index 3fea508c67..0000000000 --- a/templates/module/angular/projects/my-project-name-config/README.md +++ /dev/null @@ -1 +0,0 @@ -# MyProjectNameConfig \ No newline at end of file diff --git a/templates/module/angular/projects/my-project-name-config/karma.conf.js b/templates/module/angular/projects/my-project-name-config/karma.conf.js deleted file mode 100644 index ea173152ce..0000000000 --- a/templates/module/angular/projects/my-project-name-config/karma.conf.js +++ /dev/null @@ -1,32 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') - ], - client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - coverageIstanbulReporter: { - dir: require('path').join(__dirname, '../../coverage/my-project-name-config'), - reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true - }); -}; diff --git a/templates/module/angular/projects/my-project-name-config/ng-package.json b/templates/module/angular/projects/my-project-name-config/ng-package.json deleted file mode 100644 index ed77c0b99d..0000000000 --- a/templates/module/angular/projects/my-project-name-config/ng-package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/my-project-name-config", - "lib": { - "entryFile": "src/public-api.ts" - } -} \ No newline at end of file diff --git a/templates/module/angular/projects/my-project-name-config/package.json b/templates/module/angular/projects/my-project-name-config/package.json deleted file mode 100644 index a3e5392096..0000000000 --- a/templates/module/angular/projects/my-project-name-config/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "my-project-name.config", - "version": "0.0.1", - "peerDependencies": { - "@abp/ng.core": "~2.9.0" - } -} diff --git a/templates/module/angular/projects/my-project-name-config/src/lib/components/my-project-name-settings.component.ts b/templates/module/angular/projects/my-project-name-config/src/lib/components/my-project-name-settings.component.ts deleted file mode 100644 index 39db5d23d5..0000000000 --- a/templates/module/angular/projects/my-project-name-config/src/lib/components/my-project-name-settings.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'my-project-name-settings', - template: ` -

    MyProjectName Settings

    - `, -}) -export class MyProjectNameSettingsComponent {} diff --git a/templates/module/angular/projects/my-project-name-config/src/lib/my-project-name-config.module.ts b/templates/module/angular/projects/my-project-name-config/src/lib/my-project-name-config.module.ts deleted file mode 100644 index 1af221be40..0000000000 --- a/templates/module/angular/projects/my-project-name-config/src/lib/my-project-name-config.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule, APP_INITIALIZER } from '@angular/core'; -import { MyProjectNameConfigService } from './services/my-project-name-config.service'; -import { noop } from '@abp/ng.core'; -import { MyProjectNameSettingsComponent } from './components/my-project-name-settings.component'; - -@NgModule({ - declarations: [MyProjectNameSettingsComponent], - providers: [{ provide: APP_INITIALIZER, deps: [MyProjectNameConfigService], multi: true, useFactory: noop }], - exports: [MyProjectNameSettingsComponent], - entryComponents: [MyProjectNameSettingsComponent], -}) -export class MyProjectNameConfigModule {} diff --git a/templates/module/angular/projects/my-project-name-config/src/lib/services/my-project-name-config.service.ts b/templates/module/angular/projects/my-project-name-config/src/lib/services/my-project-name-config.service.ts deleted file mode 100644 index 9cf1443edc..0000000000 --- a/templates/module/angular/projects/my-project-name-config/src/lib/services/my-project-name-config.service.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Injectable } from '@angular/core'; -import { eLayoutType, addAbpRoutes, ABP } from '@abp/ng.core'; -import { addSettingTab } from '@abp/ng.theme.shared'; -import { MyProjectNameSettingsComponent } from '../components/my-project-name-settings.component'; - -@Injectable({ - providedIn: 'root', -}) -export class MyProjectNameConfigService { - constructor() { - addAbpRoutes({ - name: 'MyProjectName', - path: 'my-project-name', - layout: eLayoutType.application, - order: 2, - } as ABP.FullRoute); - - const route = addSettingTab({ - component: MyProjectNameSettingsComponent, - name: 'MyProjectName Settings', - order: 1, - requiredPolicy: '', - }); - } -} diff --git a/templates/module/angular/projects/my-project-name-config/src/public-api.ts b/templates/module/angular/projects/my-project-name-config/src/public-api.ts deleted file mode 100644 index e931e6159e..0000000000 --- a/templates/module/angular/projects/my-project-name-config/src/public-api.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './lib/components/my-project-name-settings.component'; -export * from './lib/services/my-project-name-config.service'; -export * from './lib/my-project-name-config.module'; diff --git a/templates/module/angular/projects/my-project-name-config/src/test.ts b/templates/module/angular/projects/my-project-name-config/src/test.ts deleted file mode 100644 index 978c64fb83..0000000000 --- a/templates/module/angular/projects/my-project-name-config/src/test.ts +++ /dev/null @@ -1,21 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/dist/zone'; -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: any; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/templates/module/angular/projects/my-project-name-config/tsconfig.lib.json b/templates/module/angular/projects/my-project-name-config/tsconfig.lib.json deleted file mode 100644 index 0e0b9c45d1..0000000000 --- a/templates/module/angular/projects/my-project-name-config/tsconfig.lib.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "../../out-tsc/lib", - "target": "es2015", - "declaration": true, - "inlineSources": true, - "types": [], - "lib": [ - "dom", - "es2018" - ] - }, - "angularCompilerOptions": { - "skipTemplateCodegen": true, - "strictMetadataEmit": true, - "fullTemplateTypeCheck": true, - "strictInjectionParameters": true, - "enableResourceInlining": true - }, - "exclude": [ - "src/test.ts", - "**/*.spec.ts" - ] -} diff --git a/templates/module/angular/projects/my-project-name-config/tsconfig.lib.prod.json b/templates/module/angular/projects/my-project-name-config/tsconfig.lib.prod.json deleted file mode 100644 index b1d501abbc..0000000000 --- a/templates/module/angular/projects/my-project-name-config/tsconfig.lib.prod.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "./tsconfig.lib.json", - "angularCompilerOptions": { - "enableIvy": false - } -} \ No newline at end of file diff --git a/templates/module/angular/projects/my-project-name-config/tsconfig.spec.json b/templates/module/angular/projects/my-project-name-config/tsconfig.spec.json deleted file mode 100644 index 16da33db07..0000000000 --- a/templates/module/angular/projects/my-project-name-config/tsconfig.spec.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "../../out-tsc/spec", - "types": [ - "jasmine", - "node" - ] - }, - "files": [ - "src/test.ts" - ], - "include": [ - "**/*.spec.ts", - "**/*.d.ts" - ] -} diff --git a/templates/module/angular/projects/my-project-name/README.md b/templates/module/angular/projects/my-project-name/README.md index 04db0abd53..182a550944 100644 --- a/templates/module/angular/projects/my-project-name/README.md +++ b/templates/module/angular/projects/my-project-name/README.md @@ -1 +1,24 @@ -# MyProjectName \ No newline at end of file +# MyProjectName + +This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.11. + +## Code scaffolding + +Run `ng generate component component-name --project my-project-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project my-project-name`. +> Note: Don't forget to add `--project my-project-name` or else it will be added to the default project in your `angular.json` file. + +## Build + +Run `ng build my-project-name` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Publishing + +After building your library with `ng build my-project-name`, go to the dist folder `cd dist/my-project-name` and run `npm publish`. + +## Running unit tests + +Run `ng test my-project-name` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/templates/module/angular/projects/my-project-name/config/ng-package.json b/templates/module/angular/projects/my-project-name/config/ng-package.json new file mode 100644 index 0000000000..37a8a9e06c --- /dev/null +++ b/templates/module/angular/projects/my-project-name/config/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/my-project-name/config", + "lib": { + "entryFile": "src/public-api.ts" + } +} diff --git a/templates/module/angular/projects/my-project-name/config/src/enums/index.ts b/templates/module/angular/projects/my-project-name/config/src/enums/index.ts new file mode 100644 index 0000000000..3bda94b078 --- /dev/null +++ b/templates/module/angular/projects/my-project-name/config/src/enums/index.ts @@ -0,0 +1 @@ +export * from './route-names'; diff --git a/templates/module/angular/projects/my-project-name/config/src/enums/route-names.ts b/templates/module/angular/projects/my-project-name/config/src/enums/route-names.ts new file mode 100644 index 0000000000..0d11e18204 --- /dev/null +++ b/templates/module/angular/projects/my-project-name/config/src/enums/route-names.ts @@ -0,0 +1,3 @@ +export const enum eMyProjectNameRouteNames { + MyProjectName = 'MyProjectName', +} diff --git a/templates/module/angular/projects/my-project-name/config/src/my-project-name-config.module.ts b/templates/module/angular/projects/my-project-name/config/src/my-project-name-config.module.ts new file mode 100644 index 0000000000..6ce45aa112 --- /dev/null +++ b/templates/module/angular/projects/my-project-name/config/src/my-project-name-config.module.ts @@ -0,0 +1,12 @@ +import { ModuleWithProviders, NgModule } from '@angular/core'; +import { MY_PROJECT_NAME_ROUTE_PROVIDERS } from './providers/route.provider'; + +@NgModule() +export class MyProjectNameConfigModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MyProjectNameConfigModule, + providers: [MY_PROJECT_NAME_ROUTE_PROVIDERS], + }; + } +} diff --git a/templates/module/angular/projects/my-project-name/config/src/providers/index.ts b/templates/module/angular/projects/my-project-name/config/src/providers/index.ts new file mode 100644 index 0000000000..fe08efba8c --- /dev/null +++ b/templates/module/angular/projects/my-project-name/config/src/providers/index.ts @@ -0,0 +1 @@ +export * from './route.provider'; diff --git a/templates/module/angular/projects/my-project-name/config/src/providers/route.provider.ts b/templates/module/angular/projects/my-project-name/config/src/providers/route.provider.ts new file mode 100644 index 0000000000..cedb6ac16d --- /dev/null +++ b/templates/module/angular/projects/my-project-name/config/src/providers/route.provider.ts @@ -0,0 +1,28 @@ +import { eLayoutType, RoutesService } from '@abp/ng.core'; +import { eThemeSharedRouteNames } from '@abp/ng.theme.shared'; +import { APP_INITIALIZER } from '@angular/core'; +import { eMyProjectNameRouteNames } from '../enums/route-names'; + +export const MY_PROJECT_NAME_ROUTE_PROVIDERS = [ + { + provide: APP_INITIALIZER, + useFactory: configureRoutes, + deps: [RoutesService], + multi: true, + }, +]; + +export function configureRoutes(routes: RoutesService) { + return () => { + routes.add([ + { + path: '/my-project-name', + name: eMyProjectNameRouteNames.MyProjectName, + parentName: eThemeSharedRouteNames.Administration, + iconClass: 'fas fa-book', + layout: eLayoutType.application, + order: 3, + }, + ]); + }; +} diff --git a/templates/module/angular/projects/my-project-name/config/src/public-api.ts b/templates/module/angular/projects/my-project-name/config/src/public-api.ts new file mode 100644 index 0000000000..fb67d815a8 --- /dev/null +++ b/templates/module/angular/projects/my-project-name/config/src/public-api.ts @@ -0,0 +1,3 @@ +export * from './enums'; +export * from './my-project-name-config.module'; +export * from './providers'; diff --git a/templates/module/angular/projects/my-project-name/ng-package.json b/templates/module/angular/projects/my-project-name/ng-package.json index d201249406..6199c89a18 100644 --- a/templates/module/angular/projects/my-project-name/ng-package.json +++ b/templates/module/angular/projects/my-project-name/ng-package.json @@ -3,6 +3,5 @@ "dest": "../../dist/my-project-name", "lib": { "entryFile": "src/public-api.ts" - }, - "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared", "my-project-name.config"] -} + } +} \ No newline at end of file diff --git a/templates/module/angular/projects/my-project-name/ngcc.config.js b/templates/module/angular/projects/my-project-name/ngcc.config.js new file mode 100644 index 0000000000..c34df8ab72 --- /dev/null +++ b/templates/module/angular/projects/my-project-name/ngcc.config.js @@ -0,0 +1,7 @@ +module.exports = { + entryPoints: { + ".": {}, + "./config": {}, + "./dist": { ignore: true }, + }, +}; diff --git a/templates/module/angular/projects/my-project-name/package.json b/templates/module/angular/projects/my-project-name/package.json index a72b7ae84b..b31bf14cf7 100644 --- a/templates/module/angular/projects/my-project-name/package.json +++ b/templates/module/angular/projects/my-project-name/package.json @@ -1,8 +1,13 @@ { "name": "my-project-name", "version": "0.0.1", + "peerDependencies": { + "@angular/common": "^9.1.11", + "@angular/core": "^9.1.11", + "@abp/ng.core": ">=3.0.0", + "@abp/ng.theme.shared": ">=3.0.0" + }, "dependencies": { - "@abp/ng.theme.shared": "~2.9.0", - "my-project-name.config": "^0.0.1" + "tslib": "^1.10.0" } } diff --git a/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.ts b/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.ts index 3f3fa9ec0d..85ca370179 100644 --- a/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.ts +++ b/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.ts @@ -1,19 +1,15 @@ import { Component, OnInit } from '@angular/core'; +import { MyProjectNameService } from '../services/my-project-name.service'; @Component({ selector: 'lib-my-project-name', - template: ` -

    - my-project-name works! -

    - `, - styles: [] + template: `

    my-project-name works!

    `, + styles: [], }) export class MyProjectNameComponent implements OnInit { + constructor(private service: MyProjectNameService) {} - constructor() { } - - ngOnInit() { + ngOnInit(): void { + this.service.sample().subscribe(console.log); } - } diff --git a/templates/module/angular/projects/my-project-name/src/lib/my-project-name-routing.module.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name-routing.module.ts index c1018686fe..e698be1973 100644 --- a/templates/module/angular/projects/my-project-name/src/lib/my-project-name-routing.module.ts +++ b/templates/module/angular/projects/my-project-name/src/lib/my-project-name-routing.module.ts @@ -1,32 +1,13 @@ -import { - AuthGuard, - DynamicLayoutComponent, - PermissionGuard, - ReplaceableComponents, - ReplaceableRouteContainerComponent, -} from '@abp/ng.core'; import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import { DynamicLayoutComponent } from '@abp/ng.core'; +import { Routes, RouterModule } from '@angular/router'; import { MyProjectNameComponent } from './components/my-project-name.component'; const routes: Routes = [ { path: '', - component: DynamicLayoutComponent, - canActivate: [AuthGuard, PermissionGuard], - children: [ - { - path: '', - component: ReplaceableRouteContainerComponent, - data: { - requiredPolicy: '', - replaceableComponent: { - defaultComponent: MyProjectNameComponent, - key: 'MyProjectName.MyProjectNameComponent', - } as ReplaceableComponents.RouteData, - }, - }, - ], + pathMatch: 'full', + component: MyProjectNameComponent, }, ]; diff --git a/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.spec.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts similarity index 88% rename from templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.spec.ts rename to templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts index 5dfc08774c..a50ece2f61 100644 --- a/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.spec.ts +++ b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts @@ -8,8 +8,9 @@ describe('MyProjectNameComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [MyProjectNameComponent], - }).compileComponents(); + declarations: [ MyProjectNameComponent ] + }) + .compileComponents(); })); beforeEach(() => { diff --git a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.module.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.module.ts index a446b97bb5..7e92915f4e 100644 --- a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.module.ts +++ b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.module.ts @@ -1,12 +1,23 @@ -import { NgModule } from '@angular/core'; +import { NgModule, NgModuleFactory, ModuleWithProviders } from '@angular/core'; +import { CoreModule, LazyModuleFactory } from '@abp/ng.core'; +import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { MyProjectNameComponent } from './components/my-project-name.component'; import { MyProjectNameRoutingModule } from './my-project-name-routing.module'; -import { ThemeSharedModule } from '@abp/ng.theme.shared'; -import { CoreModule } from '@abp/ng.core'; @NgModule({ declarations: [MyProjectNameComponent], imports: [CoreModule, ThemeSharedModule, MyProjectNameRoutingModule], exports: [MyProjectNameComponent], }) -export class MyProjectNameModule {} +export class MyProjectNameModule { + static forChild(): ModuleWithProviders { + return { + ngModule: MyProjectNameModule, + providers: [], + }; + } + + static forLazy(): NgModuleFactory { + return new LazyModuleFactory(MyProjectNameModule.forChild()); + } +} diff --git a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts new file mode 100644 index 0000000000..7955ce073c --- /dev/null +++ b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { MyProjectNameService } from './my-project-name.service'; + +describe('MyProjectNameService', () => { + let service: MyProjectNameService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(MyProjectNameService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/templates/module/angular/projects/my-project-name/src/lib/services/my-project-name.service.ts b/templates/module/angular/projects/my-project-name/src/lib/services/my-project-name.service.ts new file mode 100644 index 0000000000..3dea468a45 --- /dev/null +++ b/templates/module/angular/projects/my-project-name/src/lib/services/my-project-name.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; +import { RestService } from '@abp/ng.core'; + +@Injectable({ + providedIn: 'root', +}) +export class MyProjectNameService { + apiName = 'MyProjectName'; + + constructor(private restService: RestService) {} + + sample() { + return this.restService.request( + { method: 'GET', url: '/api/MyProjectName/sample' }, + { apiName: this.apiName } + ); + } +} diff --git a/templates/module/angular/projects/my-project-name/src/public-api.ts b/templates/module/angular/projects/my-project-name/src/public-api.ts index 06a1e26fb3..3bb54f6a9a 100644 --- a/templates/module/angular/projects/my-project-name/src/public-api.ts +++ b/templates/module/angular/projects/my-project-name/src/public-api.ts @@ -1,2 +1,7 @@ +/* + * Public API Surface of my-project-name + */ + export * from './lib/components/my-project-name.component'; +export * from './lib/services/my-project-name.service'; export * from './lib/my-project-name.module'; diff --git a/templates/module/angular/projects/my-project-name/src/test.ts b/templates/module/angular/projects/my-project-name/src/test.ts index 978c64fb83..303b32a220 100644 --- a/templates/module/angular/projects/my-project-name/src/test.ts +++ b/templates/module/angular/projects/my-project-name/src/test.ts @@ -8,7 +8,12 @@ import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -declare const require: any; +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + keys(): string[]; + (id: string): T; + }; +}; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( diff --git a/templates/module/angular/projects/my-project-name/tsconfig.lib.json b/templates/module/angular/projects/my-project-name/tsconfig.lib.json index 0e0b9c45d1..c433a69f62 100644 --- a/templates/module/angular/projects/my-project-name/tsconfig.lib.json +++ b/templates/module/angular/projects/my-project-name/tsconfig.lib.json @@ -1,25 +1,17 @@ { - "extends": "../../tsconfig.json", + "extends": "../../tsconfig.prod.json", "compilerOptions": { "outDir": "../../out-tsc/lib", "target": "es2015", "declaration": true, "inlineSources": true, "types": [], - "lib": [ - "dom", - "es2018" - ] + "lib": ["dom", "es2018"] }, "angularCompilerOptions": { "skipTemplateCodegen": true, "strictMetadataEmit": true, - "fullTemplateTypeCheck": true, - "strictInjectionParameters": true, "enableResourceInlining": true }, - "exclude": [ - "src/test.ts", - "**/*.spec.ts" - ] + "exclude": ["src/test.ts", "**/*.spec.ts"] } diff --git a/templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json b/templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json index b1d501abbc..cbae794224 100644 --- a/templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json +++ b/templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json @@ -3,4 +3,4 @@ "angularCompilerOptions": { "enableIvy": false } -} \ No newline at end of file +} diff --git a/templates/module/angular/src/app/app-routing.module.ts b/templates/module/angular/src/app/app-routing.module.ts deleted file mode 100644 index 89c1250496..0000000000 --- a/templates/module/angular/src/app/app-routing.module.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { ABP } from '@abp/ng.core'; -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -const routes: Routes = [ - { - path: '', - loadChildren: () => import('./home/home.module').then(m => m.HomeModule), - data: { - routes: { - name: 'Home', - order: 1, - } as ABP.Route, - }, - }, - { - path: 'account', - loadChildren: () => - import('./lazy-libs/account-wrapper.module').then(m => m.AccountWrapperModule), - }, - { - path: 'identity', - loadChildren: () => - import('./lazy-libs/identity-wrapper.module').then(m => m.IdentityWrapperModule), - }, - { - path: 'tenant-management', - loadChildren: () => - import('./lazy-libs/tenant-management-wrapper.module').then( - m => m.TenantManagementWrapperModule, - ), - }, - { - path: 'setting-management', - loadChildren: () => - import('./lazy-libs/setting-management-wrapper.module').then( - m => m.SettingManagementWrapperModule, - ), - }, - { - path: 'my-project-name', - loadChildren: () => - import('./lazy-libs/my-project-name-wrapper.module').then(m => m.MyProjectNameWrapperModule), - }, -]; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/templates/module/angular/src/app/home/home.component.html b/templates/module/angular/src/app/home/home.component.html deleted file mode 100644 index 54023b80a9..0000000000 --- a/templates/module/angular/src/app/home/home.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
    -
    - - {{ '::Login' | abpLocalization }} -
    diff --git a/templates/module/angular/src/app/home/home.component.ts b/templates/module/angular/src/app/home/home.component.ts deleted file mode 100644 index a42b960493..0000000000 --- a/templates/module/angular/src/app/home/home.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; -import { OAuthService } from 'angular-oauth2-oidc'; - -@Component({ - selector: 'app-home', - templateUrl: './home.component.html', -}) -export class HomeComponent { - get hasLoggedIn(): boolean { - return this.oAuthService.hasValidAccessToken(); - } - - constructor(private oAuthService: OAuthService) {} -} diff --git a/templates/module/angular/src/app/lazy-libs/account-wrapper.module.ts b/templates/module/angular/src/app/lazy-libs/account-wrapper.module.ts deleted file mode 100644 index 7130bb1a1a..0000000000 --- a/templates/module/angular/src/app/lazy-libs/account-wrapper.module.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { NgModule } from '@angular/core'; -import { AccountModule } from '@abp/ng.account'; - -@NgModule({ - imports: [AccountModule], -}) -export class AccountWrapperModule {} diff --git a/templates/module/angular/src/app/lazy-libs/identity-wrapper.module.ts b/templates/module/angular/src/app/lazy-libs/identity-wrapper.module.ts deleted file mode 100644 index fed1dcd1ec..0000000000 --- a/templates/module/angular/src/app/lazy-libs/identity-wrapper.module.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { NgModule } from '@angular/core'; -import { IdentityModule } from '@abp/ng.identity'; - -@NgModule({ - imports: [IdentityModule], -}) -export class IdentityWrapperModule {} diff --git a/templates/module/angular/src/app/lazy-libs/my-project-name-wrapper.module.ts b/templates/module/angular/src/app/lazy-libs/my-project-name-wrapper.module.ts deleted file mode 100644 index 2f62d47b39..0000000000 --- a/templates/module/angular/src/app/lazy-libs/my-project-name-wrapper.module.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { NgModule } from '@angular/core'; -import { MyProjectNameModule } from '../../../projects/my-project-name/src/public-api'; - -@NgModule({ - imports: [MyProjectNameModule], -}) -export class MyProjectNameWrapperModule {} diff --git a/templates/module/angular/src/app/lazy-libs/setting-management-wrapper.module.ts b/templates/module/angular/src/app/lazy-libs/setting-management-wrapper.module.ts deleted file mode 100644 index e5f3db8878..0000000000 --- a/templates/module/angular/src/app/lazy-libs/setting-management-wrapper.module.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { NgModule } from '@angular/core'; -import { SettingManagementModule } from '@abp/ng.setting-management'; - -@NgModule({ - imports: [SettingManagementModule], -}) -export class SettingManagementWrapperModule {} diff --git a/templates/module/angular/src/app/lazy-libs/tenant-management-wrapper.module.ts b/templates/module/angular/src/app/lazy-libs/tenant-management-wrapper.module.ts deleted file mode 100644 index 63eabda505..0000000000 --- a/templates/module/angular/src/app/lazy-libs/tenant-management-wrapper.module.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { NgModule } from '@angular/core'; -import { TenantManagementModule } from '@abp/ng.tenant-management'; - -@NgModule({ - imports: [TenantManagementModule], -}) -export class TenantManagementWrapperModule {} diff --git a/templates/module/angular/src/index.html b/templates/module/angular/src/index.html deleted file mode 100644 index 4cad6da82f..0000000000 --- a/templates/module/angular/src/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - MyProjectName - - - - - - - -
    -     - - diff --git a/templates/module/angular/src/styles.scss b/templates/module/angular/src/styles.scss deleted file mode 100644 index d62aefa968..0000000000 --- a/templates/module/angular/src/styles.scss +++ /dev/null @@ -1,27 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ - -@keyframes donut-spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -.donut { - display: inline-block; - border: 4px solid rgba(0, 0, 0, 0.1); - border-left-color: #7983ff; - border-radius: 50%; - width: 30px; - height: 30px; - animation: donut-spin 1.2s linear infinite; - - &.centered { - position: fixed; - top: 50%; - left: 50%; - /* bring your own prefixes */ - transform: translate(-50%, -50%); - } -} diff --git a/templates/module/angular/tsconfig.app.json b/templates/module/angular/tsconfig.app.json deleted file mode 100644 index 9fa880f878..0000000000 --- a/templates/module/angular/tsconfig.app.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/app", - "types": ["node"] - }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": ["src/**/*.d.ts"] -} diff --git a/templates/module/angular/tsconfig.json b/templates/module/angular/tsconfig.json index 76dbb7747d..e8a830851f 100644 --- a/templates/module/angular/tsconfig.json +++ b/templates/module/angular/tsconfig.json @@ -1,37 +1,13 @@ { - "compileOnSave": false, + "extends": "./tsconfig.prod.json", "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "module": "esnext", - "moduleResolution": "node", - "importHelpers": true, - "target": "es2015", - "typeRoots": [ - "node_modules/@types" - ], - "lib": [ - "es2018", - "dom" - ], "paths": { - "my-project-name": [ - "dist/my-project-name" + "@my-company-name/my-project-name": [ + "projects/my-project-name/src/public-api.ts" ], - "my-project-name/*": [ - "dist/my-project-name/*" - ], - "my-project-name-config": [ - "dist/my-project-name-config" - ], - "my-project-name-config/*": [ - "dist/my-project-name-config/*" + "@my-company-name/my-project-name/config": [ + "projects/my-project-name/config/src/public-api.ts" ] } } -} \ No newline at end of file +} diff --git a/templates/module/angular/tsconfig.prod.json b/templates/module/angular/tsconfig.prod.json new file mode 100644 index 0000000000..8cbc5cd8a7 --- /dev/null +++ b/templates/module/angular/tsconfig.prod.json @@ -0,0 +1,20 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "module": "esnext", + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "lib": ["es2018", "dom"] + }, + "angularCompilerOptions": { + "fullTemplateTypeCheck": true, + "strictInjectionParameters": true + } +} diff --git a/templates/module/angular/tslint.json b/templates/module/angular/tslint.json index 188bd78d32..def88d1c87 100644 --- a/templates/module/angular/tslint.json +++ b/templates/module/angular/tslint.json @@ -1,37 +1,37 @@ { "extends": "tslint:recommended", + "rulesDirectory": [ + "codelyzer" + ], "rules": { + "align": { + "options": [ + "parameters", + "statements" + ] + }, "array-type": false, - "arrow-parens": false, + "arrow-return-shorthand": true, + "curly": true, "deprecation": { - "severity": "warn" + "severity": "warning" }, - "component-class-suffix": true, - "contextual-lifecycle": true, - "directive-class-suffix": true, - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ], + "eofline": true, "import-blacklist": [ true, "rxjs/Rx" ], - "interface-name": false, + "import-spacing": true, + "indent": { + "options": [ + "spaces" + ] + }, "max-classes-per-file": false, "max-line-length": [ true, 140 ], - "member-access": false, "member-ordering": [ true, { @@ -43,7 +43,6 @@ ] } ], - "no-consecutive-blank-lines": false, "no-console": [ true, "debug", @@ -60,19 +59,67 @@ "no-non-null-assertion": true, "no-redundant-jsdoc": true, "no-switch-case-fall-through": true, - "no-use-before-declare": true, "no-var-requires": false, "object-literal-key-quotes": [ true, "as-needed" ], - "object-literal-sort-keys": false, - "ordered-imports": false, "quotemark": [ true, "single" ], - "trailing-comma": false, + "semicolon": { + "options": [ + "always" + ] + }, + "space-before-function-paren": { + "options": { + "anonymous": "never", + "asyncArrow": "always", + "constructor": "never", + "method": "never", + "named": "never" + } + }, + "typedef-whitespace": { + "options": [ + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + }, + { + "call-signature": "onespace", + "index-signature": "onespace", + "parameter": "onespace", + "property-declaration": "onespace", + "variable-declaration": "onespace" + } + ] + }, + "variable-name": { + "options": [ + "ban-keywords", + "check-format", + "allow-pascal-case" + ] + }, + "whitespace": { + "options": [ + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type", + "check-typecast" + ] + }, + "component-class-suffix": true, + "contextual-lifecycle": true, + "directive-class-suffix": true, "no-conflicting-lifecycle": true, "no-host-metadata-property": true, "no-input-rename": true, @@ -85,8 +132,5 @@ "template-no-negated-async": true, "use-lifecycle-interface": true, "use-pipe-transform-interface": true - }, - "rulesDirectory": [ - "codelyzer" - ] -} \ No newline at end of file + } +} diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/MyCompanyName.MyProjectName.HttpApi.Host.csproj b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/MyCompanyName.MyProjectName.HttpApi.Host.csproj index fa6dbaac96..e6147da9e3 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/MyCompanyName.MyProjectName.HttpApi.Host.csproj +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/MyCompanyName.MyProjectName.HttpApi.Host.csproj @@ -14,10 +14,10 @@ - + diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/MyProjectNameHttpApiHostModule.cs b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/MyProjectNameHttpApiHostModule.cs index 14aee9bbfa..6d5bf1a7c8 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/MyProjectNameHttpApiHostModule.cs +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/MyProjectNameHttpApiHostModule.cs @@ -22,6 +22,7 @@ using Volo.Abp.AspNetCore.Serilog; using Volo.Abp.AuditLogging.EntityFrameworkCore; using Volo.Abp.Autofac; using Volo.Abp.Caching; +using Volo.Abp.Caching.StackExchangeRedis; using Volo.Abp.EntityFrameworkCore; using Volo.Abp.EntityFrameworkCore.SqlServer; using Volo.Abp.Localization; @@ -40,6 +41,7 @@ namespace MyCompanyName.MyProjectName typeof(MyProjectNameHttpApiModule), typeof(AbpAspNetCoreMvcUiMultiTenancyModule), typeof(AbpAutofacModule), + typeof(AbpCachingStackExchangeRedisModule), typeof(AbpEntityFrameworkCoreSqlServerModule), typeof(AbpAuditLoggingEntityFrameworkCoreModule), typeof(AbpPermissionManagementEntityFrameworkCoreModule), @@ -114,11 +116,6 @@ namespace MyCompanyName.MyProjectName options.KeyPrefix = "MyProjectName:"; }); - context.Services.AddStackExchangeRedisCache(options => - { - options.Configuration = configuration["Redis:Configuration"]; - }); - if (!hostingEnvironment.IsDevelopment()) { var redis = ConnectionMultiplexer.Connect(configuration["Redis:Configuration"]); diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/MyCompanyName.MyProjectName.IdentityServer.csproj b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/MyCompanyName.MyProjectName.IdentityServer.csproj index 99ba329eb8..f5979f1512 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/MyCompanyName.MyProjectName.IdentityServer.csproj +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/MyCompanyName.MyProjectName.IdentityServer.csproj @@ -12,7 +12,6 @@ - @@ -20,6 +19,7 @@ + diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/MyProjectNameIdentityServerModule.cs b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/MyProjectNameIdentityServerModule.cs index 41d31efc53..cfda73627d 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/MyProjectNameIdentityServerModule.cs +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/MyProjectNameIdentityServerModule.cs @@ -23,6 +23,7 @@ using Volo.Abp.Auditing; using Volo.Abp.AuditLogging.EntityFrameworkCore; using Volo.Abp.Autofac; using Volo.Abp.Caching; +using Volo.Abp.Caching.StackExchangeRedis; using Volo.Abp.Data; using Volo.Abp.EntityFrameworkCore; using Volo.Abp.EntityFrameworkCore.SqlServer; @@ -53,6 +54,7 @@ namespace MyCompanyName.MyProjectName typeof(AbpAspNetCoreMvcUiBasicThemeModule), typeof(AbpAuditLoggingEntityFrameworkCoreModule), typeof(AbpAutofacModule), + typeof(AbpCachingStackExchangeRedisModule), typeof(AbpEntityFrameworkCoreSqlServerModule), typeof(AbpIdentityEntityFrameworkCoreModule), typeof(AbpIdentityApplicationModule), @@ -133,11 +135,6 @@ namespace MyCompanyName.MyProjectName options.IsEnabled = MultiTenancyConsts.IsEnabled; }); - context.Services.AddStackExchangeRedisCache(options => - { - options.Configuration = configuration["Redis:Configuration"]; - }); - if (!hostingEnvironment.IsDevelopment()) { var redis = ConnectionMultiplexer.Connect(configuration["Redis:Configuration"]); diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Web.Host/MyCompanyName.MyProjectName.Web.Host.csproj b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Web.Host/MyCompanyName.MyProjectName.Web.Host.csproj index b2e1fd4783..87e5d62c11 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Web.Host/MyCompanyName.MyProjectName.Web.Host.csproj +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Web.Host/MyCompanyName.MyProjectName.Web.Host.csproj @@ -14,10 +14,10 @@ - + diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Web.Host/MyProjectNameWebHostModule.cs b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Web.Host/MyProjectNameWebHostModule.cs index 7381787bc3..f2da06d4c2 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Web.Host/MyProjectNameWebHostModule.cs +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Web.Host/MyProjectNameWebHostModule.cs @@ -25,6 +25,7 @@ using Volo.Abp.AspNetCore.Serilog; using Volo.Abp.Autofac; using Volo.Abp.AutoMapper; using Volo.Abp.Caching; +using Volo.Abp.Caching.StackExchangeRedis; using Volo.Abp.FeatureManagement; using Volo.Abp.Http.Client.IdentityModel.Web; using Volo.Abp.Identity; @@ -50,6 +51,7 @@ namespace MyCompanyName.MyProjectName typeof(AbpAspNetCoreMvcClientModule), typeof(AbpAspNetCoreMvcUiBasicThemeModule), typeof(AbpAutofacModule), + typeof(AbpCachingStackExchangeRedisModule), typeof(AbpHttpClientIdentityModelWebModule), typeof(AbpIdentityWebModule), typeof(AbpIdentityHttpApiClientModule), @@ -202,11 +204,6 @@ namespace MyCompanyName.MyProjectName IConfiguration configuration, IWebHostEnvironment hostingEnvironment) { - context.Services.AddStackExchangeRedisCache(options => - { - options.Configuration = configuration["Redis:Configuration"]; - }); - if (!hostingEnvironment.IsDevelopment()) { var redis = ConnectionMultiplexer.Connect(configuration["Redis:Configuration"]);