Merge pull request #999 from fdm-monster/feat/printer-group-filtering

fix: update group name feature

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client",
-  "version": "1.5.0-rc8",
+  "version": "1.5.0-rc9",
   "author": "David Zwart",
   "license": "AGPL-3.0-or-later",
   "repository": {

src/backend/printer-group.service.ts

@@ -51,4 +51,12 @@ export class PrinterGroupService extends BaseService {
     };
     return (await this.deleteApi(path, body)) as GroupWithPrintersDto<IdType>[];
   }
+
+  static async updateGroupName(groupId: IdType, name: string) {
+    const path = `${ServerApi.updateGroupNameRoute(groupId)}`;
+    const body = {
+      name,
+    };
+    return (await this.patchApi(path, body)) as GroupWithPrintersDto<IdType>[];
+  }
 }

src/backend/server.api.ts

@@ -26,6 +26,7 @@ export class ServerApi {
   static printerGroupRoute = `${ServerApi.base}/printer-group`;
   static createGroupRoute = `${ServerApi.base}/printer-group`;
   static deleteGroupRoute = (id: IdType) => `${ServerApi.base}/printer-group/${id}`;
+  static updateGroupNameRoute = (id: IdType) => `${ServerApi.base}/printer-group/${id}/name`;
   static addPrinterToGroupRoute = (id: IdType) => `${ServerApi.base}/printer-group/${id}/printer`;
   static deletePrinterFromGroupRoute = ServerApi.addPrinterToGroupRoute;
 

src/components/PrinterList/PrintersView.vue

@@ -4,11 +4,23 @@
       <v-card-title>
         Printers
         <v-spacer></v-spacer>
+        <v-select
+          v-if="hasPrinterGroupFeature && groupsWithPrinters.length"
+          multiple
+          :items="groupsWithPrinters"
+          item-text="name"
+          :return-object="true"
+          v-model="filteredGroupsWithPrinters"
+          placeholder="Select group to filter by"
+          prepend-icon="filter_list"
+          label="Filter by groups"
+        >
+        </v-select>
         <v-text-field
           v-model="search"
           class="p-2"
           clearable
-          label="Search"
+          label="Printer search"
           prepend-icon="search"
           single-line
         ></v-text-field>
@@ -142,16 +154,37 @@
         <h3>Existing groups:</h3>
 
         <v-container>
-          <v-chip
-            small
-            v-for="group of groupsWithPrinters"
-            :key="group.id"
-            close
-            @click:close="deleteGroup(group.id)"
-            class="mr-3"
+          <v-chip-group
+            v-model="selectedGroup"
+            @change="selectGroupForUpdatingName()"
+            active-class="primary--text"
+            column
           >
-            {{ group.name }}
-          </v-chip>
+            <v-chip
+              small
+              v-for="group of groupsWithPrinters"
+              :key="group.id"
+              close
+              @click:close="deleteGroup(group.id)"
+              class="mr-3"
+            >
+              {{ group.name }}
+            </v-chip>
+          </v-chip-group>
+        </v-container>
+
+        <h3 class="mt-3">Update group name</h3>
+        <v-container>
+          <v-alert v-if="!selectedGroupObject"> Select a group to update its name. </v-alert>
+          <v-text-field
+            :disabled="!selectedGroupObject"
+            v-model="updatedGroupName"
+            label="Group Name"
+            placeholder="Type group name here"
+          >
+            Name
+          </v-text-field>
+          <v-btn @click="updateGroupName(selectedGroupObject)">Update name</v-btn>
         </v-container>
 
         <h3 class="mt-3">Add group</h3>
@@ -164,8 +197,8 @@
           >
             Name
           </v-text-field>
+          <v-btn @click="createGroup()">Create new group</v-btn>
         </v-container>
-        <v-btn @click="createGroup()">Save</v-btn>
       </v-card-text>
     </v-card>
   </div>
@@ -203,7 +236,10 @@ const floorStore = useFloorStore();
 const dialogsStore = useDialogsStore();
 const featureStore = useFeatureStore();
 const groupsWithPrinters = ref<GroupWithPrintersDto<IdType>[]>([]);
+const filteredGroupsWithPrinters = ref<GroupWithPrintersDto<IdType>[]>([]);
 const newGroupName = ref("");
+const updatedGroupName = ref("");
+const selectedGroup = ref<number>();
 
 const search = ref("");
 const expanded = ref([]);
@@ -236,8 +272,21 @@ const printerGroupsQuery = useQuery({
   },
 });
 
-const printers = computed(() => printerStore.printers);
+const printers = computed(() => {
+  if (!hasPrinterGroupFeature.value || !filteredGroupsWithPrinters.value?.length) {
+    return printerStore.printers;
+  }
+  const printerIdsInFilteredGroups =
+    filteredGroupsWithPrinters.value.flatMap((g) => g.printers.map((p) => p.printerId)) || [];
+  return printerStore.printers.filter((p) => printerIdsInFilteredGroups.includes(p.id));
+});
+
 const currentEventReceivedAt = computed(() => printerStateStore.printerCurrentEventReceivedAtById);
+const selectedGroupObject = computed(() => {
+  if (!selectedGroup.value && selectedGroup.value !== 0) return;
+
+  return groupsWithPrinters.value[selectedGroup.value];
+});
 
 const diffSeconds = (timestamp: number) => {
   if (!timestamp) return;
@@ -295,6 +344,28 @@ const createGroup = async () => {
   snackbar.info("Created group");
 };
 
+const selectGroupForUpdatingName = () => {
+  if (!selectedGroupObject.value) return;
+
+  updatedGroupName.value = selectedGroupObject.value?.name;
+};
+
+const updateGroupName = async (group?: GroupWithPrintersDto) => {
+  if (!group?.id) {
+    throw new Error("Group id was not defined");
+  }
+  const existingGroup = groupsWithPrinters.value.find((g) => g.id === group.id);
+  if (!existingGroup) {
+    throw new Error("Group was not found, please reload the page");
+  }
+  if (!updatedGroupName.value?.trim()?.length) {
+    throw new Error("Please set a non-empty group name");
+  }
+
+  await PrinterGroupService.updateGroupName(group.id, updatedGroupName.value.trim());
+  await printerGroupsQuery.refetch();
+};
+
 const deleteGroup = async (groupId: IdType) => {
   const existingGroup = groupsWithPrinters.value.find((g) => g.id === groupId);
   if (!existingGroup) {