diff --git a/package.json b/package.json index 978f631..5956f45 100644 --- a/package.json +++ b/package.json @@ -110,9 +110,9 @@ "shx": "^0.3.3", "typescript": "~4.3.5", "uuid": "^8.3.2", - "x-framework-components": "file:../Documents/pack/x-framework-components-0.0.1.tgz", "x-framework-core": "file:../Documents/pack/x-framework-core-0.0.1.tgz", - "x-framework-services": "file:../Documents/pack/x-framework-services-0.0.1.tgz" + "x-framework-services": "file:../Documents/pack/x-framework-services-0.0.1.tgz", + "x-framework-components": "file:../Documents/pack/x-framework-components-0.0.1.tgz" }, "cordova": { "plugins": { diff --git a/src/app/config/app.localization.config.ts b/src/app/config/app.localization.config.ts index 80312e8..ec9470d 100644 --- a/src/app/config/app.localization.config.ts +++ b/src/app/config/app.localization.config.ts @@ -183,6 +183,18 @@ export enum AppResourceIDs { icon_list = 'icon_list', //#endregion + // + //#region Ide ... + ide = 'ide', + ide_description = 'ide_description', + //#endregion + + // + //#region Chart ... + chart = 'chart', + cart_description = 'cart_description', + //#endregion + // //#region Counter ... counter = 'counter', @@ -739,6 +751,30 @@ export const FaCustomLocales: XTranslationItem[] = [ }, //#endregion + // + //#region Ide ... + { + id: 'ide', + value: 'ویرایشگر کد', + }, + { + id: 'ide_description', + value: 'مستندات مربوط به ویرایشگر کد', + }, + //#endregion + + // + //#region Ide ... + { + id: 'chart', + value: 'نمودار', + }, + { + id: 'chart_description', + value: 'مستندات مربوط به مولفه نمودار', + }, + //#endregion + // //#region Counter ... { @@ -1495,6 +1531,30 @@ export const EnCustomLocales: XTranslationItem[] = [ }, //#endregion + // + //#region Ide ... + { + id: 'ide', + value: 'Ide', + }, + { + id: 'ide_description', + value: 'Ide Component Documentation', + }, + //#endregion + + // + //#region Ide ... + { + id: 'chart', + value: 'Chart Component', + }, + { + id: 'chart_description', + value: 'Chart Component Documentation', + }, + //#endregion + // //#region Counter ... { diff --git a/src/app/config/localization.config.ts b/src/app/config/localization.config.ts index 0244869..4fe8473 100644 --- a/src/app/config/localization.config.ts +++ b/src/app/config/localization.config.ts @@ -550,6 +550,18 @@ export const AvailableTranslationResources: XLanguageDescriptor[] = [ }, //#endregion + // + //#region Additionals ... + { + id: 'ide_mode', + value: 'نوع کد', + }, + { + id: 'ide_format', + value: 'حالت دهی کد', + }, + //#endregion + // // Custom Translations ... ...FaCustomLocales, @@ -1104,6 +1116,18 @@ export const AvailableTranslationResources: XLanguageDescriptor[] = [ }, //#endregion + // + //#region Additionals ... + { + id: 'ide_mode', + value: 'Code Style', + }, + { + id: 'ide_format', + value: 'Code Frormatting', + }, + //#endregion + // // Custom Translations ... ...EnCustomLocales, diff --git a/src/app/config/page.config.ts b/src/app/config/page.config.ts index 02bb56d..ec83734 100644 --- a/src/app/config/page.config.ts +++ b/src/app/config/page.config.ts @@ -5,7 +5,7 @@ import { toTabNavigatiorItem, toNavigatiorListItem, } from 'x-framework-components'; -import { XPage } from 'x-framework-core'; +import { toArray, XPage } from 'x-framework-core'; import { AppResourceIDs } from './app.localization.config'; // @@ -35,32 +35,34 @@ export enum ServicesRoutes { } export enum ComponentsRoutes { - Default = 'components', - Components = 'components', - Introduction = 'introduction', - SmallComponents = 'small-components', + Ide = 'ide', + Fab = 'fab', + Map = 'map', Card = 'card', Icon = 'icon', - Counter = 'counter', - ColorPicker = 'color-picker', - Fab = 'fab', - FileComponents = 'file-components', Form = 'form', Grid = 'grid', List = 'list', - Map = 'map', - MarkDown = 'markdown', Tree = 'tree', - DescriptionList = 'description-list', - ExpandableList = 'expandable-list', - ExpandablePanel = 'expandable-panel', - ModelPresenter = 'model-presenter', - Slider = 'slider', - Stepper = 'stepper', Tabs = 'tabs', - Table = 'table', Page = 'page', + Chart = 'chart', + Table = 'table', + Slider = 'slider', + Counter = 'counter', + Stepper = 'stepper', + MarkDown = 'markdown', + Default = 'components', + Components = 'components', + ColorPicker = 'color-picker', + Introduction = 'introduction', TabNavigator = 'tab-navigator', + FileComponents = 'file-components', + ModelPresenter = 'model-presenter', + ExpandableList = 'expandable-list', + DescriptionList = 'description-list', + ExpandablePanel = 'expandable-panel', + SmallComponents = 'small-components', } export enum TabsRoutes { @@ -113,7 +115,9 @@ export enum PageName { Components = AppRoutes.Components, ComponentsIntoduction = ComponentsRoutes.Introduction, SmallComponents = ComponentsRoutes.SmallComponents, + Chart = ComponentsRoutes.Chart, Card = ComponentsRoutes.Card, + Ide = ComponentsRoutes.Ide, Icon = ComponentsRoutes.Icon, Counter = ComponentsRoutes.Counter, ColorPicker = ComponentsRoutes.ColorPicker, @@ -304,6 +308,28 @@ export const PageIndex: PageIndexType = { route: ['/', `${AppRoutes.Components}`, `${ComponentsRoutes.Icon}`], }, // + // Chart ... + { + icon: XIconNames.stats_chart, + id: `${PageName.Chart}`, + name: `${PageName.Chart}`, + title: AppResourceIDs.chart, + baseRoute: `${ComponentsRoutes.Chart}`, + description: AppResourceIDs.cart_description, + route: ['/', `${AppRoutes.Components}`, `${ComponentsRoutes.Chart}`], + }, + // + // Ide ... + { + icon: XIconNames.edit, + id: `${PageName.Ide}`, + name: `${PageName.Ide}`, + title: AppResourceIDs.ide, + baseRoute: `${ComponentsRoutes.Ide}`, + description: AppResourceIDs.ide_description, + route: ['/', `${AppRoutes.Components}`, `${ComponentsRoutes.Ide}`], + }, + // // Counter ... { icon: XIconNames.list, @@ -628,54 +654,63 @@ export const PageIndex: PageIndexType = { // // a Const of Available Pages ... -export const Pages = { +const homeChilds = toArray(PageIndex.Home.childs); +const coreChilds = toArray(PageIndex.Core.childs); +const tabChilds = toArray(PageIndex.TabsNav.childs); +const themeChilds = toArray(PageIndex.Themes.childs); +const serviceChilds = toArray(PageIndex.Services.childs); +const componentChilds = toArray(PageIndex.Components.childs); +export const Pages: any = { // Home: PageIndex.Home, - HomeIntroduction: PageIndex.Home.childs[0], + HomeIntroduction: homeChilds[0], // Core: PageIndex.Core, - CoreIntroduction: PageIndex.Core.childs[0], + CoreIntroduction: coreChilds[0], // Services: PageIndex.Services, - ServicesIntroduction: PageIndex.Services.childs[0], + ServicesIntroduction: serviceChilds[0], // Components: PageIndex.Components, - ComponentsIntroduction: PageIndex.Components.childs[0], - SmallComponents: PageIndex.Components.childs[1], - Card: PageIndex.Components.childs[2], - Icon: PageIndex.Components.childs[3], - Counter: PageIndex.Components.childs[4], - ColorPicker: PageIndex.Components.childs[5], - Fab: PageIndex.Components.childs[6], - FileUpload: PageIndex.Components.childs[7], - Form: PageIndex.Components.childs[8], - Grid: PageIndex.Components.childs[9], - List: PageIndex.Components.childs[10], - Map: PageIndex.Components.childs[11], - MarkDown: PageIndex.Components.childs[12], - Tree: PageIndex.Components.childs[13], - DescriptionList: PageIndex.Components.childs[14], - ExpandableList: PageIndex.Components.childs[15], - ExpandablePanel: PageIndex.Components.childs[16], - Slider: PageIndex.Components.childs[17], - Stepper: PageIndex.Components.childs[18], - Tabs: PageIndex.Components.childs[19], - Table: PageIndex.Components.childs[20], - Page: PageIndex.Components.childs[21], - TabNavigator: PageIndex.Components.childs[22], + ComponentsIntroduction: componentChilds[0], + SmallComponents: componentChilds[1], + Card: componentChilds[2], + Icon: componentChilds[3], + Chart: componentChilds[4], + Ide: componentChilds[5], + Counter: componentChilds[6], + ColorPicker: componentChilds[7], + Fab: componentChilds[8], + FileComponents: componentChilds[9], + Form: componentChilds[10], + Grid: componentChilds[11], + List: componentChilds[12], + Map: componentChilds[13], + MarkDown: componentChilds[14], + Tree: componentChilds[15], + DescriptionList: componentChilds[16], + ExpandableList: componentChilds[17], + ExpandablePanel: componentChilds[18], + ModelPresenter: componentChilds[19], + Slider: componentChilds[20], + Stepper: componentChilds[21], + Tabs: componentChilds[22], + Table: componentChilds[23], + Page: componentChilds[24], + TabNavigator: componentChilds[25], // TabsNav: PageIndex.TabsNav, - TabPage1: PageIndex.TabsNav.childs[0], - TabPage2: PageIndex.TabsNav.childs[1], - TabPage3: PageIndex.TabsNav.childs[2], + TabPage1: tabChilds[0], + TabPage2: tabChilds[1], + TabPage3: tabChilds[2], // Themes: PageIndex.Themes, - ThemeManager: PageIndex.Themes.childs[0], + ThemeManager: themeChilds[0], }; // diff --git a/src/app/pages/components/chart/chart.page.html b/src/app/pages/components/chart/chart.page.html new file mode 100644 index 0000000..ad89713 --- /dev/null +++ b/src/app/pages/components/chart/chart.page.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + diff --git a/src/app/pages/components/chart/chart.page.scss b/src/app/pages/components/chart/chart.page.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/components/chart/chart.page.ts b/src/app/pages/components/chart/chart.page.ts new file mode 100644 index 0000000..64f97a2 --- /dev/null +++ b/src/app/pages/components/chart/chart.page.ts @@ -0,0 +1,143 @@ +import { Component, ViewChild } from '@angular/core'; +import { isNullOrEmptyString } from 'x-framework-core'; +import { VPageComponent } from '../../../views/v-page/v-page.component'; +import { AppResourceIDs } from 'src/app/config/app.localization.config'; +import { XChartOptions, XChartSeriesType } from 'x-framework-components'; + +@Component({ + selector: 'app-chart', + templateUrl: './chart.page.html', + styleUrls: ['./chart.page.scss'], +}) +export class ChartPage extends VPageComponent { + // + //#region Props ... + toolbarShowSubTitle = true; + titleRes = AppResourceIDs.form; + toolbarTitle = this.resourceProvider(this.titleRes); + toolbarSubTitle = this.resourceProvider(AppResourceIDs.form_description); + + readonly contentFa = ` + # ${this.toolbarTitle} + + این مولفه جهت نمایش انواع چارت های مختلف در برنامه ها بکار می رود ... + `; + readonly contentEn = ` + # ${this.toolbarTitle} + + this Component used for draw Charts on Applications ... + `; + + readonly sample1 = + '```html' + + ` + + +` + + '```'; + + // + chartSeries: XChartSeriesType = [ + { + name: 'فروش', + data: [30, 40, 35, 50, 49, 60, 70, 91, 125], + }, + ]; + + // + chartOptions: XChartOptions = { + chart: { + type: 'line', + height: 350, + fontFamily: 'Vazirmatn, sans-serif', // فونت فارسی + toolbar: { show: true }, + }, + xaxis: { + categories: [ + 'فروردین', + 'اردیبهشت', + 'خرداد', + 'تیر', + 'مرداد', + 'شهریور', + 'مهر', + 'آبان', + 'آذر', + ], + }, + stroke: { curve: 'smooth', width: 3 }, + markers: { size: 5 }, + title: { + text: 'نمودار فروش ماهانه', + align: 'center', + style: { fontSize: '16px', fontWeight: 'bold' }, + }, + tooltip: { theme: 'dark' }, + dataLabels: { enabled: false }, + }; + //#endregion + + // + //#region UI Providers ... + /** + * read specified variable content based on current locale ... + * + * @param title which var can read ... + * + * @returns string content ... + */ + getContent(title: string) { + // + if (isNullOrEmptyString(title)) { + return ''; + } + + // + const currentLocale = this.managerService.currentLocale; + + // + const varName = + title + + (currentLocale === 'en-US' + ? 'En' + : currentLocale === 'fa-IR' + ? 'Fa' + : ''); + + const result = (this as any)[`${varName}`]; + + // + return result || ''; + } + //#endregion + + // + //#region UI Handlers ... + async onChartReady() { + // // + // await this.managerService.notificationService.presentSuccessNotification({ + // message: this.resourceProvider(AppResourceIDs.temp_label), + // dissmissable: true, + // }); + } + //#endregion +} diff --git a/src/app/pages/components/components.module.ts b/src/app/pages/components/components.module.ts index c2912b3..6e53a13 100644 --- a/src/app/pages/components/components.module.ts +++ b/src/app/pages/components/components.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { FabPage } from './fab/fab.page'; import { MapPage } from './map/map.page'; +import { IdePage } from './ide/ide.page'; import { FormPage } from './form/form.page'; import { GridPage } from './grid/grid.page'; import { ListPage } from './list/list.page'; @@ -8,6 +9,7 @@ import { IconPage } from './icon/icon.page'; import { CardPage } from './card/card.page'; import { PagePage } from './page/page.page'; import { TabsPage } from './tabs/tabs.page'; +import { TreePage } from './tree/tree.page'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { TablePage } from './table/table.page'; @@ -27,7 +29,7 @@ import { DescriptionListPage } from './description-list/description-list.page'; import { SmallComponentsPage } from './small-components/small-components.page'; import { ExpandablePanelPage } from './expandable-panel/expandable-panel.page'; import { SampleModalComponent } from './small-components/sample-modal/sample-modal.component'; -import { TreePage } from './tree/tree.page'; +import { ChartPage } from './chart/chart.page'; @NgModule({ imports: [ @@ -51,6 +53,14 @@ import { TreePage } from './tree/tree.page'; path: ComponentsRoutes.Card, component: CardPage, }, + { + path: ComponentsRoutes.Ide, + component: IdePage, + }, + { + path: ComponentsRoutes.Chart, + component: ChartPage, + }, { path: ComponentsRoutes.Icon, component: IconPage, @@ -138,6 +148,7 @@ import { TreePage } from './tree/tree.page'; ]), ], declarations: [ + IdePage, FabPage, MapPage, CardPage, @@ -148,6 +159,7 @@ import { TreePage } from './tree/tree.page'; ListPage, TabsPage, TreePage, + ChartPage, TablePage, SliderPage, StepperPage, diff --git a/src/app/pages/components/ide/ide.page.html b/src/app/pages/components/ide/ide.page.html new file mode 100644 index 0000000..6ed36f9 --- /dev/null +++ b/src/app/pages/components/ide/ide.page.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + diff --git a/src/app/pages/components/ide/ide.page.scss b/src/app/pages/components/ide/ide.page.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/components/ide/ide.page.ts b/src/app/pages/components/ide/ide.page.ts new file mode 100644 index 0000000..24f3a41 --- /dev/null +++ b/src/app/pages/components/ide/ide.page.ts @@ -0,0 +1,153 @@ +import { Component } from '@angular/core'; +import { isNullOrEmptyString } from 'x-framework-core'; +import { VPageComponent } from '../../../views/v-page/v-page.component'; +import { AppResourceIDs } from 'src/app/config/app.localization.config'; + +@Component({ + selector: 'app-ide', + templateUrl: './ide.page.html', + styleUrls: ['./ide.page.scss'], +}) +export class IdePage extends VPageComponent { + // + //#region Props ... + titleRes = AppResourceIDs.ide; + toolbarShowSubTitle = true; + toolbarTitle = this.resourceProvider(this.titleRes); + toolbarSubTitle = this.resourceProvider(AppResourceIDs.ide_description); + + readonly contentFa = ` + # ${this.toolbarTitle} + + این مولفه جهت نمایش محتوای کدهای منبع و ویرایش آن ها بکار می رود.. + `; + readonly contentEn = ` + # ${this.toolbarTitle} + + this Component used for show and edit Code sources. + `; + + readonly sample1 = + '```html' + + ` + +` + + '```'; + + ideContent = ` +import { + XBaseDataPagerQuery, + XBaseDataPagerQueryResult, +} from 'x-framework-core'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { XQueryDto, XQueryResultDto } from '../models/x-query.dto'; + +export function toXQuery( + q: XBaseDataPagerQuery, + containsDetail = true, + enableTracking = false, + sortBy = 'id', + isAscending = true +) { + return { + filter: q.filter, + containsDetail, + enableTracking, + sortBy, + isAscending, + page: q.pageNumber, + pageSize: q.rowsInPage, + } as XQueryDto; +} + +export function applyToDataPagerQueryResult( + result: Observable> +) { + return result.pipe( + map((queryResult) => { + return { + count: queryResult.totalItems || 0, + items: queryResult.items || [], + } as XBaseDataPagerQueryResult; + }) + ); +} +`; + //#endregion + + // + //#region UI Providers ... + /** + * read specified variable content based on current locale ... + * + * @param title which var can read ... + * + * @returns string content ... + */ + getContent(title: string) { + // + if (isNullOrEmptyString(title)) { + return ''; + } + + // + const currentLocale = this.managerService.currentLocale; + + // + const varName = + title + + (currentLocale === 'en-US' + ? 'En' + : currentLocale === 'fa-IR' + ? 'Fa' + : ''); + + const result = (this as any)[`${varName}`]; + + // + return result || ''; + } + //#endregion +} diff --git a/src/app/views/views.module.ts b/src/app/views/views.module.ts index 068f2af..67cec90 100644 --- a/src/app/views/views.module.ts +++ b/src/app/views/views.module.ts @@ -9,6 +9,7 @@ import { XDirectivesModule as XFrameworkServicesDirectivesModule, } from 'x-framework-services'; import { + XIDEModule, XFabModule, XMapModule, XTabsModule, @@ -19,12 +20,14 @@ import { XGridModule, XFormModule, XTreeModule, + XChartModule, XTableModule, XThemeModule, XEmptyModule, XColorModule, XButtonModule, XSliderModule, + XDialogsModule, XSpinnerModule, XSlotterModule, XCounterModule, @@ -47,7 +50,6 @@ import { XExpandablePanelModule, XDescriptionListModule, XFrameworkComponentsModule, - XDialogsModule, } from 'x-framework-components'; import { NgModule } from '@angular/core'; import { IonicModule } from '@ionic/angular'; @@ -87,6 +89,7 @@ import { VMaintainerComponent } from './v-maintainer/v-maintainer.component'; XFrameworkComponentsModule, // + XIDEModule, XFabModule, XMapModule, XPageModule, @@ -99,6 +102,7 @@ import { VMaintainerComponent } from './v-maintainer/v-maintainer.component'; XTreeModule, XColorModule, XTableModule, + XChartModule, XThemeModule, XButtonModule, XSliderModule, @@ -142,6 +146,7 @@ import { VMaintainerComponent } from './v-maintainer/v-maintainer.component'; XBaseComponentModule, // + XIDEModule, XFabModule, XMapModule, XPageModule, @@ -151,7 +156,8 @@ import { VMaintainerComponent } from './v-maintainer/v-maintainer.component'; XTabsModule, XListModule, XGridModule, - XTreeModule, + XTreeModule, + XChartModule, XColorModule, XTableModule, XThemeModule, diff --git a/tsconfig.json b/tsconfig.json index 6ed4171..bce23da 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,6 +19,7 @@ "skipDefaultLibCheck": true, "experimentalDecorators": true, "noFallthroughCasesInSwitch": true, + "allowSyntheticDefaultImports": true, "suppressImplicitAnyIndexErrors": true, "forceConsistentCasingInFileNames": true, "lib": [