@explorer-1/vue 0.2.101 → 0.2.103

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @explorer-1/vue
 
+## 0.2.103
+
+### Patch Changes
+
+- dd8916f: Adds CSR Table Block component and stories.
+
+## 0.2.102
+
+### Patch Changes
+
+- edd1d1e: Adding types for redirects query
+
 ## 0.2.101
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.101",
+  "version": "0.2.103",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -15,6 +15,7 @@
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
     "@tailwindcss/forms": "^0.5.7",
+    "ag-grid-vue3": "^33.2.0",
     "animejs": "^3.2.2",
     "click-outside-vue3": "^4.0.1",
     "datebook": "^8.0.1",

package/src/components/BaseModal/BaseModalDialog.vue

@@ -4,7 +4,8 @@
     @click="bgCloseModal"
   >
     <div
-      class="relative w-full max-w-xl p-8 m-auto bg-white"
+      class="relative w-full p-8 m-auto bg-white"
+      :class="widthClass"
       @click.stop
     >
       <BaseHeading
@@ -43,8 +44,13 @@ export default defineComponent({
     bgClose: {
       type: Boolean,
       default: false
+    },
+    widthClass: {
+      type: String,
+      default: 'max-w-xl'
     }
   },
+  emits: ['close'],
   methods: {
     closeModal() {
       this.$emit('close')

package/src/components/BlockCsrTable/BlockCsrTable.stories.js

@@ -0,0 +1,202 @@
+import BlockCsrTable from './BlockCsrTable.vue'
+
+export default {
+  title: 'Components/FeatureFlags/BlockCsrTable',
+  component: BlockCsrTable,
+  excludeStories: /.*Data$/
+}
+
+export const BlockCsrTableData = [
+  {
+    Id: 1,
+    TestRecordId: 2765,
+    Attachment: 'attachment_filename.pdf',
+    Status: 1,
+    GenericPartNumber: 'OP467',
+    Description: 'QUAD OP AMP Linear Device',
+    PartTechnology: 'Bipolar',
+    PartLDC: '2416B',
+    Manufacturer: 'Analog Devices (Precision Monolithics, Inc.)',
+    Type: 'Single Event Effects',
+    TestSubTypes: 'Single Event Dielectric Rupture (SEDR)',
+    ActualCompletionDate: '2025-03-15',
+    ExportPackageRates: [
+      {
+        Id: 1,
+        ExportPackageId: 1,
+        TotalDose: '200',
+        DoseRate: null,
+        TotalFluence: null,
+        LETthOrEnergy: null,
+        Rates: null,
+        Fluence: null,
+        Energy: null,
+        TestSubType: null
+      }
+    ]
+  },
+  {
+    Id: 2,
+    TestRecordId: 2,
+    Attachment: 'attachment/1',
+    Status: 0,
+    GenericPartNumber: 'GPN123',
+    Description: 'A description for part 1',
+    PartTechnology: 'BiCMOS',
+    PartLDC: 'Lot 1',
+    Manufacturer: 'Texas Instruments',
+    Type: 'Single Event Effects',
+    TestSubTypes: 'SEEU',
+    ActualCompletionDate: '2021-10-07T21:01:10Z',
+    ExportPackageRates: [
+      {
+        Id: 1,
+        ExportPackageId: 1,
+        TotalDose: null,
+        DoseRate: null,
+        TotalFluence: null,
+        LETthOrEnergy: '1234',
+        Fluence: null,
+        Energy: null
+      }
+    ]
+  },
+  {
+    Id: 3,
+    TestRecordId: 3,
+    Attachment: 'attachment/2',
+    Status: 1,
+    GenericPartNumber: 'GPN345',
+    Description: 'A description for part 2',
+    PartTechnology: 'Transistor',
+    PartLDC: 'Lot 2',
+    Manufacturer: 'NanoTech',
+    Type: 'TID',
+    TestSubTypes: '',
+    ActualCompletionDate: '2021-10-08T21:01:10Z',
+    ExportPackageRates: [
+      {
+        Id: 2,
+        ExportPackageId: 2,
+        TotalDose: '154',
+        DoseRate: '789',
+        TotalFluence: null,
+        LETthOrEnergy: null,
+        Fluence: null,
+        Energy: null
+      }
+    ]
+  },
+  {
+    Id: 4,
+    TestRecordId: 4,
+    Attachment: 'attachment/2',
+    Status: 1,
+    GenericPartNumber: 'TEST',
+    Description: 'A description for part. Lorem ipsum dolor sit amet consectatur.',
+    PartTechnology: 'Transistor',
+    PartLDC: 'Lot 2',
+    Manufacturer: 'Test',
+    Type: 'TID',
+    TestSubTypes: '',
+    ActualCompletionDate: '2021-10-08T21:01:10Z',
+    ExportPackageRates: [
+      {
+        Id: 2,
+        ExportPackageId: 2,
+        TotalDose: '154',
+        DoseRate: '789',
+        TotalFluence: null,
+        LETthOrEnergy: null,
+        Fluence: null,
+        Energy: null
+      }
+    ]
+  },
+  {
+    Id: 4,
+    TestRecordId: 4,
+    Attachment: 'attachment/2',
+    Status: 1,
+    GenericPartNumber: 'TEST',
+    Description: 'A description for part 2',
+    PartTechnology: 'Transistor',
+    PartLDC: 'Lot 2',
+    Manufacturer: 'Test',
+    Type: 'TID',
+    TestSubTypes: '',
+    ActualCompletionDate: '2021-10-08T21:01:10Z',
+    ExportPackageRates: [
+      {
+        Id: 2,
+        ExportPackageId: 2,
+        TotalDose: '154',
+        DoseRate: '789',
+        TotalFluence: null,
+        LETthOrEnergy: null,
+        Fluence: null,
+        Energy: null
+      }
+    ]
+  },
+  {
+    Id: 4,
+    TestRecordId: 4,
+    Attachment: 'attachment/2',
+    Status: 1,
+    GenericPartNumber: 'TEST',
+    Description: 'A description for part 2',
+    PartTechnology: 'Transistor',
+    PartLDC: 'Lot 2',
+    Manufacturer: 'Test',
+    Type: 'TID',
+    TestSubTypes: '',
+    ActualCompletionDate: '2021-10-08T21:01:10Z',
+    ExportPackageRates: [
+      {
+        Id: 2,
+        ExportPackageId: 2,
+        TotalDose: '154',
+        DoseRate: '789',
+        TotalFluence: null,
+        LETthOrEnergy: null,
+        Fluence: null,
+        Energy: null
+      }
+    ]
+  },
+  {
+    Id: 4,
+    TestRecordId: 4,
+    Attachment: 'attachment/2',
+    Status: 1,
+    GenericPartNumber: 'TEST',
+    Description: 'A description for part 2',
+    PartTechnology: 'Transistor',
+    PartLDC: 'Lot 2',
+    Manufacturer: 'Test',
+    Type: 'TID',
+    TestSubTypes: '',
+    ActualCompletionDate: '2021-10-08T21:01:10Z',
+    ExportPackageRates: [
+      {
+        Id: 2,
+        ExportPackageId: 2,
+        TotalDose: '154',
+        DoseRate: '>789',
+        TotalFluence: null,
+        LETthOrEnergy: null,
+        Fluence: null,
+        Energy: null
+      }
+    ]
+  }
+]
+
+export const BaseStory = {
+  args: {
+    rowData: BlockCsrTableData,
+    attachmentPrefix: 'https://www.jpl.nasa.gov',
+    apiEndpoint: null
+  }
+}

package/src/components/BlockCsrTable/BlockCsrTable.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { computed, reactive, ref, onMounted } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseModalDialog from '../BaseModal/BaseModalDialog.vue'
+import CsrAttachment from './CsrAttachment.vue'
+import CsrTestLimits from './CsrTestLimits.vue'
+import CsrTestLimitsTable from './CsrTestLimitsTable.vue'
+import SearchInput from './../SearchInput/SearchInput.vue'
+
+import {
+  ModuleRegistry,
+  AllCommunityModule,
+  ValidationModule,
+  themeMaterial
+} from 'ag-grid-community'
+import { AgGridVue } from 'ag-grid-vue3'
+
+ModuleRegistry.registerModules([AllCommunityModule])
+ModuleRegistry.registerModules([ValidationModule])
+
+interface BlockCsrTableProps {
+  rowData?: BlockCsrTableRow[]
+  attachmentPrefix?: string
+  apiEndpoint?: string
+}
+
+export interface ExportPackageRate {
+  Id: number
+  ExportPackageId: number
+  TotalDose: string
+  DoseRate: string
+  TotalFluence: string
+  LETthOrEnergy: string
+  Fluence: string
+  Energy: string
+}
+interface BlockCsrTableRow {
+  Id: number
+  TestRecordId: number
+  Attachment: string
+  Status: number
+  GenericPartNumber: string
+  Description: string
+  PartTechnology: string
+  PartLDC: string
+  Manufacturer: string
+  Type: string
+  TestSubTypes: string
+  ActualCompletionDate: string
+  ExportPackageRates: ExportPackageRate[]
+}
+const props = withDefaults(defineProps<BlockCsrTableProps>(), {
+  rowData: undefined,
+  attachmentPrefix: '',
+  apiEndpoint: undefined
+})
+const { rowData, apiEndpoint, attachmentPrefix } = reactive(props)
+
+const BlockCsrTableRef = ref()
+const fetchedRowData = ref()
+const filterText = ref()
+const showModal = ref(false)
+const modalData = ref()
+
+const closeModal = () => {
+  showModal.value = false
+  modalData.value = undefined
+}
+const openModal = (data: any) => {
+  modalData.value = data
+  showModal.value = true
+}
+
+const theme = themeMaterial.withParams({
+  accentColor: 'rgb(25 156 227)' // jpl-blue-light,
+})
+
+const headerClass = [
+  'min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white text-sm border-gray-light-mid lg:p-5 p-3 border-b text-left'
+]
+const defaultcolDef = {
+  flex: 1,
+  filter: true,
+  suppressMovable: true,
+  headerClass
+}
+const colDefs = ref([
+  {
+    field: 'GenericPartNumber',
+    headerName: 'Part Number',
+    filterParams: {
+      buttons: ['reset', 'apply'],
+      closeOnApply: true
+    }
+  },
+  {
+    field: 'Manufacturer',
+    wrapText: true,
+    autoHeight: true,
+    filterParams: {
+      buttons: ['reset', 'apply'],
+      closeOnApply: true
+    }
+  },
+  {
+    field: 'Type',
+    headerName: 'Test Type',
+    wrapText: true,
+    autoHeight: true,
+    filterParams: {
+      buttons: ['reset', 'apply'],
+      closeOnApply: true
+    }
+  },
+  {
+    field: 'PartTechnology',
+    headerName: 'Part Technology',
+    filterParams: {
+      buttons: ['reset', 'apply'],
+      closeOnApply: true
+    }
+  },
+  {
+    field: 'Description',
+    headerName: 'Description',
+    wrapText: true,
+    autoHeight: true,
+    filterParams: {
+      buttons: ['reset', 'apply'],
+      closeOnApply: true
+    }
+  },
+  {
+    field: 'ExportPackageRates',
+    headerName: 'Test Limits',
+    cellDataType: 'object',
+    filter: false,
+    cellRenderer: CsrTestLimits,
+    cellRendererParams: {
+      openModal: openModal.bind(this)
+    }
+  },
+  {
+    field: 'Attachment',
+    filter: true,
+    filterParams: {
+      filterOptions: ['blank', 'notBlank'],
+      defaultOption: 'notBlank',
+      buttons: ['reset', 'apply'],
+      closeOnApply: true
+    },
+    cellRenderer: CsrAttachment,
+    cellRendererParams: {
+      attachmentPrefix
+    }
+  }
+])
+
+async function getRowData() {
+  if (apiEndpoint) {
+    try {
+      let result = await fetch(apiEndpoint)
+      result = await result.json()
+      fetchedRowData.value = result
+      return result
+    } catch (e) {
+      console.log(e)
+    }
+  }
+}
+
+const computedRowData = computed(() => {
+  return fetchedRowData.value || rowData
+})
+
+onMounted(async () => {
+  await getRowData()
+})
+
+// methods
+const onFilterTextBoxChanged = () => {
+  BlockCsrTableRef.value.api.setGridOption('quickFilterText', filterText.value)
+}
+</script>
+<template>
+  <client-only>
+    <div
+      v-if="rowData || apiEndpoint"
+      class="BlockCsrTable"
+    >
+      <div class="MainCsrTable">
+        <SearchInput
+          v-model="filterText"
+          class="mb-3"
+          placeholder="Filter parts&hellip;"
+          @input="onFilterTextBoxChanged()"
+        />
+        <ag-grid-vue
+          ref="BlockCsrTableRef"
+          class="w-full"
+          :theme="theme"
+          :row-data="computedRowData"
+          :column-defs="colDefs"
+          :default-col-def="defaultcolDef"
+          :pagination-page-size="20"
+          :ensure-dom-order="true"
+          :suppress-server-side-full-width-loading-row="true"
+          dom-layout="autoHeight"
+          pagination
+        >
+        </ag-grid-vue>
+      </div>
+      <BaseModalDialog
+        v-show="showModal"
+        bg-close
+        width-class="max-w-5xl"
+        @close="closeModal()"
+      >
+        <div
+          v-if="modalData"
+          class="mb-8 text-sm"
+        >
+          <div class="mb-5">
+            <p v-if="modalData.GenericPartNumber">
+              <strong>Part Number:</strong> {{ modalData.GenericPartNumber }}
+            </p>
+            <p v-if="modalData.Manufacturer">
+              <strong>Manufacturer:</strong> {{ modalData.Manufacturer }}
+            </p>
+            <p v-if="modalData.Type"><strong>Test Type:</strong> {{ modalData.Type }}</p>
+            <p v-if="modalData.PartTechnology">
+              <strong>Part Technology:</strong> {{ modalData.PartTechnology }}
+            </p>
+            <p v-if="modalData.Description">
+              <strong>Description:</strong> {{ modalData.Description }}
+            </p>
+            <p v-if="modalData.Attachment">
+              <strong class="pr-1">Attachment:</strong>
+              <BaseLink
+                :href="modalData.Attachment"
+                class="inline"
+                variant="default"
+                target="_blank"
+                >Download</BaseLink
+              >
+            </p>
+          </div>
+          <h2 class="text-lg tracking-tight mb-3">Test Limits</h2>
+          <CsrTestLimitsTable :data="modalData.ExportPackageRates" />
+        </div>
+      </BaseModalDialog>
+    </div>
+  </client-only>
+</template>
+<style type="scss">
+.BlockCsrTable {
+  .MainCsrTable .ag-root {
+    @apply overflow-x-auto;
+    min-height: 75rem;
+    .ag-body {
+      min-width: 40rem;
+    }
+    .ag-header,
+    .ag-header-viewport {
+      @apply overflow-visible;
+    }
+  }
+  .ag-cell {
+    padding-left: 0.6rem;
+    padding-right: 0.6rem;
+    @screen lg {
+      padding-left: 1.2rem;
+      padding-right: 1.2rem;
+    }
+  }
+  .ag-root-wrapper,
+  .ag-cell,
+  .ag-theme-params-1 {
+    @apply font-primary;
+  }
+  .ag-cell-wrap-text {
+    line-height: 1.25rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+  .ag-filter-filter {
+    .ag-wrapper::before {
+      @apply hidden;
+    }
+    .ag-input-field-input {
+      @apply text-xs;
+    }
+  }
+  .ag-paging-row-summary-panel {
+    @apply whitespace-nowrap;
+  }
+}
+</style>

package/src/components/BlockCsrTable/CsrAttachment.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { reactive, computed } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+interface CsrAttachmentProps {
+  params: {
+    data: {
+      Attachment: string
+    }
+    attachmentPrefix: string
+  }
+}
+
+const props = withDefaults(defineProps<CsrAttachmentProps>(), {
+  params: undefined
+})
+const { params } = reactive(props)
+
+const prefix = computed(() => {
+  // make sure it ends with a slash
+  if (params.attachmentPrefix && params.attachmentPrefix.endsWith('/')) {
+    return params.attachmentPrefix
+  } else {
+    return params.attachmentPrefix + '/'
+  }
+})
+</script>
+<template>
+  <BaseLink
+    v-if="params?.data?.Attachment"
+    :href="prefix + params.data.Attachment"
+    variant="default"
+    target="_blank"
+    >Download</BaseLink
+  >
+</template>

package/src/components/BlockCsrTable/CsrTestLimits.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { type ExportPackageRate } from './BlockCsrTable.vue'
+
+interface CsrTestLimitsProps {
+  params: {
+    data: {
+      ExportPackageRates: ExportPackageRate[]
+    }
+  }
+}
+
+const props = withDefaults(defineProps<CsrTestLimitsProps>(), {
+  params: undefined
+})
+const { params } = reactive(props)
+
+const openModal = () => {
+  // @ts-ignore
+  params.openModal(params.data)
+}
+</script>
+<template>
+  <div class="CsrTestLimits">
+    <p
+      v-if="params.data.ExportPackageRates?.length"
+      class="text-action hover:text-action-hover hover:cursor-pointer underline"
+      @click="openModal()"
+    >
+      <span class="hidden lg:inline">View Test Limits</span>
+      <span class="inline lg:hidden">View</span>
+    </p>
+  </div>
+</template>

package/src/components/BlockCsrTable/CsrTestLimitsTable.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  ModuleRegistry,
+  AllCommunityModule,
+  ValidationModule,
+  themeMaterial
+} from 'ag-grid-community'
+import { AgGridVue } from 'ag-grid-vue3'
+import { type ExportPackageRate } from './BlockCsrTable.vue'
+
+ModuleRegistry.registerModules([AllCommunityModule])
+ModuleRegistry.registerModules([ValidationModule])
+
+interface CsrTestLimitsTableProps {
+  data: ExportPackageRate[]
+}
+
+withDefaults(defineProps<CsrTestLimitsTableProps>(), {
+  data: undefined
+})
+
+const headerClass = [
+  'bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white text-xs border-gray-light-mid px-3 border-b text-left'
+]
+const CsrTestLimitsTableRef = ref()
+const theme = themeMaterial.withParams({
+  accentColor: 'rgb(25 156 227)', // jpl-blue-light
+  spacing: 5
+})
+const colDefs = ref([
+  {
+    field: 'ExportPackageId',
+    headerName: 'ID',
+    filter: false,
+    flex: 0,
+    width: 50
+  },
+  { field: 'TotalDose' },
+  { field: 'DoseRate' },
+  { field: 'TotalFluence' },
+  {
+    field: 'LETthOrEnergy',
+    headerName: 'LETth or Energy Range'
+  },
+  {
+    field: 'Fluence'
+  },
+  { field: 'Energy' }
+])
+const defaultcolDef = {
+  flex: 1,
+  filter: true,
+  suppressMovable: true,
+  headerClass,
+  filterParams: {
+    buttons: ['reset', 'apply'],
+    closeOnApply: true
+  }
+}
+</script>
+<template>
+  <ag-grid-vue
+    ref="CsrTestLimitsTableRef"
+    class="w-full CsrTestLimitsTable"
+    :theme="theme"
+    :row-data="data"
+    :column-defs="colDefs"
+    dom-layout="autoHeight"
+    :default-col-def="defaultcolDef"
+  >
+  </ag-grid-vue>
+</template>
+<style lang="scss">
+.CsrTestLimitsTable {
+  .ag-root {
+    @apply min-h-12 overflow-x-auto;
+    .ag-body {
+      min-width: 40rem;
+    }
+    .ag-header,
+    .ag-header-viewport {
+      @apply overflow-visible;
+    }
+  }
+  .ag-root-wrapper {
+    @apply overflow-visible;
+  }
+}
+</style>

package/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -18,6 +18,7 @@ import { BlockVideoData } from './../BlockVideo/BlockVideo.stories'
 import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.stories'
 import { BlockNewsletterSignupData } from '../BlockNewsletterSignup/BlockNewsletterSignup.stories'
 import { MixedColumnWidths } from './../BlockRichTable/BlockRichTable.stories'
+import { BlockCsrTableData } from './../BlockCsrTable/BlockCsrTable.stories'
 import BlockStreamfield, { variants } from './BlockStreamfield.vue'
 
 export default {
@@ -176,14 +177,24 @@ export const BlockStreamfieldData = {
     }
   ]
 }
+const BlockStreamfieldFeatureFlagsData = [
+  {
+    blockType: 'CsrTableBlock',
+    rowData: BlockCsrTableData
+  }
+]
 
 export const BaseStory = {
-  args: { data: BlockStreamfieldData.body, variant: 'default', size: 'large' }
+  args: {
+    data: [...BlockStreamfieldData.body, ...BlockStreamfieldFeatureFlagsData],
+    variant: 'default',
+    size: 'large'
+  }
 }
 
 export const MatchingWidths = {
   args: {
-    data: BlockStreamfieldData.body,
+    data: [...BlockStreamfieldData.body, ...BlockStreamfieldFeatureFlagsData],
     variant: 'fluid',
     size: 'large'
   }

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -242,6 +242,19 @@
         <BlockAccordion :data="block as unknown as AccordionBlockObject" />
       </LayoutHelper>
 
+      <LayoutHelper
+        v-else-if="block.blockType == 'CsrTableBlock'"
+        :key="`csrTableBlock${index}`"
+        indent="col-1"
+        :class="marginBottom"
+      >
+        <BlockCsrTable
+          :row-data="block.rowData"
+          :attachment-prefix="block.attachmentPrefix"
+          :api-endpoint="block.apiEndpoint"
+        />
+      </LayoutHelper>
+
       <div
         v-else
         :key="index"
@@ -286,6 +299,7 @@ import BlockVideoEmbed, {
   type BlockData as VideoBlockEmbedData
 } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import BlockNewsletterSignup from '../BlockNewsletterSignup/BlockNewsletterSignup.vue'
+import BlockCsrTable from '../BlockCsrTable/BlockCsrTable.vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 
@@ -325,7 +339,8 @@ export default defineComponent({
     BlockGist,
     BlockVideo,
     BlockVideoEmbed,
-    BlockNewsletterSignup
+    BlockNewsletterSignup,
+    BlockCsrTable
   },
   props: {
     variant: {

package/src/interfaces.ts

@@ -39,6 +39,9 @@ export interface StreamfieldBlockData extends BlockData {
   credit?: string
   imageInline?: ImageObject
   heroSummary?: string
+  rowData?: any
+  apiEndpoint?: string
+  attachmentPrefix?: string
 }
 
 export interface ImageSrcObject {
@@ -171,6 +174,18 @@ export interface BlockRelatedLinksObject extends BlockData {
   links: RelatedLinkObject[]
 }
 
+export interface InitResponse {
+  init: {
+    id: string
+    __typename: string
+  }
+  redirect: {
+    isPermanent: boolean
+    oldPath: string
+    newUrl: string
+  }
+}
+
 export interface PageResponse {
   __typename: string
   page: PageObject