From 6c5f096896c0230e88812ae5e00ff4fecfcad8e9 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Tue, 15 Oct 2024 20:58:11 +0100
Subject: [PATCH] feat: Implement publish option -
 EXO-72742,EXO-72744,EXO-73081 - Meeds-io/MIPs#161 (#1170)

Implement publish option
---
 .../portlet/notes/notesPortlet_en.properties  |  14 +
 .../portlet/notes/notesPortlet_fr.properties  |  13 +
 .../main/webapp/skin/less/notes/notes.less    |   5 +
 .../components/NotePublicationDrawer.vue      |  84 +++++-
 .../options/NotePublicationTargetDrawer.vue   |  73 +++++
 .../options/NotePublicationTargetList.vue     |  79 +++++
 .../components/options/NotePublishOption.vue  | 275 ++++++++++++++++++
 .../notes-publication/initComponents.js       |   8 +-
 .../components/NoteFullRichEditor.vue         |  15 +-
 .../notes/components/NotesOverview.vue        |   2 +-
 10 files changed, 547 insertions(+), 21 deletions(-)
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublicationTargetDrawer.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublicationTargetList.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublishOption.vue

diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
index 8dba53fa54..c1d916db39 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
@@ -72,6 +72,20 @@ notes.publication.check.properties.label=Check the teaser
 notes.publication.publish.next.label=Next
 notes.publication.post.in.feed.label=Post in Activity stream of
 notes.publication.publish.save.label=Publish
+notes.publication.publish.in.list.label=Publish in a News list
+notes.publication.where.to.publish.label=Where to publish?
+notes.publication.who.will.see.label=Who will see?
+notes.publication.choose.location.label=Choose a location
+notes.publication.only.space.members.label=Only space members
+notes.publication.all.users.label=All users
+notes.publication.targets.others.label={0} Others
+notes.publication.targets.other.label={0} Other
+notes.publication.targets.label=News Targets
+notes.publication.targets.select.all.label=Select all
+notes.publication.all.users.audience.info=All users will see the article
+notes.publication.audience.restricted=Restricted: you cannot change it
+notes.publication.remove.selected.target.label=Remove selected target
+
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
index 989e371a81..d15478164c 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
@@ -71,6 +71,19 @@ notes.publication.check.properties.label=Vérifier l'accroche
 notes.publication.publish.next.label=Suivant
 notes.publication.post.in.feed.label=Publier dans le fil d'activités de
 notes.publication.publish.save.label=Publier
+notes.publication.publish.in.list.label=Publier dans une liste d'articles
+notes.publication.where.to.publish.label=O\u00FA publier ?
+notes.publication.who.will.see.label=Qui le verra ?
+notes.publication.choose.location.label=Sélectionner un emplacement
+notes.publication.only.space.members.label=Seuls les membres de l'espace
+notes.publication.all.users.label=Tous les utilisateurs
+notes.publication.targets.others.label={0} Autres
+notes.publication.targets.other.label={0} Autre
+notes.publication.targets.label=Cibles d'article
+notes.publication.targets.select.all.label=Sélectionner tout
+notes.publication.all.users.audience.info=Tous les utilisateurs verront l'article
+notes.publication.audience.restricted=Restreint : vous ne pouvez pas le modifier
+notes.publication.remove.selected.target.label=Supprimer la cible sélectionnée
 
 popup.confirm=Confirmer
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 80cf009d0f..fe6303682a 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -217,6 +217,11 @@
     max-width: 335px;
   }
 
+  .custom-clear-button {
+    top: 2px;
+    right: 50px ~'; /** orientation=lt */ ';
+    left: 50px ~'; /** orientation=rt */ ';
+  }
 }
 
 #editorMetadataDrawer, #editorPublicationDrawer {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue
index f707dce706..56300c9879 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue
@@ -22,7 +22,7 @@
     <v-overlay
       z-index="2000"
       :value="drawer"
