@social-mail/social-mail-client 1.2.331 → 1.2.333

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.331",
+  "version": "1.2.333",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/model/model.ts

@@ -925,6 +925,7 @@ export interface IStore extends IClrEntity {
 	insights?: ICollection<IStoreInsight>;
 	ledgers?: ICollection<IStoreLedger>;
 	journals?: ICollection<IStoreJournal>;
+	tags?: ICollection<IStoreTag>;
 	storeWebsites?: ICollection<IWebSiteStore>;
 }
 
@@ -932,7 +933,7 @@ export const Store: IModel<IStore> = new Model<IStore>(
 "Store",
 ["storeID"],
 { name: "" },
-{"name":"stores","keys":[{"name":"storeID","type":"number","generated":"identity"}],"properties":[{"name":"name","type":"string","default":["name","\"\""]},{"name":"sellerID","type":"number"},{"name":"folderID","type":"number"}],"relations":[{"name":"seller","fkMap":[{"fk":"sellerID","relatedKey":"contactID"}],"relatedName":"Contact"},{"name":"folder","fkMap":[{"fk":"folderID","relatedKey":"appFileID"}],"relatedName":"AppFile"},{"name":"storeUsers","isCollection":true,"isInverse":true,"relatedName":"StoreUser"},{"name":"configs","isCollection":true,"isInverse":true,"relatedName":"StoreConfig"},{"name":"storeItems","isCollection":true,"isInverse":true,"relatedName":"StoreItem"},{"name":"itemFolders","isCollection":true,"isInverse":true,"relatedName":"StoreItemFolder"},{"name":"insights","isCollection":true,"isInverse":true,"relatedName":"StoreInsight"},{"name":"ledgers","isCollection":true,"isInverse":true,"relatedName":"StoreLedger"},{"name":"journals","isCollection":true,"isInverse":true,"relatedName":"StoreJournal"},{"name":"storeWebsites","isCollection":true,"isInverse":true,"relatedName":"WebSiteStore"}]}
+{"name":"stores","keys":[{"name":"storeID","type":"number","generated":"identity"}],"properties":[{"name":"name","type":"string","default":["name","\"\""]},{"name":"sellerID","type":"number"},{"name":"folderID","type":"number"}],"relations":[{"name":"seller","fkMap":[{"fk":"sellerID","relatedKey":"contactID"}],"relatedName":"Contact"},{"name":"folder","fkMap":[{"fk":"folderID","relatedKey":"appFileID"}],"relatedName":"AppFile"},{"name":"storeUsers","isCollection":true,"isInverse":true,"relatedName":"StoreUser"},{"name":"configs","isCollection":true,"isInverse":true,"relatedName":"StoreConfig"},{"name":"storeItems","isCollection":true,"isInverse":true,"relatedName":"StoreItem"},{"name":"itemFolders","isCollection":true,"isInverse":true,"relatedName":"StoreItemFolder"},{"name":"insights","isCollection":true,"isInverse":true,"relatedName":"StoreInsight"},{"name":"ledgers","isCollection":true,"isInverse":true,"relatedName":"StoreLedger"},{"name":"journals","isCollection":true,"isInverse":true,"relatedName":"StoreJournal"},{"name":"tags","isCollection":true,"isInverse":true,"relatedName":"StoreTag"},{"name":"storeWebsites","isCollection":true,"isInverse":true,"relatedName":"WebSiteStore"}]}
 );
 modelEntitySchemas["Store"] = Store;
 
