Merge branch 'tagbox'

cwt-wa · Sep 2, 2022 · c1f2f40 · c1f2f40
2 parents 7c38f63 + c9d9c37
commit c1f2f40
Show file tree

Hide file tree

Showing 12 changed files with 1,410 additions and 361 deletions.
diff --git a/cwt-angular/config/webpack.common.js b/cwt-angular/config/webpack.common.js
@@ -38,6 +38,23 @@ module.exports = {
 
     module: {
         rules: [
+            {
+                test: /\.m?js$/,
+                include: /node_modules\/@zemke\/tagbox/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: [
+                            [
+                                '@babel/preset-env',
+                                {
+                                    targets: "defaults"
+                                }
+                            ]
+                        ]
+                    }
+                },
+            },
             {
                 test: /\.(scss)$/,
                 use: bootstrapCssExtractTextPlugin.extract({

diff --git a/cwt-angular/package.json b/cwt-angular/package.json
@@ -20,6 +20,7 @@
     "@angular/router": "^7",
     "@fortawesome/fontawesome-free": "^5.15.1",
     "@ng-bootstrap/ng-bootstrap": "4.x",
+    "@zemke/tagbox": "https://github.com/zemke/tagbox#v0.2.0",
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.7",
     "hamburgers": "^1.1.3",
@@ -33,12 +34,15 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.9",
+    "@babel/preset-env": "^7.18.9",
     "@types/jasmine": "^4.0.3",
     "@types/node": "^11.11.2",
     "@types/p5": "^0.7.3",
     "@types/resize-observer-browser": "^0.1.6",
     "@zemke/http-mock": "^4.0.2",
     "angular2-template-loader": "^0.6.2",
+    "babel-loader": "^8.2.5",
     "css-loader": "^2.1.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^3.0.1",

diff --git a/cwt-angular/src/main/webapp/app/_modules/chat.module.ts b/cwt-angular/src/main/webapp/app/_modules/chat.module.ts
@@ -1,4 +1,4 @@
-import {NgModule} from "@angular/core";
+import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
 import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {FormsModule} from "@angular/forms";
 import {CommonModule} from "@angular/common";
@@ -26,6 +26,7 @@ import {RouterModule} from "@angular/router";
     providers: [],
     bootstrap: [],
     entryComponents: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class ChatModule {
 }
diff --git a/cwt-angular/src/main/webapp/app/custom.d.ts b/cwt-angular/src/main/webapp/app/custom.d.ts
@@ -469,3 +469,8 @@ export interface MapDto {
     texture: string;
     game: GameMinimalDto;
 }
+
+export interface ZemkeTagboxElement extends HTMLElement {
+    zemkeInput: HTMLInputElement;
+}
+
diff --git a/cwt-angular/src/main/webapp/app/message/chat-input.component.html b/cwt-angular/src/main/webapp/app/message/chat-input.component.html
@@ -1,42 +1,24 @@
-<div *ngIf="message" class="chat-container">
-    <form (submit)="submit()">
-        <div class="input-group">
-            <input type="text" name="chat-input" class="single-line form-control"
-                   #chatInput [disabled]="disabled"
-                   autocomplete="off"
-                   (keydown)="onKeydown($event)"
-                   (keyup)="onKeyup($event)"
-                   (input)="onInput($event)">
-            <span class="input-group-append">
-                <button class="btn btn-primary submit" type="submit" [disabled]="disabled">
-                    <i class="fa fa-send"></i>
-                </button>
-            </span>
-        </div>
-    </form>
-    <div #offsets class="offsets">
-        <div *ngFor="let tag of tags"
-             #recipients
-             class="offset"
-             [ngStyle]="tag.style"
-             [attr.data-id]="tag.user.id"
-             [attr.data-username]="tag.user.username">
-        </div>
+<form #chatForm="ngForm" (submit)="submit(chatForm.valid)">
+    <div class="input-group">
+        <zemke-tagbox #tagbox ci>
+            <input #valueEl
+                   (input)="lazyLoad($event)"
+                   type="text"
+                   name="value"
+                   [(ngModel)]="value"
+                   required>
+            <select multiple name="recipients" [(ngModel)]="recipients">
+                <option *ngFor="let opt of suggestions"
+                        [value]="opt.id">
+                    {{ opt.username }}
+                </option>
+            </select>
+        </zemke-tagbox>
+        <span class="input-group-append">
+            <button class="btn btn-primary submit" type="submit" [disabled]="disabled">
+                <i class="fa fa-send"></i>
+            </button>
+        </span>
     </div>
-    <div #dummy class="dummy d-inline"></div>
-    <div class="dropdown-menu suggestions p-0 overflow-hidden"
-         #dropdown [class.show]="suggestions">
-        <small class="form-text text-muted mx-2"
-               *ngIf="!suggestions?.length && !lazyLoadingSuggestions">No such user.</small>
-        <button *ngFor="let sugg of suggestions; let first = first;"
-                #suggestions
-                class="dropdown-item px-2" [class.active]="first"
-                type="button" [value]="sugg.id" (click)="complete(sugg, true)">
-            {{ sugg.username }}
-        </button>
-        <img *ngIf="lazyLoadingSuggestions && suggestions?.length < suggestionsSlice"
-             class="mx-2"
-             src="../../img/loading.gif"/>
-    </div>
-</div>
+</form>