Compare commits

..
3 Commits
Author SHA1 Message Date
KamaSK f81927ee94 fix(environment): change ip pocketbase 2026-09-14 14:49:30 +03:00
KamaSK 5211208297 docs: Обновление README 2026-09-11 17:03:55 +03:00
KamaSK 8f02c4ecce refactor: reformat(prettier) 2026-09-11 17:01:55 +03:00
11 changed files with 61 additions and 114 deletions
+33 -47
View File
@@ -1,59 +1,45 @@
# Kskcrmspa # KSK CRM SPA
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.1.5. Пет-проект: CRM-система для управления заказами частного мастера.
Проект создаётся в практических целях для глубинного освоения **Angular 22** и современной экосистемы фронтенд-разработки.
## Development server ## Стек технологий
To start a local development server, run: * **Frontend:** Angular 22
* **Backend / Database:** PocketBase
* **Package Manager:** pnpm
## Локальный запуск проекта
Проект состоит из двух частей: легковесного бэкенда (PocketBase) и фронтенда (Angular 22).
### 1. Запуск бэкенда (PocketBase)
В репозитории уже лежат файлы структуры базы данных в папке `pb_migrations`. При запуске PocketBase автоматически накатит нужные миграции.
1. Скачайте исполняемый файл **PocketBase** для вашей ОС с [официального сайта](https://pocketbase.io/docs/) (или разверните через Docker).
2. Поместите бинарник `pocketbase` в корневую папку этого проекта (на один уровень с папкой `pb_migrations`).
3. Запустите сервер:
```bash ```bash
ng serve ./pocketbase serve
``` ```
*PocketBase запустится на `http://127.0.0.1:8090` и автоматически применит схему БД.*
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ### 2. Настройка и запуск фронтенда (Angular)
## Code scaffolding
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
1. Установите зависимости проекта:
```bash ```bash
ng generate component component-name pnpm install
``` ```
2. Убедитесь, что адрес API указан верно. Конфигурация для локальной разработки находится в файле `src/environments/environment.development.ts`:
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run: ```typescript
export const environment = {
production: false,
apiUrl: 'http://127.0.0.1:8090'
};
```
3. Запустите dev-сервер:
```bash ```bash
ng generate --help pnpm start
``` ```
4. Откройте приложение в браузере по адресу `http://localhost:4200`.
## Building
To build the project run:
```bash
ng build
```
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
## Running unit tests
To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
```bash
ng test
```
## Running end-to-end tests
For end-to-end (e2e) testing, run:
```bash
ng e2e
```
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
## Additional Resources
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+1 -4
View File
@@ -4,8 +4,5 @@ import { provideRouter } from '@angular/router';
import { routes } from './app.routes'; import { routes } from './app.routes';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [ providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
provideBrowserGlobalErrorListeners(),
provideRouter(routes)
]
}; };
+3 -9
View File
@@ -2,27 +2,21 @@ import { Routes } from '@angular/router';
import { TaskList } from './features/tasks/task-list'; import { TaskList } from './features/tasks/task-list';
import { TaskDetails } from './features/tasks/task-details'; import { TaskDetails } from './features/tasks/task-details';
import { TaskNew } from './features/tasks/task-new'; import { TaskNew } from './features/tasks/task-new';
import { Dev } from './features/dev';
export const routes: Routes = [ export const routes: Routes = [
{ {
path: '', path: '',
component: TaskList, component: TaskList,
title: 'Главная страница' title: 'Главная страница',
}, },
{ {
path: 'details/:id', path: 'details/:id',
component: TaskDetails, component: TaskDetails,
title: 'Подробно' title: 'Подробно',
}, },
{ {
path: 'new', path: 'new',
component: TaskNew, component: TaskNew,
title: 'Новая' title: 'Новая',
}, },
{
path: 'dev',
component: Dev,
title: 'Dev'
}
]; ];
-27
View File
@@ -1,27 +0,0 @@
import { Component, signal } from '@angular/core';
@Component({
imports: [],
selector: 'ksk-crm-dev',
styles: `
.outlined {
border: 1px solid var(--color-primary);
}
.rounded {
border-radius: 3px;
}
`,
template: `
<p [class.outlined]="isOutlined()" >dev works!</p>
<button (click)="handleAction()">Action</button>
`,
})
export class Dev {
outlined = signal<string[]>(["rounded"])
isOutlined = signal(false);
handleAction() {
this.isOutlined.set(true);
}
}
+1 -1
View File
@@ -64,7 +64,7 @@ import { lucideCircleX, lucideSquarePlus } from '@ng-icons/lucide';
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: .5em; margin-left: 0.5em;
} }
} }
+11 -13
View File
@@ -5,26 +5,24 @@ import { Router } from '@angular/router';
@Component({ @Component({
selector: 'ksk-crm-task-new', selector: 'ksk-crm-task-new',
imports: [ imports: [ReactiveFormsModule],
ReactiveFormsModule
],
template: ` template: `
<form [formGroup]="formGroup" (submit)="submitForm()"> <form [formGroup]="formGroup" (submit)="submitForm()">
<div class="form-field"> <div class="form-field">
<label for="name">Имя: </label> <label for="name">Имя: </label>
<input id="name" type="text" formControlName="name"> <input id="name" type="text" formControlName="name" />
</div> </div>
<div class="form-field"> <div class="form-field">
<label for="city">Город: </label> <label for="city">Город: </label>
<input id="city" type="text" formControlName="city"> <input id="city" type="text" formControlName="city" />
</div> </div>
<div class="form-field"> <div class="form-field">
<label for="streetAddress">Адрес: </label> <label for="streetAddress">Адрес: </label>
<input id="streetAddress" type="text" formControlName="streetAddress"> <input id="streetAddress" type="text" formControlName="streetAddress" />
</div> </div>
<div class="form-field"> <div class="form-field">
<label for="numberPhone">Номер телефона: </label> <label for="numberPhone">Номер телефона: </label>
<input id="numberPhone" type="text" formControlName="numberPhone"> <input id="numberPhone" type="text" formControlName="numberPhone" />
</div> </div>
<button type="submit">Добавить</button> <button type="submit">Добавить</button>
</form> </form>
@@ -52,15 +50,15 @@ export class TaskNew {
city: new FormControl(''), city: new FormControl(''),
streetAddress: new FormControl(''), streetAddress: new FormControl(''),
numberPhone: new FormControl(''), numberPhone: new FormControl(''),
}) });
async submitForm() { async submitForm() {
const createdTask = await this.taskService.createTask({ const createdTask = await this.taskService.createTask({
name: this.formGroup.value.name ?? "", name: this.formGroup.value.name ?? '',
city: this.formGroup.value.city ?? "", city: this.formGroup.value.city ?? '',
streetAddress: this.formGroup.value.streetAddress ?? "", streetAddress: this.formGroup.value.streetAddress ?? '',
numberPhone: this.formGroup.value.numberPhone ?? "", numberPhone: this.formGroup.value.numberPhone ?? '',
}) });
this.formGroup.reset(); this.formGroup.reset();
await this.router.navigate(['details', createdTask.id]); await this.router.navigate(['details', createdTask.id]);
+2 -2
View File
@@ -1,7 +1,7 @@
import { Service } from '@angular/core'; import { Service } from '@angular/core';
import { Task } from './task'; import { Task } from './task';
import PocketBase from 'pocketbase' import PocketBase from 'pocketbase';
import { environment } from '../../../environments/environment' import { environment } from '../../../environments/environment';
@Service() @Service()
export class TaskService { export class TaskService {
+1 -1
View File
@@ -1,4 +1,4 @@
export const environment = { export const environment = {
production: false, production: false,
apiUrl: "http://10.1.1.40:8090", apiUrl: 'http://localhost:8090',
}; };
+1 -1
View File
@@ -1,4 +1,4 @@
export const environment = { export const environment = {
production: true, production: true,
apiUrl: 'http://10.1.1.40:8090', apiUrl: 'http://localhost:8090',
}; };
+1 -2
View File
@@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config'; import { appConfig } from './app/app.config';
import { App } from './app/app'; import { App } from './app/app';
bootstrapApplication(App, appConfig) bootstrapApplication(App, appConfig).catch((err) => console.error(err));
.catch((err) => console.error(err));