feat: Implement Media Matching Workflow
- Added matching wizard to MediaManager.html for linking Drive files to orphaned Shopify media on load. - Updated MediaService.ts to extract filenames from Shopify URLs for better matching. - Added linkDriveFileToShopifyMedia method to MediaService and exposed it via mediaHandlers and global.ts. - Improved UX in MediaManager with image transition clearing and button state feedback.
This commit is contained in:
Ben Miller
@ -484,6 +484,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Matching Modal -->
|
||||
<div id="matching-modal" class="modal-overlay" style="z-index: 150;">
|
||||
<div class="card"
|
||||
style="width: 600px; max-width: 90%; text-align: center; padding: 24px; position: relative; background: #fff;">
|
||||
<h3 style="margin-top:0;">Link Media?</h3>
|
||||
<p style="color:var(--text-secondary); margin-bottom: 24px;">
|
||||
We found a matching file in Shopify. Should these be linked?
|
||||
</p>
|
||||
|
||||
<div style="display: flex; justify-content: center; gap: 24px; margin-bottom: 24px;">
|
||||
<!-- Drive Side -->
|
||||
<div style="flex: 1;">
|
||||
<div style="font-size: 12px; font-weight: 600; margin-bottom: 8px;">Drive File</div>
|
||||
<img id="match-drive-img"
|
||||
style="width: 100%; height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc;">
|
||||
<div id="match-drive-name"
|
||||
style="font-size: 11px; margin-top: 4px; color: var(--text-secondary); word-break: break-all;">filename.jpg
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icon -->
|
||||
<div style="display: flex; align-items: center; font-size: 24px; color: var(--text-secondary);">🔗</div>
|
||||
|
||||
<!-- Shopify Side -->
|
||||
<div style="flex: 1;">
|
||||
<div style="font-size: 12px; font-weight: 600; margin-bottom: 8px;">Shopify Media</div>
|
||||
<img id="match-shopify-img"
|
||||
style="width: 100%; height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc;">
|
||||
<div id="match-shopify-name"
|
||||
style="font-size: 11px; margin-top: 4px; color: var(--text-secondary); word-break: break-all;">filename.jpg
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 12px; justify-content: center;">
|
||||
<button id="btn-match-skip" onclick="controller.skipLink()" class="btn btn-secondary" style="width: 100px;">No,
|
||||
Skip</button>
|
||||
<button id="btn-match-confirm" onclick="controller.confirmLink()" class="btn" style="width: 100px;">Yes,
|
||||
Link</button>
|
||||
</div>
|
||||
<div style="margin-top: 12px; font-size: 12px; color: var(--text-secondary);">
|
||||
Match <span id="match-index">1</span> of <span id="match-total">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="drop-overlay"
|
||||
style="position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(37, 99, 235, 0.9); z-index: 200; display: none; flex-direction: column; align-items: center; justify-content: center; color: white;">
|
||||
<div style="font-size: 48px; margin-bottom: 16px;">☁️</div>
|
||||
@ -986,11 +1032,13 @@
|
||||
}));
|
||||
|
||||
state.setItems(normalized);
|
||||
document.getElementById('loading-ui').style.display = 'none';
|
||||
document.getElementById('main-ui').style.display = 'block';
|
||||
|
||||
ui.logStatus('done', 'Finished loading.', 'success');
|
||||
setTimeout(() => ui.toggleLog(false), 1000); // Auto hide after 1s
|
||||
if (!controller.hasRunMatching) {
|
||||
controller.hasRunMatching = true;
|
||||
controller.checkMatches(normalized);
|
||||
} else {
|
||||
controller.showGallery();
|
||||
}
|
||||
|
||||
})
|
||||
.withFailureHandler(function (err) {
|
||||
@ -1114,7 +1162,151 @@
|
||||
})
|
||||
.importFromPicker(state.sku, null, item.mimeType, item.filename, url);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// --- Compatibility / Matching Logic ---
|
||||
matches: [],
|
||||
currentMatchIndex: 0,
|
||||
hasRunMatching: false,
|
||||
|
||||
checkMatches(items) {
|
||||
// Filter candidates
|
||||
var driveOnly = items.filter(function (i) { return i.status === 'drive_only'; });
|
||||
var shopifyOnly = items.filter(function (i) { return i.source === 'shopify_only'; }); // source check is safer for shopify items
|
||||
|
||||
var newMatches = [];
|
||||
|
||||
driveOnly.forEach(function (d) {
|
||||
// Find match by filename
|
||||
// Note: Backend might return "Orphaned Media" if extraction failed, ignore those.
|
||||
if (!d.filename || d.filename === 'Orphaned Media') return;
|
||||
|
||||
var match = shopifyOnly.find(function (s) {
|
||||
return s.filename === d.filename; // Exact match
|
||||
});
|
||||
|
||||
if (match) {
|
||||
newMatches.push({ drive: d, shopify: match });
|
||||
}
|
||||
});
|
||||
|
||||
if (newMatches.length > 0) {
|
||||
this.matches = newMatches;
|
||||
this.currentMatchIndex = 0;
|
||||
ui.logStatus('info', 'Found ' + newMatches.length + ' potential matches. Starting matching wizard...', 'info');
|
||||
this.startMatching();
|
||||
} else {
|
||||
// No matches, show UI
|
||||
this.showGallery();
|
||||
}
|
||||
},
|
||||
|
||||
startMatching() {
|
||||
document.getElementById('loading-ui').style.display = 'none';
|
||||
document.getElementById('main-ui').style.display = 'none';
|
||||
document.getElementById('matching-modal').style.display = 'flex';
|
||||
this.renderMatch();
|
||||
},
|
||||
|
||||
renderMatch() {
|
||||
var match = this.matches[this.currentMatchIndex];
|
||||
|
||||
// Reset Buttons
|
||||
var btnConfirm = document.getElementById('btn-match-confirm');
|
||||
var btnSkip = document.getElementById('btn-match-skip');
|
||||
if (btnConfirm) {
|
||||
btnConfirm.disabled = false;
|
||||
btnConfirm.innerText = "Yes, Link";
|
||||
}
|
||||
if (btnSkip) {
|
||||
btnSkip.disabled = false;
|
||||
btnSkip.innerText = "No, Skip";
|
||||
}
|
||||
|
||||
var dImg = document.getElementById('match-drive-img');
|
||||
var sImg = document.getElementById('match-shopify-img');
|
||||
|
||||
// Reset visual state safely
|
||||
dImg.style.transition = 'none';
|
||||
dImg.style.opacity = '0';
|
||||
sImg.style.transition = 'none';
|
||||
sImg.style.opacity = '0';
|
||||
|
||||
// Clear source to blank pixel to ensure old image is gone
|
||||
var blank = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
|
||||
dImg.src = blank;
|
||||
sImg.src = blank;
|
||||
|
||||
document.getElementById('match-drive-name').innerText = match.drive.filename;
|
||||
document.getElementById('match-shopify-name').innerText = match.shopify.filename;
|
||||
|
||||
document.getElementById('match-index').innerText = this.currentMatchIndex + 1;
|
||||
document.getElementById('match-total').innerText = this.matches.length;
|
||||
|
||||
// Load new images
|
||||
setTimeout(function () {
|
||||
dImg.style.transition = 'opacity 0.3s ease';
|
||||
sImg.style.transition = 'opacity 0.3s ease';
|
||||
|
||||
dImg.onload = function () { dImg.style.opacity = '1'; };
|
||||
sImg.onload = function () { sImg.style.opacity = '1'; };
|
||||
|
||||
dImg.src = match.drive.thumbnail;
|
||||
sImg.src = match.shopify.thumbnail;
|
||||
}, 50);
|
||||
},
|
||||
|
||||
confirmLink() {
|
||||
var match = this.matches[this.currentMatchIndex];
|
||||
var _this = this;
|
||||
|
||||
document.getElementById('btn-match-confirm').disabled = true;
|
||||
document.getElementById('btn-match-confirm').innerText = "Linking...";
|
||||
document.getElementById('btn-match-skip').disabled = true;
|
||||
|
||||
// ui.logStatus('link', 'Linking ' + match.drive.filename + '...', 'info');
|
||||
|
||||
google.script.run
|
||||
.withSuccessHandler(function () {
|
||||
// ui.logStatus('link', 'Linked ' + match.drive.filename, 'success');
|
||||
_this.nextMatch();
|
||||
})
|
||||
.withFailureHandler(function (e) {
|
||||
alert("Failed to link: " + e.message);
|
||||
document.getElementById('btn-match-confirm').disabled = false;
|
||||
document.getElementById('btn-match-confirm').innerText = "Yes, Link";
|
||||
document.getElementById('btn-match-skip').disabled = false;
|
||||
})
|
||||
.linkDriveFileToShopifyMedia(state.sku, match.drive.id, match.shopify.id);
|
||||
},
|
||||
|
||||
skipLink() {
|
||||
document.getElementById('btn-match-skip').innerText = "Skipping...";
|
||||
document.getElementById('btn-match-skip').disabled = true;
|
||||
document.getElementById('btn-match-confirm').disabled = true;
|
||||
setTimeout(() => this.nextMatch(), 200);
|
||||
},
|
||||
|
||||
nextMatch() {
|
||||
this.currentMatchIndex++;
|
||||
if (this.currentMatchIndex < this.matches.length) {
|
||||
this.renderMatch();
|
||||
} else {
|
||||
// Done
|
||||
document.getElementById('matching-modal').style.display = 'none';
|
||||
ui.logStatus('info', 'Matching complete. Reloading...', 'info');
|
||||
document.getElementById('loading-ui').style.display = 'block';
|
||||
// Reload to get fresh state. Since hasRunMatching is true, it shouldn't trigger again.
|
||||
this.loadMedia(true);
|
||||
}
|
||||
},
|
||||
|
||||
showGallery() {
|
||||
document.getElementById('loading-ui').style.display = 'none';
|
||||
document.getElementById('main-ui').style.display = 'block';
|
||||
ui.logStatus('done', 'Finished loading.', 'success');
|
||||
setTimeout(function () { ui.toggleLog(false); }, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
// --- Google Picker API ---
|
||||
|
||||
Reference in New Issue
Block a user