From fd62a0382036f9eddcfdeae7d34134a334bdba2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 9 Mar 2023 18:06:14 +0100
Subject: [PATCH] Add hint text to create and edit a post of a group

---
 .../ContributionForm/ContributionForm.vue     | 59 ++++++++++++++-----
 webapp/locales/de.json                        |  3 +-
 webapp/locales/en.json                        |  3 +-
 webapp/pages/post/create.vue                  |  2 +-
 webapp/pages/post/edit/_id.vue                |  2 +-
 5 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 0428b2e23..5757d72b5 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -41,7 +41,7 @@
           {{ formData.title.length }}/{{ formSchema.title.max }}
           <base-icon v-if="errors && errors.title" name="warning" />
         </ds-chip>
-        <hc-editor
+        <editor
           :users="users"
           :value="formData.content"
           :hashtags="hashtags"
@@ -64,14 +64,33 @@
           {{ formData.categoryIds.length }} / 3
           <base-icon v-if="errors && errors.categoryIds" name="warning" />
         </ds-chip>
-        <div class="buttons">
-          <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
-            {{ $t('actions.cancel') }}
-          </base-button>
-          <base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
-            {{ $t('actions.save') }}
-          </base-button>
-        </div>
+        <ds-flex class="buttons-footer" gutter="xxx-small">
+          <ds-flex-item width="3.5">
+            <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+            <ds-text
+              v-if="groupId"
+              class="info-text"
+              v-html="$t('contribution.visibleOnlyForMembersOfGroup', { name: groupName })"
+            />
+            <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+          </ds-flex-item>
+          <ds-flex-item width="0.25" />
+          <ds-flex-item style="align-self: flex-end">
+            <base-button
+              data-test="cancel-button"
+              :disabled="loading"
+              @click="$router.back()"
+              danger
+            >
+              {{ $t('actions.cancel') }}
+            </base-button>
+          </ds-flex-item>
+          <ds-flex-item style="align-self: flex-end">
+            <base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
+              {{ $t('actions.save') }}
+            </base-button>
+          </ds-flex-item>
+        </ds-flex>
       </base-card>
     </template>
   </ds-form>
@@ -80,7 +99,7 @@
 <script>
 import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
-import HcEditor from '~/components/Editor/Editor'
+import Editor from '~/components/Editor/Editor'
 import PostMutations from '~/graphql/PostMutations.js'
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import ImageUploader from '~/components/Uploader/ImageUploader'
@@ -89,7 +108,7 @@ import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParams
 
 export default {
   components: {
-    HcEditor,
+    Editor,
     ImageUploader,
     PageParamsLink,
     CategoriesSelect,
@@ -99,8 +118,8 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    groupId: {
-      type: String,
+    group: {
+      type: Object,
       default: () => null,
     },
   },
@@ -152,6 +171,12 @@ export default {
     contentLength() {
       return this.$filters.removeHtml(this.formData.content).length
     },
+    groupId() {
+      return this.group && this.group.id
+    },
+    groupName() {
+      return this.group && this.group.name
+    },
   },
   methods: {
     submit() {
@@ -284,8 +309,9 @@ export default {
     align-self: flex-end;
   }
 
-  > .buttons {
+  > .buttons-footer {
     align-self: flex-end;
+    width: 85%;
     margin-top: $space-base;
   }
 
@@ -297,5 +323,10 @@ export default {
       display: block;
     }
   }
+
+  .info-text {
+    display: inline;
+    vertical-align: middle;
+  }
 }
 </style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 6a43a865a..ac6df3cda 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -289,7 +289,8 @@
       },
       "supportedFormats": "Füge ein Bild im Dateiformat JPG, PNG oder GIF ein"
     },
-    "title": "Titel"
+    "title": "Titel",
+    "visibleOnlyForMembersOfGroup": "Dieser Beitrag wird nur für Mitglieder der Gruppe „<b>{name}</b>“ sichtbar sein."
   },
   "delete": {
     "cancel": "Abbrechen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 01ba4e8aa..a6faf4769 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -289,7 +289,8 @@
       },
       "supportedFormats": "Insert a picture of file format JPG, PNG or GIF"
     },
-    "title": "Title"
+    "title": "Title",
+    "visibleOnlyForMembersOfGroup": "This post will only be visible to members of the “<b>{name}</b>” group."
   },
   "delete": {
     "cancel": "Cancel",
diff --git a/webapp/pages/post/create.vue b/webapp/pages/post/create.vue
index 3dbf3ae8a..60309480d 100644
--- a/webapp/pages/post/create.vue
+++ b/webapp/pages/post/create.vue
@@ -9,7 +9,7 @@
     <ds-space margin="large" />
     <ds-flex :width="{ base: '100%' }" gutter="base">
       <ds-flex-item :width="{ base: '100%', md: 5 }">
-        <contribution-form :groupId="groupId" />
+        <contribution-form :group="group" />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
     </ds-flex>
diff --git a/webapp/pages/post/edit/_id.vue b/webapp/pages/post/edit/_id.vue
index 391c97375..3813c3a95 100644
--- a/webapp/pages/post/edit/_id.vue
+++ b/webapp/pages/post/edit/_id.vue
@@ -9,7 +9,7 @@
     <ds-space margin="large" />
     <ds-flex :width="{ base: '100%' }" gutter="base">
       <ds-flex-item :width="{ base: '100%', md: 3 }">
-        <contribution-form :contribution="contribution" />
+        <contribution-form :contribution="contribution" :group="contribution.group" />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
     </ds-flex>