Differences

This shows you the differences between two versions of the page.

--- newdevs:angular_making_calls [2023/08/08 22:30] – [NetService example] sandbergja
+++ newdevs:angular_making_calls [2024/03/28 23:08] – [Deleting data in the database] add examples sandbergja
@@ Line 81: / Line 81: @@
 ===== Reading data from the database =====
-Examples coming soon
+==== PcrudService example ====
+   this.pcrud.search(
+       // The IDL class we want to search: this is shelving locations
+       'acpl',
+       // The filters we want to pass (the SQL WHERE clause).
+       // This uses the
+       {opac_visible: 't'}
+    ).subscribe((location) => console.log(location.name()));
+Each shelving location is considered to be a different RxJS event, so the above
+code will log each shelving location to the console separately.  If you want
+to wait for them to finish and log them all at once in an array, you can do so
+with the RxJS toArray operator:
+    this.pcrud.search(
+        'acpl',
+        {opac_visible: 't'}
+    ).pipe(toArray()
+    ).subscribe((locations) => {
+        // Only log the name field, not the whole object
+        console.log(locations.map((location) => location.name()))
+    });
+More information about the JSON query syntax is [[documentation:tutorials:json_query#the_where_clause|available in the tutorial]].
+The above assumes that you have injected the ''PcrudService'' as ''this.pcrud'' earlier in the file.
+==== NetService example ====
+Some interfaces need data in very specific formats, or need to use complicated JOINs
+when querying the database.  In these cases, a nice approach is to create a custom
+OpenSRF method in Perl and use the angular NetService to call it.  In this example,
+we're calling the 'open-ils.acq.purchase_order.retrieve' OpenSRF method to gather a
+ton of information about the purchase order with ID #1.  Refer to the OpenSRF method's
+documentation to know which parameters you need to send with your request.
+    this.net.request(
+        'open-ils.acq',
+        'open-ils.acq.purchase_order.retrieve',
+        this.auth.token(),
+, {
+            flesh_provider: true,
+            flesh_notes: true,
+            flesh_po_items: true,
+            flesh_po_items_further: true,
+            flesh_price_summary: true,
+            flesh_lineitem_count: true
+        }
+    ).subscribe(po => console.log(po));
+The above assumes that you have injected the ''NetService'' as ''this.net'' and the ''AuthService'' as ''this.auth'' earlier in the file.
 ===== Updating data in the database =====
+==== PcrudService example ====
-Examples coming soon
+The basic workflow for updating data in the database is to:
+  - Retrieve the object you wish to change.
+  - Make your changes in memory.
+  - Use the Pcrud service's ''update'' method to save the change to the database.
+The following example retrieves the item with ID #1, changes its barcode to 1234567 in memory, then saves the updated barcode to the database:
+    this.pcrud.retrieve('acp', 1)
+        .pipe(switchMap((item) => {
+            item.barcode('1234567');
+            return this.pcrud.update(item);
+    })).subscribe();
+Notice that we use the rxjs ''switchMap'' operator to switch our observable halfway through, from a `retrieve` call to an `update` call.  This helps us to avoid nesting RxJs subscriptions within each other, which can get very complicated to troubleshoot.
+==== NetService example ====
+coming soon
 ===== Deleting data in the database =====
-Examples coming soon
+==== PcrudService example ====
+As with updating objects, you will need to retrieve an object and have a copy in memory before you can delete it.  The following example searches for all shelving locations called "Microfilm" and then deletes them, one by one:
+  this.pcrud.search('acpl',
+                     {name: 'Microfilm'})
+       .pipe(switchMap((location) => {
+           return this.pcrud.remove(location);
+       })).subscribe();
+==== NetService example ====
+Here's an example of deleting record bucket #13 from the database, along with all its bucket entries (assuming the currently logged in user has the DELETE_CONTAINER permission):
+   this.net.request('open-ils.actor',
+                    'open-ils.actor.container.full_delete',
+                    this.auth.token(),
+                    'biblio',
+).subscribe(() => {
+        alert('Your bucket is gone!');
+    });
 ===== Troublsehooting OpenSRF calls in your browser =====
@@ Line 109: / Line 201: @@
   - On the response tab, you will see a list of all traffic that happened within the websocket.  You can select each message to get more details about the payload it contained.  The Up arrow symbol indicates a message that the Angular client sent to OpenSRF, while the Down arrow symbol indicates a message that OpenSRF sent to the Angular client.
+==== Chrome, Edge, and other Chromium-based browsers ====
+  - Open [[https://developer.chrome.com/docs/devtools/open/|the developer tools]]
+  - Open the Network tab
+  - Perform the action in the UI that you are troubleshooting (e.g. navigate to the screen you are working on, press the button that is causing problems, etc.)
+  - In the devtools, press the WS button to limit to Websockets traffic.
+  - Select the websocket request from the list of requests.
+  - On the messages tab, you will see a list of all traffic that happened within the websocket.  You can select each message to get more details about the payload it contained.  The Up arrow symbol indicates a message that the Angular client sent to OpenSRF, while the Down arrow symbol indicates a message that OpenSRF sent to the Angular client.