related to #1609 added create album and album deletion

Album creation bug, it places the ne album at the root Album deletion bug, when deleting an album, the other click event are removed I don't know why yet
2026-03-28 17:42:57 +01:00 · 2022-03-28 16:57:47 +02:00
parent 6adbb6e9d4
commit 6518bd0136
8 changed files with 476 additions and 11 deletions
--- a/admin/albums.php
+++ b/admin/albums.php
@@ -125,6 +125,8 @@ $template->assign(

 $template->assign('delay_before_autoOpen', $conf['album_move_delay_before_auto_opening']);

+$template->assign("POS_PREF", $conf['newcat_default_position']);
+
 // +-----------------------------------------------------------------------+
 // |                          Album display                                |
 // +-----------------------------------------------------------------------+
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -563,7 +563,7 @@ input:focus + .slider {

 /*UserList Pop in*/

-.CloseUserList{
+.CloseUserList, .CloseAddAlbum, .CloseDeleteAlbum{
  color:white;
 }

--- a/admin/themes/default/js/albums.js
+++ b/admin/themes/default/js/albums.js
@@ -21,14 +21,14 @@ $(document).ready(() => {
    actions = 
      '<div class="move-cat-action-cont">'
        +"<div class='move-cat-action'>"
-          +"<a class='move-cat-add icon-plus-circled' href='admin.php?page=album-"+node.id+"'></a>"
+          +"<a class='move-cat-add icon-plus-circled' href='#' data-aid='"+node.id+"'></a>"
          +"<a class='move-cat-edit icon-pencil' href='admin.php?page=album-"+node.id+"'></a>"
          +"<a class='move-cat-upload icon-upload' href='admin.php?page=photos_add&album="+node.id+"'></a>"
          +"<a class='move-cat-see icon-eye' href='admin.php?page=album-"+node.id+"'></a>"
-          +"<a class='move-cat-order icon-sort-name-up' href='admin.php?page=album-"+node.id+"'></a>"
+          +"<a data-id='"+node.id+"' class='move-cat-delete icon-trash'></a>"
        +"</div>"
      +'</div>';
-    action_order = "<a data-id='"+node.id+"' class='move-cat-delete icon-trash'></a>";
+    action_order = "<a class='move-cat-order icon-sort-name-up' href='admin.php?page=album-"+node.id+"'></a>";

    cont = li.find('.jqtree-element');
    cont.addClass('move-cat-container');
@@ -48,7 +48,7 @@ $(document).ready(() => {
        .replace(/%content%/g, toggler)
        .replace(/%id%/g, node.id)));

-      cont.find('.move-cat-action').append(action_order);
+      cont.find('.move-cat-action .move-cat-see').after(action_order);
    }

    cont.append($(icon.replace(/%icon%/g, 'icon-grip-vertical-solid')));
@@ -209,8 +209,189 @@ $(document).ready(() => {
    }
  })

+
+  // AddAlbumPopIn
+  $(".AddAlbumErrors").hide();
+  $(".DeleteAlbumErrors").hide();
+  $(".move-cat-add").on("click", function () {
+    openAddAlbumPopIn();
+  })
+  $(".CloseAddAlbum").on("click", function () {
+    closeAddAlbumPopIn();
+  });
+  $(".AddAlbumCancel").on("click", function () {
+    closeAddAlbumPopIn();
+  });
+  $(".DeleteAlbumCancel").on("click", function () {
+    closeDeleteAlbumPopIn();
+  });
+
+  $(".AddAlbumSubmit").on("click", function () {
+    newAlbumName = $(".AddAlbumLabelUsername input").val();
+    newAlbumParent = $(".AddAlbumSubmit").data("a-parent");
+    newAlbumPosition = $("input[name=position]:checked").val();
+
+    jQuery.ajax({
+      url: "ws.php?format=json&method=pwg.categories.add",
+      type: "POST",
+      data: {
+        name : newAlbumName,
+        parent : newAlbumParent,
+        position : newAlbumPosition
+      },
+      success: function (raw_data) {
+        data = jQuery.parseJSON(raw_data);
+        var parent_node = $('.tree').tree('getNodeById', newAlbumParent);
+        $('.tree').tree(
+            'appendNode',
+            {
+              id: data.result.id,
+              isEmptyFolder: true,
+              name: newAlbumName
+            },
+            parent_node
+        );
+
+        $("#cat-"+data.result.id+" .move-cat-add").on("click", function () {
+          openAddAlbumPopIn();
+        })
+      },
+      error: function(message) {
+        
+      }
+    });
+    
+  })
+
+  // Delete Album
+  $(".move-cat-delete").on("click", function () {
+    cat_id = $(this).data("id");
+    console.log(cat_id);
+
+    $.ajax({
+      url: "ws.php?format=json&method=pwg.categories.calculateOrphans",
+      type: "GET",
+      data: {
+        category_id: cat_id,
+      },
+      success: function (raw_data) {
+        let data = JSON.parse(raw_data).result[0]
+        console.log(data);
+        if (data.nb_images_recursive == 0) {
+          $(".deleteAlbumOptions").hide();
+        } else {
+          $(".deleteAlbumOptions").show();
+          if (data.nb_images_associated_outside == 0) {
+            $("#IMAGES_ASSOCIATED_OUTSIDE").hide();
+          } else {
+            $("#IMAGES_ASSOCIATED_OUTSIDE .innerText").html("");
+            $("#IMAGES_ASSOCIATED_OUTSIDE .innerText").append(has_images_associated_outside.replace('%d', data.nb_images_recursive).replace('%d', data.nb_images_associated_outside));
+          }
+          if (data.nb_images_becoming_orphan == 0) {
+            $("#IMAGES_BECOMING_ORPHAN").hide();
+          } else {
+            $("#IMAGES_BECOMING_ORPHAN .innerText").html("");
+            $("#IMAGES_BECOMING_ORPHAN .innerText").append(has_images_becomming_orphans.replace('%d', data.nb_images_becoming_orphan));
+          }
+        }
+      },
+      error: function(message) {
+        console.log(message);
+      }
+    }).done(function () {
+      openDeleteAlbumPopIn(cat_id);
+    });
+  })
+
+  /*----------------
+  Checkboxes
+  ----------------*/
+
+  function checkbox_change() {
+    if ($(this).attr('data-selected') == '1') {
+        $(this).find("i").hide();
+    } else {
+        $(this).find("i").show();
+    }
+  }
+
+  function checkbox_click() {
+    if ($(this).attr('data-selected') == '1') {
+        $(this).attr('data-selected', '0');
+        $(this).find("i").hide();
+    } else {
+        $(this).attr('data-selected', '1');
+        $(this).find("i").show();
+    }
+  }
+
+  $('.user-list-checkbox').unbind("change").change(checkbox_change);
+  $('.user-list-checkbox').unbind("click").click(checkbox_click);
+
 });

+function openAddAlbumPopIn() {
+  $("#AddAlbum").fadeIn();
+  $(".AddAlbumSubmit").data("a-parent", $(this).data("aid"));
+  $(".AddAlbumLabelUsername .user-property-input").val('');
+  $(".AddAlbumLabelUsername .user-property-input").focus();
+}
+
+function closeAddAlbumPopIn() {
+  $("#AddAlbum").fadeOut();
+}
+
+function openDeleteAlbumPopIn(cat_to_delete) {
+  $("#DeleteAlbum").fadeIn();
+  node = $(".tree").tree('getNodeById', cat_to_delete);
+  if (node.children.length == 0) {
+    $(".DeleteIconTitle span").html(delete_album_with_name.replace("%s", node.name));
+  } else {
+    nb_sub_cats = 0;
+    test = getSubAlbumsFromNode(node, nb_sub_cats);
+    $(".DeleteIconTitle span").html(delete_album_with_subs.replace("%s", node.name).replace("%d", getSubAlbumsFromNode(node, nb_sub_cats)));
+  }
+
+  // Actually delete
+
+  $(".DeleteAlbumSubmit").unbind("click").on("click", function () {
+    $.ajax({
+      url: "ws.php?format=json&method=pwg.categories.delete",
+      type: "POST",
+      data: {
+        category_id: cat_to_delete,
+        photo_deletion_mode: $("input [name=photo_deletion_mode]:checked").val(),
+        pwg_token: pwg_token,
+      },
+      success: function (raw_data) {
+       $('.tree').tree('removeNode', node);
+       closeDeleteAlbumPopIn();
+      },
+      error: function(message) {
+        console.log(message);
+      }
+    });
+  })
+
+}
+function closeDeleteAlbumPopIn() {
+  $("#DeleteAlbum").fadeOut();
+}
+
+function getSubAlbumsFromNode(node, nb_sub_cats) {
+  nb_sub_cats = 0;
+  if (node.children != 0) {
+    node.children.forEach(child => {
+      nb_sub_cats++;
+      tmp = getSubAlbumsFromNode(child, nb_sub_cats);
+      nb_sub_cats += tmp;
+    });
+  } else {
+    return 0;
+  }
+  return nb_sub_cats;
+}
+
 function goToNode(node, firstNode) {
  // console.log(firstNode.id, node.id);
  if (node.parent) {
--- a/admin/themes/default/template/albums.tpl
+++ b/admin/themes/default/template/albums.tpl
@@ -23,6 +23,14 @@ var delay_autoOpen = {$delay_before_autoOpen}
 {combine_script id='jtree' load='footer' path='themes/default/js/plugins/tree.jquery.js'}
 {combine_css path="admin/themes/default/fontello/css/animation.css" order=10} {* order 10 is required, see issue 1080 *}

+{footer_script}
+const delete_album_with_name = '{'Delete album "%s".'|@translate|escape:javascript}';
+const delete_album_with_subs = '{'Delete album "%s" and its %d sub-albums.'|@translate|escape:javascript}'
+const has_images_associated_outside = '{"delete album and all %d photos, even the %d associated to other albums"|@translate|escape:javascript}';
+const has_images_becomming_orphans = '{'delete album and the %d orphan photos'|@translate|escape:javascript}';
+const has_images_recursives = '{'delete only album, not photos'|@translate|escape:javascript}';
+{/footer_script}
+
 {combine_script id='albums' load='footer' path='admin/themes/default/js/albums.js'}

 <div class="titrePage">
@@ -101,6 +109,86 @@ var delay_autoOpen = {$delay_before_autoOpen}
  <a class="order-root icon-sitemap"> {'Apply an automatic order to root albums'|@translate} </a>
 </div>

+<div id="AddAlbum" class="AddAlbumPopIn">
+  <div class="AddAlbumPopInContainer">
+    <a class="icon-cancel CloseAddAlbum CloseAddAlbum"></a>
+    
+    <div class="AddIconContainer">
+      <span class="AddIcon icon-blue icon-plus-circled"></span>
+    </div>
+    <div class="AddIconTitle">
+      <span>{'Créer un nouvel album à la racine'|translate}</span>
+    </div>
+
+    <div class="AddAlbumInputContainer">
+      <label class="user-property-label AddAlbumLabelUsername">{'Album name'|@translate}
+        <input class="user-property-input" />
+      </label>
+    </div>
+
+    <div class="AddAlbumInputContainer">
+      <label class="user-property-label AddAlbumLabelUsername">{'Position'|@translate}
+
+      <div class="AddAlbumPositionSelect">
+        <div class="AddAlbumRadioInput">
+          <input type="radio" id="place-start"
+          name="position" value="first" {if "first" == {$POS_PREF}} checked {/if}>
+          <label for="place-start">{'Placer au début'|translate}</label>
+        </div>
+        <div class="AddAlbumRadioInput">
+          <input type="radio" id="place-end"
+          name="position" value="last" {if "last" == {$POS_PREF}} checked {/if}>
+          <label for="place-end">{'Placer à la fin'|translate}</label>
+        </div>
+      </div>
+    </div>
+    
+
+    <div class="AddAlbumErrors icon-cancel">
+    </div>
+
+    <div class="AddAlbumFormValidation">
+      <div class="AddAlbumSubmit">
+        <span>{'Add'|@translate}</span>
+      </div>
+
+      <div class="AddAlbumCancel">
+        <span>{'Cancel'|@translate}</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="DeleteAlbum" class="DeleteAlbumPopIn">
+  <div class="DeleteAlbumPopInContainer">
+    <div class="DeleteIconTitle">
+      <span>{'Supprimer l\'album : tatatatattata'|translate}</span>
+    </div>
+
+    <div class="DeleteAlbumInputContainer">
+      <ul class="deleteAlbumOptions">
+        <li id="IMAGES_ASSOCIATED_OUTSIDE"><label class=""><input type="radio" name="photo_deletion_mode" value="force_delete"><span class="innerText"></span></label></li>
+        <li id="IMAGES_BECOMING_ORPHAN"><label class=""><input type="radio" name="photo_deletion_mode" value="delete_orphans"><span class="innerText"></span></label></li>
+        <li id="IMAGES_RECURSIVE"><label class=""><input type="radio" name="photo_deletion_mode" value="no_delete" checked="checked">{'delete only album, not photos'|translate}</label></li>
+      </ul>
+    </div>
+    
+
+    <div class="DeleteAlbumErrors icon-cancel">
+    </div>
+
+    <div class="DeleteAlbumFormValidation">
+      <div class="DeleteAlbumSubmit">
+        <span>{'Confirm deletion'|translate}</span>
+      </div>
+
+      <div class="DeleteAlbumCancel">
+        <span>{'Cancel'|translate}</span>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class='tree'> </div>

 <style>
@@ -141,4 +229,183 @@ var delay_autoOpen = {$delay_before_autoOpen}
      opacity: 0;
  }
 }
+
+#AddAlbum, #DeleteAlbum {
+  display: none;
+}
+
+.AddAlbumPopIn, .DeleteAlbumPopIn{
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%;
+  overflow: auto; 
+  background-color: rgba(0,0,0,0.7);
+}
+
+.AddAlbumPopInContainer, .DeleteAlbumPopInContainer{
+  display:flex;
+  position:absolute;
+  left:50%;
+  top: 50%;
+  transform:translate(-50%, -48%);
+  text-align:left;
+  padding:20px;
+  flex-direction:column;
+  border-radius:15px;
+  align-items:center;
+  width: 270px;
+}
+.DeleteAlbumPopInContainer {
+  width: 40%;
+  border-radius: 4px;
+  border-top: solid 7px #e74c3c;
+}
+
+.user-property-input {
+  color:#353535;
+  background-color:#F3F3F3;
+}
+
+.user-property-input {
+  width: 100%;
+  box-sizing:border-box;
+  font-size:1.1em;
+  padding:8px 16px;
+  border:none;
+}
+
+.user-property-label {
+  color:#A4A4A4;
+  font-weight:bold;
+  font-size:1.1em;
+  margin-bottom:5px;
+}
+
+.AddIconContainer, .DeleteIconContainer {
+  margin-top: 10px;
+}
+
+.AddIcon {
+  border-radius:50%;
+  padding:10px;
+  font-size: 2em;
+}
+
+.AddIconTitle {
+  font-size:1.4em;
+  font-weight:bold;
+  margin-bottom:20px;
+  margin-top:15px;
+  text-align: center;
+}
+.DeleteIconTitle {
+  font-size:1.7em;
+  font-weight:bold;
+  margin-bottom:10px;
+  margin-top:15px;
+  text-align: center;
+}
+
+.AddAlbumSubmit,
+.DeleteAlbumSubmit {
+  cursor:pointer;
+  font-weight:bold;
+  color: #3F3E40;
+  background-color: #FFA836;
+  padding: 10px;
+  margin: 20px;
+  font-size:1em;
+  margin-bottom:0;
+}
+
+.DeleteAlbumSubmit {
+  background-color: #e74c3c;
+  border-radius: 4px;
+  color: #fff;
+  transition: .1s;
+}
+
+.AddAlbumCancel {
+  color: #3F3E40;
+  font-weight: bold;
+  cursor: pointer;
+  font-size:1em;
+}
+
+.CloseAddAlbum{
+  position:absolute;
+  right:-40px;
+  top:-40px;
+  font-size:30px;
+}
+
+.AddAlbumPositionSelect {
+  display: flex;
+  flex-direction: column;
+}
+.AddAlbumInputContainer, .DeleteAlbumInputContainer {
+  width: 100%;
+  margin: 15px 0;
+}
+input[name="position"] {
+  margin-right: 5px;
+}
+
+.AddAlbumRadioInput {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
+}
+.AddAlbumRadioInput label,
+.deleteAlbumOptions label {
+  font-size: 12px;
+  font-weight: 600;
+}
+.AddAlbumFormValidation,
+.DeleteAlbumFormValidation {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+.AddAlbumCancel,
+.DeleteAlbumCancel {
+  cursor: pointer;
+  font-weight: bold;
+  color: #3F3E40;
+  background-color: #f3f3f3;
+  padding: 10px 20px;
+  margin: 20px;
+  margin-bottom: 20px;
+  margin-left: 10px;
+  font-size: 1em;
+  margin-bottom: 0;
+}
+.DeleteAlbumCancel {
+  background-color: #ecf0f1;
+  color: #000;
+  border-radius: 4px;
+  transition: .1s;
+}
+.DeleteAlbumCancel:hover {
+  background: #bdc3c7;
+}
+.AddAlbumSubmit,
+.DeleteAlbumSubmit {
+  margin-right: 10px;
+  padding: 10px 20px;
+}
+.DeleteAlbumSubmit:hover {
+  background: #c0392b;
+}
+
+.deleteAlbumOptions {
+  list-style-type: none;
+}
+.deleteAlbumOptions input{
+  margin-right: 5px;
+}
 </style>
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -5313,7 +5313,7 @@ input:checked + .slider:before, input:checked + .slider::after {
  position: relative;
 }

-.AddUserErrors, .update-user-fail {
+.AddUserErrors, .update-user-fail, .AddAlbumErrors {
  background-color: #ffcfcf;
  color: #ff5252;
  border-left:solid 3px red;
@@ -6255,19 +6255,27 @@ color:#FF7B00;
  color: black;
 }

-.AddUserPopInContainer {
+.AddUserPopInContainer,
+.AddAlbumPopInContainer,
+.DeleteAlbumPopInContainer {
  background-color: white;
 }

-.AddUserPopInContainer .AddIconTitle  {
+.AddUserPopInContainer .AddIconTitle,
+.AddAlbumPopInContainer .AddIconTitle,
+.DeleteAlbumPopInContainer .DeleteIconTitle  {
  color: #000000;
 }

-.AddUserPopInContainer .AddUserLabel {
+.AddUserPopInContainer .AddUserLabel,
+.AddAlbumPopInContainer .AddAlbumLabel,
+.DeleteAlbumPopInContainer .DeleteAlbumLabel {
  color: #3E3E3E;
 }

-.AddUserPopInContainer .AddUserInput {
+.AddUserPopInContainer .AddUserInput,
+.AddAlbumPopInContainer .AddAlbumInput,
+.DeleteAlbumPopInContainer .DeleteAlbumInput {
  background-color:white;
  border: solid 2px #D4D4D4;
 }
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -708,7 +708,7 @@ input:focus + .slider {

 /*UserList Pop in*/

-.CloseUserList{
+.CloseUserList, .CloseAddAlbum, #CloseDeleteAlbum{
  color:white;
 }

--- a/include/ws_functions/pwg.categories.php
+++ b/include/ws_functions/pwg.categories.php
@@ -572,6 +572,12 @@ function ws_categories_add($params, &$service)
 {
  include_once(PHPWG_ROOT_PATH.'admin/include/functions.php');

+  global $conf;
+
+  if ($params["position"] != "") {
+    $conf['newcat_default_position'] = $params["position"];
+  }
+
  $options = array();
  if (!empty($params['status']) and in_array($params['status'], array('private','public')))
  {
--- a/ws.php
+++ b/ws.php
@@ -582,6 +582,7 @@ function ws_addDefaultMethods( $arr )
                                'info'=>'public, private'),
        'commentable' =>  array('default'=>true,
                                'type'=>WS_TYPE_BOOL),
+        'position' =>     array('default'=>null),
        ),
      'Adds an album.',
      $ws_functions_root . 'pwg.categories.php',