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/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>

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

@@ -22,33 +22,33 @@ const { $gettext } = useGettext();
 
 const props: {
     addLabel: string;
-    createItem: () => Promise<void>;
-    deleteItems: (selectedItems: Selectables) => Promise<void>;
+    createAction: () => Promise<void>;
+    countLabel: string;
+    deleteAction: (selected: Selectables) => Promise<void>;
     deleteLabel: string;
     deleteLabelPlural: string;
-    displayedItem: Selectable;
-    fetchItems: () => Promise<void>;
-    items: Selectables;
-    itemLabel: string;
-    noItemLabel: string;
+    fetchAction: () => Promise<void>;
     noSearchResultLabel: string;
-    setDisplayed: (item: Selectable) => void;
+    noSelectionLabel: string;
+    selectables: Selectables;
+    selection: Selectable | null;
+    setSelection: (selectable: Selectable) => void;
 } = defineProps([
     "addLabel",
-    "createItem",
-    "deleteItems",
+    "createAction",
+    "countLabel",
+    "deleteAction",
     "deleteLabel",
     "deleteLabelPlural",
-    "displayedItem",
-    "fetchItems",
-    "items",
-    "itemLabel",
-    "noItemLabel",
+    "fetchAction",
     "noSearchResultLabel",
-    "setDisplayed",
+    "noSelectionLabel",
+    "selectables",
+    "selection",
+    "setSelection",
 ]);
 
-const selectedItems: Ref<Selectables> = ref([]);
+const selected: Ref<Selectables> = ref([]);
 const searchValue = ref("");
 
 const bestRepresentation = (item: Selectable) => {
@@ -73,13 +73,13 @@ const bestRepresentation = (item: Selectable) => {
     return bestLabel.value;
 };
 
-const filteredItems = computed(() => {
+const filteredSelectables = computed(() => {
     const loweredTerm = searchValue.value.toLowerCase();
     if (!loweredTerm) {
-        return props.items;
+        return props.selectables;
     }
-    return props.items.filter((item) => {
-        return bestRepresentation(item)
+    return props.selectables.filter((selectable) => {
+        return bestRepresentation(selectable)
             .toLowerCase()
             .includes(loweredTerm);
     });
@@ -97,49 +97,49 @@ const rowClass = (rowData: Selectable) => {
     return `${depth} indented-row`;
 };
 
-const toggleCheckbox = (item: ControlledList | ControlledListItem) => {
-    const i = selectedItems.value.indexOf(item);
+const toggleCheckbox = (selectable: ControlledList | ControlledListItem) => {
+    const i = selected.value.indexOf(selectable);
     if (i === -1) {
-        selectedItems.value.push(item);
+        selected.value.push(selectable);
     } else {
-        selectedItems.value.splice(i, 1);
+        selected.value.splice(i, 1);
     }
 };
 const selectAll = () => {
-    selectedItems.value = props.items;
+    selected.value = props.selectables;
 };
 const clearAll = () => {
-    selectedItems.value = [];
+    selected.value = [];
 };
-const selectRow = (item: ControlledList | ControlledListItem) => {
-    props.setDisplayed(item);
+const selectRow = (selected: ControlledList | ControlledListItem) => {
+    props.setSelection(selected);
 };
 
-await props.fetchItems();
+await props.fetchAction();
 </script>
 
 <template>
     <SearchAddDelete
         v-model="searchValue"
-        :create-item
+        :create-action
         :add-label
-        :delete-items="
+        :delete-action="
             () => {
-                deleteItems(selectedItems);
-                selectedItems.splice(0);
+                deleteAction(selected);
+                selected.splice(0);
             }
         "
         :delete-label
         :delete-label-plural
-        :number-to-delete="selectedItems.length"
+        :number-to-delete="selected.length"
     />
     <div class="selection-header">
         <span
-            v-if="items.length"
+            v-if="selectables.length"
             style="margin-left: 1rem"
         >
             <button
-                v-if="selectedItems.length"
+                v-if="selected.length"
                 @click="clearAll"
             >
                 {{ arches.translations.clearAll }}
@@ -152,49 +152,49 @@ await props.fetchItems();
             </button>
         </span>
         <span
-            v-if="items.length"
+            v-if="selectables.length"
             style="margin-right: 1rem"
         >
-            {{ items.length }}
-            {{ itemLabel }}
+            {{ selectables.length }}
+            {{ countLabel }}
         </span>
     </div>
 
     <DataView
-        v-if="items.length"
-        :value="filteredItems"
+        v-if="selectables.length"
+        :value="filteredSelectables"
     >
         <template #list="slotProps">
             <div
-                v-for="(item, index) in slotProps.items"
+                v-for="(selectable, index) in slotProps.items"
                 :key="index"
                 class="itemRow"
-                :class="{ selected: displayedItem?.id === item.id }"
+                :class="{ selected: selection?.id === selectable.id }"
                 tabindex="0"
-                @click="selectRow(item)"
-                @keyup.enter="selectRow(item)"
+                @click="selectRow(selectable)"
+                @keyup.enter="selectRow(selectable)"
             >
                 <input
                     type="checkbox"
-                    :class="rowClass(item)"
-                    :checked="selectedItems.indexOf(item) > -1"
-                    @click="toggleCheckbox(item)"
+                    :class="rowClass(selectable)"
+                    :checked="selected.indexOf(selectable) > -1"
+                    @click="toggleCheckbox(selectable)"
                 >
-                <span>{{ bestRepresentation(item) }}</span>
+                <span>{{ bestRepresentation(selectable) }}</span>
             </div>
         </template>
         <template #empty>
             <div>
-                <span class="no-items">{{ noSearchResultLabel }}</span>
+                <span class="no-selections">{{ noSearchResultLabel }}</span>
             </div>
         </template>
     </DataView>
 
     <div
         v-else
-        class="no-items"
+        class="no-selections"
     >
-        <span>{{ noItemLabel }}</span>
+        <span>{{ noSelectionLabel }}</span>
     </div>
 </template>
 
@@ -245,7 +245,7 @@ input[type="checkbox"] {
 .depth-4 > indented-row {
     margin-left: 8rem;
 }
-.no-items {
+.no-selections {
     margin: 2rem;
     display: flex;
     justify-content: center;