Merge branch 'main' into release

griffithlab · Sep 7, 2023 · 99f4989 · 99f4989
2 parents 22fd7f9 + 1dc32c9
commit 99f4989
Show file tree

Hide file tree

Showing 69 changed files with 11,549 additions and 3,910 deletions.
diff --git a/client/.graphqlrc.yml b/client/.graphqlrc.yml
@@ -7,8 +7,6 @@ schema:
 # collect client-side component& service queries, mutations, fragments
 documents: ./src/**/*.gql
 extensions:
-  # allow apollo-client directives
-  customDirectives: ['@client', '@export', '@key']
   codegen:
     config:
       # replace generated files

diff --git a/client/package.json b/client/package.json
@@ -13,7 +13,10 @@
     "generate-icon-ts": "svg-to-ts-constants",
     "generate-icons": "yarn run optimize-icon-svg && yarn run generate-icon-ts",
     "generate-apollo": "graphql-codegen",
-    "generate-apollo:start": "graphql-codegen --watch"
+    "generate-apollo:start": "graphql-codegen --watch",
+    "generate-icon-data": "scripts/generate-icon-data.js",
+    "generate-icon-rst": "scripts/generate-icon-rst.js",
+    "generate-docs-rst": "yarn run generate-icon-data && yarn run generate-icon-rst"
   },
   "private": true,
   "resolutions": {
@@ -46,6 +49,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.1.4",
+    "@angular-eslint/schematics": "^16.1.0",
     "@angular/cli": "^16.1.4",
     "@angular/compiler-cli": "16.1.5",
     "@graphql-codegen/add": "^3.2.3",
@@ -57,7 +61,9 @@
     "@graphql-codegen/typescript-apollo-client-helpers": "^2.2.6",
     "@graphql-codegen/typescript-operations": "^2.5.12",
     "@types/node": "^12.11.1",
+    "directory-tree": "^3.5.1",
     "graphql": "^16.7.1",
+    "mustache": "^4.2.0",
     "ngx-json-viewer": "^3.0.2",
     "prettier": "^2.5.1",
     "svg-to-ts": "^9.0.0",

diff --git a/client/scripts/generate-icon-data.js b/client/scripts/generate-icon-data.js
@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+const directoryTree = require('directory-tree')
+const path = require('path')
+const fs = require('fs')
+
+const iconsDirectory = path.join(__dirname, '..', 'src', 'assets', 'icons')
+const validSubdirectories = ['attribute', 'outline', 'twotone', 'fullcolor']
+
+// Utility to remove redundant parent directory name from the filename
+function removeRedundantName(type, filename) {
+  const pattern =
+    type === 'attribute' ? /-outline$/ : new RegExp(`-${type}$`, 'i')
+  return filename.replace(pattern, '')
+}
+
+function generateIconObject(tree) {
+  if (!tree || !tree.children) return []
+
+  return tree.children
+    .filter((child) => validSubdirectories.includes(child.name))
+    .flatMap((subdir) => {
+      return subdir.children.map((file) => {
+        const cleanName = removeRedundantName(
+          subdir.name,
+          path.basename(file.name, '.svg')
+        )
+        return {
+          type: subdir.name,
+          filepath: `${subdir.name}/${file.name}`,
+          name: cleanName,
+          alias: `${subdir.name}-${cleanName}`,
+        }
+      })
+    })
+}
+
+const tree = directoryTree(iconsDirectory, { extensions: /\.svg$/ })
+
+if (!tree) {
+  console.error(
+    `Error: The icon assets folder ${iconsDirectory} does not exist or could not be accessed.`
+  )
+  process.exit(1)
+}
+
+const icons = generateIconObject(tree)
+const output = {
+  icons: icons,
+}
+
+// Define the path to the output file
+const outputPath = path.join(
+  __dirname,
+  '..',
+  'src',
+  'app',
+  'generated',
+  'civic.icons.data.json'
+)
+
+// Write the JSON data to the file
+fs.writeFileSync(outputPath, JSON.stringify(output, null, 2))
+
+console.log(`Icon data written to ${outputPath}`)
diff --git a/client/scripts/generate-icon-rst.js b/client/scripts/generate-icon-rst.js
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+const fs = require('fs')
+const path = require('path')
+const mustache = require('mustache')
+
+// Load the generated icon data JSON
+const jsonDataPath = path.join(
+  __dirname,
+  '..',
+  'src',
+  'app',
+  'generated',
+  'civic.icons.data.json'
+)
+const iconData = JSON.parse(fs.readFileSync(jsonDataPath, 'utf-8'))
+
+// Define the mustache template
+const template = `
+.. |{{alias}}| image:: /images/icons/{{{filepath}}}
+   :class: 'cvc-icon'
+`
+
+// Render the RST using mustache
+const renderedRst =
+  '..\n   ' +
+  'GENERATED BY CiVIC CLIENT DEV SCRIPT, DO NOT EDIT\n   ' +
+  '(unless you know what you are doing)\n   ' +
+  'Produced by `generate-icon-rst` script in civic-v2/client/scripts\n' +
+  iconData.icons.map((icon) => mustache.render(template, icon)).join('\n')
+
+// Define the path to the output RST file
+const outputPath = path.join(
+  __dirname,
+  '..',
+  'src',
+  'app',
+  'generated',
+  'civic.docs-aliases.rst'
+)
+
+// Write the rendered RST to the file
+fs.writeFileSync(outputPath, renderedRst)
+
+console.log(
+  `RST written to ${outputPath}, copy to civic-docs/docs/generated to update docs aliases.`
+)
diff --git a/...mponents/organizations/organization-leaderboards/organization-leaderboards.component.html b/...mponents/organizations/organization-leaderboards/organization-leaderboards.component.html
@@ -0,0 +1,133 @@
+<nz-card
+  nzSize="small"
+  [nzTitle]="cardTitle"
+  [nzExtra]="cardExtra">
+  <nz-row [nzGutter]="[8, 8]">
+    <nz-col nzSpan="8">
+      <ng-container
+        *ngTemplateOutlet="
+          leaderboard;
+          context: {
+            $implicit: commentsView$ | ngrxPush,
+          }
+        ">
+      </ng-container>
+    </nz-col>
+    <nz-col nzSpan="8">
+      <ng-container
+        *ngTemplateOutlet="
+          leaderboard;
+          context: {
+            $implicit: revisionsView$ | ngrxPush,
+          }
+        ">
+      </ng-container>
+    </nz-col>
+    <nz-col nzSpan="8">
+      <ng-container
+        *ngTemplateOutlet="
+          leaderboard;
+          context: {
+            $implicit: moderationView$ | ngrxPush,
+          }
+        ">
+      </ng-container>
+    </nz-col>
+  </nz-row>
+</nz-card>
+
+<ng-template
+  #leaderboard
+  let-leaderboard>
+  <ng-template #leaderboardHeader>
+    <span nz-typography>
+      {{ leaderboard.title }}
+    </span>
+
+    <span
+      nz-typography
+      nzType="secondary">
+      <i
+        nz-icon
+        nzType="info-circle"
+        nzTheme="outline"
+        nz-tooltip
+        [nzTooltipTitle]="leaderboard.info"></i>
+    </span>
+  </ng-template>
+  <nz-list
+    [nzHeader]="leaderboardHeader"
+    [nzLoading]="leaderboard.loading"
+    nzSize="small"
+    nzBordered
+    nzItemLayout="vertical"
+    nzItemLayout="horizontal">
+    <div [ngClass]="{ 'list-height-block': leaderboard.rows.length > 0 }">
+      <nz-list-item *ngFor="let row of leaderboard.rows">
+        <ng-template #rowAvatar>
+          <nz-badge
+            [nzCount]="row.rank"
+            [nzOffset]="[0, 5]"
+            nzSize="small">
+            <nz-avatar
+              nzIcon="civic-organization"
+              nzSize="small"
+              nzShape="square"
+              [nzSrc]="row.profileImagePath"></nz-avatar>
+          </nz-badge>
+        </ng-template>
+        <nz-list-item-meta [nzAvatar]="rowAvatar">
+          <nz-list-item-meta-title>
+            <cvc-organization-tag
+              [org]="row.organization"></cvc-organization-tag>
+          </nz-list-item-meta-title>
+        </nz-list-item-meta>
+        <ul nz-list-item-actions>
+          <nz-list-item-action>
+            <span
+              nz-typography
+              nzType="secondary">
+              Count: {{ row.actionCount | number }}
+            </span>
+          </nz-list-item-action>
+        </ul>
+      </nz-list-item>
+    </div>
+    <nz-list-empty
+      *ngIf="leaderboard.rows.length === 0"
+      [nzNoResult]="listEmpty"></nz-list-empty>
+    <ng-template #listEmpty>
+      <nz-empty
+        nzNotFoundImage="simple"
+        nzNotFoundContent="No curation activity found for the selected time window."></nz-empty>
+    </ng-template>
+  </nz-list>
+</ng-template>
+
+<ng-template #cardTitle>
+  <span nz-typography>
+    <strong>Organization Curation Leaderboards</strong>
+  </span>
+</ng-template>
+
+<ng-template #cardExtra>
+  <span>Time: </span>
+  <nz-select
+    nzSize="small"
+    [nzDropdownMatchSelectWidth]="false"
+    [ngModel]="timeWindow$ | ngrxPush"
+    (ngModelChange)="timeWindow$.next($event)">
+    <nz-option
+      nzLabel="All"
+      nzValue="ALL_TIME"></nz-option>
+    <nz-option
+      nzLabel="Past Week"
+      nzValue="LAST_WEEK"></nz-option>
+    <nz-option
+      nzLabel="Past Month"
+      nzValue="LAST_MONTH"></nz-option>
+    <nz-option
+      nzLabel="Past Year"
+      nzValue="LAST_YEAR"></nz-option>
+  </nz-select>
+</ng-template>
diff --git a/...mponents/organizations/organization-leaderboards/organization-leaderboards.component.less b/...mponents/organizations/organization-leaderboards/organization-leaderboards.component.less
@@ -0,0 +1,37 @@
+:host {
+  display: block;
+}
+
+nz-list-item {
+  // background-color: green !important;
+}
+nz-list-item ::ng-deep .ant-list-item-action {
+  margin-left: 1em;
+  li {
+    padding-right: 0;
+    nz-tag {
+      margin-right: 0;
+    }
+  }
+}
+
+// override badge's default red color
+nz-badge ::ng-deep .ant-badge-count {
+  background-color: #662d91;
+  padding: 0 2px;
+}
+
+nz-list-item-meta-title ::ng-deep .ant-list-item-meta-title {
+  padding-top: 1px;
+  margin-bottom: 0;
+  font-weight: normal; // prevent cvc-tag labels from inheriting h4's bold font-weight
+}
+
+.list-height-block {
+  height: 160px;
+  overflow-y: scroll;
+}
+
+.time-select {
+  min-width: 80px;
+}