Skip to content

Commit 78a27c0

Browse files
lokesh-coderlokesh-coder
committed
feat(export): added database export option in settings
1 parent 6fd994c commit 78a27c0

18 files changed

+143
-29
lines changed

‎package-lock.json

Lines changed: 11 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"gun": "^0.9.996",
3939
"keypress.js": "^2.1.5",
4040
"nedb": "^1.8.0",
41-
"ngx-clipboard": "^11.0.0",
41+
"ngx-clipboard": "^11.1.0",
4242
"ngx-color": "^1.3.1",
4343
"ngx-smart-modal": "^6.0.0",
4444
"ngx-toastr": "^8.5.1",

‎src/app/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export { ColorPickerComponent } from './color-picker/color-picker.component';
66
export { ColorFormComponent } from './color-form/color-form.component';
77
export { InkComponent } from './ink/ink.component';
88
export { MagicTitleComponent } from './magic-title/magic-title.component';
9+
export { SettingsItemComponent } from './settings-item/settings-item.component';

‎src/app/components/navbar/navbar.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<a class="btn btn-primary" href="#" (click)="newBucket()">New bucket </a>
1313
</li>
1414
<li class="nav-item">
15-
<a class="nav-link" href="#">Settings</a>
15+
<a class="nav-link" routerLink="/settings" href="#">Settings</a>
1616
</li>
1717
<li class="nav-item">
1818
<a class="nav-link" href="#">Twitter</a>

‎src/app/components/settings-item/settings-item.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="ink-settings-item">
2+
<ng-content select=".description"></ng-content>
3+
<ng-content select=".action"></ng-content>
4+
</div>

‎src/app/components/settings-item/settings-item.component.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'inkapp-settings-item',
5+
templateUrl: './settings-item.component.html'
6+
})
7+
export class SettingsItemComponent implements OnInit {
8+
constructor() {}
9+
10+
ngOnInit() {}
11+
}

‎src/app/ink.component.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import { RxCollection, RxDatabase } from 'rxdb';
88