@@ -1024,16 +1025,33 @@ export interface IStoreItemFolder extends IClrEntity {
 	parent?: IStoreItemFolder;
 	children?: ICollection<IStoreItemFolder>;
 	items?: ICollection<IStoreItem>;
+	tags?: ICollection<IStoreItemFolderTag>;
 }
 
 export const StoreItemFolder: IModel<IStoreItemFolder> = new Model<IStoreItemFolder>(
 "StoreItemFolder",
 ["itemFolderID"],
 { name: "",path: "" },
-{"name":"store_item_folders","keys":[{"name":"itemFolderID","type":"number","generated":"identity"}],"properties":[{"name":"storeID","type":"number"},{"name":"name","type":"string","default":["name","\"\""]},{"name":"path","type":"string","default":["path","\"\""]},{"name":"parentID","type":"number"}],"relations":[{"name":"store","fkMap":[{"fk":"storeID","relatedKey":"storeID"}],"relatedName":"Store"},{"name":"parent","fkMap":[{"fk":"parentID","relatedKey":"itemFolderID"}],"relatedName":"StoreItemFolder"},{"name":"children","isCollection":true,"isInverse":true,"relatedName":"StoreItemFolder"},{"name":"items","isCollection":true,"isInverse":true,"relatedName":"StoreItem"}]}
+{"name":"store_item_folders","keys":[{"name":"itemFolderID","type":"number","generated":"identity"}],"properties":[{"name":"storeID","type":"number"},{"name":"name","type":"string","default":["name","\"\""]},{"name":"path","type":"string","default":["path","\"\""]},{"name":"parentID","type":"number"}],"relations":[{"name":"store","fkMap":[{"fk":"storeID","relatedKey":"storeID"}],"relatedName":"Store"},{"name":"parent","fkMap":[{"fk":"parentID","relatedKey":"itemFolderID"}],"relatedName":"StoreItemFolder"},{"name":"children","isCollection":true,"isInverse":true,"relatedName":"StoreItemFolder"},{"name":"items","isCollection":true,"isInverse":true,"relatedName":"StoreItem"},{"name":"tags","isCollection":true,"isInverse":true,"relatedName":"StoreItemFolderTag"}]}
 );
 modelEntitySchemas["StoreItemFolder"] = StoreItemFolder;
 