-      @click.native="drawer = false" />
+      @click.native="closeDrawerByOverlay" />
     <exo-drawer
       id="editorPublicationDrawer"
       ref="publicationDrawer"
@@ -85,7 +85,8 @@
             </div>
             <div
               :class="{
-                'col-6': expanded,
+                'col-6': expanded && !editMode,
+                'col-12': expanded && editMode,
                 'mt-8': !expanded && stepper < 2 && !editMode,
                 'mt-4': !expanded && stepper === 2 && !editMode,
               }"
@@ -117,20 +118,32 @@
                             :ripple="false"
                             color="primary"
                             class="mt-n1 me-1" />
-                          <div class="d-flex flex-wrap">
+                          <div class="d-flex flex-wrap mb-6">
                             <p class="me-2">
                               {{ $t('notes.publication.post.in.feed.label') }}
                             </p>
                             <exo-space-avatar
                               :space-id="spaceId"
                               size="21"
-                              :extra-class="['mb-auto text-truncate', {
+                              :extra-class="['mb-2 text-truncate', {
                                 'post-feed-target': !expanded
                               }]"
                               bold-title
                               popover />
                           </div>
                         </div>
+                        <note-publish-option
+                          ref="publishOption"
+                          :allowed-targets="allowedTargets"
+                          :is-publishing="isPublishing"
+                          :edit-mode="editMode"
+                          :expanded="expanded"
+                          :saved-settings="{
+                            published: publicationSettings?.publish,
+                            selectedAudience: publicationSettings?.selectedAudience,
+                            selectedTargets: savedTargets(publicationSettings?.selectedTargets)
+                          }"
+                          @updated="updatedPublicationSettings" />
                       </div>
                     </v-scroll-y-transition>
                   </div>
@@ -149,7 +162,7 @@
           </v-btn>
           <v-btn
             class="btn btn-primary"
-            :disabled="summaryLengthError"
+            :disabled="summaryLengthError || !saveEnabled"
             :loading="isPublishing"
             @click="save">
             {{ saveButtonLabel }}
@@ -161,6 +174,7 @@
 </template>
 
 <script>
