88 lines
4.2 KiB
Plaintext
88 lines
4.2 KiB
Plaintext
{{- /*gotype: crud-generator/html_components.ItemDisplay*/ -}}
|
|
{{ define "itemDisplay" }}
|
|
{{ if .HasImages}}
|
|
<script src="/static/cropper.min.js"></script>
|
|
<link href="/static/cropper.min.css" rel="stylesheet"/>
|
|
{{end}}
|
|
<div id="itemDisplay">
|
|
<button {{template "buttonStyle"}} id="backButton"
|
|
data-hx-get="{{.BackUrl}}"
|
|
data-hx-target="body"
|
|
data-hx-push-url="true"
|
|
>Back
|
|
</button>
|
|
|
|
<button {{template "buttonStyle"}}
|
|
data-hx-get="{{.EditItemUrl}}"
|
|
data-hx-target="body"
|
|
data-hx-push-url="true"
|
|
id="editButton">Edit
|
|
</button>
|
|
|
|
<button {{template "buttonStyle"}}
|
|
data-hx-delete="{{.DeleteItemUrl}}"
|
|
data-hx-target="body"
|
|
data-hx-push-url="{{.DeletePushUrl}}"
|
|
data-hx-confirm="Are you sure you want to delete this item?"
|
|
id="deleteButton">Delete
|
|
</button>
|
|
<dl class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
|
|
{{ range .Columns}}
|
|
<div class="flex flex-col pb-3">
|
|
<dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">{{.Label}}</dt>
|
|
<dd class="text-lg font-semibold">
|
|
{{ if eq .Type "text"}}
|
|
{{.Value}}
|
|
{{ end }}
|
|
{{ if eq .Type "textarea"}}
|
|
<div id="{{.Label}}-text" class="whitespace-pre-line" aria-readonly="true">{{.Value}}</div>
|
|
<button type="button" {{template "buttonStyle"}}>Read More</button>
|
|
<script>
|
|
(() => {
|
|
// shorten the long text of label-text
|
|
const text = document.getElementById("{{.Label}}-text");
|
|
const innerText = text.innerText;
|
|
if (text.innerText.length > 100) {
|
|
const shortenedText = text.innerText.substring(0, 100) + "...";
|
|
let isShortened = true
|
|
text.innerText = shortenedText
|
|
const button = document.getElementById("{{.Label}}-text").nextElementSibling;
|
|
button.onclick = () => {
|
|
if (isShortened) {
|
|
text.innerText = innerText;
|
|
button.innerText = "Read Less";
|
|
isShortened = false;
|
|
} else {
|
|
text.innerText = text.innerText.substring(0, 100) + "...";
|
|
button.innerText = "Read More";
|
|
isShortened = true;
|
|
}
|
|
};
|
|
}
|
|
})()
|
|
</script>
|
|
{{ end }}
|
|
{{ if eq .Type "image"}}
|
|
<div id="{{.Label}}-imageDisplay">
|
|
{{template "imageDisplay" .}}
|
|
</div>
|
|
{{ end }}
|
|
{{ if eq .Type "datetime"}}
|
|
{{.Value}}
|
|
{{ end }}
|
|
</dd>
|
|
</div>
|
|
{{ end }}
|
|
{{ range .SubItems }}
|
|
<div>
|
|
<button {{template "buttonStyle"}}
|
|
data-hx-get="{{.Url}}"
|
|
data-hx-target="body"
|
|
data-hx-push-url="true"
|
|
>{{.Label}}</button>
|
|
</div>
|
|
{{ end }}
|
|
</dl>
|
|
</div>
|
|
{{end}}
|