Groups now contain a list of doors they give access to, and this is synced automatically to accessy.

admin/dist/css/default.css

@@ -384,3 +384,9 @@ button > svg {
 .removebutton {
     color: #a00000;
 }
+
+.accessy-asset-img-thumbnail {
+    width: 70px;
+    height: 70px;
+    object-fit: cover;
+}

admin/src/Components/CollectionTable.js

@@ -25,8 +25,11 @@ const CollectionTable = (props) => {
         emptyMessage,
         className,
         onPageNav,
+        loading: loadingProp,
     } = props;
 
+    const effectivelyLoading = loading || loadingProp;
+
     useEffect(() => {
         const unsubscribe = collection.subscribe(({ page: p, items: i }) => {
             setPage(p);
@@ -170,15 +173,15 @@ const CollectionTable = (props) => {
                 <table
                     className={
                         "uk-table uk-table-small uk-table-striped uk-table-hover" +
-                        (loading ? " backboneTableLoading" : "")
+                        (effectivelyLoading ? " backboneTableLoading" : "")
                     }
                 >
                     <thead>
                         <tr>{headers}</tr>
                     </thead>
                     <tbody>{rows}</tbody>
                 </table>
-                {loading ? (
+                {effectivelyLoading ? (
                     <div className="loadingOverlay">
                         <div className="loadingWrapper">
                             <span>

admin/src/Membership/GroupBox.jsx

@@ -40,6 +40,12 @@ function GroupBox(props) {
                     >
                         Behörigheter
                     </NavItem>
+                    <NavItem
+                        icon={null}
+                        to={`/membership/groups/${group_id}/doors`}
+                    >
+                        Dörråtkomst
+                    </NavItem>
                 </ul>
                 {props.children}
             </div>

admin/src/Membership/GroupBoxDoorAccess.tsx

@@ -0,0 +1,207 @@
+import GroupDoorAccess from "Models/GroupDoorAccess";
+import React, { useEffect, useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
+import Select from "react-select";
+import CollectionTable from "../Components/CollectionTable";
+import Icon from "../Components/icons";
+import Collection from "../Models/Collection";
+import { get, post } from "../gateway";
+
+interface AccessyAsset {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    name: string;
+    description: string;
+    address: object;
+    images: {
+        id: string;
+        imageId: string;
+        thumbnailId: string;
+        size: number;
+        width: number;
+        height: number;
+    }[];
+    roomType: string;
+    category: string;
+    status: string;
+}
+
+interface AccessyAssetPublication {
+    id: string;
+}
+
+interface AccessyAssetWithPublication {
+    asset: AccessyAsset;
+    publication: AccessyAssetPublication;
+}
+
+const GroupBoxDoorAccess = () => {
+    const { group_id } = useParams<{ group_id: string }>();
+    const group_id_num = Number(group_id);
+    const [selectedOption, setSelectedOption] =
+        useState<AccessyAssetWithPublication | null>(null);
+    const [options, setOptions] = useState<AccessyAssetWithPublication[]>([]);
+    const [items, setItems] = useState<GroupDoorAccess[]>([]);
+    const [loading, setLoading] = useState(true);
+    const filteredOptions = useMemo(() => {
+        return options.filter((option) => {
+            return !items.some(
+                (item) =>
+                    item.accessy_asset_publication_guid ===
+                    option.publication.id,
+            );
+        });
+    }, [options, items]);
+
+    const collection = useMemo(
+        () =>
+            new Collection({
+                type: GroupDoorAccess,
+                url: `/membership/group/${group_id}/door_access_permissions`,
+                idListName: "door_access_permissions",
+                pageSize: 0,
+            }),
+        [group_id],
+    );
+
+    useEffect(() => {
+        get({ url: "/accessy/assets" }).then(({ data }) => {
+            setOptions(data);
+            setLoading(false);
+        });
+    }, []);
+
+    useEffect(() => {
+        // Purely for the rendering side-effect
+        const unsubscribe = collection.subscribe(({ items: newItems }) => {
+            setItems(newItems);
+        });
+
+        return () => {
+            unsubscribe();
+        };
+    }, [collection]);
+
+    const selectOption = async (item: AccessyAssetWithPublication | null) => {
+        setSelectedOption(item);
+
+        if (item !== null) {
+            let access = new GroupDoorAccess({
+                group_id: group_id_num,
+                accessy_asset_publication_guid: item.publication.id,
+            });
+            await access.save();
+            setSelectedOption(null);
+            await collection.fetch();
+            await post({
+                url: `/accessy/sync`,
+                expectedDataStatus: "ok",
+            });
+        }
+    };
+
+    const columns = [{ title: "Tillgångar" }];
+
+    const Row = ({ item }: { item: GroupDoorAccess }) => {
+        const asset = options.find(
+            (o) => o.publication.id === item.accessy_asset_publication_guid,
+        );
+        return (
+            <tr>
+                <td>
+                    {asset?.asset.images.map((img) => (
+                        <img
+                            className="accessy-asset-img-thumbnail"
+                            src={
+                                config.apiBasePath +
+                                `/accessy/image/${img.thumbnailId}`
+                            }
+                        />
+                    ))}
+                </td>
+                <td>
+                    {asset !== undefined
+                        ? asset.asset.name
+                        : `Unknown Asset - ${item.accessy_asset_publication_guid}`}
+                </td>
+                <td>
+                    <a
+                        onClick={async () => {
+                            await item.del();
+                            await collection.fetch();
+                            await post({
+                                url: `/accessy/sync`,
+                                expectedDataStatus: "ok",
+                            });
+                        }}
+                        className="removebutton"
+                    >
+                        <Icon icon="trash" />
+                    </a>
+                </td>
+            </tr>
+        );
+    };
+
+    return (
+        <div>
+            <div className="uk-margin-top uk-form-stacked">
+                <p>
+                    All members of this group will get access to the following
+                    Accessy assets if they have active labaccess.
+                </p>
+                <label className="uk-form-label" htmlFor="asset">
+                    Lägg till tillgång
+                </label>
+                <div className="uk-form-controls">
+                    <Select<AccessyAssetWithPublication, false>
+                        name="asset"
+                        className="uk-width-1-1"
+                        tabIndex={1}
+                        options={filteredOptions}
+                        value={selectedOption}
+                        getOptionValue={(p) => p.publication.id}
+                        getOptionLabel={(p) => p.asset.name}
+                        formatOptionLabel={(p) => (
+                            <div>
+                                {p.asset.images.length > 0 ? (
+                                    <img
+                                        className="accessy-asset-img-thumbnail"
+                                        src={
+                                            config.apiBasePath +
+                                            `/accessy/image/${
+                                                p.asset.images[0]!.thumbnailId
+                                            }`
+                                        }
+                                    />
+                                ) : null}
+                                <span className="uk-margin-left">
+                                    {p.asset.name}
+                                </span>
+                            </div>
+                        )}
+                        onChange={(p) => selectOption(p)}
+                        isDisabled={!filteredOptions.length}
+                        placeholder={
+                            !loading && options.length == 0
+                                ? "Inga Accessy-tillgångar hittades"
+                                : "Välj tillgång"
+                        }
+                    />
+                </div>
+            </div>
+            <div className="uk-margin-top">
+                <CollectionTable
+                    emptyMessage="Gruppen ger inga extra rättigheter att öppna dörrar"
+                    rowComponent={Row}
+                    loading={loading}
+                    collection={collection}
+                    columns={columns}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default GroupBoxDoorAccess;

admin/src/Membership/MembershipPeriodsInput.js

@@ -82,7 +82,6 @@ function MembershipPeriodsInput({ spans, member_id }) {
             post({
                 url: `/webshop/member/${member_id}/ship_labaccess_orders`,
                 headers: { "Content-Type": "application/json" },
-                payload: {},
                 expectedDataStatus: "ok",
             });
         });

admin/src/Membership/Routes.jsx

@@ -3,6 +3,7 @@ import { Route, Switch } from "react-router-dom";
 import { defaultSubpageRoute } from "../Components/Routes";
 import GroupAdd from "./GroupAdd";
 import GroupBox from "./GroupBox";
+import GroupBoxDoorAccess from "./GroupBoxDoorAccess";
 import GroupBoxEditInfo from "./GroupBoxEditInfo";
 import GroupBoxMembers from "./GroupBoxMembers";
 import GroupBoxPermissions from "./GroupBoxPermissions";
@@ -36,6 +37,7 @@ const Group = ({ match: { path } }) => (
                 path={`${path}/permissions`}
                 component={GroupBoxPermissions}
             />
+            <Route path={`${path}/doors`} component={GroupBoxDoorAccess} />
         </Switch>
     </GroupBox>
 );

admin/src/Models/Collection.ts

@@ -10,7 +10,7 @@ import { get, post } from "../gateway";
 // idListName: used for add and remove if collection supports it by pushing id list to to <url>/remove or <url>/add,
 //             this could be simpler if server handled removes in a better way
 export default class Collection<T extends { saved: { [key: string]: any } }> {
-    type: { new (data?: T | null): T; model: { root: string } };
+    type: { new (data?: T | null): T; model: { root?: string } };
     pageSize: number;
     url: string;
     idListName: string | null;
@@ -47,7 +47,7 @@ export default class Collection<T extends { saved: { [key: string]: any } }> {
         filter_out_value = null,
         includeDeleted = false,
     }: {
-        type: { new (data?: T | null): T; model: { root: string } };
+        type: { new (data?: T | null): T; model: { root?: string } };
         pageSize?: number;
         expand?: string | null;
         sort?: { key?: string; order?: string };
@@ -61,7 +61,12 @@ export default class Collection<T extends { saved: { [key: string]: any } }> {
     }) {
         this.type = type;
         this.pageSize = pageSize;
-        this.url = url || type.model.root;
+        this.url = url || type.model.root || "";
+        if (this.url == "") {
+            throw new Error(
+                `Collection for ${this.type.constructor.name} does not have a valid URL.`,
+            );
+        }
         this.idListName = idListName;
 
         this.items = null;
@@ -84,7 +89,7 @@ export default class Collection<T extends { saved: { [key: string]: any } }> {
     // Subscribe to data from server {items, page}, returns function for unsubscribing.
     subscribe(
         callback: (data: {
-            items: any[];
+            items: T[];
             page: { index: number; count: number };
         }) => void,
     ) {
@@ -124,12 +129,17 @@ export default class Collection<T extends { saved: { [key: string]: any } }> {
     }
 
     // Remove an item from this collection.
-    remove(item: { id: number }) {
+    remove(item: { id: number | null }) {
         if (!this.idListName) {
             throw new Error(
                 `Container for ${this.type.constructor.name} does not support remove.`,
             );
         }
+        if (item.id === null) {
+            throw new Error(
+                `Cannot remove item with null ID from ${this.type.constructor.name} collection.`,
+            );
+        }
 
         return post({
             url: this.url + "/remove",
@@ -139,7 +149,7 @@ export default class Collection<T extends { saved: { [key: string]: any } }> {
     }
 
     // Add an item to this collection.
-    add(item: { id: number }) {
+    add(item: { id: number | null }) {
         if (!this.idListName) {
             throw new Error(
                 `Container for ${this.type.constructor.name} does not support add.`,

admin/src/Models/GroupDoorAccess.ts

@@ -0,0 +1,18 @@
+import Base from "./Base";
+
+export default class GroupDoorAccess extends Base<GroupDoorAccess> {
+    group_id!: number;
+    accessy_asset_publication_guid!: string;
+    created_at!: Date | null;
+    updated_at!: Date | null;
+    deleted_at!: Date | null;
+
+    static model = {
+        root: "/membership/group_door_access_permissions",
+        id: "id",
+        attributes: {
+            accessy_asset_publication_guid: null,
+            deleted_at: null,
+        },
+    };
+}

api/src/membership/models.py

@@ -131,6 +131,22 @@ def __repr__(self) -> str:
 )
 
 
+class GroupDoorAccess(Base):
+    __tablename__ = "membership_group_door_access"
+
+    id: Mapped[int] = mapped_column(Integer, primary_key=True, nullable=False, autoincrement=True)
+    group_id: Mapped[int] = mapped_column(Integer, ForeignKey("membership_groups.group_id"))
+    accessy_asset_publication_guid: Mapped[str] = mapped_column(String(255))
+    created_at: Mapped[datetime] = mapped_column(DateTime, server_default=func.now())
+    updated_at: Mapped[datetime] = mapped_column(DateTime, server_default=func.now())
+    deleted_at: Mapped[Optional[datetime]]
+
+    group: Mapped[Group] = relationship(Group, backref="door_access", cascade_backrefs=False)
+
+    def __repr__(self) -> str:
+        return f"GroupDoorAccess(group_id={self.group_id}, door_guid={self.accessy_asset_publication_guid})"
+
+
 class Permission(Base):
     __tablename__ = "membership_permissions"