✨ Enhance modal of convert graphics into components

frontend/src/app/main/data/workspace.cljs

@@ -15,6 +15,7 @@
    [app.common.geom.proportions :as gpr]
    [app.common.geom.shapes :as gsh]
    [app.common.geom.shapes.rect :as gpsr]
+   [app.common.logging :as log]
    [app.common.pages.changes-builder :as pcb]
    [app.common.pages.helpers :as cph]
    [app.common.spec :as us]
@@ -123,8 +124,8 @@
 
     ptk/WatchEvent
     (watch [_ state _]
-      (let [file           (:workspace-file state)
-            has-graphics?  (-> file :data :media seq)
+      (let [file           (:workspace-data state)
+            has-graphics?  (-> file :media seq)
             components-v2  (features/active-feature? state :components-v2)]
         (rx/merge
          (rx/of (fbc/fix-bool-contents))
@@ -1674,7 +1675,9 @@
     ptk/UpdateEvent
     (update [_ state]
       (assoc state :remove-graphics {:total total
-                                     :current nil}))))
+                                     :current nil
+                                     :error false
+                                     :completed false}))))
 
 (defn- update-remove-graphics
   [current]
@@ -1683,12 +1686,31 @@
     (update [_ state]
       (assoc-in state [:remove-graphics :current] current))))
 
+(defn- error-in-remove-graphics
+  []
+  (ptk/reify ::error-in-remove-graphics
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:remove-graphics :error] true))))
+
+(defn clear-remove-graphics
+  []
+  (ptk/reify ::clear-remove-graphics
+    ptk/UpdateEvent
+    (update [_ state]
+      (dissoc state :remove-graphics))))
+
 (defn- complete-remove-graphics
   []
   (ptk/reify ::complete-remove-graphics
     ptk/UpdateEvent
     (update [_ state]
-      (dissoc state :remove-graphics))))
+      (assoc-in state [:remove-graphics :completed] true))
+
+    ptk/WatchEvent
+    (watch [_ state _]
+      (when-not (get-in state [:remove-graphics :error])
+        (rx/of (modal/hide))))))
 
 (defn- remove-graphic
   [it file-data page [index [media-obj pos]]]
@@ -1727,9 +1749,14 @@
                       (rx/mapcat (partial dwm/create-shapes-svg (:id file-data) (:objects page) pos)))
                  (dwm/create-shapes-img pos media-obj))]
 
-      (rx/concat
-        (rx/of (update-remove-graphics index))
-        (rx/map process-shapes shapes))))
+    (->> (rx/concat
+           (rx/of (update-remove-graphics index))
+           (rx/map process-shapes shapes))
+         (rx/catch #(do
+                      (log/error :msg (str "Error removing " (:name media-obj))
+                                 :hint (ex-message %)
+                                 :error %)
+                      (rx/of (error-in-remove-graphics)))))))
 
 (defn- remove-graphics
   [file-id file-name]
@@ -1766,8 +1793,7 @@
                                            (pcb/add-page (:id page) page)))))
           (rx/mapcat (partial remove-graphic it file-data' page)
                      (rx/from (d/enumerate (d/zip media shape-grid))))
-          (rx/of (modal/hide)
-                 (complete-remove-graphics)))))))
+          (rx/of (complete-remove-graphics)))))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Exports

frontend/src/app/main/ui/workspace.cljs

@@ -174,14 +174,35 @@
    ::mf/register-as :remove-graphics-dialog}
   [{:keys [] :as ctx}]
   (let [remove-state (mf/deref refs/remove-graphics)
-        close #(modal/hide!)]
+        close #(modal/hide!)
+        reload-file #(dom/reload-current-window)]
+    (mf/use-effect
+      (fn []
+        #(st/emit! (dw/clear-remove-graphics))))
     [:div.modal-overlay
      [:div.modal-container.remove-graphics-dialog
       [:div.modal-header
        [:div.modal-header-title
-        [:h2 (str "Updating " (:file-name ctx) "...")]]
-       [:div.modal-close-button
-        {:on-click close} i/close]]
-      [:div.modal-content
-       [:p (str "Converting " (:current remove-state) " / " (:total remove-state))]]]]))
-
+        [:h2 (tr "workspace.remove-graphics.title" (:file-name ctx))]]
+       (when (and (:completed remove-state) (:error remove-state))
+         [:div.modal-close-button
+          {:on-click close} i/close])]
+      (if-not (and (:completed remove-state) (:error remove-state))
+        [:div.modal-content
+         [:p (tr "workspace.remove-graphics.text1")]
+         [:p (tr "workspace.remove-graphics.text2")]
+         [:p.progress-message (tr "workspace.remove-graphics.progress"
+                                  (:current remove-state)
+                                  (:total remove-state))]]
+        [:*
+         [:div.modal-content
+          [:p.error-message [:span i/close] (tr "workspace.remove-graphics.error-msg")]
+          [:p (tr "workspace.remove-graphics.error-hint")]]
+         [:div.modal-footer
+          [:div.action-buttons
+           [:input.button-secondary {:type "button"
+                                     :value (tr "labels.close")
+                                     :on-click close}]
+           [:input.button-primary {:type "button"
+                                   :value (tr "labels.reload-file")
+                                   :on-click reload-file}]]]])]]))

frontend/src/app/util/dom.cljs

@@ -596,6 +596,10 @@
   []
   (.back (.-history js/window)))
 
+(defn reload-current-window
+  []
+  (.reload (.-location js/window)))
+
 (defn animate!
   ([item keyframes duration] (animate! item keyframes duration nil))
   ([item keyframes duration onfinish]