99
@Component({
1010
selector: 'inkapp-root',
11-
template: '<router-outlet></router-outlet>'
11+
template: `
12+
<inkapp-navbar></inkapp-navbar>
13+
<router-outlet></router-outlet>
14+
`
1215
})
1316
export class InkApp implements OnInit {
1417
constructor(private store: Store, private db: DBService) {

‎src/app/ink.module.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
33
import { BrowserModule } from '@angular/platform-browser';
44
import { NgxsModule } from '@ngxs/store';
5+
import { ClipboardModule } from 'ngx-clipboard';
56
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
67
import {
78
BucketComponent,
@@ -11,12 +12,14 @@ import {
1112
InkComponent,
1213
NavbarComponent,
1314
PromptComponent,
14-
MagicTitleComponent
15+
MagicTitleComponent,
16+
SettingsItemComponent
1517
} from './components';
1618
import { InkApp } from './ink.component';
1719
import { RoutingModule } from './ink.routing';
1820
import { HomePage } from './pages/home/home.component';
1921
import { SettingsPage } from './pages/settings/settings.component';
22+
import { ExportPage } from './pages/export/export.component';
2023
import { SettingsState, BucketState, BoardState, InkState } from './store/states';
2124
import { ColorModule } from './modules/color/color.module';
2225

@@ -28,6 +31,7 @@ export const MODULES = [
2831
NgxsModule.forRoot([SettingsState, BucketState, BoardState, InkState]),
2932
NgxsReduxDevtoolsPluginModule.forRoot(),
3033
ColorModule,
34+
ClipboardModule,
3135
OverlayModule
3236
];
3337
export const COMPONENTS = [
@@ -39,12 +43,13 @@ export const COMPONENTS = [
3943
ColorPickerComponent,
4044
ColorFormComponent,
4145
InkComponent,
42-
MagicTitleComponent
46+
MagicTitleComponent,
47+
SettingsItemComponent
4348
];
44-
export const PAGES = [HomePage, SettingsPage];
49+
export const PAGES = [HomePage, SettingsPage, ExportPage];
4550

4651
@NgModule({
47-
declarations: [...COMPONENTS, ...PAGES],
52+
declarations: [...COMPONENTS, ...PAGES, SettingsItemComponent],
4853
imports: [BrowserModule, ...MODULES],
4954
providers: [],
5055
bootstrap: [InkApp]

‎src/app/ink.routing.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@ import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
33

44
import { HomePage } from './pages/home/home.component';
5+
import { SettingsPage } from './pages/settings/settings.component';
6+
import { ExportPage } from './pages/export/export.component';
57

6-
const routes: Routes = [{ path: '', component: HomePage }];
8+
const routes: Routes = [
9+
{ path: '', component: HomePage },
10+
{ path: 'settings', component: SettingsPage },
11+
{ path: 'export', component: ExportPage }
12+
];
713

814
@NgModule({
915
imports: [RouterModule.forRoot(routes)],

‎src/app/pages/export/export.component.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="container">
2+
<div class="col-md-8 mx-auto">
3+
<ul class="nav ink-action-bar mb-3">
4+
<li class="nav-item">
5+
<a class="nav-link active" routerLink="/settings">
6+
<i class="ink-icon icon-arrow-left"></i>Back to settings </a>
7+
</li>
8+
<li class="nav-item ml-auto">
9+
<a class="nav-link" (click)="copy()">Copy</a>
10+
</li>
11+
</ul>
12+
<div class="ink-json-display">
13+
<pre class="ink-pre">{{jsonData}}</pre>
14+
</div>
15+
</div>
16+
</div>

‎src/app/pages/export/export.component.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { LocalDatabase } from '../../services/localdb.service';
3+
import { ClipboardService } from 'ngx-clipboard';
4+
5+
@Component({
6+
selector: 'inkapp-export',
7+
templateUrl: 'export.component.html'
8+
})
9+
export class ExportPage implements OnInit {
10+
jsonData: string;
11+
constructor(private _localService: LocalDatabase, private _copyService: ClipboardService) {}
12+
13+
ngOnInit() {
14+
this.getDatabaseContent();
15+
}
16+
17+
async getDatabaseContent() {
18+
const db = await this._localService.getDatabase();
19+
this.jsonData = JSON.stringify(await db.dump(), null, ' ');
20+
}
21+
22+
copy(content) {
23+
this._copyService.copyFromContent(this.jsonData);
24+
console.log('copied!');
25+
}
26+
}

‎src/app/pages/home/home.component.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<inkapp-navbar></inkapp-navbar>
21
<div class="container">
32
<inkapp-board *ngFor="let board of boards" [data]="board"></inkapp-board>
43
</div>

‎src/app/pages/settings/settings.component.html

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1-
<p>
2-
settings works!
3-
</p>
1+
<div class="container">
2+
<div class="col-md-8 mx-auto">
3+
<h3 class="ink-page-title mb-5">
4+
<i class="ink-icon icon-settings"></i> Settings</h3>
5+
<inkapp-settings-item>
6+
<div class="description">
7+
<h5>Export complete database</h5>
8+
<p>JSON file with all necessary information to import</p>
9+
</div>
10+
<div class="action">
11+
<button class="btn btn-primary" routerLink="/export">Export</button>
12+
</div>
13+
</inkapp-settings-item>
14+
</div>
15+
</div>

‎src/styles/_config.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ $ink--app-name: 'INK BUCKET';
44
$ink--debug: false;
55
$ink--font-family: 'Rubik', 'Inter UI', 'Nunito Sans', 'Roboto';
66
$ink--font-family-asap: 'Asap', 'Roboto';
7+
$ink--font-family-monospace: 'Courier New', 'Lucida Console', Monaco, Courier, monospace;
78
$ink--font-family-roboto: 'Roboto', 'sans-serif';
89
$ink--font-family-roboto: 'Roboto', 'sans-serif';
910
$ink--current-theme: 'DEFAULT';
@@ -16,8 +17,8 @@ $ink--colors-basic: (
1617
'bg2': #f3f3f7a6,
1718
'text': #aaaab1,
1819
'heading': #35335a,
19-
'border': #cbcbcb,
20-
'para': #808080,
20+
'border': #ededef,
21+
'para': #b1b0be,
2122
'dark': #000,
2223
'shadow': #cbd3da
2324
);

‎src/styles/base/_typography.scss

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
.doc-intro-header{
2-
font-family: $ink--font-family-asap;
3-
color:clr('secondary','theme');
4-
font-size: 2rem;
5-
font-weight: 700;
6-
letter-spacing: -1px;
1+
.ink-page-title {
2+
font-size: 1.2rem;
3+
color: clr('heading');
4+
.ink-icon {
5+
opacity: 0.8;
6+
}
77
}
8-
.doc-intro-desc{
9-
color:clr('text');
8+
9+
.ink-pre {
10+
font-family: $ink--font-family-monospace;
11+
color: clr('dark');
12+
font-size: 1rem;
1013
}

‎src/styles/components/__index.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@
33
@import './ink';
44
@import './color-sticker';
55
@import './header';
6+
@import './settings-item';
7+
@import './json-display';

‎src/styles/components/_json-display.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.ink-json-display {
2+
background-color: clr('bg2');
3+
padding: 1rem;
4+
}

‎src/styles/components/_settings-item.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.ink-settings-item {
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-between;
5+
margin: 1rem 0;
6+
border-bottom: 1px solid clr('border');
7+
font-family: $ink--font-family-roboto;
8+
padding: 1rem 0;
9+
h5 {
10+
font-size: 1.1rem;
11+
color: clr('primary', 'theme');
12+
}
13+
p {
14+
font-size: 0.9rem;
15+
color: clr('para');
16+
}
17+
}

0 commit comments

Comments
 (0)