#4

Author: spelkey-ucd

services/client/controllers/api/routes/picklist.js

@@ -27,6 +27,9 @@ router.get('/:idOrName', async (req, res) => {
       throw r.error;
     }
     logger.info('Picklist get successful', {corkTraceId: req.corkTraceId, picklistId: r.res.picklist_id});
+    if ( !req.query.include_items ) {
+      delete r.res.items;
+    }
     res.status(200).json(r.res);
   } catch (e) {
     return handleError(res, req, e);

services/client/controllers/api/utils/handleError.js

@@ -1,4 +1,4 @@
-import logger from '../../../../lib/logger.js';
+import logger from '#lib/logger.js';
 // import { MissingResourceError } from '../../../../lib/errors.js';
 
 function handleError(res, req, error, details) {

services/client/controllers/api/utils/validation/schemas/picklist.js

@@ -1,6 +1,6 @@
 import * as z from "zod";
 import { requiredString, urlFriendlyString, pageParam, perPageParam, booleanParam, toString } from "./utils.js";
-import models from '../../../../../../lib/models/index.js';
+import models from '#models';
 
 const picklistBaseSchema = z.object({
   description: toString.pipe(z.string().max(300)).optional(),
@@ -12,7 +12,9 @@ const picklistItemSchema = z.object({
   label: requiredString().pipe(z.string().max(250)),
   value: requiredString().pipe(z.string().max(250)),
   is_archived: z.boolean().optional(),
-  sort_order: z.coerce.number().int().nonnegative().optional()
+  sort_order: z.coerce.number().int().nonnegative().optional(),
+  include_segment: z.array(z.string().max(250)).optional(),
+  exclude_segment: z.array(z.string().max(250)).optional()
 });
 
 const picklistCreateSchema = picklistBaseSchema.extend({
@@ -68,14 +70,6 @@ const picklistIdOrNameSchema = z.object({
 const picklistQuerySchema = z.object({
   page: pageParam,
   per_page: perPageParam(15),
-  active: z.preprocess(
-    v => {
-      if (v === 'true') return true;
-      if (v === 'false') return false;
-      return v;
-    },
-    z.union([z.literal(true), z.literal(false)]).optional()
-  ),
   archived_only: booleanParam,
   active_only: booleanParam
 });

services/client/controllers/static.js

@@ -4,8 +4,8 @@ import { fileURLToPath } from 'url';
 import spaMiddleware from '@ucd-lib/spa-router-middleware';
 
 import loaderHtml from '../html/loader.html.js';
-import logger from '../../lib/logger.js';
-import config from '../../lib/config.js';
+import logger from '#lib/logger.js';
+import config from '#lib/config.js';
 import preloadedIcons from './icons.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -14,7 +14,7 @@ export default (app) => {
   let assetsDir = path.join(__dirname, '../public');
   logger.info(`Serving static assets from ${assetsDir}`);
 
-  const routes = ['picklist'];
+  const routes = ['picklist', 'field'];
   const appTitle = 'Reference Statistics';
 
   spaMiddleware({

services/client/dev/css/index.js

@@ -73,6 +73,15 @@ const styles = `
     line-height: 1.3rem;
     font-weight: 400;
   }
+  .ucd-link-list-item .ucd-link-list-item--badge {
+    display: inline-block;
+    background-color: var(--ucd-blue-50, #cce0f3);
+    color: var(--ucd-blue, #022851);
+    padding: 0 0.25rem;
+    font-size: .875rem;
+    font-weight: 700;
+
+  }
 
   ${sharedStyles}
   ${brandCssProps}

services/client/dev/elements/components/forms/ref-stats-picklist-form.js

@@ -67,7 +67,7 @@ export default class RefStatsPicklistForm extends Mixin(LitElement)
     this.payload = {};
     if ( !this.picklistIdOrName ) return;
 
-    const res = await this.PicklistModel.get(this.picklistIdOrName);
+    const res = await this.PicklistModel.get(this.picklistIdOrName, {include_items: true});
     if ( res?.state === 'loaded' ) {
       this.payload = {...res.payload};
     }
@@ -85,7 +85,7 @@ export default class RefStatsPicklistForm extends Mixin(LitElement)
   _onDeleteRequest(){
     this.AppStateModel.showDialogModal({
       title: 'Delete Picklist',
-      content: () => `Are you sure you want to delete this picklist? All data associated with this picklist will be lost. This action cannot be undone.`,
+      content: () => `Are you sure you want to delete this picklist? All data associated with this picklist will be lost. This action cannot be undone. To retain data, archive the picklist instead.`,
       actions: [
         {text: 'Close', value: 'dismiss', invert: true, color: 'secondary'},
         { text: 'Delete', color: 'double-decker', value: 'picklist-delete' }

services/client/dev/elements/components/forms/ref-stats-picklist-items-form.js

@@ -34,8 +34,13 @@ export default class RefStatsPicklistItemsForm extends Mixin(LitElement)
 
   willUpdate(props){
     if ( props.has('items') ) {
-      this._items = this.items.map((item, i) => { 
-        return {edited: false, expanded: false, item: {...item, sort_order: i}} 
+      this._items = this.items.map((item, i) => {
+        return {
+          edited: false, 
+          expanded: false,
+          include_segment_string: item.include_segment?.join(', ') || '',
+          exclude_segment_string: item.exclude_segment?.join(', ') || '',
+          item: {...item, sort_order: i}} 
       });
       if ( this._items.length === 0 ) {
         this.addItem();
@@ -76,6 +81,12 @@ export default class RefStatsPicklistItemsForm extends Mixin(LitElement)
     this.requestUpdate();
   }
 
+  _onSegmentInput(item, include, value) {
+    item[include ? 'include_segment_string' : 'exclude_segment_string'] = value;
+    const segments = value.split(',').map( s => s.trim() ).filter( s => s );
+    this._onItemInput(item, include ? 'include_segment' : 'exclude_segment', segments);
+  }
+
   setSortOrder(){
     this._items.forEach( (item, i) => {
       if ( item.item.sort_order !== i ) {

services/client/dev/elements/components/forms/ref-stats-picklist-items-form.tpl.js

@@ -68,6 +68,34 @@ export function render() {
                 required 
                 @input=${e => this._onItemInput(item, 'value', e.target.value)}>
             </cork-field-container>
+            <cork-field-container schema='picklist' path='items.${item.editedOrder}.is_archived' class='field-container checkbox'>
+              <input 
+                type="checkbox" 
+                id=${this.ctl.idGen.get('is_archived--' + i)} 
+                .checked=${item.item.is_archived || false}
+                @input=${() => this._onItemInput(item, 'is_archived', !item.item.is_archived)}>
+              <label for=${this.ctl.idGen.get('is_archived--' + i)}>Archived</label>
+            </cork-field-container>
+            <cork-field-container schema='picklist' path='items.${item.editedOrder}.include_segment' class='field-container'>
+              <label for=${this.ctl.idGen.get('include-segment--' + i)}>Include Segments</label>
+              <input 
+                type="text" 
+                id=${this.ctl.idGen.get('include-segment--' + i)} 
+                .value=${item.include_segment_string || ''}
+                placeholder="e.g. segment1, segment2"
+                @input=${e => this._onSegmentInput(item, true, e.target.value)}>
+              <div class='field-description'>Comma-separated list of segments to include. Will only show this item for users in these segments.</div>
+            </cork-field-container>
+            <cork-field-container schema='picklist' path='items.${item.editedOrder}.exclude_segment' class='field-container'>
+              <label for=${this.ctl.idGen.get('exclude-segment--' + i)}>Exclude Segments</label>
+              <input 
+                type="text" 
+                id=${this.ctl.idGen.get('exclude-segment--' + i)} 
+                .value=${item.exclude_segment_string || ''}
+                placeholder="e.g. segment1, segment2"
+                @input=${e => this._onSegmentInput(item, false, e.target.value)}>
+              <div class='field-description'>Comma-separated list of segments to exclude. Will hide this item for users in these segments.</div>
+            </cork-field-container>
           </div>
         </div>
       `)}

services/client/dev/elements/components/ref-stats-picklists.tpl.js

@@ -19,7 +19,8 @@ return html`
         <div class='ucd-link-list-item'>
           <cork-icon icon='fas.circle-chevron-right' class='ucd-link-list-item--icon'></cork-icon>
           <div>
-            <a href='/picklist/${picklist.name}' class='ucd-link-list-item--title'>${picklist.label} <span ?hidden=${!picklist.is_archived}>(Archived)</span></a>
+            <a href='/picklist/${picklist.name}' class='ucd-link-list-item--title'>${picklist.label}</a>
+            <div class='ucd-link-list-item--badge' ?hidden=${!picklist.is_archived}>Archived</div>
             <div class='ucd-link-list-item--excerpt'>
               <span>${picklist.name}</span>
               <span ?hidden=${!picklist.description}> | </span>

services/client/dev/elements/pages/admin/ref-stats-page-picklist.tpl.js

@@ -22,6 +22,7 @@ export function render() {
     <div class="l-container">
       <div class="l-basic--flipped">
         <div class="l-content">
+          <p>Picklists are lists of predefined options that can be used in select, radio, and checkbox questions throughout the application. They help standardize responses and ensure data consistency.</p>
           <ref-stats-picklists></ref-stats-picklists>
         </div>
         <div class="l-sidebar-second">