Fixed query builder stuff

nise-backend/src/main/kotlin/com/nisemoe/nise/search/SearchSchemaController.kt

@@ -36,6 +36,7 @@ class SearchSchemaController(
             InternalSchemaField("user_count_miss", "Misses", Category.user, Type.number, false, "missed hits"), // TODO: Why no miss count?
 
             // Score fields
+            InternalSchemaField("is_banned", "Banned", Category.score, Type.boolean, false, "has to score been deleted?", databaseField = SCORES.IS_BANNED),
             InternalSchemaField("id", "ID", Category.score, Type.number, false, "unique identifier for a score", databaseField = SCORES.ID),
             InternalSchemaField("beatmap_id", "Beatmap ID", Category.score, Type.number, false, "identifies the beatmap", databaseField = SCORES.BEATMAP_ID),
             InternalSchemaField("count_300", "300s", Category.score, Type.number, false, "number of 300 hits in score", databaseField = SCORES.COUNT_300),

nise-frontend/src/app/search/search.component.html

@@ -48,13 +48,13 @@
           </optgroup>
         </ng-container>
       </select>
-      <label>
+      <label style="margin-left: 8px">
         <input type="radio" name="sortingOrder" [(ngModel)]="this.sortingOrder.order" value="ASC" />
-        ASC
+        ↑ ASC
       </label>
       <label>
         <input type="radio" name="sortingOrder" [(ngModel)]="this.sortingOrder.order" value="DESC" />
-        DESC
+        ↓ DESC
       </label>
     </fieldset>
 

nise-frontend/src/app/search/search.component.ts

@@ -73,6 +73,8 @@ export class SearchComponent implements OnInit {
               private title: Title,
               public downloadFilesService: DownloadFilesService) { }
 
+  currentSchemaVersion = 2
+
   isError = false;
   isLoading = false;
   isLoadingSchema = true;
@@ -129,18 +131,18 @@ export class SearchComponent implements OnInit {
     }
   }
 
-  private loadPreviousFromLocalStorage() {
+  private loadPreviousFromLocalStorage(): void {
     const storedQueries = localStorage.getItem('search_settings');
-    if (storedQueries) {
-      let queries1 = JSON.parse(storedQueries);
-      this.queries = queries1.queries;
-      this.sortingOrder = queries1.sortingOrder;
+    let parsedQueries = storedQueries ? JSON.parse(storedQueries) : null;
+
+    if (parsedQueries && this.verifySchema(parsedQueries)) {
+      this.queries = parsedQueries.queries;
+      this.sortingOrder = parsedQueries.sortingOrder;
       this.fields.forEach(field => {
-        if (queries1.columns.hasOwnProperty(field.name)) {
-          field.active = queries1.columns[field.name];
-        }
+        field.active = parsedQueries.columns[field.name] ?? field.active;
       });
     } else {
+      localStorage.removeItem('search_settings');
       this.queries = [];
       this.sortingOrder = {
         field: 'user_id',
@@ -171,7 +173,8 @@ export class SearchComponent implements OnInit {
     return {
       queries: this.queries,
       sortingOrder: this.sortingOrder,
-      columns: this.getColumnSettings()
+      columns: this.getColumnSettings(),
+      schemaVersion: this.currentSchemaVersion
     };
   }
 
@@ -201,6 +204,8 @@ export class SearchComponent implements OnInit {
           field.active = json.columns[field.name];
         }
       });
+    } else {
+      alert('Invalid settings file.');
     }
   }
 
@@ -225,7 +230,9 @@ export class SearchComponent implements OnInit {
   }
 
   verifySchema(json: any): boolean {
-    // TODO: Implement schema verification logic here
+    if(!('schemaVersion' in json) || json.schemaVersion < this.currentSchemaVersion) {
+      return false;
+    }
     return 'queries' in json && 'sortingOrder' in json && 'columns' in json;
   }
 

nise-frontend/src/corelib/components/query-builder/query-builder.component.html

@@ -1,5 +1,5 @@
 <fieldset>
-  <legend>Query Builder</legend>
+  <legend>Query builder</legend>
   <button (click)="addQuery()">+ Predicate</button>
   <div *ngFor="let query of queries; let i = index">
     <app-query [query]="query" [fields]="fields" (removeQuery)="removeQuery(i)" (queryChanged)="queryChanged()"></app-query>

nise-frontend/src/corelib/components/query/query.component.css

@@ -3,14 +3,6 @@
   margin-bottom: 10px;
 }
 
-.logical-operator-toggle button {
-  /* your styles for the logical operator buttons */
-}
-
-.logical-operator-toggle button.active {
-  /* your styles for the active state */
-}
-
 .predicate {
   display: flex;
   align-items: center;
@@ -20,7 +12,3 @@
 .predicate select, .predicate input, .predicate button {
   margin-right: 5px;
 }
-
-.predicate button {
-  /* style it to look more like a close button */
-}

nise-frontend/src/corelib/components/query/query.component.html

@@ -1,20 +1,27 @@
-<fieldset class="query">
-  <legend>Predicate <button (click)="removeQuery.emit()">Delete</button></legend>
+<fieldset class="query mt-2">
+  <legend>
+    <span>
+      <label>
+        <input type="radio" name="logicalOperator-{{ queryId }}" [(ngModel)]="query.logicalOperator" value="AND" (change)="this.queryChanged.emit()"/>
+        AND
+      </label>
+      <label>
+        <input type="radio" name="logicalOperator-{{ queryId }}" [(ngModel)]="query.logicalOperator" value="OR" (change)="this.queryChanged.emit()"/>
+        OR
+      </label>
+    </span>
+    <button (click)="removeQuery.emit()" style="margin-left: 5px">Remove</button>
+  </legend>
 
-  <div class="logical-operator-toggle">
-    <label>
-      <input type="radio" name="logicalOperator-{{ queryId }}" [(ngModel)]="query.logicalOperator" value="AND" (change)="this.queryChanged.emit()"/>
-      AND
-    </label>
-    <label>
-      <input type="radio" name="logicalOperator-{{ queryId }}" [(ngModel)]="query.logicalOperator" value="OR" (change)="this.queryChanged.emit()"/>
-      OR
-    </label>
+  <div class="mb-2">
+    <button (click)="addPredicate()" style="margin-top: 5px">+ Rule</button>
+    <button (click)="addSubQuery()">+ Sub-Predicate</button>
   </div>
 
   <div *ngFor="let predicate of query.predicates; let i = index">
 
-    <select style="max-width: 40%">
+    <select style="max-width: 60%">
+      <option value="" disabled selected>---</option>
       <ng-container *ngFor="let category of ['user', 'beatmap', 'score', 'metrics']">
         <optgroup label="{{ category }}">
           <ng-container *ngFor="let field of fields">
@@ -28,7 +35,6 @@
       </ng-container>
     </select>
 
-
     <select [disabled]="!predicate.field">
       <option *ngFor="let operator of predicate.field?.validOperators"
               [selected]="operator.operatorType === predicate.operator?.operatorType"
@@ -333,10 +339,9 @@
     <button (click)="removePredicate(i)">X</button>
 
   </div>
-  <button (click)="addPredicate()" style="margin-top: 5px">+ Rule</button>
 
   <div *ngFor="let childQuery of query.childQueries; let i = index">
     <app-query [query]="childQuery" [fields]="fields" (removeQuery)="removeSubQuery(i)" (queryChanged)="queryChanged.emit()"></app-query>
   </div>
-  <button (click)="addSubQuery()">+ Sub-Predicate</button>
+
 </fieldset>