Style post comments, move username to the start of the comment

pradoslaw · Jul 31, 2024 · f22766a · f22766a
1 parent 06162a6
commit f22766a
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 8 deletions.
diff --git a/app/Http/Composers/InitialStateComposer.php b/app/Http/Composers/InitialStateComposer.php
@@ -38,7 +38,7 @@ private function initialState(): array
                 ],
             ],
             $this->registerUserModel(),
-            $this->registerFollowers()
+            $this->registerFollowers(),
         );
     }
 
@@ -63,6 +63,7 @@ private function registerUserModel(): array
         if (empty($this->request->user())) {
             return [];
         }
+        /** @var User $user */
         $user = $this->request->user();
         return [
             'user' => [
@@ -75,6 +76,7 @@ private function registerUserModel(): array
                 'created_at'           => $user->created_at->toIso8601String(),
                 'photo'                => (string)$user->photo->url(),
                 'is_sponsor'           => $user->is_sponsor,
+                'postCommentStyle'     => $user->guest->settings['postCommentStyle'] ?? 'legacy',
             ],
         ];
     }

diff --git a/app/Http/Controllers/Adm/UsersController.php b/app/Http/Controllers/Adm/UsersController.php
@@ -74,8 +74,9 @@ public function edit(User $user): View
         $this->breadcrumb->push("@$user->name", route('adm.users.show', [$user->id]));
         $this->breadcrumb->push('Ustawienia konta', route('adm.users.save', [$user->id]));
         return $this->view('adm.users.save', [
-            'user' => $user,
-            'form' => $this->getForm($user),
+            'user'         => $user,
+            'form'         => $this->getForm($user),
+            'userSettings' => \json_encode($user->guest?->settings, \JSON_PRETTY_PRINT),
         ]);
     }
 
@@ -98,6 +99,12 @@ public function save(User $user): RedirectResponse
             $user->groups()->sync((array)$data['groups']);
             stream(Update::class, new Person($user));
             event($user->deleted_at ? new UserDeleted($user) : new UserSaved($user));
+
+            if ($this->request->has('local-settings-action')) {
+                $modern = $this->request->get('local-settings-action') === 'post-comments-modern';
+                $user->guest->setSetting('postCommentStyle', $modern ? 'modern' : 'legacy');
+                $user->guest->save();
+            }
         });
 
         return back()->with('success', 'Zmiany zostały poprawie zapisane');

diff --git a/app/Models/User.php b/app/Models/User.php
@@ -14,6 +14,7 @@
 use Illuminate\Contracts\Auth\Authenticatable as AuthenticatableContract;
 use Illuminate\Contracts\Auth\CanResetPassword as CanResetPasswordContract;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\HasManyThrough;
@@ -81,6 +82,7 @@
  * @property User[] $followers
  * @property Tag[] $skills
  * @property string|null $gdpr
+ * @property Guest|null $guest
  */
 class User extends Model implements AuthenticatableContract, AuthorizableContract, CanResetPasswordContract
 {
@@ -188,6 +190,11 @@ public function actkey(): HasMany
         return $this->hasMany(Actkey::class);
     }
 
+    public function guest(): BelongsTo
+    {
+        return $this->belongsTo(Guest::class);
+    }
+
     public function skills(): MorphToMany
     {
         return $this->morphToMany(Tag::class, 'resource', 'tag_resources')

diff --git a/resources/js/components/forum/comment.vue b/resources/js/components/forum/comment.vue
@@ -2,8 +2,30 @@
   <div :id="anchor" :class="{'highlight-flash': highlight, 'not-read': comment.is_read === false}" class="post-comment">
     <vue-flag v-for="flag in flags" :key="flag.id" :flag.sync="flag"></vue-flag>
 
-    <template v-if="!comment.is_editing">
-      <span v-html="comment.html"></span> &mdash;
+    <template v-if="!comment.is_editing && user.postCommentStyle === 'modern'">
+      <div>
+        <vue-username :user="comment.user" :owner="comment.user.id === topic.owner_id"></vue-username>
+        <a :href="comment.url">
+          <vue-timeago :datetime="comment.created_at" class="text-muted small"></vue-timeago>
+        </a>
+        <a v-if="comment.editable" @click="edit" href="javascript:" title="Edytuj ten komentarz" class="btn-comment">
+          <i class="fas fa-pencil"></i>
+        </a>
+        <a v-if="comment.editable" @click="deleteComment" href="javascript:" title="Usuń ten komentarz" class="btn-comment">
+          <i class="fas fa-trash-can"></i>
+        </a>
+        <a v-if="comment.editable" @click="migrate" href="javascript:" title="Zamień w post" class="btn-comment">
+          <i class="fas fa-compress"></i>
+        </a>
+        <a :data-metadata="comment.metadata" :data-url="comment.url" title="Zgłoś ten komentarz" href="javascript:" class="btn-comment">
+          <i class="fas fa-flag"></i>
+        </a>
+      </div>
+      <span v-html="comment.html" class="comment-text"></span>
+    </template>
+
+    <template v-if="!comment.is_editing && user.postCommentStyle === 'legacy'">
+      <span v-html="comment.html" class="comment-text legacy"></span> &mdash;
 
       <vue-username :user="comment.user" :owner="comment.user.id === topic.owner_id"></vue-username>
 
@@ -41,7 +63,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import {mixin as clickaway} from "vue-clickaway";
-import {mapGetters} from "vuex";
+import {mapGetters, mapState} from "vuex";
 import store from "../../store/index";
 import VueFlag from "../flags/flag.vue";
 import {default as mixins} from '../mixins/user.js';
@@ -69,6 +91,7 @@ export default Vue.extend({
   },
   computed: {
     ...mapGetters('topics', ['topic']),
+    ...mapState('user', ['user']),
     anchor() {
       return `comment-${this.comment.id}`;
     },

diff --git a/resources/sass/components/forum/_comment.scss b/resources/sass/components/forum/_comment.scss
@@ -28,8 +28,7 @@
     }
   }
 
-  // comment text
-  > span {
+  .comment-text.legacy {
     &:before {
       content: "▪";
       margin-right: 5px;

diff --git a/resources/views/adm/users/save.twig b/resources/views/adm/users/save.twig
@@ -15,6 +15,11 @@
         Przynależenie do grup
       </a>
     </li>
+    <li class="nav-item">
+      <a href="#local-settings" class="nav-link" role="tab" data-bs-toggle="tab">
+        Ustawienia użytkownika
+      </a>
+    </li>
   </ul>
 
   <div class="card card-default tab-content">
@@ -49,6 +54,16 @@
       {{ form_row(form.groups) }}
       {{ form_row(form.submit) }}
     </div>
+
+    <div id="local-settings" class="card-body tab-pane">
+      <p>
+        Lokalne ustawienia użytkownika:
+      </p>
+      <pre><code>{{ userSettings }}</code></pre>
+
+      <input class="btn btn-primary" type="submit" name="local-settings-action" value="post-comments-legacy">
+      <input class="btn btn-primary" type="submit" name="local-settings-action" value="post-comments-modern">
+    </div>
   </div>
 
   {{ form_end(form) }}