feat: publish use component card too

Author: peterpeterparker

studio/src/app/components/feed/card/app-feed-card-content/app-feed-card-content.scss

@@ -64,6 +64,26 @@ app-feed-card-content {
         text-overflow: ellipsis;
       }
     }
+
+    input {
+      font-size: var(--font-size-normal);
+
+      pointer-events: visible;
+
+      background: transparent;
+      color: var(--ion-color-primary);
+      border: none;
+      outline: 0;
+
+      padding-bottom: 1px;
+
+      max-width: 130px;
+      height: 40px;
+
+      &::placeholder {
+        color: var(--deckgo-inline-editor-link-placeholder-color, #3880ff);
+      }
+    }
   }
 
   @media screen and (max-width: 720px) {

studio/src/app/components/feed/card/app-feed-card-content/app-feed-card-content.tsx

@@ -1,4 +1,10 @@
-import {Component, Prop} from '@stencil/core';
+import {Component, Prop, State, Watch} from '@stencil/core';
+
+import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
+
+interface InputTargetEvent extends EventTarget {
+    value: string;
+}
 
 @Component({
     tag: 'app-feed-card-content',
@@ -7,30 +13,97 @@ import {Component, Prop} from '@stencil/core';
 })
 export class AppFeedCardContent {
 
+    @State()
+    private tags: string[] = [];
+
+    @State()
+    private tagInput: string = null;
+
     @Prop()
     firstCard: boolean = false;
 
+    @Prop()
+    editable: boolean = false;
+
+    @Prop()
+    author: string;
+
+    @Prop()
+    publication: Date;
+
+    @State()
+    private formattedPublication: string;
+
+    async componentWillLoad() {
+        await this.formatPublication();
+    }
+
+    @Watch('publication')
+    formatPublication(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            const options: DateTimeFormatOptions = {year: 'numeric', month: 'short', day: 'numeric'};
+            this.formattedPublication = new Intl.DateTimeFormat('en-US', options).format(new Date());
+
+            resolve();
+        });
+    }
+
+    private handleTagInput($event: UIEvent) {
+        const tag: string = ($event.target as InputTargetEvent).value;
+
+        if (tag && tag.trim().length > 0 && tag.charAt(tag.length - 1) === ' ' && this.tags && this.tags.indexOf(tag.trim()) === -1) {
+            this.tags = [...this.tags, tag.trim()];
+            this.tagInput = null;
+        }
+    }
+
+    private removeTag(tag: string): Promise<void> {
+        return new Promise<void>((resolve) => {
+            if (!tag) {
+                resolve();
+                return;
+            }
+
+            if (!this.tags) {
+                resolve();
+                return;
+            }
+
+            const index: number = this.tags.findIndex((actualTag: string) => {
+                return tag === actualTag
+            });
+
+            if (index >= 0) {
+                this.tags.splice(index, 1);
+                this.tags = [...this.tags];
+            }
+
+            resolve();
+        });
+    }
+
     render() {
         return <ion-card-content>
             <div class="summary">
 
                 <ion-card-header>
-                    <ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
+                    <ion-card-title class="ion-text-uppercase" contentEditable={this.editable}>Card Title
+                    </ion-card-title>
 
                     <ion-card-subtitle class="ion-text-lowercase">
-                        <div class="chips"><ion-label>Javascript&nbsp;</ion-label></div>
-                        <div class="chips"><ion-label>Typescript&nbsp;</ion-label></div>
-                        <div class="chips"><ion-label>Ionic&nbsp;</ion-label></div>
+                        {this.renderTags()}
+                        {this.renderInputTags()}
                     </ion-card-subtitle>
                 </ion-card-header>
 
-                <p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
+                <p padding-start padding-end class="content ion-text-lowercase" contentEditable={this.editable}>Keep
+                    close to Nature's heart... and break clear away, once in
                     awhile,
                     and climb a mountain or spend a week in the woods. Wash your spirit clean.
                 </p>
 
                 <p class="author" padding>
-                    <ion-label>David Dal Busco | Mars 9</ion-label>
+                    <ion-label>{this.author} | {this.formattedPublication}</ion-label>
                 </p>
             </div>
 
@@ -48,4 +121,41 @@ export class AppFeedCardContent {
         }
     }
 
+    private renderTags() {
+        if (!this.tags || this.tags.length <= 0) {
+            return undefined;
+        } else {
+            return (
+                this.tags.map((tag: string) => {
+                    return (
+                        <div class="chips">
+                            {this.renderCloseTags(tag)}
+                            <ion-label>{tag}</ion-label>
+                        </div>
+                    )
+                })
+            );
+        }
+    }
+
+    private renderCloseTags(tag: string) {
+        if (!this.editable) {
+            return undefined;
+        } else {
+            <ion-icon name="close" custom-tappable onClick={() => this.removeTag(tag)}></ion-icon>
+        }
+    }
+
+    private renderInputTags() {
+        if (!this.editable) {
+            return undefined;
+        }
+
+        if (this.tags && this.tags.length < 5) {
+            return <input autofocus placeholder="Add a tag..." value={this.tagInput}
+                          onInput={($event: UIEvent) => this.handleTagInput($event)}></input>
+        } else {
+            return undefined;
+        }
+    }
 }

studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx

@@ -1,4 +1,4 @@
-import {Component} from '@stencil/core';
+import {Component, Prop} from '@stencil/core';
 
 @Component({
     tag: 'app-feed-card',
@@ -7,10 +7,19 @@ import {Component} from '@stencil/core';
 })
 export class AppFeedCard {
 
+    @Prop()
+    editable: boolean = false;
+
+    @Prop()
+    author: string;
+
+    @Prop()
+    publication: Date;
+
     render() {
 
-        return <ion-card>
-            <app-feed-card-content></app-feed-card-content>
+        return <ion-card class={this.editable ? "ion-no-margin" : undefined}>
+            <app-feed-card-content editable={this.editable} author={this.author} publication={this.publication}></app-feed-card-content>
         </ion-card>
     }
 

studio/src/app/modals/editor/app-publish/app-publish.scss

@@ -2,38 +2,4 @@ app-publish {
   ion-content {
     --background: var(--ion-color-light);
   }
-
-  @import "../../../../global/theme/feed/feed-card";
-
-  ion-card-subtitle.tags {
-    background: white;
-
-    @media only screen and (min-height: 600px) and (min-width: 768px) {
-      flex-wrap: inherit;
-    }
-
-    min-height: 42px;
-  }
-
-  input {
-    font-size: var(--font-size-normal);
-  }
-
-  input {
-    pointer-events: visible;
-
-    background: transparent;
-    color: var(--ion-color-primary);
-    border: none;
-    outline: 0;
-
-    padding-bottom: 1px;
-
-    max-width: 130px;
-    height: 40px;
-
-    &::placeholder {
-      color: var(--deckgo-inline-editor-link-placeholder-color, #3880ff);
-    }
-  }
 }