+export interface IStoreItemFolderTag extends IClrEntity {
+	itemFolderID?: number;
+	tagID?: number;
+	count?: number;
+	itemFolder?: IStoreItemFolder;
+	tag?: ITag;
+}
+
+export const StoreItemFolderTag: IModel<IStoreItemFolderTag> = new Model<IStoreItemFolderTag>(
+"StoreItemFolderTag",
+["itemFolderID","tagID"],
+{ count: 0 },
+{"name":"store_item_folder_tags","keys":[{"name":"itemFolderID","type":"number"},{"name":"tagID","type":"number"}],"properties":[{"name":"count","type":"number","default":["count","0"]}],"relations":[{"name":"itemFolder","fkMap":[{"fk":"itemFolderID","relatedKey":"itemFolderID"}],"relatedName":"StoreItemFolder"},{"name":"tag","fkMap":[{"fk":"tagID","relatedKey":"tagID"}],"relatedName":"Tag"}]}
+);
+modelEntitySchemas["StoreItemFolderTag"] = StoreItemFolderTag;
+
 export interface IStoreItemPrice extends IClrEntity {
 	readonly priceID?: number;
 	storeItemID?: number;
@@ -1236,6 +1254,22 @@ export const StoreItemTax: IModel<IStoreItemTax> = new Model<IStoreItemTax>(
 );
 modelEntitySchemas["StoreItemTax"] = StoreItemTax;
 
+export interface IStoreTag extends IClrEntity {
+	storeID?: number;
+	tagID?: number;
+	count?: number;
+	store?: IStore;
+	tag?: ITag;
+}
+
+export const StoreTag: IModel<IStoreTag> = new Model<IStoreTag>(
+"StoreTag",
+["storeID","tagID"],
+{ count: 0 },
+{"name":"store_tags","keys":[{"name":"storeID","type":"number"},{"name":"tagID","type":"number"}],"properties":[{"name":"count","type":"number","default":["count","0"]}],"relations":[{"name":"store","fkMap":[{"fk":"storeID","relatedKey":"storeID"}],"relatedName":"Store"},{"name":"tag","fkMap":[{"fk":"tagID","relatedKey":"tagID"}],"relatedName":"Tag"}]}
+);
+modelEntitySchemas["StoreTag"] = StoreTag;
+
 export interface IStoreItemTag extends IClrEntity {
 	storeItemID?: number;
 	tagID?: number;
@@ -1263,11 +1297,17 @@ export interface IUser extends IClrEntity {
 	dateUpdated?: DateTime;
 	readonly storage?: number;
 	maxStorage?: number;
+	maxWebSites?: number;
+	maxExternalInboxes?: number;
+	maxChildUsers?: number;
+	parentID?: number | null;
 	/** Save this to change password */
 	changePassword?: { oldPassword?: string;newPassword?: string;forceChangePasswordOnLogin?: boolean };
 	createFolder?: boolean;
 	createWebSite?: boolean;
 	autoEnableMF?: boolean;
+	parent?: IUser;
+	children?: ICollection<IUser>;
 	createdFiles?: ICollection<IAppFile>;
 	sentEmails?: ICollection<IEmail>;
 	accessTokens?: ICollection<IAccessToken>;
@@ -1290,8 +1330,8 @@ export const UserStatusArray = [{"label":"active","value":"active"},{"label":"bl
 export const User: IModel<IUser> = new Model<IUser>(
 "User",
 ["userID"],
-{ userName: "",displayName: "",status: "active",isExternal: false,multiFactor: false,dateUpdated: new DefaultFactory(() => new DateTime()),storage: 0,maxStorage: 0 },
-{"name":"users","keys":[{"name":"userID","type":"number","generated":"identity"}],"properties":[{"name":"userName","type":"string","default":["userName","\"\""]},{"name":"displayName","type":"string","default":["displayName","\"\""]},{"name":"passwordHash","type":"string","default":["passwordHash","\"\""]},{"name":"passwordSalt","type":"string","default":["passwordSalt","\"\""]},{"name":"status","type":"string","default":["status","\"active\""]},{"name":"isExternal","type":"boolean","default":["isExternal","false"]},{"name":"multiFactor","type":"boolean","default":["multiFactor","false"]},{"name":"dateUpdated","type":"DateTime","default":["dateUpdated","new DefaultFactory(() => new DateTime())"]},{"name":"storage","type":"number","default":["storage","0"]},{"name":"maxStorage","type":"number","default":["maxStorage","0"]}],"relations":[{"name":"createdFiles","isCollection":true,"isInverse":true,"relatedName":"AppFile"},{"name":"sentEmails","isCollection":true,"isInverse":true,"relatedName":"Email"},{"name":"accessTokens","isCollection":true,"isInverse":true,"relatedName":"AccessToken"},{"name":"versions","isCollection":true,"isInverse":true,"relatedName":"AppFileVersion"},{"name":"sessions","isCollection":true,"isInverse":true,"relatedName":"LoginSession"},{"name":"fileAccessList","isCollection":true,"isInverse":true,"relatedName":"AppFileAccess"},{"name":"contacts","isCollection":true,"isInverse":true,"relatedName":"Contact"},{"name":"domainUsers","isCollection":true,"isInverse":true,"relatedName":"DomainUser"},{"name":"stores","isCollection":true,"isInverse":true,"relatedName":"StoreUser"},{"name":"pins","isCollection":true,"isInverse":true,"relatedName":"UserPin"},{"name":"userPushSubscriptions","isCollection":true,"isInverse":true,"relatedName":"UserPushSubscription"},{"name":"roles","isCollection":true,"isInverse":true,"relatedName":"UserRole"},{"name":"userMailboxes","isCollection":true,"isInverse":true,"relatedName":"UserMailbox"},{"name":"authFactors","isCollection":true,"isInverse":true,"relatedName":"UserAuthFactor"},{"name":"publishedWebSiteVersions","isCollection":true,"isInverse":true,"relatedName":"WebSiteFolderVersion"}]}
+{ userName: "",displayName: "",status: "active",isExternal: false,multiFactor: false,dateUpdated: new DefaultFactory(() => new DateTime()),storage: 0,maxStorage: 0,maxWebSites: 0,maxExternalInboxes: 0,maxChildUsers: 0 },
+{"name":"users","keys":[{"name":"userID","type":"number","generated":"identity"}],"properties":[{"name":"userName","type":"string","default":["userName","\"\""]},{"name":"displayName","type":"string","default":["displayName","\"\""]},{"name":"passwordHash","type":"string","default":["passwordHash","\"\""]},{"name":"passwordSalt","type":"string","default":["passwordSalt","\"\""]},{"name":"status","type":"string","default":["status","\"active\""]},{"name":"isExternal","type":"boolean","default":["isExternal","false"]},{"name":"multiFactor","type":"boolean","default":["multiFactor","false"]},{"name":"dateUpdated","type":"DateTime","default":["dateUpdated","new DefaultFactory(() => new DateTime())"]},{"name":"storage","type":"number","default":["storage","0"]},{"name":"maxStorage","type":"number","default":["maxStorage","0"]},{"name":"maxWebSites","type":"number","default":["maxWebSites","0"]},{"name":"maxExternalInboxes","type":"number","default":["maxExternalInboxes","0"]},{"name":"maxChildUsers","type":"number","default":["maxChildUsers","0"]},{"name":"parentID","type":"number"}],"relations":[{"name":"parent","fkMap":[{"fk":"parentID","relatedKey":"userID"}],"relatedName":"User"},{"name":"children","isCollection":true,"isInverse":true,"relatedName":"User"},{"name":"createdFiles","isCollection":true,"isInverse":true,"relatedName":"AppFile"},{"name":"sentEmails","isCollection":true,"isInverse":true,"relatedName":"Email"},{"name":"accessTokens","isCollection":true,"isInverse":true,"relatedName":"AccessToken"},{"name":"versions","isCollection":true,"isInverse":true,"relatedName":"AppFileVersion"},{"name":"sessions","isCollection":true,"isInverse":true,"relatedName":"LoginSession"},{"name":"fileAccessList","isCollection":true,"isInverse":true,"relatedName":"AppFileAccess"},{"name":"contacts","isCollection":true,"isInverse":true,"relatedName":"Contact"},{"name":"domainUsers","isCollection":true,"isInverse":true,"relatedName":"DomainUser"},{"name":"stores","isCollection":true,"isInverse":true,"relatedName":"StoreUser"},{"name":"pins","isCollection":true,"isInverse":true,"relatedName":"UserPin"},{"name":"userPushSubscriptions","isCollection":true,"isInverse":true,"relatedName":"UserPushSubscription"},{"name":"roles","isCollection":true,"isInverse":true,"relatedName":"UserRole"},{"name":"userMailboxes","isCollection":true,"isInverse":true,"relatedName":"UserMailbox"},{"name":"authFactors","isCollection":true,"isInverse":true,"relatedName":"UserAuthFactor"},{"name":"publishedWebSiteVersions","isCollection":true,"isInverse":true,"relatedName":"WebSiteFolderVersion"}]}
 );
 modelEntitySchemas["User"] = User;
 
@@ -1546,13 +1586,13 @@ modelEntitySchemas["IncomingSmsSource"] = IncomingSmsSource;
 export interface IVerificationToken extends IClrEntity {
 	readonly verificationID?: number;
 	externalID?: string | null;
-	externalConfig?: string | null;
 	dateCreated?: DateTime;
 	expiry?: DateTime;
 	verified?: boolean;
 	code?: string;
 	accessCode?: string;
 	ipAddress?: string | null;
+	externalConfig?: string | null;
 	smsConfig?: Object;
 	loginSessions?: ICollection<ILoginSession>;
 	authFactors?: ICollection<IUserAuthFactor>;
@@ -1563,7 +1603,7 @@ export const VerificationToken: IModel<IVerificationToken> = new Model<IVerifica
 "VerificationToken",
 ["verificationID"],
 { dateCreated: new DefaultFactory(() => new DateTime()),expiry: new DefaultFactory(() => new DateTime()),verified: false,code: "",accessCode: "" },
-{"name":"verification_tokens","keys":[{"name":"verificationID","type":"number","generated":"identity"}],"properties":[{"name":"externalID","type":"string","default":["externalID","\"\""]},{"name":"dateCreated","type":"DateTime","default":["dateCreated","new DefaultFactory(() => new DateTime())"]},{"name":"expiry","type":"DateTime","default":["expiry","new DefaultFactory(() => new DateTime())"]},{"name":"verified","type":"boolean","default":["verified","false"]},{"name":"code","type":"string","default":["code","\"\""]},{"name":"accessCode","type":"string","default":["accessCode","\"\""]},{"name":"ipAddress","type":"string","default":["ipAddress","\"\""]}],"relations":[{"name":"loginSessions","isCollection":true,"isInverse":true,"relatedName":"LoginSession"},{"name":"authFactors","isCollection":true,"isInverse":true,"relatedName":"UserAuthFactor"},{"name":"addresses","isCollection":true,"isInverse":true,"relatedName":"VerificationTokenAddress"}]}
+{"name":"verification_tokens","keys":[{"name":"verificationID","type":"number","generated":"identity"}],"properties":[{"name":"externalID","type":"string","default":["externalID","\"\""]},{"name":"dateCreated","type":"DateTime","default":["dateCreated","new DefaultFactory(() => new DateTime())"]},{"name":"expiry","type":"DateTime","default":["expiry","new DefaultFactory(() => new DateTime())"]},{"name":"verified","type":"boolean","default":["verified","false"]},{"name":"code","type":"string","default":["code","\"\""]},{"name":"accessCode","type":"string","default":["accessCode","\"\""]},{"name":"ipAddress","type":"string","default":["ipAddress","\"\""]},{"name":"externalConfig","type":"string","default":["externalConfig","\"\""]}],"relations":[{"name":"loginSessions","isCollection":true,"isInverse":true,"relatedName":"LoginSession"},{"name":"authFactors","isCollection":true,"isInverse":true,"relatedName":"UserAuthFactor"},{"name":"addresses","isCollection":true,"isInverse":true,"relatedName":"VerificationTokenAddress"}]}
 );
 modelEntitySchemas["VerificationToken"] = VerificationToken;
 
@@ -1594,6 +1634,8 @@ export interface ITag extends IClrEntity {
 	fileTags?: ICollection<IAppFileTag>;
 	emailTags?: ICollection<IEmailTag>;
 	mailboxContactTags?: ICollection<IMailboxContactTag>;
+	storeItemFolderTags?: ICollection<IStoreItemFolderTag>;
+	storeTags?: ICollection<IStoreTag>;
 	storeItemTags?: ICollection<IStoreItemTag>;
 }
 
@@ -1601,7 +1643,7 @@ export const Tag: IModel<ITag> = new Model<ITag>(
 "Tag",
 ["tagID"],
 { name: "",isSystemTag: false },
-{"name":"tags","keys":[{"name":"tagID","type":"number","generated":"identity"}],"properties":[{"name":"name","type":"string","default":["name","\"\""]},{"name":"lowerCaseName","type":"string","generated":"computed"},{"name":"path","type":"string","default":["path","\"\""]},{"name":"isSystemTag","type":"boolean","default":["isSystemTag","false"]},{"name":"contentTypes","type":"string","default":["contentTypes","\"\""]},{"name":"parentID","type":"number"}],"relations":[{"name":"parent","fkMap":[{"fk":"parentID","relatedKey":"tagID"}],"relatedName":"Tag"},{"name":"children","isCollection":true,"isInverse":true,"relatedName":"Tag"},{"name":"fileTags","isCollection":true,"isInverse":true,"relatedName":"AppFileTag"},{"name":"emailTags","isCollection":true,"isInverse":true,"relatedName":"EmailTag"},{"name":"mailboxContactTags","isCollection":true,"isInverse":true,"relatedName":"MailboxContactTag"},{"name":"storeItemTags","isCollection":true,"isInverse":true,"relatedName":"StoreItemTag"}]}
+{"name":"tags","keys":[{"name":"tagID","type":"number","generated":"identity"}],"properties":[{"name":"name","type":"string","default":["name","\"\""]},{"name":"lowerCaseName","type":"string","generated":"computed"},{"name":"path","type":"string","default":["path","\"\""]},{"name":"isSystemTag","type":"boolean","default":["isSystemTag","false"]},{"name":"contentTypes","type":"string","default":["contentTypes","\"\""]},{"name":"parentID","type":"number"}],"relations":[{"name":"parent","fkMap":[{"fk":"parentID","relatedKey":"tagID"}],"relatedName":"Tag"},{"name":"children","isCollection":true,"isInverse":true,"relatedName":"Tag"},{"name":"fileTags","isCollection":true,"isInverse":true,"relatedName":"AppFileTag"},{"name":"emailTags","isCollection":true,"isInverse":true,"relatedName":"EmailTag"},{"name":"mailboxContactTags","isCollection":true,"isInverse":true,"relatedName":"MailboxContactTag"},{"name":"storeItemFolderTags","isCollection":true,"isInverse":true,"relatedName":"StoreItemFolderTag"},{"name":"storeTags","isCollection":true,"isInverse":true,"relatedName":"StoreTag"},{"name":"storeItemTags","isCollection":true,"isInverse":true,"relatedName":"StoreItemTag"}]}
 );
 modelEntitySchemas["Tag"] = Tag;
 

package/src/public/store/StoreItemDetailView.tsx

@@ -17,7 +17,7 @@ import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar"
 const url = (window as any).pageUrl as URL;
 
 
-let {1: storeID = "4", 2: itemID = "1w" } = /^\/store\/([^\/]+)\/([^\/]+)\//.exec(url?.pathname) ?? {} as any;
+let {1: storeID = "4", 2: itemID = "23" } = /^\/store\/([^\/]+)\/([^\/]+)\//.exec(url?.pathname) ?? {} as any;
 
 storeID = parseInt(storeID, 36);
 itemID = parseInt(itemID, 36);
@@ -53,6 +53,7 @@ const css = styled.css `
             display: flex;
             flex-direction: column;
             overflow: auto;
+            max-height: 500px;
             & > img {
                 cursor: pointer;
                 margin: 5px;
@@ -65,8 +66,8 @@ const css = styled.css `
         & > .preview {
             grid-row: 1;
             grid-column: 2;
-            height: 60vh;
-            min-width: 50vw;
+            height: 60%;
+            min-width: 50%;
             & img {
                 -webkit-user-drag: none;
             }
@@ -75,7 +76,7 @@ const css = styled.css `
     }
 
     & img {
-        max-width: 90vw;
+        max-width: 90%;
     }
 `.installLocal();
 
@@ -118,9 +119,6 @@ export default class StoreItemDetailView extends AtomControl {
 
         this.model = await this.getItem();
 
-        const images = this.model.mediaFiles.where((x) => x.isPreview);
-        this.selectedFile = images[0];
-
         const offer = this.model.mediaFiles.find((x) => x.title === "offer.html");
         const specifications = this.model.mediaFiles.find((x) => x.title === "specs.html");
 

package/src/public/store/StoreItemListView.tsx

@@ -6,7 +6,7 @@ import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import InfiniteRepeater from "../../common/controls/repeater/InfiniteRepeater";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import EntityService from "../../services/EntityService";
-import { AppFile, IStoreItem, StoreItem, StoreMediaFile } from "../../model/model";
+import { AppFile, IStoreItem, IStoreTag, ITag, StoreItem, StoreMediaFile, StoreTag } from "../../model/model";
 import { Sql } from "../../common/Sql";
 import { apiPath } from "../../common/apiPath";
 import SocialMailApp from "../../common/SocialMailApp";
@@ -23,14 +23,33 @@ import { storeItemLink } from "./storeItemLink";
             grid-row:1;
             padding: 10px;
             display: flex;
-            flex-wrap: wrap;
-
+            flex-direction: column;
             gap: 10px;
+            & > .tags {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 5px;
+                & > * {
+                    cursor: pointer;
+                    border-radius: 5px;
+                    padding: 2px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    &:hover {
+                        color: highlight;
+                        text-decoration: underline;
+                    }
+                }
+            }
         }
 
         & > section {
             grid-row: 2;
             padding: 10px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: 10px;
 
             & .store-item {
                 display: inline-grid;
@@ -43,6 +62,10 @@ import { storeItemLink } from "./storeItemLink";
                 & > .name {
                     grid-column: 1 / span 2;
                     grid-row: 1;
+                    max-width:200px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
                 }
                 & > img {
                     grid-column: 1 / span 2;
@@ -55,6 +78,10 @@ import { storeItemLink } from "./storeItemLink";
                     grid-column: 1 / span 2;
                     grid-row: 3;
                     max-width: 200px;
+                    height: 3ch;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
                 }
                 & > .buy {
                     grid-column: 2;
@@ -95,6 +122,11 @@ export default class StoreItemListView extends AtomControl {
         this.render(<div data-shopping-cart-list="shopping-cart-list">
             <header>
                 <input type="search" value={Bind.twoWaysImmediate(() => this.search)}/>
+                <AtomRepeater
+                    class="tags"
+                    items={Bind.oneWayAsync((c, e, cancelToken) => this.searchTags(this.search, cancelToken), { default: [] })}
+                    itemRenderer={(x: IStoreTag) => <label text={x.tag.name}/>}
+                    />
             </header>
             <AtomRepeater
                 for="section"
@@ -135,6 +167,25 @@ export default class StoreItemListView extends AtomControl {
 
     }
 
+    async searchTags(search: string, cancelToken): Promise<any> {
+        let q = this.entityService.query(StoreTag);
+        if (search) {
+            search = search.trim().toLocaleLowerCase() + "%";
+            q = q.where({ search }, (p) => (x) =>
+                Sql.text.like(x.tag.lowerCaseName, p.search)
+                || Sql.text.like(x.tag.parent.lowerCaseName, p.search)
+            );
+        }
+        const tags = await q
+            .orderByDescending((x) => x.count)
+            .include((x) => x.tag)
+            .toPagedList({
+                size: 20,
+                cancelToken
+            });
+        return tags.items;
+    }
+
     async downloadImage(item: IStoreItem) {
         const file = await this.entityService.query(StoreMediaFile, "storeQuery", item.storeItemID, item.signed)
             .orderBy((x) => x.sortOrder)
@@ -145,7 +196,7 @@ export default class StoreItemListView extends AtomControl {
 
     async searchItems({
         start,
-        search,
+        search = "",
         size = 50,
         cancelToken
     }) {
@@ -157,11 +208,13 @@ export default class StoreItemListView extends AtomControl {
             );
         if (search) {
             search = search + "%";
-            q = q.where({ search }, (p) => (x) =>
+            const searchLower = search.trim().toLocaleLowerCase();
+            q = q.where({ search, searchLower }, (p) => (x) =>
                 (Sql.text.iLike(x.name, p.search)
                 || Sql.text.iLike(x.description, p.search)
                 || x.sizes.some((s) => Sql.text.iLike(s.name, p.search) || Sql.text.iLike(s.description, p.search))
                 || x.variants.some((s) => Sql.text.iLike(s.name, p.search) || Sql.text.iLike(s.description, p.search))
+                || x.storeItemTags.some((t) => Sql.text.like(t.tag.lowerCaseName, p.searchLower))
                 )
                 && x.sizeForID === null
                 && x.variantForID === null