diff --git a/admin/src/Membership/GroupBox.jsx b/admin/src/Membership/GroupBox.jsx
index 530e60a4a..164b9f9ec 100644
--- a/admin/src/Membership/GroupBox.jsx
+++ b/admin/src/Membership/GroupBox.jsx
@@ -40,6 +40,12 @@ function GroupBox(props) {
>
Behörigheter
+
+ Dörråtkomst
+
{props.children}
diff --git a/admin/src/Membership/GroupBoxDoorAccess.tsx b/admin/src/Membership/GroupBoxDoorAccess.tsx
new file mode 100644
index 000000000..f0db2337a
--- /dev/null
+++ b/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
(null);
+ const [options, setOptions] = useState([]);
+ const [items, setItems] = useState([]);
+ 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 (
+
+
+ {asset?.asset.images.map((img) => (
+ 
+ ))}
+ |
+
+ {asset !== undefined
+ ? asset.asset.name
+ : `Unknown Asset - ${item.accessy_asset_publication_guid}`}
+ |
+
+ {
+ await item.del();
+ await collection.fetch();
+ await post({
+ url: `/accessy/sync`,
+ expectedDataStatus: "ok",
+ });
+ }}
+ className="removebutton"
+ >
+
+
+ |
+
+ );
+ };
+
+ return (
+
+
+
+ All members of this group will get access to the following
+ Accessy assets if they have active labaccess.
+
+
+
+
+ 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) => (
+
+ {p.asset.images.length > 0 ? (
+
+ ) : null}
+
+ {p.asset.name}
+
+
+
+
+
+
+