Merge pull request #922 from OpenBazaar/clone-listing

added in the ability to clone your own listing from the listing card
OpenBazaar · Sep 22, 2017 · 1561874 · 1561874
2 parents 64d6b85 + 426f61a
commit 1561874
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 35 deletions.
diff --git a/js/languages/en-US.json b/js/languages/en-US.json
@@ -836,6 +836,9 @@
     "freeShippingBanner": "Free Shipping",
     "deleting": "Deleting…",
     "deleted": "Deleted",
+    "editListingTooltip": "Edit listing",
+    "cloneListingTooltip": "Clone listing",
+    "deleteListingTooltip": "Delete listing",
     "confirmDelete": {
       "title": "Are you sure?",
       "body": "Once it's deleted, it's gone forever.",

diff --git a/js/templates/listingCard.html b/js/templates/listingCard.html
@@ -8,9 +8,10 @@
         <div class="editOverlay overlayPanel pad">
           <div class="overlayPanelInner"></div>
           <div class="flex gutterHSm">
-            <a class='iconBtnSm clrP clrBr toolTipNoWrap toolTipTop js-edit' data-tip="Edit listing"><span class="ion-edit"></span></a>
+            <button class='iconBtnSm clrP clrBr toolTipNoWrap toolTipTop js-edit' data-tip="<%= ob.polyT('listingCard.editListingTooltip') %>"><span class="ion-edit"></span></button>
+            <button class='iconBtnSm clrP clrBr toolTipNoWrap toolTipTop js-clone' data-tip="<%= ob.polyT('listingCard.cloneListingTooltip') %>"><span class="ion-ios-copy"></span></button>
             <div class="posR">
-              <a class='iconBtnSm clrP clrBr toolTipNoWrap toolTipTop js-delete' data-tip="Delete listing"><span class="ion-trash-b"></span></a>
+              <a class='iconBtnSm clrP clrBr toolTipNoWrap toolTipTop js-delete' data-tip="<%= ob.polyT('listingCard.deleteListingTooltip') %>"><span class="ion-trash-b"></span></a>
               <div class="js-deleteConfirmedBox confirmBox deleteConfirm tx5 arrowBoxBottom clrBr clrP clrT hide">
                 <div class="tx3 txB rowSm"><%= ob.polyT('listingCard.confirmDelete.title') %></div>
                 <p><%= ob.polyT('listingCard.confirmDelete.body') %></p>
@@ -94,9 +95,10 @@
     <div class="editOverlay overlayPanel pad">
       <div class="overlayPanelInner"></div>
       <div class="flexHCent gutterHSm">
-        <a class='iconBtnSm clrP clrBr js-edit'><span class="ion-edit"></span></a>
+        <button class='iconBtnSm clrP clrBr toolTipNoWrap toolTipTop js-edit' data-tip="<%= ob.polyT('listingCard.editListingTooltip') %>"><span class="ion-edit"></span></button>
+        <button class='iconBtnSm clrP clrBr toolTipNoWrap toolTipTop js-clone' data-tip="<%= ob.polyT('listingCard.cloneListingTooltip') %>"><span class="ion-ios-copy"></span></button>          
         <div class="posR">
-          <a class='iconBtnSm clrP clrBr js-delete'><span class="ion-trash-b"></span></a>
+          <button class='iconBtnSm clrP clrBr toolTipNoWrap toolTipTop js-delete' data-tip="<%= ob.polyT('listingCard.deleteListingTooltip') %>"><span class="ion-trash-b"></span></button>
           <div class="js-deleteConfirmedBox confirmBox deleteConfirm tx5 arrowBoxBottom clrBr clrP clrT hide">
             <div class="tx3 txB rowSm"><%= ob.polyT('listingCard.confirmDelete.title') %></div>
             <p><%= ob.polyT('listingCard.confirmDelete.body') %></p>

diff --git a/js/views/ListingCard.js b/js/views/ListingCard.js
@@ -53,8 +53,6 @@ export default class extends baseVw {
       this.$el.addClass('ownListing');
     }
 
-    this.fullListingFetches = [];
-
     if (this.ownListing) {
       this.listenTo(listingEvents, 'destroying', (md, destroyingOpts) => {
         if (this.isRemoved()) return;
@@ -94,6 +92,7 @@ export default class extends baseVw {
     return {
       'click .js-edit': 'onClickEdit',
       'click .js-delete': 'onClickDelete',
+      'click .js-clone': 'onClickClone',
       'click .js-deleteConfirmed': 'onClickConfirmedDelete',
       'click .js-deleteConfirmCancel': 'onClickConfirmCancel',
       'click .js-deleteConfirmedBox': 'onClickDeleteConfirmBox',
@@ -109,55 +108,63 @@ export default class extends baseVw {
   onClickEdit(e) {
     app.loadingModal.open();
 
-    const fullListingFetch = this.fullListing.fetch()
-      .done(() => {
-        if (fullListingFetch.statusText === 'abort' || this.isRemoved()) return;
+    this.fetchFullListing()
+      .done(xhr => {
+        if (xhr.statusText === 'abort' || this.isRemoved()) return;
 
-        this.editModal = launchEditListingModal({
+        launchEditListingModal({
           model: this.fullListing,
         });
       })
       .always(() => {
         if (this.isRemoved()) return;
         app.loadingModal.close();
-      })
-      .fail(xhr => {
-        let failReason = xhr.responseJSON && xhr.responseJSON.reason || '';
-
-        if (xhr.status === 404) {
-          failReason = app.polyglot.t('listingCard.editFetchErrorDialog.bodyNotFound');
-        }
-
-        openSimpleMessage(
-          app.polyglot.t('listingCard.editFetchErrorDialog.title'),
-          failReason
-        );
       });
 
     e.stopPropagation();
   }
 
-  onClickDelete() {
+  onClickDelete(e) {
     this.getCachedEl('.js-deleteConfirmedBox').removeClass('hide');
     this.deleteConfirmOn = true;
-    // don't bubble to the document click handler
-    return false;
+    e.stopPropagation();
   }
 
-  onClickConfirmedDelete() {
-    if (this.destroyRequest && this.destroyRequest.state === 'pending') return false;
+  onClickClone(e) {
+    app.loadingModal.open();
+
+    this.fetchFullListing()
+      .done(xhr => {
+        if (xhr.statusText === 'abort' || this.isRemoved()) return;
+        const clonedModel = this.fullListing.clone();
+        clonedModel.unset('slug').guid = this.ownerGuid;
+        clonedModel.lastSyncedAttrs = {};
+
+        this.editModal = launchEditListingModal({
+          model: clonedModel,
+        });
+      })
+      .always(() => {
+        if (this.isRemoved()) return;
+        app.loadingModal.close();
+      });
+
+    e.stopPropagation();
+  }
+
+  onClickConfirmedDelete(e) {
+    e.stopPropagation();
+    if (this.destroyRequest && this.destroyRequest.state === 'pending') return;
     this.destroyRequest = this.model.destroy({ wait: true });
-    return false;
   }
 
   onClickConfirmCancel() {
     this.getCachedEl('.js-deleteConfirmedBox').addClass('hide');
     this.deleteConfirmOn = false;
   }
 
-  onClickDeleteConfirmBox() {
-    // don't bubble to the document click handler
-    return false;
+  onClickDeleteConfirmBox(e) {
+    e.stopPropagation();
   }
 
   onClick(e) {
@@ -171,7 +178,7 @@ export default class extends baseVw {
 
       app.loadingModal.open();
 
-      const fullListingFetch = this.fullListing.fetch()
+      this.fetchFullListing()
         .done(jqXhr => {
           if (jqXhr.statusText === 'abort' || this.isRemoved()) return;
 
@@ -195,13 +202,39 @@ export default class extends baseVw {
           if (this.isRemoved()) return;
           app.loadingModal.close();
         })
-        .fail((xhr) => {
+        .fail(xhr => {
           if (xhr.statusText === 'abort') return;
           app.router.listingError(xhr, this.model.get('slug'), `#${this.ownerGuid}/store`);
         });
+    }
+  }
 
-      this.fullListingFetches.push(fullListingFetch);
+  fetchFullListing(options = {}) {
+    const opts = {
+      showErrorOnFetchFail: true,
+      ...options,
+    };
+
+    if (this.fullListingFetch && this.fullListingFetch.state() === 'pending') {
+      return this.fullListingFetch;
     }
+
+    this.fullListingFetch = this.fullListing.fetch()
+      .fail(xhr => {
+        if (!opts.showErrorOnFetchFail) return;
+        let failReason = xhr.responseJSON && xhr.responseJSON.reason || '';
+
+        if (xhr.status === 404) {
+          failReason = app.polyglot.t('listingCard.editFetchErrorDialog.bodyNotFound');
+        }
+
+        openSimpleMessage(
+          app.polyglot.t('listingCard.editFetchErrorDialog.title'),
+          failReason
+        );
+      });
+
+    return this.fullListingFetch;
   }
 
   get ownListing() {
@@ -273,7 +306,7 @@ export default class extends baseVw {
   }
 
   remove() {
-    this.fullListingFetches.forEach(fetch => fetch.abort());
+    if (this.fullListingFetch) this.fullListingFetch.abort();
     if (this.destroyRequest) this.destroyRequest.abort();
     $(document).off(null, this.boundDocClick);
     super.remove();