Differences

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

--- newdevs:angular_making_calls [2023/08/08 22:29] – [PcrudService example] sandbergja
+++ newdevs:angular_making_calls [2024/03/28 22:53] – [Updating data in the database] add pcrud example sandbergja
@@ Line 62: / Line 62: @@
   this.net.request( 'open-ils.booking',
     'open-ils.booking.resources.create_from_copies',
-    // This OpenSRF method takes two parameters: the user's token and
+    /* This OpenSRF method takes two parameters: the user's token and
-    // an array of item IDs to make bookable
+     * an array of item IDs to make bookable
+     */
     this.auth.token(), [1, 2, 3])
     // Like the PcrudService, the NetService is also asynchronous...
     .subscribe(() => { alert('Those items are bookable now')});
-  // Since the previous alert has to wait until a communication
+  /* Since the previous alert has to wait until a communication
-  // comes back from OpenSRF, the following alert will almost
+   * comes back from OpenSRF, the following alert will almost
-  // certainly appear to the user before the
+   * certainly appear to the user before the
-  // 'Those items are bookable now' alert.
+   * 'Those items are bookable now' alert.
+   */
   alert('loading...');
@@ Line 79: / 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 =====
@@ Line 107: / Line 181: @@
   - 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.