@taon-dev/cms 21.0.24 → 21.0.25

package/ts-source/websql-code-prod/taon-posts/taon-cms-post/taon-cms-post.component.html

@@ -186,8 +186,45 @@
             animationDuration="0ms">
             <mat-tab [label]="t.gettext('Editor')">
               @if (contentEditor(); as editor) {
+                <ng-template #customMenu>
+                  <button
+                    type="button"
+                    class="NgxEditor__MenuItem"
+                    title="Table"
+                    aria-label="Table actions"
+                    [disabled]="busy() || dialogOpen()"
+                    [matMenuTriggerFor]="tableMenu"
+                    [matMenuTriggerRestoreFocus]="false"
+                    (mousedown)="$event.preventDefault()">
+                    <mat-icon>table_chart</mat-icon>
+                  </button>
+
+                  <mat-menu #tableMenu="matMenu">
+                    <button
+                      mat-menu-item
+                      type="button"
+                      (click)="insertTable($event)">
+                      <mat-icon>add</mat-icon>
+                      <span>Insert table</span>
+                    </button>
+
+                    <mat-divider />
+
+                    @for (item of tableCommands; track item.label) {
+                      <button
+                        mat-menu-item
+                        type="button"
+                        [disabled]="!canRunTableCommand(item.command)"
+                        (click)="runTableCommand($event, item.command)">
+                        {{ item.label }}
+                      </button>
+                    }
+                  </mat-menu>
+                </ng-template>
+
                 <ngx-editor-menu
                   [editor]="editor"
+                  [customMenuRef]="customMenu"
                   [toolbar]="contentToolbar"
                   [disabled]="busy() || dialogOpen()" />
                 <ngx-editor
@@ -285,6 +322,131 @@
       </mat-tab>
       <mat-tab [label]="t.gettext('SETTINGS')">
         <div class="post-settings">
+          <mat-card class="post-setting-card">
+            <section
+              class="related-child-files"
+              aria-labelledby="related-child-files-heading">
+              <h2 id="related-child-files-heading">
+                {{ t.gettext('Create related children from files') }}
+              </h2>
+              @if (!currentPost()) {
+                <p role="note">
+                  {{
+                    t.gettext(
+                      'Please save the post before creating children.'
+                    )
+                  }}
+                </p>
+              }
+              <mat-form-field appearance="outline">
+                <mat-label>{{ t.gettext('Child title prefix') }}</mat-label>
+                <input
+                  matInput
+                  [value]="childTitlePrefix()"
+                  [disabled]="!currentPost() || busy() || dialogOpen()"
+                  (input)="updateChildTitlePrefix($event)" />
+              </mat-form-field>
+              <input
+                #relatedChildFilesInput
+                hidden
+                type="file"
+                multiple
+                [disabled]="!currentPost() || busy() || dialogOpen()"
+                (change)="relatedChildFilesSelected($event)" />
+              <button
+                mat-button
+                type="button"
+                [disabled]="!currentPost() || busy() || dialogOpen()"
+                (click)="relatedChildFilesInput.click()">
+                <mat-icon>add</mat-icon>
+                {{ t.gettext('Choose files') }}
+              </button>
+              @if (childBatchError()) {
+                <p
+                  class="error"
+                  role="alert">
+                  {{ childBatchError() }}
+                </p>
+              }
+              @if (childFiles().length) {
+                <div class="related-child-progress">
+                  <mat-progress-bar
+                    mode="determinate"
+                    [value]="childOverallProgress()"
+                    [attr.aria-label]="
+                      t.gettext('Overall child creation progress')
+                    " />
+                  <span>
+                    {{ childOverallProgress() }}%
+                    {{ t.gettext('overall progress') }}
+                  </span>
+                </div>
+                <ul>
+                  @for (file of childFiles(); track file.id; let index =
+                  $index) {
+                    <li>
+                      <div class="related-child-file">
+                        <div class="related-child-file-heading">
+                          <span>{{ file.file.name }}</span>
+                          <span>{{ childTitlePreviews()[index] }}</span>
+                        </div>
+                        <div class="related-child-file-progress">
+                          <mat-progress-bar
+                            mode="determinate"
+                            [value]="file.progress"
+                            [attr.aria-label]="
+                              t.gettext('Progress for [[ fileName ]]', {
+                                fileName: file.file.name,
+                              })
+                            " />
+                          <span>{{ file.progress }}%</span>
+                        </div>
+                        @if (file.status === 'processing') {
+                          <p role="status">{{ t.gettext('Processing...') }}</p>
+                        } @else if (file.status === 'success') {
+                          <p role="status">{{ t.gettext('Child created.') }}</p>
+                          @if (file.error) {
+                            <p
+                              class="error"
+                              role="alert">
+                              {{ file.error }}
+                            </p>
+                          }
+                        } @else if (file.status === 'error') {
+                          <p
+                            class="error"
+                            role="alert">
+                            {{ file.error }}
+                          </p>
+                        } @else {
+                          <p>{{ t.gettext('Waiting to upload.') }}</p>
+                        }
+                      </div>
+                      <button
+                        mat-icon-button
+                        type="button"
+                        [attr.aria-label]="
+                          t.gettext('Remove file [[ fileName ]]', {
+                            fileName: file.file.name,
+                          })
+                        "
+                        [disabled]="!currentPost() || busy() || dialogOpen()"
+                        (click)="removeRelatedChildFile(file.id)">
+                        <mat-icon>close</mat-icon>
+                      </button>
+                    </li>
+                  }
+                </ul>
+              }
+              <button
+                mat-flat-button
+                type="button"
+                [disabled]="!canUploadRelatedChildren()"
+                (click)="uploadAndCreateChildren()">
+                {{ t.gettext('Upload and Create Children') }}
+              </button>
+            </section>
+          </mat-card>
           @if (mediaAttachment(); as media) {
             <mat-card class="post-setting-card">
               <section
@@ -547,6 +709,7 @@
                 </p>
               } @else if (parentPost(); as parent) {
                 <p>
+                  <taon-cms-post-thumbnail [post]="parent" />
                   <a
                     href="#"
                     (click)="requestPostEditor($event, parent)">
@@ -605,10 +768,27 @@
                   {{ t.gettext('Try again') }}
                 </button>
               } @else {
-                <ul>
+                <ul
+                  cdkDropList
+                  [cdkDropListData]="relatedPosts()"
+                  [cdkDropListDisabled]="busy() || dialogOpen()"
+                  (cdkDropListDropped)="reorderRelatedPosts($event)">
                   @for (post of relatedPosts(); track post.id) {
-                    <li>
-                      <span>
+                    <li cdkDrag [cdkDragData]="post">
+                      <button
+                        mat-icon-button
+                        cdkDragHandle
+                        type="button"
+                        [disabled]="busy() || dialogOpen()"
+                        [attr.aria-label]="
+                          t.gettext('Reorder related post [[ title ]]', {
+                            title: post.title,
+                          })
+                        ">
+                        <mat-icon>drag_indicator</mat-icon>
+                      </button>
+                      <taon-cms-post-thumbnail [post]="post" />
+                      <span class="related-post-title">
                         #{{ post.id }} -
                         <a
                           href="#"
@@ -684,6 +864,7 @@
                 <h3>{{ t.gettext('Public post version') }}</h3>
                 @if (postVersionLinks().publicVersionPost; as versionPost) {
                   <p>
+                    <taon-cms-post-thumbnail [post]="versionPost" />
                     <a
                       href="#"
                       (click)="requestPostEditor($event, versionPost)">
@@ -749,6 +930,7 @@
                 <h3>{{ t.gettext('Private post version') }}</h3>
                 @if (postVersionLinks().privateVersionPost; as versionPost) {
                   <p>
+                    <taon-cms-post-thumbnail [post]="versionPost" />
                     <a
                       href="#"
                       (click)="requestPostEditor($event, versionPost)">
@@ -1096,7 +1278,9 @@
       }
     }
     @if (mode() === 'view-clean') {
-      <taon-cms-comments [contentId]="post.id" class="w-full" />
+      <taon-cms-comments
+        [contentId]="post.id"
+        class="w-full" />
     }
   } @else {
     <p role="status">{{ t.gettext('No post is loaded.') }}</p>

package/ts-source/websql-code-prod/taon-posts/taon-cms-post/taon-cms-post.component.scss

@@ -13,6 +13,32 @@
   display: block;
 }
 
+:host ::ng-deep .NgxEditor .ProseMirror {
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 12px 0;
+  }
+
+  td,
+  th {
+    position: relative;
+    min-width: 60px;
+    border: 1px solid #aaa;
+    padding: 8px;
+    vertical-align: top;
+
+    > p {
+      margin: 0;
+    }
+  }
+
+  .selectedCell {
+    background: rgba(63, 81, 181, 0.12);
+  }
+}
+
 mat-expansion-panel {
   border-radius: 0px !important;
 }
@@ -197,12 +223,19 @@ ngx-editor {
 }
 
 .related-posts,
+.related-child-files,
 .post-permissions {
   ul {
     padding: 0;
     list-style: none;
   }
 
+  mat-form-field {
+    display: block;
+    width: min(100%, 28rem);
+    margin-top: 0.75rem;
+  }
+
   .application-hook {
     display: grid;
     align-items: start;
@@ -221,6 +254,61 @@ ngx-editor {
   }
 }
 
+.related-child-files {
+  margin-top: 1.5rem;
+  font-size: 0.875rem;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid #8883;
+  }
+}
+
+.related-post-title {
+  flex: 1;
+}
+
+[cdkDragHandle] {
+  cursor: grab;
+}
+
+.related-child-file {
+  flex: 1;
+  min-width: 0;
+}
+
+.related-child-file-heading,
+.related-child-file-progress,
+.related-child-progress {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.related-child-file-heading {
+  justify-content: space-between;
+  overflow-wrap: anywhere;
+}
+
+.related-child-file-progress {
+  margin-top: 0.5rem;
+
+  mat-progress-bar {
+    flex: 1;
+  }
+}
+
+.related-child-progress {
+  margin: 0.75rem 0;
+
+  mat-progress-bar {
+    flex: 1;
+  }
+}
+
 .post-version-link {
   margin-top: 1rem;
   padding-top: 0.75rem;