Move dialog for sections and content elements

entry_types/scrolled/config/locales/de.yml

@@ -1161,6 +1161,9 @@ de:
       duplicate_content_element_menu_item:
         label: Element duplizieren
         selection_label: Auswahl duplizieren
+      content_element_menu_items:
+        move: Element verschieben...
+        move_selection: Auswahl verschieben...
       destroy_section_menu_item:
         confirm_destroy: Abschnitt inklusive aller Elemente wirklich löschen?
         destroy: Abschnitt löschen
@@ -1298,6 +1301,7 @@ de:
         hide: Außerhalb des Editors ausblenden
         insert_section_above: Abschnitt oberhalb einfügen
         insert_section_below: Abschnitt unterhalb einfügen
+        move: Abschnitt verschieben...
         reset_cutoff: Paywall Grenze entfernen
         set_cutoff: Paywall Grenze oberhalb setzen
         show: Außerhalb des Editors einblenden
@@ -1320,10 +1324,22 @@ de:
         select_file: Biete eine Datei zum Download an
         select_file_description: Lasse Leser eine Datei herunterladen, wenn sie auf den Link klicken.
         select_in_sidebar: Datei auswählen
+      select_move_destination:
+        cancel: Abbrechen
+        header_insertPosition: Abschnitt verschieben
+        header_sectionPart: Element verschieben
+        hint: Wähle die Position aus, an die verschoben werden soll.
+      selectable_storyline_item:
+        blank_slate: Keine Kapitel
+        blank_slate_excursions: Keine Exkurse
       selectable_chapter_item:
         title: Kapitel auswählen
+        insert_here: Hierhin verschieben
       selectable_section_item:
         title: Abschnitt auswählen
+        insert_here: Hierhin verschieben
+        insert_at_beginning: An den Anfang
+        insert_at_end: Ans Ende
       edit_motif_area_menu_item: Motivbereich markieren...
       edit_motif_area_input:
         select: Motivbereich auswählen

entry_types/scrolled/config/locales/en.yml

@@ -1145,6 +1145,9 @@ en:
       duplicate_content_element_menu_item:
         label: Duplicate element
         selection_label: Duplicate selection
+      content_element_menu_items:
+        move: Move element...
+        move_selection: Move selection...
       destroy_section_menu_item:
         confirm_destroy: Really delete this section including all its elements?
         destroy: Delete section
@@ -1282,6 +1285,7 @@ en:
         hide: Hide outside of the editor
         insert_section_above: Insert section above
         insert_section_below: Insert section below
+        move: Move section...
         reset_cutoff: Remove paywall cutoff
         set_cutoff: Set paywall cutoff above
         show: Show outside of the editor
@@ -1304,10 +1308,22 @@ en:
         select_file: Provide file download
         select_file_description: Let readers download a file when they click the link.
         select_in_sidebar: Select file
+      select_move_destination:
+        cancel: Cancel
+        header_insertPosition: Move section
+        header_sectionPart: Move element
+        hint: Select the position to move to.
+      selectable_storyline_item:
+        blank_slate: No chapters
+        blank_slate_excursions: No excursions
       selectable_chapter_item:
         title: Select chapter
+        insert_here: Move here
       selectable_section_item:
         title: Select section
+        insert_here: Move here
+        insert_at_beginning: Move to beginning
+        insert_at_end: Move to end
       edit_motif_area_menu_item: Select motif area...
       edit_motif_area_input:
         select: Select motif area

entry_types/scrolled/package/spec/editor/models/Chapter-spec.js

@@ -264,6 +264,202 @@ describe('Chapter', () => {
     });
   });
 
