Stub out move item modal #10604

arches/app/src/components/ControlledListManager/ListTree.vue

@@ -2,10 +2,12 @@
 import { inject, ref } from "vue";
 import { useGettext } from "vue3-gettext";
 
+import Button from "primevue/button";
 import Tree from "primevue/tree";
 
 import LetterCircle from "@/components/ControlledListManager/LetterCircle.vue";
 import ListTreeControls from "@/components/ControlledListManager/ListTreeControls.vue";
+import MoveItem from "@/components/ControlledListManager/MoveItem.vue";
 import { displayedRowKey, selectedLanguageKey } from "@/components/ControlledListManager/const.ts";
 import { bestLabel } from "@/components/ControlledListManager/utils.ts";
 
@@ -25,6 +27,7 @@ const { setDisplayedRow } = inject(displayedRowKey);
 const selectedLanguage = inject(selectedLanguageKey);
 
 const { $gettext } = useGettext();
+const modalVisible = ref(false);
 
 const onRowSelect = (node: typeof TreeNode) => {
     setDisplayedRow(node.data);
@@ -65,12 +68,31 @@ const onRowSelect = (node: typeof TreeNode) => {
         </template>
         <template #default="slotProps">
             {{ slotProps.node.data.name ?? bestLabel(slotProps.node.data, selectedLanguage.code).value }}
-            <span v-if="slotProps.node.data.uri">
-                (<a
-                    :href="slotProps.node.data.uri"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >{{ slotProps.node.data.uri }}</a>)
+            <span
+                v-if="slotProps.node.data.uri"
+                class="after-node-label"
+            >
+                <span>
+                    (<a
+                        :href="slotProps.node.data.uri"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        :class="slotProps.node.key in selectedKeys ? 'selected' : ''"
+                    >
+                    {{ slotProps.node.data.uri }}
+                    </a>)
+                </span>
+                <Button
+                    v-if="slotProps.node.key in selectedKeys"
+                    type="button"
+                    class="move-button"
+                    :label="$gettext('Move')"
+                    @click="modalVisible = true"
+                />
+                <MoveItem
+                    v-model="modalVisible"
+                    :itemData="slotProps.node.data"
+                />
             </span>
         </template>
     </Tree>
@@ -79,5 +101,17 @@ const onRowSelect = (node: typeof TreeNode) => {
 <style scoped>
 a {
     color: var(--blue-500);
+    font-size: 1.3rem; /* same as arches.scss selected */
+}
+.after-node-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
+}
+.move-button {
+    background-color: aliceblue;
+    color: black;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
 }
 </style>

arches/app/src/components/ControlledListManager/MoveItem.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+import Dropdown from "primevue/dropdown";
+
+import type { Ref } from "@/types/Ref";
+
+const visible: Ref<boolean> = defineModel({ required: true });
+const newParent = ref();
+const existingParent = "";
+</script>
+
+<template>
+    <Dialog
+        v-model:visible="visible"
+        modal
+        :draggable="false"
+        :header="$gettext('Move Item')"
+        :style="{ width: '40rem' }"
+        :pt="{
+            header: { style: { backgroundColor: '#2d3c4b' } },
+            title: { style: { color: 'white', fontWeight: 600 } },
+            content: { style: { display: 'flex', flexDirection: 'column', gap: '1rem' } },
+            closeButtonIcon: { style: { color: 'white' } },
+        }"
+    >
+        <div style="font-size: small;">
+            {{ $gettext("Existing Parent: %{existingParent}", { existingParent }) }}
+        </div>
+        <div class="form-input">
+            <span
+                id="new-parent-label"
+                style="margin-bottom: 5px"
+            >{{ $gettext("New Parent") }}</span>
+            <Dropdown
+                v-model="language"
+                aria-labelledby="new-parent-label"
+                :options="[]"
+                option-label="name"
+                option-value="code"
+                :pt="{
+                    input: { style: { fontFamily: 'inherit', fontSize: 'small' } },
+                    panel: { style: { fontSize: 'small' } },
+                }"
+            />
+        </div>
+        <div class="controls">
+            <Button
+                type="button"
+                class="delete"
+                :label="$gettext('Cancel edit')"
+                @click.stop="visible = false"
+            />
+            <Button
+                type="button"
+                class="save"
+                :label="$gettext('Save')"
+                :disabled="newParent !== existingParent"
+                @click.stop="visible = false"
+            />
+        </div>
+    </Dialog>
+</template>
+
+<style scoped>
+.form-input {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2rem;
+    font-size: small;
+}
+label, .p.dropdown-label {
+    font-size: small;
+    color: #2d3c4b;
+}
+.controls {
+    display: flex;
+    gap: 1rem;
+    justify-content: end;
+}
+.controls > button {
+    color: white;
+    font-size: small;
+    font-weight: 600;
+}
+button.save {
+    background: #10b981;
+    border-color: #10b981;
+}
+button.delete {
+    background: coral;
+    border-color: coral;
+}
+</style>