@7365admin1/layer-common 3.2.1 → 3.2.2-staging.100

package/components/BuildingManagement/buildings.vue

@@ -1,46 +1,35 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn class="text-none" rounded="pill" variant="tonal" @click="setBuilding()" size="large"
-          v-if="canCreate && canCreateBuilding">
-          Add Block
-        </v-btn>
-      </v-row>
-    </v-col>
+    <!-- Title row; nav calls this screen "Blocks". The Add pill moves onto it. -->
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getBuildings()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-text-field v-model="searchInput" autocomplete="off" placeholder="Search" density="compact" hide-details
-              dense clearable class="mx-2" style="width: 200px;" />
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" @update:value="getBuildings()" />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table :headers="headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
-          <template #item.createdAt="{ value }">
-            {{ new Date(value).toLocaleDateString() }}
-          </template>
-          <template #item.levels="{ item }">
-            {{ item.levels.length }}
-          </template>
-        </v-data-table>
-      </v-card>
+      <PageHeader title="Blocks">
+        <template #actions>
+          <AppButton v-if="canCreate && canCreateBuilding" icon="mdi-plus" @click="setBuilding()">
+            Add Block
+          </AppButton>
+        </template>
+      </PageHeader>
     </v-col>
 
+    <!--
+      Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`.
+      `TableMain` draws the same card, the same refresh/search/page-range/pager
+      row and the same table - with the design's uppercase header row.
+    -->
+    <TableMain :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages"
+      :pageRange="pageRange" show-header @refresh="getBuildings()"
+      @update:page="page = $event; getBuildings()" @row-click="(data: any) => tableRowClickHandler(null, data)">
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
+      </template>
+      <template #item.createdAt="{ value }">
+        {{ new Date(value).toLocaleDateString() }}
+      </template>
+      <template #item.levels="{ item }">
+        {{ item.levels.length }}
+      </template>
+    </TableMain>
+
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" width="450" persistent>
       <BuildingForm :site="site" mode="add" :blocks="items" @cancel="createDialog = false" @success="successCreate()"

package/components/BuildingManagement/units.vue

@@ -1,50 +1,34 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn class="text-none" rounded="pill" variant="tonal" @click="setBuilding()" size="large"
-          v-if="canCreate && canCreateUnit">
-          Add Unit
-        </v-btn>
-        <v-btn class="text-none ml-2" rounded="pill" variant="tonal" @click="openBulkUploadFilePicker()" size="large"
-          :loading="bulkUploadLoading" v-if="canCreate && canCreateUnit">
-          <v-icon start>mdi-upload</v-icon>
-          Bulk Upload
-        </v-btn>
-        <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
-          @change="handleBulkUploadFileChange" />
-      </v-row>
-    </v-col>
+    <!-- Title row; nav calls this screen "Units". Both pills move onto it. -->
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getBuildingUnit()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-text-field v-model="searchInput" placeholder="Search" density="compact" hide-details dense clearable
-              class="mx-2" style="width: 200px;" />
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" @update:value="getBuildingUnit()" />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table :headers="props.headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
-          <template #item.block="{ value, item }">
-            {{ value ? `Block ${value}` : "" }}
-          </template>
-        </v-data-table>
-      </v-card>
+      <PageHeader title="Units">
+        <template #actions>
+          <AppButton v-if="canCreate && canCreateUnit" variant="ghost" icon="mdi-upload"
+            :disabled="bulkUploadLoading" @click="openBulkUploadFilePicker()">
+            Bulk Upload
+          </AppButton>
+          <AppButton v-if="canCreate && canCreateUnit" icon="mdi-plus" @click="setBuilding()">
+            Add Unit
+          </AppButton>
+        </template>
+      </PageHeader>
+      <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
+        @change="handleBulkUploadFileChange" />
     </v-col>
 
+    <!-- Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`. -->
+    <TableMain :headers="props.headers" :items="items" :loading="loading" :page="page" :pages="pages"
+      :pageRange="pageRange" show-header @refresh="getBuildingUnit()"
+      @update:page="page = $event; getBuildingUnit()" @row-click="(data: any) => tableRowClickHandler(null, data)">
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
+      </template>
+      <template #item.block="{ value, item }">
+        {{ value ? `Block ${value}` : "" }}
+      </template>
+    </TableMain>
+
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" :width="smAndUp ? '50svw' : '100%'" persistent>
       <BuildingUnitFormAdd :site="site" @cancel="createDialog = false" @success="successCreate()"

package/components/BulletinBoardManagement.vue

@@ -1,17 +1,30 @@
 <template>
     <v-row no-gutters>
+        <!-- Title left, primary action right - the design's opening row. -->
+        <v-col cols="12">
+            <PageHeader title="Bulletin Board">
+                <template #actions>
+                    <AppButton v-if="canCreateBulletinBoard" icon="mdi-plus" @click="handleCreateEvent">
+                        Add Announcement
+                    </AppButton>
+                </template>
+            </PageHeader>
+        </v-col>
+
         <TableMain :headers="headers" :items="paginatePlaceholderItem" v-model:search="searchInput"
             :loading="getAnnouncementPending" :page="page" :pages="pages" :pageRange="pageRange"
-            @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick"
-            @create="handleCreateEvent" :can-create="canCreateBulletinBoard" create-label="Add Announcement">
-            <template #extension>
-                <v-row no-gutters class="w-100 d-flex flex-column">
-                    <v-tabs v-model="status" color="primary" :height="40" @update:model-value="toRoute" class="w-100">
-                        <v-tab v-for="tab in tabOptions" :value="tab.status" :key="tab.status" class="text-capitalize">
-                            {{ tab.name }}
-                        </v-tab>
-                    </v-tabs>
-                </v-row>
+            @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick">
+            <!--
+                The tabs move ONTO the toolbar row (the design draws them there)
+                instead of a stacked strip above the table. Same options, same
+                order, same `toRoute` - which already sets the status itself.
+            -->
+            <template #tabs>
+                <button v-for="tab in tabOptions" :key="tab.status" type="button" role="tab" class="app-tab"
+                    :class="{ 'app-tab--active': status === tab.status }" :aria-selected="status === tab.status"
+                    @click="status = tab.status as any; toRoute(tab.status)">
+                    {{ tab.name }}
+                </button>
             </template>
 
             <template v-slot:item.createdAt="{ item }">