Add ability to fully edit a source (#90)

derme302 · web-flow · commit 01087c6c6139 · 2026-02-27T19:24:39.000+11:00
* Add new component

* Replaced alert editor with full-screen modal

* Error checking

* Improve UI for editing source and pollingFrequency

* Display fixes

* Version bump

* url macro
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -7,8 +7,8 @@ android {
         applicationId "com.frostcube.justrss"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 34
-        versionName "3.4.1"
+        versionCode 35
+        versionName "3.5.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
diff --git a/ios/App/App.xcodeproj/project.pbxproj b/ios/App/App.xcodeproj/project.pbxproj
@@ -353,7 +353,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.productivity";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 3.4.1;
+				MARKETING_VERSION = 3.5.0;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = com.frostcube.justrss;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -376,7 +376,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.productivity";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 3.4.1;
+				MARKETING_VERSION = 3.5.0;
 				PRODUCT_BUNDLE_IDENTIFIER = com.frostcube.justrss;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "just-rss",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "author": "FrostCube",
   "homepage": "https://frostcube.com/",
   "scripts": {
diff --git a/src/app/lib/macros.ts b/src/app/lib/macros.ts
@@ -0,0 +1,2 @@
+// AngularJS URL Validation
+export const URL_REGEX = /^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:\/[\w#!:.?+=&%@\-/]*)?$/;
diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts
@@ -27,7 +27,7 @@ export class SettingsService {
     compressedFeed: false,
     locale: 'en-AU',
     retrievalTimeout: 5000, // 5 seconds
-    defaultPollingFrequency: 0, // Unlimited
+    defaultPollingFrequency: 60, // 1 minute
     maxFeedLength: 10,
     mutedWords: [],
     highlightedWords: []
diff --git a/src/app/services/sources.service.ts b/src/app/services/sources.service.ts
@@ -99,7 +99,14 @@ export class SourcesService {
   public setSource(feedUrl: string, updatedDict: IFeedDict) {
     const index = this._feedList.findIndex(feed => feed.url === feedUrl);
     console.log('[SourcesService] Updating feed: ' + feedUrl);
-    this._feedList[index] = updatedDict;
+    if (index > -1) {
+      this._feedList[index] = updatedDict;
+      // Persist the updated feed list
+      this.storageService.set(STORAGE_FEED_LIST, this._feedList);
+    } else {
+      console.warn('[SourcesService] setSource: feed not found, adding as new feed: ' + feedUrl);
+      this.addSource(updatedDict);
+    }
   }
 
   public getSource(feedUrl: string): IFeedDict {
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
@@ -43,8 +43,8 @@ <h1>Preferences</h1>
     <ion-item>
       <ion-select label="Default Polling Frequency"
       [(ngModel)]="defaultPollingFrequency" (ionChange)="update()">
-        <ion-select-option value="0">Unlimited (Default)</ion-select-option>
-        <ion-select-option value="60">1 minute</ion-select-option>
+        <ion-select-option value="0">Unlimited</ion-select-option>
+        <ion-select-option value="60">1 minute (Default)</ion-select-option>
         <ion-select-option value="600">10 minutes</ion-select-option>
         <ion-select-option value="3600">1 hour</ion-select-option>
       </ion-select>
diff --git a/src/app/source-edit/source-edit.component.html b/src/app/source-edit/source-edit.component.html
@@ -0,0 +1,52 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="cancel()">Cancel</ion-button>
+    </ion-buttons>
+    <ion-title>Edit Source</ion-title>
+    <ion-buttons slot="end">
+      <ion-button color="primary" (click)="save()" [disabled]="form.invalid">Save</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <form [formGroup]="form">
+    <ion-item>
+      <ion-label position="stacked">Title</ion-label>
+      <ion-input formControlName="title" type="text"></ion-input>
+    </ion-item>
+    <div *ngIf="form.get('title')?.touched && form.get('title')?.invalid" class="ion-padding-start ion-text-danger">Title is required.</div>
+
+    <ion-item>
+      <ion-label position="stacked">URL</ion-label>
+      <ion-input formControlName="url" type="url" inputmode="url"></ion-input>
+    </ion-item>
+    <div *ngIf="form.get('url')?.touched && form.get('url')?.invalid" class="ion-padding-start ion-text-danger">Please enter a valid URL.</div>
+
+    <ion-item>
+      <ion-label position="stacked">Description</ion-label>
+      <ion-textarea formControlName="description"></ion-textarea>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="stacked">Polling Frequency (seconds)</ion-label>
+        <ion-select formControlName="pollingFrequency">
+          <ion-select-option [value]="0">Unlimited</ion-select-option>
+          <ion-select-option [value]="60">1 minute (Default)</ion-select-option>
+          <ion-select-option [value]="600">10 minutes</ion-select-option>
+          <ion-select-option [value]="3600">1 hour</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Podcast</ion-label>
+      <ion-toggle slot="end" formControlName="podcast"></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="stacked">Tags (comma-separated)</ion-label>
+      <ion-input formControlName="tags" type="text"></ion-input>
+    </ion-item>
+  </form>
+</ion-content>
diff --git a/src/app/source-edit/source-edit.component.scss b/src/app/source-edit/source-edit.component.scss
diff --git a/src/app/source-edit/source-edit.component.spec.ts b/src/app/source-edit/source-edit.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { SourceEditComponent } from './source-edit.component';
+
+describe('SourceEditComponent', () => {
+  let component: SourceEditComponent;
+  let fixture: ComponentFixture<SourceEditComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SourceEditComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SourceEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/source-edit/source-edit.component.ts b/src/app/source-edit/source-edit.component.ts
@@ -0,0 +1,109 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import {
+  ModalController,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonTextarea,
+  IonToggle,
+  IonSelect,
+  IonSelectOption
+} from '@ionic/angular/standalone';
+import { IFeedDict, SourcesService } from '../services/sources.service';
+import { URL_REGEX } from '../lib/macros';
+
+
+@Component({
+  selector: 'app-source-edit',
+  templateUrl: './source-edit.component.html',
+  styleUrls: ['./source-edit.component.scss'],
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonItem,
+    IonLabel,
+    IonInput,
+    IonTextarea,
+    IonToggle,
+    IonSelect,
+    IonSelectOption
+  ]
+})
+export class SourceEditComponent implements OnInit {
+  @Input() feed!: IFeedDict;
+
+  public form: FormGroup;
+
+  constructor(private fb: FormBuilder, private modalController: ModalController,
+              private sourcesService: SourcesService) {
+    this.form = this.fb.group({
+      title: ['', Validators.required],
+      url: ['', [Validators.required, Validators.pattern(URL_REGEX)]],
+      description: [''],
+      pollingFrequency: [0, [Validators.min(0), Validators.max(86400)]],
+      podcast: [false],
+      tags: ['']
+    });
+  }
+
+  ngOnInit() {
+    if (this.feed) {
+      this.form.patchValue({
+        title: this.feed.title ?? '',
+        url: this.feed.url ?? '',
+        description: this.feed.description ?? '',
+        pollingFrequency: this.feed.pollingFrequency ?? 60,
+        podcast: this.feed.podcast ?? false,
+        tags: (this.feed.tags ?? []).join(', ')
+      });
+    }
+  }
+
+  public async save() {
+    if (this.form.invalid) return;
+
+    const values = this.form.value;
+
+    // Check for duplicate URL (different source with same URL)
+    const existing = this.sourcesService.getSources().find(s => s.url === values.url);
+    if (existing && existing.url !== this.feed.url) {
+      await this.sourcesService.presentErrorToast('Feed already exists!');
+      return;
+    }
+
+    const parsedTags = (values.tags || '').split(',').map((t: string) => t.trim()).filter((t: string) => t.length > 0);
+
+    const updatedFeed: IFeedDict = {
+      url: values.url,
+      title: values.title,
+      iconUrl: this.feed.iconUrl,
+      description: values.description,
+      lastPublished: this.feed.lastPublished,
+      lastRetrieved: this.feed.lastRetrieved,
+      pollingFrequency: Number(values.pollingFrequency),
+      healthy: this.feed.healthy,
+      podcast: Boolean(values.podcast),
+      tags: parsedTags
+    };
+
+    await this.modalController.dismiss({ updatedFeed }, 'save');
+  }
+
+  public async cancel() {
+    await this.modalController.dismiss(null, 'cancel');
+  }
+
+}
diff --git a/src/app/sources/sources.page.html b/src/app/sources/sources.page.html
@@ -47,7 +47,7 @@
   <ion-list>
     @for (source of sourcesService.getSources(); track source.url) {
       <ion-item-sliding>
-        <ion-item>
+        <ion-item (click)="editUrl(source)">
           <ion-label>
             <strong>{{source.title}}</strong>
             <br />
@@ -63,11 +63,8 @@
           }
         </ion-item>
         <ion-item-options side="end">
-          <ion-item-option color="secondary">
-            <ion-icon slot="icon-only" name="create" (click)="editUrl(source)"></ion-icon>
-          </ion-item-option>
           <ion-item-option color="danger">
-            <ion-icon slot="icon-only" name="trash" (click)="sourcesService.removeSource(source.url)"></ion-icon>
+            <ion-icon slot="icon-only" name="trash" (click)="$event.stopPropagation(); sourcesService.removeSource(source.url)"></ion-icon>
           </ion-item-option>
         </ion-item-options>
       </ion-item-sliding>
diff --git a/src/app/sources/sources.page.ts b/src/app/sources/sources.page.ts
@@ -22,10 +22,11 @@ import { addIcons } from 'ionicons';
 import { create, trash, checkmarkCircleOutline, closeCircleOutline, swapVerticalOutline } from 'ionicons/icons';
 import { IFeedDict, SourcesService } from '../services/sources.service';
 import { PlatformService } from '../services/platform.service';
+import { SourceEditComponent } from '../source-edit/source-edit.component';
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
+import { URL_REGEX } from '../lib/macros';
+
 
-// AngularJS URL Validation
-const URL_REGEX = /^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:\/[\w#!:.?+=&%@\-/]*)?$/;
 @Component({
   selector: 'app-sources',
   templateUrl: 'sources.page.html',
@@ -38,6 +39,7 @@ const URL_REGEX = /^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?
 export class SourcesPage {
   inputUrl: string = '';
   public rssForm: FormGroup;
+  private editModalOpen = false;
 
   constructor(
     public sourcesService: SourcesService,
@@ -70,51 +72,34 @@ export class SourcesPage {
   }
 
   async editUrl(feed: IFeedDict) {
-    const temp_feed = feed;
+    if (this.editModalOpen) return;
+    this.editModalOpen = true;
 
-    const alert = await this.alertController.create({
-      header: 'Edit Source',
-      inputs: [
-        {
-          name: 'title',
-          value: feed.title
-        },
-        {
-          name: 'url',
-          value: feed.url
-        },
-        {
-          name: 'description',
-          value: feed.description,
-          type: 'textarea',
-          placeholder: 'What is this feed about?'
-        },
-        {
-          name: 'polling',
-          value: feed.pollingFrequency,
-          type: 'number',
-          placeholder: 'Polling Frequency (Seconds)',
-          min: 0,
-          max: 86400
-        }
-      ],
-      buttons: ['Save'],
+    const modal = await this.modalController.create({
+      component: SourceEditComponent,
+      componentProps: { feed },
+      breakpoints: [1.0],
+      initialBreakpoint: 1.0,
+      backdropDismiss: false
     });
+    try {
+      await modal.present();
 
-    await alert.present();
-
-    await alert.onDidDismiss().then((data) => {
-      if (data.data !== undefined) {
-        temp_feed.title = data.data.values.title;
-        temp_feed.url = data.data.values.url;
-        temp_feed.description = data.data.values.description;
-        temp_feed.pollingFrequency = data.data.values.polling;
-
-        // Update stored Dictionary
-        this.sourcesService.removeSource(feed.url);
-        this.sourcesService.addSource(temp_feed);
+      const { data } = await modal.onDidDismiss();
+      if (data && data.updatedFeed) {
+        const updated: IFeedDict = data.updatedFeed;
+        if (updated.url === feed.url) {
+          // Same URL: update in-place
+          this.sourcesService.setSource(feed.url, updated);
+        } else {
+          // URL changed: remove old and add new
+          this.sourcesService.removeSource(feed.url);
+          this.sourcesService.addSource(updated);
+        }
       }
-    });
+    } finally {
+      this.editModalOpen = false;
+    }
   }
 
   reorderSources() {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "just-rss",`
`3`		`- "version": "3.4.1",`
	`3`	`+ "version": "3.5.0",`
`4`	`4`	`"author": "FrostCube",`
`5`	`5`	`"homepage": "https://frostcube.com/",`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// AngularJS URL Validation`
	`2`	`+export const URL_REGEX = /^[A-Za-z][A-Za-z\d.+-]:\/(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:\/[\w#!:.?+=&%@\-/]*)?$/;`