nit re #10541, improve names

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

@@ -35,7 +35,7 @@ const props: {
 
 const items: Ref<ControlledListItem[]> = ref([]);
 const displayedItem: Ref<ControlledListItem> = ref(null);
-const setDisplayed = (item: ControlledListItem) => {
+const setDisplayedItem = (item: ControlledListItem) => {
     displayedItem.value = item;
 };
 
@@ -72,7 +72,7 @@ const createItem = async () => {
     }
 };
 
-const deleteItems = async (selectedItems: ControlledList[]) => {
+const deleteItems = async (selectedItems: ControlledListItem[]) => {
     if (!selectedItems.length) {
         return;
     }
@@ -133,23 +133,23 @@ const deleteItems = async (selectedItems: ControlledList[]) => {
                     <Suspense>
                         <SidepanelDataView
                             :add-label="$gettext('Add New Item')"
+                            :create-action="createItem"
+                            :count-label="$ngettext('item', 'items', items.length)"
+                            :delete-action="deleteItems"
                             :delete-label="$gettext('Delete Item')"
                             :delete-label-plural="$gettext('Delete Items')"
-                            :displayed-item="displayedItem"
-                            :create-item="createItem"
-                            :delete-items="deleteItems"
-                            :fetch-items="fetchItems"
-                            :item-label="$ngettext('item', 'items', items.length)"
-                            :items="items"
+                            :fetch-action="fetchItems"
                             :no-search-result-label="
-                                $gettext('No matching items')
+                                $gettext('No matching items.')
                             "
-                            :no-item-label="
+                            :no-selection-label="
                                 $gettext(
                                     'Click &quot;Add New Item&quot; to start.'
                                 )
                             "
-                            :set-displayed
+                            :selectables="items"
+                            :selection="displayedItem"
+                            :set-selection="setDisplayedItem"
                         />
                         <template #fallback>
                             <SpinnerIcon />

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

@@ -25,7 +25,7 @@ const props: {
     "setEditing",
 ]);
 
-const items: Ref<ControlledList[]> = ref([]);
+const lists: Ref<ControlledList[]> = ref([]);
 const toast = useToast();
 const { $gettext, $ngettext } = useGettext();
 const lightGray = "#f4f4f4";
@@ -42,7 +42,7 @@ const fetchLists = async () => {
             throw new Error();
         } else {
             await response.json().then((data) => {
-                items.value = data.controlled_lists;
+                lists.value = data.controlled_lists;
             });
         }
     } catch {
@@ -64,7 +64,7 @@ const createList = async () => {
         });
         if (response.ok) {
             const newItem = await response.json();
-            items.value.unshift(newItem);
+            lists.value.unshift(newItem);
         } else {
             throw new Error();
         }
@@ -77,11 +77,11 @@ const createList = async () => {
     }
 };
 
-const deleteLists = async (selectedItems: ControlledList[]) => {
-    if (!selectedItems.length) {
+const deleteLists = async (selectedLists: ControlledList[]) => {
+    if (!selectedLists.length) {
         return;
     }
-    const promises = selectedItems.map((list) =>
+    const promises = selectedLists.map((list) =>
         fetch(arches.urls.controlled_list(list.id), {
             method: "DELETE",
             headers: {
@@ -91,7 +91,7 @@ const deleteLists = async (selectedItems: ControlledList[]) => {
     );
 
     const shouldResetDisplay = (
-        props.displayedList && selectedItems.includes(props.displayedList)
+        props.displayedList && selectedLists.includes(props.displayedList)
     );
 
     try {
@@ -133,17 +133,17 @@ const deleteLists = async (selectedItems: ControlledList[]) => {
             <Suspense>
                 <SidepanelDataView
                     :add-label="$gettext('Create New List')"
-                    :create-item="createList"
-                    :delete-items="deleteLists"
+                    :create-action="createList"
+                    :count-label="$ngettext('list', 'lists', lists.length)"
+                    :delete-action="deleteLists"
                     :delete-label="$gettext('Delete List')"
                     :delete-label-plural="$gettext('Delete Lists')"
-                    :displayed-item="displayedList"
-                    :fetch-items="fetchLists"
-                    :item-label="$ngettext('list', 'lists', items.length)"
-                    :items="items"
+                    :fetch-action="fetchLists"
                     :no-search-result-label="$gettext('No matching lists.')"
-                    :no-item-label="$gettext('Click &quot;Create New List&quot; to start.')"
-                    :set-displayed="setDisplayedList"
+                    :no-selection-label="$gettext('Click &quot;Create New List&quot; to start.')"
+                    :selectables="lists"
+                    :selection="displayedList"
+                    :set-selection="setDisplayedList"
                 />
                 <template #fallback>
                     <SpinnerIcon />

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

@@ -10,12 +10,12 @@ import {
     postItemToServer,
     postListToServer,
 } from "@/components/ControlledListManager/api.ts";
-import type { Item } from "@/types/ControlledListManager";
+import type { ControlledList, Selectable } from "@/types/ControlledListManager";
 
 const props: {
-    item: Item;
+    item: Selectable;
     editable: boolean;
-    field: "name" | "uri";
+    field: "name" | "dynamic" | "uri";
     label: string;
 } = defineProps(["item", "editable", "field", "label"]);
 
@@ -28,7 +28,7 @@ const dirtyFormValue = ref("");
 
 const inputValue = computed({
     get() {
-        return props.item[props.field];
+        return (props.item as any)[props.field];
     },
     set(newVal: string) {
         dirtyFormValue.value = newVal;
@@ -39,7 +39,7 @@ const width = computed(() => {
     if (props.field === "uri") {
         return "100%";
     }
-    return Math.max((props.item[props.field]).length + 2, 4) + "rem";
+    return '12rem'; // todo: change in next iteration
 });
 
 const toast = useToast();
@@ -48,15 +48,15 @@ const { $gettext } = useGettext();
 const onSave = () => {
     editing.value = false;
     // eslint-disable-next-line vue/no-mutating-props
-    props.item[props.field] = dirtyFormValue.value;
+    (props.item as any)[props.field] = dirtyFormValue.value;
 
     const isList = Object.hasOwn(props.item, "items");
     const saveFn = isList ? postListToServer : postItemToServer;
     saveFn(props.item, toast, $gettext);
 };
 const onCancel = () => {
     editing.value = false;
-    dirtyFormValue.value = props.item[props.field];
+    dirtyFormValue.value = (props.item as any)[props.field];
 };
 </script>
 

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

@@ -10,15 +10,15 @@ const buttonPink = "#ed7979";
 
 const props: {
     addLabel: string;
-    createItem: () => Promise<void>;
-    deleteItems: () => Promise<void>;
+    createAction: () => Promise<void>;
+    deleteAction: () => Promise<void>;
     deleteLabel: string;
     deleteLabelPlural: string;
     numberToDelete: number;
 } = defineProps([
     "addLabel",
-    "createItem",
-    "deleteItems",
+    "createAction",
+    "deleteAction",
     "deleteLabel",
     "deleteLabelPlural",
     "numberToDelete",
@@ -82,15 +82,15 @@ const clearSearch = () => {
                         },
                     },
                 }"
-                @click="props.createItem"
+                @click="props.createAction"
             />
             <!-- We might want an are you sure? modal -->
             <Button
                 class="button delete"
                 :label="props.numberToDelete > 1 ? props.deleteLabelPlural : props.deleteLabel"
                 raised
                 :disabled="props.numberToDelete === 0"
-                @click="props.deleteItems"
+                @click="props.deleteAction"
             />
         </div>
     </div>