File: /var/www/html/tmpr/../tmpr/../tmpr/..//tmpr/../tmpr/../tmpr/../wowZ/brand_folders.php
<?php
require_once __DIR__ . '/../config.php';
// Database connection
require_once __DIR__ . '/config.php';
$TEAMS_EMBED = isset($TEAMS_EMBED) && (bool)$TEAMS_EMBED;
$TEAMS_ID_PREFIX = isset($TEAMS_ID_PREFIX) ? (string)$TEAMS_ID_PREFIX : 'folders';
$TEAMS_ID_PREFIX = preg_replace('/[^a-zA-Z0-9_-]/', '', $TEAMS_ID_PREFIX);
$activeFolderId = isset($_GET['folder_id']) ? (int)$_GET['folder_id'] : 0;
if (!$TEAMS_EMBED) {
$params = $_GET;
unset($params['tab']);
$params = array_merge(['tab' => 'brand_folders'], $params);
header('Location: index.php?' . http_build_query($params));
exit;
}
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if (!function_exists('findOwnerColumn')) {
function findOwnerColumn(mysqli $conn, string $table): ?string {
$res = $conn->query("SHOW COLUMNS FROM `$table`");
if (!$res) { return null; }
$cols = [];
while ($row = $res->fetch_assoc()) { if (!empty($row['Field'])) { $cols[$row['Field']] = true; } }
foreach (['catalogid','created_by','user_id','owner_id','account_id'] as $c) { if (isset($cols[$c])) { return $c; } }
return null;
}
}
// Fetch folders from the database
$folders = [];
if ($userid) {
$foldersOwnerCol = findOwnerColumn($conn, 'brand_teams_folders');
if (!$foldersOwnerCol) {
$conn->query("ALTER TABLE brand_teams_folders ADD COLUMN catalogid INT NULL");
$foldersOwnerCol = findOwnerColumn($conn, 'brand_teams_folders');
}
if ($foldersOwnerCol) {
$stmt = $conn->prepare("SELECT * FROM brand_teams_folders WHERE `$foldersOwnerCol`=? ORDER BY id DESC");
if ($stmt) {
$stmt->bind_param('i', $userid);
$stmt->execute();
$result = $stmt->get_result();
while ($result && ($row = $result->fetch_assoc())) { $folders[] = $row; }
$stmt->close();
}
}
}
// Fetch users from the database (assuming you have a users table)
$users = [];
if ($userid) {
$usersCol = findOwnerColumn($conn, 'users');
if ($usersCol) {
$scope = 0;
$scopeStmt = $conn->prepare("SELECT `$usersCol` AS scope FROM users WHERE id=? LIMIT 1");
if ($scopeStmt) {
$scopeStmt->bind_param('i', $userid);
$scopeStmt->execute();
$sr = $scopeStmt->get_result();
$row = $sr ? $sr->fetch_assoc() : null;
$scope = (int)($row['scope'] ?? 0);
$scopeStmt->close();
}
if ($scope > 0) {
$uStmt = $conn->prepare("SELECT id, catalogname FROM users WHERE `$usersCol`=? ORDER BY catalogname ASC");
if ($uStmt) {
$uStmt->bind_param('i', $scope);
$uStmt->execute();
$userResult = $uStmt->get_result();
while ($userResult && ($row = $userResult->fetch_assoc())) { $users[] = $row; }
$uStmt->close();
}
}
}
if (!count($users)) {
$uStmt = $conn->prepare("SELECT id, catalogname FROM users WHERE id=? LIMIT 1");
if ($uStmt) {
$uStmt->bind_param('i', $userid);
$uStmt->execute();
$userResult = $uStmt->get_result();
while ($userResult && ($row = $userResult->fetch_assoc())) { $users[] = $row; }
$uStmt->close();
}
}
}
$activeFolder = null;
$folderAllowed = false;
$teams = [];
if ($userid && $activeFolderId > 0) {
$foldersOwnerCol = findOwnerColumn($conn, 'brand_teams_folders');
if (!$foldersOwnerCol) {
$conn->query("ALTER TABLE brand_teams_folders ADD COLUMN catalogid INT NULL");
$foldersOwnerCol = findOwnerColumn($conn, 'brand_teams_folders');
}
if ($foldersOwnerCol) {
$stmt = $conn->prepare("SELECT * FROM brand_teams_folders WHERE id=? LIMIT 1");
if ($stmt) {
$stmt->bind_param('i', $activeFolderId);
$stmt->execute();
$res = $stmt->get_result();
$activeFolder = $res ? $res->fetch_assoc() : null;
$stmt->close();
}
if ($activeFolder) {
if ((int)$activeFolder[$foldersOwnerCol] === (int)$userid) {
$folderAllowed = true;
} else {
$conn->query("CREATE TABLE IF NOT EXISTS brand_teams_folder_members (id INT AUTO_INCREMENT PRIMARY KEY, folder_id INT NOT NULL, user_id INT NOT NULL, role_id INT DEFAULT 2, added_by INT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY folder_user (folder_id,user_id))");
$chk = $conn->prepare("SELECT 1 FROM brand_teams_folder_members WHERE folder_id=? AND user_id=? LIMIT 1");
if ($chk) {
$chk->bind_param('ii', $activeFolderId, $userid);
$chk->execute();
$r = $chk->get_result();
if ($r && $r->num_rows) { $folderAllowed = true; }
$chk->close();
}
}
}
}
if ($folderAllowed) {
$teamsOwnerCol = findOwnerColumn($conn, 'brand_teams');
$teamsResult = null;
if ($teamsOwnerCol) {
$teamsStmt = $conn->prepare("SELECT DISTINCT t.* FROM brand_teams t LEFT JOIN brand_team_members m ON m.team_id=t.id AND m.user_id=? WHERE m.user_id IS NOT NULL OR t.`$teamsOwnerCol`=? ORDER BY t.id DESC");
if ($teamsStmt) {
$teamsStmt->bind_param('ii', $userid, $userid);
$teamsStmt->execute();
$teamsResult = $teamsStmt->get_result();
$teamsStmt->close();
}
} else {
$teamsStmt = $conn->prepare("SELECT DISTINCT t.* FROM brand_teams t JOIN brand_team_members m ON m.team_id=t.id WHERE m.user_id=? ORDER BY t.id DESC");
if ($teamsStmt) {
$teamsStmt->bind_param('i', $userid);
$teamsStmt->execute();
$teamsResult = $teamsStmt->get_result();
$teamsStmt->close();
}
}
if ($teamsResult && $teamsResult->num_rows > 0) {
while ($row = $teamsResult->fetch_assoc()) { $teams[] = $row; }
}
}
}
$conn->close();
?>
<?php if ($TEAMS_EMBED):
$backdropId = $TEAMS_ID_PREFIX . 'Backdrop';
$addMemberSheetId = $TEAMS_ID_PREFIX . 'AddMemberSheet';
$updateFolderModalId = $TEAMS_ID_PREFIX . 'UpdateFolderModal';
$addContentSheetId = $TEAMS_ID_PREFIX . 'AddContentSheet';
$shareToTeamSheetId = $TEAMS_ID_PREFIX . 'ShareToTeamSheet';
$folderIdForMemberId = $TEAMS_ID_PREFIX . 'FolderIdForMember';
$userSelectId = $TEAMS_ID_PREFIX . 'UserSelect';
$roleSelectId = $TEAMS_ID_PREFIX . 'RoleSelect';
$closeMemberSheetId = $TEAMS_ID_PREFIX . 'CloseMemberSheet';
$saveMemberButtonId = $TEAMS_ID_PREFIX . 'SaveMemberButton';
$closeUpdateFolderId = $TEAMS_ID_PREFIX . 'CloseUpdateFolder';
$updatefolderNameId = $TEAMS_ID_PREFIX . 'UpdateFolderName';
$saveUpdateButtonId = $TEAMS_ID_PREFIX . 'SaveUpdateButton';
?>
<?php if ($activeFolderId > 0): ?>
<?php if (!$userid): ?>
<div class="teams-card"><div class="teams-card-title">Unauthorized</div><div class="teams-card-meta">Please sign in.</div></div>
<?php return; ?>
<?php endif; ?>
<?php if (!$folderAllowed || !$activeFolder): ?>
<div class="teams-card"><div class="teams-card-title">Access denied</div><div class="teams-card-meta">You do not have access to this folder.</div></div>
<?php return; ?>
<?php endif; ?>
<div class="teams-section" style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
<div style="display:flex;align-items:center;gap:10px;min-width:240px">
<a href="index.php?tab=brand_folders" class="brand-btn small" title="Back to folders" aria-label="Back to folders"><span class="material-icons">arrow_back</span>Folders</a>
<div style="font-weight:800;color:var(--color-text-dark, #383a3f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
<?= htmlspecialchars((string)($activeFolder['name'] ?? 'Folder')) ?>
</div>
</div>
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end">
<a href="view_folder.php?folder_id=<?= (int)$activeFolderId ?>" class="brand-btn small" title="View folder members" aria-label="View folder members"><span class="material-icons">visibility</span>View</a>
<button type="button" id="openAddContent" class="brand-btn small primary" title="Add content" aria-label="Add content"><span class="material-icons">add</span>Add content</button>
<button type="button" id="openShareFolder" class="brand-btn small" title="Share folder content to a team" aria-label="Share folder content to a team"><span class="material-icons">share</span>Share</button>
</div>
</div>
<div id="folderContentContainer"></div>
<div id="<?= htmlspecialchars($backdropId) ?>" class="teams-sheet-backdrop"></div>
<div id="<?= htmlspecialchars($addContentSheetId) ?>" class="brand-modal" style="display:none">
<div class="brand-modal-close" id="closeAddContent" data-target="#<?= htmlspecialchars($addContentSheetId) ?>"><span class="material-icons">close</span></div>
<div class="brand-modal-wrap">
<div class="brand-modal-inner large">
<div class="brand-tabs">
<ul class="brand-tabs-menu">
<li class="active" data-target="#modal-template-library"><span class="material-icons">photo_library</span>Templates</li>
</ul>
<div id="modal-template-library" class="brand-tab active" style="max-height: calc(100vh - 200px); overflow-y: auto">
<div class="brand-templates-content">
<div class="brand-grid-wrap" style="padding:16px">
<div id="folderAddableContentContainer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="<?= htmlspecialchars($shareToTeamSheetId) ?>" class="teams-sheet" style="display:none">
<div class="teams-sheet-header">
<h5><span class="material-icons">share</span>Share to Team</h5>
<button class="brand-btn" id="closeShareToTeam"><span class="material-icons">close</span></button>
</div>
<div class="teams-sheet-body">
<input type="hidden" id="folderPictureIdForShare">
<div>
<label for="folderTeamSelect">Select Team</label>
<select id="folderTeamSelect" class="brand-select">
<?php foreach ($teams as $team): ?>
<option value="<?= (int)$team['id'] ?>"><?= htmlspecialchars((string)$team['name']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div style="margin-top:12px">
<label for="folderUserIdentifierForShare">Or share with user (email or username)</label>
<input id="folderUserIdentifierForShare" type="text" class="brand-form-field" autocomplete="off" placeholder="email@example.com or username">
</div>
</div>
<div class="teams-sheet-footer" style="display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap">
<button type="button" id="folderShareToTeamBtn" class="brand-btn primary"><span class="material-icons">groups</span>Share to team</button>
<button type="button" id="folderShareToUserBtn" class="brand-btn"><span class="material-icons">person_add</span>Share to user</button>
</div>
</div>
<script>
$(document).ready(function() {
var folderId = <?= (int)$activeFolderId ?>;
var backdropSelector = '#<?= addslashes($backdropId) ?>';
var addContentSheetSelector = '#<?= addslashes($addContentSheetId) ?>';
var shareToTeamSheetSelector = '#<?= addslashes($shareToTeamSheetId) ?>';
function showNotice(kind, text){
var $n = $('#notification');
if (!$n.length) return;
$n.removeClass('d-none alert-success alert-danger');
$n.addClass(kind === 'success' ? 'alert-success' : 'alert-danger');
$n.text(text);
window.clearTimeout($n.get(0)._hideTimer);
$n.get(0)._hideTimer = window.setTimeout(function(){
$n.addClass('d-none');
$n.removeClass('alert-success alert-danger');
}, 3000);
}
function openSheet(selector){
$(backdropSelector).show();
$(selector).show();
document.body.classList.add('teams-modal-open');
}
function closeSheets(){
$(backdropSelector).hide();
$(addContentSheetSelector).hide();
$(shareToTeamSheetSelector).hide();
document.body.classList.remove('teams-modal-open');
}
function loadFolderContent(pageNumber){
$('#folderContentContainer').html('<div class="teams-grid"><div class="teams-card"><div class="teams-thumb skeleton"></div><div class="teams-card-title skeleton" style="height:16px;width:60%"></div><div class="teams-card-meta skeleton" style="height:12px;width:40%;margin-top:8px"></div></div><div class="teams-card"><div class="teams-thumb skeleton"></div><div class="teams-card-title skeleton" style="height:16px;width:55%"></div><div class="teams-card-meta skeleton" style="height:12px;width:35%;margin-top:8px"></div></div><div class="teams-card"><div class="teams-thumb skeleton"></div><div class="teams-card-title skeleton" style="height:16px;width:50%"></div><div class="teams-card-meta skeleton" style="height:12px;width:30%;margin-top:8px"></div></div></div>');
$.ajax({
url: 'process/folders/get_folder_content.php',
type: 'GET',
data: { folder_id: folderId, page: pageNumber },
success: function(response) {
let data;
try { data = JSON.parse(response); } catch(e) { data = { output: '' }; }
$('#folderContentContainer').html(data.output || '');
},
error: function() {
showNotice('error', 'Error loading folder content.');
}
});
}
function loadAddableContent(pageNumber){
$('#folderAddableContentContainer').html(
'<div class="brand-grid template-grid five-column template-selection">' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'<div class="grid-item"><div class="brand-masonry-item-inner"><div class="brand-img-wrap skeleton" style="height:180px;border-radius:12px"></div><div class="brand-masonry-item-desc skeleton" style="height:16px;margin-top:10px"></div></div></div>' +
'</div>'
);
$.ajax({
url: 'process/folders/get_addable_content.php',
type: 'GET',
data: { folder_id: folderId, page: pageNumber },
success: function(response) {
let data;
try { data = JSON.parse(response); } catch(e) { data = { output: '' }; }
$('#folderAddableContentContainer').html(data.output || '');
},
error: function() {
showNotice('error', 'Error loading content.');
}
});
}
window.loadFolderContent = loadFolderContent;
window.loadFolderAddableContent = loadAddableContent;
loadFolderContent(1);
$('#openAddContent').on('click', function(){
$(addContentSheetSelector).show();
document.body.classList.add('teams-modal-open');
loadAddableContent(1);
});
$('#openShareFolder').on('click', function(){
$('#folderPictureIdForShare').val('0');
$('#folderUserIdentifierForShare').val('');
openSheet(shareToTeamSheetSelector);
});
$(document).on('click', '.folder-add-button', function(){
var pictureId = $(this).data('id');
$.ajax({
url: 'process/folders/add_content.php',
type: 'POST',
data: { folder_id: folderId, picture_id: pictureId },
success: function(response){
let data;
try { data = JSON.parse(response); } catch(e) { data = { success: false, message: 'Invalid server response.' }; }
if (data.success) {
showNotice('success', 'Added to folder.');
closeSheets();
loadFolderContent(1);
} else {
showNotice('error', data.message || 'Could not add to folder.');
}
},
error: function(){
showNotice('error', 'Error adding content.');
}
});
});
$(document).on('click', '.folder-share-button', function(){
var pictureId = $(this).data('id');
$('#folderPictureIdForShare').val(pictureId);
$('#folderUserIdentifierForShare').val('');
openSheet(shareToTeamSheetSelector);
});
$('#folderShareToTeamBtn').on('click', function(){
var pictureId = $('#folderPictureIdForShare').val();
var teamId = $('#folderTeamSelect').val();
$.ajax({
url: 'process/folders/share_to_team.php',
type: 'POST',
data: { folder_id: folderId, picture_id: pictureId, team_id: teamId },
success: function(response){
let data;
try { data = JSON.parse(response); } catch(e) { data = { success: false, message: 'Invalid server response.' }; }
if (data.success) {
if (String(pictureId) === '0') {
showNotice('success', 'Shared folder to team.');
} else {
showNotice('success', 'Shared to team.');
}
closeSheets();
} else {
showNotice('error', data.message || 'Share failed.');
}
},
error: function(){
showNotice('error', 'Error sharing to team.');
}
});
});
$('#folderShareToUserBtn').on('click', function(){
var pictureId = $('#folderPictureIdForShare').val();
var userIdentifier = String($('#folderUserIdentifierForShare').val() || '').trim();
if (!userIdentifier) {
showNotice('error', 'Enter an email or username.');
return;
}
$.ajax({
url: 'process/folders/share_to_user.php',
type: 'POST',
data: { folder_id: folderId, picture_id: pictureId, user_identifier: userIdentifier },
success: function(response){
let data;
try { data = JSON.parse(response); } catch(e) { data = { success: false, message: 'Invalid server response.' }; }
if (data.success) {
if (String(pictureId) === '0') {
showNotice('success', 'Shared folder to user.');
} else {
showNotice('success', 'Shared to user.');
}
closeSheets();
} else {
showNotice('error', data.message || 'Share failed.');
}
},
error: function(){
showNotice('error', 'Error sharing to user.');
}
});
});
$('#closeAddContent').on('click', closeSheets);
$('#closeShareToTeam').on('click', closeSheets);
$(backdropSelector).on('click', closeSheets);
$(document).on('keydown', function(e){ if (e.key === 'Escape') closeSheets(); });
});
</script>
<?php return; ?>
<?php endif; ?>
<div class="teams-section" style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
<div class="teams-search" style="flex:1;min-width:240px;margin-bottom:0">
<div class="brand-input-with-icon"><span class="material-icons">search</span><input id="foldersSearch" class="brand-form-field" type="text" autocomplete="off" placeholder="Search folders"></div>
</div>
<form id="folderForm" class="teams-inline" style="flex:1;min-width:280px">
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
<label for="folderName" style="margin:0;white-space:nowrap">Folder Name</label>
<input type="text" class="brand-form-field" id="folderName" required style="flex:1;min-width:180px">
<button type="submit" class="brand-btn primary" style="white-space:nowrap"><span class="material-icons">create_new_folder</span>Create Folder</button>
</div>
</form>
</div>
<br><br>
<h2 class="teams-subtitle">Folders List</h2>
<div id="foldersList" class="teams-grid teams-grid-spacious">
<?php foreach ($folders as $folder): ?>
<div class="team-card team-card--square">
<div class="team-card-tools">
<button class="brand-btn small icon-only update-folder" data-id="<?= $folder['id'] ?>" title="Update folder" aria-label="Update folder"><span class="material-icons">edit</span></button>
<button class="brand-btn small danger icon-only delete-folder" data-id="<?= $folder['id'] ?>" title="Delete folder" aria-label="Delete folder"><span class="material-icons">delete</span></button>
</div>
<div class="team-card-header">
<span class="team-avatar"><span class="material-icons">folder</span></span>
<span class="team-name"><?= htmlspecialchars($folder['name']) ?></span>
</div>
<div class="team-card-actions">
<button class="brand-btn small add-member" data-id="<?= $folder['id'] ?>" title="Add member" aria-label="Add member"><span class="material-icons">person_add</span>Add member</button>
<div class="team-card-actions-secondary">
<a href="view_folder.php?folder_id=<?= $folder['id'] ?>" class="brand-btn small" title="View folder" aria-label="View folder"><span class="material-icons">visibility</span>Folder</a>
<a href="index.php?tab=brand_folders&folder_id=<?= $folder['id'] ?>" class="brand-btn small" title="View content" aria-label="View content"><span class="material-icons">image</span>Content</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<div id="<?= htmlspecialchars($backdropId) ?>" class="teams-sheet-backdrop"></div>
<div id="<?= htmlspecialchars($addMemberSheetId) ?>" class="teams-sheet" style="display:none">
<div class="teams-sheet-header">
<h5><span class="material-icons">person_add</span>Add User to Folder</h5>
<button class="brand-btn" id="<?= htmlspecialchars($closeMemberSheetId) ?>"><span class="material-icons">close</span></button>
</div>
<div class="teams-sheet-body">
<input type="hidden" id="<?= htmlspecialchars($folderIdForMemberId) ?>">
<div>
<label for="<?= htmlspecialchars($userSelectId) ?>">Select User</label>
<select id="<?= htmlspecialchars($userSelectId) ?>" class="brand-select">
<?php foreach ($users as $user): ?>
<option value="<?= $user['id'] ?>"><?= htmlspecialchars($user['catalogname']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div>
<label for="<?= htmlspecialchars($roleSelectId) ?>">Select Role</label>
<select id="<?= htmlspecialchars($roleSelectId) ?>" class="brand-select">
<option value="2">Member</option>
<option value="3">Designer</option>
</select>
</div>
</div>
<div class="teams-sheet-footer">
<button type="button" id="<?= htmlspecialchars($saveMemberButtonId) ?>" class="brand-btn primary"><span class="material-icons">check</span>Add Member</button>
</div>
</div>
<div id="<?= htmlspecialchars($updateFolderModalId) ?>" class="teams-sheet" style="display:none">
<div class="teams-sheet-header">
<h5><span class="material-icons">edit</span>Update Folder Name</h5>
<button class="brand-btn" id="<?= htmlspecialchars($closeUpdateFolderId) ?>"><span class="material-icons">close</span></button>
</div>
<div class="teams-sheet-body">
<input type="text" id="<?= htmlspecialchars($updatefolderNameId) ?>" class="brand-form-field" required>
</div>
<div class="teams-sheet-footer">
<button type='button' id='<?= htmlspecialchars($saveUpdateButtonId) ?>' class='brand-btn primary'><span class="material-icons">check</span>Save changes</button>
</div>
</div>
<script>
$(document).ready(function() {
var backdropSelector = '#<?= addslashes($backdropId) ?>';
var addMemberSheetSelector = '#<?= addslashes($addMemberSheetId) ?>';
var updateFolderModalSelector = '#<?= addslashes($updateFolderModalId) ?>';
function openSheet(selector){
$(backdropSelector).show();
$(selector).show();
document.body.classList.add('teams-modal-open');
}
function closeSheets(){
$(backdropSelector).hide();
$(addMemberSheetSelector).hide();
$(updateFolderModalSelector).hide();
document.body.classList.remove('teams-modal-open');
}
$('#folderForm').on('submit', function(e) {
e.preventDefault();
const folderName = $('#folderName').val();
$.ajax({
url: 'process/folders/create_folder.php',
type: 'POST',
data: { name: folderName },
success: function(response) {
const data = JSON.parse(response);
$('#notification').removeClass('d-none');
if (data.success) {
$('#notification').addClass('alert-success').text('Folder created successfully!');
$('#foldersList').append(
'<div class="team-card team-card--square">' +
'<div class="team-card-tools">' +
'<button class="brand-btn small icon-only update-folder" data-id="' + data.folder.id + '" title="Update folder" aria-label="Update folder"><span class="material-icons">edit</span></button>' +
'<button class="brand-btn small danger icon-only delete-folder" data-id="' + data.folder.id + '" title="Delete folder" aria-label="Delete folder"><span class="material-icons">delete</span></button>' +
'</div>' +
'<div class="team-card-header">' +
'<span class="team-avatar"><span class="material-icons">folder</span></span>' +
'<span class="team-name">' + data.folder.name + '</span>' +
'</div>' +
'<div class="team-card-actions">' +
'<button class="brand-btn small add-member" data-id="' + data.folder.id + '" title="Add member" aria-label="Add member"><span class="material-icons">person_add</span>Add member</button>' +
'<div class="team-card-actions-secondary">' +
'<a href="view_folder.php?folder_id=' + data.folder.id + '" class="brand-btn small" title="View folder" aria-label="View folder"><span class="material-icons">visibility</span>Folder</a>' +
'<a href="index.php?tab=brand_folders&folder_id=' + data.folder.id + '" class="brand-btn small" title="View content" aria-label="View content"><span class="material-icons">image</span>Content</a>' +
'</div>' +
'</div>' +
'</div>'
);
$('#folderName').val('');
} else {
$('#notification').addClass('alert-danger').text(data.message);
}
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
},
error: function() {
$('#notification').removeClass('d-none').addClass('alert-danger').text('Error creating folder.');
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
}
});
});
$(document).on('click', '#foldersList .update-folder', function() {
const folderId = $(this).data('id');
const currentName = $(this).closest('.team-card').find('.team-name').text().trim();
$('#<?= addslashes($updatefolderNameId) ?>').val(currentName);
$('#<?= addslashes($saveUpdateButtonId) ?>').data('id', folderId);
openSheet(updateFolderModalSelector);
});
$('#<?= addslashes($saveUpdateButtonId) ?>').on('click', function() {
const folderId = $(this).data('id');
const updatedName = $('#<?= addslashes($updatefolderNameId) ?>').val();
$.ajax({
url: 'process/folders/update_folder.php',
type: 'POST',
data: { id: folderId, name: updatedName },
success: function(response) {
const data = JSON.parse(response);
if (data.success) {
$('#notification').removeClass('d-none').addClass('alert-success').text('folder updated successfully!');
$('button[data-id=\"' + folderId + '\"]').closest('.team-card').find('.team-name').text(data.folder.name);
closeSheets();
} else {
$('#notification').removeClass('d-none').addClass('alert-danger').text(data.message);
}
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
},
error: function() {
$('#notification').removeClass('d-none').addClass('alert-danger').text('Error updating folder.');
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
}
});
});
$(document).on('click', '#foldersList .delete-folder', function() {
const folderId = $(this).data('id');
if (confirm("Are you sure you want to delete this folder?")) {
$.ajax({
url: 'process/folders/delete_folder.php',
type: 'POST',
data: { id: folderId },
success: function(response) {
const data = JSON.parse(response);
if (data.success) {
$('#notification').removeClass('d-none').addClass('alert-success').text('folder deleted successfully!');
$('button[data-id=\"' + folderId + '\"]').closest('.team-card').remove();
} else {
$('#notification').removeClass('d-none').addClass('alert-danger').text(data.message);
}
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
},
error: function() {
$('#notification').removeClass('d-none').addClass('alert-danger').text('Error deleting folder.');
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
}
});
}
});
$(document).on('click', '#foldersList .add-member', function() {
const folderId = $(this).data('id');
$('#<?= addslashes($folderIdForMemberId) ?>').val(folderId);
openSheet(addMemberSheetSelector);
});
$('#<?= addslashes($closeUpdateFolderId) ?>').on('click', closeSheets);
$('#foldersSearch').on('input', function(){
var q = $(this).val().toLowerCase();
$('#foldersList .team-card').each(function(){
var name = $(this).find('.team-name').text().toLowerCase();
$(this).toggle(name.indexOf(q) !== -1);
});
});
$('#<?= addslashes($closeMemberSheetId) ?>').on('click', closeSheets);
$(backdropSelector).on('click', closeSheets);
$(document).on('keydown', function(e){ if (e.key === 'Escape') closeSheets(); });
$('#<?= addslashes($saveMemberButtonId) ?>').on('click', function() {
const folderId = $('#<?= addslashes($folderIdForMemberId) ?>').val();
const userId = $('#<?= addslashes($userSelectId) ?>').val();
const roleId = $('#<?= addslashes($roleSelectId) ?>').val();
if (!folderId) {
$('#notification').removeClass('d-none').addClass('alert-danger').text('Missing folder.');
setTimeout(function() {
$('#notification').addClass('d-none').removeClass('alert-success alert-danger');
}, 3000);
return;
}
if (!userId) {
$('#notification').removeClass('d-none').addClass('alert-danger').text('Select a user.');
setTimeout(function() {
$('#notification').addClass('d-none').removeClass('alert-success alert-danger');
}, 3000);
return;
}
$.ajax({
url: 'process/folders/add_member.php',
type: 'POST',
data: { folder_id: folderId, user_id: userId, role_id: roleId },
success: function(response) {
let data = {};
try { data = JSON.parse(response); } catch (e) { data = { success: false, message: ('Invalid response. ' + String(response || '')).slice(0, 240) }; }
if (data.success) {
$('#notification')
.removeClass('d-none')
.addClass('alert-success')
.text(data.message || 'User added to folder successfully!');
closeSheets();
} else {
$('#notification')
.removeClass('d-none')
.addClass('alert-danger')
.text(data.message);
}
setTimeout(function() {
$('#notification')
.addClass('d-none')
.removeClass('alert-success alert-danger');
}, 3000);
},
error: function() {
$('#notification')
.removeClass('d-none')
.addClass('alert-danger')
.text('Error adding member.');
setTimeout(function() {
$('#notification')
.addClass('d-none')
.removeClass('alert-success alert-danger');
}, 3000);
}
});
});
});
</script>
<?php return; ?>
<?php endif; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Folders</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<?php $rand = rand(10,299993); ?>
<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>/beautiful/styles-cleaned.css?<?php echo $rand; ?>">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/beautiful/brand-cleaned.css?<?php echo $rand; ?>" media="all" onload="this.media='all'">
<link href="<?php echo BASE_URL; ?>/css/style-cleaned.css?<?php echo $rand; ?>" rel="stylesheet" type="text/css">
<link id="brand-theme-link" href="<?php echo BASE_URL; ?>/css/light-cleaned.css?<?php echo $rand; ?>" rel="stylesheet" type="text/css">
<?php include("../includes/sections/styles.php"); ?>
<?php include("../includes/sections/scripts.php"); ?>
</head>
<body id="brand" class="light-theme teams-page" style="background-color:#ffffff!important">
<div class="content-gutter content-limit-wide" style="padding-top: 10px;">
<div class="teams-ui">
<div class="teams-header">
<h1 class="teams-title"><span class="material-icons">folder</span>Folders</h1>
<div class="teams-actions">
<a href="index.php" class="brand-btn"><span class="material-icons">home</span>Teams home</a>
<a href="share.php" class="brand-btn"><span class="material-icons">share</span>Share</a>
</div>
</div>
<?php $activeTab = 'brand_folders'; include __DIR__ . '/nav.php'; ?>
<!-- Notification Div -->
<div id="notification" class="alert d-none" role="alert"></div>
<div class="teams-section" style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
<div class="teams-search" style="flex:1;min-width:240px;margin-bottom:0">
<div class="brand-input-with-icon"><span class="material-icons">search</span><input id="foldersSearch" class="brand-form-field" type="text" autocomplete="off" placeholder="Search folders"></div>
</div>
<form id="folderForm" class="teams-inline" style="flex:1;min-width:280px">
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
<label for="folderName" style="margin:0;white-space:nowrap">Folder Name</label>
<input type="text" class="brand-form-field" id="folderName" required style="flex:1;min-width:180px">
<button type="submit" class="brand-btn primary" style="white-space:nowrap"><span class="material-icons">create_new_folder</span>Create Folder</button>
</div>
</form>
</div>
<br><br>
<h2 class="teams-subtitle">Folders List</h2>
<div id="foldersList" class="teams-grid teams-grid-spacious">
<?php foreach ($folders as $folder): ?>
<div class="team-card team-card--square">
<div class="team-card-tools">
<button class="brand-btn small icon-only update-folder" data-id="<?= $folder['id'] ?>" title="Update folder" aria-label="Update folder"><span class="material-icons">edit</span></button>
<button class="brand-btn small danger icon-only delete-folder" data-id="<?= $folder['id'] ?>" title="Delete folder" aria-label="Delete folder"><span class="material-icons">delete</span></button>
</div>
<div class="team-card-header">
<span class="team-avatar"><span class="material-icons">folder</span></span>
<span class="team-name"><?= htmlspecialchars($folder['name']) ?></span>
</div>
<div class="team-card-actions">
<button class="brand-btn small add-member" data-id="<?= $folder['id'] ?>" title="Add member" aria-label="Add member"><span class="material-icons">person_add</span>Add member</button>
<div class="team-card-actions-secondary">
<a href="view_folder.php?folder_id=<?= $folder['id'] ?>" class="brand-btn small" title="View folder" aria-label="View folder"><span class="material-icons">visibility</span>View folder</a>
<a href="index.php?tab=brand_folders&folder_id=<?= $folder['id'] ?>" class="brand-btn small" title="View content" aria-label="View content"><span class="material-icons">image</span>Content</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<div id="teamsBackdrop" class="teams-sheet-backdrop"></div>
<div id="addMemberSheet" class="teams-sheet" style="display:none">
<div class="teams-sheet-header">
<h5><span class="material-icons">person_add</span>Add User to Folder</h5>
<button class="brand-btn" id="closeMemberSheet"><span class="material-icons">close</span></button>
</div>
<div class="teams-sheet-body">
<input type="hidden" id="folderIdForMember">
<div>
<label for="userSelect">Select User</label>
<select id="userSelect" class="brand-select">
<?php foreach ($users as $user): ?>
<option value="<?= $user['id'] ?>"><?= htmlspecialchars($user['catalogname']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div>
<label for="roleSelect">Select Role</label>
<select id="roleSelect" class="brand-select">
<option value="2">Member</option>
<option value="3">Designer</option>
</select>
</div>
</div>
<div class="teams-sheet-footer">
<button type="button" id="saveMemberButton" class="brand-btn primary"><span class="material-icons">check</span>Add Member</button>
</div>
</div>
<div id="updateFolderModal" class="teams-sheet" style="display:none">
<div class="teams-sheet-header">
<h5><span class="material-icons">edit</span>Update Folder Name</h5>
<button class="brand-btn" id="closeUpdateFolder"><span class="material-icons">close</span></button>
</div>
<div class="teams-sheet-body">
<input type="text" id="updatefolderName" class="brand-form-field" required>
</div>
<div class="teams-sheet-footer">
<button type='button' id='saveUpdateButton' class='brand-btn primary'><span class="material-icons">check</span>Save changes</button>
</div>
</div>
<script>
// Existing jQuery code...-label="Close">
// <span aria-hidden="true">×</span>
// </button>
$(document).ready(function() {
function openSheet(selector){
$('#teamsBackdrop').show();
$(selector).show();
document.body.classList.add('teams-modal-open');
}
function closeSheets(){
$('#teamsBackdrop').hide();
$('#addMemberSheet').hide();
$('#updateFolderModal').hide();
document.body.classList.remove('teams-modal-open');
}
$('#folderForm').on('submit', function(e) {
e.preventDefault();
const folderName = $('#folderName').val();
$.ajax({
url: 'process/folders/create_folder.php',
type: 'POST',
data: { name: folderName },
success: function(response) {
const data = JSON.parse(response);
$('#notification').removeClass('d-none');
if (data.success) {
$('#notification').addClass('alert-success').text('Folder created successfully!');
$('#foldersList').append('<div class=\"team-card\"><div class=\"team-card-header\"><span class=\"material-icons\">folder</span><span class=\"team-name\">'+ data.folder.name +'</span></div><div class=\"team-card-actions\"><button class=\"brand-btn small update-folder\" data-id=\"'+ data.folder.id +'\"><span class=\"material-icons\">edit</span>Update</button><button class=\"brand-btn small danger delete-folder\" data-id=\"'+ data.folder.id +'\"><span class=\"material-icons\">delete</span>Delete</button><button class=\"brand-btn small add-member\" data-id=\"'+ data.folder.id +'\"><span class=\"material-icons\">person_add</span>Add</button><a href=\"view_folder.php?folder_id='+ data.folder.id +'\" class=\"brand-btn small\"><span class=\"material-icons\">visibility</span>View</a><a href=\"index.php?tab=brand_folders&folder_id='+ data.folder.id +'\" class=\"brand-btn small\"><span class=\"material-icons\">image</span>Content</a></div></div>');
$('#folderName').val('');
} else {
$('#notification').addClass('alert-danger').text(data.message);
}
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
},
error: function() {
$('#notification').removeClass('d-none').addClass('alert-danger').text('Error creating folder.');
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
}
});
});
// Update folder
$(document).on('click', '.update-folder', function() {
const folderId = $(this).data('id');
const currentName = $(this).closest('.team-card').find('.team-name').text().trim();
$('#updatefolderName').val(currentName);
$('#saveUpdateButton').data('id', folderId); // Store folder ID in button
openSheet('#updateFolderModal');
});
$('#saveUpdateButton').on('click', function() {
const folderId = $(this).data('id');
const updatedName = $('#updatefolderName').val();
$.ajax({
url: 'process/folders/update_folder.php',
type: 'POST',
data: { id: folderId, name: updatedName },
success: function(response) {
const data = JSON.parse(response);
if (data.success) {
$('#notification').removeClass('d-none').addClass('alert-success').text('folder updated successfully!');
$('button[data-id="' + folderId + '"]').closest('.team-card').find('.team-name').text(data.folder.name);
closeSheets();
} else {
$('#notification').removeClass('d-none').addClass('alert-danger').text(data.message);
}
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
},
error: function() {
$('#notification').removeClass('d-none').addClass('alert-danger').text('Error updating folder.');
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
}
});
});
// Delete folder
$(document).on('click', '.delete-folder', function() {
const folderId = $(this).data('id');
if (confirm("Are you sure you want to delete this folder?")) {
$.ajax({
url: 'process/folders/delete_folder.php',
type: 'POST',
data: { id: folderId },
success: function(response) {
const data = JSON.parse(response);
if (data.success) {
$('#notification').removeClass('d-none').addClass('alert-success').text('folder deleted successfully!');
$('button[data-id="' + folderId + '"]').closest('.team-card').remove();
} else {
$('#notification').removeClass('d-none').addClass('alert-danger').text(data.message);
}
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
},
error: function() {
$('#notification').removeClass('d-none').addClass('alert-danger').text('Error deleting folder.');
setTimeout(function() {
$('#notification').addClass('d-none');
$('#notification').removeClass('alert-success alert-danger');
}, 3000);
}
});
}
});
// Add Member
$(document).on('click', '.add-member', function() {
const folderId = $(this).data('id');
$('#folderIdForMember').val(folderId); // Store folder ID in hidden input
openSheet('#addMemberSheet');
});
$('#closeUpdateFolder').on('click', closeSheets);
$('#foldersSearch').on('input', function(){
var q = $(this).val().toLowerCase();
$('#foldersList .team-card').each(function(){
var name = $(this).find('.team-name').text().toLowerCase();
$(this).toggle(name.indexOf(q) !== -1);
});
});
$('#closeMemberSheet').on('click', closeSheets);
$('#teamsBackdrop').on('click', closeSheets);
$(document).on('keydown', function(e){ if (e.key === 'Escape') closeSheets(); });
$('#saveMemberButton').on('click', function() {
const folderId = $('#folderIdForMember').val();
const userId = $('#userSelect').val();
const roleId = $('#roleSelect').val();
$.ajax({
url: 'process/folders/add_member.php',
type: 'POST',
data: { folder_id: folderId, user_id: userId, role_id: roleId },
success: function(response) {
let data = {};
try { data = JSON.parse(response); } catch (e) { data = { success: false, message: ('Invalid response. ' + String(response || '')).slice(0, 240) }; }
if (data.success) {
$('#notification')
.removeClass('d-none')
.addClass('alert-success')
.text(data.message || 'User added to folder successfully!');
closeSheets();
} else {
$('#notification')
.removeClass('d-none')
.addClass('alert-danger')
.text(data.message);
}
setTimeout(function() {
$('#notification')
.addClass('d-none')
.removeClass('alert-success alert-danger');
}, 3000);
},
error: function() {
$('#notification')
.removeClass('d-none')
.addClass('alert-danger')
.text('Error adding member.');
setTimeout(function() {
$('#notification')
.addClass('d-none')
.removeClass('alert-success alert-danger');
}, 3000);
}
});
});
});
</script>
</body>
</html>