Fix a few bugs

Author: brianjhanson

resources/js/Pages/Dashboard.vue

@@ -40,7 +40,7 @@
       id,
       type,
       colspan: 1,
-      title: t('app', `New "${info.name}" Widget`),
+      title: t('app', `New “{name}” Widget`, {name: info.name}),
       subtitle: null,
       name: info.name,
       bodyHtml: '',
@@ -57,17 +57,22 @@
   }
 
   function updateWidget(updates: Widget) {
-    widgets.value = widgets.value.map((widget: Widget) => {
-      if (widget.id === updates.id) {
-        return updates;
+    widgets.value = widgets.value.map((widget: CompleteWidget) => {
+      if (widget.new || widget.id === updates.id) {
+        return {
+          ...widget,
+          ...updates,
+        };
       }
 
       return widget;
     });
   }
 
   async function deleteWidget(id: number) {
-    const widget = widgets.value.find((widget: Widget) => widget.id === id);
+    const widget = widgets.value.find(
+      (widget: CompleteWidget) => widget.id === id
+    );
     if (!widget) {
       return;
     }
@@ -83,12 +88,18 @@
     }
 
     // Optimistically remove the widget from the UI
-    widgets.value = widgets.value.filter((widget: Widget) => widget.id !== id);
+    widgets.value = widgets.value.filter(
+      (widget: CompleteWidget) => widget.id !== id
+    );
+
+    // If this was a new widget, the database doesn't know about it
+    // and we don't need to make the API call
+    if (widget.new) {
+      return;
+    }
 
     try {
-      await axios.post(getCpUrl(`widgets/${props.id}/delete`), {
-        id: props.id,
-      });
+      await axios.delete(getCpUrl(`widgets/${id}`));
       // @TODO display success message
       // Craft.cp.displaySuccess(t('app', '“{name}” deleted.', {name: widget.getLabel()}));
       // @TODO allow undo in the toast message

resources/js/components/DynamicHtmlRenderer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import {defineComponent, computed} from 'vue';
+  import {computed, defineComponent} from 'vue';
 
   const props = defineProps<{
     html: string;
@@ -10,5 +10,5 @@
   );
 </script>
 <template>
-  <component :is="dynamicComponent" />
+  <component :is="dynamicComponent" v-if="html" />
 </template>

resources/js/widgets/BaseWidget.vue

@@ -18,7 +18,7 @@
     settingsNamespace: '',
   });
 
-  const {getCpUrl, getActionUrl} = useHelpers();
+  const {getCpUrl} = useHelpers();
   const state = ref<'idle' | 'loading' | 'deleting' | 'error'>('idle');
 
   function setView(view: 'default' | 'settings') {
@@ -55,6 +55,7 @@
       emit('update', {
         ...data.info,
         view: 'default',
+        new: false,
       });
     } catch (error) {
       state.value = 'error';
@@ -64,38 +65,16 @@
   }
 
   async function deleteWidget() {
-    if (['deleting', 'loading'].includes(state.value)) {
-      return;
-    }
+    emit('delete', props.id);
+  }
 
-    if (
-      !confirm(
-        t('app', 'Are you sure you want to delete “{name}”?', {
-          name: props.name,
-        })
-      )
-    ) {
+  function handleCancel() {
+    if (props.new) {
+      deleteWidget();
       return;
     }
 
-    state.value = 'deleting';
-    try {
-      await axios.post(getCpUrl(`widgets/${props.id}/delete`), {
-        id: props.id,
-      });
-      emit('delete', props.id);
-      state.value = 'idle';
-      // @TODO display success message
-      // Craft.cp.displaySuccess(t('app', '“{name}” deleted.', {name: widget.getLabel()}));
-      // @TODO allow undo in the toast message
-    } catch (error) {
-      state.value = 'error';
-      // @TODO handle errors
-      console.error(error);
-      // Craft.cp.displayError(t('app', 'Couldn’t delete “{name}”.', {
-      //   name: props.name,
-      // }))
-    }
+    setView('default');
   }
 
   const action = computed(() =>
@@ -147,7 +126,7 @@
             type="submit"
             >{{ t('app', 'Save') }}</craft-button
           >
-          <craft-button type="reset" @click="setView('default')">{{
+          <craft-button type="reset" @click="handleCancel">{{
             t('app', 'Cancel')
           }}</craft-button>
           <div class="tw:ml-auto"></div>