Studio: fix #1901, #1902

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapcomplete",
-  "version": "0.42.1",
+  "version": "0.42.2",
   "repository": "https://github.com/pietervdvn/MapComplete",
   "description": "A small website to edit OSM easily",
   "bugs": "https://github.com/pietervdvn/MapComplete/issues",

src/Logic/DetermineLayout.ts

@@ -56,6 +56,10 @@ export default class DetermineLayout {
     }
 
     private static async expandRemoteLayers(layoutConfig: LayoutConfigJson): Promise<LayoutConfigJson> {
+        if(!layoutConfig.layers){
+            // This is probably a layer in 'layer-only-mode'
+            return layoutConfig
+        }
         for (let i = 0; i < layoutConfig.layers.length; i++) {
             const l = layoutConfig.layers[i]
             if (typeof l !== "string") {

src/UI/Studio/DeleteButton.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { EditJsonState } from "./EditLayerState"
+  import BackButton from "../Base/BackButton.svelte"
+  import { TrashIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import NextButton from "../Base/NextButton.svelte"
+
+  let deleteState: "init" | "confirm" = "init"
+  export let backToStudio: () => void
+  export let state: EditJsonState
+
+  export let objectType: "layer" | "theme"
+
+  function deleteLayer() {
+    state.delete()
+    backToStudio()
+  }
+</script>
+
+<div class="mt-12">
+  {#if deleteState === "init"}
+    <button on:click={() => {deleteState = "confirm"}} class="small">
+      <TrashIcon class="h-6 w-6" />
+      Delete this  {objectType}
+    </button>
+  {:else if deleteState === "confirm"}
+    <div class="flex">
+      <BackButton on:click={() => {deleteState = "init"}}>
+        Don't delete
+      </BackButton>
+      <NextButton clss="primary" on:click={() => deleteLayer()}>
+        <div class="alert flex p-2">
+
+          <TrashIcon class="h-6 w-6" />
+          Do delete this {objectType}
+        </div>
+      </NextButton>
+    </div>
+  {/if}
+</div>

src/UI/Studio/EditLayer.svelte

@@ -17,6 +17,9 @@
   import QuestionPreview from "./QuestionPreview.svelte"
   import ShowConversionMessages from "./ShowConversionMessages.svelte"
   import RawEditor from "./RawEditor.svelte"
+  import NextButton from "../Base/NextButton.svelte"
+  import BackButton from "../Base/BackButton.svelte"
+  import DeleteButton from "./DeleteButton.svelte"
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw
 
@@ -75,10 +78,7 @@
 
   let highlightedItem: UIEventSource<HighlightedTagRendering> = state.highlightedItem
 
-  function deleteLayer() {
-    state.delete()
-    backToStudio()
-  }
+
 </script>
 
 <div class="flex h-screen flex-col">
@@ -134,12 +134,7 @@
         </div>
         <div class="flex flex-col" slot="content0">
           <Region {state} configs={perRegion["Basic"]} />
-          <div class="mt-12">
-            <button on:click={() => deleteLayer()} class="small">
-              <TrashIcon class="h-6 w-6" />
-              Delete this layer
-            </button>
-          </div>
+          <DeleteButton {state} {backToStudio} objectType="layer"/>
         </div>
 
         <div slot="title1" class="flex">

src/UI/Studio/EditTheme.svelte

@@ -7,11 +7,13 @@
   import ShowConversionMessages from "./ShowConversionMessages.svelte"
   import Region from "./Region.svelte"
   import RawEditor from "./RawEditor.svelte"
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
+  import DeleteButton from "./DeleteButton.svelte"
 
   export let state: EditThemeState
   export let osmConnection: OsmConnection
+  export let backToStudio: () => void
+
   let schema: ConfigMeta[] = state.schema.filter((schema) => schema.path.length > 0)
 
   export let selfLayers: { owner: number; id: string }[]
@@ -97,6 +99,8 @@
       <div slot="content0">
         <Region configs={perRegion["basic"]} path={[]} {state} title="Basic properties" />
         <Region configs={perRegion["start_location"]} path={[]} {state} title="Start location" />
+        <DeleteButton {state} {backToStudio} objectType="theme"/>
+
       </div>
 
       <div slot="title1">Layers</div>

src/UI/Studio/StudioServer.ts

@@ -1,7 +1,7 @@
 import { Utils } from "../../Utils"
 import Constants from "../../Models/Constants"
 import { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson"
-import { Store } from "../../Logic/UIEventSource"
+import { Store, UIEventSource } from "../../Logic/UIEventSource"
 import { LayoutConfigJson } from "../../Models/ThemeConfig/Json/LayoutConfigJson"
 
 /**
@@ -11,13 +11,23 @@ import { LayoutConfigJson } from "../../Models/ThemeConfig/Json/LayoutConfigJson
 export default class StudioServer {
     private readonly url: string
     private readonly _userId: Store<number>
+    private readonly overview: UIEventSource<{
+        success: { id: string; owner: number; category: "layers" | "themes" }[]
+    } | { error: any } | undefined>
 
     constructor(url: string, userId: Store<number>) {
         this.url = url
         this._userId = userId
+        this.overview = UIEventSource.FromPromiseWithErr(this.fetchOverviewRaw())
     }
 
-    public async fetchOverview(): Promise<
+    public fetchOverview(): Store<{
+        success: { id: string; owner: number; category: "layers" | "themes" }[]
+    } | { error } | undefined> {
+        return this.overview
+    }
+
+    private async fetchOverviewRaw(): Promise<
         {
             id: string
             owner: number
@@ -59,19 +69,29 @@ export default class StudioServer {
         uid?: number
     ): Promise<LayerConfigJson | LayoutConfigJson> {
         try {
-            return <any> await Utils.downloadJson(this.urlFor(layerId, category, uid))
+            return <any>await Utils.downloadJson(this.urlFor(layerId, category, uid))
         } catch (e) {
             return undefined
         }
     }
+
     async delete(id: string, category: "layers" | "themes") {
         if (id === undefined || id === "") {
             return
         }
         await fetch(this.urlFor(id, category), {
-            method: "DELETE",
+            method: "DELETE"
         })
+        const overview: { id: string; owner: number; category: "layers" | "themes" }[] = this.overview.data?.["success"]
+        if (overview) {
+            const index = overview.findIndex(obj => obj.id === id && obj.category === category && obj.owner === this._userId.data)
+            if (index >= 0) {
+                overview.splice(index, 1)
+                this.overview.ping()
+            }
+        }
     }
+
     async update(id: string, config: string, category: "layers" | "themes") {
         if (id === undefined || id === "") {
             return
@@ -79,9 +99,9 @@ export default class StudioServer {
         await fetch(this.urlFor(id, category), {
             method: "POST",
             headers: {
-                "Content-Type": "application/json;charset=utf-8",
+                "Content-Type": "application/json;charset=utf-8"
             },
-            body: config,
+            body: config
         })
     }
 

src/UI/StudioGUI.svelte

@@ -54,7 +54,7 @@
   const uid = osmConnection.userDetails.map((ud) => ud?.uid)
   const studio = new StudioServer(studioUrl, uid)
 
-  let layersWithErr = UIEventSource.FromPromiseWithErr(studio.fetchOverview())
+  let layersWithErr = studio.fetchOverview()
   let layers: Store<{ owner: number; id: string }[]> = layersWithErr.mapD((l) =>
     l["success"]?.filter((l) => l.category === "layers")
   )
@@ -291,7 +291,9 @@
         </BackButton>
       </EditLayer>
     {:else if state === "editing_theme"}
-      <EditTheme state={editThemeState} selfLayers={$selfLayers} otherLayers={$otherLayers} {osmConnection}>
+      <EditTheme state={editThemeState} selfLayers={$selfLayers} otherLayers={$otherLayers} {osmConnection}  backToStudio={() => {
+          state = undefined
+        }}>
         <BackButton
           clss="small p-1"
           imageClass="w-8 h-8"