+  describe('#moveSection', () => {
+    describe('within same chapter', () => {
+      beforeEach(() => {
+        testContext.entry = factories.entry(ScrolledEntry, {}, {
+          entryTypeSeed: normalizeSeed({
+            chapters: [{id: 10}],
+            sections: [
+              {id: 100, chapterId: 10, position: 0},
+              {id: 101, chapterId: 10, position: 1},
+              {id: 102, chapterId: 10, position: 2}
+            ]
+          })
+        });
+      });
+
+      setupGlobals({
+        entry: () => testContext.entry
+      });
+
+      useFakeXhr(() => testContext);
+
+      it('re-indexes sections when moving after another section', () => {
+        const {entry} = testContext;
+        const chapter = entry.chapters.first();
+        const sectionToMove = chapter.sections.get(100);
+        const targetSection = chapter.sections.get(102);
+
+        chapter.moveSection(sectionToMove, {after: targetSection});
+
+        expect(chapter.sections.pluck('position')).toEqual([0, 1, 2]);
+        expect(chapter.sections.pluck('id')).toEqual([101, 102, 100]);
+      });
+
+      it('triggers selectSection and scrollToSection events', () => {
+        const {entry} = testContext;
+        const chapter = entry.chapters.first();
+        const sectionToMove = chapter.sections.get(100);
+        const targetSection = chapter.sections.get(102);
+        const selectListener = jest.fn();
+        const scrollListener = jest.fn();
+
+        entry.on('selectSection', selectListener);
+        entry.on('scrollToSection', scrollListener);
+
+        chapter.moveSection(sectionToMove, {after: targetSection});
+
+        expect(selectListener).toHaveBeenCalledWith(sectionToMove);
+        expect(scrollListener).toHaveBeenCalledWith(sectionToMove);
+      });
+
+      it('calls saveOrder', () => {
+        const {entry, requests} = testContext;
+        const chapter = entry.chapters.first();
+        const sectionToMove = chapter.sections.get(100);
+        const targetSection = chapter.sections.get(102);
+
+        chapter.moveSection(sectionToMove, {after: targetSection});
+
+        expect(requests.length).toBe(1);
+        expect(requests[0].url).toContain('/order');
+      });
+
+      it('re-indexes sections when moving before another section', () => {
+        const {entry} = testContext;
+        const chapter = entry.chapters.first();
+        const sectionToMove = chapter.sections.get(102);
+        const targetSection = chapter.sections.get(100);
+
+        chapter.moveSection(sectionToMove, {before: targetSection});
+
+        expect(chapter.sections.pluck('position')).toEqual([0, 1, 2]);
+        expect(chapter.sections.pluck('id')).toEqual([102, 100, 101]);
+      });
+    });
+
+    describe('between chapters', () => {
+      beforeEach(() => {
+        testContext.entry = factories.entry(ScrolledEntry, {}, {
+          entryTypeSeed: normalizeSeed({
+            chapters: [{id: 10}, {id: 20}],
+            sections: [
+              {id: 100, chapterId: 10, position: 0},
+              {id: 101, chapterId: 10, position: 1},
+              {id: 200, chapterId: 20, position: 0},
+              {id: 201, chapterId: 20, position: 1}
+            ]
+          })
+        });
+      });
+
+      setupGlobals({
+        entry: () => testContext.entry
+      });
+
+      useFakeXhr(() => testContext);
+
+      it('moves section to different chapter', () => {
+        const {entry} = testContext;
+        const sourceChapter = entry.chapters.get(10);
+        const targetChapter = entry.chapters.get(20);
+        const sectionToMove = sourceChapter.sections.get(100);
+        const targetSection = targetChapter.sections.get(200);
+
+        targetChapter.moveSection(sectionToMove, {after: targetSection});
+
+        expect(sectionToMove.get('chapterId')).toBe(20);
+        expect(sourceChapter.sections.pluck('id')).toEqual([101]);
+        expect(targetChapter.sections.pluck('id')).toEqual([200, 100, 201]);
+      });
+
+      it('updates positions in target chapter', () => {
+        const {entry} = testContext;
+        const sourceChapter = entry.chapters.get(10);
+        const targetChapter = entry.chapters.get(20);
+        const sectionToMove = sourceChapter.sections.get(100);
+        const targetSection = targetChapter.sections.get(200);
+
+        targetChapter.moveSection(sectionToMove, {after: targetSection});
+
+        expect(sourceChapter.sections.pluck('position')).toEqual([1]);
+        expect(targetChapter.sections.pluck('position')).toEqual([0, 1, 2]);
+      });
+
+      it('calls saveOrder on target chapter', () => {
+        const {entry, requests} = testContext;
+        const sourceChapter = entry.chapters.get(10);
+        const targetChapter = entry.chapters.get(20);
+        const sectionToMove = sourceChapter.sections.get(100);
+        const targetSection = targetChapter.sections.get(200);
+
+        targetChapter.moveSection(sectionToMove, {after: targetSection});
+
+        expect(requests.length).toBe(1);
+        expect(requests[0].url).toContain('/chapters/20/sections/order');
+      });
+
+      it('moves section before target section in different chapter', () => {
+        const {entry} = testContext;
+        const sourceChapter = entry.chapters.get(10);
+        const targetChapter = entry.chapters.get(20);
+        const sectionToMove = sourceChapter.sections.get(100);
+        const targetSection = targetChapter.sections.get(201);
+
+        targetChapter.moveSection(sectionToMove, {before: targetSection});
+
+        expect(sectionToMove.get('chapterId')).toBe(20);
+        expect(sourceChapter.sections.pluck('id')).toEqual([101]);
+        expect(targetChapter.sections.pluck('id')).toEqual([200, 100, 201]);
+      });
+    });
+
+    describe('into empty chapter', () => {
+      beforeEach(() => {
+        testContext.entry = factories.entry(ScrolledEntry, {}, {
+          entryTypeSeed: normalizeSeed({
+            chapters: [{id: 10}, {id: 20}],
+            sections: [
+              {id: 100, chapterId: 10, position: 0},
+              {id: 101, chapterId: 10, position: 1}
+            ]
+          })
+        });
+      });
+
+      setupGlobals({
+        entry: () => testContext.entry
+      });
+
+      useFakeXhr(() => testContext);
+
+      it('moves section into empty chapter', () => {
+        const {entry} = testContext;
+        const sourceChapter = entry.chapters.get(10);
+        const targetChapter = entry.chapters.get(20);
+        const sectionToMove = sourceChapter.sections.get(100);
+
+        targetChapter.moveSection(sectionToMove);
+
+        expect(sectionToMove.get('chapterId')).toBe(20);
+        expect(sourceChapter.sections.pluck('id')).toEqual([101]);
+        expect(targetChapter.sections.pluck('id')).toEqual([100]);
+      });
+
+      it('sets position to 0 when moving into empty chapter', () => {
+        const {entry} = testContext;
+        const sourceChapter = entry.chapters.get(10);
+        const targetChapter = entry.chapters.get(20);
+        const sectionToMove = sourceChapter.sections.get(100);
+
+        targetChapter.moveSection(sectionToMove);
+
+        expect(targetChapter.sections.pluck('position')).toEqual([0]);
+      });
+    });
+  });
+
   describe('#isExcursion', () => {
     it('returns false for chapters in main storyline', () => {
       const entry = factories.entry(ScrolledEntry, {}, {

entry_types/scrolled/package/spec/editor/models/ScrolledEntry/moveContentElement-spec.js

@@ -62,6 +62,24 @@ describe('ScrolledEntry', () => {
         expect(entry.sections.first().contentElements.pluck('position')).toEqual([0, 1, 2]);
       });
 
+      it('calls success callback after save', () => {
+        const {entry, server} = testContext;
+        const success = jest.fn();
+
+        entry.moveContentElement({id: 7}, {at: 'before', id: 5}, {success});
+
+        expect(success).not.toHaveBeenCalled();
+
+        server.respond(
+          'PUT', '/editor/entries/100/scrolled/sections/10/content_elements/batch',
+          [200, {'Content-Type': 'application/json'}, JSON.stringify([
+            {id: 7, permaId: 70}, {id: 5, permaId: 50}, {id: 6, permaId: 60}
+          ])]
+        );
+
+        expect(success).toHaveBeenCalled();
+      });
+
       it('supports moving after other content element', () => {
         const {entry, requests} = testContext;