+
 export default {
   data() {
     return {
@@ -172,7 +186,8 @@ export default {
       summaryMaxLength: 1300,
       publicationSettings: {
         post: true
-      }
+      },
+      currentPublicationSettings: {}
     };
   },
   props: {
@@ -184,23 +199,35 @@ export default {
       type: Boolean,
       default: false
     },
-    spaceId: {
-      type: String,
-      default: null
-    },
     editMode: {
       type: Boolean,
       default: false
+    },
+    params: {
+      type: Object,
+      default: null
     }
   },
   computed: {
+    saveEnabled() {
+      return !this.editMode || this.publicationSettingsUpdated;
+    },
+    publicationSettingsUpdated() {
+      return JSON.stringify(this.currentPublicationSettings) !== JSON.stringify(this.publicationSettings);
+    },
     saveButtonLabel() {
-      return (!this.editMode && this.stepper === 1 && !this.expanded) && this.$t('notes.publication.publish.next.label')
+      return (!this.editMode && !this.expanded && this.stepper === 1) && this.$t('notes.publication.publish.next.label')
                                                   || this.$t('notes.publication.publish.save.label');
     },
     summaryLengthError() {
       return this.noteObject?.properties?.summary?.length > this.summaryMaxLength;
     },
+    spaceId() {
+      return this.params?.spaceId;
+    },
+    allowedTargets() {
+      return this.params?.allowedTargets;
+    }
   },
   watch: {
     expanded() {
@@ -213,6 +240,14 @@ export default {
     }
   },
   methods: {
+    updatedPublicationSettings(settings) {
+      this.publicationSettings = structuredClone({
+        post: this.publicationSettings.post
+      });
+      this.publicationSettings.publish = settings?.publish;
+      this.publicationSettings.selectedTargets = settings?.selectedTargets;
+      this.publicationSettings.selectedAudience = settings?.selectedAudience;
+    },
     propertiesUpdated(properties) {
       if (!this.noteObject?.properties || !Object.keys(this.noteObject?.properties).length) {
         this.noteObject.properties = structuredClone(properties || {});
@@ -223,14 +258,26 @@ export default {
       this.updateCurrentNoteObjectProperties(properties);
       this.propertiesToSave = properties;
     },
+    savedTargets(targets) {
+      return targets?.map(target => {
+        return this.allowedTargets[this.allowedTargets.findIndex(allowedTarget => allowedTarget.name === target)];
+      });
+    },
     open(noteObject) {
       this.noteObject = noteObject;
       if (this.editMode) {
         this.publicationSettings.post = this.noteObject?.activityPosted;
+        this.publicationSettings.publish = this.noteObject?.published;
+        this.publicationSettings.selectedTargets = this.noteObject?.targets;
+        this.publicationSettings.selectedAudience = this.noteObject?.audience;
       }
+      this.currentPublicationSettings = structuredClone(this.publicationSettings);
       this.cloneProperties();
       this.$refs.publicationDrawer.open();
       this.toggleExpand();
+      setTimeout(() => {
+        this.$refs.publishOption.initSettings();
+      }, 200);
       this.$refs.propertiesForm?.initProperties();
     },
     toggleExpand() {
@@ -254,7 +301,13 @@ export default {
       this.stepper = 1;
       this.$refs.publicationDrawer.close();
     },
+    cancelChanges() {
+      this.$refs?.publishOption?.cancelChanges();
+    },
     reset() {
+      setTimeout(() => {
+        this.cancelChanges();
+      }, 1000);
       this.$emit('closed');
     },
     cancel() {
@@ -285,7 +338,14 @@ export default {
       this.noteObject.properties.featuredImage.mimeType = properties?.featuredImage?.mimeType;
       this.noteObject.properties.featuredImage.altText = properties?.featuredImage?.altText;
       this.noteObject.properties.featuredImage.toDelete = properties?.featuredImage?.toDelete;
-    }
+    },
+    closeDrawerByOverlay() {
+      if (this.editMode) {
+        this.drawer = !this.drawer;
+        return;
+      }
+      this.$root.$emit('close-featured-image-byOverlay');
+    },
   }
 };
 </script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublicationTargetDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublicationTargetDrawer.vue
new file mode 100644
index 0000000000..9f15898a34
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublicationTargetDrawer.vue
@@ -0,0 +1,73 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2024 Meeds Association contact@meeds.io
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+
+<template>
+  <div>
+    <v-overlay
+      id="target-drawer-overlay"
+      z-index="2100"
+      :value="drawer"
+      @click.native="drawer = false" />
+    <exo-drawer
+      id="publicationTargetsListDrawer"
+      ref="publicationTargetsListDrawer"
+      v-model="drawer"
+      :right="!$vuetify.rtl">
+      <template slot="title">
+        <div class="d-flex my-auto text-header font-weight-bold text-color">
+          {{ $t('notes.publication.targets.label') }}
+        </div>
+      </template>
+      <template slot="content">
+        <div class="pa-5">
+          <note-publication-target-list
+            :targets="targets"
+            @unselect="unselectPublicationTarget" />
+        </div>
+      </template>
+    </exo-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      drawer: false,
+      targets: []
+    };
+  },
+  created() {
+    this.$root.$on('open-publication-target-list-drawer', this.open);
+    this.$root.$on('close-publication-target-list-drawer', this.close);
+  },
+  methods: {
+    unselectPublicationTarget(targetName) {
+      this.$root.$emit('unselect-publication-target', targetName);
+    },
+    open(targets) {
+      this.targets = targets;
+      this.$refs.publicationTargetsListDrawer.open();
+    },
+    close() {
+      this.$refs.publicationTargetsListDrawer.close();
+    }
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublicationTargetList.vue b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublicationTargetList.vue
new file mode 100644
index 0000000000..5d24deebaa
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublicationTargetList.vue
@@ -0,0 +1,79 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2024 Meeds Association contact@meeds.io
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+
+<template>
+  <div>
+    <div
+      v-for="target in targetList"
+      :key="target.name"
+      class="d-flex align-center">
+      <v-tooltip bottom>
+        <template #activator="{ on, attrs }">
+          <p
+            v-on="on"
+            v-bind="attrs"
+            class="text-truncate mb-0">
+            <span class="font-weight-bold">
+              {{ target.label }}:
+            </span>
+            {{ target.description }}
+          </p>
+        </template>
+        <p class="caption">
+          {{ target.tooltipInfo }}
+        </p>
+      </v-tooltip>
+      <v-btn
+        :aria-label="$t('notes.publication.remove.selected.target.label')"
+        class="btn flex-column no-border ms-auto error-color"
+        width="28"
+        min-width="28"
+        height="28"
+        text
+        @click="removeSelectedTarget(target.name)">
+        <v-icon
+          class="error-color"
+          size="20">
+          fas fa-times
+        </v-icon>
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    targets: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    targetList() {
+      return this.targets.filter(target => !!target.name);
+    }
+  },
+  methods: {
+    removeSelectedTarget(targetName) {
+      this.$emit('unselect', targetName);
+    }
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublishOption.vue b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublishOption.vue
new file mode 100644
index 0000000000..d5a1dce65a
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublishOption.vue
@@ -0,0 +1,275 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2024 Meeds Association contact@meeds.io
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+
+<template>
+  <div>
+    <div class="d-flex">
+      <v-switch
+        v-model="publish"
+        :disabled="isPublishing"
+        :aria-label="$t('notes.publication.publish.in.list.label')"
+        :ripple="false"
+        color="primary"
+        class="mt-n1 me-1" />
+      <p class="mb-4">
+        {{ $t('notes.publication.publish.in.list.label') }}
+      </p>
+    </div>
+    <div v-if="publish">
+      <label
+        for="targets"
+        class="mb-0 text-font-size">
+        {{ $t('notes.publication.where.to.publish.label') }}
+        <v-combobox
+          v-model="selectedTargets"
+          :items="allowedTargets"
+          ref="targets"
+          name="targets"
+          :label="!filterInputFocused && $t('notes.publication.choose.location.label')"
+          class="elevation-0 mt-2 pt-0 no-border"
+          item-text="label"
+          single-line
+          return-object
+          multiple
+          outlined
+          dense
+          chips
+          @update:search-input="TargetsFilterUpdated"
+          @change="checkRestrictedAudience"
+          @focus="filterInputFocused = true"
+          @blur="filterInputFocused = false">
+          <template #prepend-item>
+            <v-list-item v-if="allowedTargets?.length && !hasInputFilterValue">
+              <v-list-item-action>
+                <v-simple-checkbox
+                  v-model="allTargetsSelected"
+                  :indeterminate="allTargetsSelected"
+                  :aria-label="$t('notes.publication.targets.select.all.label')"
+                  intermediate-icon="fas fa-minus"
+                  color="primary"
+                  hide-details
+                  ripple
+                  @mousedown.prevent.stop
+                  @click="selectAllTargets" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>
+                  {{ $t('notes.publication.targets.select.all.label') }}
+                </v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </template>
+          <template #append-outer>
+            <v-btn
+              v-if="hasInputFilterValue"
+              class="btn position-absolute custom-clear-button no-border pa-1 t-2"
+              icon
+              @click="clearInputFilter">
+              <v-icon size="20">
+                fas fa-times
+              </v-icon>
+            </v-btn>
+          </template>
+          <template #selection="{index}">
+            <label
+              v-if="!hasInputFilterValue && !index && !filterInputFocused"
+              class="text-color v-label position-absolute l-0">
+              {{ $t('notes.publication.choose.location.label') }}
+            </label>
+          </template>
+        </v-combobox>
+      </label>
+      <note-publication-target-list
+        :targets="selectedTargets?.slice(0, 4)"
+        class="mt-2"
+        @unselect="removeSelectedTarget" />
+      <v-btn
+        v-if="selectedTargets?.length > 4"
+        class="btn pa-1 mt-3 text-capitalize-first-letter no-border ma-auto d-flex text-sub-title"
+        text
+        @click="openSelectedTargetsList">
+        + {{
+          $t(`notes.publication.targets.${remainTargetsLength > 1 && 'others' || 'other'}.label`,
+             {0: remainTargetsLength})
+        }}
+      </v-btn>
+      <label
+        for="audience"
+        class="text-font-size mt-3">
+        {{ $t('notes.publication.who.will.see.label') }}
+        <v-tooltip bottom>
+          <template #activator="{ on, attrs }">
+            <div
+              v-bind="attrs"
+              v-on="hasRestrictedAudience && on">
+              <v-select
+                ref="audience"
+                v-model="selectedAudience"
+                :items="audiences"
+                :disabled="hasRestrictedAudience"
+                class="pt-0 mt-2"
+                item-text="label"
+                item-value="value"
+                return-object
+                attach
+                dense
+                outlined
+                @blur="$refs.audience.blur()" />
+            </div>
+          </template>
+          <span>{{ $t('notes.publication.audience.restricted') }}</span>
+        </v-tooltip>
+        <span
+          v-if="isAllUsersAudience"
+          class="mt-1 caption justify-center">
+          <v-icon
+            size="16"
+            class="me-3">
+            fas fa-exclamation-triangle
+          </v-icon>
+          {{ $t('notes.publication.all.users.audience.info') }}
+        </span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      publish: false,
+      selectedTargets: null,
+      defaultAudience: {label: this.$t('notes.publication.only.space.members.label'), value: 'space'},
+      selectedAudience: {label: this.$t('notes.publication.only.space.members.label'), value: 'space'},
+      audiences: [
+        {label: this.$t('notes.publication.only.space.members.label'), value: 'space'},
+        {label: this.$t('notes.publication.all.users.label'), value: 'all'}
+      ],
+      allTargetsSelected: false,
+      hasInputFilterValue: false,
+      filterInputFocused: false
+    };
+  },
+  props: {
+    isPublishing: {
+      type: Boolean,
+      default: false
+    },
+    allowedTargets: {
+      type: Array,
+      default: () => []
+    },
+    savedSettings: {
+      type: Object,
+      default: null
+    },
+    editMode: {
+      type: Boolean,
+      default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    selectedTargets() {
+      this.emitUpdatedSettings();
+    },
+    selectedAudience() {
+      this.emitUpdatedSettings();
+    },
+    publish() {
+      this.emitUpdatedSettings();
+    },
+    expanded() {
+      setTimeout(() => {
+        this.$refs.targets?.$refs?.menu?.updateDimensions();
+      }, 500);
+    }
+  },
+  computed: {
+    remainTargetsLength() {
+      return this.selectedTargets?.length - 4;
+    },
+    hasRestrictedAudience() {
+      return this.selectedTargets?.some(target => target.restrictedAudience);
+    },
+    isAllUsersAudience() {
+      return this.selectedAudience?.value === 'all';
+    },
+    selectedTargetsValues() {
+      return this.selectedTargets?.filter(target => !!target.name)
+        ?.map(target => target.name);
+    }
+  },
+  created() {
+    this.$root.$on('unselect-publication-target', this.removeSelectedTarget);
+    if (this.editMode) {
+      this.initSettings();
+    }
+  },
+  methods: {
+    initSettings() {
+      this.publish = this.savedSettings?.published;
+      this.selectedTargets = this.savedSettings?.selectedTargets;
+      this.selectedAudience = this.savedAudience(this.savedSettings?.selectedAudience) || this.defaultAudience;
+      this.checkRestrictedAudience();
+    },
+    savedAudience(savedAudience) {
+      if (!savedAudience) {
+        return null;
+      }
+      return this.audiences[savedAudience === 'all' && 1 || 0];
+    },
+    TargetsFilterUpdated(key) {
+      this.hasInputFilterValue = key?.length;
+    },
+    emitUpdatedSettings() {
+      this.$emit('updated', {
+        publish: this.publish,
+        selectedTargets: this.selectedTargetsValues,
+        selectedAudience: this.selectedAudience?.value
+      });
+    },
+    openSelectedTargetsList() {
+      this.$root.$emit('open-publication-target-list-drawer', this.selectedTargets);
+    },
+    removeSelectedTarget(name) {
+      this.selectedTargets.splice(this.selectedTargets.findIndex(target => target.name === name), 1);
+    },
+    checkRestrictedAudience() {
+      if (this.hasRestrictedAudience) {
+        this.selectedAudience = this.defaultAudience;
+      }
+      this.allTargetsSelected = this.selectedTargets?.length === this.allowedTargets?.length;
+    },
+    selectAllTargets() {
+      this.selectedTargets = this.allTargetsSelected && [...this.allowedTargets] || [];
+    },
+    clearInputFilter() {
+      this.$refs.targets.internalSearch = '';
+    },
+    cancelChanges() {
+      this.initSettings();
+    }
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notes-publication/initComponents.js
index 7c7fc54b70..af7478fc83 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-publication/initComponents.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/initComponents.js
@@ -1,9 +1,15 @@
 import NotePublicationDrawer from './components/NotePublicationDrawer.vue';
 import NoteMetadataPropertiesForm from '../notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue';
+import NotePublishOption from './components/options/NotePublishOption.vue';
+import NotePublicationTargetDrawer from './components/options/NotePublicationTargetDrawer.vue';
+import NotePublicationTargetList from './components/options/NotePublicationTargetList.vue';
 
 const components = {
   'note-publication-drawer': NotePublicationDrawer,
-  'note-metadata-properties-form': NoteMetadataPropertiesForm
+  'note-metadata-properties-form': NoteMetadataPropertiesForm,
+  'note-publish-option': NotePublishOption,
+  'note-publication-target-drawer': NotePublicationTargetDrawer,
+  'note-publication-target-list': NotePublicationTargetList
 };
 
 for (const key in components) {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
index c493ba1f00..ee697764e9 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
@@ -89,11 +89,12 @@
       ref="editorPublicationDrawer"
       :has-featured-image="hasFeaturedImage"
       :is-publishing="isPublishing"
-      :space-id="spaceId"
+      :params="publicationParams"
       :edit-mode="editMode"
       @publish="postAndPublishNote"
       @metadata-updated="metadataUpdated"
       @closed="publicationDrawerClosed" />
+    <note-publication-target-drawer />
   </div>
 </template>
 
@@ -211,12 +212,8 @@ export default {
       type: String,
       default: 'DRIVE_ROOT_NODE/notes/images'
     },
-    canPublish: {
-      type: Boolean,
-      default: false
-    },
-    spaceId: {
-      type: String,
+    publicationParams: {
+      type: Object,
       default: null
     }
   },
@@ -249,6 +246,9 @@ export default {
     }
   },
   computed: {
+    canPublish() {
+      return this.publicationParams?.canPublish;
+    },
     newEmptyTranslation() {
       return !!this.note?.lang && !this.note?.title?.length && !this.note?.content?.length;
     },
@@ -575,6 +575,7 @@ export default {
         return;
       }
       this.$refs.editorMetadataDrawer.close();
+      this.$refs.editorPublicationDrawer.close();
     },
     isImageDrawerClosed() {
       return this.$refs.featuredImageDrawer.isClosed();
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
index fd1f7e3aa9..e636e69611 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
@@ -135,7 +135,7 @@
           <div class="notes-title">
             <p ref="noteTitle" class="title text-color text-break">
               <span>
-              {{ noteTitle }}
+                {{ noteTitle }}
               </span>
               <span>
                 <notes-translation-menu