Add and edit lots of filters

const [open, setOpen] = useState(false);

<GoabxButton onClick={() => setOpen(true)}>Filters</GoabxButton>
      <GoabxDrawer
          heading="Filters"
          open={open}
          onClose={() => setOpen(false)}
          position="right"
          actions={
            <GoabButtonGroup>
              <GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
                Apply filters
              </GoabxButton>
              <GoabxButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
                Cancel
              </GoabxButton>
            </GoabButtonGroup>
          }
        >
          <GoabxFormItem label="Entry status">
            <GoabCheckboxList name="entryStatus" onChange={() => {}}>
              <GoabxCheckbox name="draft" text="Draft" value="draft" />
              <GoabxCheckbox name="published" text="Published" value="published" />
            </GoabCheckboxList>
          </GoabxFormItem>
          <GoabxFormItem label="Assigned to - Region" mt="l">
            <GoabCheckboxList name="region" onChange={() => {}}>
              <GoabxCheckbox name="calgary" text="Calgary" value="calgary" />
              <GoabxCheckbox name="central" text="Central" value="central" />
              <GoabxCheckbox name="edmonton" text="Edmonton" value="edmonton" />
              <GoabxCheckbox name="north" text="North" value="north" />
              <GoabxCheckbox name="south" text="South" value="south" />
            </GoabCheckboxList>
          </GoabxFormItem>
          <GoabxFormItem label="Assigned to" mt="l">
            <GoabxDropdown name="assignedTo" onChange={() => {}}>
              <GoabxDropdownItem value="1" label="Person 1" />
              <GoabxDropdownItem value="2" label="Person 2" />
            </GoabxDropdown>
          </GoabxFormItem>
          <GoabxFormItem label="Date taken" mt="l">
            <GoabxRadioGroup name="dateTaken" onChange={() => {}}>
              <GoabxRadioItem value="24" label="Last 24 hours" />
              <GoabxRadioItem value="72" label="Last 72 hours" />
            </GoabxRadioGroup>
          </GoabxFormItem>
      </GoabxDrawer>

open = false;
  assignedTo = "";
  takenBy = "";

  onClick() {
    this.open = true;
  }

  onClose() {
    this.open = false;
  }

  radioOnChange(event: any) {
    console.log(event);
  }

  onChangeAssignedTo(e: any) {
    this.assignedTo = e.value as string;
  }

  closeDrawer() {
    this.open = false;
  }

<goabx-button (onClick)="onClick()">Filters</goabx-button>
<goabx-drawer heading="Filters" [open]="open" (onClose)="onClose()" position="right" [actions]="actions">
  <goabx-form-item label="Entry status">
    <goab-checkbox-list name="entryStatus" (onChange)="onCheckboxChange($event)">
      <goabx-checkbox name="draft" text="Draft" value="draft"></goabx-checkbox>
      <goabx-checkbox name="published" text="Published" value="published"></goabx-checkbox>
    </goab-checkbox-list>
  </goabx-form-item>
  <goabx-form-item label="Assigned to - Region" mt="l">
    <goab-checkbox-list name="region" (onChange)="onCheckboxChange($event)">
      <goabx-checkbox name="calgary" text="Calgary" value="calgary"></goabx-checkbox>
      <goabx-checkbox name="central" text="Central" value="central"></goabx-checkbox>
      <goabx-checkbox name="edmonton" text="Edmonton" value="edmonton"></goabx-checkbox>
      <goabx-checkbox name="north" text="North" value="north"></goabx-checkbox>
      <goabx-checkbox name="south" text="South" value="south"></goabx-checkbox>
    </goab-checkbox-list>
  </goabx-form-item>
  <goabx-form-item label="Assigned to" mt="l">
    <goabx-dropdown [value]="assignedTo" name="assignedToData" (onChange)="onChangeAssignedTo($event)">
      <goabx-dropdown-item value="1" label="Person 1"></goabx-dropdown-item>
      <goabx-dropdown-item value="2" label="Person 2"></goabx-dropdown-item>
    </goabx-dropdown>
  </goabx-form-item>
  <goabx-form-item label="Date taken" mt="l">
    <goabx-radio-group name="dateTaken" (onChange)="radioOnChange($event)">
      <goabx-radio-item value="24" label="Last 24 hours"></goabx-radio-item>
      <goabx-radio-item value="72" label="Last 72 hours"></goabx-radio-item>
    </goabx-radio-group>
  </goabx-form-item>
  <ng-template #actions>
    <goab-button-group>
      <goabx-button type="primary" size="compact" (onClick)="closeDrawer()">Apply filters</goabx-button>
      <goabx-button type="tertiary" size="compact" (onClick)="closeDrawer()">Cancel</goabx-button>
    </goab-button-group>
  </ng-template>
</goabx-drawer>

const drawer = document.getElementById("filters-drawer");
const openBtn = document.getElementById("open-filters-btn");
const applyBtn = document.getElementById("apply-filters-btn");
const cancelBtn = document.getElementById("cancel-btn");

openBtn.addEventListener("_click", () => {
  drawer.setAttribute("open", "true");
});

drawer.addEventListener("_close", () => {
  drawer.removeAttribute("open");
});

applyBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

<goa-button version="2" id="open-filters-btn">Filters</goa-button>
<goa-drawer version="2" id="filters-drawer" heading="Filters" position="right">
  <goa-form-item version="2" label="Entry status">
    <goa-checkbox-list name="entryStatus">
      <goa-checkbox version="2" name="draft" text="Draft" value="draft"></goa-checkbox>
      <goa-checkbox version="2" name="published" text="Published" value="published"></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to - Region" mt="l">
    <goa-checkbox-list name="region">
      <goa-checkbox version="2" name="calgary" text="Calgary" value="calgary"></goa-checkbox>
      <goa-checkbox version="2" name="central" text="Central" value="central"></goa-checkbox>
      <goa-checkbox version="2" name="edmonton" text="Edmonton" value="edmonton"></goa-checkbox>
      <goa-checkbox version="2" name="north" text="North" value="north"></goa-checkbox>
      <goa-checkbox version="2" name="south" text="South" value="south"></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to" mt="l">
    <goa-dropdown version="2" name="assignedTo">
      <goa-dropdown-item value="1" label="Person 1"></goa-dropdown-item>
      <goa-dropdown-item value="2" label="Person 2"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Date taken" mt="l">
    <goa-radio-group version="2" name="dateTaken">
      <goa-radio-item value="24" label="Last 24 hours"></goa-radio-item>
      <goa-radio-item value="72" label="Last 72 hours"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group>
      <goa-button version="2" id="apply-filters-btn" type="primary" size="compact">Apply filters</goa-button>
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
    </goa-button-group>
  </div>
</goa-drawer>