Skip to content

Minds Frontend
Minds Frontend
Commit 5ac0055e authored by Mark Harding's avatar Mark Harding
Browse files
Options
  • Download

(fix): various fixes for pro settings

parent d50b0fb5
pro-settings-2163
1 merge request!638Refactor PRO settings
Pipeline #96211660 failed with stages
in 5 minutes and 55 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 112 deletions
src/app/common/components/draggable-list/list.component.ts
View file @ 5ac0055e
......@@ -5,6 +5,7 @@ import {
TemplateRef,
Output,
EventEmitter,
ChangeDetectorRef,
} from '@angular/core';
import {
DndDropEvent,
......@@ -31,9 +32,10 @@ export class DraggableListComponent {
return this.id ? item[this.id] + index : index;
}
constructor(private cd: ChangeDetectorRef) {}
onDrop(event: DndDropEvent) {
this.dragging = false;
console.log(event);
if (
this.data &&
(event.dropEffect === 'copy' || event.dropEffect === 'move')
......@@ -56,10 +58,8 @@ export class DraggableListComponent {
}
removeItem(index) {
console.log('***databefore removal', this.data, index);
this.data.splice(index, 1);
this.arrayChanged.emit(this.data);
console.log('***dataafter removal', this.data);
}
clickedHeaderRow($event) {
......
src/app/modules/channels/sidebar/sidebar.ts
View file @ 5ac0055e
......@@ -196,14 +196,7 @@ export class ChannelSidebar {
}
get proSettingsRouterLink() {
const isAdmin = window.Minds.Admin;
const route: any[] = ['/pro/settings'];
if (isAdmin) {
route.push({ user: this.user.username });
}
const route: any[] = ['/pro/' + this.user.username + '/settings'];
return route;
}
}
src/app/modules/pro/pro.module.ts
View file @ 5ac0055e
......@@ -45,16 +45,11 @@ const routes: Routes = [
component: ProMarketingComponent,
},
{
path: 'settings',
redirectTo: 'settings/general',
path: ':username/settings',
redirectTo: ':username/settings/general',
pathMatch: 'full',
},
{
path: 'settings/cancel',
redirectTo: 'settings/general',
pathMatch: 'full',
},
{ path: 'settings/:tab', component: ProSettingsComponent },
{ path: ':username/settings/:tab', component: ProSettingsComponent },
{
path: ':username',
component: ProChannelComponent,
......
src/app/modules/pro/settings/settings.component.html
View file @ 5ac0055e
......@@ -449,13 +449,16 @@
Add
</button>
</div>
<div class="m-proSettings__row--input">
<div
class="m-proSettings__row--input"
*ngIf="form.value.hashtags.length > 0"
>
<m-draggableList
[headers]="['Label', '#Hashtag']"
[data]="form.value.hashtags"
[id]="'tag'"
(emptyListHeaderRowClicked)="addBlankTag()"
(arrayChanged)="resetArray('hashtags', $event)"
(arrayChanged)="setTags($event)"
>
<ng-template let-tag="item" let-i="i">
<ng-container [formGroupName]="i">
......@@ -528,13 +531,16 @@
Add
</button>
</div>
<div class="m-proSettings__row--input">
<div
class="m-proSettings__row--input"
*ngIf="form.value.footer.links.length > -1"
>
<m-draggableList
[headers]="['Label', 'Url']"
[data]="form.value.footer.links"
[id]="'title'"
(emptyListHeaderRowClicked)="addBlankFooterLink()"
(arrayChanged)="resetArray('footer.links', $event)"
(arrayChanged)="setFooterLinks($event)"
>
<ng-template let-link="item" let-i="i">
<ng-container [formGroupName]="i">
......@@ -658,29 +664,27 @@
<ng-template #submitButton>
<m-shadowboxSubmitButton [disabled]="!form.valid">
<ng-container *ngIf="saveStatus !== 'saving'">
<div
*ngIf="form.dirty || form.touched"
class="m-shadowboxSubmitButton__status--unsaved"
>
Save
{{ activeTab.id === 'general' ? 'Personal Details' : activeTab.title }}
</div>
<div
*ngIf="!form.dirty && !form.touched && saveStatus !== 'unsaved'"
class="m-shadowboxSubmitButton__status--saved"
>
Saved
</div>
<ng-container [ngSwitch]="saveStatus">
<ng-template ngSwitchCase="saved">
<div class="m-shadowboxSubmitButton__status--saved">
Saved
</div>
</ng-template>
<ng-template ngSwitchCase="saving">
<div class="m-shadowboxSubmitButton__status--saving">
<span></span>
<span></span>
<span></span>
</div>
</ng-template>
<ng-template ngSwitchDefault>
<div class="m-shadowboxSubmitButton__status--unsaved">
Save
{{
activeTab.id === 'general' ? 'Personal Details' : activeTab.title
}}
</div>
</ng-template>
</ng-container>
<div
*ngIf="saveStatus === 'saving'"
class="m-shadowboxSubmitButton__status--saving"
>
<span></span>
<span></span>
<span></span>
</div>
</m-shadowboxSubmitButton>
</ng-template>
src/app/modules/pro/settings/settings.component.ts
View file @ 5ac0055e
......@@ -34,7 +34,6 @@ import {
})
export class ProSettingsComponent implements OnInit, OnDestroy {
menuObj: Menu = sidebarMenu;
activeForm: NgForm;
activeTab: any;
tabs = [
{
......@@ -89,11 +88,7 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
protected paramMap$: Subscription;
protected param$: Subscription;
protected domainValidation$: Subscription;
protected formEl$: Subscription;
protected formChanges$: Subscription;
@ViewChild('logoField', { static: false })
protected logoField: ElementRef<HTMLInputElement>;
......@@ -101,8 +96,6 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
@ViewChild('backgroundField', { static: false })
protected backgroundField: ElementRef<HTMLInputElement>;
// @ViewChild('f', { static: false }) formEl: any;
form = this.fb.group({
title: ['', Validators.required],
headline: [''],
......@@ -147,43 +140,37 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
const activeTabParam = params.get('tab');
this.activeTab = this.tabs.find(tab => tab.id === activeTabParam);
this.saveStatus = 'unsaved';
this.detectChanges();
});
this.param$ = this.route.params.subscribe(params => {
if (this.session.isAdmin()) {
this.user = params['user'] || null;
this.user = params.get('username') || null;
this.updatePreviewRoute();
}
this.detectChanges();
this.load();
});
this.form.valueChanges.subscribe((value: any) => {
console.log(value);
console.log(this.form);
if (this.form.dirty) {
console.log('template form dirty - yes: ', value);
} else {
console.log('template form dirty - no: ');
this.formChanges$ = this.form.valueChanges.subscribe((value: any) => {
if (this.form.dirty && this.saveStatus === 'saved') {
this.saveStatus = 'unsaved';
this.detectChanges();
}
});
if (this.isRemote) {
this.updatePreviewRoute();
}
}
updatePreviewRoute() {
const previewRouteLink = this.menuObj.links.find(
link => link.id === ':user'
);
previewRouteLink.path = `pro/${this.user}`;
this.detectChanges();
if (previewRouteLink) {
previewRouteLink.path = `pro/${this.user}`;
this.detectChanges();
}
}
ngOnDestroy() {
this.paramMap$.unsubscribe();
this.param$.unsubscribe();
// this.domainValidation$.unsubscribe();
this.formChanges$.unsubscribe();
}
async load() {
......@@ -217,16 +204,8 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
},
});
(<FormArray>this.form.controls.hashtags).clear();
(<FormArray>(<FormGroup>this.form.controls.footer).controls.links).clear();
for (let tag of settings.tag_list) {
this.addTag(tag.label, tag.tag);
}
for (let link of settings.footer_links) {
this.addFooterLink(link.title, link.href);
}
this.setTags(settings.tag_list);
this.setFooterLinks(settings.footer_links);
this.settings = settings;
......@@ -304,8 +283,6 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
}
async onSubmit() {
console.log(this.form);
console.log(this.form.value);
this.error = null;
this.saveStatus = 'saving';
this.detectChanges();
......@@ -359,6 +336,7 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
'Pro settings have been successfully updated'
);
this.saveStatus = 'saved';
this.form.markAsPristine();
} catch (e) {
this.error = e.message;
this.formToastService.error('Error: ' + this.error);
......@@ -384,35 +362,15 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
);
}
// removeTag(index: number) {
// const hashtags = <FormArray>this.form.controls.hashtags;
// }
resetArray(formArrayName: string, arrayAfterChange: any) {
console.log('***changedArray', arrayAfterChange, arrayAfterChange[0]);
const arrayBeforeChange = <FormArray>this.form.controls[formArrayName];
console.log(
'***FormArraybeforereset',
arrayBeforeChange.value,
arrayBeforeChange.value[0]
);
arrayBeforeChange.reset(arrayAfterChange);
console.log(
'***FormArrayafterereset',
arrayBeforeChange.value,
arrayBeforeChange.value[0]
);
setTags(tags: Array<{ label: string; tag: string }>) {
(<FormArray>this.form.controls.hashtags).clear();
this.detectChanges();
for (const tag of tags) {
this.addTag(tag.label, tag.tag);
}
this.detectChanges();
}
// removeFooterLink(index: number) {
// const links = <FormArray>this.form.controls.footer_links;
// links.removeAt(index);
// }
addBlankFooterLink() {
this.addFooterLink('', '');
}
......@@ -428,6 +386,15 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
);
}
setFooterLinks(links: Array<{ title: string; href: string }>) {
(<FormArray>(<FormGroup>this.form.controls.footer).controls.links).clear();
this.detectChanges();
for (let link of links) {
this.addFooterLink(link.title, link.href);
}
this.detectChanges();
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
......
src/app/modules/pro/settings/sidebar-menu.default.ts
View file @ 5ac0055e
......@@ -2,7 +2,7 @@ const sidebarMenu = {
header: {
id: 'pro_settings',
label: 'Pro Settings',
path: '/pro/settings/',
path: '/pro/:username/settings/',
permissions: ['pro'],
},
links: [
......
src/app/modules/settings/settings.component.html
View file @ 5ac0055e
......@@ -109,6 +109,17 @@
<span i18n="@@M__ACTION__SUGGESTED_HASHTAGS">Suggested Hashtags</span>
</a> -->
<a
class="m-page--sidebar--navigation--item"
*ngIf="session.getLoggedInUser().pro"
[routerLink]="[
'/pro/' + session.getLoggedInUser().username + '/settings'
]"
>
<i class="material-icons">business_center</i>
<span i18n>Pro Settings</span>
</a>
<a
class="m-page--sidebar--navigation--item"
(click)="openReferralsModal()"
......
Please register or to comment