diff --git a/go.mod b/go.mod index b0629e6..30efa5c 100644 --- a/go.mod +++ b/go.mod @@ -7,7 +7,7 @@ replace github.com/angelbeltran/templater v0.2.3 => ../../github.com/angelbeltra require github.com/jackc/pgx/v5 v5.8.0 require ( - github.com/angelbeltran/templater v0.2.3 + github.com/angelbeltran/templater v0.3.0 github.com/coreos/go-oidc/v3 v3.17.0 github.com/gin-gonic/gin v1.11.0 github.com/google/uuid v1.6.0 diff --git a/go.sum b/go.sum index 21c561a..40f0bcc 100644 --- a/go.sum +++ b/go.sum @@ -9,6 +9,8 @@ github.com/alecthomas/units v0.0.0-20231202071711-9a357b53e9c9 h1:ez/4by2iGztzR4 github.com/alecthomas/units v0.0.0-20231202071711-9a357b53e9c9/go.mod h1:OMCwj8VM1Kc9e19TLln2VL61YJF0x1XFtfdL4JdbSyE= github.com/angelbeltran/concurry v0.0.0-20260109231127-8e2678d8928c h1:BIa061RHaIVP9TjpIQf0PldVpQmeln/2U1Cf2w8ALNI= github.com/angelbeltran/concurry v0.0.0-20260109231127-8e2678d8928c/go.mod h1:Aii6F8lZCJb8Ns0d1FH35bDxNoyiuvwXd5BYJroJnks= +github.com/angelbeltran/templater v0.3.0 h1:LUWYu/uGonb43xumPgdRnx9cD8Sk4ySSdq8ll2U8yzI= +github.com/angelbeltran/templater v0.3.0/go.mod h1:ZA0T/ZmXxPi3gFjgp+RwEkcY9Q+JGyMStGw0c1jvgqA= github.com/apapsch/go-jsonmerge/v2 v2.0.0 h1:axGnT1gRIfimI7gJifB699GoE/oq+F2MU7Dml6nw9rQ= github.com/apapsch/go-jsonmerge/v2 v2.0.0/go.mod h1:lvDnEdqiQrp0O42VQGgmlKpxL1AP2+08jFMw88y4klk= github.com/bmatcuk/doublestar v1.1.1/go.mod h1:UD6OnuiIn0yFxxA2le/rnRU1G4RaI4UvFv1sNto9p6w= diff --git a/styles/index.css b/styles/index.css index aee26cf..7db7aa6 100644 --- a/styles/index.css +++ b/styles/index.css @@ -9,6 +9,7 @@ "Courier New", monospace; --color-black: #000; --color-white: #fff; + --spacing: 0.25rem; --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-lg: 1.125rem; @@ -187,6 +188,44 @@ .static { position: static; } + .sticky { + position: sticky; + } + .top-0 { + top: calc(var(--spacing) * 0); + } + .bottom-0 { + bottom: calc(var(--spacing) * 0); + } + .bottom-1 { + bottom: calc(var(--spacing) * 1); + } + .bottom-\[-1px\] { + bottom: -1px; + } + .grid-table-6 { + &:is(table) { + display: grid; + grid-template-columns: repeat(6, auto); + & > :is(thead, tbody, tfoot) { + grid-column-start: 1; + grid-column-end: -1; + display: grid; + grid-template-columns: subgrid; + & > tr { + grid-column-start: 1; + grid-column-end: -1; + display: grid; + grid-template-columns: subgrid; + & > th, & > td { + grid-column: span 1; + align-content: center; + text-align: center; + } + } + } + } + } .col-2 { grid-column: 2; } @@ -238,9 +277,6 @@ .my-\[0\.5em\] { margin-block: 0.5em; } - .my-\[1em\] { - margin-block: 1em; - } .my-\[1rem\] { margin-block: 1rem; } @@ -298,6 +334,15 @@ .h-fit { height: fit-content; } + .max-h-\[10em\] { + max-height: 10em; + } + .max-h-\[50em\] { + max-height: 50em; + } + .max-h-\[50vh\] { + max-height: 50vh; + } .max-h-\[80vh\] { max-height: 80vh; } @@ -471,14 +516,17 @@ .p-\[1em\] { padding: 1em; } + .px-\[1em\] { + padding-inline: 1em; + } .px-\[2em\] { padding-inline: 2em; } .py-\[0\.5em\] { padding-block: 0.5em; } - .py-\[2em\] { - padding-block: 2em; + .py-\[1em\] { + padding-block: 1em; } .pt-\[1em\] { padding-top: 1em; @@ -533,6 +581,16 @@ .underline { text-decoration-line: underline; } + .opacity-\[0\.8\] { + opacity: 0.8; + } + .outline-1 { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + .outline-\(--table-tfoot\) { + outline-color: var(--table-tfoot); + } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } @@ -546,8 +604,12 @@ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .group-open\:mb-\[1em\] { - &:is(:where(.group):is([open], :popover-open, :open) *) { + .outline-solid { + --tw-outline-style: solid; + outline-style: solid; + } + .not-open\:mb-\[1em\] { + &:not(*:is([open], :popover-open, :open)) { margin-bottom: 1em; } } @@ -577,6 +639,11 @@ display: flex; } } + .details-content\:max-w-full { + &::details-content { + max-width: 100%; + } + } .details-content\:transform-\[translate\(0px\,-2em\)\] { &::details-content { transform: translate(0px,-2em); @@ -597,6 +664,16 @@ border-color: transparent; } } + .details-content\:p-\[1em\] { + &::details-content { + padding: 1em; + } + } + .details-content\:px-\[1em\] { + &::details-content { + padding-inline: 1em; + } + } .details-content\:opacity-\[0\] { &::details-content { opacity: 0; @@ -614,6 +691,18 @@ transition-duration: var(--tw-duration, var(--default-transition-duration)); } } + .after\:absolute { + &::after { + content: var(--tw-content); + position: absolute; + } + } + .after\:right-\[0\.5em\] { + &::after { + content: var(--tw-content); + right: 0.5em; + } + } .after\:float-right { &::after { content: var(--tw-content); @@ -654,11 +743,24 @@ } } } + .group-open\/sync-group\:after\:content-\[\'-\'\] { + &:is(:where(.group\/sync-group):is([open], :popover-open, :open) *) { + &::after { + --tw-content: '-'; + content: var(--tw-content); + } + } + } .open\:grid { &:is([open], :popover-open, :open) { display: grid; } } + .open\:bg-card { + &:is([open], :popover-open, :open) { + background-color: var(--card); + } + } .open\:details-content\:transform-\[translate\(0px\,0px\)\] { &:is([open], :popover-open, :open) { &::details-content { @@ -719,6 +821,13 @@ } } } + .open\:details-content\:p-\[1em\] { + &:is([open], :popover-open, :open) { + &::details-content { + padding: 1em; + } + } + } .open\:details-content\:opacity-\[1\] { &:is([open], :popover-open, :open) { &::details-content { @@ -1097,6 +1206,11 @@ syntax: "*"; inherits: false; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @property --tw-blur { syntax: "*"; inherits: false; @@ -1204,6 +1318,7 @@ *, ::before, ::after, ::backdrop { --tw-border-style: solid; --tw-font-weight: initial; + --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; diff --git a/styles/source.css b/styles/source.css index 47b5bba..bb1036c 100644 --- a/styles/source.css +++ b/styles/source.css @@ -15,3 +15,5 @@ @import "./svg.css"; @import "./accessibility.css"; @import "./components.css"; +@source inline("group-open/sync-group:after:content-['-']"); +@source inline("not-open:mb-[1em]"); diff --git a/styles/tables.css b/styles/tables.css index e69de29..1677ec6 100644 --- a/styles/tables.css +++ b/styles/tables.css @@ -0,0 +1,26 @@ +@utility grid-table-* { + &:is(table) { + display: grid; + grid-template-columns: repeat(--value(integer), auto); + + & > :is(thead, tbody, tfoot) { + grid-column-start: 1; + grid-column-end: -1; + display: grid; + grid-template-columns: subgrid; + + & > tr { + grid-column-start: 1; + grid-column-end: -1; + display: grid; + grid-template-columns: subgrid; + + & > th, & > td { + grid-column: span 1; + align-content: center; + text-align: center; + } + } + } + } +} diff --git a/templates/components/accordion.html.tmpl b/templates/components/accordion.html.tmpl new file mode 100644 index 0000000..04c7e03 --- /dev/null +++ b/templates/components/accordion.html.tmpl @@ -0,0 +1,98 @@ +{{/* Templates: */}} +{{/* details-header */}} +{{/* details-body */}} + +{{/* Props: */}} +{{/* + Open: bool + GroupName: for doing 'open' css state styles + + Class, Style, + SummaryClass, SummaryStyle +*/}} +{{/* TODO: find a way to not have to hardcode the tailwind classes for the group-open styles */}} +{{/* TODO: rename this component to 'accordion' */}} + + +{{- $groupSuffix := "" }} +{{- if .GroupName }} + {{- $groupSuffix = printf "/%s" .GroupName }} +{{- end }} + + +
+{{/* TODO: old border style - delete when sure + details-content:border-transparent + open:details-content:border-dotted + open:details-content:border-x-[0px] + open:details-content:border-x-transparent + open:details-content:border-b-[0px] + open:details-content:border-b-transparent + open:details-content:border-t-background + open:details-content:border-t-[0.25rem] + details-content:outline-transparent + */}} + + + {{ slot "accordion-header" }} + + + {{ slot "accordion-body" }} +
diff --git a/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/add-listing-button.html.tmpl b/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/add-listing-button.html.tmpl index fc3aa3c..47fd081 100644 --- a/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/add-listing-button.html.tmpl +++ b/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/add-listing-button.html.tmpl @@ -7,7 +7,8 @@ "HXSwap" "none" "HXSelect" "#accounts-acct-id-inventory-sync-groups-mock-draft-table" "ID" "sync-groups-mock-draft-table-add-listing-button" - "Class" "mt-[1em] mb-[1em]" + "Class" "" + "Style" "" "Text" "Add Listing" "_" ` on click diff --git a/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/index.html.tmpl b/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/index.html.tmpl index cfcf3cd..53bf9b8 100644 --- a/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/index.html.tmpl +++ b/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/index.html.tmpl @@ -2,17 +2,23 @@ {{- $acctID := .PathParams.acctID }} +{{- $listings := .Accounts.GetMockSyncGroupListingDrafts $acctID }} - + +{{- if gt (len $listings) 5 }} + +{{- end }}
Shop @@ -58,14 +64,14 @@ send setDisabled(disabled: not allRowsFilledOut or numRows < 2) to #create-mock-sync-group-button " > - {{- $listings := .Accounts.GetMockSyncGroupListingDrafts $acctID }} {{- range $listing := $listings }} {{- component (printf "accounts/%d/inventory/sync-groups/mock/draft/listings/%d" $acctID $listing.OrderIndex) "Listings" $listings }} {{- end }} -
Shop @@ -87,6 +93,7 @@
{{/* diff --git a/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/save-sync-group-button.html.tmpl b/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/save-sync-group-button.html.tmpl index 181b23d..4122bf3 100644 --- a/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/save-sync-group-button.html.tmpl +++ b/templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/save-sync-group-button.html.tmpl @@ -18,8 +18,9 @@ {{ component "button" "ID" "create-mock-sync-group-button" - "Class" "mt-[1em] mb-[1em]" "Text" "Save Sync Group" + "Class" "" + "Style" "" "Disabled" (or (not $enoughListings) (not $allCompleted)) "_" ` on setDisabled(disabled) diff --git a/templates/components/button.html.tmpl b/templates/components/button.html.tmpl index 18600ed..9249775 100644 --- a/templates/components/button.html.tmpl +++ b/templates/components/button.html.tmpl @@ -14,7 +14,7 @@ disabled:bg-accent-secondary disabled:cursor-not-allowed disabled:no-underline - {{.Class}} + {{if .Class}}{{.Class}}{{end}} " {{- if .ID }} id="{{.ID}}" diff --git a/templates/pages/accounts/{acctID.int64}/inventory/mock.html.tmpl b/templates/pages/accounts/{acctID.int64}/inventory/mock.html.tmpl index 789a597..047f093 100644 --- a/templates/pages/accounts/{acctID.int64}/inventory/mock.html.tmpl +++ b/templates/pages/accounts/{acctID.int64}/inventory/mock.html.tmpl @@ -6,207 +6,138 @@ {{- define "title" }} Manage Mock Inventory ⋅ Inventory++ {{ end }} +{{- define "header-accordion-header" }} +

+ New Sync Group +

+{{- end }} + +{{- define "header-accordion-body" }} + {{- $acctID := .Identity.Account.AccountID }} + {{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table" $acctID) }} + +
+ + +
+ {{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/add-listing-button" $acctID) }} + {{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/save-sync-group-button" $acctID) }} +
+
+{{- end }} + +{{- define "sync-group-accordion-header" }} +

+ {{ .Group.Name }} +

+{{- end }} + +{{- define "sync-group-accordion-body" }} + {{- $acctID := .Identity.Account.AccountID }} + + + + + + + + + + + {{- $dot := . }} + {{- range $listing := .Group.Listings }} + + {{- $val := $dot.Accounts.GetMockListing $acctID $listing.Platform $listing.ShopID $listing.ListingID }} + + + + + + {{- end }} + +
+ Name + + SKU + + Description + + Count +
+ {{ $val.Name }} + + {{ $val.SKU }} + + {{ $val.Description }} + + {{ $val.Count }} +
+ + {{- component "button" + "Class" "mt-[1em]" + "Text" "Delete Group" + "HXDelete" (printf "/api/accounts/%d/inventory/sync-groups/mock/%d" $acctID .Group.SyncGroupID) + "HXSwap" "none" + }} +{{- end }} +
-
- - -

- New Sync Group -

- - - {{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table" $acctID) }} - -
- - -
- {{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/add-listing-button" $acctID) }} - {{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/save-sync-group-button" $acctID) }} -
-
-
- - -{{- $dot := . }} + + +