22203879000

Committed 19 Feb 2026 11:06PM UTC coverage: 38.437% (-0.1%) from 38.574%

Build # 22203879000

Build Type

push

github

Committed by

scriptype

Commit Message

Draft a proto-layout for contentType selection

List of types and a visualisation of current ontology is imagined. The
former is hereby attempted, and the latter needs more think

Coverage Stats

618 of 3672 branches covered (16.83%)

Branch coverage included in aggregate %.

0 of 8 new or added lines in 2 files covered. (0.0%)

21 existing lines in 1 file now uncovered.

2166 of 3571 relevant lines covered (60.66%)

1169.5 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/cms/server/public/app/components/selectContentTypesForm.js

import { createDOMNodeFromHTML } from '../common.js'

const template = ({ defaultContentTypes }) => {
  // parent selector shortcut
  const __ = '#select-content-types'

  return (`
    <form id="select-content-types">
      <style>
        ${__} {
          font: .9rem/1.4 helvetica, sans-serif;
        }

        ${__} .layout-container {
          display: flex;
          flex-direction: column;
        }

        ${__} .content-types-list {
          display: flex;
          flex-direction: column;
          gap: 1em;
          width: 25dvw;
          height: 50dvh;
          padding: .5em 1em .5em .5em;
          overflow: auto;
        }

        ${__} .content-types-list-item {
          display: flex;
          box-shadow: 0 0 2px #0006;
          padding: .66em 0;
          border-radius: 0.3em;
          cursor: pointer;
        }

        ${__} .content-types-list-item-checkbox {
        }

        ${__} .content-types-list-item:hover {
          background: aliceblue;
          box-shadow: 0 0 3px #0afa;
        }

        ${__} .content-types-list-item-checkbox {
          padding: 0 .66em 0 1em;
          place-content: center;
        }

        ${__} .content-types-list-item-content {
        }

        ${__} .content-types-list-item-name {
          margin: 0;
        }

        ${__} .content-types-list-item-description {
          margin: 0;
          font-size: .9em;
          opacity: .7;
        }
      </style>

      <h1>content types</h1>

      <div class="layout-container">
        <div class="content-types-list">
          ${defaultContentTypes.map(contentType => `
            <label class="content-types-list-item">
              <div class="content-types-list-item-checkbox">
                <input type="checkbox" name="${contentType.name}">
              </div>
              <div class="content-types-list-item-content">
                <p class="content-types-list-item-name">${contentType.name}</p>
                <p class="content-types-list-item-description">${contentType.description}</p>
              </div>
            </label>
          `).join('')}
        </div>

        <div class="ontology-visualisation"></div>
      </div>

      <button>Ok</button>
    </form>
  `)
}

const selectContentTypesForm = ({ defaultContentTypes, onSubmit }) => {
  const onFormSubmit = async (e) => {
    e.preventDefault()
    const formData = new FormData($el)
    const keyValues = Array.from(formData.entries())
    const selectedKeys = keyValues.filter(([key, value]) => value === 'on').map(([key]) => key)
    const selectedContentTypes = defaultContentTypes.filter(ct => selectedKeys.includes(ct.name))
    onSubmit(selectedContentTypes)
  }

  const addEventListeners = () => {
    $el.addEventListener('submit', onFormSubmit)
  }

  const html = template({
    defaultContentTypes
  })
  const $el = createDOMNodeFromHTML(html)

  addEventListeners()

  return {
    $el
  }
}

export default selectContentTypesForm

1	import { createDOMNodeFromHTML } from '../common.js'
2
3	const template = ({ defaultContentTypes }) => {	×
4	// parent selector shortcut
NEW 5	const __ = '#select-content-types'	×
6
NEW 7	return (`	×
8	<form id="select-content-types">
9	<style>
10	${__} {
11	font: .9rem/1.4 helvetica, sans-serif;
12	}
13
14	${__} .layout-container {
15	display: flex;
16	flex-direction: column;
17	}
18
19	${__} .content-types-list {
20	display: flex;
21	flex-direction: column;
22	gap: 1em;
23	width: 25dvw;
24	height: 50dvh;
25	padding: .5em 1em .5em .5em;
26	overflow: auto;
27	}
28
29	${__} .content-types-list-item {
30	display: flex;
31	box-shadow: 0 0 2px #0006;
32	padding: .66em 0;
33	border-radius: 0.3em;
34	cursor: pointer;
35	}
36
37	${__} .content-types-list-item-checkbox {
38	}
39
40	${__} .content-types-list-item:hover {
41	background: aliceblue;
42	box-shadow: 0 0 3px #0afa;
43	}
44
45	${__} .content-types-list-item-checkbox {
46	padding: 0 .66em 0 1em;
47	place-content: center;
48	}
49
50	${__} .content-types-list-item-content {
51	}
52
53	${__} .content-types-list-item-name {
54	margin: 0;
55	}
56
57	${__} .content-types-list-item-description {
58	margin: 0;
59	font-size: .9em;
60	opacity: .7;
61	}
62	</style>
63
64	<h1>content types</h1>
65
66	<div class="layout-container">
67	<div class="content-types-list">
NEW 68	${defaultContentTypes.map(contentType => `	×
69	<label class="content-types-list-item">
70	<div class="content-types-list-item-checkbox">
71	<input type="checkbox" name="${contentType.name}">
72	</div>
73	<div class="content-types-list-item-content">
74	<p class="content-types-list-item-name">${contentType.name}</p>
75	<p class="content-types-list-item-description">${contentType.description}</p>
76	</div>
77	</label>
78	`).join('')}
79	</div>
80
81	<div class="ontology-visualisation"></div>
82	</div>
83
84	<button>Ok</button>
85	</form>
86	`)
87	}
88
89	const selectContentTypesForm = ({ defaultContentTypes, onSubmit }) => {	×
90	const onFormSubmit = async (e) => {	×
91	e.preventDefault()	×
92	const formData = new FormData($el)	×
93	const keyValues = Array.from(formData.entries())	×
94	const selectedKeys = keyValues.filter(([key, value]) => value === 'on').map(([key]) => key)	×
95	const selectedContentTypes = defaultContentTypes.filter(ct => selectedKeys.includes(ct.name))	×
96	onSubmit(selectedContentTypes)	×
97	}
98
99	const addEventListeners = () => {	×
100	$el.addEventListener('submit', onFormSubmit)	×
101	}
102
103	const html = template({	×
104	defaultContentTypes
105	})
106	const $el = createDOMNodeFromHTML(html)	×
107
108	addEventListeners()	×
109
110	return {	×
111	$el
112	}
113	}
114
115	export default selectContentTypesForm

scriptype / writ-cms / 22203879000

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous