feat: Implement publish option - EXO-72742,EXO-72744,EXO-73081 - Meeds-io/MIPs#161 (#1170)

Implement publish option

Author: hakermi

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

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

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 {

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>

notes-webapp/src/main/webapp/vue-app/notes-publication/components/options/NotePublicationTargetDrawer.vue

@@ -0,0 +1,74 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2024 Meeds Association [email protected]
+
+ 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) {
+      console.log('hello');
+      this.targets = targets;
+      this.$refs.publicationTargetsListDrawer.open();
+    },
+    close() {
+      this.$refs.publicationTargetsListDrawer.close();
+    }
+  }
+};
+</script>